From d5b292c8c84383f7854503d094257dff3ca6abb2 Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Mon, 20 May 2024 10:10:45 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=90=9E=20fix:=20model.service=20?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E6=97=A0=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/model/src/model.vue  | 26 ++++----
 packages/components/model/src/service.ts | 77 ++++++++++++++++--------
 packages/hooks/use-model-value/index.ts  |  3 +-
 packages/theme/src/model.less            | 10 +--
 4 files changed, 70 insertions(+), 46 deletions(-)

diff --git a/packages/components/model/src/model.vue b/packages/components/model/src/model.vue
index caf95d6..2c3e104 100644
--- a/packages/components/model/src/model.vue
+++ b/packages/components/model/src/model.vue
@@ -12,9 +12,10 @@ const [, bem] = useBem('model');
 const { model } = useModelValue(props, false);
 const { nextZIndex } = useZIndex();
 
-const contentRended = ref(false);
+const contentRended = ref(model.value);
 const zIndex = ref(nextZIndex());
 
+const disabledTeleport = computed(() => !props.fullscreen);
 const contentStyle = computed(() => {
     const modelStyle: CSSProperties = {};
     if (props.width) {
@@ -22,46 +23,41 @@ const contentStyle = computed(() => {
     }
     return modelStyle;
 });
+const overlayStyle = computed(() => ({
+    zIndex: disabledTeleport.value ? 0 : zIndex.value,
+}));
 
 const close = () => {
     if (!props.maskClose) return;
     model.value = false;
 };
 
-watch(
-    model,
-    () => {
-        if (props.destroyOnClose && !model.value) {
-            contentRended.value = false;
-        } else {
-            contentRended.value = true;
-        }
-    },
-    { immediate: true }
-);
 watch(model, () => {
     if (model.value) {
         zIndex.value = nextZIndex();
+        contentRended.value = true;
     } else {
+        props.destroyOnClose && (contentRended.value = false);
         emits('close');
     }
 });
+console.log(props);
 </script>
 
 <template>
     <Teleport
         to="body"
-        :disabled="!fullscreen"
+        :disabled="disabledTeleport"
     >
         <Transition
-            :name="bem.bs('fade')"
+            :name="bem.ns('fade')"
             appear
         >
             <CdxOverlay
                 v-model="model"
                 @click="close"
                 :fullscreen="fullscreen"
-                :style="{ zIndex }"
+                :style="overlayStyle"
             >
                 <div
                     v-if="contentRended"
diff --git a/packages/components/model/src/service.ts b/packages/components/model/src/service.ts
index f1283cd..33ba9e8 100644
--- a/packages/components/model/src/service.ts
+++ b/packages/components/model/src/service.ts
@@ -1,16 +1,37 @@
-import { VNode, createApp, defineComponent, h, ref, watch } from 'vue';
+import { VNode, createApp, defineComponent, h, reactive } from 'vue';
 import { ModelProps } from './model';
 import ModelVue from './model.vue';
-import { isUndefined } from '@cdx-component/utils';
+import { isString, isUndefined } from '@cdx-component/utils';
 
-export interface ModelOptions extends Exclude<Partial<ModelProps>, 'fullscreen' | 'modelValue'> {
+export interface ModelOptions extends Partial<Omit<ModelProps, 'modelValue'>> {
     header?: VNode | string;
     body: VNode | string;
     footer?: VNode | string;
-    target?: HTMLElement;
+    target?: string | HTMLElement;
 }
+
+const resolveOptions = (options: ModelOptions) => {
+    let target: HTMLElement;
+    if (isString(options.target)) {
+        target = document.querySelector(options.target) ?? document.body;
+    } else {
+        target = options.target || document.body;
+    }
+    return {
+        width: options.width || '50%',
+        fullscreen: isUndefined(options.fullscreen) ? (target === document.body ? true : false) : options.fullscreen,
+        maskClose: options.maskClose ?? true,
+        destroyOnClose: options.destroyOnClose ?? true,
+        target,
+        header: options.header,
+        body: options.body,
+        footer: options.footer,
+    };
+};
+
+let unmountTimer = setTimeout(() => {}, 0);
 export const createModelInstance = (options: ModelOptions) => {
-    const { target = document.body, header, body, footer, ...props } = options;
+    const { target, header, body, footer, ...props } = resolveOptions(options);
 
     const model = defineComponent({
         name: 'CdxModel',
@@ -20,38 +41,42 @@ export const createModelInstance = (options: ModelOptions) => {
                     ModelVue,
                     {
                         ...props,
+                        modelValue: data.visible,
+                        'onUpdate:modelValue': (value: boolean) => {
+                            data.visible = value;
+                        },
                     },
                     {
                         header: header ? () => header : null,
                         default: body ? () => body : null,
                         footer: footer ? () => footer : null,
-                    }
+                    },
                 );
         },
     });
-    const modelValue = ref(true);
+    const data = reactive({
+        visible: true,
+    });
+    const close = () => {
+        clearTimeout(unmountTimer);
+        unmountTimer = setTimeout(() => {
+            if (vm) {
+                vm.$el.remove();
+                modelInstance.unmount();
+            }
+        }, 300);
+        data.visible = false;
+    };
     const modelInstance = createApp(model, {
         ...props,
-        fullscreen: isUndefined(props.fullscreen) ? (target === document.body ? true : false) : props.fullscreen,
-        modelValue: modelValue.value,
-        'onUpdate:modelValue': (value: any) => {
-            modelValue.value = value;
-        },
-    });
-    const vm = modelInstance.mount(document.createElement('div'));
-    target.appendChild(vm.$el);
-
-    watch(modelValue, () => {
-        if (!modelValue.value) {
-            close();
-        }
+        onClose: close,
     });
+    const container = document.createElement('div');
+    const vm = modelInstance.mount(container);
+    Array.from(container.children).map((child) => target.appendChild(child));
 
-    const close = () => {
-        if (vm.$.isUnmounted) return;
-        modelInstance.unmount();
-        vm.$el.remove();
+    data.visible = true;
+    return {
+        close,
     };
-
-    return close;
 };
diff --git a/packages/hooks/use-model-value/index.ts b/packages/hooks/use-model-value/index.ts
index 2572d88..fa77285 100644
--- a/packages/hooks/use-model-value/index.ts
+++ b/packages/hooks/use-model-value/index.ts
@@ -19,7 +19,8 @@ export const useModelValue = <T>(props: Object & { modelValue: T }, defaultValue
         () => props.modelValue,
         (val) => {
             model.value = val;
-        }
+        },
+        { immediate: true },
     );
     return { model };
 };
diff --git a/packages/theme/src/model.less b/packages/theme/src/model.less
index 6f9277a..569ed58 100644
--- a/packages/theme/src/model.less
+++ b/packages/theme/src/model.less
@@ -10,15 +10,17 @@
     .setCssVar(model-body-padding-y, 8px);
     .setCssVar(model-footer-padding-x, 14px);
     .setCssVar(model-footer-padding-y, 8px);
+    .setCssVar(model-transition-duration, 150ms);
     @apply absolute inset-0 flex items-center justify-center pointer-events-none;
     &__content {
         width: .getCssVar(model-width) [];
         box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 0.2);
-        @apply bg-white rounded-md overflow-auto pointer-events-auto;
+        background-color: .getCssVar(bg-color-base) [];
+        @apply rounded-md overflow-auto pointer-events-auto;
     }
     &__header {
         padding: .getCssVar(model-header-padding-y) [] .getCssVar(model-header-padding-x) [];
-        @apply border-b;
+        border-bottom: .getCssVar(border-base) [];
     }
     &__body {
         padding: .getCssVar(model-body-padding-y) [] .getCssVar(model-body-padding-x) [];
@@ -32,14 +34,14 @@
     &-enter-active {
         .@{namespace}-model {
             &__content {
-                .zoom-in();
+                .zoom-in(.getCssVar(model-transition-duration) []);
             }
         }
     }
     &-leave-active {
         .@{namespace}-model {
             &__content {
-                .zoom-out();
+                .zoom-out(.getCssVar(model-transition-duration) []);
             }
         }
     }

From b4719213bd66424c52487be84d79b18ef63c67f7 Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Mon, 20 May 2024 10:11:57 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=8C=88=20style:=20=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/demos/collapse/base.vue               | 11 ++++---
 docs/demos/collapse/item.vue               | 16 +++++-----
 docs/demos/collapse/transition.vue         | 17 +++++------
 docs/demos/element-select/base.vue         | 12 ++++----
 docs/demos/element-select/item.vue         | 10 +++----
 docs/demos/loading/service.vue             | 34 ++++++++++-----------
 packages/components/loading/src/service.ts | 35 +++++++++++-----------
 7 files changed, 65 insertions(+), 70 deletions(-)

diff --git a/docs/demos/collapse/base.vue b/docs/demos/collapse/base.vue
index 0dfdcd1..447465d 100644
--- a/docs/demos/collapse/base.vue
+++ b/docs/demos/collapse/base.vue
@@ -1,9 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const activeName = ref(['1']);
-</script>
-
 <template>
     <CdxCollapse v-model="activeName">
         <CdxCollapseItem
@@ -17,3 +11,8 @@ const activeName = ref(['1']);
         </CdxCollapseItem>
     </CdxCollapse>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const activeName = ref(['1']);
+</script>
diff --git a/docs/demos/collapse/item.vue b/docs/demos/collapse/item.vue
index ce37203..907c930 100644
--- a/docs/demos/collapse/item.vue
+++ b/docs/demos/collapse/item.vue
@@ -1,16 +1,14 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const active = ref(true);
-</script>
-
 <template>
     <CdxCollapseItem
         title="item"
         v-model:expend="active"
     >
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, architecto non? Atque qui, beatae
-        tenetur quis iure ullam, recusandae dolores quod voluptas fuga error. Optio molestiae inventore nulla ipsam
-        iure!
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, architecto non? Atque qui, beatae tenetur
+        quis iure ullam, recusandae dolores quod voluptas fuga error. Optio molestiae inventore nulla ipsam iure!
     </CdxCollapseItem>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const active = ref(true);
+</script>
diff --git a/docs/demos/collapse/transition.vue b/docs/demos/collapse/transition.vue
index 614832a..d56e39c 100644
--- a/docs/demos/collapse/transition.vue
+++ b/docs/demos/collapse/transition.vue
@@ -1,12 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const show = ref(true);
-const change = () => {
-    show.value = !show.value;
-};
-</script>
-
 <template>
     <button @click="change">change visiable</button>
     <CdxCollapseTransition>
@@ -17,3 +8,11 @@ const change = () => {
         </p>
     </CdxCollapseTransition>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const show = ref(true);
+const change = () => {
+    show.value = !show.value;
+};
+</script>
diff --git a/docs/demos/element-select/base.vue b/docs/demos/element-select/base.vue
index a6b40c7..272ee7f 100644
--- a/docs/demos/element-select/base.vue
+++ b/docs/demos/element-select/base.vue
@@ -1,9 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref([]);
-</script>
-
 <template>
     <CdxElementSelect
         v-model="value"
@@ -19,6 +13,12 @@ const value = ref([]);
     </CdxElementSelect>
 </template>
 
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref([]);
+</script>
+
 <style scoped>
 .item {
     padding: 8px;
diff --git a/docs/demos/element-select/item.vue b/docs/demos/element-select/item.vue
index 9c8b3fd..18088d9 100644
--- a/docs/demos/element-select/item.vue
+++ b/docs/demos/element-select/item.vue
@@ -1,8 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-const value = ref('fail');
-</script>
-
 <template>
     <CdxElementSelectItem
         v-model="value"
@@ -12,3 +7,8 @@ const value = ref('fail');
         {{ value }}
     </CdxElementSelectItem>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const value = ref('fail');
+</script>
diff --git a/docs/demos/loading/service.vue b/docs/demos/loading/service.vue
index 2fe849f..55d7b29 100644
--- a/docs/demos/loading/service.vue
+++ b/docs/demos/loading/service.vue
@@ -1,3 +1,20 @@
+<template>
+    <button @click="startLoading">open loading</button>
+    <button @click="startFullscreenLoading">open fullscreen loading</button>
+    <div
+        ref="divRef"
+        style="position: relative; height: 200px; overflow-y: scroll"
+    >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptatum est, dolore temporibus
+        voluptatibus totam officiis aliquid labore qui molestiae reprehenderit consectetur omnis, ducimus praesentium
+        repellendus placeat? Eos, cum expedita. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem
+        exercitationem doloremque maiores consequuntur! In magnam exercitationem accusamus iure explicabo facilis! Ipsam
+        sit id officiis ut molestiae numquam ad, quis minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        Doloribus ut ratione incidunt maiores quasi eveniet, officia cupiditate reprehenderit porro at voluptas ad
+        nesciunt! Facere minima quae praesentium cumque in tempora.
+    </div>
+</template>
+
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { CdxLoading } from 'cdx-component';
@@ -19,20 +36,3 @@ const startFullscreenLoading = () => {
     }, 3000);
 };
 </script>
-
-<template>
-    <button @click="startLoading">open loading</button>
-    <button @click="startFullscreenLoading">open fullscreen loading</button>
-    <div
-        ref="divRef"
-        style="position: relative; height: 200px; overflow-y: scroll"
-    >
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptatum est, dolore temporibus
-        voluptatibus totam officiis aliquid labore qui molestiae reprehenderit consectetur omnis, ducimus praesentium
-        repellendus placeat? Eos, cum expedita. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem
-        exercitationem doloremque maiores consequuntur! In magnam exercitationem accusamus iure explicabo facilis! Ipsam
-        sit id officiis ut molestiae numquam ad, quis minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-        Doloribus ut ratione incidunt maiores quasi eveniet, officia cupiditate reprehenderit porro at voluptas ad
-        nesciunt! Facere minima quae praesentium cumque in tempora.
-    </div>
-</template>
diff --git a/packages/components/loading/src/service.ts b/packages/components/loading/src/service.ts
index 939f740..cdebbd1 100644
--- a/packages/components/loading/src/service.ts
+++ b/packages/components/loading/src/service.ts
@@ -1,5 +1,5 @@
 import { createApp, defineComponent, h, reactive } from 'vue';
-import { useBem, useZIndex } from '@cdx-component/hooks';
+import { useBem } from '@cdx-component/hooks';
 import LoadingVue from './loading.vue';
 import { LoadingInstance, ServiceOptions } from './types';
 import { isString } from '@cdx-component/utils';
@@ -33,7 +33,6 @@ export const createLoadingInstance = (props: ServiceOptions) => {
         }, 300);
         data.visible = false;
     };
-    data.visible = true;
 
     return {
         instance: loadingInstance,
@@ -42,6 +41,22 @@ export const createLoadingInstance = (props: ServiceOptions) => {
     };
 };
 
+const resolveOptions = (options: ServiceOptions = {}) => {
+    let target: HTMLElement;
+    if (isString(options.target)) {
+        target = document.querySelector(options.target) ?? document.body;
+    } else {
+        target = options.target || document.body;
+    }
+    return {
+        text: options.text || '',
+        background: options.background || '',
+        fullscreen: target === document.body && (options.fullscreen ?? true),
+        lock: options.lock ?? true,
+        target,
+    };
+};
+
 let fullscreenInstance: LoadingInstance | undefined = undefined;
 export const vLoading = (options?: ServiceOptions) => {
     const [, relativeBem] = useBem('relative');
@@ -66,19 +81,3 @@ export const vLoading = (options?: ServiceOptions) => {
     resolvedOps.target.appendChild(instance.vm.$el);
     return instance;
 };
-
-const resolveOptions = (options: ServiceOptions = {}) => {
-    let target: HTMLElement;
-    if (isString(options.target)) {
-        target = document.querySelector(options.target) ?? document.body;
-    } else {
-        target = options.target || document.body;
-    }
-    return {
-        text: options.text || '',
-        background: options.background || '',
-        fullscreen: target === document.body && (options.fullscreen ?? true),
-        lock: options.lock ?? true,
-        target,
-    };
-};

From 19ce2d2e76b18ee9eae8c48ee374035cfe351eca Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Mon, 20 May 2024 10:12:34 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=8E=88=20perf:=20css=20=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/theme/src/animation/zoom.less | 8 ++++----
 packages/theme/src/drawer.less         | 2 ++
 packages/theme/src/loading.less        | 3 ++-
 packages/theme/src/text-ellipsis.less  | 6 +++++-
 packages/theme/src/text-highlight.less | 2 +-
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/theme/src/animation/zoom.less b/packages/theme/src/animation/zoom.less
index 07006fd..e4b893b 100644
--- a/packages/theme/src/animation/zoom.less
+++ b/packages/theme/src/animation/zoom.less
@@ -18,11 +18,11 @@
         transform: scale(1);
     }
 });
-.zoom-in() {
-    animation: e('@{namespace}-zoom-in') .getCssVar(transition-duration) [] ease-in-out;
+.zoom-in(@duration: .getCssVar(transition-duration) []) {
+    animation: e('@{namespace}-zoom-in') @duration ease-in-out;
 }
-.zoom-out() {
-    animation: e('@{namespace}-zoom-out') .getCssVar(transition-duration) [] ease-in-out;
+.zoom-out(@duration: .getCssVar(transition-duration) []) {
+    animation: e('@{namespace}-zoom-out') @duration ease-in-out;
 }
 
 .@{namespace}-zoom {
diff --git a/packages/theme/src/drawer.less b/packages/theme/src/drawer.less
index 7f677ec..c98ef01 100644
--- a/packages/theme/src/drawer.less
+++ b/packages/theme/src/drawer.less
@@ -3,6 +3,8 @@
 @import './animation/direction.less';
 
 .@{namespace}-drawer {
+    .setCssVar(drawer-bg-color, .getCssVar(bg-color-base) []);
+
     @apply relative overflow-hidden;
     &--slide {
         @apply select-none;
diff --git a/packages/theme/src/loading.less b/packages/theme/src/loading.less
index f6b038d..ece6c2e 100644
--- a/packages/theme/src/loading.less
+++ b/packages/theme/src/loading.less
@@ -26,7 +26,8 @@
         .setCssVar(loading-size, 30px);
         .setCssVar(loading-mask-color, rgba(255, 255, 255, 0.8));
         background-color: .getCssVar(loading-mask-color) [];
-        @apply absolute inset-0 m-auto ~"z-[1000]" text-cyan-400;
+        color: .getCssVar(blue-3) [];
+        @apply absolute inset-0 m-auto ~"z-[1000]";
     }
     &--fullscreen {
         @apply fixed;
diff --git a/packages/theme/src/text-ellipsis.less b/packages/theme/src/text-ellipsis.less
index 6c20692..5268be0 100644
--- a/packages/theme/src/text-ellipsis.less
+++ b/packages/theme/src/text-ellipsis.less
@@ -11,6 +11,10 @@
         }
     }
     &__expand-btn {
-        @apply text-sky-500 hover:text-sky-400 cursor-pointer;
+        color: .getCssVar(blue-4) [];
+        @apply cursor-pointer;
+        &:hover {
+            color: .getCssVar(blue-5) [];
+        }
     }
 }
diff --git a/packages/theme/src/text-highlight.less b/packages/theme/src/text-highlight.less
index 902d2fb..e73155a 100644
--- a/packages/theme/src/text-highlight.less
+++ b/packages/theme/src/text-highlight.less
@@ -2,6 +2,6 @@
 
 .@{namespace}-text-highlight {
     &__highlight {
-        @apply text-sky-400;
+        color: .getCssVar(blue-4) [];
     }
 }

From 91fd898b336cf8ee9b66341e6fd814ef0bfb5ee4 Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Mon, 20 May 2024 10:12:49 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=93=83=20docs:=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E7=BC=96=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config/index.ts |  1 +
 docs/component/model.md         | 59 +++++++++++++++++++++++++++++++++
 docs/demos/model/base.vue       | 20 +++++++++++
 docs/demos/model/service.vue    | 30 +++++++++++++++++
 4 files changed, 110 insertions(+)
 create mode 100644 docs/component/model.md
 create mode 100644 docs/demos/model/base.vue
 create mode 100644 docs/demos/model/service.vue

diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
index 39d6d4f..c0dbed4 100644
--- a/docs/.vitepress/config/index.ts
+++ b/docs/.vitepress/config/index.ts
@@ -28,6 +28,7 @@ export default defineConfig({
                         { text: 'ElementSelect', link: '/component/element-select' },
                         { text: 'Loading', link: '/component/loading' },
                         { text: 'Collapse', link: '/component/collapse' },
+                        { text: 'Model', link: '/component/model' },
                     ],
                 },
             ],
diff --git a/docs/component/model.md b/docs/component/model.md
new file mode 100644
index 0000000..8ca3440
--- /dev/null
+++ b/docs/component/model.md
@@ -0,0 +1,59 @@
+<script>
+if (!import.meta.env.SSR) {
+    document.body.classList.add('vp-raw')
+}
+</script>
+
+# Model
+
+## 基础用法
+
+:::demo model/base
+
+:::
+
+## 函数调用
+
+:::demo model/service
+
+:::
+
+## Model Props
+
+| 名称                 | 类型      | 说明                   | 默认值  |
+| -------------------- | --------- | ---------------------- | ------- |
+| modelValue / v-model | `boolean` | 是否打开               | `false` |
+| width                | `string`  | 弹窗宽度, 注意携带单位 | `'50%'` |
+| maskClose            | `boolean` | 是否可点击蒙层关闭     | `true`  |
+| fullscreen           | `boolean` | 全屏显示               | `false` |
+| destroyOnClose       | `boolean` | 关闭后销毁             | `true`  |
+
+## Model 事件
+
+| 名称  | 说明       | 类型         |
+| ----- | ---------- | ------------ |
+| close | 关闭时触发 | `() => void` |
+
+## Model 插槽
+
+| 名称    | 说明         | 类型 |
+| ------- | ------------ | ---- |
+| default | 主体显示内容 | -    |
+| header  | 顶部显示内容 | -    |
+| footer  | 底部显示内容 | -    |
+
+## CdxModel.service 函数
+
+| 参数           | 类型                    | 说明                                                                                                                            | 默认值  |
+| -------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| body           | `VNode \| string`       | default 插槽渲染内容                                                                                                            | -       |
+| header         | `VNode \| string`       | header 插槽渲染内容                                                                                                             | -       |
+| footer         | `string \| HTMLElement` | 插入至的 DOM 节点。可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 | -       |
+| width          | `string`                | 弹窗宽度, 注意携带单位                                                                                                          | `'50%'` |
+| maskClose      | `boolean`               | 是否可点击蒙层关闭                                                                                                              | `true`  |
+| fullscreen     | `boolean`               | 全屏显示                                                                                                                        | `false` |
+| destroyOnClose | `boolean`               | 关闭后销毁                                                                                                                      | `true`  |
+
+| 返回值 | 类型         | 说明           |
+| ------ | ------------ | -------------- |
+| close  | `() => void` | 用于关闭 Model |
diff --git a/docs/demos/model/base.vue b/docs/demos/model/base.vue
new file mode 100644
index 0000000..6d669bd
--- /dev/null
+++ b/docs/demos/model/base.vue
@@ -0,0 +1,20 @@
+<template>
+    <div style="position: relative; height: 200px">
+        <button @click="show = true">open model</button>
+        <CdxModel v-model="show">
+            <template #header>
+                <div>model header</div>
+            </template>
+            <div>click outside to close</div>
+            <template #footer>
+                <div>model footer</div>
+            </template>
+        </CdxModel>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const show = ref(true);
+</script>
diff --git a/docs/demos/model/service.vue b/docs/demos/model/service.vue
new file mode 100644
index 0000000..c5ae570
--- /dev/null
+++ b/docs/demos/model/service.vue
@@ -0,0 +1,30 @@
+<template>
+    <button @click="startModel">open model</button>
+    <button @click="startFullscreenModel">open fullscreen model</button>
+    <div
+        ref="divRef"
+        style="position: relative; height: 200px"
+    ></div>
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { CdxModel } from 'cdx-component';
+
+const divRef = ref();
+
+const startModel = () => {
+    const { close } = CdxModel.service({
+        target: divRef.value,
+        body: 'content',
+        fullscreen: false,
+    });
+};
+const startFullscreenModel = () => {
+    const { close } = CdxModel.service({
+        body: 'content',
+        header: h('div', 'header'),
+        footer: h('div', 'footer'),
+    });
+};
+</script>

From e6d292f2690838193fc7e558cf6150ba459341dd Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Mon, 20 May 2024 11:00:22 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E6=9C=AA=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=AE=BD=E5=BA=A6=E6=97=B6=E7=9A=84=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../text-ellipsis/src/text-ellipsis.vue       | 246 +++++++++---------
 1 file changed, 125 insertions(+), 121 deletions(-)

diff --git a/packages/components/text-ellipsis/src/text-ellipsis.vue b/packages/components/text-ellipsis/src/text-ellipsis.vue
index f2d8703..81564fd 100644
--- a/packages/components/text-ellipsis/src/text-ellipsis.vue
+++ b/packages/components/text-ellipsis/src/text-ellipsis.vue
@@ -1,121 +1,125 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount, watch, useSlots } from 'vue';
-import { textEllipsisEmits, textEllipsisProps } from './text-ellipsis';
-import { namespace } from '@cdx-component/constants';
-import { useBem, useModelValue } from '@cdx-component/hooks';
-
-defineOptions({ name: 'CdxTextEllipsis' });
-const props = defineProps(textEllipsisProps);
-const emits = defineEmits(textEllipsisEmits);
-const slots = useSlots();
-
-const [, bem] = useBem('text-ellipsis');
-const { model } = useModelValue(props, false);
-
-const isEllipsis = ref(!!slots.default);
-const text = ref('');
-const rootRef = ref<HTMLDivElement>();
-
-const hasExpandBtn = computed(() => props.canExpand && isEllipsis.value);
-const expandBtnText = computed(() => (model.value ? props.collapseText : props.expandText));
-const ellipsisLines = computed(() => (model.value ? 0 : props.lines));
-
-const cloneNode = <T extends HTMLElement>(node: T, content: string) => {
-    const copy = node.cloneNode(false) as T;
-    copy.style.position = 'fixed';
-    copy.style.zIndex = '-9999';
-    copy.style.top = '-9999px';
-    copy.style.left = '-9999px';
-    copy.style.minHeight = 'auto';
-    copy.innerHTML = content;
-    document.body.appendChild(copy);
-    return copy;
-};
-const parseNum = (num: any) => {
-    const n = parseFloat(num);
-    return isNaN(n) ? 0 : n;
-};
-const calcEllipsisText = (root: HTMLElement, totalHeight: number, content: string) => {
-    const len = content.length;
-    // span 和文件间有换行, 不加这个空格可以把文字和 span 间的换行去掉
-    const tailText = props.ellipsisText + ' ' + (hasExpandBtn.value ? expandBtnText.value : '');
-    const calcDisplay = (left: number, right: number): string => {
-        if (right - left <= 1) {
-            return content.slice(0, left) + props.ellipsisText;
-        }
-        const mid = Math.round((left + right) / 2);
-        root.innerText = content.slice(0, mid) + tailText;
-        if (root.offsetHeight > totalHeight) {
-            return calcDisplay(left, mid);
-        } else {
-            return calcDisplay(mid, right);
-        }
-    };
-    return calcDisplay(0, len);
-};
-const calcEllipsis = () => {
-    if (!rootRef.value || !props.content) return;
-    const copy = cloneNode(rootRef.value, props.content);
-    const { paddingTop, paddingBottom, lineHeight } = getComputedStyle(copy);
-    const totalHeight =
-        parseNum(paddingTop) + parseNum(paddingBottom) + parseNum(lineHeight) * (Number(props.lines) + 0.5);
-
-    if (copy.offsetHeight > totalHeight) {
-        isEllipsis.value = true;
-        text.value = calcEllipsisText(copy, totalHeight, props.content);
-    } else {
-        isEllipsis.value = false;
-        text.value = props.content;
-    }
-    document.body.removeChild(copy);
-};
-const toggleExpand = () => {
-    model.value = !model.value;
-};
-
-watch(
-    () => [props.content, props.ellipsisText, props.expandText, props.collapseText],
-    () => {
-        calcEllipsis();
-    }
-);
-
-onMounted(() => {
-    if (props.content) {
-        calcEllipsis();
-        window.addEventListener('resize', calcEllipsis);
-    }
-});
-onBeforeUnmount(() => {
-    window.removeEventListener('resize', calcEllipsis);
-});
-</script>
-
-<template>
-    <div
-        ref="rootRef"
-        :class="bem.b()"
-        :style="{ [`--${namespace}-line`]: ellipsisLines }"
-    >
-        <span :class="[$slots.default && bem.bem('content', 'block')]">
-            <slot
-                :isExpanded="model"
-                :text="model ? props.content : text"
-            >
-                {{ model ? props.content : text }}
-            </slot>
-        </span>
-        <span
-            v-if="hasExpandBtn"
-            :class="bem.be('expand-btn')"
-            @click="toggleExpand"
-        >
-            <slot
-                name="expandBtn"
-                :isExpanded="model"
-            >
-                {{ expandBtnText }}
-            </slot>
-        </span>
-    </div>
-</template>
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, watch, useSlots } from 'vue';
+import { textEllipsisEmits, textEllipsisProps } from './text-ellipsis';
+import { namespace } from '@cdx-component/constants';
+import { useBem, useModelValue } from '@cdx-component/hooks';
+
+defineOptions({ name: 'CdxTextEllipsis' });
+const props = defineProps(textEllipsisProps);
+const emits = defineEmits(textEllipsisEmits);
+const slots = useSlots();
+
+const [, bem] = useBem('text-ellipsis');
+const { model } = useModelValue(props, false);
+
+const isEllipsis = ref(!!slots.default);
+const text = ref('');
+const rootRef = ref<HTMLDivElement>();
+
+const hasExpandBtn = computed(() => {
+    console.log(props.canExpand, isEllipsis.value);
+    return props.canExpand && isEllipsis.value;
+});
+const expandBtnText = computed(() => (model.value ? props.collapseText : props.expandText));
+const ellipsisLines = computed(() => (model.value ? 0 : props.lines));
+
+const cloneNode = <T extends HTMLElement>(node: T, content: string) => {
+    const copy = node.cloneNode(false) as T;
+    copy.style.width = getComputedStyle(node).width;
+    copy.style.position = 'fixed';
+    copy.style.zIndex = '-9999';
+    copy.style.top = '-9999px';
+    copy.style.left = '-9999px';
+    copy.style.minHeight = 'auto';
+    copy.innerHTML = content;
+    document.body.appendChild(copy);
+    return copy;
+};
+const parseNum = (num: any) => {
+    const n = parseFloat(num);
+    return isNaN(n) ? 0 : n;
+};
+const calcEllipsisText = (root: HTMLElement, totalHeight: number, content: string) => {
+    const len = content.length;
+    // span 和文件间有换行, 不加这个空格可以把文字和 span 间的换行去掉
+    const tailText = props.ellipsisText + ' ' + (hasExpandBtn.value ? expandBtnText.value : '');
+    const calcDisplay = (left: number, right: number): string => {
+        if (right - left <= 1) {
+            return content.slice(0, left) + props.ellipsisText;
+        }
+        const mid = Math.round((left + right) / 2);
+        root.innerText = content.slice(0, mid) + tailText;
+        if (root.offsetHeight > totalHeight) {
+            return calcDisplay(left, mid);
+        } else {
+            return calcDisplay(mid, right);
+        }
+    };
+    return calcDisplay(0, len);
+};
+const calcEllipsis = () => {
+    if (!rootRef.value || !props.content) return;
+    const copy = cloneNode(rootRef.value, props.content);
+    const { paddingTop, paddingBottom, lineHeight } = getComputedStyle(copy);
+    const totalHeight =
+        parseNum(paddingTop) + parseNum(paddingBottom) + parseNum(lineHeight) * (Number(props.lines) + 0.5);
+
+    if (copy.offsetHeight > totalHeight) {
+        isEllipsis.value = true;
+        text.value = calcEllipsisText(copy, totalHeight, props.content);
+    } else {
+        isEllipsis.value = false;
+        text.value = props.content;
+    }
+    document.body.removeChild(copy);
+};
+const toggleExpand = () => {
+    model.value = !model.value;
+};
+
+watch(
+    () => [props.content, props.ellipsisText, props.expandText, props.collapseText],
+    () => {
+        calcEllipsis();
+    },
+);
+
+onMounted(() => {
+    if (props.content) {
+        calcEllipsis();
+        window.addEventListener('resize', calcEllipsis);
+    }
+});
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', calcEllipsis);
+});
+</script>
+
+<template>
+    <div
+        ref="rootRef"
+        :class="bem.b()"
+        :style="{ [`--${namespace}-line`]: ellipsisLines }"
+    >
+        <span :class="[$slots.default && bem.bem('content', 'block')]">
+            <slot
+                :isExpanded="model"
+                :text="model ? props.content : text"
+            >
+                {{ model ? props.content : text }}
+            </slot>
+        </span>
+        <span
+            v-if="hasExpandBtn"
+            :class="bem.be('expand-btn')"
+            @click="toggleExpand"
+        >
+            <slot
+                name="expandBtn"
+                :isExpanded="model"
+            >
+                {{ expandBtnText }}
+            </slot>
+        </span>
+    </div>
+</template>

From 3bbdb0b70ba0513f065c07467077e0ca87f4cbb1 Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Mon, 20 May 2024 11:00:48 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=93=83=20docs:=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E7=BC=96=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config/index.ts    |  4 +++-
 docs/component/model.md            |  2 +-
 docs/component/overlay.md          | 26 ++++++++++++++++++++++++++
 docs/component/text-ellipsis.md    | 26 ++++++++++++++++++++++++++
 docs/component/text-highlight.md   | 30 ++++++++++++++++++++++++++++++
 docs/demos/overlay/base.vue        | 10 ++++++++++
 docs/demos/overlay/fullscreen.vue  | 19 +++++++++++++++++++
 docs/demos/text-ellipsis/base.vue  | 19 +++++++++++++++++++
 docs/demos/text-highlight/base.vue | 20 ++++++++++++++++++++
 docs/demos/text-highlight/slot.vue | 25 +++++++++++++++++++++++++
 10 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 docs/component/overlay.md
 create mode 100644 docs/component/text-ellipsis.md
 create mode 100644 docs/component/text-highlight.md
 create mode 100644 docs/demos/overlay/base.vue
 create mode 100644 docs/demos/overlay/fullscreen.vue
 create mode 100644 docs/demos/text-ellipsis/base.vue
 create mode 100644 docs/demos/text-highlight/base.vue
 create mode 100644 docs/demos/text-highlight/slot.vue

diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
index c0dbed4..5c19d9b 100644
--- a/docs/.vitepress/config/index.ts
+++ b/docs/.vitepress/config/index.ts
@@ -11,7 +11,6 @@ export default defineConfig({
     rewrites: {
         '/index.md': '/component/usage.md',
     },
-    // appearance: false,
     themeConfig: {
         sidebar: {
             '/component/': [
@@ -29,6 +28,9 @@ export default defineConfig({
                         { text: 'Loading', link: '/component/loading' },
                         { text: 'Collapse', link: '/component/collapse' },
                         { text: 'Model', link: '/component/model' },
+                        { text: 'Overlay', link: '/component/overlay' },
+                        { text: 'TextEllipsis', link: '/component/text-ellipsis' },
+                        { text: 'TextHighlight', link: '/component/text-highlight' },
                     ],
                 },
             ],
diff --git a/docs/component/model.md b/docs/component/model.md
index 8ca3440..17b24e7 100644
--- a/docs/component/model.md
+++ b/docs/component/model.md
@@ -36,7 +36,7 @@ if (!import.meta.env.SSR) {
 
 ## Model 插槽
 
-| 名称    | 说明         | 类型 |
+| 名称    | 说明         | 参数 |
 | ------- | ------------ | ---- |
 | default | 主体显示内容 | -    |
 | header  | 顶部显示内容 | -    |
diff --git a/docs/component/overlay.md b/docs/component/overlay.md
new file mode 100644
index 0000000..90f48ae
--- /dev/null
+++ b/docs/component/overlay.md
@@ -0,0 +1,26 @@
+# Overlay
+
+## 基础用法
+
+:::demo overlay/base
+
+:::
+
+## 全屏显示
+
+:::demo overlay/fullscreen
+
+:::
+
+## Overlay Props
+
+| 名称                 | 类型      | 说明     | 默认值  |
+| -------------------- | --------- | -------- | ------- |
+| modelValue / v-model | `boolean` | 是否打开 | `false` |
+| fullscreen           | `boolean` | 全屏显示 | `false` |
+
+## Overlay 事件
+
+| 名称  | 说明         | 类型         |
+| ----- | ------------ | ------------ |
+| click | 点击遮罩触发 | `() => void` |
diff --git a/docs/component/text-ellipsis.md b/docs/component/text-ellipsis.md
new file mode 100644
index 0000000..c5a6d6d
--- /dev/null
+++ b/docs/component/text-ellipsis.md
@@ -0,0 +1,26 @@
+# TextEllipsis
+
+## 基础用法
+
+:::demo text-ellipsis/base
+
+:::
+
+## TextEllipsis Props
+
+| 名称                 | 类型      | 说明                 | 默认值  |
+| -------------------- | --------- | -------------------- | ------- |
+| modelValue / v-model | `boolean` | 是否打开             | `false` |
+| content              | `string`  | 显示文字             | -       |
+| lines                | `number`  | 省略时显示文字行数   | `1`     |
+| ellipsisText         | `string`  | 省略号的文本内容     | `...`   |
+| canExpand            | `boolean` | 是否显示点击展开按钮 | `true`  |
+| expandText           | `boolean` | 展开按钮显示文字     | `展开`  |
+| collapseText         | `boolean` | 收起按钮显示文字     | `收起`  |
+
+## TextEllipsis 插槽
+
+| 名称      | 说明         | 参数                                  |
+| --------- | ------------ | ------------------------------------- |
+| default   | 显示文字内容 | `(isExpanded: boolean, text: string)` |
+| expandBtn | 展开按钮内容 | `(isExpanded: boolean)`               |
diff --git a/docs/component/text-highlight.md b/docs/component/text-highlight.md
new file mode 100644
index 0000000..452b505
--- /dev/null
+++ b/docs/component/text-highlight.md
@@ -0,0 +1,30 @@
+# TextHighlight
+
+## 基础用法
+
+:::demo text-highlight/base
+
+:::
+
+## 插槽显示文字
+
+:::demo text-highlight/slot
+
+:::
+
+## TextHighlight Props
+
+| 名称           | 类型                 | 说明               | 默认值  |
+| -------------- | -------------------- | ------------------ | ------- |
+| content        | `string`             | 显示文字           | -       |
+| texts          | `string \| string[]` | 高亮的文字         | `''`    |
+| ignoreCase     | `boolean`            | 匹配时忽略大小写   | `false` |
+| highlightTag   | `string`             | 高亮文字的标签名   | `span`  |
+| highlightClass | `boolean`            | 高亮文字标签的类名 | `''`    |
+
+## TextHighlight 插槽
+
+| 名称      | 说明       | 参数             |
+| --------- | ---------- | ---------------- |
+| default   | 非高亮文字 | `(text: string)` |
+| highlight | 高亮文字   | `(text: string)` |
diff --git a/docs/demos/overlay/base.vue b/docs/demos/overlay/base.vue
new file mode 100644
index 0000000..3cc93d9
--- /dev/null
+++ b/docs/demos/overlay/base.vue
@@ -0,0 +1,10 @@
+<template>
+    <div style="position: relative; height: 200px">
+        <CdxOverlay v-model="show"></CdxOverlay>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const show = ref(true);
+</script>
diff --git a/docs/demos/overlay/fullscreen.vue b/docs/demos/overlay/fullscreen.vue
new file mode 100644
index 0000000..2415bbe
--- /dev/null
+++ b/docs/demos/overlay/fullscreen.vue
@@ -0,0 +1,19 @@
+<template>
+    <div style="position: relative; height: 200px">
+        <button @click="show = true">open overlay</button>
+        <CdxOverlay
+            v-model="show"
+            fullscreen
+            @click="show = false"
+        >
+            <div style="width: 50%; height: 200px; margin: 300px auto; background-color: #fff">
+                此处不会触发 click 事件
+            </div>
+        </CdxOverlay>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/docs/demos/text-ellipsis/base.vue b/docs/demos/text-ellipsis/base.vue
new file mode 100644
index 0000000..3b470ae
--- /dev/null
+++ b/docs/demos/text-ellipsis/base.vue
@@ -0,0 +1,19 @@
+<template>
+    <CdxTextEllipsis
+        v-model="show"
+        :content="content"
+        :lines="1"
+        ellipsisText="..."
+        expandText="展开"
+        collapseText="收起"
+    >
+    </CdxTextEllipsis>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const show = ref(false);
+const content = ref(
+    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt non architecto nulla repellendus libero vero hic accusamus, suscipit itaque, dolorum placeat nostrum laboriosam vel sapiente impedit ipsa saepe voluptatem autem?',
+);
+</script>
diff --git a/docs/demos/text-highlight/base.vue b/docs/demos/text-highlight/base.vue
new file mode 100644
index 0000000..051b0d8
--- /dev/null
+++ b/docs/demos/text-highlight/base.vue
@@ -0,0 +1,20 @@
+<template>
+    <CdxTextHighlight
+        :content="content"
+        :texts="texts"
+        :ignoreCase="false"
+        highlightTag="a"
+        highlightClass="link"
+    ></CdxTextHighlight>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+const content = ref(
+    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt non architecto nulla repellendus libero vero hic accusamus, suscipit itaque, dolorum placeat nostrum laboriosam vel sapiente impedit ipsa saepe voluptatem autem?',
+);
+const texts = computed(() => {
+    const words = content.value.split(' ');
+    return new Array(5).fill('').map(() => words[Math.floor(Math.random() * words.length)]);
+});
+</script>
diff --git a/docs/demos/text-highlight/slot.vue b/docs/demos/text-highlight/slot.vue
new file mode 100644
index 0000000..350bbc2
--- /dev/null
+++ b/docs/demos/text-highlight/slot.vue
@@ -0,0 +1,25 @@
+<template>
+    <CdxTextHighlight
+        :content="content"
+        :texts="texts"
+        :ignoreCase="false"
+    >
+        <template #highlight="{ text }">
+            <span style="cursor: pointer; color: red">{{ text }}</span>
+        </template>
+        <template #default="{ text }">
+            <span style="color: blue">{{ text }}</span>
+        </template>
+    </CdxTextHighlight>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+const content = ref(
+    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt non architecto nulla repellendus libero vero hic accusamus, suscipit itaque, dolorum placeat nostrum laboriosam vel sapiente impedit ipsa saepe voluptatem autem?',
+);
+const texts = computed(() => {
+    const words = content.value.split(' ');
+    return new Array(5).fill('').map(() => words[Math.floor(Math.random() * words.length)]);
+});
+</script>

From 0997561d86c4ae32a850da95d4245e5451fadf62 Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Mon, 20 May 2024 11:27:37 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E5=A4=9A=E6=AC=A1=E8=A7=A6=E5=8F=91=E6=98=BE=E7=A4=BA=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/captcha/src/captcha.vue | 40 +++++++++++++--------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/components/captcha/src/captcha.vue b/packages/components/captcha/src/captcha.vue
index afbfc02..7df7c27 100644
--- a/packages/components/captcha/src/captcha.vue
+++ b/packages/components/captcha/src/captcha.vue
@@ -14,6 +14,8 @@ const emits = defineEmits(captchaEmits);
 const getSlideTarget = () => {
     return [Math.random() * 50 + 25, Math.random() * 50 + 25];
 };
+let tipVisibleTimer = setTimeout(() => {}, 0);
+
 const [, bem] = useBem('captcha');
 
 const canvasRef = ref<HTMLCanvasElement>();
@@ -81,23 +83,31 @@ const formatBeforeSuccess = async () => {
     };
 };
 const checkedFail = (message: string = '验证失败，请重试') => {
-    checkTip.value = message;
-    checkStatus.value = CheckStatus.fail;
-    pointers.value = [];
-    emits('fail');
-    checkTipVisible.value = true;
-    setTimeout(() => {
-        checkTipVisible.value = false;
-    }, props.tipDuration);
+    clearTimeout(tipVisibleTimer);
+    if (checkTipVisible.value) checkTipVisible.value = false;
+    nextTick(() => {
+        checkTip.value = message;
+        checkStatus.value = CheckStatus.fail;
+        pointers.value = [];
+        emits('fail');
+        checkTipVisible.value = true;
+        tipVisibleTimer = setTimeout(() => {
+            checkTipVisible.value = false;
+        }, props.tipDuration);
+    });
 };
 const checkedSuccess = (message: string = '验证成功') => {
-    checkTip.value = message;
-    checkStatus.value = CheckStatus.success;
-    checkTipVisible.value = true;
-    emits('success');
-    setTimeout(() => {
-        checkTipVisible.value = false;
-    }, props.tipDuration);
+    clearTimeout(tipVisibleTimer);
+    if (checkTipVisible.value) checkTipVisible.value = false;
+    nextTick(() => {
+        checkTip.value = message;
+        checkStatus.value = CheckStatus.success;
+        checkTipVisible.value = true;
+        emits('success');
+        tipVisibleTimer = setTimeout(() => {
+            checkTipVisible.value = false;
+        }, props.tipDuration);
+    });
 };
 const loadImage = async (imageSrc: string) => {
     imageLoading.value = true;