新版前端UI，预发布2.6.4版本。 (#1735)

* fix: 修改 layout 中相关 emit 和 重复声明的 theme ，采用最新的vue api

* fix：修改 eslintrc 的配置文件，删除大多数无用配置

* fix: 修复 layout 切换手机样式模糊层的 bug

* feature: 重构 layout , 添加暗黑模式 ， 删除侧边栏颜色

* fix:细节调整，activeColor摘除。

* feature:右侧滚动模式调整

* feature:无用代码剔除

* fix: 修复暗黑模式相关细节

* fix: custome config layout

* feature:样式细节调整

* fix: 增加前端样式配置文件

* feature:调整基础配置，增加表格边框

* feature:buttomInfo取消底色，a标签更改为活跃色

* feature:调整阴影颜色和配置同步

* feature:版本调整2.6.3==>2.6.4

---------

Co-authored-by: bypanghu <bypanghu@163.com>

web/src/pinia/index.js

@@ -1,7 +1,13 @@
 import { createPinia } from 'pinia'
+import { useAppStore } from '@/pinia/modules/app'
+import { useUserStore } from '@/pinia/modules/user'
+import { useDictionaryStore } from '@/pinia/modules/dictionary'
 
 const store = createPinia()
 
 export {
-  store
+  store,
+  useAppStore,
+  useUserStore,
+  useDictionaryStore
 }

web/src/pinia/modules/app.js

@@ -0,0 +1,144 @@
+
+import { defineStore } from 'pinia'
+import { ref, watchEffect, reactive } from 'vue'
+import originSetting from  "@/config.json"
+import {  setBodyPrimaryColor } from '@/utils/format'
+export const useAppStore = defineStore('app', () => {
+  const theme = ref(localStorage.getItem('theme') || 'light')
+  const device = ref("")
+
+  const config = reactive({
+    weakness: false,
+    grey: false,
+    primaryColor: '#79B6E7',
+    showTabs: true,
+    darkMode: 'light',
+    layout_side_width : 256,
+    layout_side_collapsed_width : 80,
+    layout_side_item_height : 48,
+    show_watermark: false,
+  })
+
+  // 初始化配置
+  Object.keys(originSetting).forEach(key => {
+      config[key] = originSetting[key]
+    if(key === 'primaryColor'){
+      setBodyPrimaryColor(originSetting[key])
+    }
+  })
+
+  if (localStorage.getItem('darkMode')) {
+    config.darkMode = localStorage.getItem('darkMode')
+  }
+
+
+  watchEffect(() =>{
+    if (theme.value === 'dark'){
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.remove('light');
+      localStorage.setItem('theme', 'dark');
+    }else{
+        document.documentElement.classList.add('light');
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('theme', 'light');
+    }
+  })
+
+  const toggleTheme = (dark) => {
+    if (dark) {
+      theme.value = 'dark';
+    } else {
+      theme.value = 'light';
+    }
+  }
+
+  const toggleWeakness = (e) => {
+    config.weakness = e;
+    if(e) {
+      document.documentElement.classList.add('html-weakenss');
+    }else{
+      document.documentElement.classList.remove('html-weakenss');
+    }
+  }
+
+  const toggleGrey = (e) => {
+    config.grey = e;
+    if(e) {
+      document.documentElement.classList.add('html-grey');
+    }else{
+        document.documentElement.classList.remove('html-grey');
+    }
+  }
+
+  const togglePrimaryColor = (e) => {
+    config.primaryColor = e;
+    setBodyPrimaryColor(e)
+  }
+
+  const toggleTabs = (e) => {
+    config.showTabs = e;
+  }
+
+  const toggleDevice = (e) => {
+    device.value = e;
+  }
+
+  const toggleDarkMode = (e) => {
+    config.darkMode = e
+    localStorage.setItem('darkMode', e)
+    if(e === 'dark'){
+      toggleTheme(true)
+    }else{
+      toggleTheme(false)
+    }
+  }
+
+  const toggleDarkModeAuto = () =>{
+    // 处理浏览器主题
+    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const dark = darkQuery.matches
+    toggleTheme(dark)
+    darkQuery.addEventListener('change', (e) => {
+      toggleTheme(e.matches)
+    })
+  }
+
+  const toggleConfigSideWidth = (e) => {
+    config.layout_side_width = e;
+  }
+
+  const toggleConfigSideCollapsedWidth = (e) => {
+      config.layout_side_collapsed_width = e;
+  }
+
+  const toggleConfigSideItemHeight = (e) => {
+      config.layout_side_item_height = e;
+  }
+
+  const toggleConfigWatermark = (e) => {
+        config.show_watermark = e;
+  }
+
+  if(config.darkMode === 'auto'){
+    toggleDarkModeAuto()
+  }
+
+
+  return {
+    theme,
+    device,
+    config,
+    toggleTheme,
+    toggleDevice,
+    toggleWeakness,
+    toggleGrey,
+    togglePrimaryColor,
+    toggleTabs,
+    toggleDarkMode,
+    toggleConfigSideWidth,
+    toggleConfigSideCollapsedWidth,
+    toggleConfigSideItemHeight,
+    toggleConfigWatermark
+  }
+
+})

web/src/pinia/modules/user.js

@@ -16,7 +16,6 @@ export const useUserStore = defineStore('user', () => {
     headerImg: '',
     authority: {},
     sideMode: 'dark',
-    activeColor: 'var(--el-color-primary)',
     baseColor: '#fff'
   })
   const token = ref(window.localStorage.getItem('token') || cookie.get('x-token') || '')
@@ -134,9 +133,6 @@ export const useUserStore = defineStore('user', () => {
       return userInfo.value.baseColor
     }
   })
-  const activeColor = computed(() => {
-    return 'var(--el-color-primary)'
-  })
 
   watch(() => token.value, () => {
     window.localStorage.setItem('token', token.value)
@@ -155,7 +151,6 @@ export const useUserStore = defineStore('user', () => {
     sideMode,
     setToken,
     baseColor,
-    activeColor,
     loadingInstance,
     ClearStorage
   }