diff --git a/klp-ui/src/assets/styles/btn.scss b/klp-ui/src/assets/styles/btn.scss
index 45f65930..49a40e86 100644
--- a/klp-ui/src/assets/styles/btn.scss
+++ b/klp-ui/src/assets/styles/btn.scss
@@ -97,3 +97,17 @@
   font-size: 14px;
   border-radius: 2px;
 }
+
+
+.el-table__cell {
+  padding: 0 !important;
+}
+
+.el-table__cell .el-button {
+  padding: 0 !important;
+}
+
+.el-table__cell  + .el-button {
+  margin-left: 4px !important;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss
index e06f013f..d83e5318 100644
--- a/klp-ui/src/assets/styles/element-ui.scss
+++ b/klp-ui/src/assets/styles/element-ui.scss
@@ -1,278 +1,1174 @@
-/* 基础变量定义 - 工业风浅色配色 */
+// ====================== 1. 基础颜色变量（Sass直接处理）======================
+$primary-base: #5F7BA0;       /* 工业蓝灰（主色原始值） */
+$success-base: #2ECC71;       /* 成功色原始值 */
+$warning-base: #E67E22;       /* 警告色原始值 */
+$danger-base: #E74C3C;        /* 危险色原始值 */
+$info-base: #AEB6BF;          /* 次主色原始值 */
+
+// 背景色原始值
+$background-base: #2B2F36;
+$background-light-base: lighten($background-base, 5%);
+$background-lighter-base: lighten($background-base, 10%);
+$panel-bg-base: #3A3F45;
+$table-bg-base: #1E2227;
+
+// 边框色原始值（新增基础边框色变量）
+$border-color-base: #6E757D;
+$border-color-light: #828991;
+$border-color-lighter: #9AA1A9;
+
+
+// ====================== 2. 间距/尺寸变量（Sass变量）======================
+$--spacing-sm: 4px;
+$--spacing-base: 8px;
+$--spacing-md: $--spacing-base;
+$--spacing-lg: $--spacing-base * 2;
+$--form-item-margin: $--spacing-base;
+$--btn-height: 24px;
+
+// 关键修复：添加缺失的$--border-color变量，指向基础边框色
+$--border-color: $border-color-base;
+
+
+// ====================== 3. CSS变量（与Sass变量同步）======================
 :root {
-  --secondary-color: #78909c; /* 辅助色 */
-  --accent-color: #e67e22; /* 强调色，用于突出按钮和重要操作 */
-  --background-color: #f5f7fa; /* 浅色背景 */
-  --card-bg-color: #ffffff; /* 卡片背景 */
-  --border-color: #cfd8dc; /* 边框颜色 */
-  --text-primary: #263238; /* 主要文本色 */
-  --text-secondary: #546e7a; /* 次要文本色 */
-  --spacing-sm: 4px;
-  --spacing-md: 8px;
-  --spacing-lg: 16px;
-  --spacing-base: 8px;   /* 基础间距，表单、表格统一用这个值做倍数调整 */
-  --form-item-margin: var(--spacing-base); /* 表单项底部间距 */
-  --btn-height: 24px;   /* 按钮统一高度 */
+  /* 颜色体系 - 同步自Sass原始变量 */
+  --color-primary: #{$primary-base};
+  --color-success: #{$success-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}; /* 同步新增的边框色变量 */
+  
+  /* 间距/尺寸体系 */
+  --spacing-sm: #{$--spacing-sm};
+  --spacing-base: #{$--spacing-base};
+  --spacing-md: #{$--spacing-md};
+  --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);
 }
 
-/* 全局样式调整 */
+
+// ====================== 4. Element UI适配变量 =======================
+$--color-primary: $primary-base !default;
+$--color-success: $success-base !default;
+$--color-warning: $warning-base !default;
+$--color-danger: $danger-base !default;
+$--color-info: $info-base !default;
+
+$--color-background: $background-base !default;
+$--color-background-light: $background-light-base !default;
+$--color-background-lighter: $background-lighter-base !default;
+$--panel-bg: $panel-bg-base !default;
+$--table-bg: $table-bg-base !default;
+
+$--color-text-primary: var(--color-text-primary) !default;
+$--color-text-regular: var(--color-text-regular) !default;
+$--color-text-secondary: var(--color-text-secondary) !default;
+$--color-text-placeholder: var(--color-text-placeholder) !default;
+
+// 边框色变量（包括新增的$--border-color）
+$--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变量 */
+
+// 间距变量
+$--spacing-sm: $--spacing-sm !default;
+$--spacing-base: $--spacing-base !default;
+$--spacing-md: $--spacing-md !default;
+$--spacing-lg: $--spacing-lg !default;
+$--form-item-margin: $--form-item-margin !default;
+$--btn-height: $--btn-height !default;
+
+$--metal-gradient-light: var(--metal-gradient-light) !default;
+$--metal-gradient-dark: var(--metal-gradient-dark) !default;
+$--metal-highlight: var(--metal-highlight) !default;
+$--metal-shadow: var(--metal-shadow) !default;
+$--metal-shadow-inset: var(--metal-shadow-inset) !default;
+
+// Element UI兼容变量
+$--font-color-primary: $--color-text-regular !default;
+$--font-color-regular: $--color-text-regular !default;
+$--font-color-secondary: $--color-text-secondary !default;
+$--font-color-placeholder: $--color-text-placeholder !default;
+$--color-loading: $--color-primary !default;
+
+
+// ====================== 2. 全局样式 ======================
 body {
-  background-color: var(--background-color);
-  color: var(--text-primary);
+  background: $--color-background;
+  color: $--color-text-regular;
   font-size: 14px;
   line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
-/* 面包屑导航优化 */
-.el-breadcrumb {
-  padding: var(--spacing-md) 0;
+// Element容器适配
+.el-container,
+.el-main,
+.el-aside,
+.el-header,
+.el-footer {
+  background: $--color-background;
+  color: $--color-text-regular;
+  border: none;
 }
 
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-  color: var(--text-secondary) !important;
+// 标签页内容溢出修复
+.el-tabs__content {
+  overflow: visible !important;
 }
 
-.el-breadcrumb__separator {
-  margin: 0 var(--spacing-sm);
-  color: var(--border-color);
-}
 
-/* 按钮样式优化 */
-.el-button {
-  padding: 8px 16px;
-  border-radius: 2px;
+// ====================== 3. 组件样式（按优先级合并）======================
+// ---------------------- 3.1 按钮（金属质感 + 紧凑尺寸）----------------------
+@mixin button-variant($text-color, $border-color) {
+  color: $text-color;
+  background: $--metal-gradient-light;
+  border: 1px solid $border-color;
+  box-shadow: $--metal-shadow;
+  border-radius: 6px;
+  text-shadow: 0 1px 0 rgba(0,0,0,.16);
+  transition: all .25s ease;
+  height: $--btn-height;
+  padding: 0 var(--spacing-lg);
   font-size: 13px;
-  transition: all 0.2s ease;
-}
 
-.el-button--success {
-  background-color: #2ecc71;
-  border-color: #2ecc71;
-}
+  &:hover,
+  &:focus {
+    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);
+    transform: translateY(-1px);
+  }
 
-.el-button--warning {
-  background-color: var(--accent-color);
-  border-color: var(--accent-color);
-}
+  &:active {
+    box-shadow: $--metal-shadow-inset;
+    transform: translateY(1px);
+  }
 
-.el-button--mini {
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-/* 卡片组件优化 */
-.el-card {
-  border-radius: 2px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-}
-
-.el-card__header {
-  padding: var(--spacing-md) var(--spacing-lg);
-  border-bottom: 1px solid var(--border-color);
-  background-color: #f9fafb;
-}
-
-.el-card__body {
-  padding: var(--spacing-lg);
-}
-
-/* 表格样式优化 - 紧凑布局 */
-.el-table {
-  border: 1px solid var(--border-color);
-  border-radius: 2px;
-  margin-top: 0 !important;
-}
-
-.el-table th,
-.el-table td {
-  padding: 2px 4px;
-  font-size: 13px;
-}
-
-.el-table--border th,
-.el-table--border td {
-  border-right: 1px solid var(--border-color);
-}
-
-.el-table--border thead tr:last-child th {
-  border-bottom: 1px solid var(--border-color);
-}
-
-/* 输入框样式优化 */
-.el-input__inner,
-.el-textarea__inner {
-  padding: 7px 11px;
-  border-radius: 2px;
-  border: 1px solid var(--border-color);
-  font-size: 13px;
-  transition: border-color 0.2s ease;
-}
-
-.el-input__inner:focus,
-.el-textarea__inner:focus {
-  border-color: var(--primary-color);
-  box-shadow: none;
-}
-
-/* 下拉菜单优化 */
-.el-dropdown-menu {
-  border-radius: 2px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  padding: var(--spacing-sm) 0;
-}
-
-.el-dropdown-menu__item {
-  padding: 6px 16px;
-  font-size: 13px;
-}
-
-.el-dropdown-menu a {
-  display: block;
-}
-
-/* 标签样式优化 */
-.el-tag {
-  padding: 2px 8px;
-  border-radius: 2px;
-  font-size: 12px;
-}
-
-/* 上传组件优化 */
-.el-upload {
-  input[type="file"] {
-    display: none !important;
+  &.is-disabled,
+  &[disabled] {
+    opacity: .6;
+    filter: grayscale(.1);
+    box-shadow: none;
+    cursor: not-allowed;
   }
 }
 
-.el-upload__input {
-  display: none;
+// 主按钮（品牌梯度）
+.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%);
+
+  &:hover {
+    background: linear-gradient(145deg, $--color-primary, darken($--color-primary,8%));
+  }
 }
 
-.upload-container {
-  .el-upload {
-    width: 100%;
+// 功能按钮（统一风格）
+.el-button--success {
+  @include button-variant(#fff, darken($--color-success, 10%));
+  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%));
+}
+.el-button--danger {
+  @include button-variant(#fff, darken($--color-danger, 10%));
+  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%));
+}
 
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-      border-radius: 2px;
-      border: 2px dashed var(--border-color);
+// 文本按钮（低干扰）
+.el-button--text {
+  color: $--color-text-secondary;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  height: auto;
+  padding: 4px 8px;
+
+  &:hover {
+    color: $--color-primary;
+    background: rgba($--color-primary, .12);
+    transform: none;
+  }
+}
+
+// 图标按钮（圆形紧凑）
+.el-button--icon {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 8px;
+
+  &:only-child {
+    padding: 0;
+  }
+}
+
+// 按钮组（无缝衔接）
+.el-button-group {
+  .el-button {
+    border-radius: 0;
+    margin: 0;
+    border-left: 1px solid $--border-color-lighter;
+
+    &:first-child {
+      border-radius: 6px 0 0 6px;
+      border-left: none;
+    }
+    &:last-child {
+      border-radius: 0 6px 6px 0;
+    }
+    &:not(:last-child) {
+      border-right: none;
     }
   }
 }
 
-/* 对话框样式优化 */
+// 迷你按钮（超紧凑）
+.el-button--mini {
+  padding: 4px 8px;
+  font-size: 12px;
+  height: calc($--btn-height - 4px);
+}
+
+
+// ---------------------- 3.2 表格（深色交替 + 金属边框）----------------------
+.el-table {
+  background: $--table-bg;
+  border: 1px solid $--border-color-light;
+  border-radius: 8px;
+  box-shadow: $--metal-shadow;
+  color: $--color-text-regular;
+  overflow: hidden;
+  margin-top: calc($--form-item-margin * 2); // 与表单间距
+
+  // 分割线
+  &::before {
+    background-color: $--border-color-lighter;
+  }
+
+  // 表头（深灰黑 + 纯白文字）
+  .el-table__header-wrapper {
+    th {
+      background: #1F2227;
+      color: $--color-text-primary;
+      font-weight: 600;
+      border-bottom: 1px solid #444A52;
+      padding: 4px !important; // 紧凑 padding
+      height: auto;
+      font-size: 13px;
+    }
+  }
+
+  // 表体（奇偶行交替 + 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);
+        color: $--color-text-primary;
+        font-weight: 600;
+      }
+    }
+
+    // 单元格（统一边框 + 紧凑 padding）
+    .el-table__cell {
+      border-bottom: 1px solid #444A52;
+      color: #EAEAEA;
+      padding: 2px 4px !important; // 超紧凑
+      font-size: 13px;
+    }
+  }
+
+  // 表尾
+  .el-table__footer-wrapper {
+    border-top: 1px solid $--border-color-lighter;
+
+    td {
+      background: linear-gradient(0deg, $--color-background-light, $--color-background);
+      color: $--color-text-secondary;
+      padding: 4px !important;
+    }
+  }
+
+  // 列宽调整线
+  .el-table__column-resize-proxy {
+    background-color: $--color-primary;
+  }
+
+  // 展开图标
+  .el-table__expand-icon {
+    color: $--color-text-secondary;
+
+    &.is-expanded,
+    &:hover {
+      color: $--color-primary;
+    }
+  }
+
+  // 适配尺寸类（统一紧凑）
+  &.el-table--medium .el-table__cell,
+  &.el-table--mini .el-table__cell {
+    padding: 0 !important;
+  }
+}
+
+// 自定义表格工具类（补充紧凑）
+.small-padding .cell {
+  padding-left: calc($--spacing-base / 2);
+  padding-right: calc($--spacing-base / 2);
+}
+
+.status-col .cell {
+  padding: 0 10px !important;
+  text-align: center;
+}
+
+
+// ---------------------- 3.3 表单/输入（金属内阴影 + 统一高度）----------------------
+// 表单项布局
+.el-form-item {
+  margin-bottom: $--form-item-margin !important;
+  label-align: right; // 标签右对齐
+  font-size: 13px;
+
+  // 标签样式
+  .el-form-item__label {
+    color: $--color-text-secondary;
+    padding-right: $--spacing-base;
+    font-size: 13px;
+  }
+
+  // 搜索表单 inline 布局
+  &.search-form-item {
+    display: inline-block;
+    margin-right: $--spacing-base;
+    vertical-align: middle;
+  }
+}
+
+// 输入框（统一高度 + 金属内阴影）
+.el-input {
+  height: $--btn-height;
+
+  .el-input__inner {
+    background: $--metal-gradient-light;
+    border-color: $--border-color-light;
+    color: $--color-text-regular;
+    box-shadow: $--metal-shadow-inset;
+    border-radius: 0;
+    height: $--btn-height;
+    line-height: $--btn-height;
+    padding: 0 $--spacing-base;
+    font-size: 13px;
+
+    &::placeholder {
+      color: $--color-text-placeholder;
+    }
+
+    &:focus {
+      border-color: $--color-primary;
+      box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22);
+    }
+  }
+
+  // 输入框图标
+  .el-input__icon {
+    color: $--color-text-secondary;
+    height: $--btn-height;
+    line-height: $--btn-height;
+
+    &:hover {
+      color: $--color-primary;
+    }
+  }
+
+  // 尺寸适配（统一高度）
+  &.el-input--small .el-input__inner,
+  &.el-input--medium .el-input__inner,
+  &.el-input--large .el-input__inner {
+    height: $--btn-height;
+    line-height: $--btn-height;
+  }
+
+  .el-input-group__append,
+  .el-input-group__prepend {
+    border-radius: 0;
+    border-left: 1px solid $--border-color-light;
+    background: $--metal-gradient-light;
+    color: $--color-text-regular;
+    box-shadow: $--metal-shadow-inset;
+    font-size: 13px;
+  }
+}
+
+// 文本域
+.el-textarea .el-textarea__inner {
+  background: $--metal-gradient-light;
+  border-color: $--border-color-light;
+  color: $--color-text-regular;
+  box-shadow: $--metal-shadow-inset;
+  border-radius: 0;
+  padding: $--spacing-base;
+  font-size: 13px;
+
+  &::placeholder {
+    color: $--color-text-placeholder;
+  }
+
+  &:focus {
+    border-color: $--color-primary;
+    box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22);
+  }
+}
+
+// 数字输入框
+.el-input-number {
+  .el-input__inner {
+    border-radius: 0;
+  }
+
+  // 增减按钮
+  .el-input-number__increase,
+  .el-input-number__decrease {
+    background: $--metal-gradient-light;
+    border-color: $--border-color-light;
+    box-shadow: $--metal-shadow;
+    transition: all .2s ease;
+    height: $--btn-height;
+    line-height: $--btn-height;
+
+    &:hover {
+      background: $--metal-gradient-dark;
+      border-color: $--border-color-base;
+      box-shadow: 0 0 0 1px $--border-color-base;
+    }
+
+    &.is-disabled {
+      background: $--color-background-lighter;
+      border-color: $--border-color-lighter;
+      color: $--color-text-placeholder;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  // 迷你尺寸
+  &.el-input-number--small {
+    .el-input-number__increase,
+    .el-input-number__decrease {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  // 无控制按钮
+  &.is-without-controls .el-input__inner {
+    border-radius: 0;
+  }
+}
+
+// 选择器/下拉框
+.el-select {
+  .el-input__inner {
+    border-radius: 0;
+  }
+
+  // 下拉面板
+  .el-select-dropdown {
+    background: $--metal-gradient-light;
+    border: 1px solid $--border-color-light;
+    box-shadow: $--metal-shadow;
+    color: $--color-text-regular;
+    border-radius: 6px;
+
+    .el-select-dropdown__item {
+      color: $--color-text-regular;
+      padding: 6px 16px;
+      font-size: 13px;
+
+      &:hover {
+        background-color: rgba($--color-primary, .12);
+      }
+      &.selected {
+        background-color: rgba($--color-primary, .20);
+        color: #fff;
+      }
+    }
+  }
+}
+
+// 开关
+.el-switch {
+  .el-switch__core {
+    background-color: $--border-color-base;
+    box-shadow: $--metal-shadow-inset;
+  }
+
+  &.is-checked .el-switch__core {
+    background-color: $--color-primary;
+  }
+}
+
+// 滑块
+.el-slider__bar {
+  background: $--metal-gradient-dark;
+}
+.el-slider__button {
+  background: $--metal-gradient-light;
+  border-color: $--border-color-light;
+  box-shadow: $--metal-shadow;
+}
+
+// 复选框
+.el-checkbox {
+  .el-checkbox__inner {
+    background: $--metal-gradient-light;
+    border-color: $--border-color-light;
+    box-shadow: $--metal-shadow-inset;
+    border-radius: 4px;
+  }
+
+  &.is-checked .el-checkbox__inner {
+    background: $--metal-gradient-dark;
+    border-color: $--border-color-base;
+
+    &::after {
+      border-color: $--color-text-primary;
+    }
+  }
+}
+
+
+// ---------------------- 3.4 卡片/对话框（金属外阴影 + 层级）----------------------
+// 卡片
+.el-card {
+  background: $--metal-gradient-light;
+  border: 1px solid $--border-color-light;
+  box-shadow: $--metal-shadow;
+  border-radius: 8px;
+  color: $--color-text-regular;
+  overflow: hidden;
+
+  // 卡片头部
+  .el-card__header {
+    padding: $--spacing-md $--spacing-lg;
+    border-bottom: 1px solid $--border-color-lighter;
+    color: $--color-text-primary;
+    background: transparent;
+  }
+
+  // 卡片主体
+  .el-card__body {
+    padding: $--spacing-lg;
+  }
+}
+
+// 对话框
 .el-dialog {
   transform: none;
   left: 0;
   position: relative;
-  margin: 0 auto;
-  border-radius: 2px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
+  margin: 10vh auto 0;
+  background: $--metal-gradient-light;
+  border: 1px solid $--border-color-light;
+  box-shadow: $--metal-shadow;
+  border-radius: 8px;
+  color: $--color-text-regular;
+  width: 60% !important; // 自适应宽度
 
-.el-dialog__header {
-  padding: var(--spacing-lg);
-  border-bottom: 1px solid var(--border-color);
-}
+  // 对话框头部
+  .el-dialog__header {
+    padding: $--spacing-lg;
+    border-bottom: 1px solid $--border-color-lighter;
+  }
 
-.el-dialog__body {
-  padding: var(--spacing-lg);
-}
+  // 对话框主体
+  .el-dialog__body {
+    padding: $--spacing-lg;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
 
-.el-dialog__footer {
-  padding: var(--spacing-md) var(--spacing-lg);
-  border-top: 1px solid var(--border-color);
-}
-
-/* 日期选择器优化 */
-.el-range-editor.el-input__inner {
-  display: inline-flex !important;
-}
-
-.el-range-separator {
-  box-sizing: content-box;
-}
-
-/* 菜单样式优化 */
-.el-menu {
-  border-right: 1px solid var(--border-color);
-}
-
-.el-menu-item,
-.el-submenu__title {
-  padding: 0 16px !important;
-  height: 40px !important;
-  line-height: 40px !important;
-}
-
-.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
-  display: none;
-}
-
-/* 自定义工具类 - 紧凑布局 */
-.small-padding {
-  .cell {
-    padding-left: 5px;
-    padding-right: 5px;
+  // 对话框底部
+  .el-dialog__footer {
+    padding: $--spacing-md $--spacing-lg;
+    border-top: 1px solid $--border-color-lighter;
+    text-align: right;
   }
 }
 
-.fixed-width {
-  .el-button--mini {
-    padding: 7px 10px;
-    width: 60px;
+// Popover
+.el-popover {
+  background: $--metal-gradient-light;
+  border: 1px solid $--border-color-light;
+  border-radius: 8px;
+  box-shadow: $--metal-shadow;
+  color: $--color-text-regular;
+  padding: $--spacing-lg;
+
+  &:focus {
+    outline: none;
+  }
+
+  // Popover 标题
+  .el-popover__title {
+    color: $--color-text-primary;
+    border-bottom: 1px solid $--border-color-lighter;
+    padding-bottom: $--spacing-md;
+    margin-bottom: $--spacing-md;
+    font-weight: 600;
+  }
+
+  // Popover 底部
+  .el-popover__footer {
+    border-top: 1px solid $--border-color-lighter;
+    padding-top: $--spacing-md;
+    margin-top: $--spacing-md;
+    text-align: right;
+  }
+
+  // 箭头样式
+  .popper__arrow {
+    &::after {
+      background: $--metal-gradient-light;
+    }
+    border-color: $--border-color-light;
   }
 }
 
-.status-col {
-  .cell {
-    padding: 0 10px;
-    text-align: center;
+.el-button-group + .el-popover {
+  margin-left: 5px;
+}
+
+// ====================== 标签页组件（el-tabs）样式 =======================
+.el-tabs {
+  // 标签页容器
+  background-color: transparent;
+  color: $--color-text-regular;
+
+  // 标签栏
+  .el-tabs__header {
+    margin: 0 0 var(--spacing-lg) 0;
+    padding: 0 var(--spacing-base);
+    border-bottom: 1px solid $--border-color-light;
+    background-color: transparent;
+
+    // 标签导航容器
+    .el-tabs__nav {
+      height: 40px;
+      line-height: 40px;
+      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;
+    }
+
+    // 标签项
+    .el-tabs__item {
+      color: $--color-text-secondary;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 var(--spacing-lg);
+      margin: 0 var(--spacing-sm);
+      font-size: 13px;
+      transition: all 0.2s ease;
+      border-bottom: 2px solid transparent;
+
+      // 悬停状态
+      &:hover {
+        color: $--color-primary;
+        background-color: rgba($--color-primary, 0.08);
+        border-bottom-color: rgba($--color-primary, 0.3);
+      }
+
+      // 激活状态
+      &.is-active {
+        color: $--color-primary;
+        font-weight: 500;
+        border-bottom-color: $--color-primary;
+        background-color: rgba($--color-primary, 0.1);
+      }
+
+      // 禁用状态
+      &.is-disabled {
+        color: $--color-text-placeholder;
+        cursor: not-allowed;
+
+        &:hover {
+          color: $--color-text-placeholder;
+          background-color: transparent;
+          border-bottom-color: transparent;
+        }
+      }
+    }
+
+    // 标签滚动按钮
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      margin: 4px 0;
+      color: $--color-text-secondary;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        color: $--color-primary;
+        background-color: rgba($--color-primary, 0.1);
+      }
+
+      &.is-disabled {
+        color: $--color-text-placeholder;
+        cursor: not-allowed;
+
+        &:hover {
+          color: $--color-text-placeholder;
+          background-color: transparent;
+        }
+      }
+    }
+
+    // 标签分隔线
+    .el-tabs__nav-wrap::after {
+      background-color: $--border-color-light;
+    }
+  }
+
+  // 标签内容区
+  .el-tabs__content {
+    padding: var(--spacing-lg);
+    background-color: $--metal-gradient-light;
+    border: 1px solid $--border-color-light;
+    border-radius: 0 0 6px 6px;
+    min-height: 100px; // 确保有基本高度
+  }
+
+  // 卡片类型标签页
+  &.el-tabs--card {
+    .el-tabs__header {
+      border-bottom: none;
+
+      .el-tabs__nav {
+        background-color: transparent;
+        box-shadow: none;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .el-tabs__item {
+        border: 1px solid $--border-color-light;
+        border-bottom: none;
+        border-radius: 6px 6px 0 0;
+        margin: 0 2px;
+        background-color: $--metal-gradient-light;
+
+        &.is-active {
+          border-color: $--border-color-light;
+          border-bottom-color: $--metal-gradient-light;
+          background-color: $--metal-gradient-light;
+          position: relative;
+          bottom: -1px;
+        }
+      }
+    }
+
+    .el-tabs__content {
+      border-radius: 0 6px 6px 6px;
+      margin-top: -1px;
+    }
+  }
+
+  // 左侧/右侧标签页
+  &.el-tabs--left,
+  &.el-tabs--right {
+    .el-tabs__header {
+      border-bottom: none;
+      border-right: 1px solid $--border-color-light;
+      margin: 0 var(--spacing-lg) 0 0;
+
+      .el-tabs__nav {
+        flex-direction: column;
+        height: auto;
+        background-color: transparent;
+        box-shadow: none;
+      }
+
+      .el-tabs__item {
+        width: 100%;
+        border-bottom: none;
+        border-right: 2px solid transparent;
+
+        &.is-active {
+          border-right-color: $--color-primary;
+          background-color: rgba($--color-primary, 0.1);
+        }
+      }
+    }
+
+    &.el-tabs--right {
+      .el-tabs__header {
+        border-right: none;
+        border-left: 1px solid $--border-color-light;
+        margin: 0 0 0 var(--spacing-lg);
+      }
+
+      .el-tabs__item {
+        border-right: none;
+        border-left: 2px solid transparent;
+
+        &.is-active {
+          border-left-color: $--color-primary;
+        }
+      }
+    }
+
+    .el-tabs__content {
+      border-radius: 6px;
+    }
+  }
+
+  // 标签页关闭按钮
+  .el-icon-close {
+    color: $--color-text-secondary;
+    margin-left: var(--spacing-sm);
+    opacity: 0.7;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: $--color-danger;
+      opacity: 1;
+    }
+  }
+
+  // 可编辑标签添加按钮
+  .el-tabs__new-tab {
+    color: $--color-text-secondary;
+    margin: 0 var(--spacing-sm);
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: $--color-primary;
+      background-color: rgba($--color-primary, 0.08);
+    }
   }
 }
 
-.el-tag {
-  margin-right: 0px;
-  padding: 1px !important;
-  height: auto !important;
-  border-radius: 0 !important;
-}
+// ---------------------- 3.5 日期选择器（深色适配 + 交互优化）----------------------
+.el-date-picker {
+  .el-picker-panel {
+    background: $--metal-gradient-light;
+    border: 1px solid $--border-color-light;
+    border-radius: 8px;
+    box-shadow: $--metal-shadow;
+    color: $--color-text-regular;
 
-.cell {
-  .el-tag {
-    margin-right: 0px;
+    // 头部（年月切换）
+    .el-date-picker__header {
+      border-bottom: 1px solid $--border-color-lighter;
+      color: $--color-text-primary;
+      padding: $--spacing-md;
+
+      .el-date-picker__header-label {
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover {
+          color: $--color-primary;
+        }
+      }
+
+      .el-date-picker__header-btn {
+        color: $--color-text-secondary;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover {
+          color: $--color-primary;
+        }
+
+        &.is-disabled {
+          color: $--color-text-placeholder;
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    // 日期表格
+    .el-date-table {
+      th {
+        color: $--color-text-secondary;
+        font-weight: normal;
+        padding: $--spacing-sm;
+      }
+
+      td {
+        color: $--color-text-regular;
+        border-radius: 4px;
+        transition: all .2s;
+        padding: $--spacing-sm;
+
+        &.available {
+          cursor: pointer;
+
+          &:hover {
+            background: $--metal-highlight;
+          }
+        }
+
+        &.today {
+          color: $--color-primary;
+          font-weight: 600;
+        }
+
+        &.current,
+        &.selected {
+          background: $--color-primary;
+          color: #fff;
+
+          &:hover {
+            background: darken($--color-primary, 5%);
+          }
+        }
+
+        &.disabled {
+          color: $--color-text-placeholder;
+          cursor: not-allowed;
+
+          &:hover {
+            background: transparent;
+          }
+        }
+      }
+    }
+
+    // 快捷选项
+    .el-picker-panel__shortcut {
+      padding: $--spacing-md;
+      border-top: 1px solid $--border-color-lighter;
+
+      .el-picker-panel__shortcut-btn {
+        padding: 4px 10px;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all .2s;
+        color: $--color-text-regular;
+
+        &:hover {
+          background: $--metal-highlight;
+          color: $--color-text-primary;
+        }
+
+        &.is-selected {
+          background: $--color-primary;
+          color: #fff;
+
+          &:hover {
+            background: darken($--color-primary, 5%);
+          }
+        }
+      }
+    }
+  }
+
+  // 范围选择器分隔符
+  .el-range-separator {
+    color: $--color-text-regular;
+    padding: 0 $--spacing-md;
+    box-sizing: content-box;
+  }
+
+  // 范围输入框
+  .el-range-input {
+    background-color: transparent !important;
+  }
+
+  .el-range-editor.el-input__inner {
+    display: inline-flex !important;
   }
 }
 
-/* 表单样式优化 */
-.el-form-item {
-  margin-bottom: 12px;
-}
 
-.el-form-item__label {
-  padding-right: 10px;
+// ---------------------- 3.6 导航类（面包屑/菜单）----------------------
+// 面包屑
+.el-breadcrumb {
+  padding: $--spacing-md 0;
   font-size: 13px;
+
+  .el-breadcrumb__inner,
+  .el-breadcrumb__inner a {
+    font-weight: 400 !important;
+    color: $--color-text-secondary !important;
+  }
+
+  .el-breadcrumb__separator {
+    margin: 0 $--spacing-sm;
+    color: $--border-color;
+  }
 }
 
-/* 分页组件优化 */
+// 菜单
+.el-menu {
+  border-right: 1px solid $--border-color;
+  background: $--color-background;
+
+  .el-menu-item,
+  .el-submenu__title {
+    padding: 0 16px !important;
+    height: 40px !important;
+    line-height: 40px !important;
+    color: $--color-text-secondary;
+    font-size: 13px;
+
+    &:hover {
+      background: rgba($--color-primary, .12);
+      color: $--color-primary;
+    }
+  }
+
+  // 折叠菜单
+  &.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+    display: none;
+  }
+
+  // 激活菜单
+  .el-menu-item.is-active {
+    color: $--color-primary;
+    background: rgba($--color-primary, .15);
+    border-right: 3px solid $--color-primary;
+  }
+}
+
+
+// ---------------------- 3.7 其他组件（标签/分页/上传）----------------------
+// 标签
+.el-tag {
+  background: $--metal-gradient-light;
+  border-color: $--border-color-light;
+  color: $--color-text-regular;
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: 12px;
+  height: auto;
+  margin-right: 0;
+
+  // 主色标签
+  &.el-tag--primary {
+    background: rgba($--color-primary, .22);
+    color: $--color-primary;
+    border-color: transparent;
+  }
+
+  // 表格内标签（无圆角）
+  .cell & {
+    margin-right: 0;
+    padding: 1px !important;
+    border-radius: 0 !important;
+  }
+}
+
+// 分页
 .el-pagination {
   margin-top: 16px;
   padding: 8px 0;
+  text-align: right;
+
+  .el-pager li {
+    margin: 0 2px;
+    min-width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 4px;
+    background: $--metal-gradient-light;
+    border: 1px solid $--border-color-light;
+
+    &:hover {
+      background: $--metal-gradient-dark;
+      color: $--color-primary;
+    }
+
+    &.active {
+      background: $--color-primary;
+      color: #fff;
+      border-color: $--color-primary;
+    }
+  }
+
+  // 输入框后缀
+  .el-input__suffix {
+    position: absolute;
+    line-height: 0;
+  }
 }
 
-.el-pager li {
-  margin: 0 2px;
-  min-width: 30px;
-  height: 30px;
-  line-height: 30px;
-}
-
+// 分页容器（透明背景）
 div.pagination-container {
   background-color: transparent !important;
   padding: 0 !important;
@@ -281,89 +1177,63 @@ div.pagination-container {
 
   .el-pagination {
     padding: 0 !important;
-    // margin: 0 !important;
+  }
+}
 
-    .el-input__suffix {
-      position: absolute;
-      line-height: 0px;
+// 上传组件
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+
+  .el-upload__input {
+    display: none;
+  }
+
+  // 拖拽上传容器
+  .el-upload-dragger {
+    width: 100%;
+    height: 200px;
+    border-radius: 6px;
+    border: 2px dashed $--border-color;
+    background: $--metal-gradient-light;
+    color: $--color-text-secondary;
+
+    &:hover {
+      border-color: $--color-primary;
+      background: $--metal-gradient-dark;
     }
   }
 }
 
-.el-table--medium .el-table__cell {
-  padding: 0 !important;
-}
+// 树形组件
+.el-tree {
+  background-color: transparent !important;
+  color: $--color-text-regular;
 
-.el-table--mini .el-table__cell {
-  padding: 0 !important;
-}
+  .el-tree-node {
+    &:hover {
+      background: rgba($--color-primary, .12);
+    }
 
-.el-table .el-table__header-wrapper th, 
-.el-table .el-table__fixed-header-wrapper th {
-  height: auto;
-  padding: 0 !important;
-}
-
-/* 【优化】表单项整体布局：压缩间距、对齐标签 */
-.el-form-item {
-  margin-bottom: var(--form-item-margin) !important; 
-  /* 让标签和表格列头对齐，可根据实际需求微调 */
-  label-align: right;  
-}
-
-/* 【优化】表单标签：缩小文字大小，匹配表格列头 */
-.el-form-item__label {
-  font-size: 13px; 
-  padding-right: var(--spacing-base); 
-}
-
-/* 【优化】表单输入框：统一高度、压缩内边距 */
-.el-input__inner,
-.el-textarea__inner,
-.el-select .el-input__inner {
-  height: var(--btn-height);  
-  padding: 0 var(--spacing-base); 
-  font-size: 13px; 
-}
-
-/* 【优化】表格与表单的间距：避免表单和表格贴太近 */
-.el-table {
-  margin-top: calc(var(--form-item-margin) * 2); 
-}
-
-/* 【补充】搜索按钮组：如果是 inline 布局，强制对齐 */
-.search-form .el-form-item {
-  display: inline-block;
-  margin-right: var(--spacing-base);
-  vertical-align: middle;
-}
-
-/* 【补充】适配原有工具类，让紧凑度更统一 */
-.small-padding .cell {
-  padding-left: calc(var(--spacing-base)/2);
-  padding-right: calc(var(--spacing-base)/2);
-}
-
-.el-input {
-  height: var(--btn-height);
+    &.is-current > .el-tree-node__content {
+      background: rgba($--color-primary, .2);
+      color: $--color-primary;
+    }
+  }
 }
 
 
-
-.el-input--small .el-input__inner,
-.el-input--medium .el-input__inner,
-.el-input--large .el-input__inner {
-  height: var(--btn-height);
-  line-height: var(--btn-height);
+// ---------------------- 3.8 自定义工具类 ----------------------
+// 固定按钮宽度
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    width: 60px;
+  }
 }
 
-.el-input--small .el-input__icon,
-.el-input--medium .el-input__icon,
-.el-input--large .el-input__icon {
-  height: var(--btn-height);
-  line-height: var(--btn-height);
-}
-
-.el-tabs__content {
-  overflow: visible !important;
+// 居中单元格（深色表头）
+.is-center.is-leaf.el-table__cell {
+  background-color: #1F2227;
 }
\ No newline at end of file
diff --git a/klp-ui/src/assets/styles/sidebar.scss b/klp-ui/src/assets/styles/sidebar.scss
index 6442aed4..2ee6a676 100644
--- a/klp-ui/src/assets/styles/sidebar.scss
+++ b/klp-ui/src/assets/styles/sidebar.scss
@@ -1,10 +1,16 @@
 #app {
+  // 文本颜色调整为偏黑色系（直接写死值，确保清晰）
+  --text-primary: #1a1a1a;
+  --text-regular: #333333;
+  --text-secondary: #555555;
+  --text-placeholder: #777777;
 
   .main-container {
     height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left .28s, box-shadow .3s ease;
     margin-left: $base-sidebar-width;
     position: relative;
+    background: #1E2227; // 金属浅色渐变
   }
 
   .sidebarHide {
@@ -12,10 +18,11 @@
   }
 
   .sidebar-container {
-    -webkit-transition: width .28s;
-    transition: width 0.28s;
+    -webkit-transition: width .28s, background .3s ease;
+    transition: width 0.28s, background .3s ease;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    background: #1E2227; // 金属深色渐变
+    border-right: 1px solid #8d939b;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -24,8 +31,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -38,6 +44,12 @@
 
     .el-scrollbar__bar.is-vertical {
       right: 0px;
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    .el-scrollbar__thumb {
+      background: #1E2227;
+      border-radius: 3px;
     }
 
     .el-scrollbar {
@@ -58,52 +70,84 @@
       display: inline-block;
       width: 100%;
       overflow: hidden;
+      color: var(--text-regular); // 链接文本偏黑
+      text-decoration: none;
     }
 
     .svg-icon {
       margin-right: 16px;
+      color: var(--text-secondary); // 图标颜色稍浅
     }
 
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
+      background: transparent;
     }
 
     .el-menu-item, .el-submenu__title {
+      // 明确默认状态样式（关键修复）
+      background: transparent !important;
+      box-shadow: none !important;
+
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      color: var(--text-regular); // 菜单项文本偏黑
+      border-radius: 4px;
+      margin: 0 6px;
+      transition: all 0.2s ease;
     }
 
-    // menu hover
+    // menu hover - 仅在hover时生效
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: var(--text-primary) !important; // hover时文本更深
+        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
+        inset -1px -1px 2px rgba(255, 255, 255, 0.05);
       }
     }
 
+    // 深色主题下子菜单选中高亮
     & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
-      // border-right: 3px solid $base-menu-color-active !important;
+      color: #fff !important; // 选中时文字纯白
+      // background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
+      // border-left: 3px solid #5F7BA0; // 左边高亮条
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    // & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
+      // 子菜单默认样式
+      background: transparent !important;
+      box-shadow: none !important;
+
       min-width: $base-sidebar-width !important;
+      margin: 0 4px;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: var(--text-primary) !important;
       }
     }
 
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    // & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      background: transparent !important;
+      color: var(--text-regular);
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: var(--text-primary) !important;
+      }
+
+      &.is-active {
+        background: rgba(95, 123, 160, 0.28) !important; // 激活背景
+        color: #fff !important; // 激活文字白色
+        font-weight: 600;
+        border-left: 3px solid #5F7BA0; // 左边高亮条
       }
     }
   }
@@ -139,7 +183,6 @@
         .svg-icon {
           margin-left: 20px;
         }
-
       }
     }
 
@@ -169,8 +212,9 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform .28s, box-shadow .3s ease;
       width: $base-sidebar-width !important;
+      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
     }
 
     &.hideSidebar {
@@ -183,7 +227,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -196,14 +239,34 @@
   &>.el-menu {
     .svg-icon {
       margin-right: 16px;
+      color: var(--text-secondary);
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
-  .el-menu-item {
+  .el-menu-item .nest-menu {
+    // 默认样式重置
+    background: transparent !important;
+    box-shadow: none !important;
+
     &:hover {
-      // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background: rgba(255, 255, 255, 0.1) !important;
+      color: var(--text-primary) !important;
+      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.05);
+    }
+
+    ::v-deep &.is-active {
+      background: rgba(95, 123, 160, 0.28) !important; // 工业蓝背景
+      color: #ffffff !important; // 激活文字白色
+      font-weight: 600;
+      border-left: 3px solid #5F7BA0;
+      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.08);
+    }
+
+    ::v-deep .el-menu-item.is-active span,
+    ::v-deep .el-submenu__title.is-active span {
+      color: #ffffff !important; // 激活文字白色
     }
   }
 
@@ -211,9 +274,12 @@
   >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
+    background: linear-gradient(145deg, #b0b5bb, #999ea6);
+    border: 1px solid #8d939b;
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
 
     &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+      background: rgba(0, 0, 0, 0.05);
     }
 
     &::-webkit-scrollbar {
@@ -221,12 +287,13 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
+      background: #8d939b;
+      border-radius: 3px; 
     }
   }
 }
 
-.el-menu-item.is-active {
-  border-left: 4px solid !important;
+#app .sidebar-container .el-menu-item, 
+#app .sidebar-container .el-submenu__title {
+  margin: 0;
 }
\ No newline at end of file
diff --git a/klp-ui/src/components/KLPUI/KLPList/index.vue b/klp-ui/src/components/KLPUI/KLPList/index.vue
index b91bee18..d7dba9ea 100644
--- a/klp-ui/src/components/KLPUI/KLPList/index.vue
+++ b/klp-ui/src/components/KLPUI/KLPList/index.vue
@@ -257,7 +257,7 @@ export default {
 .klp-list-item {
   padding: 6px 8px;
   margin-bottom: 6px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid #111;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
@@ -269,8 +269,8 @@ export default {
 
 /* 列表项选中状态（左侧高亮边框+背景色） */
 .klp-list-item.active {
-  border-left: 3px solid #409eff;
-  background-color: #f5f7fa;
+  border-left: 3px solid #2bf;
+  background-color: #222;
 }
 
 /* 列表标题区域（占满中间空间，让操作按钮靠右） */
@@ -284,7 +284,7 @@ export default {
 
 /* 标题前置标签样式 */
 .klp-list-title .title-label {
-  color: #606266;
+  color: #ddd;
   margin-right: 6px;
   font-size: 13px;
   white-space: nowrap; /* 标签不换行 */
@@ -293,7 +293,7 @@ export default {
 
 /* 标题内容样式（溢出省略） */
 .klp-list-title .title-value {
-  color: #303133;
+  color: #ddd;
   font-weight: 500;
   font-size: 14px;
   white-space: nowrap; /* 禁止换行 */
diff --git a/klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue b/klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue
new file mode 100644
index 00000000..4de2b80f
--- /dev/null
+++ b/klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue
@@ -0,0 +1,23 @@
+<script>
+  export default {
+    name: 'ColumnRender',
+    functional: true,
+    props: {
+      column: {
+        type: Object,
+        required: true
+      },
+      render: {
+        type: Function,
+        required: true
+      },
+      data: {
+        type: Object,
+        required: true
+      }
+    },
+    render(h, { props }) {
+      return props.render(h, props.data);
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/klp-ui/src/components/KLPUI/KLPTable/index.vue b/klp-ui/src/components/KLPUI/KLPTable/index.vue
index fd0dbd30..07c2cba2 100644
--- a/klp-ui/src/components/KLPUI/KLPTable/index.vue
+++ b/klp-ui/src/components/KLPUI/KLPTable/index.vue
@@ -39,6 +39,39 @@
 
       <!-- 3. 透传“自定义列”插槽（业务层直接用 <el-table-column> 嵌套的情况） -->
       <slot v-bind:tableRef="tableRef"></slot>
+
+      <el-table-column
+        v-if="selectionColumn"
+        type="selection"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-if="indexColumn"
+        type="index"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-for="(column, index) in customColumns"
+        v-bind="column"
+        :width="column.width"
+        :prop="column.prop"
+        :align="column.align"
+        :label="column.label"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+        :show-overflow-tooltip="column.showOverflowTooltip"
+        :sortable="column.sortable"
+      >
+          <template v-slot="scope">
+            <ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
+            <Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
+            <span v-else>{{ scope.row[column.prop] }}</span>
+        </template>
+      </el-table-column>
     </el-table>
 
     <!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
@@ -47,8 +80,15 @@
 </template>
 
 <script>
+import ColumnRender from './ColumnRender.vue';  
+import Eclipse from './renderer/eclipse.vue';
+
 export default {
-  name: "KLPTable", // 组件名，便于调试和文档生成
+  name: "KLPTable", // 组件名，便于调试和文档生成 
+  components: {
+    ColumnRender,
+    Eclipse
+  },
   props: {
     // 1. 扩展 props：新增原生 Table 没有的属性（如加载状态）
     loading: {
@@ -63,6 +103,18 @@ export default {
     customClass: {
       type: String,
       default: ""
+    },
+    customColumns: {
+      type: Array,
+      default: () => []
+    },
+    selectionColumn: {
+      type: Boolean,
+      default: false
+    },
+    indexColumn: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -71,6 +123,31 @@ export default {
     };
   },
   methods: {
+    // 核心方法：净化scope，移除可能导致循环引用的属性
+    sanitizeScope(scope) {
+      if (!scope) return {};
+      // 只保留安全的属性（根据实际需求调整）
+      const { row, column, $index, store } = scope;
+      // 深拷贝避免引用传递，同时过滤循环引用
+      return this.deepClone({ row, column, $index, store });
+    },
+    // 安全的深拷贝方法（避免JSON.parse/stringify无法处理的类型）
+    deepClone(obj) {
+      if (obj === null || typeof obj !== "object") return obj;
+      if (obj instanceof Date) return new Date(obj);
+      if (obj instanceof RegExp) return new RegExp(obj);
+      
+      // 避免处理Vue实例（通常带有循环引用）
+      if (obj._isVue) return { _isVue: true };
+
+      const clone = Array.isArray(obj) ? [] : {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          clone[key] = this.deepClone(obj[key]);
+        }
+      }
+      return clone;
+    },
     // 3. 透传原生 Table 实例方法（如 clearSelection、doLayout 等）
     // 业务层可通过 this.$refs.myTable.xxx() 调用原生方法
     getTableInstance() {
diff --git a/klp-ui/src/components/KLPUI/KLPTable/renderer/eclipse.vue b/klp-ui/src/components/KLPUI/KLPTable/renderer/eclipse.vue
new file mode 100644
index 00000000..e28282b5
--- /dev/null
+++ b/klp-ui/src/components/KLPUI/KLPTable/renderer/eclipse.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="eclipse-container">
+    <el-tooltip :content="text" placement="top" :disabled="text.length < 10">
+      <span class="eclipse">{{ text }}</span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Eclipse',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style>
+.eclipse-container {
+  position: relative; /* 为tooltip提供定位参考 */
+  display: inline-block; /* 确保容器只占内容宽度 */
+}
+
+.eclipse {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block; /* 确保元素有明确的尺寸 */
+  max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
+}
+</style>
diff --git a/klp-ui/src/layout/components/Navbar.vue b/klp-ui/src/layout/components/Navbar.vue
index b662d385..2ede0d0c 100644
--- a/klp-ui/src/layout/components/Navbar.vue
+++ b/klp-ui/src/layout/components/Navbar.vue
@@ -106,24 +106,32 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  // 金属质感渐变背景
+  background: #454c51;
+  border-bottom: 1px solid #8d939b;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 
+              0 1px 1px rgba(255, 255, 255, 0.08) inset;
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: all .3s ease;
+    -webkit-tap-highlight-color: transparent;
+    padding: 0 15px;
+    border-right: 1px solid rgba(0, 0, 0, 0.05);
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.05);
+      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
+                  inset -1px -1px 2px rgba(255, 255, 255, 0.05);
     }
   }
 
   .breadcrumb-container {
     float: left;
+    padding-left: 15px;
   }
 
   .topmenu-container {
@@ -147,24 +155,29 @@ export default {
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
+      padding: 0 12px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      // 金属风格文字色
+      color: #ddd;
       vertical-align: text-bottom;
+      transition: all 0.2s ease;
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        position: relative;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.05);
+          box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
+                      inset -1px -1px 2px rgba(255, 255, 255, 0.05);
+          color: #333;
         }
       }
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 15px;
 
       .avatar-wrapper {
         margin-top: 5px;
@@ -174,18 +187,22 @@ export default {
           cursor: pointer;
           width: 40px;
           height: 40px;
-          border-radius: 10px;
+          border-radius: 8px;
+          // 头像金属边框
+          border: 1px solid #a0a6ad;
+          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
         }
 
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
-          right: -20px;
+          right: -15px;
           top: 25px;
           font-size: 12px;
+          color: #666;
         }
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/layout/components/TagsView/index.vue b/klp-ui/src/layout/components/TagsView/index.vue
index 96585a5b..71f13249 100644
--- a/klp-ui/src/layout/components/TagsView/index.vue
+++ b/klp-ui/src/layout/components/TagsView/index.vue
@@ -241,9 +241,11 @@ export default {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  // 金属浅色渐变背景（直接写死渐变值）
+  background: #454c51;
+  border-bottom: 1px solid #a0a6ad;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
+  
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -251,39 +253,61 @@ export default {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
+      border: 1px solid #a0a6ad;
+      color: #ddd;
+      // 标签金属渐变背景
+      background: #454c51;
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      border-radius: 4px;
+      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), 
+                 -1px -1px 2px rgba(255, 255, 255, 0.05);
+      transition: all 0.2s ease;
+      
       &:first-of-type {
         margin-left: 15px;
       }
+      
       &:last-of-type {
         margin-right: 15px;
       }
+      
+      &:hover {
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 
+                   -1px -1px 2px rgba(255, 255, 255, 0.08);
+        border-color: #8d939b;
+      }
+      
       &.active {
-        background-color: #42b983;
+        // 激活状态主色调渐变
+        background: linear-gradient(145deg, #6b809d, #637994);
         color: #fff;
-        border-color: #42b983;
+        border-color: #5a6d86;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 
+                   -1px -1px 2px rgba(255, 255, 255, 0.1) inset;
+        
         &::before {
           content: '';
-          background: #fff;
+          background: rgba(255, 255, 255, 0.8);
           display: inline-block;
           width: 8px;
           height: 8px;
           border-radius: 50%;
           position: relative;
           margin-right: 2px;
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
         }
       }
     }
   }
+  
   .contextmenu {
     margin: 0;
-    background: #fff;
+    // 右键菜单金属背景
+    background: #454c51;
+    border: 1px solid #a0a6ad;
     z-index: 3000;
     position: absolute;
     list-style-type: none;
@@ -291,14 +315,19 @@ export default {
     border-radius: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    color: #606266;
+    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15), 
+               -2px -2px 5px rgba(255, 255, 255, 0.08);
+    
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
+      transition: all 0.2s ease;
+      
       &:hover {
-        background: #eee;
+        background: rgba(99, 121, 148, 0.15);
+        color: #637994;
       }
     }
   }
@@ -306,9 +335,10 @@ export default {
 </style>
 
 <style lang="scss">
-//reset element css of el-icon-close
+// 重置关闭图标样式
 .tags-view-wrapper {
   .tags-view-item {
+    color: #ddd;
     .el-icon-close {
       width: 16px;
       height: 16px;
@@ -317,16 +347,28 @@ export default {
       text-align: center;
       transition: all .3s cubic-bezier(.645, .045, .355, 1);
       transform-origin: 100% 50%;
+      margin-left: 4px;
+      
       &:before {
         transform: scale(.6);
         display: inline-block;
         vertical-align: -3px;
       }
+      
       &:hover {
-        background-color: #b4bccc;
+        background-color: rgba(0, 0, 0, 0.15);
+        color: #ddd;
+        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
+                    inset -1px -1px 2px rgba(255, 255, 255, 0.05);
+      }
+    }
+    
+    &.active {
+      .el-icon-close:hover {
+        background-color: rgba(255, 255, 255, 0.2);
         color: #fff;
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/index.vue b/klp-ui/src/views/index.vue
index 1771d84f..92d4d092 100644
--- a/klp-ui/src/views/index.vue
+++ b/klp-ui/src/views/index.vue
@@ -33,7 +33,6 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
 import AllApplications from '@/views/components/AllApplications.vue';
 import OrderDashboard from '@/views/components/OrderDashboard.vue';
 import FlowTable from '@/views/components/FlowTable.vue';
diff --git a/klp-ui/src/views/wms/order/customer.vue b/klp-ui/src/views/wms/order/customer.vue
index fc67bcfe..2ef10f92 100644
--- a/klp-ui/src/views/wms/order/customer.vue
+++ b/klp-ui/src/views/wms/order/customer.vue
@@ -75,9 +75,9 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
+    <KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" :customColumns="customColumns">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
+      <!-- <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
       <el-table-column label="客户名称" align="center" prop="name" />
       <el-table-column label="手机" align="center" prop="mobile" />
       <el-table-column label="电话" align="center" prop="telephone" />
@@ -108,7 +108,7 @@
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
-      </el-table-column>
+      </el-table-column> -->
     </KLPTable>
 
     <pagination
@@ -183,6 +183,64 @@ export default {
   },
   data() {
     return {
+      customColumns: [
+        {
+          label: '客户名称',
+          prop: 'name'
+        },
+        {
+          label: '手机',
+          prop: 'mobile'
+        },
+        {
+          label: '电话',
+          prop: 'telephone'
+        },
+        {
+          label: 'QQ',
+          prop: 'qq'
+        },
+        {
+          label: '微信',
+          prop: 'wechat'
+        },
+        {
+          label: '邮箱',
+          prop: 'email'
+        },
+        {
+          label: '地区编号',
+          prop: 'areaId'
+        },
+        {
+          label: '详细地址',
+          prop: 'detailAddress',
+          eclipse: true
+        },
+        {
+          label: '客户等级',
+          prop: 'level'
+        },
+        {
+          label: '客户来源',
+          prop: 'source'
+        },
+        {
+          label: '备注',
+          prop: 'remark'
+        },
+        {
+          label: '操作',
+          width: 150,
+          fixed: 'right',
+          render: (h, row) => {
+            const actions = [];
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+            return actions;
+          }
+        }
+      ],
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
diff --git a/klp-ui/src/views/wms/rxgood/detail.vue b/klp-ui/src/views/wms/rxgood/detail.vue
index 35f91a7a..a86c371f 100644
--- a/klp-ui/src/views/wms/rxgood/detail.vue
+++ b/klp-ui/src/views/wms/rxgood/detail.vue
@@ -91,55 +91,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable v-loading="loading" :data="reportDetailList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" type="index" v-if="true"/>
-      <!-- <el-table-column label="关联汇报概述ID" align="center" prop="summaryId" /> -->
-      <el-table-column label="货物编号" align="center" prop="deviceCode" />
-      <el-table-column label="货物类别" align="center" prop="category" />
-      <el-table-column label="货物说明" align="center" prop="deviceDescription" />
-      <el-table-column label="收发货详情" align="center" prop="reportDetail" />
-      <el-table-column label="图片概况" align="center" prop="ossIds" width="100">
-        <template slot-scope="scope">
-          <image-preview :src="scope.row.images" :width="50" :height="50"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleImageDetail(scope.row)"
-          >图片详情</el-button>
-
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleAddExpress(scope.row)"
-          >发货</el-button>
-
-
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
+    <KLPTable v-loading="loading" :data="reportDetailList" @selection-change="handleSelectionChange" :selectionColumn="true" :indexColumn="true" :customColumns="customColumns" />
 
     <pagination
       v-show="total>0"
@@ -253,6 +205,60 @@ export default {
   components: {UserSelect},
   data() {
     return {
+      customColumns: [
+        {
+          label: '关联汇报概述ID',
+          prop: 'summaryId',
+          width: 180,
+        },
+        {
+          label: '货物编号',
+          prop: 'deviceCode',
+          width: 180,
+        },
+        {
+          label: '货物类别',
+          prop: 'category',
+          width: 180,
+        },
+        {
+          label: '货物说明',
+          prop: 'deviceDescription',
+          width: 180,
+        },        
+        {
+          label: '收发货详情',
+          prop: 'reportDetail',
+          width: 180,
+        },
+        {
+          label: '图片概况',
+          prop: 'ossIds',
+          width: 100,
+          render: (h, row) => {
+            return <image-preview src={row.images} width={50} height={50} />
+          }
+        },
+        {
+          label: '备注',
+          prop: 'remark',
+          width: 180,
+          eclipse: true
+        },
+        {
+          label: '操作',
+          width: 150,
+          fixed: 'right',
+          render: (h, row) => {
+            const actions = [];
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-view" onClick={() => this.handleImageDetail(row)}>图片详情</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleAddExpress(row)}>发货</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+            return actions;
+          }
+        }
+      ],
       // 按钮loading
       buttonLoading: false,
       expressOpen:false,
diff --git a/klp-ui/src/views/wms/rxgood/index.vue b/klp-ui/src/views/wms/rxgood/index.vue
index 9bb77624..18581702 100644
--- a/klp-ui/src/views/wms/rxgood/index.vue
+++ b/klp-ui/src/views/wms/rxgood/index.vue
@@ -85,44 +85,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable v-loading="loading" :data="reportSummaryList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" type="index" v-if="true"/>
-      <el-table-column label="收发货标题" align="center" prop="reportTitle">
-        <template slot-scope="scope">
-          <router-link class="link-type" :to="'/exp/rx/detail/' + scope.row.summaryId">{{ scope.row.reportTitle }}</router-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="最近汇报时间" align="center" prop="lastUpdateTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.lastUpdateTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="收发货日期" align="center" prop="reportDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.reportDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="经办人" align="center" prop="reporter" />
-<!--      <el-table-column label="涉及项目" align="center" prop="projectName" />-->
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
+    <KLPTable v-loading="loading" :data="reportSummaryList" @selection-change="handleSelectionChange" :selectionColumn="true" :indexColumn="true" :customColumns="customColumns" />
 
     <pagination
       v-show="total>0"
@@ -182,6 +145,53 @@ export default {
   name: "ReportSummary",
   data() {
     return {
+      customColumns: [
+        {
+          label: '收发货标题',
+          prop: 'reportTitle',
+          render: (h, row) => {
+            return <router-link class="link-type" to={'/exp/rx/detail/' + row.summaryId}>{row.reportTitle}</router-link>
+          }
+        },
+        {
+          label: '最近汇报时间',
+          prop: 'lastUpdateTime',
+          width: 180,
+          render: (h, row) => {
+            return <span>{this.parseTime(row.lastUpdateTime, '{y}-{m}-{d}')}</span>
+          }
+        },
+        {
+          label: '收发货日期',
+          prop: 'reportDate',
+          width: 180,
+          render: (h, row) => {
+            return <span>{this.parseTime(row.reportDate, '{y}-{m}-{d}')}</span>
+          }
+        },
+        {
+          label: '经办人',
+          prop: 'reporter',
+          width: 180,
+        },
+        {
+          label: '备注',
+          prop: 'remark',
+          width: 180,
+          eclipse: true
+        },
+        {
+          label: '操作',
+          width: 150,
+          fixed: 'right',
+          render: (h, row) => {
+            const actions = [];
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+            return actions;
+          }
+        }
+      ],
       // projectList: [],
       // 按钮loading
       buttonLoading: false,