@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/vue/banner-box-vue/DownloadButton.vue

@@ -0,0 +1,244 @@
+<!--
+@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/banner-box-vue/ExampleBasic.vue

@@ -0,0 +1,34 @@
+<!--
+@component BannerBox.Basic
+
+@description
+BannerBox 组件的基础示例，展示最基本的横幅容器用法。
+
+@usage
+```vue
+<BannerBoxExamples.Basic />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import BannerBox from './BannerBox.vue';
+
+export default defineComponent({
+  name: 'BannerBoxBasicExample',
+  components: {
+    BannerBox,
+  },
+});
+</script>
+
+<template>
+  <BannerBox>
+    <div
+      class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px]"
+    >
+      <h2 class="cosy:text-3xl cosy:font-bold">欢迎使用 BannerBox</h2>
+    </div>
+  </BannerBox>
+</template>

package/dist/vue/banner-box-vue/ExampleCustomBg.vue

@@ -0,0 +1,34 @@
+<!--
+@component BannerBox.CustomBg
+
+@description
+BannerBox 组件的自定义背景示例，展示如何通过 backgroundClassIndex 属性设置背景样式。
+
+@usage
+```vue
+<BannerBoxExamples.CustomBg />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import BannerBox from './BannerBox.vue';
+
+export default defineComponent({
+  name: 'BannerBoxCustomBgExample',
+  components: {
+    BannerBox,
+  },
+});
+</script>
+
+<template>
+  <BannerBox :backgroundClassIndex="5">
+    <div
+      class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px]"
+    >
+      <h2 class="cosy:text-3xl cosy:font-bold">自定义背景颜色</h2>
+    </div>
+  </BannerBox>
+</template>

package/dist/vue/banner-box-vue/ExampleDisplayModeAlways.vue

@@ -0,0 +1,36 @@
+<!--
+@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/banner-box-vue/ExampleDisplayModeHover.vue

@@ -0,0 +1,36 @@
+<!--
+@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/banner-box-vue/ExampleDisplayModeNever.vue

@@ -0,0 +1,36 @@
+<!--
+@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/banner-box-vue/ExampleImageExport.vue

@@ -0,0 +1,42 @@
+<!--
+@component BannerBox.ImageExport
+
+@description
+BannerBox 组件的导出为图片示例，展示如何使用图片导出功能。
+
+@usage
+```vue
+<BannerBoxExamples.ImageExport />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import BannerBox from './BannerBox.vue';
+
+export default defineComponent({
+  name: 'BannerBoxImageExportExample',
+  components: {
+    BannerBox,
+  },
+});
+</script>
+
+<template>
+  <div>
+    <p class="cosy:mb-4">
+      悬停在左上角显示下载按钮，点击可下载当前内容为图片。
+    </p>
+    <BannerBox :backgroundClassIndex="8">
+      <div
+        class="cosy:flex cosy:flex-col cosy:items-center cosy:justify-center cosy:min-h-[200px] cosy:p-8 cosy:text-center"
+      >
+        <h2 class="cosy:text-3xl cosy:font-bold cosy:mb-4">
+          可导出为图片的内容
+        </h2>
+        <p class="cosy:text-lg">适用于创建社交媒体分享图、营销材料等场景</p>
+      </div>
+    </BannerBox>
+  </div>
+</template>

package/dist/vue/banner-box-vue/ExampleSizePreset.vue

@@ -0,0 +1,39 @@
+<!--
+@component BannerBox.SizePreset
+
+@description
+BannerBox 组件的尺寸预设示例，展示如何使用尺寸选择功能。
+
+@usage
+```vue
+<BannerBoxExamples.SizePreset />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import BannerBox from './BannerBox.vue';
+
+export default defineComponent({
+  name: 'BannerBoxSizePresetExample',
+  components: {
+    BannerBox,
+  },
+});
+</script>
+
+<template>
+  <div>
+    <p class="cosy:mb-4">
+      悬停在左上角显示下载按钮，点击可切换尺寸。尺寸会保存在浏览器中。
+    </p>
+    <BannerBox>
+      <div
+        class="cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px]"
+      >
+        <h2 class="cosy:text-3xl cosy:font-bold">点击左上角按钮切换尺寸</h2>
+      </div>
+    </BannerBox>
+  </div>
+</template>

package/dist/vue/banner-box-vue/FeatureCard.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue';
+import {
+  // 开发相关
+  RiGithubFill,
+  RiGitBranchLine,
+  RiTerminalBoxLine,
+  RiCommandLine,
+  RiCodeSSlashLine,
+  RiBracesLine,
+  RiDatabase2Line,
+  RiServerLine,
+  // 文档相关
+  RiBookOpenLine,
+  RiFileTextLine,
+  RiArticleLine,
+  RiDraftLine,
+  RiFileListLine,
+  // 媒体相关
+  RiImage2Line,
+  RiVideoLine,
+  RiMusic2Line,
+  RiPlayCircleLine,
+  RiMovieLine,
+  // 社交相关
+  RiUserLine,
+  RiTeamLine,
+  RiChat1Line,
+  RiMessage2Line,
+  RiShareLine,
+  // 工具相关
+  RiToolsLine,
+  RiSettings4Line,
+  RiDashboardLine,
+  RiAppsLine,
+  RiPlugLine,
+  // 安全相关
+  RiShieldLine,
+  RiLockLine,
+  RiKeyLine,
+  RiUserSettingsLine,
+  // 云服务相关
+  RiCloudLine,
+  RiUploadCloud2Line,
+  RiDownloadCloud2Line,
+  RiCloudOffLine,
+  // 设备相关
+  RiSmartphoneLine,
+  RiTabletLine,
+  RiComputerLine,
+  RiWifiLine,
+  // 数据相关
+  RiPieChartLine,
+  RiLineChartLine,
+  RiBarChartLine,
+  // AI/机器学习相关
+  RiRobot2Line,
+  RiBrainLine,
+  RiCpuLine,
+  // 其他常用
+  RiRocketLine,
+  RiLightbulbLine,
+  RiStarLine,
+  RiHeartLine,
+  RiThumbUpLine,
+} from '@remixicon/vue';
+
+// 预设图标映射
+const presetIcons = {
+  // 开发类
+  github: RiGithubFill,
+  git: RiGitBranchLine,
+  terminal: RiTerminalBoxLine,
+  command: RiCommandLine,
+  code: RiCodeSSlashLine,
+  api: RiBracesLine,
+  database: RiDatabase2Line,
+  server: RiServerLine,
+
+  // 文档类
+  book: RiBookOpenLine,
+  file: RiFileTextLine,
+  article: RiArticleLine,
+  draft: RiDraftLine,
+  list: RiFileListLine,
+
+  // 媒体类
+  image: RiImage2Line,
+  video: RiVideoLine,
+  music: RiMusic2Line,
+  play: RiPlayCircleLine,
+  movie: RiMovieLine,
+
+  // 社交类
+  user: RiUserLine,
+  team: RiTeamLine,
+  chat: RiChat1Line,
+  message: RiMessage2Line,
+  share: RiShareLine,
+
+  // 工具类
+  tools: RiToolsLine,
+  settings: RiSettings4Line,
+  dashboard: RiDashboardLine,
+  apps: RiAppsLine,
+  plugin: RiPlugLine,
+
+  // 安全类
+  shield: RiShieldLine,
+  lock: RiLockLine,
+  key: RiKeyLine,
+  security: RiUserSettingsLine,
+
+  // 云服务类
+  cloud: RiCloudLine,
+  upload: RiUploadCloud2Line,
+  download: RiDownloadCloud2Line,
+  offline: RiCloudOffLine,
+
+  // 设备类
+  mobile: RiSmartphoneLine,
+  tablet: RiTabletLine,
+  computer: RiComputerLine,
+  wifi: RiWifiLine,
+
+  // 数据类
+  chart: RiPieChartLine,
+  line: RiLineChartLine,
+  bar: RiBarChartLine,
+  data: RiDatabase2Line,
+
+  // AI/机器学习类
+  robot: RiRobot2Line,
+  brain: RiBrainLine,
+  cpu: RiCpuLine,
+
+  // 其他常用
+  rocket: RiRocketLine,
+  idea: RiLightbulbLine,
+  star: RiStarLine,
+  heart: RiHeartLine,
+  like: RiThumbUpLine,
+} as const;
+
+type PresetIconType = keyof typeof presetIcons;
+
+interface Props {
+  title: string;
+  description?: string;
+  link?: string;
+  emoji?: string;
+  icon?: Component; // 自定义图标组件
+  presetIcon?: PresetIconType; // 预设图标名称
+}
+
+const props = defineProps<Props>();
+
+// 获取预设图标组件
+const getPresetIcon = computed(() => {
+  if (!props.presetIcon) return null;
+  return presetIcons[props.presetIcon];
+});
+</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>