新版前端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/view/layout/setting/index.vue

@@ -1,153 +1,136 @@
 <template>
-  <div>
-    <el-button
-      type="primary"
-      class="drawer-container"
-      icon="setting"
-      @click="showSettingDrawer"
-    />
-    <el-drawer
-      v-model="drawer"
-      title="系统配置"
-      :direction="direction"
-      :before-close="handleClose"
-    >
-      <div class="setting_body">
-        <div class="setting_card">
-          <div class="setting_content">
-            <div class="theme-box">
-              <div
-                class="item"
-                @click="changeMode('light')"
-              >
-                <div class="item-top">
-                  <el-icon
-                    v-if="userStore.mode === 'light'"
-                    class="check"
-                  >
-                    <check />
-                  </el-icon>
-                  <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
-                </div>
-                <p>
-                  简约白
-                </p>
-              </div>
-              <div
-                class="item"
-                @click="changeMode('dark')"
-              >
-                <div class="item-top">
-                  <el-icon
-                    v-if="userStore.mode === 'dark'"
-                    class="check"
-                  >
-                    <check />
-                  </el-icon>
-                  <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
-                </div>
-                <p>
-                  商务黑
-                </p>
-              </div>
-            </div>
+  <el-drawer
+    v-model="drawer"
+    title="系统配置"
+    direction="rtl"
+    :size="width"
+  >
+    <div class="flex flex-col">
+      <div class="mb-8">
+        <div class=" text-gray-800 dark:text-gray-100">
+          默认主题
+        </div>
+        <div class="mt-2 text-sm p-2 flex items-center gap-2">
+          <el-segmented v-model="config.darkMode" :options="options" size="default" @change="appStore.toggleDarkMode" />
+        </div>
+      </div>
+      <div class="mb-8">
+        <div class=" text-gray-800 dark:text-gray-100">
+          主题色
+        </div>
+        <div class="mt-2 text-sm p-2 flex items-center gap-2">
+          <div v-for="item in colors" :key="item" class=" w-5 h-5 rounded cursor-pointer flex items-center justify-center" :style="`background:${item}`" @click="appStore.togglePrimaryColor(item)">
+            <el-icon v-if="config.primaryColor === item">
+              <Select />
+            </el-icon>
+          </div>
+          <el-color-picker v-model="customColor" @change="appStore.togglePrimaryColor" />
+        </div>
+      </div>
+      <div class="mb-8">
+        <div class=" text-gray-800 dark:text-gray-100">
+          界面显示
+        </div>
+        <div class="mt-2 text-sm p-2">
+          <div class="flex items-center justify-between">
+            <div>展示水印</div>
+            <el-switch v-model="config.show_watermark" @change="appStore.toggleConfigWatermark" />
+          </div>
+          <div class="flex items-center justify-between">
+            <div>灰色模式</div>
+            <el-switch v-model="config.grey" @change="appStore.toggleGrey" />
+          </div>
+          <div class="flex items-center justify-between">
+            <div>色弱模式</div>
+            <el-switch v-model="config.weakness" @change="appStore.toggleWeakness" />
+          </div>
+
+          <div class="flex items-center justify-between">
+            <div>显示标签页</div>
+            <el-switch v-model="config.showTabs" @change="appStore.toggleTabs" />
           </div>
         </div>
       </div>
-    </el-drawer>
 
-  </div>
+      <div class="mb-8">
+        <div class=" text-gray-800 dark:text-gray-100">
+          layout 大小配置
+        </div>
+        <div class="mt-2 text-sm p-2">
+          <div class="flex items-center justify-between mb-2">
+            <div>侧边栏展开宽度</div>
+            <el-input-number v-model="config.layout_side_width" :min="150" :max="400" :step="10"></el-input-number>
+          </div>
+          <div class="flex items-center justify-between mb-2">
+            <div>侧边栏收缩宽度</div>
+            <el-input-number v-model="config.layout_side_collapsed_width" :min="60" :max="100"></el-input-number>
+          </div>
+          <div class="flex items-center justify-between mb-2">
+            <div>侧边栏子项高度</div>
+            <el-input-number v-model="config.layout_side_item_height" :min="30" :max="50"></el-input-number>
+          </div>
+        </div>
+      </div>
+
+
+      <el-alert type="warning" :closable="false">
+        请注意，所有配置请保存到本地文件的 <el-tag>config.json</el-tag> 文件中，否则刷新页面后会丢失配置
+      </el-alert>
+
+      <el-button type="primary" class="mt-4 " @click="copyConfig">复制配置json</el-button>
+    </div>
+  </el-drawer>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useUserStore } from '@/pinia/modules/user'
-
+import { useAppStore } from "@/pinia"
+import { storeToRefs } from "pinia"
+import { ref, computed } from "vue"
+import { ElMessage } from 'element-plus'
+const appStore = useAppStore()
+const {  config, device  } = storeToRefs(appStore)
 defineOptions({
-  name: 'Setting',
+  name: 'GvaSetting',
 })
 
-const drawer = ref(false)
-const direction = ref('rtl')
+const width = computed(() => {
+  return device.value === 'mobile' ? '100%' : '500px'
+})
 
-const userStore = useUserStore()
+const colors = [
+    '#EB2F96',
+    '#3b82f6',
+    '#2FEB54',
+    '#EBEB2F',
+    '#EB2F2F',
+    '#2FEBEB',
+]
 
-const handleClose = () => {
-  drawer.value = false
-}
-const showSettingDrawer = () => {
-  drawer.value = true
-}
-const changeMode = (e) => {
-  if (e === null) {
-    userStore.changeSideMode('dark')
-    return
-  }
-  userStore.changeSideMode(e)
+const drawer = defineModel('drawer',{
+  default: true,
+  type : Boolean
+})
+
+const options = ['dark','light','auto']
+
+const copyConfig = () => {
+  const input = document.createElement('textarea')
+  input.value = JSON.stringify(config.value)
+  // 添加回车
+  input.value = input.value.replace(/,/g, ',\n')
+  document.body.appendChild(input)
+  input.select()
+  document.execCommand('copy')
+  document.body.removeChild(input)
+  ElMessage.success('复制成功, 请自行保存到本地文件中')
 }
 
+const customColor = ref("")
+
 </script>
 
 <style lang="scss" scoped>
-.drawer-container {
-  transition: all 0.2s;
-  &:hover{
-    right: 0
-  }
-  position: fixed;
-  right: -20px;
-  bottom: 15%;
-  height: 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 999;
-  color: #fff;
-  border-radius: 4px 0 0 4px;
-  cursor: pointer;
-  -webkit-box-shadow: inset 0 0 6px rgba(0 ,0 ,0, 10%);
+::v-deep(.el-drawer__header){
+  @apply border-gray-400 dark:border-gray-600;
 }
-.setting_body{
-  padding: 20px;
-  .setting_card{
-    margin-bottom: 20px;
-  }
-  .setting_content{
-    margin-top: 20px;
-    display: flex;
-    flex-direction: column;
-    >.theme-box{
-     display: flex;
-    }
-    >.color-box{
-      div{
-        display: flex;
-        flex-direction: column;
-      }
-    }
-    .item{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      margin-right: 20px;
-      .item-top{
-        position: relative;
-      }
-      .check{
-        position: absolute;
-        font-size: 20px;
-        color: #00afff;
-        right:10px;
-        bottom: 10px;
-      }
-      p{
-        text-align: center;
-        font-size: 12px;
-      }
-    }
-  }
-}
-
 </style>