You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.4 KiB
131 lines
3.4 KiB
<script lang="ts" setup>
|
|
import SettingFormulaConfig from 'components/formula/SettingFormulaConfig.vue'
|
|
import { useSystemStore } from 'stores/systemStore'
|
|
import { ref } from 'vue'
|
|
|
|
import Device from '@/components/setting/Device.vue'
|
|
import SystemDate from '@/components/setting/SystemDate.vue'
|
|
import User from '@/components/setting/User.vue'
|
|
import { useSettingStore } from '@/stores/settingStore'
|
|
|
|
const systemStore = useSystemStore()
|
|
const settingStore = useSettingStore()
|
|
const currentUserRoleType = JSON.parse(localStorage.getItem('user') || '{}')?.roleType
|
|
const settingMenus = settingStore.settingMenus.filter((item): boolean => item.roleType.includes(currentUserRoleType))
|
|
const selectedMenuCode = ref('defaultFormula')
|
|
// 选择菜单项的方法
|
|
const selectItem = (menuCode: string) => {
|
|
selectedMenuCode.value = menuCode
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dashboard-container">
|
|
<main class="main-content">
|
|
<div class="setting-left">
|
|
<div class="menu-container">
|
|
<ul class="menu-container">
|
|
<li
|
|
v-for="item in settingMenus"
|
|
:key="item.code"
|
|
:class="{ active: selectedMenuCode === item.code }"
|
|
class="setting-menu-li menu-item"
|
|
@click="selectItem(item.code)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="setting-right">
|
|
<SettingFormulaConfig
|
|
v-if="selectedMenuCode === 'defaultFormula'"
|
|
:editable="systemStore.systemUser?.roleType === 'admin'"
|
|
/>
|
|
<template v-if="selectedMenuCode === 'user'">
|
|
<User />
|
|
</template>
|
|
<div v-if="selectedMenuCode === 'date'">
|
|
<SystemDate />
|
|
</div>
|
|
<div v-if="selectedMenuCode === 'deviceInfo'">
|
|
<Device />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
height: 100%;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
.setting-left {
|
|
background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #ffffff 24%);
|
|
box-shadow: 0 0 4px #0000001f;
|
|
border-radius: 10px;
|
|
border: 1px solid #e1e1e1;
|
|
overflow: hidden;
|
|
}
|
|
.setting-right {
|
|
grid-column: 2 / 4;
|
|
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
|
|
background: #ffffff;
|
|
border: 1px solid #e1e1e1;
|
|
background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #ffffff 24%);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.menu-container {
|
|
padding: 5px 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
.setting-menu-li {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
padding: 15px 15px;
|
|
font-size: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
//border-radius: 10px;
|
|
height: 60px;
|
|
border-left: 5px solid #fff;
|
|
transition: border-left-color 0.3s ease;
|
|
}
|
|
li.active {
|
|
border-left: 5px solid #2892f3;
|
|
// color: #e6f7ff;
|
|
background: #e8f3ff;
|
|
//border-radius: 10px;
|
|
color: #2892f3;
|
|
}
|
|
|
|
.menu-container {
|
|
width: 100%; /* 占满父容器 */
|
|
background: #fff;
|
|
// border: 1px solid #eee;
|
|
overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
|
|
}
|
|
.menu-item {
|
|
padding: 14px 20px; /* 更大触摸区域 */
|
|
font-size: 15px; /* 适配手机阅读 */
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
/* 最后一项去掉分隔线 */
|
|
.menu-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|