@coffic/cosy-ui 0.6.26 → 0.6.30

package/dist/stack/index.ts

@@ -0,0 +1,11 @@
+import Stack from './Stack.astro';
+import StackBasic from './StackBasic.astro';
+import BasicSourceCode from './StackBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Stack, StackBasic };
+
+// 导出示例源代码
+export const StackExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Stack'),
+};

package/dist/{components/typography → text}/Text.astro

@@ -95,7 +95,7 @@
  * - 确保文本颜色与背景色的对比度符合WCAG标准
  */
 
-import '../../style.ts';
+import '../style.ts';
 
 export interface Props {
 	as?: string;

package/dist/text/TextBasic.astro

@@ -0,0 +1,12 @@
+---
+import Text from './Text.astro';
+---
+
+<Text>这是一段普通文本</Text>
+<Text size="xl" color="primary" weight="bold">超大主色粗体文本</Text>
+<Text size="sm" color="secondary" italic>小号次色斜体文本</Text>
+<Text size="lg" align="center" underline>居中大号带下划线文本</Text>
+<Text size="md" weight="light" color="muted">中号柔和色细体文本</Text>
+<Text truncate style="max-width: 120px; display: block;"
+	>这是一段很长的文本，将会被截断并显示省略号...</Text
+>

package/dist/text/TextSizes.astro

@@ -0,0 +1,11 @@
+---
+import Text from './Text.astro';
+---
+
+<div class="cosy:space-y-4">
+	<Text size="xs">超小号文本 (xs)</Text>
+	<Text size="sm">小号文本 (sm)</Text>
+	<Text size="md">中号文本 (md)</Text>
+	<Text size="lg">大号文本 (lg)</Text>
+	<Text size="xl">超大号文本 (xl)</Text>
+</div>

package/dist/text/index.ts

@@ -0,0 +1,11 @@
+import Text from './Text.astro';
+import TextBasic from './TextBasic.astro';
+import BasicSourceCode from './TextBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Text, TextBasic };
+
+// 导出示例源代码
+export const TextExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Text'),
+};

package/dist/theme-item/ThemeItem.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * @component ThemeItem
+ *
+ * @description
+ * ThemeItem 组件用于主题切换菜单中的单个主题项。
+ * 它基于 Button 组件，提供了主题切换的交互功能。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ThemeItem theme="light" label="浅色主题" />
+ * <ThemeItem theme="dark" label="深色主题" />
+ * ```
+ */
+
+import { Button } from '../index';
+import '../style.ts';
+
+interface Props {
+	/**
+	 * 主题名称
+	 */
+	theme: string;
+	/**
+	 * 显示的标签文本
+	 */
+	label: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { theme, label, class: className = '' } = Astro.props;
+---
+
+<Button
+	variant="ghost"
+	size="sm"
+	block
+	class={`cosy:text-left cosy:justify-start ${className}`}
+	data-set-theme={theme}>
+	{label}
+</Button>

package/dist/theme-item/ThemeItemBasic.astro

@@ -0,0 +1,10 @@
+---
+import ThemeItem from './ThemeItem.astro';
+---
+
+<div class="cosy:w-48 cosy:space-y-2">
+	<ThemeItem theme="light" label="浅色主题" />
+	<ThemeItem theme="dark" label="深色主题" />
+	<ThemeItem theme="cupcake" label="糖果主题" />
+	<ThemeItem theme="dracula" label="德古拉主题" />
+</div>

package/dist/theme-item/index.ts

@@ -0,0 +1,11 @@
+import ThemeItem from './ThemeItem.astro';
+import ThemeItemBasic from './ThemeItemBasic.astro';
+import BasicSourceCode from './ThemeItemBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { ThemeItem, ThemeItemBasic };
+
+// 导出示例源代码
+export const ThemeItemExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'ThemeItem'),
+};

package/dist/{components/navigation → theme-switcher}/ThemeSwitcher.astro

@@ -25,9 +25,9 @@
  * ```
  */
 
-import Button from '../base/Button.astro';
-import SunCloudyIcon from '../../icons/SunCloudyIcon.astro';
-import '../../style.ts';
+import Button from '../button/Button.astro';
+import SunCloudyIcon from '../icons/SunCloudyIcon.astro';
+import '../style.ts';
 
 interface Props {
 	/**
@@ -75,7 +75,7 @@ const themes = [
 </div>
 
 <script>
-	import { createThemeManager } from '../../utils/theme';
+	import { createThemeManager } from '../utils/theme';
 
 	const themeManager = createThemeManager();
 

package/dist/theme-switcher/ThemeSwitcherBasic.astro

@@ -0,0 +1,7 @@
+---
+import ThemeSwitcher from './ThemeSwitcher.astro';
+---
+
+<div class="cosy:flex cosy:justify-center">
+	<ThemeSwitcher />
+</div>

package/dist/theme-switcher/index.ts

@@ -0,0 +1,11 @@
+import ThemeSwitcher from './ThemeSwitcher.astro';
+import ThemeSwitcherBasic from './ThemeSwitcherBasic.astro';
+import BasicSourceCode from './ThemeSwitcherBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { ThemeSwitcher, ThemeSwitcherBasic };
+
+// 导出示例源代码
+export const ThemeSwitcherExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'ThemeSwitcher'),
+};

package/dist/{components/navigation → toc}/TableOfContents.astro

@@ -53,9 +53,9 @@
  */
 
 // 导入样式
-import '../../style.ts';
-import { createTextGetter } from '../../utils/i18n';
-import { LanguageUtil } from '../../utils/language';
+import '../style.ts';
+import { createTextGetter } from '../utils/i18n';
+import { LanguageUtil } from '../utils/language';
 
 interface Props {
 	/**

package/dist/toc/TableOfContentsBasic.astro

@@ -0,0 +1,25 @@
+---
+import TableOfContents from './TableOfContents.astro';
+---
+
+<div class="cosy:flex cosy:gap-4">
+	<div class="cosy:w-64">
+		<TableOfContents />
+	</div>
+	<div class="cosy:flex-1">
+		<h2 id="introduction">介绍</h2>
+		<p>这是一个示例内容。</p>
+
+		<h2 id="features">功能特点</h2>
+		<p>这里列出了主要功能。</p>
+
+		<h3 id="feature-1">功能 1</h3>
+		<p>功能 1 的详细说明。</p>
+
+		<h3 id="feature-2">功能 2</h3>
+		<p>功能 2 的详细说明。</p>
+
+		<h2 id="conclusion">总结</h2>
+		<p>这是总结部分。</p>
+	</div>
+</div>

package/dist/toc/index.ts

@@ -0,0 +1,11 @@
+import TableOfContents from './TableOfContents.astro';
+import TableOfContentsBasic from './TableOfContentsBasic.astro';
+import BasicSourceCode from './TableOfContentsBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { TableOfContents, TableOfContentsBasic };
+
+// 导出示例源代码
+export const TableOfContentsExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'TableOfContents'),
+};

package/dist/types/image.ts

@@ -0,0 +1,16 @@
+/**
+ * 图片元数据接口
+ * 用于统一管理项目中的图片元数据类型
+ */
+export interface ImageMetadata {
+	src: string;
+	width: number;
+	height: number;
+	format: string;
+}
+
+/**
+ * 图片源类型
+ * 可以是 ImageMetadata 对象或字符串 URL
+ */
+export type ImageSource = ImageMetadata | string;

package/dist/types/menu.ts

@@ -0,0 +1,24 @@
+/**
+ * 菜单项接口
+ */
+export interface IMenuItem {
+	/**
+	 * 菜单项文本
+	 */
+	text: string;
+
+	/**
+	 * 菜单项链接
+	 */
+	href: string;
+
+	/**
+	 * 菜单项图标
+	 */
+	icon: string;
+
+	/**
+	 * 子菜单项
+	 */
+	items?: IMenuItem[];
+}

package/dist/utils/component.ts

@@ -0,0 +1,39 @@
+// 提取简单示例源代码函数
+export function extractSimpleExample(source: string, name: string): string {
+	// 提取模板部分
+	const templateMatch = source.match(/<template>([\s\S]*)<\/template>/m);
+	const scriptMatch = source.match(/<script[\s\S]*?>([\s\S]*)<\/script>/m);
+
+	if (!templateMatch) {
+		return source;
+	}
+
+	let importSection = `<script setup lang="ts">
+import { ref } from 'vue'
+import { ${name} } from '@cosy/index_vue'
+`;
+
+	// 从源码中提取导入语句（除了组件的导入和app.css）
+	if (scriptMatch && scriptMatch[1]) {
+		const importLines = scriptMatch[1]
+			.split('\n')
+			.filter(
+				(line) => line.includes('import') && !line.includes('../../app.css') && !line.includes(name)
+			);
+
+		if (importLines.length > 0) {
+			importSection += importLines.join('\n') + '\n';
+		}
+	}
+
+	importSection += '</script>\n\n';
+
+	// 提取模板内容，并替换组件路径
+	const templateContent = templateMatch[1]
+		.replace(`./${name}.vue`, name)
+		.replace(`../${name}.vue`, name)
+		.replace(`./${name}.astro`, name)
+		.replace(`../${name}.astro`, name);
+
+	return importSection + '<template>' + templateContent + '</template>';
+}

package/dist/vue/AlertDialog/index.ts

@@ -2,45 +2,7 @@ import Basic from './Basic.vue';
 import Multilang from './Multilang.vue';
 import BasicSource from './Basic.vue?raw';
 import MultilangSource from './Multilang.vue?raw';
-
-// 提取简单示例源代码函数
-function extractSimpleExample(source: string): string {
-	// 提取模板部分
-	const templateMatch = source.match(/<template>([\s\S]*)<\/template>/m);
-	const scriptMatch = source.match(/<script[\s\S]*?>([\s\S]*)<\/script>/m);
-
-	if (!templateMatch) {
-		return source;
-	}
-
-	let importSection = `<script setup lang="ts">
-import { ref } from 'vue'
-import { AlertDialog } from '@cosy/index_vue'
-`;
-
-	// 从源码中提取导入语句（除了组件的导入和app.css）
-	if (scriptMatch && scriptMatch[1]) {
-		const importLines = scriptMatch[1]
-			.split('\n')
-			.filter(
-				(line) =>
-					line.includes('import') &&
-					!line.includes('../../app.css') &&
-					!line.includes('AlertDialog')
-			);
-
-		if (importLines.length > 0) {
-			importSection += importLines.join('\n') + '\n';
-		}
-	}
-
-	importSection += '</script>\n\n';
-
-	// 提取模板内容，并替换组件路径
-	const templateContent = templateMatch[1].replace('../AlertDialog.vue', 'AlertDialog');
-
-	return importSection + '<template>' + templateContent + '</template>';
-}
+import { extractSimpleExample } from '../../utils/component';
 
 // 导出主组件
 export { default as AlertDialog } from './AlertDialog.vue';
@@ -53,6 +15,6 @@ export const AlertDialogExamples = {
 
 // 导出示例源代码
 export const AlertDialogExampleCodes = {
-	Basic: extractSimpleExample(BasicSource),
-	Multilang: extractSimpleExample(MultilangSource),
+	Basic: extractSimpleExample(BasicSource, 'Basic'),
+	Multilang: extractSimpleExample(MultilangSource, 'Multilang'),
 };

package/dist/vue/BannerBox/index.ts

@@ -14,42 +14,7 @@ import DisplayModeNeverSource from './ExampleDisplayModeNever.vue?raw';
 import SmartBannerSource from './SmartBanner.vue?raw';
 import SizePresetSource from './ExampleSizePreset.vue?raw';
 import ImageExportSource from './ExampleImageExport.vue?raw';
-
-// 提取简单示例源代码函数
-function extractSimpleExample(source: string): string {
-	// 提取模板部分
-	const templateMatch = source.match(/<template>([\s\S]*)<\/template>/m);
-	const scriptMatch = source.match(/<script[\s\S]*?>([\s\S]*)<\/script>/m);
-
-	if (!templateMatch) {
-		return source;
-	}
-
-	let importSection = `<script setup>
-import { BannerBox } from 'cosy-ui'
-`;
-
-	// 从源码中提取导入语句（除了组件的导入和app.css）
-	if (scriptMatch && scriptMatch[1]) {
-		const importLines = scriptMatch[1]
-			.split('\n')
-			.filter(
-				(line) =>
-					line.includes('import') && !line.includes('../../app.css') && !line.includes('BannerBox')
-			);
-
-		if (importLines.length > 0) {
-			importSection += importLines.join('\n') + '\n';
-		}
-	}
-
-	importSection += '</script>\n\n';
-
-	// 提取模板内容，并替换组件路径
-	const templateContent = templateMatch[1].replace('../BannerBox.vue', 'BannerBox');
-
-	return importSection + '<template>' + templateContent + '</template>';
-}
+import { extractSimpleExample } from '../../utils/component';
 
 // 获取 BannerBox 和 FeatureCard 组件
 export { default as BannerBox } from './BannerBox.vue';
@@ -72,12 +37,12 @@ export const BannerBoxExamples = {
 
 // 导出示例源代码
 export const BannerBoxExampleCodes = {
-	Basic: extractSimpleExample(BasicSource),
-	CustomBg: extractSimpleExample(CustomBgSource),
-	DisplayModeAlways: extractSimpleExample(DisplayModeAlwaysSource),
-	DisplayModeHover: extractSimpleExample(DisplayModeHoverSource),
-	DisplayModeNever: extractSimpleExample(DisplayModeNeverSource),
-	SmartBanner: extractSimpleExample(SmartBannerSource),
-	SizePreset: extractSimpleExample(SizePresetSource),
-	ImageExport: extractSimpleExample(ImageExportSource),
+	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/BlogList/index.ts

@@ -6,29 +6,7 @@ import BasicSource from './Basic.vue?raw';
 import EmptySource from './Empty.vue?raw';
 import EnglishSource from './English.vue?raw';
 import EmptyEnglishSource from './EmptyEnglish.vue?raw';
-
-// 转换Vue SFC组件为简化的示例代码（只保留template和setup script）
-function extractSimpleExample(source: string): string {
-	// 提取模板部分
-	const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/);
-	const template = templateMatch ? templateMatch[1].trim() : '';
-
-	// 提取script setup部分（去除import部分）
-	const scriptMatch = source.match(/<script setup lang="ts">([\s\S]*?)<\/script>/);
-	let script = '';
-	if (scriptMatch) {
-		// 只保留相关变量定义，去除导入语句
-		script = scriptMatch[1]
-			.replace(/import [^;]+;/g, '')
-			.replace(/import BlogList from '[^']+';/g, "import { BlogList } from 'cosy-ui';")
-			.trim();
-	}
-
-	// 创建简化版本的代码
-	return `<template>${template}</template>
-
-<script setup lang="ts">${script}</script>`;
-}
+import { extractSimpleExample } from '../../utils/component';
 
 // 导出主组件
 export { default as BlogList } from './BlogList.vue';
@@ -44,8 +22,8 @@ export const BlogListExamples = {
 
 // 导出示例组件的源代码（简化版本）
 export const BlogListExampleCodes = {
-	Basic: extractSimpleExample(BasicSource),
-	Empty: extractSimpleExample(EmptySource),
-	English: extractSimpleExample(EnglishSource),
-	EmptyEnglish: extractSimpleExample(EmptyEnglishSource),
+	Basic: extractSimpleExample(BasicSource, 'BlogList'),
+	Empty: extractSimpleExample(EmptySource, 'BlogList'),
+	English: extractSimpleExample(EnglishSource, 'BlogList'),
+	EmptyEnglish: extractSimpleExample(EmptyEnglishSource, 'BlogList'),
 };

package/dist/vue/Buttons/index.ts

@@ -6,29 +6,7 @@ import FeatureBasicSource from './FeatureBasic.vue?raw';
 import FeatureWithTipsSource from './FeatureWithTips.vue?raw';
 import MultipleSource from './Multiple.vue?raw';
 import LinkBasicSource from './LinkBasic.vue?raw';
-
-// 转换Vue SFC组件为简化的示例代码（只保留template和setup script）
-function extractSimpleExample(source: string): string {
-	// 提取模板部分
-	const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/);
-	const template = templateMatch ? templateMatch[1].trim() : '';
-
-	// 提取script setup部分（去除import部分）
-	const scriptMatch = source.match(/<script setup lang="ts">([\s\S]*?)<\/script>/);
-	let script = '';
-	if (scriptMatch) {
-		// 只保留相关变量定义，去除导入语句
-		script = scriptMatch[1]
-			.replace(/import [^;]+;/g, '')
-			.replace(/import (FeatureButton|LinkButton) from '[^']+';/g, "import { $1 } from 'cosy-ui';")
-			.trim();
-	}
-
-	// 创建简化版本的代码
-	return `<template>${template}</template>
-
-<script setup lang="ts">${script}</script>`;
-}
+import { extractSimpleExample } from '../../utils/component';
 
 // 导出组件
 export { default as FeatureButton } from './FeatureButton.vue';
@@ -49,11 +27,11 @@ export const ButtonsExamples = {
 // 导出示例组件的源代码（简化版本）
 export const ButtonsExampleCodes = {
 	FeatureButton: {
-		Basic: extractSimpleExample(FeatureBasicSource),
-		WithTips: extractSimpleExample(FeatureWithTipsSource),
+		Basic: extractSimpleExample(FeatureBasicSource, 'Button'),
+		WithTips: extractSimpleExample(FeatureWithTipsSource, 'Button'),
 	},
 	LinkButton: {
-		Basic: extractSimpleExample(LinkBasicSource),
-		Multiple: extractSimpleExample(MultipleSource),
+		Basic: extractSimpleExample(LinkBasicSource, 'Button'),
+		Multiple: extractSimpleExample(MultipleSource, 'Button'),
 	},
 };

package/dist/vue/ConfirmDialog/index.ts

@@ -2,45 +2,7 @@ import Basic from './Basic.vue';
 import CustomButtons from './CustomButtons.vue';
 import BasicSource from './Basic.vue?raw';
 import CustomButtonsSource from './CustomButtons.vue?raw';
-
-// 提取简单示例源代码函数
-function extractSimpleExample(source: string): string {
-	// 提取模板部分
-	const templateMatch = source.match(/<template>([\s\S]*)<\/template>/m);
-	const scriptMatch = source.match(/<script[\s\S]*?>([\s\S]*)<\/script>/m);
-
-	if (!templateMatch) {
-		return source;
-	}
-
-	let importSection = `<script setup lang="ts">
-import { ref } from 'vue'
-import { ConfirmDialog } from '@cosy/index_vue'
-`;
-
-	// 从源码中提取导入语句（除了组件的导入和app.css）
-	if (scriptMatch && scriptMatch[1]) {
-		const importLines = scriptMatch[1]
-			.split('\n')
-			.filter(
-				(line) =>
-					line.includes('import') &&
-					!line.includes('../../app.css') &&
-					!line.includes('ConfirmDialog')
-			);
-
-		if (importLines.length > 0) {
-			importSection += importLines.join('\n') + '\n';
-		}
-	}
-
-	importSection += '</script>\n\n';
-
-	// 提取模板内容，并替换组件路径
-	const templateContent = templateMatch[1].replace('../ConfirmDialog.vue', 'ConfirmDialog');
-
-	return importSection + '<template>' + templateContent + '</template>';
-}
+import { extractSimpleExample } from '../../utils/component';
 
 // 导出主组件
 export { default as ConfirmDialog } from './ConfirmDialog.vue';
@@ -53,6 +15,6 @@ export const ConfirmDialogExamples = {
 
 // 导出示例源代码
 export const ConfirmDialogExampleCodes = {
-	Basic: extractSimpleExample(BasicSource),
-	CustomButtons: extractSimpleExample(CustomButtonsSource),
+	Basic: extractSimpleExample(BasicSource, 'ConfirmDialog'),
+	CustomButtons: extractSimpleExample(CustomButtonsSource, 'ConfirmDialog'),
 };

package/dist/vue/MacWindow/index.ts

@@ -10,21 +10,7 @@ import WithEventsSource from './WithEvents.vue?raw';
 import WithToolbarSource from './WithToolbar.vue?raw';
 import WithSidebarSource from './WithSidebar.vue?raw';
 import CustomHeightSource from './CustomHeight.vue?raw';
-
-// 转换Vue SFC组件为简化的示例代码（只保留template和setup script）
-function extractSimpleExample(source: string): string {
-	// 提取模板部分
-	const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/);
-	const template = templateMatch ? templateMatch[1].trim() : '';
-
-	// 创建简化版本的代码
-	return `<template>${template}</template>
-
-<script setup>
-import { MacWindow } from 'cosy-ui';
-import { SearchIcon, SettingsIcon, InfoIcon } from 'cosy-ui/icons';
-</script>`;
-}
+import { extractSimpleExample } from '../../utils/component';
 
 // 导出主组件
 export { default as MacWindow } from './MacWindow.vue';
@@ -41,10 +27,10 @@ export const MacWindowExamples = {
 
 // 导出示例组件的源代码（简化版本）
 export const MacWindowExampleCodes = {
-	Basic: extractSimpleExample(BasicSource),
-	WithTabs: extractSimpleExample(WithTabsSource),
-	WithEvents: extractSimpleExample(WithEventsSource),
-	WithToolbar: extractSimpleExample(WithToolbarSource),
-	WithSidebar: extractSimpleExample(WithSidebarSource),
-	CustomHeight: extractSimpleExample(CustomHeightSource),
+	Basic: extractSimpleExample(BasicSource, 'MacWindow'),
+	WithTabs: extractSimpleExample(WithTabsSource, 'MacWindow'),
+	WithEvents: extractSimpleExample(WithEventsSource, 'MacWindow'),
+	WithToolbar: extractSimpleExample(WithToolbarSource, 'MacWindow'),
+	WithSidebar: extractSimpleExample(WithSidebarSource, 'MacWindow'),
+	CustomHeight: extractSimpleExample(CustomHeightSource, 'MacWindow'),
 };

package/dist/vue/SmartHero/index.ts

@@ -4,29 +4,7 @@ import WithCustomContent from './WithCustomContent.vue';
 import BasicSource from './Basic.vue?raw';
 import WithImageSource from './WithImage.vue?raw';
 import WithCustomContentSource from './WithCustomContent.vue?raw';
-
-// 转换Vue SFC组件为简化的示例代码（只保留template和setup script）
-function extractSimpleExample(source: string): string {
-	// 提取模板部分
-	const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/);
-	const template = templateMatch ? templateMatch[1].trim() : '';
-
-	// 提取script setup部分（去除import部分）
-	const scriptMatch = source.match(/<script setup lang="ts">([\s\S]*?)<\/script>/);
-	let script = '';
-	if (scriptMatch) {
-		// 只保留相关变量定义，去除导入语句
-		script = scriptMatch[1]
-			.replace(/import [^;]+;/g, '')
-			.replace(/import SmartHero from '[^']+';/g, "import { SmartHero } from 'cosy-ui';")
-			.trim();
-	}
-
-	// 创建简化版本的代码
-	return `<template>${template}</template>
-
-<script setup lang="ts">${script}</script>`;
-}
+import { extractSimpleExample } from '../../utils/component';
 
 // 导出主组件
 export { default as SmartHero } from './SmartHero.vue';
@@ -40,7 +18,7 @@ export const SmartHeroExamples = {
 
 // 导出示例组件的源代码（简化版本）
 export const SmartHeroExampleCodes = {
-	Basic: extractSimpleExample(BasicSource),
-	WithImage: extractSimpleExample(WithImageSource),
-	WithCustomContent: extractSimpleExample(WithCustomContentSource),
+	Basic: extractSimpleExample(BasicSource, 'SmartHero'),
+	WithImage: extractSimpleExample(WithImageSource, 'SmartHero'),
+	WithCustomContent: extractSimpleExample(WithCustomContentSource, 'SmartHero'),
 };