perf: change table btn

2026-01-14 03:46:26 +00:00 · 2025-12-25 14:48:06 +08:00
parent 1318e64c15
commit 64a9a582df
8 changed files with 190 additions and 160 deletions
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -7,5 +7,6 @@ module.exports = {
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'avoid',
-  endOfLine: 'auto'
+  endOfLine: 'auto',
+  spaceBeforeFunctionParen: false
 }
--- a/src/components/Common/DataActions/index.vue
+++ b/src/components/Common/DataActions/index.vue
@@ -24,9 +24,7 @@
          class="more-action"
          v-bind="{ ...cleanButtonAction(action), icon: '' }"
        >
-          <span class="pre-icon">
-            <Icon v-if="action.icon" :icon="action.icon" />
-          </span>
+          <Icon v-if="action.icon" :icon="action.icon" class="pre-icon" />
          <span v-if="action.title">
            {{ action.title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
@@ -72,7 +70,7 @@
      >
        <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
          <div>
-            <Icon v-if="action.icon" :icon="action.icon" />
+            <Icon v-if="action.icon" :icon="action.icon" class="pre-icon" />
            <span>
              {{ action.title }}
            </span>
@@ -249,6 +247,10 @@ $color-drop-menu-border: #e4e7ed;
  .action-item {
    margin-left: 5px;

+    .pre-icon + span {
+      margin-left: 3px;
+    }
+
    &.grouped {
      margin-left: 0;
    }
@@ -257,10 +259,6 @@ $color-drop-menu-border: #e4e7ed;
      margin-left: 0;
    }
  }
-
-  .el-button.el-button--default {
-    color: var(--color-text-primary) !important;
-  }
 }

 // 主要是左侧 LeftSide
--- a/src/components/Common/IBox/index.vue
+++ b/src/components/Common/IBox/index.vue
@@ -1,9 +1,10 @@
 <template>
  <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
-    <template #header>
+    <template v-if="title" #header>
      <slot name="header">
        <div v-if="title" slot="header" class="clearfix ibox-title">
-          <i v-if="fa" :class="'fa ' + fa" /> <h5>{{ title }}</h5>
+          <i v-if="fa" :class="'fa ' + fa" />
+          <h5>{{ title }}</h5>
        </div>
      </slot>
    </template>
@@ -40,53 +41,53 @@ export default {
 }
 </script>

-<style lang='scss' scoped>
-  .ibox {
-    /*height: 100%;*/
-    clear: both;
-    padding: 0;
-  }
+<style lang="scss" scoped>
+.ibox {
+  /*height: 100%;*/
+  clear: both;
+  padding: 0;
+}

-  .ibox :deep(.el-card__header) {
-    border-color: #e7eaec;
-    border-image: none;
-    margin-bottom: 0;
-    padding: 10px 15px;
-    min-height: 30px;
-    line-height: 1.32;
-    font-weight: normal;
-  }
+.ibox :deep(.el-card__header) {
+  border-color: #e7eaec;
+  border-image: none;
+  margin-bottom: 0;
+  padding: 10px 15px;
+  min-height: 30px;
+  line-height: 1.32;
+  font-weight: normal;
+}

-  .ibox-title h5 {
-    display: inline-block;
-    font-size: 13px;
-    margin: 0;
-    padding: 0;
-    text-overflow: ellipsis;
-    font-weight: 500;
-  }
+.ibox-title h5 {
+  display: inline-block;
+  font-size: 13px;
+  margin: 0;
+  padding: 0;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}

-  .ibox-tools a {
-    cursor: pointer;
-    margin-left: 5px;
-    color: #c4c4c4;
-  }
+.ibox-tools a {
+  cursor: pointer;
+  margin-left: 5px;
+  color: #c4c4c4;
+}

-  .ibox-tools {
-    display: block;
-    float: none;
-    margin-top: 0;
-    position: relative;
-    padding: 0;
-    text-align: right;
-  }
+.ibox-tools {
+  display: block;
+  float: none;
+  margin-top: 0;
+  position: relative;
+  padding: 0;
+  text-align: right;
+}

-  .fa {
-    font-size: 14px;
-  }
+.fa {
+  font-size: 14px;
+}

-  .ibox :deep(.el-card__body) {
-    //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
-    color: var(--color-icon-primary);
-  }
+.ibox :deep(.el-card__body) {
+  //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
+  color: var(--color-icon-primary);
+}
 </style>
--- a/src/components/Form/DataForm/index.vue
+++ b/src/components/Form/DataForm/index.vue
@@ -12,7 +12,6 @@
      :style="{ '--label-width': labelWidth }"
      v-bind="$attrs"
      :server-errors="serverErrors"
-      v-on="$listeners"
    >
      <!-- slot 透传 -->
      <slot v-for="item in fields" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
@@ -87,6 +86,7 @@ export default {
  components: {
    ElFormRender
  },
+  inheritAttrs: true,
  props: {
    defaultButton: {
      type: Boolean,
@@ -106,7 +106,7 @@ export default {
    },
    submitBtnSize: {
      type: String,
-      default: 'small'
+      default: 'default'
    },
    submitBtnText: {
      type: String,
@@ -148,6 +148,7 @@ export default {
      default: '18.2%'
    }
  },
+  emits: ['submit', 'invalid'],
  data() {
    return {
      basicForm: this.form,
@@ -217,7 +218,7 @@ export default {
    handleClick(button) {
      const callback =
        button.callback ||
-        function(values, form) {
+        function (values, form) {
          // debug('Click ', button.title, ': ', values)
        }
      const form = this.$refs['form']
--- a/src/components/Table/ListTable/TableAction/LeftSide.vue
+++ b/src/components/Table/ListTable/TableAction/LeftSide.vue
@@ -2,6 +2,7 @@
  <DataActions
    v-if="hasLeftActions && iActions.length > 0"
    :actions="iActions"
+    size="default"
    class="header-action"
    v-bind="$attrs"
  />
@@ -111,7 +112,7 @@ export default {
          name: 'actionUpdateSelected',
          has: this.hasBulkUpdate,
          icon: 'batch-update',
-          can: function({ selectedRows }) {
+          can: function ({ selectedRows }) {
            let canBulkUpdate = vm.canBulkUpdate
            if (typeof canBulkUpdate === 'function') {
              canBulkUpdate = canBulkUpdate({ selectedRows })
@@ -185,7 +186,7 @@ export default {
          name: 'batch',
          title: this.$t('BatchProcessing', { number: this.selectedRows.length }),
          divided: true,
-          has: function({ selectedRows }) {
+          has: function ({ selectedRows }) {
            return selectedRows.length > 0
          },
          class: 'more-batch-processing',
--- a/src/components/Table/TagSearch/index.vue
+++ b/src/components/Table/TagSearch/index.vue
@@ -451,8 +451,9 @@ $origin-white-color: #ffffff;
    height: 30px;

    :deep(.el-input__wrapper) {
-      max-width: 200px;
+      max-width: 180px;
      box-shadow: unset;
+      padding-left: 0;

      .el-input__inner {
        height: 28px;
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -463,6 +463,19 @@ input[type='file'] {
 .el-form .el-form-item__content {
  font-size: 13px;
  line-height: 32px;
+
+  .el-input {
+    border-radius: 0;
+
+    .el-input__wrapper {
+      border-radius: 0;
+      padding: 0;
+
+      .el-input__inner {
+        border-radius: 0;
+      }
+    }
+  }
 }

 .el-tabs__item > span {
@@ -759,119 +772,123 @@ div.el-loading-parent--relative {
  z-index: 999999 !important;
 }

-// Element Plus dropdown menu 样式（通过 teleport 渲染到 body，需要使用全局样式）
-// 注意：不要强制显示 popper，只在打开时显示
-.el-dropdown__popper:not([style*='display: none']) {
-  .el-scrollbar {
-    height: auto !important;
-    min-height: auto !important;
-  }
-
-  .el-scrollbar__wrap {
-    height: auto !important;
-    min-height: auto !important;
-    overflow: visible !important;
-
-    &.el-scrollbar__wrap--hidden-default {
-      overflow: visible !important;
-    }
-  }
-
-  .el-scrollbar__view {
-    height: auto !important;
-    min-height: auto !important;
-  }
-
-  .el-dropdown__list {
-    height: auto !important;
-    min-height: auto !important;
-  }
+.el-button.el-button--primary.el-button--default:hover:not(.is-disabled) {
+  color: white;
 }

-.el-dropdown-menu {
-  padding: 4px 0 !important;
+// // Element Plus dropdown menu 样式（通过 teleport 渲染到 body，需要使用全局样式）
+// // 注意：不要强制显示 popper，只在打开时显示
+// .el-dropdown__popper:not([style*='display: none']) {
+//   .el-scrollbar {
+//     height: auto !important;
+//     min-height: auto !important;
+//   }

-  .el-dropdown-menu__item {
-    height: auto !important;
-    min-height: 34px !important;
-    line-height: 34px !important;
-    color: var(--color-text-primary) !important;
-    font-size: 14px !important;
+//   .el-scrollbar__wrap {
+//     height: auto !important;
+//     min-height: auto !important;
+//     overflow: visible !important;

-    &:not(.is-disabled) {
-      color: var(--color-text-primary) !important;
-    }
-  }
+//     &.el-scrollbar__wrap--hidden-default {
+//       overflow: visible !important;
+//     }
+//   }

-  .more-batch-processing {
-    &:hover {
-      background-color: transparent !important;
-    }
+//   .el-scrollbar__view {
+//     height: auto !important;
+//     min-height: auto !important;
+//   }

-    &.el-dropdown-menu__item--divided {
-      margin-top: 0;
-      border-top: none;
-      color: var(--color-text-primary);
-      cursor: auto;
-      font-size: 12px;
-      line-height: 30px;
-      border-bottom: 1px solid #e4e7ed;
+//   .el-dropdown__list {
+//     height: auto !important;
+//     min-height: auto !important;
+//   }
+// }

-      &:before {
-        height: 0;
-      }
-    }
-  }
+// .el-dropdown-menu {
+//   padding: 4px 0 !important;

-  .dropdown-item {
-    color: var(--color-text-primary);
-    line-height: 34px;
+//   .el-dropdown-menu__item {
+//     height: auto !important;
+//     min-height: 34px !important;
+//     line-height: 34px !important;
+//     color: var(--color-text-primary) !important;
+//     font-size: 14px !important;

-    .pre-icon {
-      width: 17px;
-      display: inline-block;
-    }
+//     &:not(.is-disabled) {
+//       color: var(--color-text-primary) !important;
+//     }
+//   }

-    i.fa {
-      font-size: 13px;
-      height: 13px;
-      width: 13px;
-      margin-right: 0;
-    }
+//   .more-batch-processing {
+//     &:hover {
+//       background-color: transparent !important;
+//     }

-    .svg-icon {
-      font-size: 13px;
-      height: 13px;
-      width: 13px;
-    }
-  }
+//     &.el-dropdown-menu__item--divided {
+//       margin-top: 0;
+//       border-top: none;
+//       color: var(--color-text-primary);
+//       cursor: auto;
+//       font-size: 12px;
+//       line-height: 30px;
+//       border-bottom: 1px solid #e4e7ed;

-  .el-dropdown-menu__item {
-    padding: 0 20px;
+//       &:before {
+//         height: 0;
+//       }
+//     }
+//   }

-    &.is-disabled {
-      color: var(--color-disabled);
-      cursor: not-allowed;
-      pointer-events: auto;
-    }
+//   .dropdown-item {
+//     color: var(--color-text-primary);
+//     line-height: 34px;

-    &:not(.is-disabled):hover {
-      background-color: var(--color-disabled-background);
-    }
-  }
+//     .pre-icon {
+//       width: 17px;
+//       display: inline-block;
+//     }

-  .dropdown-menu-title {
-    text-align: left;
-    font-size: 12px;
-    color: #909399;
-    line-height: 30px;
-    padding-left: 10px;
-    padding-top: 10px;
-    border-top: solid 1px #e4e7ed;
+//     i.fa {
+//       font-size: 13px;
+//       height: 13px;
+//       width: 13px;
+//       margin-right: 0;
+//     }

-    &:first-child {
-      padding-top: 0;
-      border-top: none;
-    }
-  }
-}
+//     .svg-icon {
+//       font-size: 13px;
+//       height: 13px;
+//       width: 13px;
+//     }
+//   }
+
+//   .el-dropdown-menu__item {
+//     padding: 0 20px;
+
+//     &.is-disabled {
+//       color: var(--color-disabled);
+//       cursor: not-allowed;
+//       pointer-events: auto;
+//     }
+
+//     &:not(.is-disabled):hover {
+//       background-color: var(--color-disabled-background);
+//     }
+//   }
+
+//   .dropdown-menu-title {
+//     text-align: left;
+//     font-size: 12px;
+//     color: #909399;
+//     line-height: 30px;
+//     padding-left: 10px;
+//     padding-top: 10px;
+//     border-top: solid 1px #e4e7ed;
+
+//     &:first-child {
+//       padding-top: 0;
+//       border-top: none;
+//     }
+//   }
+// }
--- a/vue.config.js
+++ b/vue.config.js
@@ -104,10 +104,17 @@ module.exports = {
    host: '0.0.0.0',
    open: false,
    allowedHosts: 'all',
+    hot: true,
+    liveReload: false,
    client: {
      overlay: {
        warnings: false,
        errors: true
+      },
+      webSocketURL: {
+        hostname: '0.0.0.0',
+        pathname: '/ws',
+        port: port
      }
    },
    watchFiles: ['src/**/*', 'public/**/*'],
@@ -227,6 +234,9 @@ module.exports = {
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
+        options = options || {}
+        // Enable HMR for Vue 3
+        options.hotReload = process.env.NODE_ENV === 'development'
        const compilerOptions = options.compilerOptions || {}
        compilerOptions.preserveWhitespace = true
        compilerOptions.compatConfig = compilerOptions.compatConfig || {}