添加主题

src/layout/HeaderV2/ScrollNotifications.vue

@@ -63,8 +63,8 @@ watch(() => data, async () => {
   adRef.value.innerHTML = null
   let div1 = document.createElement('div')
   let html = `
-    <span style="color: red">${data.systemUpdatesMessage}</span>
-    <span style="color: #0a84fd">${data.scrollingMessages}</span>
+    <span style="color: red">${data?.systemUpdatesMessage}</span>
+    <span style="color: #0a84fd">${data?.scrollingMessages}</span>
   `
   div1.innerHTML = html
   adRef.value.append(div1)

src/layout/HeaderV2/ToolInfoBar.vue

@@ -20,7 +20,7 @@
         <SizeChange/>
       </div>
       <div class="function-list-item">
-        <Theme/>
+        <theme/>
       </div>
       <div class="function-list-item" style="width: auto; margin-left: 6px;padding: 0 6px">
         <user-info @password="showPasswordLayer" @loginOut="loginOut"/>
@@ -38,10 +38,10 @@ import Download from './function-list/download.vue'
 import Message from './function-list/message.vue'
 import FullScreen from './function-list/fullscreen.vue'
 import SizeChange from './function-list/sizeChange.vue'
-import Theme from './function-list/theme.vue'
 import PasswordLayer from './PasswordLayer.vue'
 import UserInfo from "./function-list/UserInfo.vue";
 import ScrollNotifications from "./ScrollNotifications.vue";
+import Theme from "./function-list/Theme.vue";
 
 
 const store = useStore()

src/layout/HeaderV2/function-list/Theme.vue

@@ -3,20 +3,57 @@
     <div title="系统设置">
       <i class="sfont system-shezhi"></i>
     </div>
-    <el-drawer v-model="drawer" title="系统设置">
-      <el-divider content-position="right">全局设置</el-divider>
+    <el-drawer v-model="drawer" title="系统设置" custom-class="herder_height">
+      <el-divider>全局设置</el-divider>
+      <el-form>
 
+        <el-form-item label="侧边菜单栏背景色">
+          <el-color-picker v-model="theme.sideMenuBarBackgroundColor"/>
+        </el-form-item>
+
+        <el-form-item label="侧边菜单文字颜色">
+          <el-color-picker v-model="theme.sideMenuTextColor"/>
+        </el-form-item>
+
+        <el-form-item label="侧边菜单激活项背景色">
+          <el-color-picker v-model="theme.activateMenu"/>
+        </el-form-item>
+
+
+      </el-form>
     </el-drawer>
   </div>
 </template>
 
-<script setup name="Theme" lang="ts">
-import {$ref} from "vue/macros";
+<script setup name="Theme">
+import {clone} from '@/utils/clone'
+import store from '@/store'
 
-let drawer: boolean = $ref(true)
+let drawer = $ref(true)
+
+let theme = $ref({
+  // 侧边菜单激活项背景色
+  activateMenu: '',
+  // 侧边菜单文字颜色
+  sideMenuBarBackgroundColor: '',
+  // 侧边菜单栏背景色
+  sideMenuTextColor: ''
+})
+
+watch(() => theme, () => {
+  store.commit('app/setTheme', clone(theme))
+}, {deep: true})
+
+onMounted(() => {
+  theme = clone(store.state.app.theme)
+})
 
 </script>
 
 <style lang="scss" scoped>
-
+.herder_height {
+  :deep(.el-drawer__header ) {
+    margin-bottom: 10px !important;
+  }
+}
 </style>

src/layout/MenuV2/MenuItemV2.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script setup name='MenuItemV2' lang="ts">
-import {defineProps} from 'vue'
 
 const props = defineProps({
   data: Object

src/layout/MenuV2/MenuV2.vue

@@ -3,11 +3,12 @@
     <Logo ref="logoRef"/>
     <el-scrollbar :height="floatingRef?.clientHeight - logoRef?.clientHeight">
       <el-menu router
+               :text-color="theme?.sideMenuTextColor"
                :collapse-transition="false"
                :collapse="isCollapse"
                :default-active="activeMenu"
                :unique-opened="expandOneMenu">
-        <menu-item-v2 v-for="item in data" :data="item"></menu-item-v2>
+        <menu-item-v2 v-for="item in data" :data="item"/>
       </el-menu>
     </el-scrollbar>
   </div>
@@ -24,6 +25,7 @@ const data = store.state.user.routes
 const expandOneMenu = computed(() => store.state.app.expandOneMenu)
 const route = useRoute()
 const isCollapse = computed(() => store.state.app.isCollapse)
+const theme = computed(() => store.state?.app?.theme)
 
 const logoRef: Ref<HTMLHtmlElement> = ref(null)
 const floatingRef: Ref<HTMLHtmlElement> = ref(null)
@@ -55,6 +57,7 @@ const activeMenu = computed(() => {
   }
 
 }
+
 :deep(.el-sub-menu__title) {
   padding: 0 16px;
 }

src/store/modules/app.js

@@ -1,92 +1,96 @@
 import Cookies from 'js-cookie'
 
 const state = () => ({
-  isCollapse: true, // 侧边栏是否收缩展示
-  contentFullScreen: false, // 内容是否可全屏展示
-  showLogo: true, // 是否显示Logo
-  fixedTop: false, // 是否固定顶部, TODO，暂未使用
-  showTabs: true, // 是否显示导航历史
-  expandOneMenu: true, // 一次是否只能展开一个菜单
-  elementSize: 'small', // element默认尺寸
-  loading: false,
-  windowSize: {},
-  currentPageName: null,
-  jdt: {
-    title: null,
-    isOpen: false,
-    closeButton: false,
-  },
-  theme: {
-    state: {
-      style: 'default',
-      primaryColor: '#409eff',
-      menuType: 'side',
-    },
-  },
-  yiZhuLuRu: {
-    path: '/inpatient/zhuYuanYiSheng/yiZhuLuRu',
-  },
-  unreadMessageCount: 0, // 未查看的消息数量
-  systemMessages: [], // 已经看过的系统通知id
+    isCollapse: true, // 侧边栏是否收缩展示
+    contentFullScreen: false, // 内容是否可全屏展示
+    showLogo: true, // 是否显示Logo
+    fixedTop: false, // 是否固定顶部, TODO，暂未使用
+    showTabs: true, // 是否显示导航历史
+    expandOneMenu: true, // 一次是否只能展开一个菜单
+    elementSize: 'small', // element默认尺寸
+    loading: false,
+    windowSize: {},
+    currentPageName: null,
+    jdt: {
+        title: null,
+        isOpen: false,
+        closeButton: false,
+    },
+    theme: {
+        // 侧边菜单激活项背景色
+        activateMenu: '',
+        // 侧边菜单文字颜色
+        sideMenuBarBackgroundColor: '',
+        // 侧边菜单栏背景色
+        sideMenuTextColor: '',
+    },
+    yiZhuLuRu: {
+        path: '/inpatient/zhuYuanYiSheng/yiZhuLuRu',
+    },
+    unreadMessageCount: 0, // 未查看的消息数量
+    systemMessages: [], // 已经看过的系统通知id
 })
 
 // mutations
 const mutations = {
-  isCollapseChange(state, type) {
-    state.isCollapse = type
-  },
-  contentFullScreenChange(state, type) {
-    state.contentFullScreen = type
-  },
-  menuListChange(state, arr) {
-    state.menuList = arr
-  },
-  stateChange(state, option) {
-    state[option.name] = option.value
-  },
-  setLoading(state, val) {
-    //state.loading = val
-  },
-  setWindowSize(state, windowSize) {
-    state.windowSize = windowSize
-  },
-  setCurrentPageName(state, val) {
-    state.currentPageName = val
-  },
-  setJdt(state, val) {
-    Cookies.set('jdtTitle', val.title)
-    state.jdt = val
-  },
-  closeButton(state, val) {
-    state.jdt.closeButton = val
-  },
-  closeJdt(state) {
-    state.jdt.isOpen = false
-  },
-  titleJdt(state, val) {
-    state.jdt.title = val
-  },
-  setYzPath(state, val) {
-    state.yiZhuLuRu.path = val
-  },
-  setUnreadMessageCount(state, val) {
-    state.unreadMessageCount = val
-  },
-  setSystemMessages(state, val) {
-    if (val === null) {
-      state.systemMessages = []
-    } else {
-      state.systemMessages.push(val)
-    }
-  },
+    isCollapseChange(state, type) {
+        state.isCollapse = type
+    },
+    contentFullScreenChange(state, type) {
+        state.contentFullScreen = type
+    },
+    menuListChange(state, arr) {
+        state.menuList = arr
+    },
+    stateChange(state, option) {
+        state[option.name] = option.value
+    },
+    setLoading(state, val) {
+        //state.loading = val
+    },
+    setWindowSize(state, windowSize) {
+        state.windowSize = windowSize
+    },
+    setCurrentPageName(state, val) {
+        state.currentPageName = val
+    },
+    setJdt(state, val) {
+        Cookies.set('jdtTitle', val.title)
+        state.jdt = val
+    },
+    closeButton(state, val) {
+        state.jdt.closeButton = val
+    },
+    closeJdt(state) {
+        state.jdt.isOpen = false
+    },
+    titleJdt(state, val) {
+        state.jdt.title = val
+    },
+    setYzPath(state, val) {
+        state.yiZhuLuRu.path = val
+    },
+    setUnreadMessageCount(state, val) {
+        state.unreadMessageCount = val
+    },
+    setTheme(state, val) {
+        state.theme = val
+    },
+    setSystemMessages(state, val) {
+        if (val === null) {
+            state.systemMessages = []
+        } else {
+            state.systemMessages.push(val)
+        }
+    },
 }
 
 // actions
 const actions = {}
 
 export default {
-  namespaced: true,
-  state,
-  actions,
-  mutations,
+    namespaced: true,
+    state,
+    actions,
+    mutations,
 }