🎈 perf: 优化部分样式的展示

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>

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"