From d1461f3fa45327bddc3f7aba8b108483f507c8c7 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 5 Feb 2026 18:56:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E9=9B=86=E6=88=90=E5=BF=AB?=
 =?UTF-8?q?=E4=B9=90=E5=B7=A5=E4=BD=9C=E4=B8=BB=E9=A2=98=E7=9A=84=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=B3=A2=E7=BA=B9=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

从 @antdv-next/happy-work-theme 引入 DotEffect 组件，替换原有的自定义快乐波纹效果实现。这提升了波纹动画的视觉效果和一致性，并遵循了该主题库的推荐用法。

- 在 pnpm-workspace.yaml 和 package.json 中添加 @antdv-next/happy-work-theme 依赖
- 更新按钮波纹模式选择器的类型定义以匹配 ThemePreferences
- 重写 showHappyEffect 函数，使用 createApp 动态挂载 DotEffect 组件
---
 apps/web-antd/package.json                    |  1 +
 .../src/components/global/button-wave.ts      | 49 +++++++++++--------
 .../blocks/theme/button-wave-mode.vue         |  8 ++-
 pnpm-workspace.yaml                           |  1 +
 4 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index b4c120c0..247004f8 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@alova/adapter-axios": "catalog:",
     "@antdv-next/auto-import-resolver": "catalog:",
+    "@antdv-next/happy-work-theme": "catalog:",
     "@antdv-next/icons": "catalog:",
     "@tinymce/tinymce-vue": "catalog:",
     "@vben/access": "workspace:*",
diff --git a/apps/web-antd/src/components/global/button-wave.ts b/apps/web-antd/src/components/global/button-wave.ts
index 6143c68a..608d27f5 100644
--- a/apps/web-antd/src/components/global/button-wave.ts
+++ b/apps/web-antd/src/components/global/button-wave.ts
@@ -2,6 +2,10 @@ import type { ConfigProviderProps } from 'antdv-next';
 
 import type { ThemePreferences } from '@vben/preferences';
 
+import { createApp, h } from 'vue';
+
+import { DotEffect } from '@antdv-next/happy-work-theme';
+
 const createHolder = (node: HTMLElement) => {
   const { borderWidth } = getComputedStyle(node);
   const borderWidthNum = Number.parseInt(borderWidth, 10);
@@ -104,30 +108,33 @@ const showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => {
   loop();
 };
 
-const showHappyEffect: WaveConfig['showEffect'] = (
-  node,
-  { event, component },
-) => {
-  if (component !== 'Button') {
-    return;
-  }
+/**
+ * copy from https://github.com/antdv-next/happy-work-theme?tab=readme-ov-file#advanced-usage-with-doteffect
+ */
+const showHappyEffect: WaveConfig['showEffect'] = (target, info) => {
+  const { token, hashId } = info;
 
-  const holder = createHolder(node);
-  const rect = holder.getBoundingClientRect();
-  const left = event.clientX - rect.left;
-  const top = event.clientY - rect.top;
-  const color = `hsl(${Math.floor(Math.random() * 360)}, 80%, 70%)`;
+  const holder = document.createElement('div');
+  holder.style.position = 'absolute';
+  holder.style.left = '0px';
+  holder.style.top = '0px';
+  document.body.append(holder);
 
-  const dot = createDot(holder, color, left, top, 16);
-
-  requestAnimationFrame(() => {
-    dot.addEventListener('transitionend', () => {
-      holder.remove();
-    });
-    dot.style.width = '220px';
-    dot.style.height = '220px';
-    dot.style.opacity = '0';
+  const app = createApp({
+    render() {
+      return h(DotEffect, {
+        target,
+        token,
+        hashId,
+        onFinish: () => {
+          app.unmount();
+          holder.remove();
+        },
+      });
+    },
   });
+
+  app.mount(holder);
 };
 
 export const waveConfigs: Array<{
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/button-wave-mode.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/button-wave-mode.vue
index c06dc930..c0ce15a4 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/button-wave-mode.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/button-wave-mode.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ThemePreferences } from '@vben/preferences';
+
 import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
 
 defineOptions({
@@ -9,7 +11,11 @@ const modelValue = defineModel<string>('themeButtonWaveMode', {
   default: 'default',
 });
 
-const items = [
+type ButtonWaveModeItem = {
+  label: ThemePreferences['buttonWaveMode'];
+  value: ThemePreferences['buttonWaveMode'];
+};
+const items: ButtonWaveModeItem[] = [
   { label: 'Default', value: 'Default' },
   { label: 'Disabled', value: 'Disabled' },
   { label: 'Happy', value: 'Happy' },
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8fece7cd..0aa326bc 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -23,6 +23,7 @@ overrides:
 catalog:
   '@alova/adapter-axios': ^2.0.17
   '@antdv-next/auto-import-resolver': 1.0.0-rc.1
+  '@antdv-next/happy-work-theme': ^1.0.0
   '@antdv-next/icons': 1.0.0-beta.1
   '@ast-grep/napi': ^0.39.9
   '@changesets/changelog-github': ^0.5.2