diff --git a/klp-ui/src/assets/images/avatar.png b/klp-ui/src/assets/images/avatar.png
new file mode 100644
index 00000000..357f31d4
Binary files /dev/null and b/klp-ui/src/assets/images/avatar.png differ
diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss
index d83e5318..33e2eaee 100644
--- a/klp-ui/src/assets/styles/element-ui.scss
+++ b/klp-ui/src/assets/styles/element-ui.scss
@@ -1,9 +1,14 @@
 // ====================== 1. 基础颜色变量（Sass直接处理）======================
-$primary-base: #5F7BA0;       /* 工业蓝灰（主色原始值） */
-$success-base: #2ECC71;       /* 成功色原始值 */
-$warning-base: #E67E22;       /* 警告色原始值 */
-$danger-base: #E74C3C;        /* 危险色原始值 */
-$info-base: #AEB6BF;          /* 次主色原始值 */
+$primary-base: #5F7BA0;
+/* 工业蓝灰（主色原始值） */
+$success-base: #2ECC71;
+/* 成功色原始值 */
+$warning-base: #E67E22;
+/* 警告色原始值 */
+$danger-base: #E74C3C;
+/* 危险色原始值 */
+$info-base: #AEB6BF;
+/* 次主色原始值 */
 
 // 背景色原始值
 $background-base: #2B2F36;
@@ -38,26 +43,27 @@ $--border-color: $border-color-base;
   --color-warning: #{$warning-base};
   --color-danger: #{$danger-base};
   --color-info: #{$info-base};
-  
+
   /* 背景层级 */
   --color-background: #{$background-base};
   --color-background-light: #{$background-light-base};
   --color-background-lighter: #{$background-lighter-base};
   --panel-bg: #{$panel-bg-base};
   --table-bg: #{$table-bg-base};
-  
+
   /* 文本色 */
   --color-text-primary: #FFFFFF;
   --color-text-regular: #EAEAEA;
   --color-text-secondary: #B6BDC5;
   --color-text-placeholder: #8A9098;
-  
+
   /* 边框色 */
   --border-color-base: #{$border-color-base};
   --border-color-light: #{$border-color-light};
   --border-color-lighter: #{$border-color-lighter};
-  --border-color: #{$--border-color}; /* 同步新增的边框色变量 */
-  
+  --border-color: #{$--border-color};
+  /* 同步新增的边框色变量 */
+
   /* 间距/尺寸体系 */
   --spacing-sm: #{$--spacing-sm};
   --spacing-base: #{$--spacing-base};
@@ -65,13 +71,13 @@ $--border-color: $border-color-base;
   --spacing-lg: #{$--spacing-lg};
   --form-item-margin: #{$--form-item-margin};
   --btn-height: #{$--btn-height};
-  
+
   /* 金属质感变量 */
   --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41);
   --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A);
-  --metal-highlight: rgba(255,255,255,.14);
-  --metal-shadow: 5px 5px 12px rgba(0,0,0,.22), -5px -5px 12px rgba(255,255,255,.06);
-  --metal-shadow-inset: inset 3px 3px 6px rgba(0,0,0,.28), inset -3px -3px 6px rgba(255,255,255,.06);
+  --metal-highlight: rgba(255, 255, 255, .14);
+  --metal-shadow: 5px 5px 12px rgba(0, 0, 0, .22), -5px -5px 12px rgba(255, 255, 255, .06);
+  --metal-shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, .28), inset -3px -3px 6px rgba(255, 255, 255, .06);
 }
 
 
@@ -97,7 +103,8 @@ $--color-text-placeholder: var(--color-text-placeholder) !default;
 $--border-color-base: $border-color-base !default;
 $--border-color-light: $border-color-light !default;
 $--border-color-lighter: $border-color-lighter !default;
-$--border-color: $--border-color !default; /* 关键修复：同步到Element变量 */
+$--border-color: $--border-color !default;
+/* 关键修复：同步到Element变量 */
 
 // 间距变量
 $--spacing-sm: $--spacing-sm !default;
@@ -156,7 +163,7 @@ body {
   border: 1px solid $border-color;
   box-shadow: $--metal-shadow;
   border-radius: 6px;
-  text-shadow: 0 1px 0 rgba(0,0,0,.16);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, .16);
   transition: all .25s ease;
   height: $--btn-height;
   padding: 0 var(--spacing-lg);
@@ -167,7 +174,7 @@ body {
     color: $text-color;
     background: $--metal-gradient-dark;
     border-color: $--border-color-base;
-    box-shadow: 6px 6px 14px rgba(0,0,0,.28), -6px -6px 14px rgba(255,255,255,.08);
+    box-shadow: 6px 6px 14px rgba(0, 0, 0, .28), -6px -6px 14px rgba(255, 255, 255, .08);
     transform: translateY(-1px);
   }
 
@@ -188,30 +195,33 @@ body {
 // 主按钮（品牌梯度）
 .el-button--primary {
   @include button-variant(#fff, darken($--color-primary, 10%));
-  background: linear-gradient(145deg, lighten($--color-primary,6%), darken($--color-primary,6%));
-  border-color: darken($--color-primary,10%);
+  background: linear-gradient(145deg, lighten($--color-primary, 6%), darken($--color-primary, 6%));
+  border-color: darken($--color-primary, 10%);
 
   &:hover {
-    background: linear-gradient(145deg, $--color-primary, darken($--color-primary,8%));
+    background: linear-gradient(145deg, $--color-primary, darken($--color-primary, 8%));
   }
 }
 
 // 功能按钮（统一风格）
 .el-button--success {
   @include button-variant(#fff, darken($--color-success, 10%));
-  background: linear-gradient(145deg, lighten($--color-success,6%), darken($--color-success,6%));
+  background: linear-gradient(145deg, lighten($--color-success, 6%), darken($--color-success, 6%));
 }
+
 .el-button--warning {
   @include button-variant(#fff, darken($--color-warning, 10%));
-  background: linear-gradient(145deg, lighten($--color-warning,6%), darken($--color-warning,6%));
+  background: linear-gradient(145deg, lighten($--color-warning, 6%), darken($--color-warning, 6%));
 }
+
 .el-button--danger {
   @include button-variant(#fff, darken($--color-danger, 10%));
-  background: linear-gradient(145deg, lighten($--color-danger,6%), darken($--color-danger,6%));
+  background: linear-gradient(145deg, lighten($--color-danger, 6%), darken($--color-danger, 6%));
 }
+
 .el-button--info {
   @include button-variant(#111, darken($--color-info, 10%));
-  background: linear-gradient(145deg, lighten($--color-info,6%), darken($--color-info,6%));
+  background: linear-gradient(145deg, lighten($--color-info, 6%), darken($--color-info, 6%));
 }
 
 // 文本按钮（低干扰）
@@ -253,9 +263,11 @@ body {
       border-radius: 6px 0 0 6px;
       border-left: none;
     }
+
     &:last-child {
       border-radius: 0 6px 6px 0;
     }
+
     &:not(:last-child) {
       border-right: none;
     }
@@ -287,7 +299,7 @@ body {
 
   // 表头（深灰黑 + 纯白文字）
   .el-table__header-wrapper {
-    th {
+    th.el-table__cell {
       background: #1F2227;
       color: $--color-text-primary;
       font-weight: 600;
@@ -301,21 +313,25 @@ body {
   // 表体（奇偶行交替 + hover高亮）
   .el-table__body-wrapper {
     .el-table__row {
+
       // 奇数行
       &:nth-child(odd) .el-table__cell {
         background: #2F3339;
         color: #EAEAEA;
       }
+
       // 偶数行
       &:nth-child(even) .el-table__cell {
         background: #353A40;
         color: #EAEAEA;
       }
+
       //  hover
       &:hover .el-table__cell {
         background: rgba($--color-primary, 0.25);
         color: #888888;
       }
+
       // 当前行
       &.current-row .el-table__cell {
         background: rgba($--color-primary, 0.35);
@@ -366,6 +382,257 @@ body {
   }
 }
 
+.el-table__fixed-right {
+  // 表头（深灰黑 + 纯白文字）
+  .el-table__fixed-header-wrapper {
+    th.el-table__cell {
+      background: #1F2227;
+      color: $--color-text-primary;
+      font-weight: 600;
+      border-bottom: 1px solid #444A52;
+      padding: 4px !important; // 紧凑 padding
+      font-size: 13px;
+    }
+  }
+
+  // 表体（奇偶行交替 + hover高亮）
+  .el-table__fixed-body-wrapper {
+    .el-table__row {
+
+      // 奇数行
+      &:nth-child(odd) .el-table__cell {
+        background: #2F3339;
+        color: #EAEAEA;
+      }
+
+      // 偶数行
+      &:nth-child(even) .el-table__cell {
+        background: #353A40;
+        color: #EAEAEA;
+      }
+
+      // 当前行
+      &.current-row .el-table__cell {
+        background: rgba($--color-primary, 0.35);
+        color: $--color-text-primary;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+// ---------------------- 3.2 日期范围选择器 ----------------------
+// 日期范围选择器主题样式
+.el-date-editor {
+  height: $--btn-height;
+
+  // 基础样式
+  &.el-range-editor {
+    background: $--color-background;
+    border: 1px solid $--border-color;
+    border-radius: 4px;
+    color: $--color-text-regular;
+    height: $--btn-height;
+    padding: 0 8px;
+    box-shadow: none;
+    transition: all 0.2s ease;
+
+    // 悬停状态
+    &:hover {
+      border-color: $--color-primary;
+      box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
+    }
+
+    // 聚焦状态
+    &.is-focus {
+      border-color: $--color-primary;
+      box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
+      outline: none;
+    }
+
+    // 图标样式
+    .el-input__icon {
+      color: $--color-text-secondary;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+
+      &:hover {
+        color: $--color-primary;
+      }
+    }
+
+    // 输入框样式
+    .el-range-input {
+      background: transparent;
+      border: none;
+      color: $--color-text-regular;
+      padding: 0 4px;
+      height: 100%;
+      font-size: 13px;
+      width: 80px;
+
+      &::placeholder {
+        color: $--color-text-placeholder;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    // 分隔符样式
+    .el-range-separator {
+      color: $--color-text-secondary;
+      padding: 0 4px;
+      font-size: 13px;
+    }
+
+    // 清除图标
+    .el-range__close-icon {
+      margin-left: 4px;
+
+      &:hover {
+        color: $--color-danger;
+      }
+    }
+  }
+
+  &--medium.el-input__inner {
+    height: auto;
+  }
+}
+
+.el-range-editor--medium.el-input__inner {
+  height: $--btn-height !important;
+  width: auto !important;
+
+  .el-range-separator {
+    padding: 0;
+    line-height: 16px;
+    font-size: 13px;
+    color: $--color-text-secondary;
+  }
+}
+
+// 日期选择面板样式
+.el-picker-panel {
+  background: $--color-background;
+  border: 1px solid $--border-color;
+  border-radius: 6px;
+  box-shadow: $--metal-shadow;
+  color: $--color-text-regular;
+
+  // 头部导航
+  .el-picker-panel__header {
+    border-bottom: 1px solid $--border-color-lighter;
+    padding: 6px 10px;
+
+    button {
+      color: $--color-text-secondary;
+
+      &:hover {
+        color: $--color-primary;
+        background: rgba($--color-primary, 0.1);
+      }
+    }
+
+    .el-picker-panel__icon-btn {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      border-radius: 4px;
+    }
+
+    .el-date-picker__header-label {
+      color: $--color-text-primary;
+      font-weight: 500;
+    }
+  }
+
+  // 日期表格
+  .el-date-table {
+    border-collapse: separate;
+    border-spacing: 2px;
+
+    th {
+      color: $--color-text-secondary;
+      font-weight: normal;
+      padding: 4px 0;
+      font-size: 12px;
+    }
+
+    td {
+      padding: 0;
+
+      .el-date-table__cell {
+        width: 28px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 4px;
+        margin: 1px;
+        font-size: 13px;
+
+        &:hover {
+          background: rgba($--color-primary, 0.2);
+        }
+
+        &.current {
+          background: $--color-primary;
+          color: #fff;
+        }
+
+        &.in-range {
+          background: rgba($--color-primary, 0.1);
+
+          &::before {
+            background: $--color-primary;
+          }
+        }
+
+        &.start-date,
+        &.end-date {
+          background: $--color-primary;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  // 范围选择器底部按钮
+  .el-range-picker__footer {
+    border-top: 1px solid $--border-color-lighter;
+    padding: 6px 10px;
+
+    button {
+      background: $--color-background-light;
+      border: 1px solid $--border-color;
+      color: $--color-text-regular;
+      height: 24px;
+      line-height: 22px;
+      padding: 0 12px;
+      font-size: 12px;
+      border-radius: 4px;
+
+      &:hover {
+        background: rgba($--color-primary, 0.2);
+        border-color: $--color-primary;
+      }
+
+      &.el-button--primary {
+        background: $--color-primary;
+        border-color: $--color-primary;
+        color: #fff;
+
+        &:hover {
+          background: lighten($--color-primary, 10%);
+          border-color: lighten($--color-primary, 10%);
+        }
+      }
+    }
+  }
+}
+
 // 自定义表格工具类（补充紧凑）
 .small-padding .cell {
   padding-left: calc($--spacing-base / 2);
@@ -382,7 +649,6 @@ body {
 // 表单项布局
 .el-form-item {
   margin-bottom: $--form-item-margin !important;
-  label-align: right; // 标签右对齐
   font-size: 13px;
 
   // 标签样式
@@ -412,7 +678,6 @@ body {
     border-radius: 0;
     height: $--btn-height;
     line-height: $--btn-height;
-    padding: 0 $--spacing-base;
     font-size: 13px;
 
     &::placeholder {
@@ -508,12 +773,15 @@ body {
 
   .el-input-number__increase {
     border-radius: 0;
+
     .el-icon-plus {
       color: $--color-text-regular;
     }
   }
+
   .el-input-number__decrease {
     border-radius: 0;
+
     .el-icon-minus {
       color: $--color-text-regular;
     }
@@ -521,6 +789,7 @@ body {
 
   // 迷你尺寸
   &.el-input-number--small {
+
     .el-input-number__increase,
     .el-input-number__decrease {
       width: 24px;
@@ -556,6 +825,7 @@ body {
       &:hover {
         background-color: rgba($--color-primary, .12);
       }
+
       &.selected {
         background-color: rgba($--color-primary, .20);
         color: #fff;
@@ -580,6 +850,7 @@ body {
 .el-slider__bar {
   background: $--metal-gradient-dark;
 }
+
 .el-slider__button {
   background: $--metal-gradient-light;
   border-color: $--border-color-light;
@@ -649,6 +920,10 @@ body {
     border-bottom: 1px solid $--border-color-lighter;
   }
 
+  .el-dialog__title {
+    color: $--color-text-primary;
+  }
+
   // 对话框主体
   .el-dialog__body {
     padding: $--spacing-lg;
@@ -699,11 +974,12 @@ body {
     &::after {
       background: $--metal-gradient-light;
     }
+
     border-color: $--border-color-light;
   }
 }
 
-.el-button-group + .el-popover {
+.el-button-group+.el-popover {
   margin-left: 5px;
 }
 
@@ -715,8 +991,8 @@ body {
 
   // 标签栏
   .el-tabs__header {
-    margin: 0 0 var(--spacing-lg) 0;
-    padding: 0 var(--spacing-base);
+    margin: 0;
+    padding: 0;
     border-bottom: 1px solid $--border-color-light;
     background-color: transparent;
 
@@ -724,7 +1000,7 @@ body {
     .el-tabs__nav {
       height: 40px;
       line-height: 40px;
-      background-color: $--color-background-light;
+      // background-color: $--color-background-light;
       border-radius: 6px 6px 0 0;
       padding: 0 var(--spacing-base);
       box-shadow: inset 0 -1px 0 $--border-color-light;
@@ -735,8 +1011,8 @@ body {
       color: $--color-text-secondary;
       height: 40px;
       line-height: 40px;
-      padding: 0 var(--spacing-lg);
-      margin: 0 var(--spacing-sm);
+      // padding: 0 var(--spacing-lg);
+      // margin: 0 var(--spacing-sm);
       font-size: 13px;
       transition: all 0.2s ease;
       border-bottom: 2px solid transparent;
@@ -744,7 +1020,7 @@ body {
       // 悬停状态
       &:hover {
         color: $--color-primary;
-        background-color: rgba($--color-primary, 0.08);
+        // background-color: rgba($--color-primary, 0.08);
         border-bottom-color: rgba($--color-primary, 0.3);
       }
 
@@ -753,7 +1029,7 @@ body {
         color: $--color-primary;
         font-weight: 500;
         border-bottom-color: $--color-primary;
-        background-color: rgba($--color-primary, 0.1);
+        // background-color: rgba($--color-primary, 0.1);
       }
 
       // 禁用状态
@@ -1055,6 +1331,123 @@ body {
   }
 }
 
+// ====================== 描述列表组件（el-descriptions）- 深色模式 ======================
+.el-descriptions {
+  width: 100%;
+  background: $--color-background; // 黑色背景
+  box-shadow: $--metal-shadow;
+  overflow: hidden;
+  color: $--color-text-primary; // 白色文字
+
+  // 描述列表头部
+  &__header {
+    padding: $--spacing-base $--spacing-lg;
+    border-bottom: 1px solid $--border-color-lighter;
+    background: $--metal-gradient-dark;
+    color: $--color-text-primary; // 白色标题
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  // 描述列表主体容器
+  &__body {
+    width: 100%;
+  }
+
+  // 描述列表行
+  &__row {
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid $--border-color-lighter;
+
+    // 最后一行移除底部边框
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  // 描述列表标签项（左侧）
+  .el-descriptions-item__label {
+    padding: $--spacing-lg;
+    background: $--color-background; // 极浅灰背景区分标签
+    color: $--color-text-secondary; // 浅灰文字
+    font-weight: 500;
+    border-right: 1px solid $--border-color-lighter;
+    box-sizing: border-box;
+    white-space: nowrap;
+    font-size: 13px;
+  }
+
+  // 描述列表内容项（右侧）
+  &-item__content {
+    padding: $--spacing-lg;
+    background: $--color-background-light;
+    color: $--color-text-primary; // 白色文字
+    flex: 1;
+    box-sizing: border-box;
+    font-size: 13px;
+    word-break: break-word;
+  }
+
+  // 带边框模式适配
+  &--border {
+    border: 1px solid $--border-color-light;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .el-descriptions__label,
+    .el-descriptions__content {
+      border-color: $--border-color-lighter;
+    }
+
+    .el-descriptions__header {
+      border-bottom: 1px solid $--border-color-light;
+    }
+  }
+
+  // 尺寸适配
+  &--small {
+
+    .el-descriptions__label,
+    .el-descriptions__content {
+      padding: calc($--spacing-base / 2) $--spacing-base;
+      font-size: 12px;
+    }
+
+    .el-descriptions__header {
+      padding: calc($--spacing-base / 2) $--spacing-base;
+      font-size: 13px;
+    }
+  }
+
+  &--large {
+
+    .el-descriptions__label,
+    .el-descriptions__content {
+      padding: $--spacing-lg calc($--spacing-lg * 1.5);
+      font-size: 14px;
+    }
+
+    .el-descriptions__header {
+      padding: $--spacing-base calc($--spacing-lg * 1.5);
+      font-size: 15px;
+    }
+  }
+
+  // 响应式适配
+  @media (max-width: 768px) {
+    .el-descriptions__row {
+      flex-direction: column;
+    }
+
+    .el-descriptions__label {
+      border-right: none;
+      border-bottom: 1px solid $--border-color-lighter;
+      width: 100%;
+    }
+  }
+}
+
 
 // ---------------------- 3.6 导航类（面包屑/菜单）----------------------
 // 面包屑
@@ -1094,7 +1487,7 @@ body {
   }
 
   // 折叠菜单
-  &.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+  &.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
     display: none;
   }
 
@@ -1216,7 +1609,7 @@ div.pagination-container {
       background: rgba($--color-primary, .12);
     }
 
-    &.is-current > .el-tree-node__content {
+    &.is-current>.el-tree-node__content {
       background: rgba($--color-primary, .2);
       color: $--color-primary;
     }
diff --git a/klp-ui/src/components/MarkdownPreview.vue b/klp-ui/src/components/MarkdownPreview.vue
index ba32b8cd..51c73846 100644
--- a/klp-ui/src/components/MarkdownPreview.vue
+++ b/klp-ui/src/components/MarkdownPreview.vue
@@ -13,6 +13,12 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      vditor: null,
+      loading: false
+    }
+  },
   mounted() {
     this.renderMarkdown();
   },
@@ -22,13 +28,17 @@ export default {
     }
   },
   methods: {
-    renderMarkdown() {
-      Vditor.preview(this.$refs.preview, this.value || '', {
+    async renderMarkdown() {
+      this.loading = true;
+      await Vditor.preview(this.$refs.preview, this.value || '', {
         anchor: 1,
         hl: true,
+        theme: 'dark',
         math: { inlineDigit: true },
         mermaid: true,
       });
+      this.loading = false;
+      console.log(this.$refs.preview, p);
     }
   }
 }
@@ -36,9 +46,9 @@ export default {
 
 <style scoped>
 .markdown-preview {
-  border: 1px solid #e4e7ed;
   border-radius: 4px;
   padding: 8px;
-  background: #fff;
+  background: #393d46;
+  color: white;
 }
 </style>
diff --git a/klp-ui/src/store/modules/user.js b/klp-ui/src/store/modules/user.js
index d67c9a4a..507f1845 100644
--- a/klp-ui/src/store/modules/user.js
+++ b/klp-ui/src/store/modules/user.js
@@ -51,7 +51,7 @@ const user = {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
           const user = res.data.user
-          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
+          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/avatar.png") : user.avatar;
           if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
             commit('SET_ROLES', res.data.roles)
             commit('SET_PERMISSIONS', res.data.permissions)
diff --git a/klp-ui/src/views/components/AllApplications.vue b/klp-ui/src/views/components/AllApplications.vue
index 22b57e2c..a4d8ecc9 100644
--- a/klp-ui/src/views/components/AllApplications.vue
+++ b/klp-ui/src/views/components/AllApplications.vue
@@ -207,7 +207,6 @@ export default {
 
 <style lang="scss" scoped>
 .all-applications-container {
-  background-color: #fff;
   padding: 16px; /* 调整间距，更贴近飞书紧凑感 */
   border-radius: 12px; /* 飞书常用较大圆角 */
   margin-top: 24px;
@@ -217,7 +216,7 @@ export default {
 .frequently-used-section {
   margin-bottom: 32px; /* 增大间距 */
   padding-bottom: 20px;
-  border-bottom: 1px solid #ebeef5; /* 飞书浅灰边框色 */
+  border-bottom: 1px solid #111; /* 飞书浅灰边框色 */
 }
 
 .frequently-used-header {
@@ -230,7 +229,7 @@ export default {
 .frequently-title {
   font-size: 16px; /* 稍小字体，飞书风格更简洁 */
   font-weight: 500; /* 调整 FontWeight */
-  color: #1f2329; /* 深一点的标题色 */
+  color: #ddd; /* 深一点的标题色 */
 }
 
 .edit-btn {
@@ -254,10 +253,10 @@ export default {
   border-radius: 12px; /* 大圆角 */
   transition: all 0.3s ease;
   position: relative;
-  background-color: #f7f8fa; /* 飞书卡片常用浅灰底色 */
+  background-color: #222; /* 飞书卡片常用浅灰底色 */
 
   &:hover {
-    background-color: #eaeef7; /*  hover 时的浅灰 */
+    background-color: #444; /*  hover 时的浅灰 */
   }
 }
 
@@ -266,7 +265,7 @@ export default {
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 20px;
-  color: #1f2329;
+  color: #ddd;
 }
 
 // 应用网格布局
@@ -286,10 +285,10 @@ export default {
   border-radius: 12px; 
   transition: background-color 0.3s ease;
   position: relative;
-  background-color: #f7f8fa; 
+  background-color: #222; 
 
   &:hover {
-    background-color: #eaeef7; 
+    background-color: #444; 
   }
 }
 
@@ -302,7 +301,7 @@ export default {
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
-  background-color: #e6f0ff; /* 飞书风格的浅蓝底色 */
+  background-color: #222; /* 飞书风格的浅蓝底色 */
   position: relative;
 }
 
@@ -314,7 +313,7 @@ export default {
 // 应用名称样式
 .app-name {
   font-size: 14px; 
-  color: #515767; /* 飞书常用的文本色 */
+  color: #2bf; /* 飞书常用的文本色 */
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
diff --git a/klp-ui/src/views/components/FlowTable.vue b/klp-ui/src/views/components/FlowTable.vue
index f5ab77a8..3798624a 100644
--- a/klp-ui/src/views/components/FlowTable.vue
+++ b/klp-ui/src/views/components/FlowTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="order-analysis-dashboard" v-loading="loading">
     <!-- 业绩区 -->
-    <el-tabs v-model="activeTab" type="card">
+    <el-tabs v-model="activeTab">
       <el-tab-pane label="我的流程" name="my">
         <KLPTable v-loading="loading" :data="ownProcessList">
           <el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true" />
@@ -94,7 +94,6 @@ export default {
 <style scoped>
 .order-analysis-dashboard {
   padding: 24px;
-  background-color: #f7f8fa;
   box-sizing: border-box;
 }
 
diff --git a/klp-ui/src/views/components/OrderDashboard.vue b/klp-ui/src/views/components/OrderDashboard.vue
index 51fa1af7..a1a06360 100644
--- a/klp-ui/src/views/components/OrderDashboard.vue
+++ b/klp-ui/src/views/components/OrderDashboard.vue
@@ -4,7 +4,7 @@
     v-loading="loading"
   >
     <!-- 业绩区 -->
-     <el-tabs v-model="activeTab" type="card">
+     <el-tabs v-model="activeTab">
       <el-tab-pane label="业绩总览" name="performance">
         <PerformanceArea mode="mini" :performance-area="dashboardData.performanceArea" />
       </el-tab-pane>
@@ -131,7 +131,6 @@ export default {
 <style scoped>
 .order-analysis-dashboard {
   padding: 24px;
-  background-color: #f7f8fa;
   box-sizing: border-box;
 }
 
diff --git a/klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue b/klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue
index f1211370..c1b1cbb1 100644
--- a/klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue
+++ b/klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue
@@ -1,7 +1,8 @@
 <template>
+  <!-- 模板部分无需修改，仅调整样式 -->
   <div class="finance-voucher-component">
     <div
-      v-for="(voucher, index) in voucherData"
+      v-for="(voucher, index) in internalVoucherData"
       :key="index"
       class="voucher-item"
     >
@@ -19,7 +20,7 @@
         </div>
       </div>
 
-      <!-- 凭证明细表格 -->
+      <!-- 凭证明细表格（复用全局深色表格样式） -->
       <KLPTable :data="voucher.detailList || []" border style="width: 100%;">
         <el-table-column label="摘要" prop="voucherNo" />
         <el-table-column label="科目" prop="accountId" />
@@ -38,6 +39,7 @@
 </template>
 
 <script>
+// JS部分仅修正voucherData绑定（原代码使用internalVoucherData但循环voucherData，避免选中状态失效）
 export default {
   name: "FinanceVoucherComponent",
   props: {
@@ -48,7 +50,6 @@ export default {
   },
   data() {
     return {
-      // 用于存储选中状态，若父组件需控制，可改为 prop 或 sync 修饰符
       internalVoucherData: [],
     };
   },
@@ -57,7 +58,7 @@ export default {
       handler(val) {
         this.internalVoucherData = val.map((v) => ({
           ...v,
-          checked: false,
+          checked: false, // 初始化未选中状态
         }));
       },
       immediate: true,
@@ -85,40 +86,127 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+$--spacing-base: 8px;
+$--spacing-lg: 16px;
+$--spacing-sm: 4px;
+$--color-background: #222;
+$--color-background-light: #333;
+$--color-text-primary: #ddd;
+$--color-text-secondary: #bbb;
+$--border-color: #111;
+$--border-color-light: #222;
+$--border-color-lighter: #333;
+$--metal-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+$--metal-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+$--metal-gradient-light: linear-gradient(to bottom, #222, #333);
+$--metal-gradient-dark: linear-gradient(to bottom, #111, #222);
+$--table-bg: #1E2227;
+$--color-text-regular: #EAEAEA;
+$--color-primary: #5F7BA0;
+
+/* 外层容器：继承全局深色背景，统一内边距 */
 .finance-voucher-component {
-  padding: 16px;
+  padding: $--spacing-lg; /* 复用全局间距变量（16px） */
+  background: $--color-background; /* 全局深色背景（#2B2F36） */
 }
+
+/* 单据项容器：深色边框+金属质感阴影，与表格风格统一 */
 .voucher-item {
-  border: 1px solid #e6e6e6;
-  border-radius: 4px;
-  margin-bottom: 16px;
+  border: 1px solid $--border-color; /* 全局边框色（#6E757D） */
+  border-radius: 8px; /* 与表格统一圆角 */
+  margin-bottom: $--spacing-lg; /* 单据间间距 */
+  overflow: hidden; /* 避免内部元素溢出圆角 */
+  box-shadow: $--metal-shadow; /* 全局金属质感阴影 */
 }
+
+/* 单据头部：深灰背景+紧凑布局，区分内容区域 */
 .voucher-header {
   display: flex;
   align-items: center;
-  background-color: #f5f5f5;
-  padding: 8px 16px;
+  background: $--table-bg; /* 复用表格背景色（#1E2227） */
+  padding: $--spacing-base $--spacing-lg; /* 内边距：8px 16px */
+  border-bottom: 1px solid $--border-color-lighter; /* 浅色边框分隔头部与表格 */
 }
+
+/* 头部单元格：统一文本样式+溢出处理 */
 .header-cell {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: $--color-text-regular; /* 常规文本色（#EAEAEA） */
+  font-size: 13px; /* 与表格文字大小统一 */
+  padding: 0 4px; /* 单元格内间距，避免内容拥挤 */
 }
+
+/* 操作按钮组：横向间距+按钮样式优化 */
 .operation-group {
   display: flex;
-  gap: 8px;
+  gap: $--spacing-base; /* 按钮间距（8px） */
+  justify-content: flex-end; /* 按钮右对齐 */
 }
+
+/* 重写Element文本按钮样式：适配深色主题 */
+.operation-group .el-button--text {
+  color: $--color-text-secondary !important; /* 次要文本色（#B6BDC5） */
+  padding: 2px 8px !important; /* 紧凑 padding */
+  font-size: 12px !important; /* 小号字体，避免占用过多空间 */
+
+  &:hover {
+    color: $--color-primary !important; /*  hover时显示主色（#5F7BA0） */
+    background: rgba($--color-primary, 0.15) !important; /* 浅色背景反馈 */
+  }
+}
+
+/* 重写Element复选框样式：适配深色背景 */
+.voucher-header .el-checkbox__inner {
+  background: $--color-background-light; /* 复选框背景（#2F3339） */
+  border-color: $--border-color-light; /* 复选框边框（#828991） */
+
+  &:checked {
+    background: $--color-primary; /* 选中时主色背景 */
+    border-color: $--color-primary; /* 选中时主色边框 */
+  }
+
+  &:hover {
+    border-color: $--color-primary; /* hover时边框变色 */
+  }
+}
+
+/* 总计行：主色高亮背景+加粗文本，突出汇总信息 */
 .total-row {
   display: flex;
   align-items: center;
-  background-color: #f0f9ff;
-  padding: 8px 16px;
-  font-weight: bold;
+  background: rgba($--color-primary, 0.15); /* 主色透明背景（#5F7BA0 15%） */
+  padding: $--spacing-base $--spacing-lg; /* 与头部内边距统一 */
+  font-weight: 600; /* 加粗文本，强调总计 */
+  border-top: 1px solid $--border-color-lighter; /* 边框分隔表格与总计 */
 }
+
+/* 总计单元格：统一文本样式+对齐方式 */
 .total-cell {
   flex: 1;
-  text-align: left;
+  color: $--color-text-primary; /* 高亮文本色（#FFFFFF） */
+  font-size: 13px; /* 与表格文字大小统一 */
+  padding: 0 4px; /* 单元格内间距 */
+}
+
+/* 适配小屏幕：头部内容换行，避免挤压 */
+@media (max-width: 768px) {
+  .voucher-header {
+    flex-wrap: wrap; /* 允许换行 */
+    gap: $--spacing-sm; /* 换行后元素间距（4px） */
+  }
+
+  .header-cell {
+    flex: 1 1 45%; /* 小屏幕下每行显示2个单元格 */
+    margin: 2px 0; /* 上下间距，区分行 */
+  }
+
+  .operation-group {
+    flex: 1 1 100%; /* 操作组独占一行 */
+    margin-top: $--spacing-sm; /* 与上方内容间距 */
+  }
 }
 </style>
\ No newline at end of file
diff --git a/klp-ui/src/views/finance/document/index.vue b/klp-ui/src/views/finance/document/index.vue
index c088c234..a440be25 100644
--- a/klp-ui/src/views/finance/document/index.vue
+++ b/klp-ui/src/views/finance/document/index.vue
@@ -46,26 +46,6 @@
           @click="handleAdd"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="warning"
diff --git a/klp-ui/src/views/index.vue b/klp-ui/src/views/index.vue
index 92d4d092..89b41181 100644
--- a/klp-ui/src/views/index.vue
+++ b/klp-ui/src/views/index.vue
@@ -73,7 +73,6 @@ export default {
 <style scoped>
 .dashboard-root {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
   padding: 32px;
 }
 
@@ -88,7 +87,6 @@ export default {
   padding: 24px;
   border-radius: 16px;
   backdrop-filter: blur(4px);
-  background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.2);
   transition: transform 0.2s;
@@ -158,7 +156,6 @@ export default {
   align-items: center;
   padding: 16px;
   border-radius: 12px;
-  background: #fff;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.2s;
   cursor: pointer;
@@ -182,7 +179,6 @@ export default {
 
 .business-module-icon i {
   font-size: 20px;
-  color: #fff;
 }
 
 .bg-blue {
@@ -229,7 +225,6 @@ export default {
 .monitor-records {
   padding: 24px;
   border-radius: 16px;
-  background: #fff;
   box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
 }
 
@@ -279,7 +274,6 @@ export default {
 
 .monitor-record-icon-inner {
   font-size: 14px;
-  color: #fff;
 }
 
 .monitor-record-action {
@@ -305,7 +299,6 @@ export default {
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #e0e0e0;
-  background: #fff;
 }
 
 .greeting-text {
diff --git a/klp-ui/src/views/login.vue b/klp-ui/src/views/login.vue
index bd3cf0b0..17b08ed0 100644
--- a/klp-ui/src/views/login.vue
+++ b/klp-ui/src/views/login.vue
@@ -153,10 +153,18 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+// 引入全局主题变量，假设你有全局的variables.scss定义了以下变量
+$--color-background: #2b2f36; 
+$--color-text-primary: #ffffff;
+$--color-text-secondary: #b6bdc5;
+$--border-color-light: #4c5057;
+$--color-primary: #5F7BA0;
+$--metal-gradient-light: linear-gradient(145deg, #3e434a, #363b41);
+
 .login-page {
   display: flex;
   height: 100vh;
-  background: #f7f8fa;
+  background: $--color-background; // 改用全局深色背景变量
 }
 
 .login-logo {
@@ -175,6 +183,7 @@ export default {
 
   .login-title {
     font-size: 22px;
+    color: $--color-text-primary; // 白色文字
   }
 }
 
@@ -183,32 +192,38 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #fff;
+  background: $--metal-gradient-light; // 金属渐变背景
   position: relative;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
 }
 
 .login-box {
   width: 500px;
   padding: 40px 32px 32px 32px;
   border-radius: 12px;
-  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.08);
-  background: #fff;
+  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
+  background: $--color-background; // 深色背景
+  border: 1px solid $--border-color-light; // 浅色边框
 }
 
 .login-title-welcome {
   font-size: 22px;
   font-weight: 600;
-  color: #222;
+  color: $--color-text-primary; // 白色文字
   text-align: left;
   margin-bottom: 24px;
 }
 
 .login-form {
   .el-input {
-    height: 40px;
-
     input {
       height: 40px;
+      color: $--color-text-primary; // 白色文字
+      background: transparent;
+    }
+
+    &:focus-within {
+      border-color: $--color-primary; // 聚焦时显示主题色边框
     }
   }
 
@@ -216,6 +231,7 @@ export default {
     height: 40px;
     width: 16px;
     margin-left: 2px;
+    color: $--color-text-secondary; // 浅灰色图标
   }
 }
 
@@ -232,6 +248,22 @@ export default {
 .login-code-img {
   width: 100%;
   height: 40px;
+  opacity: 0.8;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.el-checkbox {
+  color: $--color-text-primary; // 白色文字
+}
+
+.el-button--primary {
+  background: $--color-primary; // 主题色按钮
+  border: none;
+  &:hover {
+    opacity: 0.9;
+  }
 }
 
 .login-right {
@@ -239,7 +271,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(120deg, #e3eafc 0%, #f7f8fa 100%);
+  background: $--metal-gradient-light; // 金属渐变背景
 }
 
 .login-illustration {
@@ -249,19 +281,20 @@ export default {
 .illustration-img {
   width: 320px;
   margin-bottom: 32px;
+  opacity: 0.9;
 }
 
 .login-slogan {
   .slogan-title {
     font-size: 20px;
     font-weight: 600;
-    color: #222;
+    color: $--color-text-primary; // 白色文字
     margin-bottom: 12px;
   }
 
   .slogan-desc {
     font-size: 15px;
-    color: #888;
+    color: $--color-text-secondary; // 浅灰色文字
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/mes/qc/files/index.vue b/klp-ui/src/views/mes/qc/files/index.vue
index f57bed7d..1318bee9 100644
--- a/klp-ui/src/views/mes/qc/files/index.vue
+++ b/klp-ui/src/views/mes/qc/files/index.vue
@@ -1,44 +1,84 @@
 <template>
-  <div style="display: flex; height: calc(100vh - 84px);">
+  <div class="file-preview-container">
     <!-- 左侧文件列表 -->
-    <div style="width: 250px; border-right: 1px solid #eee; overflow-y: auto;">
-      <div style="padding: 8px 16px; border-bottom: 1px solid #eee; display: flex; gap: 8px; align-items: center;">
-        <button @click="handleClearAll" style="background: #f56c6c; color: #fff; border: none; border-radius: 3px; padding: 4px 10px; cursor: pointer;">清空全部</button>
+    <div class="file-list-sidebar">
+      <!-- 顶部操作栏 -->
+      <div class="file-list-header">
+        <button class="clear-all-btn" @click="handleClearAll">
+          清空全部
+        </button>
       </div>
-      <div v-if="loadingList" style="padding: 24px; color: #888; text-align: center;">文件列表加载中...</div>
-      <ul v-else style="list-style: none; padding: 0; margin: 0;">
+
+      <!-- 加载状态 -->
+      <div class="list-loading" v-if="loadingList">
+        文件列表加载中...
+      </div>
+
+      <!-- 文件列表 -->
+      <ul class="file-group-list" v-else>
         <template v-for="(group, groupName) in groupedFiles">
-          <li style="background:#f5f5f5; color:#888; font-weight:bold; padding:8px 16px; display: flex; align-items: center; justify-content: space-between;">
-            <span>{{ groupName }}</span>
-            <button @click.stop="handleClearGroup(groupName)" style="background: #e6a23c; color: #fff; border: none; border-radius: 3px; padding: 2px 8px; font-size: 12px; cursor: pointer;">清空分组</button>
+          <!-- 分组标题 -->
+          <li class="group-header">
+            <span class="group-name">{{ groupName }}</span>
+            <button class="clear-group-btn" @click.stop="handleClearGroup(groupName)">
+              清空分组
+            </button>
           </li>
-          <li v-for="file in group" :key="file.fileName"
-              :style="{padding: '12px 16px', cursor: 'pointer', background: file.fileName === selectedFileName ? '#f0f0f0' : ''}"
-              @click="selectFile(file)">
-            {{ file.fileName }}
-            <span style="float: right; color: #f56c6c; cursor: pointer;" @click.stop="handleDeleteFile(file)">删除</span>
+
+          <!-- 分组文件项 -->
+          <li 
+            class="file-item" 
+            v-for="file in group" 
+            :key="file.fileName"
+            :class="{ 'file-item--active': file.fileName === selectedFileName }"
+            @click="selectFile(file)"
+          >
+            <div class="file-item__content">
+              <span class="file-name">{{ file.fileName }}</span>
+              <span class="delete-file-btn" @click.stop="handleDeleteFile(file)">
+                删除
+              </span>
+            </div>
           </li>
         </template>
       </ul>
     </div>
+
     <!-- 右侧文件预览 -->
-    <div style="flex: 1; padding: 24px; overflow-y: auto;">
-      <div v-if="loadingContent" style="color: #888;">内容加载中...</div>
-      <div v-else-if="selectedFile">
-        <h3>{{ selectedFile.fileName }}</h3>
+    <div class="file-preview-main">
+      <!-- 加载状态 -->
+      <div class="content-loading" v-if="loadingContent">
+        内容加载中...
+      </div>
+
+      <!-- 选中文件预览 -->
+      <div class="preview-card" v-else-if="selectedFile">
+        <h3 class="preview-title">{{ selectedFile.fileName }}</h3>
+
+        <!-- 文本文件预览 -->
         <template v-if="selectedFile.fileType === 'text'">
-          <pre style="background: #fafafa; padding: 16px; border-radius: 4px; min-height: 300px;">{{ selectedFile.fileContent }}</pre>
+          <pre class="text-preview">{{ selectedFile.fileContent }}</pre>
         </template>
+
+        <!-- 图片文件预览（保留注释，需时启用） -->
         <!-- <template v-else-if="selectedFile.fileType === 'image'">
-          <div style="padding: 16px; background: #fafafa; border-radius: 4px; min-height: 300px; display: flex; align-items: center; justify-content: center;">
-            <img :src="selectedFile.fileContent" alt="图片预览" style="max-width: 100%; max-height: 600px;" />
+          <div class="image-preview-container">
+            <img :src="selectedFile.fileContent" alt="图片预览" class="image-preview" />
           </div>
         </template> -->
+
+        <!-- 其他文件类型 -->
         <template v-else>
-          <div style="background: #fafafa; padding: 16px; border-radius: 4px; min-height: 300px; color: #f56c6c;">{{ selectedFile.fileContent }}</div>
+          <div class="unsupported-type">
+            {{ selectedFile.fileContent }}
+          </div>
         </template>
       </div>
-      <div v-else style="color: #888;">请选择左侧文件进行预览</div>
+
+      <!-- 未选中文件 -->
+      <div class="no-selection" v-else>
+        请选择左侧文件进行预览
+      </div>
     </div>
   </div>
 </template>
@@ -58,7 +98,7 @@ export default {
   },
   created() {
     this.fetchFileList();
-    getFileStats()
+    getFileStats(); // 补充括号，修复语法问题
   },
   computed: {
     groupedFiles() {
@@ -79,6 +119,7 @@ export default {
       weekAgo.setDate(today.getDate() - 6);
       const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
       const threeMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 2, 1);
+
       (this.files || []).forEach(file => {
         const d = file.lastModified ? new Date(file.lastModified) : null;
         if (!d) {
@@ -99,6 +140,7 @@ export default {
           groups['更久'].push(file);
         }
       });
+
       // 只返回有文件的分组
       return Object.fromEntries(Object.entries(groups).filter(([k, v]) => v.length));
     }
@@ -111,10 +153,12 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
+        confirmButtonClass: 'el-button--warning',
+        cancelButtonClass: 'el-button--text'
       }).then(async () => {
         const names = this.files.map(f => f.fileName);
         await this.batchDelete(names);
-      }).catch(() => {});
+      }).catch(() => { });
     },
 
     // 清空某个分组
@@ -125,10 +169,12 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
+        confirmButtonClass: 'el-button--warning',
+        cancelButtonClass: 'el-button--text'
       }).then(async () => {
         const names = group.map(f => f.fileName);
         await this.batchDelete(names);
-      }).catch(() => {});
+      }).catch(() => { });
     },
 
     // 批量删除
@@ -154,6 +200,8 @@ export default {
         this.loadingList = false;
       }
     },
+
+    // 获取文件列表
     async fetchFileList() {
       this.loadingList = true;
       this.files = [];
@@ -168,6 +216,7 @@ export default {
       }
     },
 
+    // 选择文件预览
     async selectFile(file) {
       this.selectedFileName = file.fileName;
       this.selectedFile = null;
@@ -175,26 +224,25 @@ export default {
       try {
         const isText = /\.(txt|md|json|js|ts|log|csv|xml|html|css)$/i.test(file.fileName);
         const isImage = /\.(png|jpe?g|gif|bmp|webp|svg)$/i.test(file.fileName);
+
         if (isText) {
-          const textResult = await getFileContent(file.fileName)
-          this.selectedFile = {...textResult.data, fileType: 'text'};
-        } 
+          const textResult = await getFileContent(file.fileName);
+          this.selectedFile = { ...textResult.data, fileType: 'text' };
+        }
+        // 图片预览逻辑（保留，需时启用）
         // else if (isImage) {
-        //   // 图片文件
         //   let blob = null;
         //   if (typeof this.$options.components?.getFileContent === 'function') {
         //     blob = await this.$options.components.getFileContent(file.fileName);
         //   } else if (typeof window.getFileContent === 'function') {
         //     blob = await window.getFileContent(file.fileName);
         //   }
-        //   // blob 可能是base64字符串或Blob对象，需适配
         //   let imgUrl = '';
         //   if (blob instanceof Blob) {
         //     imgUrl = URL.createObjectURL(blob);
         //   } else if (typeof blob === 'string' && blob.startsWith('data:image')) {
         //     imgUrl = blob;
         //   } else if (typeof blob === 'string') {
-        //     // 假设后端返回base64
         //     imgUrl = 'data:image/*;base64,' + blob;
         //   }
         //   this.selectedFile = { fileName: file.fileName, fileContent: imgUrl, fileType: 'image' };
@@ -206,11 +254,13 @@ export default {
         this.loadingContent = false;
       }
     },
+
+    // 单个文件删除
     handleDeleteFile(file) {
       deleteFile(file.fileName)
         .then(() => {
           this.$message.success('文件删除成功');
-          this.fetchFileList(); // 重新加载文件列表
+          this.fetchFileList();
         })
         .catch(err => {
           this.$message.error('删除文件失败: ' + (err.message || '未知错误'));
@@ -221,5 +271,291 @@ export default {
 </script>
 
 <style scoped>
-/* 可根据需要自定义样式 */
-</style>
+/* 全局容器 */
+.file-preview-container {
+  display: flex;
+  height: calc(100vh - 84px);
+  background: var(--color-background);
+  color: var(--color-text-regular);
+}
+
+/* 左侧文件列表侧边栏 */
+.file-list-sidebar {
+  width: 250px;
+  border-right: 1px solid var(--border-color-light);
+  overflow-y: auto;
+  background: var(--color-background-light);
+}
+
+/* 列表顶部操作栏 */
+.file-list-header {
+  padding: var(--spacing-base) var(--spacing-lg);
+  border-bottom: 1px solid var(--border-color-light);
+  display: flex;
+  gap: var(--spacing-base);
+  align-items: center;
+  background: var(--metal-gradient-light);
+}
+
+/* 清空全部按钮 */
+.clear-all-btn {
+  background: linear-gradient(145deg, #e53e3e, #c53030);
+  color: #fff;
+  border: 1px solid #9b2c2c;
+  border-radius: 4px;
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: var(--metal-shadow-inset);
+}
+
+.clear-all-btn:hover {
+  box-shadow: var(--metal-shadow);
+  transform: translateY(-1px);
+}
+
+.clear-all-btn:active {
+  box-shadow: var(--metal-shadow-inset);
+  transform: translateY(0);
+}
+
+/* 列表加载状态 */
+.list-loading {
+  padding: 24px;
+  color: var(--color-text-secondary);
+  text-align: center;
+  background: var(--metal-gradient-light);
+}
+
+/* 文件分组列表 */
+.file-group-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* 分组标题栏 */
+.group-header {
+  background: var(--metal-gradient-dark);
+  color: var(--color-text-primary);
+  font-weight: 600;
+  padding: var(--spacing-base) var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border-color-lighter);
+}
+
+/* 清空分组按钮 */
+.clear-group-btn {
+  background: linear-gradient(145deg, #e6a23c, #d48822);
+  color: #fff;
+  border: 1px solid #b87319;
+  border-radius: 3px;
+  padding: 2px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: var(--metal-shadow-inset);
+}
+
+.clear-group-btn:hover {
+  box-shadow: var(--metal-shadow);
+  transform: translateY(-1px);
+}
+
+.clear-group-btn:active {
+  box-shadow: var(--metal-shadow-inset);
+  transform: translateY(0);
+}
+
+/* 文件项基础样式 */
+.file-item {
+  padding: 12px var(--spacing-lg);
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--color-background-light);
+  border-left: 3px solid transparent;
+}
+
+.file-item:hover {
+  background: var(--metal-gradient-light);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 文件项选中状态 */
+.file-item--active {
+  background: rgba(var(--color-primary-rgb), 0.2);
+  border-left: 3px solid var(--color-primary);
+}
+
+/* 文件项内容容器 */
+.file-item__content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* 文件名 */
+.file-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+/* 删除文件按钮 */
+.delete-file-btn {
+  color: var(--color-danger);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 3px;
+  transition: all 0.2s;
+}
+
+.delete-file-btn:hover {
+  background: rgba(var(--color-danger-rgb), 0.15);
+}
+
+/* 右侧预览主区域 */
+.file-preview-main {
+  flex: 1;
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+}
+
+/* 内容加载状态 */
+.content-loading {
+  color: var(--color-text-secondary);
+  padding: 24px;
+  background: var(--metal-gradient-light);
+  border-radius: 6px;
+  border: 1px solid var(--border-color-light);
+}
+
+/* 预览卡片容器 */
+.preview-card {
+  background: var(--metal-gradient-light);
+  border-radius: 6px;
+  border: 1px solid var(--border-color-light);
+  padding: var(--spacing-lg);
+  box-shadow: var(--metal-shadow);
+}
+
+/* 预览标题 */
+.preview-title {
+  color: var(--color-text-primary);
+  margin-top: 0;
+  padding-bottom: var(--spacing-base);
+  border-bottom: 1px solid var(--border-color-lighter);
+}
+
+/* 文本预览样式 */
+.text-preview {
+  background: var(--table-bg);
+  color: var(--color-text-regular);
+  padding: var(--spacing-lg);
+  border-radius: 4px;
+  min-height: 300px;
+  border: 1px solid var(--border-color-lighter);
+  overflow-x: auto;
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* 图片预览容器（保留，需时启用） */
+/* .image-preview-container {
+  padding: var(--spacing-lg);
+  background: var(--table-bg);
+  border-radius: 4px;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-color-lighter);
+}
+
+.image-preview {
+  max-width: 100%;
+  max-height: 600px;
+  border-radius: 4px;
+  box-shadow: var(--metal-shadow);
+} */
+
+/* 不支持的文件类型样式 */
+.unsupported-type {
+  background: var(--table-bg);
+  padding: var(--spacing-lg);
+  border-radius: 4px;
+  min-height: 300px;
+  color: var(--color-warning);
+  border: 1px solid var(--border-color-lighter);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+/* 未选择文件状态 */
+.no-selection {
+  color: var(--color-text-secondary);
+  padding: 24px;
+  background: var(--metal-gradient-light);
+  border-radius: 6px;
+  border: 1px solid var(--border-color-light);
+}
+
+/* 滚动条样式优化 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-background-light);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color-light);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-color-base);
+}
+
+/* 修复Element消息提示框样式（适配深色） */
+::v-deep .el-message {
+  background: var(--metal-gradient-light);
+  border-color: var(--border-color-light);
+  color: var(--color-text-regular);
+}
+
+::v-deep .el-message__icon--success {
+  color: var(--color-success);
+}
+
+::v-deep .el-message__icon--error {
+  color: var(--color-danger);
+}
+
+::v-deep .el-message__icon--info {
+  color: var(--color-info);
+}
+
+/* 修复确认对话框样式 */
+::v-deep .el-dialog {
+  background: var(--metal-gradient-light) !important;
+  border-color: var(--border-color-light) !important;
+}
+
+::v-deep .el-dialog__title {
+  color: var(--color-text-primary) !important;
+}
+
+::v-deep .el-dialog__body {
+  color: var(--color-text-regular) !important;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/hotProduct/index.vue b/klp-ui/src/views/wms/hotProduct/index.vue
index 5dc76ab7..6a0bca23 100644
--- a/klp-ui/src/views/wms/hotProduct/index.vue
+++ b/klp-ui/src/views/wms/hotProduct/index.vue
@@ -148,22 +148,6 @@
         </el-card>
       </el-col>
     </el-row>
-
-    <!-- 操作按钮 -->
-    <div class="action-buttons">
-      <el-button type="primary" @click="refreshData" :loading="loading">
-        <i class="el-icon-refresh"></i>
-        刷新数据
-      </el-button>
-      <!-- <el-button @click="exportData">
-        <i class="el-icon-download"></i>
-        导出排行榜
-      </el-button>
-      <el-button @click="openSettings">
-        <i class="el-icon-setting"></i>
-        设置
-      </el-button> -->
-    </div>
   </div>
 </template>
 
@@ -394,7 +378,6 @@ export default {
 <style scoped>
 .hot-product-page {
   padding: 20px;
-  background: #f5f7fa;
   min-height: 100vh;
 }
 
diff --git a/klp-ui/src/views/wms/order/components/PerformanceArea.vue b/klp-ui/src/views/wms/order/components/PerformanceArea.vue
index b391cec7..f89f2fa6 100644
--- a/klp-ui/src/views/wms/order/components/PerformanceArea.vue
+++ b/klp-ui/src/views/wms/order/components/PerformanceArea.vue
@@ -328,9 +328,9 @@ export default {
 .stat-item {
   text-align: center;
   padding: 15px;
-  background: #f8f9fa;
+  background: #222;
   border-radius: 8px;
-  border: 1px solid #e9ecef;
+  border: 1px solid #111;
 }
 
 .stat-number {
diff --git a/klp-ui/src/views/wms/order/dashboard.vue b/klp-ui/src/views/wms/order/dashboard.vue
index 747d41c8..a2c081f1 100644
--- a/klp-ui/src/views/wms/order/dashboard.vue
+++ b/klp-ui/src/views/wms/order/dashboard.vue
@@ -179,7 +179,6 @@ export default {
 <style scoped>
 .order-analysis-dashboard {
   padding: 24px;
-  background-color: #f7f8fa;
   box-sizing: border-box;
 }