update 改成黑白灰

zhouhui.jiang
Commit dfc145bef692dab6508799517dedf5326e80020e dfc145be 1 parent fb603427
Showing 3 changed files with 98 additions and 104 deletions
frontend/components.d.ts
frontend/src/assets/styles/navigation.scss
frontend/src/assets/styles/variables.scss
--- a/frontend/components.d.ts
View file @dfc145b
+++ b/frontend/components.d.ts
View file @dfc145b
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
@@ -19,21 +18,16 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElText: typeof import('element-plus/es')['ElText']
     Header: typeof import('./src/components/layout/Header.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./src/components/layout/Sidebar.vue')['default']
     SidebarItem: typeof import('./src/components/layout/SidebarItem.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }
--- a/frontend/src/assets/styles/navigation.scss
View file @dfc145b
+++ b/frontend/src/assets/styles/navigation.scss
View file @dfc145b
@@ -106,13 +106,13 @@
   font-size: var(--el-font-size-small);
 }
-// Sidebar 导航规范 - 深色主题
+// Sidebar 导航规范 - 黑白灰主题
 .sidebar {
   width: var(--sidebar-width);
   height: 100vh;
-  background: #1a1a1a; // 深色背景
+  background: #ffffff; // 白色背景
-  border-right: 1px solid #333;
+  border-right: 1px solid var(--el-border-color);
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   transition: width 0.3s ease;
@@ -128,8 +128,8 @@
   align-items: center;
   justify-content: center;
   padding: 0 var(--el-spacing-large);
-  border-bottom: 1px solid #333;
+  border-bottom: 1px solid var(--el-border-color);
-  background: #1a1a1a;
+  background: #ffffff;
 }
 .logo-link {
@@ -138,7 +138,7 @@
   justify-content: center;
   gap: var(--el-spacing-base);
   text-decoration: none;
-  color: white;
+  color: var(--el-text-color-primary);
   transition: opacity 0.2s ease;
   width: 100%;
@@ -157,7 +157,7 @@
   font-family: var(--el-font-family);
   font-size: 20px;
   font-weight: 700;
-  color: white;
+  color: var(--el-text-color-primary);
   white-space: nowrap;
   letter-spacing: 1px;
 }
@@ -167,10 +167,10 @@
   overflow-y: auto;
 }
-// 菜单项样式 - 深色主题
+// 菜单项样式 - 黑白灰主题
 .el-menu {
   border-right: none;
-  background: #1a1a1a;
+  background: #ffffff;
 }
 .el-menu-item {
@@ -178,7 +178,7 @@
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
-  color: #ffffff;
+  color: var(--el-text-color-regular);
   height: 48px;
   line-height: 48px;
   margin: 2px 8px;
@@ -190,8 +190,8 @@
   padding: 0 16px;
   &.is-active {
-    color: #ffffff;
+    color: var(--el-text-color-primary);
-    background-color: #333333;
+    background-color: var(--el-bg-color-page);
     font-weight: 500;
     &::before {
@@ -202,14 +202,14 @@
       transform: translateY(-50%);
       width: 3px;
       height: 20px;
-      background-color: #007bff;
+      background-color: var(--el-color-primary);
       border-radius: 0 2px 2px 0;
     }
   }
   &:hover {
-    background-color: #333333;
+    background-color: var(--el-bg-color-page);
-    color: #ffffff;
+    color: var(--el-text-color-primary);
   }
   &:active {
@@ -232,7 +232,7 @@
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
-  color: #ffffff;
+  color: var(--el-text-color-regular);
   height: 48px;
   line-height: 48px;
   margin: 2px 8px;
@@ -243,8 +243,8 @@
   padding: 0 16px;
   &:hover {
-    background-color: #333333;
+    background-color: var(--el-bg-color-page);
-    color: #ffffff;
+    color: var(--el-text-color-primary);
   }
   &:active {
@@ -262,18 +262,18 @@
   }
 }
-// 子菜单 - 深色主题
+// 子菜单 - 黑白灰主题
 .el-submenu .el-menu-item {
   margin: 1px 16px;
   padding-left: 24px;
   height: 40px;
   line-height: 40px;
   font-size: 13px;
-  color: #cccccc;
+  color: var(--el-text-color-secondary);
   &.is-active {
-    color: #ffffff;
+    color: var(--el-text-color-primary);
-    background-color: #333333;
+    background-color: var(--el-bg-color-page);
     &::before {
       left: 16px;
@@ -281,21 +281,21 @@
   }
   &:hover {
-    background-color: #333333;
+    background-color: var(--el-bg-color-page);
-    color: #ffffff;
+    color: var(--el-text-color-primary);
   }
 }
-// 弹出菜单系统 (Flyout Menu) - 深色主题
+// 弹出菜单系统 (Flyout Menu) - 黑白灰主题
 .sidebar-flyout {
   position: fixed;
   top: var(--header-height);
   left: var(--sidebar-collapsed-width);
   width: 200px;
-  background: #1a1a1a;
+  background: #ffffff;
-  border: 1px solid #333;
+  border: 1px solid var(--el-border-color);
   border-left: none;
-  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   border-radius: 0 6px 6px 0;
   overflow: hidden;
@@ -309,7 +309,7 @@
     display: flex;
     align-items: center;
     padding: 8px 16px;
-    color: #ffffff;
+    color: var(--el-text-color-regular);
     text-decoration: none;
     transition: all 0.2s ease;
     font-family: var(--el-font-family);
@@ -319,13 +319,13 @@
     cursor: pointer;
     &:hover {
-      background: #333333;
+      background: var(--el-bg-color-page);
-      color: #ffffff;
+      color: var(--el-text-color-primary);
     }
     &.is-active {
-      background: #333333;
+      background: var(--el-bg-color-page);
-      color: #ffffff;
+      color: var(--el-text-color-primary);
       font-weight: 500;
       position: relative;
@@ -337,7 +337,7 @@
         transform: translateY(-50%);
         width: 3px;
         height: 20px;
-        background-color: #007bff;
+        background-color: var(--el-color-primary);
         border-radius: 0 2px 2px 0;
       }
     }
@@ -356,7 +356,7 @@
     .flyout-arrow {
       font-size: 12px;
-      color: #cccccc;
+      color: var(--el-text-color-secondary);
       transition: transform 0.2s ease;
       &.expanded {
@@ -366,14 +366,14 @@
   }
   .flyout-submenu {
-    background: #222222;
+    background: var(--el-bg-color-page);
-    border-top: 1px solid #333;
+    border-top: 1px solid var(--el-border-color);
     .flyout-subitem {
       display: flex;
       align-items: center;
       padding: 8px 24px;
-      color: #cccccc;
+      color: var(--el-text-color-secondary);
       text-decoration: none;
       transition: all 0.2s ease;
       font-family: var(--el-font-family);
@@ -383,13 +383,13 @@
       cursor: pointer;
       &:hover {
-        background: #333333;
+        background: var(--el-bg-color-page);
-        color: #ffffff;
+        color: var(--el-text-color-primary);
       }
       &.is-active {
-        background: #333333;
+        background: var(--el-bg-color-page);
-        color: #ffffff;
+        color: var(--el-text-color-primary);
         font-weight: 500;
       }
     }
--- a/frontend/src/assets/styles/variables.scss
View file @dfc145b
+++ b/frontend/src/assets/styles/variables.scss
View file @dfc145b
-// RuoYi 风格主题变量
+// 黑白灰主题变量
 :root {
-  // 主色调 - 蓝色主题
+  // 主色调 - 黑色主题
-  --el-color-primary: #409eff;
+  --el-color-primary: #000000;
-  --el-color-primary-light-3: #79bbff;
+  --el-color-primary-light-3: #333333;
-  --el-color-primary-light-5: #a0cfff;
+  --el-color-primary-light-5: #666666;
-  --el-color-primary-light-7: #c6e2ff;
+  --el-color-primary-light-7: #999999;
-  --el-color-primary-light-8: #d9ecff;
+  --el-color-primary-light-8: #cccccc;
-  --el-color-primary-light-9: #ecf5ff;
+  --el-color-primary-light-9: #f5f5f5;
-  --el-color-primary-dark-2: #337ecc;
+  --el-color-primary-dark-2: #000000;
-  // 成功色
+  // 成功色 - 深灰色
-  --el-color-success: #67c23a;
+  --el-color-success: #4a4a4a;
-  --el-color-success-light-3: #95d475;
+  --el-color-success-light-3: #6b6b6b;
-  --el-color-success-light-5: #b3e19d;
+  --el-color-success-light-5: #8c8c8c;
-  --el-color-success-light-7: #d1edc4;
+  --el-color-success-light-7: #adadad;
-  --el-color-success-light-8: #e1f3d8;
+  --el-color-success-light-8: #cecece;
-  --el-color-success-light-9: #f0f9ff;
+  --el-color-success-light-9: #efefef;
-  // 警告色
+  // 警告色 - 中灰色
-  --el-color-warning: #e6a23c;
+  --el-color-warning: #666666;
-  --el-color-warning-light-3: #eebe77;
+  --el-color-warning-light-3: #808080;
-  --el-color-warning-light-5: #f3d19e;
+  --el-color-warning-light-5: #999999;
-  --el-color-warning-light-7: #f8e3c5;
+  --el-color-warning-light-7: #b3b3b3;
-  --el-color-warning-light-8: #faecd8;
+  --el-color-warning-light-8: #cccccc;
-  --el-color-warning-light-9: #fdf6ec;
+  --el-color-warning-light-9: #e6e6e6;
-  // 危险色
+  // 危险色 - 深灰色
-  --el-color-danger: #f56c6c;
+  --el-color-danger: #333333;
-  --el-color-danger-light-3: #f89898;
+  --el-color-danger-light-3: #555555;
-  --el-color-danger-light-5: #fab6b6;
+  --el-color-danger-light-5: #777777;
-  --el-color-danger-light-7: #fcd3d3;
+  --el-color-danger-light-7: #999999;
-  --el-color-danger-light-8: #fde2e2;
+  --el-color-danger-light-8: #bbbbbb;
-  --el-color-danger-light-9: #fef0f0;
+  --el-color-danger-light-9: #dddddd;
-  // 信息色
+  // 信息色 - 浅灰色
-  --el-color-info: #909399;
+  --el-color-info: #999999;
-  --el-color-info-light-3: #b1b3b8;
+  --el-color-info-light-3: #b3b3b3;
-  --el-color-info-light-5: #c8c9cc;
+  --el-color-info-light-5: #cccccc;
-  --el-color-info-light-7: #dedfe0;
+  --el-color-info-light-7: #e0e0e0;
-  --el-color-info-light-8: #e9e9eb;
+  --el-color-info-light-8: #e9e9e9;
-  --el-color-info-light-9: #f4f4f5;
+  --el-color-info-light-9: #f2f2f2;
-  // 文本颜色
+  // 文本颜色 - 黑白灰渐变
-  --el-text-color-primary: #303133;
+  --el-text-color-primary: #000000;
-  --el-text-color-regular: #606266;
+  --el-text-color-regular: #333333;
-  --el-text-color-secondary: #909399;
+  --el-text-color-secondary: #666666;
-  --el-text-color-placeholder: #a8abb2;
+  --el-text-color-placeholder: #999999;
-  --el-text-color-disabled: #c0c4cc;
+  --el-text-color-disabled: #cccccc;
-  // 边框颜色
+  // 边框颜色 - 灰色渐变
-  --el-border-color: #dcdfe6;
+  --el-border-color: #e0e0e0;
-  --el-border-color-light: #e4e7ed;
+  --el-border-color-light: #e8e8e8;
-  --el-border-color-lighter: #ebeef5;
+  --el-border-color-lighter: #f0f0f0;
-  --el-border-color-extra-light: #f2f6fc;
+  --el-border-color-extra-light: #f8f8f8;
-  // 背景色
+  // 背景色 - 白色到浅灰
   --el-bg-color: #ffffff;
-  --el-bg-color-page: #f2f3f5;
+  --el-bg-color-page: #fafafa;
   --el-bg-color-overlay: #ffffff;
   // 布局相关
@@ -65,11 +65,11 @@
   --header-height: 50px;
   --breadcrumb-height: 40px;
-  // 阴影
+  // 阴影 - 黑白灰阴影
-  --el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);
-  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);
-  --el-box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --el-box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.08);
   // 圆角
   --el-border-radius-base: 4px;