feat(theme): 新增按钮水波纹样式配置选项

添加按钮水波纹效果的自定义配置功能，支持默认、禁用、内嵌、抖动和欢乐五种样式。用户可在主题设置中选择不同效果，增强交互视觉体验。

- 在主题配置类型中添加 buttonWaveMode 字段
- 新增按钮水波纹配置组件和样式实现
- 更新中英文国际化文本
- 在应用配置中集成水波纹效果

packages/effects/layouts/src/widgets/preferences/blocks/index.ts

@@ -14,6 +14,7 @@ export { default as Widget } from './layout/widget.vue';
 export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
 export { default as SwitchItem } from './switch-item.vue';
 export { default as BuiltinTheme } from './theme/builtin.vue';
+export { default as ButtonWaveMode } from './theme/button-wave-mode.vue';
 export { default as ColorMode } from './theme/color-mode.vue';
 export { default as FontSize } from './theme/font-size.vue';
 export { default as Radius } from './theme/radius.vue';

packages/effects/layouts/src/widgets/preferences/blocks/theme/button-wave-mode.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceButtonWaveMode',
+});
+
+const modelValue = defineModel<string>('themeButtonWaveMode', {
+  default: 'default',
+});
+
+const items = [
+  { label: 'Default', value: 'Default' },
+  { label: 'Disabled', value: 'Disabled' },
+  { label: 'Happy', value: 'Happy' },
+  { label: 'Inset', value: 'Inset' },
+  { label: 'Shake', value: 'Shake' },
+];
+</script>
+
+<template>
+  <ToggleGroup
+    v-model="modelValue"
+    class="gap-2"
+    size="sm"
+    type="single"
+    variant="outline"
+  >
+    <template v-for="item in items" :key="item.value">
+      <ToggleGroupItem
+        :value="item.value"
+        class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm px-2"
+      >
+        {{ item.label }}
+      </ToggleGroupItem>
+    </template>
+  </ToggleGroup>
+</template>

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -40,6 +40,7 @@ import {
   Block,
   Breadcrumb,
   BuiltinTheme,
+  ButtonWaveMode,
   ColorMode,
   Content,
   Copyright,
@@ -86,6 +87,7 @@ const themeColorPrimary = defineModel<string>('themeColorPrimary');
 const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
 const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
+const themeButtonWaveMode = defineModel<string>('themeButtonWaveMode');
 const themeFontSize = defineModel<number>('themeFontSize');
 const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
 const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
@@ -330,6 +332,9 @@ async function handleReset() {
             <Block :title="$t('preferences.theme.radius')">
               <Radius v-model="themeRadius" />
             </Block>
+            <Block :title="$t('preferences.theme.buttonWaveMode')">
+              <ButtonWaveMode v-model="themeButtonWaveMode" />
+            </Block>
             <Block :title="$t('preferences.theme.fontSize')">
               <FontSize v-model="themeFontSize" />
             </Block>