From b3780c136a6008bc0029fb44e95908a7d7aeca93 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Sat, 3 Aug 2024 12:20:01 +0800
Subject: [PATCH 01/20] chore: define components router

---
 apps/web-antd/src/locales/langs/en-US.json    |  7 ++++++-
 apps/web-antd/src/locales/langs/zh-CN.json    |  3 +++
 .../src/router/routes/modules/comp.ts         | 21 +++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 apps/web-antd/src/router/routes/modules/comp.ts

diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index 6b1d636ed6d..666b4ab2946 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -37,7 +37,9 @@
         "title": "Active Menu Icon",
         "children": "Children Active Icon"
       },
-      "fallback": { "title": "Fallback Page" },
+      "fallback": {
+        "title": "Fallback Page"
+      },
       "features": {
         "title": "Features",
         "hideChildrenInMenu": "Hide Menu Children",
@@ -54,6 +56,9 @@
         "level": "Level Mode",
         "levelDetail": "Level Mode Detail"
       }
+    },
+    "comp": {
+      "title": "Component"
     }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index 0ce11b74e5f..b75217bb725 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -56,6 +56,9 @@
         "levelDetail": "层级模式详情",
         "lateralDetail": "平级模式详情"
       }
+    },
+    "comp": {
+      "title": "组件"
     }
   }
 }
diff --git a/apps/web-antd/src/router/routes/modules/comp.ts b/apps/web-antd/src/router/routes/modules/comp.ts
new file mode 100644
index 00000000000..ee430c04c1a
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/comp.ts
@@ -0,0 +1,21 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { BasicLayout } from '#/layouts';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    component: BasicLayout,
+    meta: {
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      order: 1000,
+      title: $t('page.comp.title'),
+    },
+    name: 'Comp',
+    path: '/comp',
+    children: [],
+  },
+];
+
+export default routes;

From 3c24632ad51f031cf95aafa49183d7c5538098bb Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Sat, 3 Aug 2024 12:33:44 +0800
Subject: [PATCH 02/20] =?UTF-8?q?chore:=20=E7=BB=84=E4=BB=B6=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E6=94=BE=E7=BD=AE=E5=88=B0=E6=BC=94=E7=A4=BA=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/locales/langs/en-US.json    |  6 +++---
 apps/web-antd/src/locales/langs/zh-CN.json    |  6 +++---
 .../src/router/routes/modules/comp.ts         | 21 -------------------
 .../src/router/routes/modules/demos.ts        | 10 +++++++++
 4 files changed, 16 insertions(+), 27 deletions(-)
 delete mode 100644 apps/web-antd/src/router/routes/modules/comp.ts

diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index 666b4ab2946..e7f689a9302 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -55,10 +55,10 @@
         "lateralDetail": "Lateral Mode Detail",
         "level": "Level Mode",
         "levelDetail": "Level Mode Detail"
+      },
+      "comp": {
+        "title": "Component"
       }
-    },
-    "comp": {
-      "title": "Component"
     }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index b75217bb725..daf332afd0c 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -55,10 +55,10 @@
         "level": "层级模式",
         "levelDetail": "层级模式详情",
         "lateralDetail": "平级模式详情"
+      },
+      "comp": {
+        "title": "组件"
       }
-    },
-    "comp": {
-      "title": "组件"
     }
   }
 }
diff --git a/apps/web-antd/src/router/routes/modules/comp.ts b/apps/web-antd/src/router/routes/modules/comp.ts
deleted file mode 100644
index ee430c04c1a..00000000000
--- a/apps/web-antd/src/router/routes/modules/comp.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { BasicLayout } from '#/layouts';
-import { $t } from '#/locales';
-
-const routes: RouteRecordRaw[] = [
-  {
-    component: BasicLayout,
-    meta: {
-      icon: 'ic:baseline-view-in-ar',
-      keepAlive: true,
-      order: 1000,
-      title: $t('page.comp.title'),
-    },
-    name: 'Comp',
-    path: '/comp',
-    children: [],
-  },
-];
-
-export default routes;
diff --git a/apps/web-antd/src/router/routes/modules/demos.ts b/apps/web-antd/src/router/routes/modules/demos.ts
index ad88a548611..0d95ec72001 100644
--- a/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/apps/web-antd/src/router/routes/modules/demos.ts
@@ -167,6 +167,16 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      // 组件
+      {
+        meta: {
+          icon: 'ion:layers-outline',
+          title: $t('page.demos.comp.title'),
+        },
+        name: 'CompDemos',
+        path: '/demos/comp',
+        children: [],
+      },
       // 面包屑导航
       {
         name: 'BreadcrumbDemos',

From 1309cf384ec1e1ac0d50606c6a0d7a24ce0eaef6 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Mon, 5 Aug 2024 08:34:50 +0800
Subject: [PATCH 03/20] =?UTF-8?q?Revert=20"chore:=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=94=BE=E7=BD=AE=E5=88=B0=E6=BC=94=E7=A4=BA?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=B8=8B"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 3c24632ad51f031cf95aafa49183d7c5538098bb.
---
 apps/web-antd/src/locales/langs/en-US.json    |  6 +++---
 apps/web-antd/src/locales/langs/zh-CN.json    |  6 +++---
 .../src/router/routes/modules/comp.ts         | 21 +++++++++++++++++++
 .../src/router/routes/modules/demos.ts        | 10 ---------
 4 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 apps/web-antd/src/router/routes/modules/comp.ts

diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index e7f689a9302..666b4ab2946 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -55,10 +55,10 @@
         "lateralDetail": "Lateral Mode Detail",
         "level": "Level Mode",
         "levelDetail": "Level Mode Detail"
-      },
-      "comp": {
-        "title": "Component"
       }
+    },
+    "comp": {
+      "title": "Component"
     }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index daf332afd0c..b75217bb725 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -55,10 +55,10 @@
         "level": "层级模式",
         "levelDetail": "层级模式详情",
         "lateralDetail": "平级模式详情"
-      },
-      "comp": {
-        "title": "组件"
       }
+    },
+    "comp": {
+      "title": "组件"
     }
   }
 }
diff --git a/apps/web-antd/src/router/routes/modules/comp.ts b/apps/web-antd/src/router/routes/modules/comp.ts
new file mode 100644
index 00000000000..ee430c04c1a
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/comp.ts
@@ -0,0 +1,21 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { BasicLayout } from '#/layouts';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    component: BasicLayout,
+    meta: {
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      order: 1000,
+      title: $t('page.comp.title'),
+    },
+    name: 'Comp',
+    path: '/comp',
+    children: [],
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/router/routes/modules/demos.ts b/apps/web-antd/src/router/routes/modules/demos.ts
index 0d95ec72001..ad88a548611 100644
--- a/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/apps/web-antd/src/router/routes/modules/demos.ts
@@ -167,16 +167,6 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
-      // 组件
-      {
-        meta: {
-          icon: 'ion:layers-outline',
-          title: $t('page.demos.comp.title'),
-        },
-        name: 'CompDemos',
-        path: '/demos/comp',
-        children: [],
-      },
       // 面包屑导航
       {
         name: 'BreadcrumbDemos',

From ffe11de146d1986729870cfcf9366970650eafd6 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Mon, 5 Aug 2024 08:38:55 +0800
Subject: [PATCH 04/20] chore: typo

---
 apps/web-antd/src/locales/langs/en-US.json                  | 4 ++--
 apps/web-antd/src/locales/langs/zh-CN.json                  | 4 ++--
 .../src/router/routes/modules/{comp.ts => examples.ts}      | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename apps/web-antd/src/router/routes/modules/{comp.ts => examples.ts} (80%)

diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index 666b4ab2946..7f79b62aea1 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -57,8 +57,8 @@
         "levelDetail": "Level Mode Detail"
       }
     },
-    "comp": {
-      "title": "Component"
+    "examples": {
+      "title": "Examples"
     }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index b75217bb725..f72fd37366a 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -57,8 +57,8 @@
         "lateralDetail": "平级模式详情"
       }
     },
-    "comp": {
-      "title": "组件"
+    "examples": {
+      "title": "示例"
     }
   }
 }
diff --git a/apps/web-antd/src/router/routes/modules/comp.ts b/apps/web-antd/src/router/routes/modules/examples.ts
similarity index 80%
rename from apps/web-antd/src/router/routes/modules/comp.ts
rename to apps/web-antd/src/router/routes/modules/examples.ts
index ee430c04c1a..bcb0fe73249 100644
--- a/apps/web-antd/src/router/routes/modules/comp.ts
+++ b/apps/web-antd/src/router/routes/modules/examples.ts
@@ -10,10 +10,10 @@ const routes: RouteRecordRaw[] = [
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
       order: 1000,
-      title: $t('page.comp.title'),
+      title: $t('page.examples.title'),
     },
-    name: 'Comp',
-    path: '/comp',
+    name: 'Examples',
+    path: '/examples',
     children: [],
   },
 ];

From ff534a185e5ae4897aac8913727e6d53370f9084 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Mon, 5 Aug 2024 14:49:12 +0800
Subject: [PATCH 05/20] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E5=BC=BA=E5=BA=A6=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |  1 +
 .../web-antd/src/components/StrengthMeter.vue | 77 +++++++++++++++++++
 .../src/router/routes/modules/examples.ts     | 12 ++-
 .../views/examples/strength-meter/index.vue   | 26 +++++++
 pnpm-lock.yaml                                | 10 +++
 5 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 apps/web-antd/src/components/StrengthMeter.vue
 create mode 100644 apps/web-antd/src/views/examples/strength-meter/index.vue

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 6e6da9990ee..886f96dbaaf 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -41,6 +41,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^10.11.0",
+    "@zxcvbn-ts/core": "^3.0.4",
     "ant-design-vue": "^4.2.3",
     "dayjs": "^1.11.12",
     "pinia": "2.2.0",
diff --git a/apps/web-antd/src/components/StrengthMeter.vue b/apps/web-antd/src/components/StrengthMeter.vue
new file mode 100644
index 00000000000..aeaf63adc01
--- /dev/null
+++ b/apps/web-antd/src/components/StrengthMeter.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { computed, ref, unref, watch, watchEffect } from 'vue';
+
+import { useNamespace } from '@vben/hooks';
+
+import { zxcvbn } from '@zxcvbn-ts/core';
+import { Input } from 'ant-design-vue';
+
+defineOptions({ name: 'StrengthMeter' });
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    placeholder?: string;
+    showInput?: boolean;
+    value: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    showInput: true,
+    value: '',
+  },
+);
+
+const emit = defineEmits(['scoreChange', 'change']);
+
+const innerValueRef = ref('');
+const { b, e } = useNamespace('strength-meter');
+
+const getPasswordStrength = computed(() => {
+  const { disabled } = props;
+  if (disabled) return -1;
+  const innerValue = unref(innerValueRef);
+  const score = innerValue ? zxcvbn(unref(innerValueRef)).score : -1;
+  emit('scoreChange', score);
+  return score;
+});
+
+function handleChange(e: Event) {
+  emit('change', (e.target as HTMLInputElement).value);
+  innerValueRef.value = (e.target as HTMLInputElement).value;
+}
+
+watchEffect(() => {
+  innerValueRef.value = props.value || '';
+});
+
+watch(
+  () => unref(innerValueRef),
+  (val) => {
+    emit('change', val);
+  },
+);
+</script>
+
+<template>
+  <div :class="[b()]" class="relative">
+    <Input.Password
+      v-if="showInput"
+      v-bind="$attrs"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :value="innerValueRef"
+      allow-clear
+      @change="handleChange"
+    >
+      <template v-for="item in Object.keys($slots)" #[item]="data">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </Input.Password>
+    <div :class="e('bar')">
+      <div :class="e('bar--fill')" :data-score="getPasswordStrength"></div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/router/routes/modules/examples.ts b/apps/web-antd/src/router/routes/modules/examples.ts
index bcb0fe73249..1f764b075af 100644
--- a/apps/web-antd/src/router/routes/modules/examples.ts
+++ b/apps/web-antd/src/router/routes/modules/examples.ts
@@ -14,7 +14,17 @@ const routes: RouteRecordRaw[] = [
     },
     name: 'Examples',
     path: '/examples',
-    children: [],
+    children: [
+      {
+        name: 'BreadcrumbLateralDemo',
+        path: '/examples/strength-meter',
+        component: () => import('#/views/examples/strength-meter/index.vue'),
+        meta: {
+          icon: 'lucide:navigation',
+          title: '密码强度组件',
+        },
+      },
+    ],
   },
 ];
 
diff --git a/apps/web-antd/src/views/examples/strength-meter/index.vue b/apps/web-antd/src/views/examples/strength-meter/index.vue
new file mode 100644
index 00000000000..0f6ff2da208
--- /dev/null
+++ b/apps/web-antd/src/views/examples/strength-meter/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import StrengthMeter from '#/components/StrengthMeter.vue';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <div class="demo-wrap p-10">
+      <StrengthMeter placeholder="默认" />
+      <StrengthMeter disabled placeholder="禁用" />
+      <br />
+      <StrengthMeter
+        :show-input="false"
+        placeholder="隐藏input"
+        value="!@#qwe12345"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demo-wrap {
+  width: 50%;
+  background-color: @component-background;
+  border-radius: 10px;
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f468f96cb78..491ecab6bf7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -157,6 +157,9 @@ importers:
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.35(typescript@5.5.4))
+      '@zxcvbn-ts/core':
+        specifier: ^3.0.4
+        version: 3.0.4
       ant-design-vue:
         specifier: ^4.2.3
         version: 4.2.3(vue@3.4.35(typescript@5.5.4))
@@ -4112,6 +4115,9 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
+  '@zxcvbn-ts/core@3.0.4':
+    resolution: {integrity: sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==}
+
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -12826,6 +12832,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@zxcvbn-ts/core@3.0.4':
+    dependencies:
+      fastest-levenshtein: 1.0.16
+
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1

From 24bd60e446e80cce95a03a4c1f68838b550a324b Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Mon, 5 Aug 2024 15:38:58 +0800
Subject: [PATCH 06/20] =?UTF-8?q?chore:=20=E5=9B=BD=E9=99=85=E5=8C=96?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E5=BC=BA=E5=BA=A6=E7=9A=84=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-antd/src/components/StrengthMeter.vue | 77 ++++++++++++++++++-
 apps/web-antd/src/locales/langs/en-US.json    |  5 +-
 apps/web-antd/src/locales/langs/zh-CN.json    |  5 +-
 .../src/router/routes/modules/examples.ts     |  5 +-
 .../views/examples/strength-meter/index.vue   |  3 +
 5 files changed, 88 insertions(+), 7 deletions(-)

diff --git a/apps/web-antd/src/components/StrengthMeter.vue b/apps/web-antd/src/components/StrengthMeter.vue
index aeaf63adc01..4f7bf176b90 100644
--- a/apps/web-antd/src/components/StrengthMeter.vue
+++ b/apps/web-antd/src/components/StrengthMeter.vue
@@ -70,8 +70,81 @@ watch(
       </template>
     </Input.Password>
     <div :class="e('bar')">
-      <div :class="e('bar--fill')" :data-score="getPasswordStrength"></div>
+      <div :class="e('bar__fill')" :data-score="getPasswordStrength"></div>
     </div>
   </div>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/*
+ todo: 这里的颜色最好也提取到 @vben-core/design 下中
+  */
+@import '@vben/styles/global';
+
+@include b('strength-meter') {
+  @include e('bar') {
+    position: relative;
+    height: 6px;
+    margin: 10px auto 6px;
+    background-color: rgb(0 0 0 / 25%);
+    border-radius: 6px;
+
+    @include e('fill') {
+      position: absolute;
+      width: 0;
+      height: inherit;
+      background-color: transparent;
+      border-radius: inherit;
+      transition:
+        width 0.5s ease-in-out,
+        background 0.25s;
+
+      &[data-score='0'] {
+        width: 20%;
+        background-color: #e74242;
+      }
+
+      &[data-score='1'] {
+        width: 40%;
+        background-color: #ed6f6f;
+      }
+
+      &[data-score='2'] {
+        width: 60%;
+        background-color: #efbd47;
+      }
+
+      &[data-score='3'] {
+        width: 80%;
+        background-color: rgb(85 209 135 / 50%);
+      }
+
+      &[data-score='4'] {
+        width: 100%;
+        background-color: #55d187;
+      }
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      z-index: 10;
+      display: block;
+      width: 20%;
+      height: inherit;
+      content: '';
+      background-color: transparent;
+      border-color: white;
+      border-style: solid;
+      border-width: 0 5px;
+    }
+
+    &::before {
+      left: 20%;
+    }
+
+    &::after {
+      right: 20%;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index 7f79b62aea1..7e3acfc7412 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -58,7 +58,10 @@
       }
     },
     "examples": {
-      "title": "Examples"
+      "title": "Examples",
+      "strengthMeter": {
+        "title": "Password Strength Meter"
+      }
     }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index f72fd37366a..91e0dc414c5 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -58,7 +58,10 @@
       }
     },
     "examples": {
-      "title": "示例"
+      "title": "示例",
+      "strengthMeter": {
+        "title": "密码强度组件"
+      }
     }
   }
 }
diff --git a/apps/web-antd/src/router/routes/modules/examples.ts b/apps/web-antd/src/router/routes/modules/examples.ts
index 1f764b075af..484f9cbb0b8 100644
--- a/apps/web-antd/src/router/routes/modules/examples.ts
+++ b/apps/web-antd/src/router/routes/modules/examples.ts
@@ -7,7 +7,7 @@ const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
-      icon: 'ic:baseline-view-in-ar',
+      icon: 'ion:layers-outline',
       keepAlive: true,
       order: 1000,
       title: $t('page.examples.title'),
@@ -20,8 +20,7 @@ const routes: RouteRecordRaw[] = [
         path: '/examples/strength-meter',
         component: () => import('#/views/examples/strength-meter/index.vue'),
         meta: {
-          icon: 'lucide:navigation',
-          title: '密码强度组件',
+          title: $t('page.examples.strengthMeter.title'),
         },
       },
     ],
diff --git a/apps/web-antd/src/views/examples/strength-meter/index.vue b/apps/web-antd/src/views/examples/strength-meter/index.vue
index 0f6ff2da208..8b713c8762d 100644
--- a/apps/web-antd/src/views/examples/strength-meter/index.vue
+++ b/apps/web-antd/src/views/examples/strength-meter/index.vue
@@ -3,6 +3,9 @@ import StrengthMeter from '#/components/StrengthMeter.vue';
 </script>
 
 <template>
+  <div class="card-box p-5">
+    <h1 class="text-xl font-semibold">密码强度校验组件</h1>
+  </div>
   <div class="flex justify-center">
     <div class="demo-wrap p-10">
       <StrengthMeter placeholder="默认" />

From 4a11f2ac602ccafa0dafd936c55a9e54ebb46619 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Tue, 6 Aug 2024 11:55:29 +0800
Subject: [PATCH 07/20] =?UTF-8?q?chore(@vben/web-antd):=20=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB=E6=96=87=E6=9C=AC=E7=9C=81=E7=95=A5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |   1 -
 .../src/components/EllipsisText/Tooltip.vue   | 160 ++++++++++++++++++
 .../src/components/EllipsisText/_utils.ts     |  45 +++++
 .../src/components/EllipsisText/index.vue     | 137 +++++++++++++++
 .../web-antd/src/components/StrengthMeter.vue | 150 ----------------
 apps/web-antd/src/locales/langs/en-US.json    |   4 +-
 apps/web-antd/src/locales/langs/zh-CN.json    |   4 +-
 .../src/router/routes/modules/examples.ts     |   8 +-
 .../src/views/examples/ellipsis/index.vue     |  50 ++++++
 .../views/examples/strength-meter/index.vue   |  29 ----
 pnpm-lock.yaml                                |  10 --
 11 files changed, 400 insertions(+), 198 deletions(-)
 create mode 100644 apps/web-antd/src/components/EllipsisText/Tooltip.vue
 create mode 100644 apps/web-antd/src/components/EllipsisText/_utils.ts
 create mode 100644 apps/web-antd/src/components/EllipsisText/index.vue
 delete mode 100644 apps/web-antd/src/components/StrengthMeter.vue
 create mode 100644 apps/web-antd/src/views/examples/ellipsis/index.vue
 delete mode 100644 apps/web-antd/src/views/examples/strength-meter/index.vue

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 886f96dbaaf..6e6da9990ee 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -41,7 +41,6 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "@zxcvbn-ts/core": "^3.0.4",
     "ant-design-vue": "^4.2.3",
     "dayjs": "^1.11.12",
     "pinia": "2.2.0",
diff --git a/apps/web-antd/src/components/EllipsisText/Tooltip.vue b/apps/web-antd/src/components/EllipsisText/Tooltip.vue
new file mode 100644
index 00000000000..234434cccd3
--- /dev/null
+++ b/apps/web-antd/src/components/EllipsisText/Tooltip.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { cancelRaf, rafTimeout } from './_utils';
+
+interface Props {
+  backgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
+  color?: string; // 提示文本字体颜色，优先级高于 overlayStyle
+  content?: string; // 展示的文本 string | slot
+  fontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
+  maxWidth?: number; // 提示框内容最大宽度，单位px
+  overlayStyle?: CSSProperties; // 提示框内容区域样式
+  tooltip?: string; // 提示的文本 string | slot
+}
+withDefaults(defineProps<Props>(), {
+  backgroundColor: 'rgba(0, 0, 0, .85)',
+  color: '#FFF',
+  content: '暂无内容',
+  fontSize: 14,
+  maxWidth: 120,
+  overlayStyle: () => ({}),
+  tooltip: '暂无提示',
+});
+const emit = defineEmits(['openChange']);
+const visible = ref(false);
+const hideTimer = ref();
+const top = ref(0); // 提示框top定位
+const left = ref(0); // 提示框left定位
+const contentRef = ref(); // 声明一个同名的模板引用
+const tooltipRef = ref(); // 声明一个同名的模板引用
+function getPosition() {
+  const contentWidth = contentRef.value && contentRef.value.offsetWidth; // 展示文本宽度
+  const tooltipWidth = tooltipRef.value && tooltipRef.value.offsetWidth; // 提示文本宽度
+  const tooltipHeight = tooltipRef.value && tooltipRef.value.offsetHeight; // 提示文本高度
+  top.value = tooltipHeight + 4;
+  left.value = (tooltipWidth - contentWidth) / 2;
+}
+function onShow() {
+  getPosition();
+  cancelRaf(hideTimer.value);
+  visible.value = true;
+  emit('openChange', visible.value);
+}
+function onHide(): void {
+  hideTimer.value = rafTimeout(() => {
+    visible.value = false;
+    emit('openChange', visible.value);
+  }, 100);
+}
+</script>
+<template>
+  <div class="m-tooltip" @mouseenter="onShow" @mouseleave="onHide">
+    <div
+      ref="tooltipRef"
+      :class="{ 'show-tip': visible }"
+      :style="`--tooltip-font-size: ${fontSize}px; --tooltip-color: ${color}; --tooltip-background-color: ${backgroundColor}; max-width: ${maxWidth}px; top: ${-top}px; left: ${-left}px;`"
+      class="m-tooltip-content"
+      @mouseenter="onShow"
+      @mouseleave="onHide"
+    >
+      <div :style="overlayStyle" class="u-tooltip">
+        <slot name="tooltip">{{ tooltip }}</slot>
+      </div>
+      <div class="m-tooltip-arrow">
+        <span class="u-tooltip-arrow"></span>
+      </div>
+    </div>
+    <div ref="contentRef">
+      <slot>{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.m-tooltip {
+  position: relative;
+  display: inline-block;
+
+  .m-tooltip-content {
+    position: absolute;
+    z-index: 9999;
+    width: max-content;
+    padding-bottom: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      transform 0.25s,
+      opacity 0.25s;
+    transform: scale(0.8); // 缩放变换
+    transform-origin: 50% 75%;
+
+    .u-tooltip {
+      min-width: 32px;
+      min-height: 32px;
+      padding: 6px 8px;
+      font-size: var(--tooltip-font-size);
+      line-height: 1.5714;
+      color: var(--tooltip-color);
+      text-align: start;
+      text-decoration: none;
+      word-wrap: break-word;
+      background-color: var(--tooltip-background-color);
+      border-radius: 6px;
+      box-shadow:
+        0 6px 16px 0 rgb(0 0 0 / 8%),
+        0 3px 6px -4px rgb(0 0 0 / 12%),
+        0 9px 28px 8px rgb(0 0 0 / 5%);
+    }
+
+    .m-tooltip-arrow {
+      position: absolute;
+      bottom: 12px;
+      left: 50%;
+      z-index: 9;
+      display: block;
+      width: 16px;
+      height: 16px;
+      overflow: hidden;
+      pointer-events: none;
+      content: '';
+      transform: translateX(-50%) translateY(100%) rotate(180deg);
+
+      &::before {
+        position: absolute;
+        inset-inline-start: 0;
+        bottom: 0;
+        width: 16px;
+        height: 8px;
+        clip-path: path(
+          'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z'
+        );
+        content: ''; // 解决提示框箭头颜色未生效问题
+        background-color: var(--tooltip-background-color);
+      }
+
+      &::after {
+        position: absolute;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 0;
+        width: 8.9706px;
+        height: 8.9706px;
+        margin: auto;
+        content: '';
+        background: transparent;
+        border-radius: 0 0 2px;
+        box-shadow: 3px 3px 7px rgb(0 0 0 / 10%);
+        transform: translateY(50%) rotate(-135deg);
+      }
+    }
+  }
+
+  .show-tip {
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1); // 缩放变换
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/EllipsisText/_utils.ts b/apps/web-antd/src/components/EllipsisText/_utils.ts
new file mode 100644
index 00000000000..fd3da38e37d
--- /dev/null
+++ b/apps/web-antd/src/components/EllipsisText/_utils.ts
@@ -0,0 +1,45 @@
+// cancelAnimationFrame
+export const cancelAnimationFrame = window.cancelAnimationFrame;
+// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
+export function rafTimeout(
+  fn: () => void,
+  delay = 0,
+  interval = false,
+): object {
+  const requestAnimationFrame =
+    typeof window === 'undefined' ? () => {} : window.requestAnimationFrame;
+  let start: any = null;
+  const raf = {
+    // 引用类型保存，方便获取 requestAnimationFrame()方法返回的 ID.
+    id: requestAnimationFrame(timeElapse),
+  };
+  function timeElapse(timestamp: number) {
+    /*
+      timestamp参数：与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻
+    */
+    if (!start) {
+      start = timestamp;
+    }
+    const elapsed = timestamp - start;
+    if (elapsed >= delay) {
+      fn(); // 执行目标函数func
+      if (interval) {
+        // 使用间歇调用
+        start = null;
+        raf.id = requestAnimationFrame(timeElapse);
+      }
+    } else {
+      raf.id = requestAnimationFrame(timeElapse);
+    }
+  }
+
+  return raf;
+}
+// 用于取消 rafTimeout 函数
+export function cancelRaf(raf: { id: number }): void {
+  const cancelAnimationFrame =
+    typeof window === 'undefined' ? () => {} : window.cancelAnimationFrame;
+  if (raf && raf.id) {
+    cancelAnimationFrame(raf.id);
+  }
+}
diff --git a/apps/web-antd/src/components/EllipsisText/index.vue b/apps/web-antd/src/components/EllipsisText/index.vue
new file mode 100644
index 00000000000..7899b54ee05
--- /dev/null
+++ b/apps/web-antd/src/components/EllipsisText/index.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watchEffect } from 'vue';
+import type { CSSProperties } from 'vue';
+
+import Tooltip from './Tooltip.vue';
+
+interface Props {
+  expand?: boolean; // 是否启用点击文本展开全部
+  line?: number; // 最大行数
+  maxWidth?: number | string; // 文本最大宽度
+  tooltip?: boolean; // 是否启用文本提示框
+  tooltipBackgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
+  tooltipColor?: string; // 提示文本字体颜色，优先级高于 overlayStyle
+  tooltipFontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
+  // 以下均为 tooltip 组件属性
+  tooltipMaxWidth?: number; // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
+  tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
+}
+const props = withDefaults(defineProps<Props>(), {
+  expand: false,
+  line: undefined,
+  maxWidth: '100%',
+  tooltip: true,
+  tooltipBackgroundColor: 'rgba(0, 0, 0, .85)',
+  tooltipColor: '#FFF',
+  tooltipFontSize: 14,
+  tooltipMaxWidth: undefined,
+  tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }),
+});
+const emit = defineEmits(['expandChange']);
+const textMaxWidth = computed(() => {
+  if (typeof props.maxWidth === 'number') {
+    return `${props.maxWidth}px`;
+  }
+  return props.maxWidth;
+});
+const showTooltip = ref();
+const ellipsis = ref();
+const defaultTooltipMaxWidth = ref();
+watchEffect(() => {
+  showTooltip.value = props.tooltip;
+});
+watchEffect(
+  () => {
+    if (props.tooltip) {
+      defaultTooltipMaxWidth.value =
+        props.tooltipMaxWidth ?? ellipsis.value.offsetWidth + 24;
+    }
+  },
+  { flush: 'post' },
+);
+function onExpand() {
+  if (ellipsis.value.style['-webkit-line-clamp']) {
+    if (props.tooltip) {
+      showTooltip.value = false;
+      nextTick(() => {
+        ellipsis.value.style['-webkit-line-clamp'] = '';
+      });
+    } else {
+      ellipsis.value.style['-webkit-line-clamp'] = '';
+    }
+    emit('expandChange', true);
+  } else {
+    if (props.tooltip) {
+      showTooltip.value = true;
+    }
+    ellipsis.value.style['-webkit-line-clamp'] = props.line;
+    emit('expandChange', false);
+  }
+}
+</script>
+<template>
+  <Tooltip
+    v-if="showTooltip"
+    :background-color="tooltipBackgroundColor"
+    :color="tooltipColor"
+    :font-size="tooltipFontSize"
+    :max-width="defaultTooltipMaxWidth"
+    :overlay-style="tooltipOverlayStyle"
+  >
+    <template #tooltip>
+      <slot name="tooltip">
+        <slot></slot>
+      </slot>
+    </template>
+    <div
+      ref="ellipsis"
+      :class="[
+        line ? 'ellipsis-line' : 'not-ellipsis-line',
+        { 'cursor-pointer': expand },
+      ]"
+      :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+      class="m-ellipsis"
+      @click="expand ? onExpand() : () => false"
+      v-bind="$attrs"
+    >
+      <slot></slot>
+    </div>
+  </Tooltip>
+  <div
+    v-else
+    ref="ellipsis"
+    :class="[
+      line ? 'ellipsis-line' : 'not-ellipsis-line',
+      { 'cursor-pointer': expand },
+    ]"
+    :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+    class="m-ellipsis"
+    @click="expand ? onExpand() : () => false"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.m-ellipsis {
+  overflow: hidden;
+  cursor: text;
+}
+
+.ellipsis-line {
+  display: -webkit-inline-box;
+  -webkit-box-orient: vertical;
+}
+
+.not-ellipsis-line {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/apps/web-antd/src/components/StrengthMeter.vue b/apps/web-antd/src/components/StrengthMeter.vue
deleted file mode 100644
index 4f7bf176b90..00000000000
--- a/apps/web-antd/src/components/StrengthMeter.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref, unref, watch, watchEffect } from 'vue';
-
-import { useNamespace } from '@vben/hooks';
-
-import { zxcvbn } from '@zxcvbn-ts/core';
-import { Input } from 'ant-design-vue';
-
-defineOptions({ name: 'StrengthMeter' });
-
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean;
-    placeholder?: string;
-    showInput?: boolean;
-    value: string;
-  }>(),
-  {
-    disabled: false,
-    placeholder: '',
-    showInput: true,
-    value: '',
-  },
-);
-
-const emit = defineEmits(['scoreChange', 'change']);
-
-const innerValueRef = ref('');
-const { b, e } = useNamespace('strength-meter');
-
-const getPasswordStrength = computed(() => {
-  const { disabled } = props;
-  if (disabled) return -1;
-  const innerValue = unref(innerValueRef);
-  const score = innerValue ? zxcvbn(unref(innerValueRef)).score : -1;
-  emit('scoreChange', score);
-  return score;
-});
-
-function handleChange(e: Event) {
-  emit('change', (e.target as HTMLInputElement).value);
-  innerValueRef.value = (e.target as HTMLInputElement).value;
-}
-
-watchEffect(() => {
-  innerValueRef.value = props.value || '';
-});
-
-watch(
-  () => unref(innerValueRef),
-  (val) => {
-    emit('change', val);
-  },
-);
-</script>
-
-<template>
-  <div :class="[b()]" class="relative">
-    <Input.Password
-      v-if="showInput"
-      v-bind="$attrs"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :value="innerValueRef"
-      allow-clear
-      @change="handleChange"
-    >
-      <template v-for="item in Object.keys($slots)" #[item]="data">
-        <slot :name="item" v-bind="data || {}"></slot>
-      </template>
-    </Input.Password>
-    <div :class="e('bar')">
-      <div :class="e('bar__fill')" :data-score="getPasswordStrength"></div>
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-/*
- todo: 这里的颜色最好也提取到 @vben-core/design 下中
-  */
-@import '@vben/styles/global';
-
-@include b('strength-meter') {
-  @include e('bar') {
-    position: relative;
-    height: 6px;
-    margin: 10px auto 6px;
-    background-color: rgb(0 0 0 / 25%);
-    border-radius: 6px;
-
-    @include e('fill') {
-      position: absolute;
-      width: 0;
-      height: inherit;
-      background-color: transparent;
-      border-radius: inherit;
-      transition:
-        width 0.5s ease-in-out,
-        background 0.25s;
-
-      &[data-score='0'] {
-        width: 20%;
-        background-color: #e74242;
-      }
-
-      &[data-score='1'] {
-        width: 40%;
-        background-color: #ed6f6f;
-      }
-
-      &[data-score='2'] {
-        width: 60%;
-        background-color: #efbd47;
-      }
-
-      &[data-score='3'] {
-        width: 80%;
-        background-color: rgb(85 209 135 / 50%);
-      }
-
-      &[data-score='4'] {
-        width: 100%;
-        background-color: #55d187;
-      }
-    }
-
-    &::before,
-    &::after {
-      position: absolute;
-      z-index: 10;
-      display: block;
-      width: 20%;
-      height: inherit;
-      content: '';
-      background-color: transparent;
-      border-color: white;
-      border-style: solid;
-      border-width: 0 5px;
-    }
-
-    &::before {
-      left: 20%;
-    }
-
-    &::after {
-      right: 20%;
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index 7e3acfc7412..13179fd2c10 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -59,8 +59,8 @@
     },
     "examples": {
       "title": "Examples",
-      "strengthMeter": {
-        "title": "Password Strength Meter"
+      "ellipsis": {
+        "title": "EllipsisText"
       }
     }
   }
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index 91e0dc414c5..86fbcabcf6a 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -59,8 +59,8 @@
     },
     "examples": {
       "title": "示例",
-      "strengthMeter": {
-        "title": "密码强度组件"
+      "ellipsis": {
+        "title": "文本省略"
       }
     }
   }
diff --git a/apps/web-antd/src/router/routes/modules/examples.ts b/apps/web-antd/src/router/routes/modules/examples.ts
index 484f9cbb0b8..bd1ec467d13 100644
--- a/apps/web-antd/src/router/routes/modules/examples.ts
+++ b/apps/web-antd/src/router/routes/modules/examples.ts
@@ -16,11 +16,11 @@ const routes: RouteRecordRaw[] = [
     path: '/examples',
     children: [
       {
-        name: 'BreadcrumbLateralDemo',
-        path: '/examples/strength-meter',
-        component: () => import('#/views/examples/strength-meter/index.vue'),
+        name: 'EllipsisDemo',
+        path: '/examples/ellipsis',
+        component: () => import('#/views/examples/ellipsis/index.vue'),
         meta: {
-          title: $t('page.examples.strengthMeter.title'),
+          title: $t('page.examples.ellipsis.title'),
         },
       },
     ],
diff --git a/apps/web-antd/src/views/examples/ellipsis/index.vue b/apps/web-antd/src/views/examples/ellipsis/index.vue
new file mode 100644
index 00000000000..ee63ed05a35
--- /dev/null
+++ b/apps/web-antd/src/views/examples/ellipsis/index.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Collapse, CollapsePanel } from 'ant-design-vue';
+
+import EllipsisText from '#/components/EllipsisText/index.vue';
+
+const text = ref(
+  `
+    Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+      包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
+      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+      包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
+      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+      包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
+      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
+   `,
+);
+const activeKey = ref(['1', '2', '3', '4']);
+</script>
+
+<template>
+  <div class="card-box p-5">
+    <h1 class="mb-5 text-xl font-semibold">文本省略示例</h1>
+    <div>
+      <Collapse v-model:activeKey="activeKey">
+        <CollapsePanel key="1" header="Ellipsis 基本使用">
+          <EllipsisText :max-width="240">{{ text }}</EllipsisText>
+        </CollapsePanel>
+        <CollapsePanel key="2" header="Ellipsis 多行省略">
+          <EllipsisText :line="2">{{ text }}</EllipsisText>
+        </CollapsePanel>
+        <CollapsePanel key="3" header="Ellipsis 点击展开">
+          <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
+        </CollapsePanel>
+        <CollapsePanel key="4" header="Ellipsis 定制 Tooltip 内容">
+          <EllipsisText :max-width="240">
+            住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+            <template #tooltip>
+              <div style="text-align: center">
+                《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
+                深海的光 停滞的海浪
+              </div>
+            </template>
+          </EllipsisText>
+        </CollapsePanel>
+      </Collapse>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/examples/strength-meter/index.vue b/apps/web-antd/src/views/examples/strength-meter/index.vue
deleted file mode 100644
index 8b713c8762d..00000000000
--- a/apps/web-antd/src/views/examples/strength-meter/index.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import StrengthMeter from '#/components/StrengthMeter.vue';
-</script>
-
-<template>
-  <div class="card-box p-5">
-    <h1 class="text-xl font-semibold">密码强度校验组件</h1>
-  </div>
-  <div class="flex justify-center">
-    <div class="demo-wrap p-10">
-      <StrengthMeter placeholder="默认" />
-      <StrengthMeter disabled placeholder="禁用" />
-      <br />
-      <StrengthMeter
-        :show-input="false"
-        placeholder="隐藏input"
-        value="!@#qwe12345"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.demo-wrap {
-  width: 50%;
-  background-color: @component-background;
-  border-radius: 10px;
-}
-</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 491ecab6bf7..f468f96cb78 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -157,9 +157,6 @@ importers:
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.35(typescript@5.5.4))
-      '@zxcvbn-ts/core':
-        specifier: ^3.0.4
-        version: 3.0.4
       ant-design-vue:
         specifier: ^4.2.3
         version: 4.2.3(vue@3.4.35(typescript@5.5.4))
@@ -4115,9 +4112,6 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
-  '@zxcvbn-ts/core@3.0.4':
-    resolution: {integrity: sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==}
-
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -12832,10 +12826,6 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@zxcvbn-ts/core@3.0.4':
-    dependencies:
-      fastest-levenshtein: 1.0.16
-
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1

From 0dab098c88637894bdac790831c9942d322f46dc Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Tue, 6 Aug 2024 11:59:51 +0800
Subject: [PATCH 08/20] chore: typo

---
 apps/web-antd/src/views/examples/ellipsis/index.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/web-antd/src/views/examples/ellipsis/index.vue b/apps/web-antd/src/views/examples/ellipsis/index.vue
index ee63ed05a35..bd28458e1db 100644
--- a/apps/web-antd/src/views/examples/ellipsis/index.vue
+++ b/apps/web-antd/src/views/examples/ellipsis/index.vue
@@ -7,13 +7,7 @@ import EllipsisText from '#/components/EllipsisText/index.vue';
 
 const text = ref(
   `
-    Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
-      包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
-      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
-      包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
-      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
-      包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
-      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
+    Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
    `,
 );
 const activeKey = ref(['1', '2', '3', '4']);

From 9b180cbfd64a653b813f386fba239dce9571b8c7 Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Tue, 6 Aug 2024 19:40:25 +0800
Subject: [PATCH 09/20] =?UTF-8?q?chore:=20=E7=BB=84=E4=BB=B6=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D=E6=96=B9=E5=BC=8F=E9=81=B5=E4=BB=8Epackages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EllipsisText/{index.vue => ellipsis-text.vue}      |  2 +-
 apps/web-antd/src/components/EllipsisText/index.ts     |  1 +
 .../EllipsisText/{Tooltip.vue => tooltip.vue}          |  0
 apps/web-antd/src/views/examples/ellipsis/data.ts      |  2 ++
 apps/web-antd/src/views/examples/ellipsis/index.vue    | 10 ++++------
 5 files changed, 8 insertions(+), 7 deletions(-)
 rename apps/web-antd/src/components/EllipsisText/{index.vue => ellipsis-text.vue} (98%)
 create mode 100644 apps/web-antd/src/components/EllipsisText/index.ts
 rename apps/web-antd/src/components/EllipsisText/{Tooltip.vue => tooltip.vue} (100%)
 create mode 100644 apps/web-antd/src/views/examples/ellipsis/data.ts

diff --git a/apps/web-antd/src/components/EllipsisText/index.vue b/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
similarity index 98%
rename from apps/web-antd/src/components/EllipsisText/index.vue
rename to apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
index 7899b54ee05..ab6479e54cd 100644
--- a/apps/web-antd/src/components/EllipsisText/index.vue
+++ b/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, ref, watchEffect } from 'vue';
 import type { CSSProperties } from 'vue';
 
-import Tooltip from './Tooltip.vue';
+import Tooltip from './tooltip.vue';
 
 interface Props {
   expand?: boolean; // 是否启用点击文本展开全部
diff --git a/apps/web-antd/src/components/EllipsisText/index.ts b/apps/web-antd/src/components/EllipsisText/index.ts
new file mode 100644
index 00000000000..67a236c9806
--- /dev/null
+++ b/apps/web-antd/src/components/EllipsisText/index.ts
@@ -0,0 +1 @@
+export { default as EllipsisText } from './ellipsis-text.vue';
diff --git a/apps/web-antd/src/components/EllipsisText/Tooltip.vue b/apps/web-antd/src/components/EllipsisText/tooltip.vue
similarity index 100%
rename from apps/web-antd/src/components/EllipsisText/Tooltip.vue
rename to apps/web-antd/src/components/EllipsisText/tooltip.vue
diff --git a/apps/web-antd/src/views/examples/ellipsis/data.ts b/apps/web-antd/src/views/examples/ellipsis/data.ts
new file mode 100644
index 00000000000..796d95a7eeb
--- /dev/null
+++ b/apps/web-antd/src/views/examples/ellipsis/data.ts
@@ -0,0 +1,2 @@
+export const longText: string =
+  'Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。';
diff --git a/apps/web-antd/src/views/examples/ellipsis/index.vue b/apps/web-antd/src/views/examples/ellipsis/index.vue
index bd28458e1db..328a39d574f 100644
--- a/apps/web-antd/src/views/examples/ellipsis/index.vue
+++ b/apps/web-antd/src/views/examples/ellipsis/index.vue
@@ -3,13 +3,11 @@ import { ref } from 'vue';
 
 import { Collapse, CollapsePanel } from 'ant-design-vue';
 
-import EllipsisText from '#/components/EllipsisText/index.vue';
+import { EllipsisText } from '#/components/EllipsisText';
 
-const text = ref(
-  `
-    Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
-   `,
-);
+import { longText } from './data';
+
+const text = ref(longText);
 const activeKey = ref(['1', '2', '3', '4']);
 </script>
 

From 6bf711202c2d699a008fff6922135004987fb843 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 11:00:22 +0800
Subject: [PATCH 10/20] chore: Optimize the onExpand function

---
 .../components/EllipsisText/ellipsis-text.vue | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue b/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
index ab6479e54cd..201312d7d28 100644
--- a/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
+++ b/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
@@ -50,23 +50,17 @@ watchEffect(
   { flush: 'post' },
 );
 function onExpand() {
-  if (ellipsis.value.style['-webkit-line-clamp']) {
-    if (props.tooltip) {
-      showTooltip.value = false;
-      nextTick(() => {
-        ellipsis.value.style['-webkit-line-clamp'] = '';
-      });
-    } else {
-      ellipsis.value.style['-webkit-line-clamp'] = '';
-    }
-    emit('expandChange', true);
-  } else {
-    if (props.tooltip) {
-      showTooltip.value = true;
-    }
-    ellipsis.value.style['-webkit-line-clamp'] = props.line;
-    emit('expandChange', false);
+  const { style } = ellipsis.value;
+  const isExpanded = !style['-webkit-line-clamp'];
+  if (props.tooltip) {
+    showTooltip.value = !isExpanded;
   }
+
+  nextTick(() => {
+    style['-webkit-line-clamp'] = isExpanded ? props.line : '';
+  });
+
+  emit('expandChange', !isExpanded);
 }
 </script>
 <template>

From 301b709975e4a6113dde9e1e351bb00917bcb1eb Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 11:18:08 +0800
Subject: [PATCH 11/20] chore: update css

---
 .../components/EllipsisText/ellipsis-text.vue | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue b/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
index 201312d7d28..c99608953cc 100644
--- a/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
+++ b/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
@@ -2,6 +2,8 @@
 import { computed, nextTick, ref, watchEffect } from 'vue';
 import type { CSSProperties } from 'vue';
 
+import { useNamespace } from '@vben/hooks';
+
 import Tooltip from './tooltip.vue';
 
 interface Props {
@@ -28,6 +30,9 @@ const props = withDefaults(defineProps<Props>(), {
   tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }),
 });
 const emit = defineEmits(['expandChange']);
+
+const { b, e } = useNamespace('m-ellipsis');
+
 const textMaxWidth = computed(() => {
   if (typeof props.maxWidth === 'number') {
     return `${props.maxWidth}px`;
@@ -80,11 +85,11 @@ function onExpand() {
     <div
       ref="ellipsis"
       :class="[
-        line ? 'ellipsis-line' : 'not-ellipsis-line',
+        b(),
+        line ? e('line') : e('not-line'),
         { 'cursor-pointer': expand },
       ]"
       :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
-      class="m-ellipsis"
       @click="expand ? onExpand() : () => false"
       v-bind="$attrs"
     >
@@ -95,11 +100,11 @@ function onExpand() {
     v-else
     ref="ellipsis"
     :class="[
-      line ? 'ellipsis-line' : 'not-ellipsis-line',
+      b(),
+      line ? e('line') : e('not-line'),
       { 'cursor-pointer': expand },
     ]"
     :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
-    class="m-ellipsis"
     @click="expand ? onExpand() : () => false"
     v-bind="$attrs"
   >
@@ -107,22 +112,24 @@ function onExpand() {
   </div>
 </template>
 
-<style lang="scss" scoped>
-.m-ellipsis {
+<style lang="scss">
+@import '@vben/styles/global';
+
+@include b('m-ellipsis') {
   overflow: hidden;
   cursor: text;
-}
 
-.ellipsis-line {
-  display: -webkit-inline-box;
-  -webkit-box-orient: vertical;
-}
+  @include e('line') {
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+  }
 
-.not-ellipsis-line {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: bottom;
+  @include e('not-line') {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
 }
 
 .cursor-pointer {

From 11b3460cd55866754d1d9068676aa5ceef4976c2 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 11:23:42 +0800
Subject: [PATCH 12/20] chore(@vben/web-antd): optimize the getPosition
 function

---
 apps/web-antd/src/components/EllipsisText/tooltip.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web-antd/src/components/EllipsisText/tooltip.vue b/apps/web-antd/src/components/EllipsisText/tooltip.vue
index 234434cccd3..c03924e80d9 100644
--- a/apps/web-antd/src/components/EllipsisText/tooltip.vue
+++ b/apps/web-antd/src/components/EllipsisText/tooltip.vue
@@ -30,9 +30,10 @@ const left = ref(0); // 提示框left定位
 const contentRef = ref(); // 声明一个同名的模板引用
 const tooltipRef = ref(); // 声明一个同名的模板引用
 function getPosition() {
-  const contentWidth = contentRef.value && contentRef.value.offsetWidth; // 展示文本宽度
-  const tooltipWidth = tooltipRef.value && tooltipRef.value.offsetWidth; // 提示文本宽度
-  const tooltipHeight = tooltipRef.value && tooltipRef.value.offsetHeight; // 提示文本高度
+  const contentWidth = contentRef.value?.offsetWidth || 0; // 展示文本宽度
+  const tooltipWidth = tooltipRef.value?.offsetWidth || 0; // 提示文本宽度
+  const tooltipHeight = tooltipRef.value?.offsetHeight || 0; // 提示文本高度
+
   top.value = tooltipHeight + 4;
   left.value = (tooltipWidth - contentWidth) / 2;
 }

From 362b16964d6b242bc9a5937de24411e053c62a2d Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 12:12:44 +0800
Subject: [PATCH 13/20] chore: add ellipsis-text in comm-ui

---
 .../src/ellipsis-text/ellipsis-text.vue       | 116 ++++++++++++++++++
 .../common-ui/src/ellipsis-text/help.ts       |  45 +++++++
 .../common-ui/src/ellipsis-text/index.ts      |   1 +
 packages/effects/common-ui/src/index.ts       |   1 +
 4 files changed, 163 insertions(+)
 create mode 100644 packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
 create mode 100644 packages/effects/common-ui/src/ellipsis-text/help.ts
 create mode 100644 packages/effects/common-ui/src/ellipsis-text/index.ts

diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
new file mode 100644
index 00000000000..589710f5f79
--- /dev/null
+++ b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watchEffect } from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { useNamespace } from '@vben/hooks';
+import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
+
+interface Props {
+  expand?: boolean; // 是否启用点击文本展开全部
+  line?: number; // 最大行数
+  maxWidth?: number | string; // 文本最大宽度
+  tooltip?: boolean; // 是否启用文本提示框
+  tooltipBackgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
+  tooltipColor?: string; // 提示文本字体颜色，优先级高于 overlayStyle
+  tooltipFontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
+  // 以下均为 tooltip 组件属性
+  tooltipMaxWidth?: number; // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
+  tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
+}
+const props = withDefaults(defineProps<Props>(), {
+  expand: false,
+  line: undefined,
+  maxWidth: '100%',
+  tooltip: true,
+  tooltipBackgroundColor: 'rgba(0, 0, 0, .85)',
+  tooltipColor: '#FFF',
+  tooltipFontSize: 14,
+  tooltipMaxWidth: undefined,
+  tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }),
+});
+const emit = defineEmits(['expandChange']);
+
+const { b, e } = useNamespace('m-ellipsis');
+
+const textMaxWidth = computed(() => {
+  if (typeof props.maxWidth === 'number') {
+    return `${props.maxWidth}px`;
+  }
+  return props.maxWidth;
+});
+const showTooltip = ref();
+const ellipsis = ref();
+const defaultTooltipMaxWidth = ref();
+watchEffect(() => {
+  showTooltip.value = props.tooltip;
+});
+watchEffect(
+  () => {
+    if (props.tooltip) {
+      defaultTooltipMaxWidth.value =
+        props.tooltipMaxWidth ?? ellipsis.value.offsetWidth + 24;
+    }
+  },
+  { flush: 'post' },
+);
+function onExpand() {
+  const { style } = ellipsis.value;
+  const isExpanded = !style['-webkit-line-clamp'];
+  if (props.tooltip) {
+    showTooltip.value = !isExpanded;
+  }
+
+  nextTick(() => {
+    style['-webkit-line-clamp'] = isExpanded ? props.line : '';
+  });
+
+  emit('expandChange', !isExpanded);
+}
+</script>
+<template>
+  <VbenTooltip
+    v-if="showTooltip"
+    :background-color="tooltipBackgroundColor"
+    :color="tooltipColor"
+    :font-size="tooltipFontSize"
+    :max-width="defaultTooltipMaxWidth"
+    :overlay-style="tooltipOverlayStyle"
+  >
+    <template #tooltip>
+      <slot name="tooltip">
+        <slot></slot>
+      </slot>
+    </template>
+    <div
+      ref="ellipsis"
+      :class="[line ? e('line') : e('not-line'), { 'cursor-pointer': expand }]"
+      :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+      class="cursor-text overflow-hidden"
+      @click="expand ? onExpand() : () => false"
+      v-bind="$attrs"
+    >
+      <slot></slot>
+    </div>
+  </VbenTooltip>
+  <div
+    v-else
+    ref="ellipsis"
+    :class="[
+      b(),
+      line ? e('line') : e('not-line'),
+      { 'cursor-pointer': expand },
+    ]"
+    :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+    class="cursor-text overflow-hidden"
+    @click="expand ? onExpand() : () => false"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/packages/effects/common-ui/src/ellipsis-text/help.ts b/packages/effects/common-ui/src/ellipsis-text/help.ts
new file mode 100644
index 00000000000..fd3da38e37d
--- /dev/null
+++ b/packages/effects/common-ui/src/ellipsis-text/help.ts
@@ -0,0 +1,45 @@
+// cancelAnimationFrame
+export const cancelAnimationFrame = window.cancelAnimationFrame;
+// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
+export function rafTimeout(
+  fn: () => void,
+  delay = 0,
+  interval = false,
+): object {
+  const requestAnimationFrame =
+    typeof window === 'undefined' ? () => {} : window.requestAnimationFrame;
+  let start: any = null;
+  const raf = {
+    // 引用类型保存，方便获取 requestAnimationFrame()方法返回的 ID.
+    id: requestAnimationFrame(timeElapse),
+  };
+  function timeElapse(timestamp: number) {
+    /*
+      timestamp参数：与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻
+    */
+    if (!start) {
+      start = timestamp;
+    }
+    const elapsed = timestamp - start;
+    if (elapsed >= delay) {
+      fn(); // 执行目标函数func
+      if (interval) {
+        // 使用间歇调用
+        start = null;
+        raf.id = requestAnimationFrame(timeElapse);
+      }
+    } else {
+      raf.id = requestAnimationFrame(timeElapse);
+    }
+  }
+
+  return raf;
+}
+// 用于取消 rafTimeout 函数
+export function cancelRaf(raf: { id: number }): void {
+  const cancelAnimationFrame =
+    typeof window === 'undefined' ? () => {} : window.cancelAnimationFrame;
+  if (raf && raf.id) {
+    cancelAnimationFrame(raf.id);
+  }
+}
diff --git a/packages/effects/common-ui/src/ellipsis-text/index.ts b/packages/effects/common-ui/src/ellipsis-text/index.ts
new file mode 100644
index 00000000000..67a236c9806
--- /dev/null
+++ b/packages/effects/common-ui/src/ellipsis-text/index.ts
@@ -0,0 +1 @@
+export { default as EllipsisText } from './ellipsis-text.vue';
diff --git a/packages/effects/common-ui/src/index.ts b/packages/effects/common-ui/src/index.ts
index 753baaa66dd..18c7a5f04bb 100644
--- a/packages/effects/common-ui/src/index.ts
+++ b/packages/effects/common-ui/src/index.ts
@@ -1,5 +1,6 @@
 export * from './about';
 export * from './authentication';
 export * from './dashboard';
+export * from './ellipsis';
 export * from './fallback';
 export { useToast } from '@vben-core/shadcn-ui';

From b4cd5f2fe5b7e9a44babe7f89f7ec271f91c8b67 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 12:32:13 +0800
Subject: [PATCH 14/20] =?UTF-8?q?chore:=20=E6=96=87=E6=9C=AC=E7=9C=81?=
 =?UTF-8?q?=E7=95=A5=E7=BB=84=E4=BB=B6=E8=BF=81=E7=A7=BB=E8=87=B3common-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/EllipsisText/_utils.ts     |  45 -----
 .../components/EllipsisText/ellipsis-text.vue | 138 ---------------
 .../src/components/EllipsisText/index.ts      |   1 -
 .../src/components/EllipsisText/tooltip.vue   | 161 ------------------
 .../src/views/examples/ellipsis/index.vue     |   4 +-
 .../src/ellipsis-text/ellipsis-text.vue       |  49 ++++--
 .../common-ui/src/ellipsis-text/help.ts       |  45 -----
 packages/effects/common-ui/src/index.ts       |   2 +-
 8 files changed, 34 insertions(+), 411 deletions(-)
 delete mode 100644 apps/web-antd/src/components/EllipsisText/_utils.ts
 delete mode 100644 apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
 delete mode 100644 apps/web-antd/src/components/EllipsisText/index.ts
 delete mode 100644 apps/web-antd/src/components/EllipsisText/tooltip.vue
 delete mode 100644 packages/effects/common-ui/src/ellipsis-text/help.ts

diff --git a/apps/web-antd/src/components/EllipsisText/_utils.ts b/apps/web-antd/src/components/EllipsisText/_utils.ts
deleted file mode 100644
index fd3da38e37d..00000000000
--- a/apps/web-antd/src/components/EllipsisText/_utils.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// cancelAnimationFrame
-export const cancelAnimationFrame = window.cancelAnimationFrame;
-// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
-export function rafTimeout(
-  fn: () => void,
-  delay = 0,
-  interval = false,
-): object {
-  const requestAnimationFrame =
-    typeof window === 'undefined' ? () => {} : window.requestAnimationFrame;
-  let start: any = null;
-  const raf = {
-    // 引用类型保存，方便获取 requestAnimationFrame()方法返回的 ID.
-    id: requestAnimationFrame(timeElapse),
-  };
-  function timeElapse(timestamp: number) {
-    /*
-      timestamp参数：与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻
-    */
-    if (!start) {
-      start = timestamp;
-    }
-    const elapsed = timestamp - start;
-    if (elapsed >= delay) {
-      fn(); // 执行目标函数func
-      if (interval) {
-        // 使用间歇调用
-        start = null;
-        raf.id = requestAnimationFrame(timeElapse);
-      }
-    } else {
-      raf.id = requestAnimationFrame(timeElapse);
-    }
-  }
-
-  return raf;
-}
-// 用于取消 rafTimeout 函数
-export function cancelRaf(raf: { id: number }): void {
-  const cancelAnimationFrame =
-    typeof window === 'undefined' ? () => {} : window.cancelAnimationFrame;
-  if (raf && raf.id) {
-    cancelAnimationFrame(raf.id);
-  }
-}
diff --git a/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue b/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
deleted file mode 100644
index c99608953cc..00000000000
--- a/apps/web-antd/src/components/EllipsisText/ellipsis-text.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, watchEffect } from 'vue';
-import type { CSSProperties } from 'vue';
-
-import { useNamespace } from '@vben/hooks';
-
-import Tooltip from './tooltip.vue';
-
-interface Props {
-  expand?: boolean; // 是否启用点击文本展开全部
-  line?: number; // 最大行数
-  maxWidth?: number | string; // 文本最大宽度
-  tooltip?: boolean; // 是否启用文本提示框
-  tooltipBackgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
-  tooltipColor?: string; // 提示文本字体颜色，优先级高于 overlayStyle
-  tooltipFontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
-  // 以下均为 tooltip 组件属性
-  tooltipMaxWidth?: number; // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
-  tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
-}
-const props = withDefaults(defineProps<Props>(), {
-  expand: false,
-  line: undefined,
-  maxWidth: '100%',
-  tooltip: true,
-  tooltipBackgroundColor: 'rgba(0, 0, 0, .85)',
-  tooltipColor: '#FFF',
-  tooltipFontSize: 14,
-  tooltipMaxWidth: undefined,
-  tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }),
-});
-const emit = defineEmits(['expandChange']);
-
-const { b, e } = useNamespace('m-ellipsis');
-
-const textMaxWidth = computed(() => {
-  if (typeof props.maxWidth === 'number') {
-    return `${props.maxWidth}px`;
-  }
-  return props.maxWidth;
-});
-const showTooltip = ref();
-const ellipsis = ref();
-const defaultTooltipMaxWidth = ref();
-watchEffect(() => {
-  showTooltip.value = props.tooltip;
-});
-watchEffect(
-  () => {
-    if (props.tooltip) {
-      defaultTooltipMaxWidth.value =
-        props.tooltipMaxWidth ?? ellipsis.value.offsetWidth + 24;
-    }
-  },
-  { flush: 'post' },
-);
-function onExpand() {
-  const { style } = ellipsis.value;
-  const isExpanded = !style['-webkit-line-clamp'];
-  if (props.tooltip) {
-    showTooltip.value = !isExpanded;
-  }
-
-  nextTick(() => {
-    style['-webkit-line-clamp'] = isExpanded ? props.line : '';
-  });
-
-  emit('expandChange', !isExpanded);
-}
-</script>
-<template>
-  <Tooltip
-    v-if="showTooltip"
-    :background-color="tooltipBackgroundColor"
-    :color="tooltipColor"
-    :font-size="tooltipFontSize"
-    :max-width="defaultTooltipMaxWidth"
-    :overlay-style="tooltipOverlayStyle"
-  >
-    <template #tooltip>
-      <slot name="tooltip">
-        <slot></slot>
-      </slot>
-    </template>
-    <div
-      ref="ellipsis"
-      :class="[
-        b(),
-        line ? e('line') : e('not-line'),
-        { 'cursor-pointer': expand },
-      ]"
-      :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
-      @click="expand ? onExpand() : () => false"
-      v-bind="$attrs"
-    >
-      <slot></slot>
-    </div>
-  </Tooltip>
-  <div
-    v-else
-    ref="ellipsis"
-    :class="[
-      b(),
-      line ? e('line') : e('not-line'),
-      { 'cursor-pointer': expand },
-    ]"
-    :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
-    @click="expand ? onExpand() : () => false"
-    v-bind="$attrs"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import '@vben/styles/global';
-
-@include b('m-ellipsis') {
-  overflow: hidden;
-  cursor: text;
-
-  @include e('line') {
-    display: -webkit-inline-box;
-    -webkit-box-orient: vertical;
-  }
-
-  @include e('not-line') {
-    display: inline-block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: bottom;
-  }
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-</style>
diff --git a/apps/web-antd/src/components/EllipsisText/index.ts b/apps/web-antd/src/components/EllipsisText/index.ts
deleted file mode 100644
index 67a236c9806..00000000000
--- a/apps/web-antd/src/components/EllipsisText/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as EllipsisText } from './ellipsis-text.vue';
diff --git a/apps/web-antd/src/components/EllipsisText/tooltip.vue b/apps/web-antd/src/components/EllipsisText/tooltip.vue
deleted file mode 100644
index c03924e80d9..00000000000
--- a/apps/web-antd/src/components/EllipsisText/tooltip.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { CSSProperties } from 'vue';
-
-import { cancelRaf, rafTimeout } from './_utils';
-
-interface Props {
-  backgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
-  color?: string; // 提示文本字体颜色，优先级高于 overlayStyle
-  content?: string; // 展示的文本 string | slot
-  fontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
-  maxWidth?: number; // 提示框内容最大宽度，单位px
-  overlayStyle?: CSSProperties; // 提示框内容区域样式
-  tooltip?: string; // 提示的文本 string | slot
-}
-withDefaults(defineProps<Props>(), {
-  backgroundColor: 'rgba(0, 0, 0, .85)',
-  color: '#FFF',
-  content: '暂无内容',
-  fontSize: 14,
-  maxWidth: 120,
-  overlayStyle: () => ({}),
-  tooltip: '暂无提示',
-});
-const emit = defineEmits(['openChange']);
-const visible = ref(false);
-const hideTimer = ref();
-const top = ref(0); // 提示框top定位
-const left = ref(0); // 提示框left定位
-const contentRef = ref(); // 声明一个同名的模板引用
-const tooltipRef = ref(); // 声明一个同名的模板引用
-function getPosition() {
-  const contentWidth = contentRef.value?.offsetWidth || 0; // 展示文本宽度
-  const tooltipWidth = tooltipRef.value?.offsetWidth || 0; // 提示文本宽度
-  const tooltipHeight = tooltipRef.value?.offsetHeight || 0; // 提示文本高度
-
-  top.value = tooltipHeight + 4;
-  left.value = (tooltipWidth - contentWidth) / 2;
-}
-function onShow() {
-  getPosition();
-  cancelRaf(hideTimer.value);
-  visible.value = true;
-  emit('openChange', visible.value);
-}
-function onHide(): void {
-  hideTimer.value = rafTimeout(() => {
-    visible.value = false;
-    emit('openChange', visible.value);
-  }, 100);
-}
-</script>
-<template>
-  <div class="m-tooltip" @mouseenter="onShow" @mouseleave="onHide">
-    <div
-      ref="tooltipRef"
-      :class="{ 'show-tip': visible }"
-      :style="`--tooltip-font-size: ${fontSize}px; --tooltip-color: ${color}; --tooltip-background-color: ${backgroundColor}; max-width: ${maxWidth}px; top: ${-top}px; left: ${-left}px;`"
-      class="m-tooltip-content"
-      @mouseenter="onShow"
-      @mouseleave="onHide"
-    >
-      <div :style="overlayStyle" class="u-tooltip">
-        <slot name="tooltip">{{ tooltip }}</slot>
-      </div>
-      <div class="m-tooltip-arrow">
-        <span class="u-tooltip-arrow"></span>
-      </div>
-    </div>
-    <div ref="contentRef">
-      <slot>{{ content }}</slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.m-tooltip {
-  position: relative;
-  display: inline-block;
-
-  .m-tooltip-content {
-    position: absolute;
-    z-index: 9999;
-    width: max-content;
-    padding-bottom: 12px;
-    pointer-events: none;
-    opacity: 0;
-    transition:
-      transform 0.25s,
-      opacity 0.25s;
-    transform: scale(0.8); // 缩放变换
-    transform-origin: 50% 75%;
-
-    .u-tooltip {
-      min-width: 32px;
-      min-height: 32px;
-      padding: 6px 8px;
-      font-size: var(--tooltip-font-size);
-      line-height: 1.5714;
-      color: var(--tooltip-color);
-      text-align: start;
-      text-decoration: none;
-      word-wrap: break-word;
-      background-color: var(--tooltip-background-color);
-      border-radius: 6px;
-      box-shadow:
-        0 6px 16px 0 rgb(0 0 0 / 8%),
-        0 3px 6px -4px rgb(0 0 0 / 12%),
-        0 9px 28px 8px rgb(0 0 0 / 5%);
-    }
-
-    .m-tooltip-arrow {
-      position: absolute;
-      bottom: 12px;
-      left: 50%;
-      z-index: 9;
-      display: block;
-      width: 16px;
-      height: 16px;
-      overflow: hidden;
-      pointer-events: none;
-      content: '';
-      transform: translateX(-50%) translateY(100%) rotate(180deg);
-
-      &::before {
-        position: absolute;
-        inset-inline-start: 0;
-        bottom: 0;
-        width: 16px;
-        height: 8px;
-        clip-path: path(
-          'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z'
-        );
-        content: ''; // 解决提示框箭头颜色未生效问题
-        background-color: var(--tooltip-background-color);
-      }
-
-      &::after {
-        position: absolute;
-        inset-inline: 0;
-        bottom: 0;
-        z-index: 0;
-        width: 8.9706px;
-        height: 8.9706px;
-        margin: auto;
-        content: '';
-        background: transparent;
-        border-radius: 0 0 2px;
-        box-shadow: 3px 3px 7px rgb(0 0 0 / 10%);
-        transform: translateY(50%) rotate(-135deg);
-      }
-    }
-  }
-
-  .show-tip {
-    pointer-events: auto;
-    opacity: 1;
-    transform: scale(1); // 缩放变换
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/examples/ellipsis/index.vue b/apps/web-antd/src/views/examples/ellipsis/index.vue
index 328a39d574f..6c501bad4b2 100644
--- a/apps/web-antd/src/views/examples/ellipsis/index.vue
+++ b/apps/web-antd/src/views/examples/ellipsis/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import { Collapse, CollapsePanel } from 'ant-design-vue';
+import { EllipsisText } from '@vben/common-ui';
 
-import { EllipsisText } from '#/components/EllipsisText';
+import { Collapse, CollapsePanel } from 'ant-design-vue';
 
 import { longText } from './data';
 
diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
index 589710f5f79..710066fcdc9 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -2,7 +2,6 @@
 import { computed, nextTick, ref, watchEffect } from 'vue';
 import type { CSSProperties } from 'vue';
 
-import { useNamespace } from '@vben/hooks';
 import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
 
 interface Props {
@@ -30,8 +29,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits(['expandChange']);
 
-const { b, e } = useNamespace('m-ellipsis');
-
 const textMaxWidth = computed(() => {
   if (typeof props.maxWidth === 'number') {
     return `${props.maxWidth}px`;
@@ -46,7 +43,7 @@ watchEffect(() => {
 });
 watchEffect(
   () => {
-    if (props.tooltip) {
+    if (props.tooltip && ellipsis.value) {
       defaultTooltipMaxWidth.value =
         props.tooltipMaxWidth ?? ellipsis.value.offsetWidth + 24;
     }
@@ -73,31 +70,35 @@ function onExpand() {
     :background-color="tooltipBackgroundColor"
     :color="tooltipColor"
     :font-size="tooltipFontSize"
-    :max-width="defaultTooltipMaxWidth"
     :overlay-style="tooltipOverlayStyle"
   >
-    <template #tooltip>
+    <div :style="{ maxWidth: defaultTooltipMaxWidth, background: 'red' }">
       <slot name="tooltip">
         <slot></slot>
       </slot>
-    </template>
-    <div
-      ref="ellipsis"
-      :class="[line ? e('line') : e('not-line'), { 'cursor-pointer': expand }]"
-      :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
-      class="cursor-text overflow-hidden"
-      @click="expand ? onExpand() : () => false"
-      v-bind="$attrs"
-    >
-      <slot></slot>
     </div>
+
+    <template #trigger>
+      <div
+        ref="ellipsis"
+        :class="[
+          line ? 'ellipsis-line' : 'not-ellipsis-line',
+          { 'cursor-pointer': expand },
+        ]"
+        :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+        class="cursor-text overflow-hidden"
+        @click="expand ? onExpand() : () => false"
+        v-bind="$attrs"
+      >
+        <slot></slot>
+      </div>
+    </template>
   </VbenTooltip>
   <div
     v-else
     ref="ellipsis"
     :class="[
-      b(),
-      line ? e('line') : e('not-line'),
+      line ? 'ellipsis-line' : 'not-ellipsis-line',
       { 'cursor-pointer': expand },
     ]"
     :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
@@ -110,6 +111,18 @@ function onExpand() {
 </template>
 
 <style lang="scss">
+.ellipsis-line {
+  display: -webkit-inline-box;
+  -webkit-box-orient: vertical;
+}
+
+.not-ellipsis-line {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
diff --git a/packages/effects/common-ui/src/ellipsis-text/help.ts b/packages/effects/common-ui/src/ellipsis-text/help.ts
deleted file mode 100644
index fd3da38e37d..00000000000
--- a/packages/effects/common-ui/src/ellipsis-text/help.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// cancelAnimationFrame
-export const cancelAnimationFrame = window.cancelAnimationFrame;
-// 使用 requestAnimationFrame 模拟 setTimeout 和 setInterval
-export function rafTimeout(
-  fn: () => void,
-  delay = 0,
-  interval = false,
-): object {
-  const requestAnimationFrame =
-    typeof window === 'undefined' ? () => {} : window.requestAnimationFrame;
-  let start: any = null;
-  const raf = {
-    // 引用类型保存，方便获取 requestAnimationFrame()方法返回的 ID.
-    id: requestAnimationFrame(timeElapse),
-  };
-  function timeElapse(timestamp: number) {
-    /*
-      timestamp参数：与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻
-    */
-    if (!start) {
-      start = timestamp;
-    }
-    const elapsed = timestamp - start;
-    if (elapsed >= delay) {
-      fn(); // 执行目标函数func
-      if (interval) {
-        // 使用间歇调用
-        start = null;
-        raf.id = requestAnimationFrame(timeElapse);
-      }
-    } else {
-      raf.id = requestAnimationFrame(timeElapse);
-    }
-  }
-
-  return raf;
-}
-// 用于取消 rafTimeout 函数
-export function cancelRaf(raf: { id: number }): void {
-  const cancelAnimationFrame =
-    typeof window === 'undefined' ? () => {} : window.cancelAnimationFrame;
-  if (raf && raf.id) {
-    cancelAnimationFrame(raf.id);
-  }
-}
diff --git a/packages/effects/common-ui/src/index.ts b/packages/effects/common-ui/src/index.ts
index 18c7a5f04bb..8da49eafe83 100644
--- a/packages/effects/common-ui/src/index.ts
+++ b/packages/effects/common-ui/src/index.ts
@@ -1,6 +1,6 @@
 export * from './about';
 export * from './authentication';
 export * from './dashboard';
-export * from './ellipsis';
+export * from './ellipsis-text';
 export * from './fallback';
 export { useToast } from '@vben-core/shadcn-ui';

From f7b310b4fc6cd5160f835296c47b48769fa419c4 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 14:41:17 +0800
Subject: [PATCH 15/20] =?UTF-8?q?feat(@vben/common-ui):=20Tooltip=E7=9A=84?=
 =?UTF-8?q?tip=E6=94=AF=E6=8C=81style=E4=BC=A0=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
index 861e06d060b..7b27b80687c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -12,6 +12,7 @@ import { TooltipContentProps } from 'radix-vue';
 
 interface Props {
   contentClass?: HTMLAttributes['class'];
+  contentStyle?: HTMLAttributes['style'];
   delayDuration?: number;
   side: TooltipContentProps['side'];
 }
@@ -31,6 +32,7 @@ withDefaults(defineProps<Props>(), {
       <TooltipContent
         :class="contentClass"
         :side="side"
+        :style="contentStyle"
         class="side-content text-popover-foreground bg-popover"
       >
         <slot></slot>

From 8d01a1f132e6049eabbf9ad606b907d0ca25c718 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 15:00:38 +0800
Subject: [PATCH 16/20] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ellipsis-text/ellipsis-text.vue       | 45 +++++++------------
 1 file changed, 17 insertions(+), 28 deletions(-)

diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
index 710066fcdc9..b5dd261ba35 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -8,11 +8,11 @@ interface Props {
   expand?: boolean; // 是否启用点击文本展开全部
   line?: number; // 最大行数
   maxWidth?: number | string; // 文本最大宽度
+  placement: 'bottom' | 'left' | 'right' | 'top'; // 提示框位置
   tooltip?: boolean; // 是否启用文本提示框
   tooltipBackgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
   tooltipColor?: string; // 提示文本字体颜色，优先级高于 overlayStyle
   tooltipFontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
-  // 以下均为 tooltip 组件属性
   tooltipMaxWidth?: number; // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
   tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
 }
@@ -20,12 +20,13 @@ const props = withDefaults(defineProps<Props>(), {
   expand: false,
   line: undefined,
   maxWidth: '100%',
+  placement: 'top',
   tooltip: true,
-  tooltipBackgroundColor: 'rgba(0, 0, 0, .85)',
-  tooltipColor: '#FFF',
+  tooltipBackgroundColor: 'red',
+  tooltipColor: '',
   tooltipFontSize: 14,
   tooltipMaxWidth: undefined,
-  tooltipOverlayStyle: () => ({ padding: '8px 12px', textAlign: 'justify' }),
+  tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
 });
 const emit = defineEmits(['expandChange']);
 
@@ -35,7 +36,7 @@ const textMaxWidth = computed(() => {
   }
   return props.maxWidth;
 });
-const showTooltip = ref();
+const showTooltip = ref(false);
 const ellipsis = ref();
 const defaultTooltipMaxWidth = ref();
 watchEffect(() => {
@@ -66,17 +67,19 @@ function onExpand() {
 </script>
 <template>
   <VbenTooltip
-    v-if="showTooltip"
-    :background-color="tooltipBackgroundColor"
-    :color="tooltipColor"
-    :font-size="tooltipFontSize"
+    :content-style="{
+      maxWidth: `${defaultTooltipMaxWidth}px`,
+      fontSize: `${tooltipFontSize}px`,
+      color: tooltipColor,
+      ...tooltipOverlayStyle,
+    }"
+    :disabled="!showTooltip"
     :overlay-style="tooltipOverlayStyle"
+    :side="placement"
   >
-    <div :style="{ maxWidth: defaultTooltipMaxWidth, background: 'red' }">
-      <slot name="tooltip">
-        <slot></slot>
-      </slot>
-    </div>
+    <slot name="tooltip">
+      <slot></slot>
+    </slot>
 
     <template #trigger>
       <div
@@ -94,20 +97,6 @@ function onExpand() {
       </div>
     </template>
   </VbenTooltip>
-  <div
-    v-else
-    ref="ellipsis"
-    :class="[
-      line ? 'ellipsis-line' : 'not-ellipsis-line',
-      { 'cursor-pointer': expand },
-    ]"
-    :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
-    class="cursor-text overflow-hidden"
-    @click="expand ? onExpand() : () => false"
-    v-bind="$attrs"
-  >
-    <slot></slot>
-  </div>
 </template>
 
 <style lang="scss">

From 127fa2c8278f927426f81ee5ed2625288b28dfbd Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Wed, 7 Aug 2024 15:37:35 +0800
Subject: [PATCH 17/20] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8css=20module?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=A0=B7=E5=BC=8F=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ellipsis-text/ellipsis-text.vue       | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
index b5dd261ba35..925fc477fe9 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -18,7 +18,7 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {
   expand: false,
-  line: undefined,
+  line: 1,
   maxWidth: '100%',
   placement: 'top',
   tooltip: true,
@@ -84,14 +84,16 @@ function onExpand() {
     <template #trigger>
       <div
         ref="ellipsis"
-        :class="[
-          line ? 'ellipsis-line' : 'not-ellipsis-line',
-          { 'cursor-pointer': expand },
-        ]"
+        :class="{
+          pointer: expand,
+          [$style.ellipsisOneLine]: line === 1,
+          [$style.ellipsisMultiLine]: line > 1,
+        }"
         :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
         class="cursor-text overflow-hidden"
         @click="expand ? onExpand() : () => false"
         v-bind="$attrs"
+        :data-line="line"
       >
         <slot></slot>
       </div>
@@ -99,20 +101,19 @@ function onExpand() {
   </VbenTooltip>
 </template>
 
-<style lang="scss">
-.ellipsis-line {
-  display: -webkit-inline-box;
-  -webkit-box-orient: vertical;
+<style>
+.pointer {
+  @apply cursor-pointer;
 }
+</style>
 
-.not-ellipsis-line {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: bottom;
+<style module>
+.ellipsisOneLine {
+  @apply inline-block truncate;
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.ellipsisMultiLine {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
 }
 </style>

From 71d4c9e647a87aa58a36acc085193832cbcf27ea Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Thu, 8 Aug 2024 09:02:45 +0800
Subject: [PATCH 18/20] chore: update props

---
 .../src/ellipsis-text/ellipsis-text.vue       | 66 ++++++++++++++-----
 1 file changed, 51 insertions(+), 15 deletions(-)

diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
index 925fc477fe9..b5a7f62f54b 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -1,19 +1,54 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watchEffect } from 'vue';
-import type { CSSProperties } from 'vue';
+import { computed, type CSSProperties, nextTick, ref, watchEffect } from 'vue';
 
-import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
+import { VbenTooltip } from '@vben-core/shadcn-ui';
 
 interface Props {
-  expand?: boolean; // 是否启用点击文本展开全部
-  line?: number; // 最大行数
-  maxWidth?: number | string; // 文本最大宽度
-  placement: 'bottom' | 'left' | 'right' | 'top'; // 提示框位置
-  tooltip?: boolean; // 是否启用文本提示框
-  tooltipBackgroundColor?: string; // 提示框背景颜色，优先级高于 overlayStyle
-  tooltipColor?: string; // 提示文本字体颜色，优先级高于 overlayStyle
-  tooltipFontSize?: number; // 提示文本字体大小，单位px，优先级高于 overlayStyle
-  tooltipMaxWidth?: number; // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
+  /**
+   * 是否启用点击文本展开全部
+   * @default false
+   */
+  expand?: boolean;
+  /**
+   * 文本最大行数
+   * @default 1
+   */
+  line?: number;
+  /**
+   * 文本最大宽度
+   * @default '100%'
+   */
+  maxWidth?: number | string;
+  /**
+   * 提示框位置
+   * @default 'top'
+   */
+  placement: 'bottom' | 'left' | 'right' | 'top';
+  /**
+   * 是否启用文本提示框
+   * @default true
+   */
+  tooltip?: boolean;
+  /**
+   * 提示框背景颜色，优先级高于 overlayStyle
+   */
+  tooltipBackgroundColor?: string;
+  /**
+   * 提示文本字体颜色，优先级高于 overlayStyle
+   */
+  tooltipColor?: string;
+  /**
+   * 提示文本字体大小，单位px，优先级高于 overlayStyle
+   */
+  tooltipFontSize?: number;
+  /**
+   * 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
+   */
+  tooltipMaxWidth?: number;
+  /**
+   * 提示框内容区域样式
+   * @default { textAlign: 'justify' }
+   */
   tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -22,13 +57,13 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: '100%',
   placement: 'top',
   tooltip: true,
-  tooltipBackgroundColor: 'red',
+  tooltipBackgroundColor: '',
   tooltipColor: '',
   tooltipFontSize: 14,
   tooltipMaxWidth: undefined,
   tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
 });
-const emit = defineEmits(['expandChange']);
+const emit = defineEmits<{ expandChange: [boolean] }>();
 
 const textMaxWidth = computed(() => {
   if (typeof props.maxWidth === 'number') {
@@ -68,10 +103,11 @@ function onExpand() {
 <template>
   <VbenTooltip
     :content-style="{
+      ...tooltipOverlayStyle,
       maxWidth: `${defaultTooltipMaxWidth}px`,
       fontSize: `${tooltipFontSize}px`,
       color: tooltipColor,
-      ...tooltipOverlayStyle,
+      backgroundColor: tooltipBackgroundColor,
     }"
     :disabled="!showTooltip"
     :overlay-style="tooltipOverlayStyle"

From 5f6db64c35cf963534972b093e94c1f0b9c5afb5 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Thu, 8 Aug 2024 09:17:02 +0800
Subject: [PATCH 19/20] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common-ui/src/ellipsis-text/ellipsis-text.vue  | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
index b5a7f62f54b..8178d1a0b85 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -121,8 +121,8 @@ function onExpand() {
       <div
         ref="ellipsis"
         :class="{
-          pointer: expand,
-          [$style.ellipsisOneLine]: line === 1,
+          '!cursor-pointer': expand,
+          ['inline-block truncate']: line === 1,
           [$style.ellipsisMultiLine]: line > 1,
         }"
         :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
@@ -137,17 +137,7 @@ function onExpand() {
   </VbenTooltip>
 </template>
 
-<style>
-.pointer {
-  @apply cursor-pointer;
-}
-</style>
-
 <style module>
-.ellipsisOneLine {
-  @apply inline-block truncate;
-}
-
 .ellipsisMultiLine {
   display: -webkit-box;
   -webkit-box-orient: vertical;

From 6d80142044c8d17c0af870d9fa45e80a308582ba Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Thu, 8 Aug 2024 09:19:39 +0800
Subject: [PATCH 20/20] chore: rm unuse attr

---
 packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
index 8178d1a0b85..3e10cb6c421 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -129,7 +129,6 @@ function onExpand() {
         class="cursor-text overflow-hidden"
         @click="expand ? onExpand() : () => false"
         v-bind="$attrs"
-        :data-line="line"
       >
         <slot></slot>
       </div>