From 64a9a582dfbf8effb4d82d0d30098550b2804548 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 25 Dec 2025 14:48:06 +0800
Subject: [PATCH] perf: change table btn

---
 .prettierrc.js                                |   3 +-
 src/components/Common/DataActions/index.vue   |  14 +-
 src/components/Common/IBox/index.vue          |  91 ++++----
 src/components/Form/DataForm/index.vue        |   7 +-
 .../Table/ListTable/TableAction/LeftSide.vue  |   5 +-
 src/components/Table/TagSearch/index.vue      |   3 +-
 src/styles/index.scss                         | 217 ++++++++++--------
 vue.config.js                                 |  10 +
 8 files changed, 190 insertions(+), 160 deletions(-)

diff --git a/.prettierrc.js b/.prettierrc.js
index 9289d064b..6dab063d2 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -7,5 +7,6 @@ module.exports = {
   useTabs: false,
   bracketSpacing: true,
   arrowParens: 'avoid',
-  endOfLine: 'auto'
+  endOfLine: 'auto',
+  spaceBeforeFunctionParen: false
 }
diff --git a/src/components/Common/DataActions/index.vue b/src/components/Common/DataActions/index.vue
index 598b603be..84d891773 100644
--- 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
diff --git a/src/components/Common/IBox/index.vue b/src/components/Common/IBox/index.vue
index 94b5a434f..3945d25af 100644
--- 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>
diff --git a/src/components/Form/DataForm/index.vue b/src/components/Form/DataForm/index.vue
index 088446cd8..582412a09 100644
--- 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']
diff --git a/src/components/Table/ListTable/TableAction/LeftSide.vue b/src/components/Table/ListTable/TableAction/LeftSide.vue
index 1f9adfcad..5e2fea32c 100644
--- 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',
diff --git a/src/components/Table/TagSearch/index.vue b/src/components/Table/TagSearch/index.vue
index 5d8929733..d7eca1cf9 100644
--- 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;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 362a5d46a..b8366fa0c 100644
--- 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;
+//     }
+//   }
+// }
diff --git a/vue.config.js b/vue.config.js
index 3db8f2fbe..707e50cf4 100644
--- 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 || {}