新版前端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/components/charts/index.vue

@@ -0,0 +1,56 @@
+<!--
+   本组件参考 arco-pro 的实现
+    https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/components/chart/index.vue
+    @auther: bypanghu<bypanghu@163.com>
+    @date: 2024/5/8
+!-->
+
+<template>
+  <VCharts
+    v-if="renderChart"
+    :option="options"
+    :autoresize="autoResize"
+    :style="{ width, height }"
+  />
+</template>
+
+<script  setup>
+import { ref, nextTick } from 'vue';
+import VCharts from 'vue-echarts';
+import { useWindowResize } from '@/hooks/use-windows-resize'
+
+defineProps({
+  options: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  autoResize: {
+    type: Boolean,
+    default: true,
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '100%',
+  },
+});
+const renderChart = ref(false);
+nextTick(() => {
+  renderChart.value = true;
+});
+useWindowResize(()=>{
+  renderChart.value = false;
+  nextTick(() => {
+    renderChart.value = true;
+  });
+
+})
+
+</script>
+
+<style scoped lang="less"></style>

web/src/components/commandMenu/index.vue

@@ -41,17 +41,17 @@
 
 <script setup>
 import { reactive, ref, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useRouterStore } from '@/pinia/modules/router'
-import { useUserStore } from '@/pinia/modules/user'
-
+import { useAppStore,useUserStore } from '@/pinia'
 defineOptions({
   name: 'CommandMenu',
 })
+const appStore = useAppStore()
+const userStore = useUserStore()
 
 const router = useRouter()
 const route = useRouter()
-const userStore = useUserStore()
 const routerStore = useRouterStore()
 const dialogVisible = ref(false)
 const searchInput = ref('')
@@ -134,10 +134,10 @@ const changeRouter = (e) => {
 
 const changeMode = (e) => {
   if (e === null) {
-    userStore.changeSideMode('dark')
+    appStore.toggleTheme(false )
     return
   }
-  userStore.changeSideMode(e)
+  appStore.toggleTheme(true )
 }
 
 const close = () => {
@@ -172,6 +172,7 @@ watch(searchInput, () => {
     color: #666;
   }
   .quick-input{
+    @apply bg-gray-50 dark:bg-gray-800;
     color: #666;
     border-radius: 4px 4px 0 0;
     border:none;
@@ -186,8 +187,8 @@ watch(searchInput, () => {
     padding: 8px;
     margin: 4px 0;
     &:hover{
+      @apply bg-gray-200 dark:bg-slate-500;
       cursor: pointer;
-      background: #eee;
       border-radius: 4px;
     }
   }

web/src/components/customPic/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="headerAvatar">
+  <span class="headerAvatar ">
     <template v-if="picType === 'avatar'">
       <el-avatar
         v-if="userStore.userInfo.headerImg"

web/src/components/warningBar/warningBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="px-1.5 py-2 flex items-center bg-amber-50 rounded gap-2 mb-3 text-amber-500"
+    class="px-1.5 py-2 flex items-center bg-amber-50 gap-2 mb-3 text-amber-500 dark:bg-gray-900 dark:text-gray-200"
     :class="href&&'cursor-pointer'"
     @click="open"
   >