update optimize

package.json

@@ -6,7 +6,7 @@
   "url": "https://github.com/ZANJIAHAO1008/Admin-Frame-Vue3",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
     "preview": "vite preview --port 8888",
     "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
     "prettier": "prettier --write .",
@@ -25,7 +25,7 @@
     "default-passive-events": "^2.0.0",
     "driver.js": "^0.9.8",
     "echarts": "^5.1.2",
-    "element-plus": "^2.2.0",
+    "element-plus": "^2.2.1",
     "js-cookie": "^2.2.1",
     "md-editor-v3": "^1.4.4",
     "mockjs": "^1.1.0",

pnpm-lock.yaml

@@ -25,7 +25,7 @@ specifiers:
   default-passive-events: ^2.0.0
   driver.js: ^0.9.8
   echarts: ^5.1.2
-  element-plus: ^2.2.0
+  element-plus: ^2.2.1
   eslint: ^8.12.0
   eslint-config-prettier: ^8.5.0
   eslint-plugin-prettier: ^4.0.0
@@ -71,7 +71,7 @@ dependencies:
   default-passive-events: registry.npmmirror.com/default-passive-events/2.0.0
   driver.js: registry.npmmirror.com/driver.js/0.9.8
   echarts: registry.npmmirror.com/echarts/5.3.2
-  element-plus: registry.npmmirror.com/element-plus/2.2.0_vue@3.2.31
+  element-plus: registry.npmmirror.com/element-plus/2.2.1_vue@3.2.31
   js-cookie: registry.npmmirror.com/js-cookie/2.2.1
   md-editor-v3: registry.npmmirror.com/md-editor-v3/1.11.4
   mockjs: registry.npmmirror.com/mockjs/1.1.0
@@ -226,18 +226,18 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmmirror.com/@floating-ui/core/0.6.2:
-    resolution: {integrity: sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/core/-/core-0.6.2.tgz}
+  registry.npmmirror.com/@floating-ui/core/0.7.1:
+    resolution: {integrity: sha512-grcqEmI8DTIolufpxhJagVeJmvloxBXE6xxSrVnSXz/Wz1uUIsC85ad+UNBqAoBOvzLxE42wvDj3YkmSGqWRxA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/core/-/core-0.7.1.tgz}
     name: '@floating-ui/core'
-    version: 0.6.2
+    version: 0.7.1
     dev: false
 
-  registry.npmmirror.com/@floating-ui/dom/0.4.5:
-    resolution: {integrity: sha512-b+prvQgJt8pieaKYMSJBXHxX/DYwdLsAWxKYqnO5dO2V4oo/TYBZJAUQCVNjTWWsrs6o4VDrNcP9+E70HAhJdw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.4.5.tgz}
+  registry.npmmirror.com/@floating-ui/dom/0.5.1:
+    resolution: {integrity: sha512-dkPSy5JPiQEtljc3VpG9lauYctxfLlqj/8N9f+lmsR92gQaSVMAWuBbFBH2keY5DmdQn3p4Dv1dQd+e8osH+/g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.5.1.tgz}
     name: '@floating-ui/dom'
-    version: 0.4.5
+    version: 0.5.1
     dependencies:
-      '@floating-ui/core': registry.npmmirror.com/@floating-ui/core/0.6.2
+      '@floating-ui/core': registry.npmmirror.com/@floating-ui/core/0.7.1
     dev: false
 
   registry.npmmirror.com/@humanwhocodes/config-array/0.9.5:
@@ -1260,10 +1260,10 @@ packages:
     version: 1.2.1
     dev: true
 
-  registry.npmmirror.com/async-validator/4.0.7:
-    resolution: {integrity: sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/async-validator/-/async-validator-4.0.7.tgz}
+  registry.npmmirror.com/async-validator/4.1.1:
+    resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/async-validator/-/async-validator-4.1.1.tgz}
     name: async-validator
-    version: 4.0.7
+    version: 4.1.1
     dev: false
 
   registry.npmmirror.com/axios/0.21.4:
@@ -1752,22 +1752,22 @@ packages:
     version: 1.1.1
     dev: false
 
-  registry.npmmirror.com/element-plus/2.2.0_vue@3.2.31:
-    resolution: {integrity: sha512-zxmAFEAa1T/n09rR+NozXcWl5CjaFtqoaxhFSafag0dgc90tgEHitDXfegdFAl4ahugdNTqu9aLzngx3VhDAtA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.2.0.tgz}
-    id: registry.npmmirror.com/element-plus/2.2.0
+  registry.npmmirror.com/element-plus/2.2.1_vue@3.2.31:
+    resolution: {integrity: sha512-+U3Rq6S2lrzgFWlO1IvqBRtWuOGfyA84OSJOTDC8DHG6XkbNE507Thueb+9Ghk8eIqjGtpvje5hEQRWOJ85+pA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.2.1.tgz}
+    id: registry.npmmirror.com/element-plus/2.2.1
     name: element-plus
-    version: 2.2.0
+    version: 2.2.1
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': registry.npmmirror.com/@ctrl/tinycolor/3.4.1
       '@element-plus/icons-vue': registry.npmmirror.com/@element-plus/icons-vue/1.1.4_vue@3.2.31
-      '@floating-ui/dom': registry.npmmirror.com/@floating-ui/dom/0.4.5
+      '@floating-ui/dom': registry.npmmirror.com/@floating-ui/dom/0.5.1
       '@popperjs/core': registry.npmmirror.com/@sxzz/popperjs-es/2.11.7
       '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.182
       '@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.6
       '@vueuse/core': registry.npmmirror.com/@vueuse/core/8.5.0_vue@3.2.31
-      async-validator: registry.npmmirror.com/async-validator/4.0.7
+      async-validator: registry.npmmirror.com/async-validator/4.1.1
       dayjs: registry.npmmirror.com/dayjs/1.11.2
       escape-html: registry.npmmirror.com/escape-html/1.0.3
       lodash: registry.npmmirror.com/lodash/4.17.21

src/App.vue

@@ -8,13 +8,14 @@ import * as eCharts from "echarts";
 import { provide } from "vue";
 import { useConfigStore } from "@/pinia/modules/config";
 import { useMobile } from '@/common/mobile';
-import { useAppConfig } from '@/common/appConfig'
+import { useAppConfig } from '@/common/appConfig';
+import { useTagStore } from "@/pinia/modules/tag";
 const configStore = useConfigStore();
-const { isMobile } = useMobile(configStore);
+const tagStore = useTagStore();
+const { isMobile } = useMobile(configStore,tagStore);
 const { elConfig } = useAppConfig(configStore);
 provide("eCharts", eCharts); //全局穿透eCharts
 </script>
 <style lang="scss">
-@import "@/assets/style/index.scss";
-@import "@/assets/style/element-ui.scss";
+@use "@/assets/style/index.scss" as *;
 </style>

src/assets/style/dark.scss

@@ -52,4 +52,8 @@ html.dark {
   // .el-divider__text {
   //   background-color: var(--af-pop-bg-color);
   // }
+  .login-container {
+    background-color: var(--af-sidebar-color)!important;
+    background-image: none;
+  }
 }

src/assets/style/element-ui.scss

@@ -16,46 +16,4 @@
   &::-webkit-scrollbar {
     display: none;
   }
-}
-
-.el-menu:not(.el-menu--collapse) {
-  width: 200px;
-}
-
-.el-menu .el-menu-item.is-active {
-  // background-color: rgb(64, 158, 255) !important;
-}
-
-.sidebar::-webkit-scrollbar {
-  width: 0;
-}
-
-.sidebar > ul {
-  height: calc(100% - 65px);
-}
-
-.el-menu-item:focus,
-.el-menu-item:hover {
-  outline: 0px;
-  // background-color: #606266 !important;
-}
-
-.el-submenu__title:hover {
-  // background-color: #606266 !important;
-}
-
-.el-menu--vertical .sidebar-title {
-  padding-left: 8px !important;
-}
-
-.sidebar-nullIcon {
-  display: block;
-  text-align: center;
-}
-
-// drawer
-#el-drawer__title {
-  padding: 10px !important;
-  margin-bottom: 20px !important;
-  font-size: 16px !important;
-}
+}

src/assets/style/index.scss

@@ -1,3 +1,7 @@
+@use "animate.css/animate.min.css" as *;
+@use "@/assets/style/element-ui.scss" as *;
+@use "@/assets/css/font-awesome.min.css" as *; //font 样式
+
 @mixin min-wid($width) {
   // 最低宽度
   min-width: $width;

src/assets/style/light.scss

@@ -41,4 +41,8 @@ html {
       background-color: #409eff;
     }
   }
+  .login-container {
+    background-size: 100% 100%;
+    background-image: url("@/assets/image/BG.png");
+  }
 }

src/assets/style/element.scss → src/assets/style/theme.scss

@@ -24,3 +24,5 @@ $--colors: (
   $button-padding-horizontal: ("default": 50px)
 );
 @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+@use "@/assets/style/dark.scss" as *;
+@use "@/assets/style/light.scss" as *;

src/common/mobile.ts

@@ -2,7 +2,7 @@
  * @description 手机访问时添加一些默认配置
  */
 import { judgeEquipment } from "@/utils";
-export function useMobile(configStore: any) {
+export function useMobile(configStore: any, tagStore: any) {
   let isMobile = computed(() => {
     return Boolean(judgeEquipment());
   });
@@ -27,6 +27,9 @@ export function useMobile(configStore: any) {
         showSideBar: true, //是否显示菜单栏
       },
     });
+    tagStore.$patch({
+      collapse: true, //关闭菜单栏
+    });
   };
 
   onMounted(() => {

src/components/copy/index.vue

@@ -7,13 +7,8 @@
         </div>
       </template>
       <div class="text item">
-        <el-button
-          v-copy="'copydir'"
-          type="text"
-          class="copydir"
-          data-clipboard-text="我是指令复制"
-          >我是指令复制(点击复制)</el-button
-        >
+        <el-button v-copy="'copydir'" text type="primary" class="copydir" data-clipboard-text="我是指令复制">我是指令复制(点击复制)
+        </el-button>
       </div>
     </el-card>
 
@@ -24,13 +19,8 @@
         </div>
       </template>
       <div class="text item">
-        <el-button
-          type="text"
-          class="copyBtn"
-          data-clipboard-text="我是组件内方法复制"
-          @click="copy"
-          >我是组件内方法复制(点击复制)</el-button
-        >
+        <el-button text type="primary" class="copyBtn" data-clipboard-text="我是组件内方法复制" @click="copy">我是组件内方法复制(点击复制)
+        </el-button>
       </div>
     </el-card>
   </el-space>

src/components/message/feedbackCenter.vue

@@ -24,8 +24,8 @@
                 <el-table-column label="操作">
                     <template #default="scope">
                         <el-space spacer="|" style="color: #dedede">
-                            <el-button type="text">查看详情</el-button>
-                            <el-button type="text">处理</el-button>
+                            <el-button text type="primary">查看详情</el-button>
+                            <el-button text type="primary">处理</el-button>
                         </el-space>
                     </template>
                 </el-table-column>

src/layouts/components/Header/index.vue

@@ -40,7 +40,7 @@
           <i class="fa faPad fa-bell-o"></i>
         </el-badge>
       </span>
-      <span class="faSpan" @click="configVisible = true"  v-if="configStore.appConfig.showConfigMenu">
+      <span class="faSpan" @click="configVisible = true" v-if="configStore.appConfig.showConfigMenu">
         <i class="fa faPad fa-cogs"></i>
       </span>
       <!-- 用户名下拉菜单 -->
@@ -137,9 +137,9 @@ const requestFullScreen = () => {
 
 const switchCollapse = () => {
   //菜单栏展开关闭
-  setTimeout(() => {
-    tagStore.switchCollapse(!unref(collapse));
-  }, 0);
+  tagStore.$patch({
+    collapse: !unref(collapse)
+  })
 };
 
 const handleCommand = <T extends string>(command: T) => {

src/main.ts

@@ -3,10 +3,6 @@ import "@/pinia/modules/config";
 import App from "./App.vue";
 import router from "@/router";
 import pinia from "@/pinia";
-import "@/assets/css/font-awesome.min.css"; //font 样式
-import "animate.css/animate.min.css";
-import '@/assets/style/dark.scss'
-import '@/assets/style/light.scss'
 // import 'uno.css'
 import "default-passive-events";
 import "vue-global-api"; //自动引入vue插件

src/pinia/modules/tag.ts

@@ -49,9 +49,5 @@ export const useTagStore = defineStore({
       });
       this.tagsList = [...tagList];
     },
-    // 侧边栏折叠
-    switchCollapse(state: boolean) {
-      this.collapse = state;
-    },
   },
 });

src/views/Login.vue

@@ -91,8 +91,6 @@ const toLogin = async (formEl: FormInstance | undefined) => {
   position: relative;
   width: 100%;
   height: 100vh;
-  background-size: 100% 100%;
-  background-image: url("../assets/image/BG.png");
 
   .login-body {
     position: absolute;
@@ -104,7 +102,6 @@ const toLogin = async (formEl: FormInstance | undefined) => {
     box-sizing: border-box;
     margin-left: -198px;
     margin-top: -255px;
-    background-color: var(--af-bg-color);
 
     .logo {
       padding: 12px;

vite.config.ts

@@ -122,7 +122,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: '@use "@/assets/style/element.scss" as *;',
+        additionalData: '@use "@/assets/style/theme.scss" as *;',
       },
     },
     postcss: {