@coffic/cosy-ui 0.6.14 → 0.6.18

package/dist/vue/BannerBox/BannerBox.vue

@@ -47,11 +47,9 @@ BannerBox 组件是一个可定制的横幅容器，支持自定义背景、尺
 @prop {String} [title=''] - 横幅标题
 @prop {String} [description=''] - 横幅描述
 @prop {Array} [features=[]] - 特性列表，每项包含{emoji, title, link}
-@prop {Object} [customComponent=null] - 自定义组件
-@prop {Object} [customComponentProps={}] - 自定义组件的属性
 
 @slots
-@slot default - 横幅内容，当不使用title/description/features属性时显示
+@slot default - 横幅内容
 -->
 
 <script lang="ts">
@@ -59,9 +57,12 @@ import { ref, onMounted, watch, onUnmounted, computed, defineComponent } from 'v
 import { RiDownloadLine } from '@remixicon/vue';
 import { toPng } from 'html-to-image';
 import FeatureCard from './FeatureCard.vue';
+import DownloadButton from './DownloadButton.vue';
+import { bgClasses } from './bgStyles';
+import { sizePresets } from './sizePresets';
 import '../../style'
 
-interface Feature {
+export interface IFeature {
     emoji: string;
     title: string;
     link?: string;
@@ -71,7 +72,8 @@ export default defineComponent({
     name: 'BannerBox',
     components: {
         RiDownloadLine,
-        FeatureCard
+        FeatureCard,
+        DownloadButton
     },
     props: {
         displayMode: {
@@ -92,19 +94,9 @@ export default defineComponent({
             default: ''
         },
         features: {
-            type: Array as () => Feature[],
+            type: Array as () => IFeature[],
             default: () => []
         },
-        // 自定义组件
-        customComponent: {
-            type: Object,
-            default: null
-        },
-        // 自定义组件的属性
-        customComponentProps: {
-            type: Object,
-            default: () => ({})
-        }
     },
     setup(props) {
         const componentRef = ref<HTMLElement | null>(null);
@@ -112,19 +104,6 @@ export default defineComponent({
         const isLoadedFromStorage = ref(false);
         const selectedBgIndex = ref(props.backgroundClassIndex);
 
-        const sizePresets = [
-            { name: 'Default', width: 'cosy:w-full', height: 'cosy:h-full' },
-            { name: 'Square', width: 'cosy:w-[600px]', height: 'cosy:h-[600px]' },
-            { name: 'Landscape', width: 'cosy:w-[800px]', height: 'cosy:h-[450px]' },
-            { name: 'Portrait', width: 'cosy:w-[450px]', height: 'cosy:h-[800px]' },
-            { name: 'Wide', width: 'cosy:w-[1200px]', height: 'cosy:h-[675px]' },
-            { name: 'Banner', width: 'cosy:w-[1200px]', height: 'cosy:h-[300px]' },
-            { name: '1280 × 800', width: 'cosy:w-[1280px]', height: 'cosy:h-[800px]' },
-            { name: '1440 × 900', width: 'cosy:w-[1440px]', height: 'cosy:h-[900px]' },
-            { name: '2560 × 1600', width: 'cosy:w-[2560px]', height: 'cosy:h-[1600px]' },
-            { name: '2880 × 1800', width: 'cosy:w-[2880px]', height: 'cosy:h-[1800px]' },
-        ];
-
         const selectedSize = ref(sizePresets[0]);
 
         const toggleDropdown = () => {
@@ -213,56 +192,6 @@ export default defineComponent({
             }
         };
 
-        const bgClasses = [
-            'cosy:bg-gradient-to-b cosy:from-blue-100/50 cosy:to-blue-200/50 dark:cosy:from-blue-500/10 dark:cosy:to-blue-200/10',
-            'cosy:bg-gradient-to-b cosy:from-blue-200/50 cosy:to-purple-200/50 dark:cosy:from-blue-500/10 dark:cosy:to-purple-200/10',
-            'cosy:bg-gradient-to-b cosy:from-yellow-200/50 cosy:to-green-200/50 dark:cosy:from-yellow-500/10 dark:cosy:to-green-200/10',
-            'cosy:bg-gradient-to-b cosy:from-teal-200/50 cosy:to-blue-200/50 dark:cosy:from-teal-500/10 dark:cosy:to-blue-200/10',
-            'cosy:bg-gradient-to-b cosy:from-pink-200/50 cosy:to-indigo-200/20 dark:cosy:from-pink-500/10 dark:cosy:to-indigo-200/10',
-            'cosy:bg-gradient-to-b cosy:from-red-200/50 cosy:to-orange-200/50 dark:cosy:from-red-500/10 dark:cosy:to-orange-200/10',
-            'cosy:bg-gradient-to-b cosy:from-orange-200/50 cosy:to-yellow-200/50 dark:cosy:from-orange-500/10 dark:cosy:to-yellow-200/10',
-            'cosy:bg-gradient-to-b cosy:from-green-200/50 cosy:to-teal-200/50 dark:cosy:from-green-500/10 dark:cosy:to-teal-200/10',
-
-            // 不透明的背景
-            'cosy:bg-gradient-to-b cosy:from-blue-100 cosy:to-blue-200 dark:cosy:from-blue-500 dark:cosy:to-blue-200',
-            'cosy:bg-gradient-to-b cosy:from-blue-200 cosy:to-purple-200 dark:cosy:from-blue-500 dark:cosy:to-purple-200',
-            'cosy:bg-gradient-to-b cosy:from-yellow-200 cosy:to-green-200 dark:cosy:from-yellow-500 dark:cosy:to-green-200',
-            'cosy:bg-gradient-to-b cosy:from-teal-200 cosy:to-blue-200 dark:cosy:from-teal-500 dark:cosy:to-blue-200',
-            'cosy:bg-gradient-to-b cosy:from-pink-200 cosy:to-red-200 dark:cosy:from-pink-500 dark:cosy:to-red-200',
-            'cosy:bg-gradient-to-b cosy:from-red-200 cosy:to-orange-200 dark:cosy:from-red-500 dark:cosy:to-orange-200',
-            'cosy:bg-gradient-to-b cosy:from-orange-200 cosy:to-yellow-200 dark:cosy:from-orange-500 dark:cosy:to-yellow-200',
-            'cosy:bg-gradient-to-b cosy:from-green-200 cosy:to-teal-200 dark:cosy:from-green-500 dark:cosy:to-teal-200',
-
-            // 不透明的深色背景
-            'cosy:bg-gradient-to-b cosy:from-blue-900 cosy:to-blue-200 dark:cosy:from-blue-900 dark:cosy:to-blue-200',
-            'cosy:bg-gradient-to-b cosy:from-blue-900 cosy:to-purple-200 dark:cosy:from-blue-900 dark:cosy:to-purple-200',
-            'cosy:bg-gradient-to-b cosy:from-yellow-900 cosy:to-green-200 dark:cosy:from-yellow-900 dark:cosy:to-green-200',
-            'cosy:bg-gradient-to-b cosy:from-teal-900 cosy:to-blue-200 dark:cosy:from-teal-900 dark:cosy:to-blue-200',
-            'cosy:bg-gradient-to-b cosy:from-pink-900 cosy:to-red-200 dark:cosy:from-pink-900 dark:cosy:to-red-200',
-            'cosy:bg-gradient-to-b cosy:from-red-900 cosy:to-orange-200 dark:cosy:from-red-900 dark:cosy:to-orange-200',
-            'cosy:bg-gradient-to-b cosy:from-orange-900 cosy:to-yellow-200 dark:cosy:from-orange-900 dark:cosy:to-yellow-200',
-            'cosy:bg-gradient-to-b cosy:from-green-900 cosy:to-teal-900 dark:cosy:from-green-900 dark:cosy:to-teal-900',
-            // 不透明的渐变背景
-            'cosy:bg-gradient-to-br cosy:from-emerald-400 cosy:to-cyan-400 dark:cosy:from-emerald-600 dark:cosy:to-cyan-600',
-            'cosy:bg-gradient-to-br cosy:from-violet-400 cosy:to-fuchsia-400 dark:cosy:from-violet-600 dark:cosy:to-fuchsia-600',
-            'cosy:bg-gradient-to-br cosy:from-amber-400 cosy:to-orange-400 dark:cosy:from-amber-600 dark:cosy:to-orange-600',
-            'cosy:bg-gradient-to-br cosy:from-rose-400 cosy:to-pink-400 dark:cosy:from-rose-600 dark:cosy:to-pink-600',
-            'cosy:bg-gradient-to-br cosy:from-sky-400 cosy:to-indigo-400 dark:cosy:from-sky-600 dark:cosy:to-indigo-600',
-            'cosy:bg-gradient-to-br cosy:from-lime-400 cosy:to-emerald-400 dark:cosy:from-lime-600 dark:cosy:to-emerald-600',
-            'cosy:bg-gradient-to-br cosy:from-purple-400 cosy:to-indigo-400 dark:cosy:from-purple-600 dark:cosy:to-indigo-600',
-            'cosy:bg-gradient-to-br cosy:from-blue-400 cosy:to-violet-400 dark:cosy:from-blue-600 dark:cosy:to-violet-600',
-
-            // 纯色背景
-            'cosy:bg-emerald-400 dark:cosy:bg-emerald-600',
-            'cosy:bg-violet-400 dark:cosy:bg-violet-600',
-            'cosy:bg-amber-400 dark:cosy:bg-amber-600',
-            'cosy:bg-rose-400 dark:cosy:bg-rose-600',
-            'cosy:bg-sky-400 dark:cosy:bg-sky-600',
-            'cosy:bg-lime-400 dark:cosy:bg-lime-600',
-            'cosy:bg-purple-400 dark:cosy:bg-purple-600',
-            'cosy:bg-blue-400 dark:cosy:bg-blue-600'
-        ];
-
         const getBackgroundClass = (): string => {
             return bgClasses[selectedBgIndex.value % bgClasses.length];
         }
@@ -280,9 +209,6 @@ export default defineComponent({
             window.removeEventListener('bannerBoxSizeChange', handleSizeChange);
         });
 
-        // 是否显示Banner内容
-        const showBannerContent = computed(() => props.title !== '' || props.description !== '' || props.features.length > 0 || props.customComponent !== null);
-
         // 计算下载按钮是否显示及其样式类
         const downloadButtonStyles = computed(() => {
             switch (props.displayMode) {
@@ -320,8 +246,8 @@ export default defineComponent({
             downloadAsImage,
             getBackgroundClass,
             clearStoredSize,
-            showBannerContent,
-            downloadButtonStyles
+            downloadButtonStyles,
+            bgClasses
         };
     }
 });
@@ -329,88 +255,25 @@ export default defineComponent({
 
 <template>
     <div class="cosy:relative cosy:w-full cosy:rounded-2xl cosy:max-w-7xl cosy:mx-auto">
-        <!-- Add size indicator -->
+        <!-- Size indicator -->
         <div v-if="isLoadedFromStorage"
             class="cosy:absolute cosy:top-4 cosy:right-4 cosy:bg-yellow-500/30 cosy:backdrop-blur-sm cosy:px-3 cosy:py-1 cosy:rounded-lg cosy:text-sm cosy:text-white">
             {{ selectedSize.name }}
         </div>
 
         <!-- Download button with dropdown menu -->
-        <div v-if="downloadButtonStyles.show" class="cosy:absolute cosy:top-4 cosy:left-4"
-            :class="downloadButtonStyles.classes">
-            <div class="cosy:relative" data-dropdown>
-                <button
-                    class="cosy:bg-yellow-500/30 cosy:backdrop-blur-sm cosy:p-2 cosy:rounded-lg hover:cosy:bg-yellow-500/40"
-                    @click="toggleDropdown">
-                    <RiDownloadLine class="cosy:w-6 cosy:h-6 cosy:text-white" />
-                </button>
-                <!-- Size selection dropdown -->
-                <div v-if="isDropdownOpen"
-                    class="cosy:absolute cosy:left-0 cosy:mt-2 cosy:w-96 cosy:bg-white dark:cosy:bg-gray-800 cosy:rounded-lg cosy:shadow-lg cosy:py-2 cosy:z-50">
-                    <!-- Component size presets -->
-                    <div class="cosy:px-4 cosy:py-2 cosy:border-b cosy:border-gray-200 dark:cosy:border-gray-700">
-                        <div class="cosy:grid cosy:grid-cols-3 cosy:gap-2">
-                            <button v-for="preset in sizePresets" :key="preset.name" :class="[
-                                'cosy:p-2 cosy:text-left cosy:rounded cosy:text-sm',
-                                selectedSize.name === preset.name
-                                    ? 'cosy:bg-yellow-500/30 cosy:text-yellow-900 dark:cosy:text-yellow-100'
-                                    : 'hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700'
-                            ]" @click="selectedSize = preset">
-                                <div class="cosy:flex cosy:flex-col">
-                                    <span class="cosy:font-medium">{{ preset.name }}</span>
-                                    <span class="cosy:text-xs cosy:text-gray-500 dark:cosy:text-gray-400">
-                                        {{ preset.width.replace('cosy:w-[', '').replace(']', '') }}
-                                    </span>
-                                </div>
-                            </button>
-                            <!-- Clear size button -->
-                            <button
-                                class="cosy:p-2 cosy:text-left cosy:rounded cosy:text-sm hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700"
-                                @click="clearStoredSize">
-                                <div class="cosy:flex cosy:flex-col">
-                                    <span
-                                        class="cosy:font-medium cosy:text-red-600 dark:cosy:text-red-400">清除记住的尺寸</span>
-                                    <span class="cosy:text-xs cosy:text-gray-500 dark:cosy:text-gray-400">重置为默认尺寸</span>
-                                </div>
-                            </button>
-                        </div>
-                    </div>
-                    <!-- Background settings -->
-                    <div class="cosy:px-4 cosy:py-2 cosy:border-b cosy:border-gray-200 dark:cosy:border-gray-700">
-                        <div class="cosy:mt-2">
-                            <div class="cosy:grid cosy:grid-cols-8 cosy:gap-2">
-                                <button v-for="(_, index) in bgClasses" :key="index" :class="[
-                                    bgClasses[index],
-                                    'cosy:w-8 cosy:h-8 cosy:rounded-lg cosy:border-2',
-                                    selectedBgIndex === index ? 'cosy:border-yellow-500' : 'cosy:border-transparent'
-                                ]" @click="selectedBgIndex = index" />
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Size options -->
-                    <div class="cosy:p-4">
-                        <button
-                            class="cosy:w-full cosy:p-2 cosy:text-center cosy:rounded hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700"
-                            @click="downloadAsImage()">
-                            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:gap-2">
-                                <RiDownloadLine class="cosy:w-4 cosy:h-4" />
-                                <span class="cosy:font-medium">下载图片</span>
-                            </div>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <DownloadButton :displayMode="displayMode" :isLoadedFromStorage="isLoadedFromStorage"
+            :selectedSize="selectedSize" :selectedBgIndex="selectedBgIndex" @update:selectedSize="selectedSize = $event"
+            @update:selectedBgIndex="selectedBgIndex = $event" @clear-stored-size="clearStoredSize"
+            @download-image="downloadAsImage" />
 
         <div ref="componentRef" class="cosy:flex cosy:p-8 cosy:rounded-2xl cosy:shadow" :class="[
             getBackgroundClass(),
             selectedSize.width,
             selectedSize.height
         ]">
-            <!-- Smart Banner Content (when banner prop is provided) -->
-            <div v-if="showBannerContent" class="cosy:py-16 cosy:px-8 cosy:text-center cosy:w-full cosy:rounded-2xl"
-                data-type="smart-banner">
-                <h2 class="cosy:text-4xl cosy:mb-4">
+            <div class="cosy:py-16 cosy:px-8 cosy:text-center cosy:w-full cosy:rounded-2xl" data-type="smart-banner">
+                <h2 v-if="title.length > 0" class="cosy:text-4xl cosy:mb-4">
                     {{ title }}
                 </h2>
 
@@ -418,18 +281,16 @@ export default defineComponent({
                     {{ description }}
                 </p>
 
-                <div class="cosy:flex cosy:flex-row cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:w-full cosy:mt-24">
+                <div v-if="features.length > 0"
+                    class="cosy:flex cosy:flex-row cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:w-full cosy:mt-24">
                     <FeatureCard v-for="feature in features" :key="feature.title" :emoji="feature.emoji"
                         :title="feature.title" :link="feature.link" />
                 </div>
 
-                <div class="cosy:mt-12">
-                    <component :is="customComponent" v-if="customComponent" v-bind="customComponentProps" />
+                <div :class="{ 'cosy:mt-12': title.length > 0 || description.length > 0 || features.length > 0 }">
+                    <slot />
                 </div>
             </div>
-
-            <!-- Default slot for custom content (when banner prop is not provided) -->
-            <slot v-if="!showBannerContent" />
         </div>
     </div>
 </template>

package/dist/vue/BannerBox/DownloadButton.vue

@@ -0,0 +1,202 @@
+<!--
+@component DownloadButton
+
+@description
+DownloadButton 组件提供了一个下载按钮，带有可展开的下拉菜单，用于调整尺寸、背景和下载图片。
+
+@usage
+基本用法：
+```vue
+<DownloadButton 
+  :displayMode="'hover'" 
+  :isLoadedFromStorage="true"
+  :selectedSize="selectedSize"
+  :selectedBgIndex="selectedBgIndex"
+  :sizePresets="sizePresets"
+  :bgClasses="bgClasses"
+  @update:selectedSize="selectedSize = $event"
+  @update:selectedBgIndex="selectedBgIndex = $event"
+  @clear-stored-size="clearStoredSize"
+  @download-image="downloadAsImage"
+/>
+```
+
+@props
+@prop {String} [displayMode='hover'] - 下载按钮显示模式：'always'(总是显示),'hover'(悬停显示),'never'(不显示)
+@prop {Boolean} [isLoadedFromStorage=false] - 是否已从存储中加载尺寸
+@prop {Object} [selectedSize] - 当前选中的尺寸预设
+@prop {Number} [selectedBgIndex=0] - 当前选中的背景样式索引
+@prop {Array} [sizePresets] - 尺寸预设列表
+@prop {Array} [bgClasses] - 背景样式类列表
+
+@emits
+@emit update:selectedSize - 当选择新的尺寸预设时触发
+@emit update:selectedBgIndex - 当选择新的背景样式时触发
+@emit clear-stored-size - 当清除存储的尺寸时触发
+@emit download-image - 当请求下载图片时触发
+-->
+
+<script lang="ts">
+import { ref, computed, defineComponent } from 'vue';
+import { RiDownloadLine } from '@remixicon/vue';
+import { bgClasses } from './bgStyles';
+import { sizePresets, type SizePreset } from './sizePresets';
+import '../../style'
+
+export default defineComponent({
+    name: 'DownloadButton',
+    components: {
+        RiDownloadLine
+    },
+    props: {
+        displayMode: {
+            type: String,
+            default: 'hover',
+            validator: (value: string) => ['always', 'hover', 'never'].includes(value)
+        },
+        isLoadedFromStorage: {
+            type: Boolean,
+            default: false
+        },
+        selectedSize: {
+            type: Object as () => SizePreset,
+            required: true
+        },
+        selectedBgIndex: {
+            type: Number,
+            default: 0
+        }
+    },
+    emits: ['update:selectedSize', 'update:selectedBgIndex', 'clear-stored-size', 'download-image'],
+    setup(props, { emit }) {
+        const isDropdownOpen = ref(false);
+
+        const toggleDropdown = () => {
+            isDropdownOpen.value = !isDropdownOpen.value;
+        };
+
+        // 计算下载按钮是否显示及其样式类
+        const downloadButtonStyles = computed(() => {
+            switch (props.displayMode) {
+                case 'always':
+                    return {
+                        show: true,
+                        classes: 'cosy:opacity-100'
+                    };
+                case 'hover':
+                    return {
+                        show: true,
+                        classes: 'cosy:opacity-0 cosy:hover:opacity-100 cosy:transition-opacity'
+                    };
+                case 'never':
+                    return {
+                        show: false,
+                        classes: ''
+                    };
+                default:
+                    return {
+                        show: true,
+                        classes: 'cosy:opacity-0 cosy:hover:opacity-100 cosy:transition-opacity'
+                    };
+            }
+        });
+
+        const selectSize = (size: SizePreset) => {
+            emit('update:selectedSize', size);
+        };
+
+        const selectBackground = (index: number) => {
+            emit('update:selectedBgIndex', index);
+        };
+
+        const clearStoredSize = () => {
+            emit('clear-stored-size');
+            isDropdownOpen.value = false;
+        };
+
+        const downloadImage = () => {
+            emit('download-image');
+            isDropdownOpen.value = false;
+        };
+
+        return {
+            isDropdownOpen,
+            toggleDropdown,
+            downloadButtonStyles,
+            selectSize,
+            selectBackground,
+            clearStoredSize,
+            downloadImage,
+            bgClasses,
+            sizePresets
+        };
+    }
+});
+</script>
+
+<template>
+    <div v-if="downloadButtonStyles.show" class="cosy:absolute cosy:top-4 cosy:left-4"
+        :class="downloadButtonStyles.classes">
+        <div class="cosy:relative" data-dropdown>
+            <button
+                class="cosy:bg-yellow-500/30 cosy:backdrop-blur-sm cosy:p-2 cosy:rounded-lg hover:cosy:bg-yellow-500/40"
+                @click="toggleDropdown">
+                <RiDownloadLine class="cosy:w-6 cosy:h-6 cosy:text-white" />
+            </button>
+            <!-- Size selection dropdown -->
+            <div v-if="isDropdownOpen"
+                class="cosy:absolute cosy:left-0 cosy:mt-2 cosy:w-96 cosy:bg-white dark:cosy:bg-gray-800 cosy:rounded-lg cosy:shadow-lg cosy:py-2 cosy:z-50">
+                <!-- Component size presets -->
+                <div class="cosy:px-4 cosy:py-2 cosy:border-b cosy:border-gray-200 dark:cosy:border-gray-700">
+                    <div class="cosy:grid cosy:grid-cols-3 cosy:gap-2">
+                        <button v-for="preset in sizePresets" :key="preset.name" :class="[
+                            'cosy:p-2 cosy:text-left cosy:rounded cosy:text-sm',
+                            selectedSize.name === preset.name
+                                ? 'cosy:bg-yellow-500/30 cosy:text-yellow-900 dark:cosy:text-yellow-100'
+                                : 'hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700'
+                        ]" @click="selectSize(preset)">
+                            <div class="cosy:flex cosy:flex-col">
+                                <span class="cosy:font-medium">{{ preset.name }}</span>
+                                <span class="cosy:text-xs cosy:text-gray-500 dark:cosy:text-gray-400">
+                                    {{ preset.width.replace('cosy:w-[', '').replace(']', '') }}
+                                </span>
+                            </div>
+                        </button>
+                        <!-- Clear size button -->
+                        <button
+                            class="cosy:p-2 cosy:text-left cosy:rounded cosy:text-sm hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700"
+                            @click="clearStoredSize">
+                            <div class="cosy:flex cosy:flex-col">
+                                <span class="cosy:font-medium cosy:text-red-600 dark:cosy:text-red-400">清除记住的尺寸</span>
+                                <span class="cosy:text-xs cosy:text-gray-500 dark:cosy:text-gray-400">重置为默认尺寸</span>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+                <!-- Background settings -->
+                <div class="cosy:px-4 cosy:py-2 cosy:border-b cosy:border-gray-200 dark:cosy:border-gray-700">
+                    <div class="cosy:mt-2">
+                        <div class="cosy:grid cosy:grid-cols-8 cosy:gap-2">
+                            <button v-for="(className, index) in bgClasses" :key="index" :class="[
+                                className,
+                                'cosy:w-8 cosy:h-8 cosy:rounded-lg cosy:border-2',
+                                selectedBgIndex === index ? 'cosy:border-yellow-500' : 'cosy:border-transparent'
+                            ]" @click="selectBackground(index)" />
+                        </div>
+                    </div>
+                </div>
+                <!-- Size options -->
+                <div class="cosy:p-4">
+                    <button
+                        class="cosy:w-full cosy:p-2 cosy:text-center cosy:rounded hover:cosy:bg-gray-100 dark:hover:cosy:bg-gray-700"
+                        @click="downloadImage">
+                        <div class="cosy:flex cosy:items-center cosy:justify-center cosy:gap-2">
+                            <RiDownloadLine class="cosy:w-4 cosy:h-4" />
+                            <span class="cosy:font-medium">下载图片</span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/dist/vue/BannerBox/ExampleDisplayModeAlways.vue

@@ -0,0 +1,34 @@
+<!--
+@component BannerBox.DisplayModeAlways
+
+@description
+BannerBox 组件的"总是显示下载按钮"模式示例。
+
+@usage
+```vue
+<BannerBoxExamples.DisplayModeAlways />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { defineComponent } from 'vue'
+import BannerBox from './BannerBox.vue'
+
+export default defineComponent({
+    name: 'BannerBoxDisplayModeAlwaysExample',
+    components: {
+        BannerBox
+    }
+})
+</script>
+
+<template>
+    <div>
+        <BannerBox displayMode="always" :backgroundClassIndex="1">
+            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[150px]">
+                <p>下载按钮始终可见</p>
+            </div>
+        </BannerBox>
+    </div>
+</template>

package/dist/vue/BannerBox/ExampleDisplayModeHover.vue

@@ -0,0 +1,34 @@
+<!--
+@component BannerBox.DisplayModeHover
+
+@description
+BannerBox 组件的"悬停时显示下载按钮"模式示例，这是默认行为。
+
+@usage
+```vue
+<BannerBoxExamples.DisplayModeHover />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { defineComponent } from 'vue'
+import BannerBox from './BannerBox.vue'
+
+export default defineComponent({
+    name: 'BannerBoxDisplayModeHoverExample',
+    components: {
+        BannerBox
+    }
+})
+</script>
+
+<template>
+    <div>
+        <BannerBox displayMode="hover" :backgroundClassIndex="2">
+            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[150px]">
+                <p>鼠标悬停时显示下载按钮</p>
+            </div>
+        </BannerBox>
+    </div>
+</template>

package/dist/vue/BannerBox/ExampleDisplayModeNever.vue

@@ -0,0 +1,34 @@
+<!--
+@component BannerBox.DisplayModeNever
+
+@description
+BannerBox 组件的"不显示下载按钮"模式示例。
+
+@usage
+```vue
+<BannerBoxExamples.DisplayModeNever />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { defineComponent } from 'vue'
+import BannerBox from './BannerBox.vue'
+
+export default defineComponent({
+    name: 'BannerBoxDisplayModeNeverExample',
+    components: {
+        BannerBox
+    }
+})
+</script>
+
+<template>
+    <div>
+        <BannerBox displayMode="never" :backgroundClassIndex="3">
+            <div class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[150px]">
+                <p>不显示下载按钮</p>
+            </div>
+        </BannerBox>
+    </div>
+</template>

package/dist/vue/BannerBox/FeatureCard.vue

@@ -1,30 +1,3 @@
-<template>
-    <component :is="link ? 'a' : 'div'" :href="link || undefined" :target="link ? '_blank' : undefined"
-        :rel="link ? 'noopener noreferrer' : undefined" :class="[
-            'card bg-base-100/10 backdrop-blur-lg p-8 transition-all duration-300 hover:-translate-y-1 shadow-lg',
-            {
-                'hover:bg-primary/15 cursor-pointer': link,
-                'cursor-default': !link
-            }
-        ]">
-        <div class="card-body p-0">
-            <div class="mb-4">
-                <component :is="icon" v-if="icon" class="text-4xl text-base-content" />
-                <component :is="getPresetIcon" v-else-if="presetIcon" class="text-4xl text-base-content" />
-                <div v-else class="text-4xl text-base-content">
-                    {{ emoji }}
-                </div>
-            </div>
-            <h3 class="card-title text-lg font-medium text-base-content">
-                {{ title }}
-            </h3>
-            <p v-if="description" class="text-base-content/70">
-                {{ description }}
-            </p>
-        </div>
-    </component>
-</template>
-
 <script setup lang="ts">
 import { computed, type Component } from 'vue';
 import {
@@ -187,4 +160,31 @@ const getPresetIcon = computed(() => {
     if (!props.presetIcon) return null;
     return presetIcons[props.presetIcon];
 });
-</script>
+</script>
+
+<template>
+    <component :is="link ? 'a' : 'div'" :href="link || undefined" :target="link ? '_blank' : undefined"
+        :rel="link ? 'noopener noreferrer' : undefined" :class="[
+            'cosy:card cosy:no-underline cosy:bg-base-100/10 cosy:backdrop-blur-lg cosy:p-8 cosy:transition-all cosy:duration-300 cosy:hover:-translate-y-1 cosy:shadow-lg',
+            {
+                'cosy:hover:bg-primary/15 cosy:cursor-pointer': link,
+                'cosy:cursor-default': !link
+            }
+        ]">
+        <div class="card-body cosy:p-0">
+            <div class="cosy:mb-4">
+                <component :is="icon" v-if="icon" class="cosy:text-4xl cosy:text-base-content" />
+                <component :is="getPresetIcon" v-else-if="presetIcon" class="cosy:text-4xl cosy:text-base-content" />
+                <div v-else class="cosy:text-4xl cosy:text-base-content">
+                    {{ emoji }}
+                </div>
+            </div>
+            <h3 class="card-title cosy:text-lg cosy:font-medium cosy:text-base-content">
+                {{ title }}
+            </h3>
+            <p v-if="description" class="cosy:text-base-content/70">
+                {{ description }}
+            </p>
+        </div>
+    </component>
+</template>