✨ feat: 样式调整

klp-ui/src/assets/styles/element-ui.scss

@@ -274,11 +274,21 @@ body {
   }
 }
 
+.el-button--medium {
+  padding: 4px 8px;
+  font-size: 12px;
+  height: $--btn-height - 4px;
+}
+
 // 迷你按钮（超紧凑）
 .el-button--mini {
   padding: 4px 8px;
   font-size: 12px;
-  height: calc($--btn-height - 4px);
+  height: $--btn-height - 4px;
+}
+
+.el-button--mini.is-circle {
+  padding: 4px !important;
 }
 
 
@@ -290,7 +300,7 @@ body {
   box-shadow: $--metal-shadow;
   color: $--color-text-regular;
   overflow: hidden;
-  margin-top: calc($--form-item-margin * 2); // 与表单间距
+  margin-top: $--form-item-margin * 2; // 与表单间距
 
   // 分割线
   &::before {
@@ -635,8 +645,8 @@ body {
 
 // 自定义表格工具类（补充紧凑）
 .small-padding .cell {
-  padding-left: calc($--spacing-base / 2);
+  padding-left: $--spacing-base / 2;
-  padding-right: calc($--spacing-base / 2);
+  padding-right: $--spacing-base / 2;
 }
 
 .status-col .cell {
@@ -939,6 +949,15 @@ body {
   }
 }
 
+// 抽屉
+.el-drawer {
+  background: $--metal-gradient-light;
+  border: 1px solid $--border-color-light;
+  box-shadow: $--metal-shadow;
+  border-radius: 8px;
+  color: $--color-text-regular;
+}
+
 // Popover
 .el-popover {
   background: $--metal-gradient-light;
@@ -1410,12 +1429,12 @@ body {
 
     .el-descriptions__label,
     .el-descriptions__content {
-      padding: calc($--spacing-base / 2) $--spacing-base;
+      padding: $--spacing-base / 2 $--spacing-base;
       font-size: 12px;
     }
 
     .el-descriptions__header {
-      padding: calc($--spacing-base / 2) $--spacing-base;
+      padding: $--spacing-base / 2 $--spacing-base;
       font-size: 13px;
     }
   }
@@ -1424,12 +1443,12 @@ body {
 
     .el-descriptions__label,
     .el-descriptions__content {
-      padding: $--spacing-lg calc($--spacing-lg * 1.5);
+      padding: $--spacing-lg $--spacing-lg * 1.5;
       font-size: 14px;
     }
 
     .el-descriptions__header {
-      padding: $--spacing-base calc($--spacing-lg * 1.5);
+      padding: $--spacing-base $--spacing-lg * 1.5;
       font-size: 15px;
     }
   }

klp-ui/src/assets/styles/element-variables.scss

@@ -4,7 +4,7 @@
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
+$--color-primary: #5F7BA0;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;

klp-ui/src/assets/styles/sidebar.scss

@@ -14,7 +14,7 @@
   }
 
   .sidebarHide {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .sidebar-container {
@@ -86,7 +86,8 @@
       background: transparent;
     }
 
-    .el-menu-item, .el-submenu__title {
+    .el-menu-item,
+    .el-submenu__title {
       // 明确默认状态样式（关键修复）
       background: transparent !important;
       box-shadow: none !important;
@@ -112,7 +113,7 @@
     }
 
     // 深色主题下子菜单选中高亮
-    & .theme-dark .is-active > .el-submenu__title {
+    & .theme-dark .is-active>.el-submenu__title {
       color: #fff !important; // 选中时文字纯白
       // background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
       // border-left: 3px solid #5F7BA0; // 左边高亮条
@@ -152,6 +153,13 @@
     }
   }
 
+  .el-menu-item.is-active.submenu-title-noDropdown {
+    background: rgba(95, 123, 160, 0.28) !important; // 激活背景
+    color: #fff !important; // 激活文字白色
+    font-weight: 600;
+    border-left: 3px solid #5F7BA0; // 左边高亮条
+  }
+
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
@@ -205,6 +213,10 @@
     min-width: $base-sidebar-width !important;
   }
 
+  .el-submenu .el-menu{
+    padding-left: 10px;
+  }
+
   // mobile responsive
   .mobile {
     .main-container {
@@ -227,6 +239,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;

klp-ui/src/components/VditorEditor.vue

@@ -28,6 +28,12 @@ export default {
       value: this.value,
       height: 360,
       cache: { enable: false },
+      theme: 'dark',
+      preview: {
+        theme: {
+          current: 'dark'
+        }
+      },
       after: () => {
         this.vditor.setValue(this.value || '')
       },
@@ -66,6 +72,7 @@ export default {
 <style scoped>
 #vditor {
   border: 1px solid #e4e7ed;
+  color: white;
   border-radius: 4px;
 }
 </style>

klp-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: '#1e2227'}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
@@ -57,7 +57,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #111;
   text-align: center;
   overflow: hidden;
 

klp-ui/src/layout/components/Sidebar/index.vue

@@ -1,14 +1,14 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: '#1e2227' }">
         <logo v-if="showLogo" :collapse="isCollapse" />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
                 :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+                background-color="#1e2227"
                 :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                 :unique-opened="true"
-                :active-text-color="settings.theme"
+                active-text-color="#fff"
                 :collapse-transition="false"
                 mode="vertical"
             >

klp-ui/src/views/components/AllApplications.vue

@@ -233,7 +233,7 @@ export default {
 }
 
 .edit-btn {
-  color: #0078ff; /* 飞书常用的主题蓝 */
+  color: #687b98; /* 飞书常用的主题蓝 */
   padding: 0;
   font-size: 14px;
 }
@@ -307,13 +307,13 @@ export default {
 
 .app-icon {
   font-size: 24px; /* 调整图标大小 */
-  color: #0078ff; /* 主题蓝 */
+  color: #687b98; /* 主题蓝 */
 }
 
 // 应用名称样式
 .app-name {
   font-size: 14px; 
-  color: #2bf; /* 飞书常用的文本色 */
+  color: #687b98; /* 飞书常用的文本色 */
   text-align: center;
   white-space: nowrap;
   overflow: hidden;

klp-ui/src/views/index.vue

@@ -310,7 +310,7 @@ export default {
 .greeting-title {
   font-size: 28px;
   font-weight: 600;
-  color: #333;
+  color: #888;
 }
 
 .greeting-desc {

klp-ui/src/views/wms/order/components/PerformanceArea.vue

@@ -336,7 +336,7 @@ export default {
 .stat-number {
   font-size: 24px;
   font-weight: bold;
-  color: #409EFF;
+  color: #687b98;
   margin-bottom: 5px;
 }
 

klp-ui/src/views/wms/order/dashboard.vue

@@ -195,13 +195,13 @@ export default {
   margin: 0 0 8px 0;
   font-size: 20px;
   font-weight: 600;
-  color: #303133;
+  color: #ddd;
 }
 
 .section-title p {
   margin: 0;
   font-size: 14px;
-  color: #909399;
+  color: #ccc;
 }
 
 .top-row,