feat(theme): 集成快乐工作主题的按钮波纹效果

从 @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

@@ -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:*",

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,
+ * copy from https://github.com/antdv-next/happy-work-theme?tab=readme-ov-file#advanced-usage-with-doteffect
-  { event, component },
+ */
-) => {
+const showHappyEffect: WaveConfig['showEffect'] = (target, info) => {
-  if (component !== 'Button') {
+  const { token, hashId } = info;
-    return;
-  }
 
-  const holder = createHolder(node);
+  const holder = document.createElement('div');
-  const rect = holder.getBoundingClientRect();
+  holder.style.position = 'absolute';
-  const left = event.clientX - rect.left;
+  holder.style.left = '0px';
-  const top = event.clientY - rect.top;
+  holder.style.top = '0px';
-  const color = `hsl(${Math.floor(Math.random() * 360)}, 80%, 70%)`;
+  document.body.append(holder);
 
-  const dot = createDot(holder, color, left, top, 16);
+  const app = createApp({
-
+    render() {
-  requestAnimationFrame(() => {
+      return h(DotEffect, {
-    dot.addEventListener('transitionend', () => {
+        target,
-      holder.remove();
+        token,
-    });
+        hashId,
-    dot.style.width = '220px';
+        onFinish: () => {
-    dot.style.height = '220px';
+          app.unmount();
-    dot.style.opacity = '0';
+          holder.remove();
+        },
+      });
+    },
   });
+
+  app.mount(holder);
 };
 
 export const waveConfigs: Array<{

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' },

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