perf: 优化`PureTableBar`组件

package.json

@@ -53,7 +53,7 @@
     "@logicflow/core": "^1.2.18",
     "@logicflow/extension": "^1.2.19",
     "@pureadmin/descriptions": "^1.2.0",
-    "@pureadmin/table": "^3.0.1",
+    "@pureadmin/table": "^3.0.2",
     "@pureadmin/utils": "^2.4.4",
     "@vueuse/core": "^10.7.2",
     "@vueuse/motion": "^2.0.0",

pnpm-lock.yaml

@@ -21,8 +21,8 @@ dependencies:
     specifier: ^1.2.0
     version: 1.2.0(element-plus@2.5.3)(typescript@5.3.3)
   '@pureadmin/table':
-    specifier: ^3.0.1
-    version: 3.0.1(element-plus@2.5.3)(typescript@5.3.3)
+    specifier: ^3.0.2
+    version: 3.0.2(element-plus@2.5.3)(typescript@5.3.3)
   '@pureadmin/utils':
     specifier: ^2.4.4
     version: 2.4.4(echarts@5.4.3)(vue@3.4.14)
@@ -1744,8 +1744,8 @@ packages:
       - typescript
     dev: false
 
-  /@pureadmin/table@3.0.1(element-plus@2.5.3)(typescript@5.3.3):
-    resolution: {integrity: sha512-DBIv0YRZogSIEtsBPNjm6tYuImaE8ZJXwAu/gutEyaH9wATN09doKDmAisyBj+XEydfM5R9hlvhQ8SzJkbtarA==}
+  /@pureadmin/table@3.0.2(element-plus@2.5.3)(typescript@5.3.3):
+    resolution: {integrity: sha512-VrtpuzKm4t2KS81MWBy2G1xayjvYIM5s3EUs91mZxmA+qLb8FdF2k4QdCufVA8ZZG85AeM2HA7Z0SvqMAwy0dA==}
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:

src/components/RePureTableBar/src/bar.tsx

@@ -37,7 +37,6 @@ export default defineComponent({
   props,
   emits: ["refresh"],
   setup(props, { emit, slots, attrs }) {
-    const buttonRef = ref();
     const size = ref("default");
     const isExpandAll = ref(true);
     const loading = ref(false);
@@ -200,11 +199,22 @@ export default defineComponent({
         : false;
     };
 
+    const rendTippyProps = (content: string) => {
+      // https://vue-tippy.netlify.app/props
+      return {
+        content,
+        offset: [0, 18],
+        duration: [300, 0],
+        followCursor: true,
+        hideOnClick: "toggle"
+      };
+    };
+
     const reference = {
       reference: () => (
         <SettingIcon
           class={["w-[16px]", iconClass.value]}
-          onMouseover={e => (buttonRef.value = e.currentTarget)}
+          v-tippy={rendTippyProps("列设置")}
         />
       )
     };
@@ -224,38 +234,36 @@ export default defineComponent({
               ) : null}
               {props.tableRef?.size ? (
                 <>
-                  <el-tooltip
-                    effect="dark"
-                    content={isExpandAll.value ? "折叠" : "展开"}
-                    placement="top"
-                  >
-                    <ExpandIcon
-                      class={["w-[16px]", iconClass.value]}
-                      style={{
-                        transform: isExpandAll.value ? "none" : "rotate(-90deg)"
-                      }}
-                      onClick={() => onExpand()}
-                    />
-                  </el-tooltip>
+                  <ExpandIcon
+                    class={["w-[16px]", iconClass.value]}
+                    style={{
+                      transform: isExpandAll.value ? "none" : "rotate(-90deg)"
+                    }}
+                    v-tippy={rendTippyProps(
+                      isExpandAll.value ? "折叠" : "展开"
+                    )}
+                    onClick={() => onExpand()}
+                  />
                   <el-divider direction="vertical" />
                 </>
               ) : null}
-              <el-tooltip effect="dark" content="刷新" placement="top">
-                <RefreshIcon
-                  class={[
-                    "w-[16px]",
-                    iconClass.value,
-                    loading.value ? "animate-spin" : ""
-                  ]}
-                  onClick={() => onReFresh()}
-                />
-              </el-tooltip>
+              <RefreshIcon
+                class={[
+                  "w-[16px]",
+                  iconClass.value,
+                  loading.value ? "animate-spin" : ""
+                ]}
+                v-tippy={rendTippyProps("刷新")}
+                onClick={() => onReFresh()}
+              />
               <el-divider direction="vertical" />
-              <el-tooltip effect="dark" content="密度" placement="top">
-                <el-dropdown v-slots={dropdown} trigger="click">
-                  <CollapseIcon class={["w-[16px]", iconClass.value]} />
-                </el-dropdown>
-              </el-tooltip>
+              <el-dropdown
+                v-slots={dropdown}
+                trigger="click"
+                v-tippy={rendTippyProps("密度")}
+              >
+                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+              </el-dropdown>
               <el-divider direction="vertical" />
 
               <el-popover
@@ -326,25 +334,6 @@ export default defineComponent({
                 </div>
               </el-popover>
             </div>
-
-            <el-tooltip
-              popper-options={{
-                modifiers: [
-                  {
-                    name: "computeStyles",
-                    options: {
-                      adaptive: false,
-                      enabled: false
-                    }
-                  }
-                ]
-              }}
-              placement="top"
-              virtual-ref={buttonRef.value}
-              virtual-triggering
-              trigger="hover"
-              content="列设置"
-            />
           </div>
           {slots.default({
             size: size.value,

src/views/system/dept/form.vue

@@ -104,6 +104,7 @@ defineExpose({ getRef });
         <el-form-item label="排序">
           <el-input-number
             v-model="newFormInline.sort"
+            class="!w-full"
             :min="0"
             :max="9999"
             controls-position="right"