@coffic/cosy-ui 0.7.4 → 0.8.7

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

@@ -0,0 +1,48 @@
+<!--
+@component BannerBox.SmartBanner
+
+@description
+BannerBox 组件的智能横幅模式示例，展示如何通过 title、description 和 features 属性创建结构化内容。
+
+@usage
+```vue
+<BannerBoxExamples.SmartBanner />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import BannerBox from './BannerBox.vue';
+
+export default defineComponent({
+  name: 'BannerBoxSmartBannerExample',
+  components: {
+    BannerBox,
+  },
+});
+</script>
+
+<template>
+  <BannerBox
+    title="我们的产品特性"
+    description="探索产品提供的所有强大功能"
+    :features="[
+      {
+        emoji: '⚡',
+        title: '快速响应',
+        link: '#speed',
+      },
+      {
+        emoji: '🔒',
+        title: '安全可靠',
+        link: '#security',
+      },
+      {
+        emoji: '🌐',
+        title: '全球支持',
+        link: '#global',
+      },
+    ]"
+  />
+</template>

package/dist/vue/banner-box-vue/bgStyles.ts

@@ -0,0 +1,55 @@
+/**
+ * BannerBox组件的背景样式类列表
+ * 包含多种渐变和纯色背景
+ */
+export 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',
+];

package/dist/vue/banner-box-vue/index.ts

@@ -0,0 +1,48 @@
+import Basic from './ExampleBasic.vue';
+import CustomBg from './ExampleCustomBg.vue';
+import DisplayModeAlways from './ExampleDisplayModeAlways.vue';
+import DisplayModeHover from './ExampleDisplayModeHover.vue';
+import DisplayModeNever from './ExampleDisplayModeNever.vue';
+import SmartBanner from './SmartBanner.vue';
+import SizePreset from './ExampleSizePreset.vue';
+import ImageExport from './ExampleImageExport.vue';
+import BasicSource from './ExampleBasic.vue?raw';
+import CustomBgSource from './ExampleCustomBg.vue?raw';
+import DisplayModeAlwaysSource from './ExampleDisplayModeAlways.vue?raw';
+import DisplayModeHoverSource from './ExampleDisplayModeHover.vue?raw';
+import DisplayModeNeverSource from './ExampleDisplayModeNever.vue?raw';
+import SmartBannerSource from './SmartBanner.vue?raw';
+import SizePresetSource from './ExampleSizePreset.vue?raw';
+import ImageExportSource from './ExampleImageExport.vue?raw';
+import { extractSimpleExample } from '../../utils/component';
+
+// 获取 BannerBox 和 FeatureCard 组件
+export { default as BannerBox } from './BannerBox.vue';
+export { default as FeatureCard } from './FeatureCard.vue';
+export { default as DownloadButton } from './DownloadButton.vue';
+export { bgClasses } from './bgStyles';
+export { sizePresets, type SizePreset } from './sizePresets';
+
+// 导出示例组件
+export const BannerBoxExamples = {
+  Basic,
+  CustomBg,
+  DisplayModeAlways,
+  DisplayModeHover,
+  DisplayModeNever,
+  SmartBanner,
+  SizePreset,
+  ImageExport,
+};
+
+// 导出示例源代码
+export const BannerBoxExampleCodes = {
+  Basic: extractSimpleExample(BasicSource, 'BannerBox'),
+  CustomBg: extractSimpleExample(CustomBgSource, 'BannerBox'),
+  DisplayModeAlways: extractSimpleExample(DisplayModeAlwaysSource, 'BannerBox'),
+  DisplayModeHover: extractSimpleExample(DisplayModeHoverSource, 'BannerBox'),
+  DisplayModeNever: extractSimpleExample(DisplayModeNeverSource, 'BannerBox'),
+  SmartBanner: extractSimpleExample(SmartBannerSource, 'BannerBox'),
+  SizePreset: extractSimpleExample(SizePresetSource, 'BannerBox'),
+  ImageExport: extractSimpleExample(ImageExportSource, 'BannerBox'),
+};

package/dist/vue/banner-box-vue/sizePresets.ts

@@ -0,0 +1,23 @@
+/**
+ * BannerBox组件的尺寸预设列表
+ * 包含各种常用尺寸和比例
+ */
+
+export interface SizePreset {
+  name: string;
+  width: string;
+  height: string;
+}
+
+export const sizePresets: SizePreset[] = [
+  { 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]' },
+];

package/dist/vue/blog-vue/Basic.vue

@@ -0,0 +1,30 @@
+<template>
+  <BlogList :blogs="blogs" lang="zh" />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import { ref } from 'vue';
+import BlogList from './BlogList.vue';
+
+const blogs = ref([
+  {
+    id: '1',
+    title: '如何在Vue 3中使用组合式API',
+    link: '/blog/vue3-composition-api',
+    tags: ['Vue', '前端'],
+  },
+  {
+    id: '2',
+    title: 'TypeScript高级类型技巧',
+    link: '/blog/typescript-advanced-types',
+    tags: ['TypeScript', '编程'],
+  },
+  {
+    id: '3',
+    title: '响应式设计最佳实践',
+    link: '/blog/responsive-design-best-practices',
+    tags: ['CSS', '设计'],
+  },
+]);
+</script>

package/dist/vue/blog-vue/BlogList.vue

@@ -0,0 +1,102 @@
+<!--
+@component BlogList
+
+@description
+BlogList 组件用于展示博客文章列表，支持国际化，提供空状态显示。
+
+@usage
+基本用法：
+```vue
+<BlogList :blogs="blogPosts" lang="zh" />
+```
+
+多语言支持：
+```vue
+<BlogList :blogs="blogPosts" lang="en" />
+```
+
+组合使用：
+```vue
+<template>
+  <BlogList :blogs="blogPosts" :lang="currentLang" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BlogList } from 'cosy-ui';
+
+const blogPosts = ref([
+  { id: '1', title: '文章标题', link: '/blog/post-1', tags: ['技术', 'Vue'] }
+]);
+const currentLang = ref('zh');
+</script>
+```
+
+@props
+@prop {IBlog[]} blogs - 博客文章数组
+@prop {('zh'|'en')} [lang='zh'] - 语言设置，影响空状态显示文本
+-->
+
+<script setup lang="ts">
+import '../../style';
+import InboxArchiveIcon from '../Icons/InboxArchiveIcon.vue';
+import Link from '../SmartLink.vue';
+import ListItem from '../ListItem.vue';
+
+export interface IBlog {
+  id: string;
+  title: string;
+  link: string;
+  tags: string[];
+}
+
+interface Props {
+  blogs: IBlog[];
+  lang?: 'zh' | 'en';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'zh',
+});
+
+// 多语言文本
+const messages = {
+  zh: {
+    empty: '暂无博客文章',
+    checkLater: '稍后再来看看吧',
+  },
+  en: {
+    empty: 'No blog posts yet',
+    checkLater: 'Check back later',
+  },
+};
+
+const t = (key: keyof (typeof messages)['zh']) => {
+  return messages[props.lang][key];
+};
+</script>
+
+<template>
+  <div class="cosy:py-4">
+    <ul v-if="blogs.length > 0" class="cosy:list-none">
+      <ListItem v-for="blog in blogs" :key="blog.id">
+        <Link :href="blog.link">
+          {{ blog.title }}
+        </Link>
+      </ListItem>
+    </ul>
+    <div v-else class="cosy:text-center cosy:py-8">
+      <div
+        class="cosy:flex cosy:flex-col cosy:items-center cosy:text-base-content/50"
+      >
+        <InboxArchiveIcon class="cosy:text-5xl cosy:mb-4 cosy:h-36 cosy:w-36" />
+        <p class="cosy:text-lg">
+          {{ t('empty') }}
+        </p>
+        <p class="cosy:text-sm">
+          {{ t('checkLater') }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/vue/blog-vue/Empty.vue

@@ -0,0 +1,8 @@
+<template>
+  <BlogList :blogs="[]" lang="zh" />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import BlogList from './BlogList.vue';
+</script>

package/dist/vue/blog-vue/EmptyEnglish.vue

@@ -0,0 +1,8 @@
+<template>
+  <BlogList :blogs="[]" lang="en" />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import BlogList from './BlogList.vue';
+</script>

package/dist/vue/blog-vue/English.vue

@@ -0,0 +1,24 @@
+<template>
+  <BlogList :blogs="blogs" lang="en" />
+</template>
+
+<script setup lang="ts">
+import '../../style';
+import { ref } from 'vue';
+import BlogList from './BlogList.vue';
+
+const blogs = ref([
+  {
+    id: '1',
+    title: 'Getting Started with Vue 3 Composition API',
+    link: '/blog/vue3-composition-api',
+    tags: ['Vue', 'Frontend'],
+  },
+  {
+    id: '2',
+    title: 'Advanced TypeScript Type Techniques',
+    link: '/blog/typescript-advanced-types',
+    tags: ['TypeScript', 'Programming'],
+  },
+]);
+</script>

package/dist/vue/blog-vue/index.ts

@@ -0,0 +1,29 @@
+import Basic from './Basic.vue';
+import Empty from './Empty.vue';
+import English from './English.vue';
+import EmptyEnglish from './EmptyEnglish.vue';
+import BasicSource from './Basic.vue?raw';
+import EmptySource from './Empty.vue?raw';
+import EnglishSource from './English.vue?raw';
+import EmptyEnglishSource from './EmptyEnglish.vue?raw';
+import { extractSimpleExample } from '../../utils/component';
+
+// 导出主组件
+export { default as BlogList } from './BlogList.vue';
+export type { IBlog } from './BlogList.vue';
+
+// 将示例组件整合为一个对象导出
+export const BlogListExamples = {
+  Basic,
+  Empty,
+  English,
+  EmptyEnglish,
+};
+
+// 导出示例组件的源代码（简化版本）
+export const BlogListExampleCodes = {
+  Basic: extractSimpleExample(BasicSource, 'BlogList'),
+  Empty: extractSimpleExample(EmptySource, 'BlogList'),
+  English: extractSimpleExample(EnglishSource, 'BlogList'),
+  EmptyEnglish: extractSimpleExample(EmptyEnglishSource, 'BlogList'),
+};

package/dist/vue/buttons-vue/Button.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'ghost'
+    | 'link'
+    | 'outline'
+    | 'neutral';
+  size?: 'lg' | 'md' | 'sm' | 'xs';
+  shape?: 'circle' | 'square';
+  wide?: boolean;
+  block?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  href?: string;
+  target?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  wide: false,
+  block: false,
+  loading: false,
+  disabled: false,
+  type: 'button',
+});
+
+const buttonClasses = computed(() => {
+  const classes = ['cosy:btn'];
+
+  // Variant classes
+  const variantClasses = {
+    primary: 'cosy:btn-primary',
+    secondary: 'cosy:btn-secondary',
+    accent: 'cosy:btn-accent',
+    info: 'cosy:btn-info',
+    success: 'cosy:btn-success',
+    warning: 'cosy:btn-warning',
+    error: 'cosy:btn-error',
+    ghost: 'cosy:btn-ghost',
+    link: 'cosy:btn-link',
+    outline: 'cosy:btn-outline',
+    neutral: 'cosy:btn-neutral',
+  };
+
+  // Size classes
+  const sizeClasses = {
+    lg: 'cosy:btn-lg',
+    md: 'cosy:btn-md',
+    sm: 'cosy:btn-sm',
+    xs: 'cosy:btn-xs',
+  };
+
+  // Shape classes
+  const shapeClasses = {
+    circle: 'cosy:btn-circle',
+    square: 'cosy:btn-square',
+  };
+
+  if (variantClasses[props.variant]) {
+    classes.push(variantClasses[props.variant]);
+  }
+
+  if (sizeClasses[props.size]) {
+    classes.push(sizeClasses[props.size]);
+  }
+
+  if (props.shape && shapeClasses[props.shape]) {
+    classes.push(shapeClasses[props.shape]);
+  }
+
+  if (props.wide) classes.push('cosy:btn-wide');
+  if (props.block) classes.push('cosy:btn-block');
+  if (props.loading) classes.push('cosy:loading');
+
+  return classes;
+});
+</script>
+
+<template>
+  <component
+    :is="props.href ? 'a' : 'button'"
+    :class="buttonClasses"
+    :type="props.href ? undefined : props.type"
+    :disabled="props.disabled"
+    :href="props.href"
+    :target="props.target"
+  >
+    <span class="cosy:flex cosy:items-center cosy:gap-2">
+      <slot name="icon-left" />
+      <slot />
+      <slot name="icon-right" />
+    </span>
+  </component>
+</template>

package/dist/vue/buttons-vue/ButtonBasic.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Button from './Button.vue';
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <Button>默认按钮</Button>
+    <Button variant="primary">主要按钮</Button>
+    <Button variant="secondary">次要按钮</Button>
+  </div>
+</template>

package/dist/vue/buttons-vue/ButtonFeature.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: false,
+    default: 'Feature Button',
+  },
+  size: {
+    type: String,
+    default: 'w-64',
+    validator: (value: string) =>
+      ['w-64', 'w-32', 'w-16', 'w-12', 'w-8'].includes(value),
+  },
+  lang: {
+    type: String,
+    default: 'en',
+    validator: (value: string) => ['en', 'zh'].includes(value),
+  },
+  showTips: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isPopupVisible = ref(false);
+
+const showPopup = () => {
+  if (props.showTips) {
+    isPopupVisible.value = true;
+    setTimeout(hidePopup, 2000); // Auto-hide after 2 seconds
+  }
+};
+
+const hidePopup = () => {
+  isPopupVisible.value = false;
+};
+</script>
+<template>
+  <div>
+    <!-- Button with hover effects -->
+    <button
+      :class="[
+        'cosy:bg-cyan-500/20 cosy:text-cyan-500 cosy:border-cyan-500 cosy:border-2 cosy:hover:bg-cyan-500/30 cosy:hover:text-white cosy:hover:border-cyan-500/30 cosy:hover:scale-105 cosy:transition-all cosy:duration-300 cosy:rounded-2xl cosy:text-center cosy:backdrop-blur-lg cosy:text-2xl',
+        props.size,
+      ]"
+      @click="showPopup"
+    >
+      <slot />
+      {{ props.title }}
+    </button>
+
+    <!-- Popup message -->
+    <Transition name="fade">
+      <div
+        v-if="isPopupVisible"
+        class="cosy:fixed cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center cosy:z-50"
+        @click="hidePopup"
+      >
+        <div
+          class="cosy:bg-black/80 cosy:backdrop-blur-sm cosy:p-6 cosy:rounded-xl cosy:text-white cosy:animate-popup"
+        >
+          {{
+            lang === 'zh'
+              ? '这是展示图，不支持操作'
+              : 'This is a preview image, no operation is supported'
+          }}
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.animate-popup {
+  animation: popup 0.3s ease-out;
+}
+
+@keyframes popup {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/dist/vue/buttons-vue/ButtonFeatureBasic.vue

@@ -0,0 +1,8 @@
+<template>
+  <FeatureButton title="特性按钮" />
+</template>
+
+<script setup lang="ts">
+import '../../astro/src/style';
+import FeatureButton from './ButtonFeature.vue';
+</script>

package/dist/vue/buttons-vue/ButtonFeatureWithTips.vue

@@ -0,0 +1,7 @@
+<template>
+  <FeatureButton title="带提示特性" showTips />
+</template>
+
+<script setup lang="ts">
+import FeatureButton from './ButtonFeature.vue';
+</script>

package/dist/vue/buttons-vue/ButtonLink.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import VueButton from './Button.vue';
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <VueButton href="#" variant="primary">内部链接</VueButton>
+    <VueButton href="https://example.com" target="_blank" variant="primary">
+      外部链接
+      <template #icon-right>↗</template>
+    </VueButton>
+  </div>
+</template>

package/dist/vue/buttons-vue/ButtonSizes.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import VueButton from './Button.vue';
+</script>
+
+<template>
+  <div class="cosy:flex cosy:items-center cosy:gap-2">
+    <VueButton size="xs">超小按钮</VueButton>
+    <VueButton size="sm">小型按钮</VueButton>
+    <VueButton size="md">中等按钮</VueButton>
+    <VueButton size="lg">大型按钮</VueButton>
+  </div>
+</template>

package/dist/vue/buttons-vue/ButtonVariants.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import VueButton from './Button.vue';
+</script>
+
+<template>
+  <div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+    <VueButton variant="info">信息按钮</VueButton>
+    <VueButton variant="success">成功按钮</VueButton>
+    <VueButton variant="warning">警告按钮</VueButton>
+    <VueButton variant="error">错误按钮</VueButton>
+    <VueButton variant="ghost">幽灵按钮</VueButton>
+    <VueButton variant="link">链接按钮</VueButton>
+    <VueButton variant="outline">描边按钮</VueButton>
+    <VueButton variant="neutral">中性按钮</VueButton>
+  </div>
+</template>