@coffic/cosy-ui 0.7.2 → 0.7.4

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

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

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

@@ -0,0 +1,190 @@
+<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>

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

@@ -0,0 +1,44 @@
+<!--
+@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/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/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/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/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/blog-vue/BlogList.vue

@@ -0,0 +1,100 @@
+<!--
+@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/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/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/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/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'),
+};