调整表格css变量

src/components/ZmTable/ZmTableColumn.vue

@@ -336,18 +336,18 @@ watch(
 .header-wrapper {
   display: flex;
   align-items: center;
-  width: var(--zm-table-header-wrapper-width, 100%);
-  height: var(--zm-table-header-wrapper-height, 100%);
-  min-width: var(--zm-table-header-wrapper-min-width, 0);
-  gap: var(--zm-table-header-wrapper-gap, 6px);
-  font-size: var(--zm-table-header-wrapper-font-size, var(--zm-table-header-font-size, 12px));
-  font-weight: var(--zm-table-header-wrapper-font-weight, var(--zm-table-header-font-weight, 600));
-  line-height: var(--zm-table-header-wrapper-line-height, 16px);
-  color: var(--zm-table-header-wrapper-text-color, var(--zm-table-header-text-color, #6b7f99));
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  gap: 6px;
+  font-size: var(--zm-table-header-font-size, var(--zm-table-font-size, 12px));
+  font-weight: var(--zm-table-header-font-weight, 600);
+  line-height: var(--zm-table-header-line-height, 16px);
+  color: var(--zm-table-header-text-color, #6b7f99);
   user-select: none;
 
   .truncate {
-    min-width: var(--zm-table-header-title-min-width, 0);
+    min-width: 0;
   }
 }
 
@@ -355,10 +355,10 @@ watch(
 .action-area {
   display: flex;
   flex: 0 0 auto;
-  height: var(--zm-table-header-action-area-height, 100%);
-  margin-left: var(--zm-table-header-action-area-margin-left, 4px);
+  height: 100%;
+  margin-left: 4px;
   align-items: center;
-  gap: var(--zm-table-header-action-area-gap, 3px);
+  gap: 3px;
 }
 
 // 表头小图标按钮的通用样式。
@@ -366,17 +366,15 @@ watch(
   display: flex;
   width: var(--zm-table-header-icon-btn-size, 18px);
   height: var(--zm-table-header-icon-btn-size, 18px);
-  padding: var(--zm-table-header-icon-btn-padding, 0);
+  padding: 0;
   color: var(--zm-table-header-icon-btn-color, #8aa0b8);
   cursor: pointer;
-  background: var(--zm-table-header-icon-btn-bg, transparent);
-  border: var(--zm-table-header-icon-btn-border, 0);
+  background: transparent;
+  border: 0;
   border-radius: var(--zm-table-header-icon-btn-radius, 4px);
   transition:
-    color var(--zm-table-header-icon-btn-transition-duration, 0.16s)
-      var(--zm-table-header-icon-btn-transition-timing, ease),
-    background-color var(--zm-table-header-icon-btn-transition-duration, 0.16s)
-      var(--zm-table-header-icon-btn-transition-timing, ease);
+    color 0.16s ease,
+    background-color 0.16s ease;
   align-items: center;
   justify-content: center;
 
@@ -401,64 +399,35 @@ watch(
 
 // 列设置面板容器。
 .column-setting-panel {
-  min-width: var(--zm-table-column-setting-panel-min-width, 0);
+  min-width: 0;
 }
 
 // 面板底部区域，放重置按钮。
 .column-setting-footer {
   display: flex;
   justify-content: flex-end;
-  padding-top: var(--zm-table-column-setting-footer-padding-top, 8px);
-  margin-top: var(--zm-table-column-setting-footer-margin-top, 8px);
-  border-top: var(--zm-table-column-setting-footer-border-width, 1px)
-    var(--zm-table-column-setting-footer-border-style, solid)
-    var(--zm-table-column-setting-footer-border-color, var(--el-border-color-lighter));
+  padding-top: 8px;
+  margin-top: 8px;
+  border-top: 1px solid var(--zm-table-column-setting-border-color, var(--el-border-color-lighter));
 }
 
 :global(.zm-table-column-setting-popper) {
-  --zm-table-column-setting-panel-min-width: 0;
-  --zm-table-column-setting-footer-padding-top: 8px;
-  --zm-table-column-setting-footer-margin-top: 8px;
-  --zm-table-column-setting-footer-border-width: 1px;
-  --zm-table-column-setting-footer-border-style: solid;
-  --zm-table-column-setting-footer-border-color: var(--el-border-color-lighter);
-  --zm-table-column-setting-list-min-width: 0;
-  --zm-table-column-setting-list-gap: 4px;
-  --zm-table-column-setting-list-max-height: 360px;
-  --zm-table-column-setting-child-list-padding-left: 18px;
-  --zm-table-column-setting-child-list-margin: 3px 0 6px;
-  --zm-table-column-setting-child-list-border-width: 1px;
-  --zm-table-column-setting-child-list-border-style: dashed;
-  --zm-table-column-setting-child-list-border-color: var(--el-border-color);
-  --zm-table-column-setting-child-list-gap: 3px;
-  --zm-table-column-setting-group-min-width: 0;
-  --zm-table-column-setting-item-height: 32px;
-  --zm-table-column-setting-item-min-width: 0;
-  --zm-table-column-setting-item-padding: 0 4px;
-  --zm-table-column-setting-item-font-size: 12px;
+  --zm-table-column-setting-font-size: var(--zm-table-font-size, 12px);
+  --zm-table-column-setting-text-color: var(--el-text-color-regular);
+  --zm-table-column-setting-border-color: var(--el-border-color);
+  --zm-table-column-setting-hover-bg: var(--el-fill-color-lighter);
+  --zm-table-column-setting-radius: 6px;
+  --zm-table-column-setting-gap: 4px;
+  --zm-table-column-setting-max-height: 360px;
+  --zm-table-column-setting-row-height: 32px;
+  --zm-table-column-setting-child-row-height: 30px;
   --zm-table-column-setting-item-font-weight: 400;
-  --zm-table-column-setting-item-text-color: var(--el-text-color-regular);
-  --zm-table-column-setting-item-radius: 6px;
-  --zm-table-column-setting-item-column-gap: 6px;
-  --zm-table-column-setting-item-grid-template-columns: 22px minmax(0, 1fr) repeat(3, 24px);
-  --zm-table-column-setting-item-hover-bg: var(--el-fill-color-lighter);
   --zm-table-column-setting-group-font-weight: 600;
-  --zm-table-column-setting-child-item-height: 30px;
-  --zm-table-column-setting-child-item-padding-left: 2px;
-  --zm-table-column-setting-label-font-size: inherit;
-  --zm-table-column-setting-label-font-weight: inherit;
-  --zm-table-column-setting-label-text-color: currentcolor;
   --zm-table-column-setting-icon-btn-size: 22px;
-  --zm-table-column-setting-icon-btn-padding: 0;
-  --zm-table-column-setting-icon-btn-color: #8aa0b8;
-  --zm-table-column-setting-icon-btn-bg: transparent;
-  --zm-table-column-setting-icon-btn-border: 0;
-  --zm-table-column-setting-icon-btn-radius: 4px;
-  --zm-table-column-setting-icon-btn-active-color: var(--el-color-primary);
-  --zm-table-column-setting-icon-btn-active-bg: var(--el-color-primary-light-9);
   --zm-table-column-setting-icon-size: 15px;
-  --zm-table-column-setting-drag-cursor: grab;
-  --zm-table-column-setting-drag-active-cursor: grabbing;
+  --zm-table-column-setting-icon-color: #8aa0b8;
+  --zm-table-column-setting-icon-active-color: var(--el-color-primary);
+  --zm-table-column-setting-icon-active-bg: var(--el-color-primary-light-9);
   --zm-table-column-setting-ghost-bg: var(--el-color-primary-light-9);
   --zm-table-column-setting-ghost-opacity: 0.55;
 }

src/components/ZmTable/ZmTableColumnSettingTree.vue

@@ -157,47 +157,42 @@ const toggleColumnFixed = (item: ColumnSettingItem, fixed: Exclude<ColumnFixed,
 <style scoped lang="scss">
 .column-setting-list {
   display: flex;
-  min-width: var(--zm-table-column-setting-list-min-width, 0);
+  min-width: 0;
   flex-direction: column;
-  gap: var(--zm-table-column-setting-list-gap, 4px);
+  gap: var(--zm-table-column-setting-gap, 4px);
 
   &.is-root {
-    max-height: var(--zm-table-column-setting-list-max-height, 360px);
+    max-height: var(--zm-table-column-setting-max-height, 360px);
     overflow-y: auto;
   }
 
   &.is-child-list {
-    padding-left: var(--zm-table-column-setting-child-list-padding-left, 18px);
-    margin: var(--zm-table-column-setting-child-list-margin, 3px 0 6px);
-    border-left: var(--zm-table-column-setting-child-list-border-width, 1px)
-      var(--zm-table-column-setting-child-list-border-style, dashed)
-      var(--zm-table-column-setting-child-list-border-color, var(--el-border-color));
-    gap: var(--zm-table-column-setting-child-list-gap, 3px);
+    padding-left: 18px;
+    margin: 3px 0 6px;
+    border-left: 1px dashed var(--zm-table-column-setting-border-color, var(--el-border-color));
+    gap: 3px;
   }
 }
 
 .column-setting-group {
-  min-width: var(--zm-table-column-setting-group-min-width, 0);
+  min-width: 0;
 }
 
 .column-setting-item {
   display: grid;
-  height: var(--zm-table-column-setting-item-height, 32px);
-  min-width: var(--zm-table-column-setting-item-min-width, 0);
-  padding: var(--zm-table-column-setting-item-padding, 0 4px);
-  font-size: var(--zm-table-column-setting-item-font-size, 12px);
+  height: var(--zm-table-column-setting-row-height, 32px);
+  min-width: 0;
+  padding: 0 4px;
+  font-size: var(--zm-table-column-setting-font-size, 12px);
   font-weight: var(--zm-table-column-setting-item-font-weight, 400);
-  color: var(--zm-table-column-setting-item-text-color, var(--el-text-color-regular));
-  border-radius: var(--zm-table-column-setting-item-radius, 6px);
+  color: var(--zm-table-column-setting-text-color, var(--el-text-color-regular));
+  border-radius: var(--zm-table-column-setting-radius, 6px);
   align-items: center;
-  column-gap: var(--zm-table-column-setting-item-column-gap, 6px);
-  grid-template-columns: var(
-    --zm-table-column-setting-item-grid-template-columns,
-    22px minmax(0, 1fr) repeat(3, 24px)
-  );
+  column-gap: 6px;
+  grid-template-columns: 22px minmax(0, 1fr) repeat(3, 24px);
 
   &:hover {
-    background: var(--zm-table-column-setting-item-hover-bg, var(--el-fill-color-lighter));
+    background: var(--zm-table-column-setting-hover-bg, var(--el-fill-color-lighter));
   }
 
   &.is-group {
@@ -205,16 +200,14 @@ const toggleColumnFixed = (item: ColumnSettingItem, fixed: Exclude<ColumnFixed,
   }
 
   &.is-child {
-    height: var(--zm-table-column-setting-child-item-height, 30px);
-    padding-left: var(--zm-table-column-setting-child-item-padding-left, 2px);
+    height: var(--zm-table-column-setting-child-row-height, 30px);
+    padding-left: 2px;
   }
 }
 
 .column-setting-label {
   overflow: hidden;
-  font-size: var(--zm-table-column-setting-label-font-size, inherit);
-  font-weight: var(--zm-table-column-setting-label-font-weight, inherit);
-  color: var(--zm-table-column-setting-label-text-color, currentcolor);
+  color: currentcolor;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -223,20 +216,20 @@ const toggleColumnFixed = (item: ColumnSettingItem, fixed: Exclude<ColumnFixed,
   display: flex;
   width: var(--zm-table-column-setting-icon-btn-size, 22px);
   height: var(--zm-table-column-setting-icon-btn-size, 22px);
-  padding: var(--zm-table-column-setting-icon-btn-padding, 0);
-  color: var(--zm-table-column-setting-icon-btn-color, #8aa0b8);
+  padding: 0;
+  color: var(--zm-table-column-setting-icon-color, #8aa0b8);
   cursor: pointer;
-  background: var(--zm-table-column-setting-icon-btn-bg, transparent);
-  border: var(--zm-table-column-setting-icon-btn-border, 0);
-  border-radius: var(--zm-table-column-setting-icon-btn-radius, 4px);
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
   align-items: center;
   justify-content: center;
 
   &:hover,
   &.is-active {
-    color: var(--zm-table-column-setting-icon-btn-active-color, var(--el-color-primary));
+    color: var(--zm-table-column-setting-icon-active-color, var(--el-color-primary));
     background-color: var(
-      --zm-table-column-setting-icon-btn-active-bg,
+      --zm-table-column-setting-icon-active-bg,
       var(--el-color-primary-light-9)
     );
   }
@@ -248,10 +241,10 @@ const toggleColumnFixed = (item: ColumnSettingItem, fixed: Exclude<ColumnFixed,
 }
 
 .column-setting-drag-handle {
-  cursor: var(--zm-table-column-setting-drag-cursor, grab);
+  cursor: grab;
 
   &:active {
-    cursor: var(--zm-table-column-setting-drag-active-cursor, grabbing);
+    cursor: grabbing;
   }
 }
 

src/components/ZmTable/index.vue

@@ -391,83 +391,55 @@ defineExpose({
 
 <style lang="scss">
 .zm-table {
-  --zm-table-width: 100%;
-  --zm-table-overflow: hidden;
-  --zm-table-radius: 10px;
-  --zm-table-bg: var(--el-bg-color);
-  --zm-table-border-width: 1px;
-  --zm-table-border-style: solid;
-  --zm-table-border-color: #e7edf4;
-  --zm-table-box-shadow: none;
   --zm-table-font-family: inherit;
   --zm-table-font-size: 12px;
-  --zm-table-header-border-color: #e3eaf2;
-  --zm-table-row-border-color: #edf2f7;
-  --zm-table-header-bg: #f7f9fc;
-  --zm-table-header-text-color: #6b7f99;
+  --zm-table-text-color: #40546d;
+  --zm-table-strong-text-color: #24364d;
+  --zm-table-row-font-weight: 500;
+  --zm-table-bg: var(--el-bg-color);
+  --zm-table-border-color: #e7edf4;
+  --zm-table-radius: 10px;
+  --zm-table-header-bg: var(--el-fill-color-extra-light, #f7f9fc);
+  --zm-table-header-text-color: var(--el-text-color-secondary, #6b7f99);
+  --zm-table-header-border-color: var(--zm-table-border-color);
   --zm-table-header-cell-height: 36px;
   --zm-table-header-group-cell-height: 42px;
-  --zm-table-header-font-size: 12px;
+  --zm-table-header-font-size: var(--zm-table-font-size);
   --zm-table-header-font-weight: 600;
-  --zm-table-header-wrapper-width: 100%;
-  --zm-table-header-wrapper-height: 100%;
-  --zm-table-header-wrapper-min-width: 0;
-  --zm-table-header-wrapper-gap: 6px;
-  --zm-table-header-wrapper-font-size: var(--zm-table-header-font-size);
-  --zm-table-header-wrapper-font-weight: var(--zm-table-header-font-weight);
-  --zm-table-header-wrapper-line-height: 16px;
-  --zm-table-header-wrapper-text-color: var(--zm-table-header-text-color);
-  --zm-table-header-title-min-width: 0;
-  --zm-table-header-action-area-height: 100%;
-  --zm-table-header-action-area-margin-left: 4px;
-  --zm-table-header-action-area-gap: 3px;
+  --zm-table-header-line-height: 16px;
   --zm-table-header-icon-btn-size: 18px;
-  --zm-table-header-icon-btn-padding: 0;
   --zm-table-header-icon-btn-color: #8aa0b8;
-  --zm-table-header-icon-btn-bg: transparent;
-  --zm-table-header-icon-btn-border: 0;
   --zm-table-header-icon-btn-radius: 4px;
-  --zm-table-header-icon-btn-transition-duration: 0.16s;
-  --zm-table-header-icon-btn-transition-timing: ease;
   --zm-table-header-icon-btn-hover-color: var(--el-color-primary);
   --zm-table-header-icon-btn-hover-bg: var(--el-color-primary-light-9);
-  --zm-table-header-icon-btn-active-color: var(--el-color-primary);
-  --zm-table-header-icon-btn-active-bg: var(--el-color-primary-light-9);
+  --zm-table-header-icon-btn-active-color: var(--zm-table-header-icon-btn-hover-color);
+  --zm-table-header-icon-btn-active-bg: var(--zm-table-header-icon-btn-hover-bg);
   --zm-table-header-icon-size: 16px;
-  --zm-table-body-text-color: #40546d;
-  --zm-table-strong-text-color: #24364d;
-  --zm-table-row-font-weight: 500;
+  --zm-table-row-border-color: #edf2f7;
   --zm-table-stripe-bg: #fcfdff;
   --zm-table-hover-bg: #f5f9ff;
   --zm-table-current-bg: #eef6ff;
   --zm-table-cell-height: 38px;
-  --zm-table-cell-padding-x: 13px;
-  --zm-table-cell-first-padding-left: 16px;
-  --zm-table-cell-last-padding-right: 16px;
+  --zm-table-cell-padding-x: 0px;
+  --zm-table-cell-first-padding-left: 0px;
+  --zm-table-cell-last-padding-right: 0px;
   --zm-table-cell-line-height: 18px;
-  --zm-table-cell-transition-duration: 0.16s;
-  --zm-table-cell-transition-timing: ease;
   --zm-table-empty-min-height: 148px;
-  --zm-table-empty-bg: var(--el-bg-color);
-  --zm-table-empty-text-font-size: 12px;
+  --zm-table-empty-bg: var(--zm-table-bg);
+  --zm-table-empty-text-font-size: var(--zm-table-font-size);
   --zm-table-empty-text-color: var(--el-text-color-secondary);
-  --zm-table-fixed-left-shadow: 6px 0 12px -10px rgb(15 23 42 / 22%);
-  --zm-table-fixed-right-shadow: -6px 0 12px -10px rgb(15 23 42 / 22%);
   --zm-table-scrollbar-size: 7px;
   --zm-table-scrollbar-thumb-bg: #b8c5d6;
-  --zm-table-scrollbar-thumb-radius: 999px;
-  --zm-table-scrollbar-thumb-opacity: 0.55;
-  --zm-table-scrollbar-thumb-hover-opacity: 0.85;
 
-  width: var(--zm-table-width);
-  overflow: var(--zm-table-overflow);
+  width: 100%;
+  overflow: hidden;
   font-family: var(--zm-table-font-family);
   font-size: var(--zm-table-font-size);
-  color: var(--zm-table-body-text-color);
+  color: var(--zm-table-text-color);
   background: var(--zm-table-bg);
-  border: var(--zm-table-border-width) var(--zm-table-border-style) var(--zm-table-border-color);
+  border: 1px solid var(--zm-table-border-color);
   border-radius: var(--zm-table-radius);
-  box-shadow: var(--zm-table-box-shadow);
+  box-shadow: none;
 
   &::before,
   &::after {
@@ -499,16 +471,13 @@ defineExpose({
   .el-table__cell {
     height: var(--zm-table-cell-height);
     padding: 0;
-    color: var(--zm-table-body-text-color);
+    color: var(--zm-table-text-color);
     background: var(--zm-table-bg);
-    border-right: var(--zm-table-border-width) var(--zm-table-border-style)
-      var(--zm-table-row-border-color) !important;
-    border-bottom: var(--zm-table-border-width) var(--zm-table-border-style)
-      var(--zm-table-row-border-color) !important;
+    border-right: 1px solid var(--zm-table-row-border-color) !important;
+    border-bottom: 1px solid var(--zm-table-row-border-color) !important;
     transition:
-      background-color var(--zm-table-cell-transition-duration)
-        var(--zm-table-cell-transition-timing),
-      color var(--zm-table-cell-transition-duration) var(--zm-table-cell-transition-timing);
+      background-color 0.16s ease,
+      color 0.16s ease;
 
     &:last-child {
       border-right: none !important;
@@ -530,10 +499,8 @@ defineExpose({
       font-weight: var(--zm-table-header-font-weight);
       color: var(--zm-table-header-text-color);
       background: var(--zm-table-header-bg) !important;
-      border-right: var(--zm-table-border-width) var(--zm-table-border-style)
-        var(--zm-table-header-border-color) !important;
-      border-bottom: var(--zm-table-border-width) var(--zm-table-border-style)
-        var(--zm-table-header-border-color) !important;
+      border-right: 1px solid var(--zm-table-header-border-color) !important;
+      border-bottom: 1px solid var(--zm-table-header-border-color) !important;
 
       .cell {
         display: flex;
@@ -628,17 +595,16 @@ defineExpose({
   }
 
   .el-table__cell.el-table-fixed-column--left.is-last-column {
-    box-shadow: var(--zm-table-fixed-left-shadow);
+    box-shadow: 6px 0 12px -10px rgb(15 23 42 / 22%);
   }
 
   .el-table__cell.el-table-fixed-column--right.is-first-column {
-    box-shadow: var(--zm-table-fixed-right-shadow);
+    box-shadow: -6px 0 12px -10px rgb(15 23 42 / 22%);
   }
 
   .el-table__fixed-right-patch {
     background: var(--zm-table-header-bg);
-    border-bottom: var(--zm-table-border-width) var(--zm-table-border-style)
-      var(--zm-table-header-border-color);
+    border-bottom: 1px solid var(--zm-table-header-border-color);
   }
 
   .el-scrollbar__bar {
@@ -653,11 +619,11 @@ defineExpose({
 
   .el-scrollbar__thumb {
     background: var(--zm-table-scrollbar-thumb-bg);
-    border-radius: var(--zm-table-scrollbar-thumb-radius);
-    opacity: var(--zm-table-scrollbar-thumb-opacity);
+    border-radius: 999px;
+    opacity: 0.55;
 
     &:hover {
-      opacity: var(--zm-table-scrollbar-thumb-hover-opacity);
+      opacity: 0.85;
     }
   }
 }