style: 样式修改

.eslintrc.cjs

@@ -29,7 +29,7 @@ module.exports = {
   rules: {
     // eslint (http://eslint.cn/docs/rules)
     'no-var': 'warn', // 要求使用 let 或 const 而不是 var
-    // 'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
+    'no-multiple-empty-lines': 'off', // 不允许多个空行
     'prefer-const': 'off', // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
     'no-use-before-define': 'off', // 禁止在 函数/类/变量 定义之前使用它们
     'prettier/prettier': [

.stylelintrc.cjs

@@ -20,7 +20,7 @@ module.exports = {
   rules: {
     'function-url-quotes': 'always', // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
     'color-hex-length': 'long', // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
-    'rule-empty-line-before': 'never', // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
+    'rule-empty-line-before': null, // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
     'font-family-no-missing-generic-family-keyword': null, // 禁止在字体族名称列表中缺少通用字体族关键字
     'scss/at-import-partial-extension': null, // 解决不能使用 @import 引入 scss 文件
     'property-no-unknown': null, // 禁止未知的属性

.vscode/settings.json

@@ -8,7 +8,7 @@
   "files.eol": "\n",
   "typescript.tsdk": "node_modules/typescript/lib",
   "[vue]": {
-    "editor.defaultFormatter": "Vue.volar"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@kjgl77/datav-vue3": "^1.7.2",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@vueuse/core": "^10.6.1",

src/config/index.ts

@@ -7,7 +7,7 @@ export const HOME_URL: string = '/index'
 export const LOGIN_URL: string = '/login'
 
 // 默认主题颜色
-export const DEFAULT_PRIMARY: string = '#009688'
+export const DEFAULT_PRIMARY: string = '#7FFFFF'
 
 // 路由白名单地址（本地存在的路由 staticRouter.ts 中）
 export const ROUTER_WHITE_LIST: string[] = ['/500', '/login', '/register']

src/layouts/LayoutTransverse/index.scss

@@ -1,6 +1,7 @@
 .el-container {
   width: 100%;
   height: 100%;
+  background-image: url('@/assets/images/bg0.png');
   :deep(.el-header) {
     box-sizing: border-box;
     display: flex;
@@ -8,20 +9,19 @@
     justify-content: space-between;
     height: 55px;
     padding: 0 15px 0 0;
-    background-color: var(--el-header-bg-color);
-    border-bottom: 1px solid var(--el-header-border-color);
+    border-bottom: 1px solid #4ca6ff;
     .logo {
       width: 210px;
       margin-right: 30px;
       .logo-img {
         width: 28px;
-        object-fit: contain;
         margin-right: 6px;
+        object-fit: contain;
       }
       .logo-text {
         font-size: 21.5px;
         font-weight: bold;
-        color: var(--el-header-logo-text-color);
+        color: #7fffff;
         white-space: nowrap;
       }
     }
@@ -29,24 +29,29 @@
       flex: 1;
       height: 100%;
       overflow: hidden;
+      background-color: transparent;
       border-bottom: none;
+      .el-menu-item {
+        // font-size: 20px !important;
+        color: #7fffff !important;
+      }
       .el-sub-menu__hide-arrow {
         width: 65px;
         height: 55px;
       }
       .el-menu-item.is-active {
-        color: #ffffff !important;
+        color: #7fffff !important;
       }
       .is-active {
-        background-color: var(--el-color-primary) !important;
-        border-bottom-color: var(--el-color-primary) !important;
+        background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
+        border-bottom: none;
         &::before {
           width: 0;
         }
         .el-sub-menu__title {
           color: #ffffff !important;
-          background-color: var(--el-color-primary) !important;
-          border-bottom-color: var(--el-color-primary) !important;
+          background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
+          border-bottom: none;
         }
       }
     }

src/layouts/components/Header/ToolBarRight.vue

@@ -5,7 +5,7 @@
       <!-- <AssemblySize id="assemblySize" /> -->
       <!-- <Language id="language" /> -->
       <!-- <SearchMenu id="searchMenu" /> -->
-      <!-- <ThemeSetting id="themeSetting" /> -->
+      <ThemeSetting id="themeSetting" />
       <!-- <Message id="message" /> -->
       <Fullscreen id="fullscreen" />
     </div>
@@ -20,7 +20,7 @@
 // import AssemblySize from './components/AssemblySize.vue'
 // import Language from './components/Language.vue'
 // import SearchMenu from './components/SearchMenu.vue'
-// import ThemeSetting from './components/ThemeSetting.vue'
+import ThemeSetting from './components/ThemeSetting.vue'
 // import Message from './components/Message.vue'
 import Fullscreen from './components/Fullscreen.vue'
 import Avatar from './components/Avatar.vue'
@@ -36,9 +36,11 @@ import Avatar from './components/Avatar.vue'
   align-items: center;
   justify-content: center;
   padding-right: 25px;
+
   .header-icon {
     display: flex;
     align-items: center;
+
     & > * {
       margin-left: 21px;
       color: var(--el-header-text-color);
@@ -46,6 +48,7 @@ import Avatar from './components/Avatar.vue'
 
     margin-right: 12px;
   }
+
   .username {
     margin: 0 20px;
     font-size: 15px;

src/layouts/components/Main/index.scss

@@ -2,7 +2,9 @@
   box-sizing: border-box;
   padding: 6px;
   overflow-x: hidden;
-  background-color: var(--el-bg-color-page);
+
+  // background-color: var(--el-bg-color-page);
+  background-color: transparent;
 }
 .el-footer {
   height: auto;

src/layouts/components/Menu/SubMenu.vue

@@ -34,39 +34,34 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
 
 <style lang="scss">
 .el-sub-menu .el-sub-menu__title:hover {
-  color: var(--el-menu-hover-text-color) !important;
-  background-color: var(--el-menu-active-bg-color) !important;
+  color: #7fffff !important;
+  background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
+}
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
+  color: #7fffff !important;
 }
 .el-sub-menu.is-active > .el-sub-menu__title {
-  color: var(--el-menu-active-color) !important;
-  background-color: var(--el-menu-bg-color) !important;
+  color: #7fffff !important;
+  background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
 }
 .el-menu--collapse {
   .is-active {
     .el-sub-menu__title {
-      color: #ffffff !important;
-      background-color: var(--el-color-primary) !important;
+      color: #7fffff !important;
+      background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
     }
   }
 }
 .el-menu-item {
   &:hover {
-    color: var(--el-menu-hover-text-color) !important;
-    background-color: var(--el-menu-active-bg-color) !important;
-  }
-  &.is-active {
     color: var(--el-menu-active-color) !important;
     background-color: var(--el-menu-active-bg-color) !important;
-    &::before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 6px;
-      content: '';
-      background-color: var(--el-color-primary);
-      border-radius: 6px;
-    }
   }
+
+  // &.is-active {
+  //   color: var(--el-menu-active-color) !important;
+  //   background-color: var(--el-menu-active-bg-color) !important;
+  // }
 }
 .vertical,
 .classic,

src/layouts/components/Tabs/index.scss

@@ -1,5 +1,7 @@
 .tabs-box {
-  background-color: var(--el-bg-color);
+  background-color: #0088cc;
+
+  // background-color: transparent;
   .tabs-menu {
     position: relative;
     width: 100%;
@@ -8,19 +10,21 @@
       top: 0;
       right: 0;
       bottom: 0;
+      background: rgb(127 255 255 / 20%);
       .more-button {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 43px;
         cursor: pointer;
-        border-left: 1px solid var(--el-border-color-light);
+        border-left: 1px solid #4ca6ff;
         transition: all 0.3s;
         &:hover {
-          background-color: var(--el-color-info-light-9);
+          background-color: rgb(127 255 255 / 20%);
         }
         .iconfont {
           font-size: 12.5px;
+          color: #7fffff;
         }
       }
     }
@@ -40,7 +44,7 @@
               display: flex;
               align-items: center;
               justify-content: center;
-              color: #afafaf;
+              color: #7fffff;
               border: none;
               .tabs-icon {
                 margin: 1.5px 4px 0 0;

src/main.ts

@@ -39,7 +39,6 @@ import SvgIcon from '@/components/SvgIcon/index.vue'
 import DictTag from '@/components/DictTag/index.vue'
 
 import { useDict } from '@/utils/dict'
-import DataVVue3 from '@kjgl77/datav-vue3'
 const app = createApp(App)
 
 // 全局方法挂载
@@ -56,4 +55,4 @@ Object.keys(Icons).forEach(key => {
 // eslint-disable-next-line vue/component-definition-name-casing
 app.component('svg-icon', SvgIcon)
 
-app.use(ElementPlus).use(directives).use(router).use(I18n).use(pinia).use(DataVVue3).mount('#app')
+app.use(ElementPlus).use(directives).use(router).use(I18n).use(pinia).mount('#app')

src/styles/element.scss

@@ -78,7 +78,9 @@ label {
   box-sizing: border-box;
   padding: 12px;
   overflow-x: hidden;
-  background-color: var(--el-bg-color);
+
+  // background-color: var(--el-bg-color);
+  background-color: transparent;
   border: 1px solid var(--el-border-color-light);
   border-radius: 6px;
   box-shadow: 0 0 12px rgb(0 0 0 / 5%);