@_tc/template-core 0.2.1-bate.1 → 0.2.2

package/README.md

@@ -2,6 +2,8 @@
 
 TemplateCore 是一个基于 TypeScript、Koa、React 的后台框架包。它把后端约定式加载、前端 Dashboard、Schema CRUD 页面、model 类型和类型扩展放到同一个 npm 包里，项目只需要按目录补充自己的 `app/`、`model/`、`frontend/`。
 
+组件预览地址：https://t-c-s-p.allomg.qzz.io/ui-components
+
 ## 安装
 
 ```bash
@@ -465,6 +467,38 @@ setLanguage('ja-JP')
 
 `addLanguageResources()` 用于追加或新增某个语种的文案，默认会深合并同语种资源；传 `{ merge: false }` 可以替换该语种资源。`setResources(resources, { merge: true })` 可批量合并多语种资源。`LanguageSwitch` 默认会把已注册语种加入选项；需要自定义展示文案时仍可传入 `options`。
 
+**覆盖组件内置文案**：
+
+UI 组件库内置文案也在同一份资源里，统一放在 `components` 命名空间下。项目侧可以覆盖已有文案，也可以给新增语种补齐组件文案：
+
+```ts
+import { addLanguageResources } from '@_tc/template-core/fe'
+
+addLanguageResources('zh-CN', {
+  components: {
+    date: {
+      placeholder: '选择日期',
+      placeholderRange: '选择日期区间',
+      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
+      monthFormat: 'yyyy年 M月',
+    },
+    tableSearch: {
+      search: '筛选',
+      reset: '清空',
+    },
+  },
+})
+```
+
+Date 组件除了文案，还依赖 `date-fns` locale 做月份格式化和周起止计算。新增非内置语种时同步注册：
+
+```ts
+import { registerDateFnsLocale } from '@_tc/template-core/fe/rc/components/Date'
+import { ja } from 'date-fns/locale'
+
+registerDateFnsLocale('ja-JP', ja)
+```
+
 React 组件 render 中使用 `useText()` 读取文案。它会订阅语言和资源变化，调用 `setLanguage()` 后组件会自动重渲染。
 
 `useText()` / `getText()` 遇到 `$i18n::` 前缀会先去掉前缀再查语言资源；没有前缀时会直接把传入字符串作为 key 查询，查不到才原样返回：

package/fe/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/fe/packages/react/ui/components/Date/Calendar.js

@@ -1,5 +1,3 @@
-import { useI18nStore } from "../../i18n/useI18n.js";
-import "../../i18n/index.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../Button/Button.js";
 import "../Button/index.js";
@@ -10,16 +8,14 @@ import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 import { addMonths, addYears, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek, subDays, subMonths, subYears } from "date-fns";
-import { enUS, zhCN } from "date-fns/locale";
 //#region packages/react/ui/components/Date/Calendar.tsx
 function Calendar({ mode = ModeType.Single, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges }) {
-	const language = useI18nStore((state) => state.language);
 	const contextLocale = useDateLocale();
 	const locale = useMemo(() => ({
 		...contextLocale,
 		...customLocale
 	}), [contextLocale, customLocale]);
-	const dateFnsLocale = language === "zh-CN" ? zhCN : enUS;
+	const dateFnsLocale = locale.dateFnsLocale;
 	const [pendingValue, setPendingValue] = useState(value ?? null);
 	const [currentMonth, setCurrentMonth] = useState(() => {
 		if (value instanceof Date) return value;

package/fe/packages/react/ui/components/Date/DateTestPage.js

@@ -1,339 +1,23 @@
-import { DatePicker } from "./Date.js";
-import { useState } from "react";
+import { DemoSection } from "../testPage/DemoSection.js";
+import { dateDemos } from "../testPage/demoRegistry.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { startOfDay } from "date-fns";
 //#region packages/react/ui/components/Date/DateTestPage.tsx
 function DateTestPage() {
-	const [date1, setDate1] = useState();
-	const [dateTime1, setDateTime1] = useState();
-	const [range, setRange] = useState();
-	const [rangeWithTime, setRangeWithTime] = useState();
-	const [emptyRange, setEmptyRange] = useState();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "p-8 max-w-6xl mx-auto space-y-8",
-		children: [
-			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
-				className: "text-3xl font-bold mb-2",
-				children: "Date 组件使用示例"
-			}), /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground",
-				children: "展示 DatePicker 组件的各种使用场景"
-			})] }),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: "1. 基本用法"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "单日期选择"
-					}), /* @__PURE__ */ jsx(DatePicker, { placeholder: "请选择日期" })] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "禁用清除按钮"
-					}), /* @__PURE__ */ jsx(DatePicker, {
-						placeholder: "请选择日期",
-						allowClear: false
-					})] })]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4",
-				children: [
-					/* @__PURE__ */ jsx("h2", {
-						className: "text-xl font-semibold",
-						children: "2. 日期时间选择器 (showTime)"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground",
-						children: "时间选择器显示在日历右侧，提供更好的用户体验"
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "grid grid-cols-2 gap-8",
-						children: [/* @__PURE__ */ jsxs("div", { children: [
-							/* @__PURE__ */ jsx("h3", {
-								className: "text-sm font-medium mb-2",
-								children: "基本用法 - 单日期时间"
-							}),
-							/* @__PURE__ */ jsx(DatePicker, {
-								showTime: true,
-								placeholder: "请选择日期时间"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-xs text-muted-foreground mt-2",
-								children: "点击输入框打开选择器，时间选择器在右侧显示"
-							})
-						] }), /* @__PURE__ */ jsxs("div", { children: [
-							/* @__PURE__ */ jsx("h3", {
-								className: "text-sm font-medium mb-2",
-								children: "受控模式"
-							}),
-							/* @__PURE__ */ jsx(DatePicker, {
-								showTime: true,
-								value: dateTime1,
-								onChange: (val, date) => {
-									setDateTime1(val);
-									console.log("选中日期时间:", val);
-									console.log("Date 对象:", date);
-								},
-								placeholder: "受控日期时间选择器"
-							}),
-							/* @__PURE__ */ jsxs("p", {
-								className: "text-sm text-muted-foreground mt-2",
-								children: ["选中的值: ", /* @__PURE__ */ jsx("code", {
-									className: "text-xs bg-muted px-1 py-0.5 rounded",
-									children: String(dateTime1 || "未选择")
-								})]
-							})
-						] })]
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: "3. 范围选择 (Range Picker)"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 gap-8",
-					children: [/* @__PURE__ */ jsxs("div", { children: [
-						/* @__PURE__ */ jsx("h3", {
-							className: "text-sm font-medium mb-2",
-							children: "基本范围选择"
-						}),
-						/* @__PURE__ */ jsx(DatePicker, {
-							mode: "range",
-							value: emptyRange,
-							onChange: (val) => {
-								setEmptyRange(val);
-								console.log("范围选择:", val);
-							},
-							placeholder: "选择日期范围"
-						}),
-						/* @__PURE__ */ jsxs("p", {
-							className: "text-sm text-muted-foreground mt-2",
-							children: ["值: ", /* @__PURE__ */ jsx("code", {
-								className: "text-xs bg-muted px-1 py-0.5 rounded",
-								children: JSON.stringify(emptyRange || "未选择")
-							})]
-						})
-					] }), /* @__PURE__ */ jsxs("div", { children: [
-						/* @__PURE__ */ jsx("h3", {
-							className: "text-sm font-medium mb-2",
-							children: "范围选择 + 时间选择"
-						}),
-						/* @__PURE__ */ jsx(DatePicker, {
-							mode: "range",
-							value: rangeWithTime,
-							showTime: true,
-							onChange: (val) => {
-								setRangeWithTime(val);
-								console.log("范围时间选择:", val);
-							},
-							placeholder: "选择日期时间范围"
-						}),
-						/* @__PURE__ */ jsxs("p", {
-							className: "text-sm text-muted-foreground mt-2",
-							children: [
-								"值:",
-								" ",
-								/* @__PURE__ */ jsx("code", {
-									className: "text-xs bg-muted px-1 py-0.5 rounded",
-									children: JSON.stringify(rangeWithTime || "未选择")
-								})
-							]
-						}),
-						/* @__PURE__ */ jsx("p", {
-							className: "text-xs text-muted-foreground mt-1",
-							children: "选择开始日期后，右侧会显示开始时间选择器；选择结束日期后，会显示结束时间选择器"
-						})
-					] })]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: "4. 受控模式"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ jsxs("div", { children: [
-						/* @__PURE__ */ jsx("p", {
-							className: "text-sm text-muted-foreground mb-2",
-							children: "单日期受控"
-						}),
-						/* @__PURE__ */ jsx(DatePicker, {
-							value: date1,
-							onChange: (date, dateString) => {
-								setDate1(date);
-								console.log("选中日期:", date);
-								console.log("日期字符串:", dateString);
-							},
-							placeholder: "受控日期选择器"
-						}),
-						/* @__PURE__ */ jsxs("p", {
-							className: "text-sm text-muted-foreground mt-2",
-							children: ["选中的日期: ", /* @__PURE__ */ jsx("code", {
-								className: "text-xs bg-muted px-1 py-0.5 rounded",
-								children: String(date1 || "未选择")
-							})]
-						})
-					] }), /* @__PURE__ */ jsxs("div", { children: [
-						/* @__PURE__ */ jsx("p", {
-							className: "text-sm text-muted-foreground mb-2",
-							children: "范围受控"
-						}),
-						/* @__PURE__ */ jsx(DatePicker, {
-							mode: "range",
-							value: range,
-							onChange: (val) => {
-								setRange(val);
-								console.log("范围变化:", val);
-							},
-							placeholder: "受控范围选择器"
-						}),
-						/* @__PURE__ */ jsxs("p", {
-							className: "text-sm text-muted-foreground mt-2",
-							children: ["值: ", /* @__PURE__ */ jsx("code", {
-								className: "text-xs bg-muted px-1 py-0.5 rounded",
-								children: JSON.stringify(range || "未选择")
-							})]
-						})
-					] })]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: "5. 禁用日期"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "只能选择今天及以后"
-					}), /* @__PURE__ */ jsx(DatePicker, {
-						disabledDate: (current) => current < startOfDay(/* @__PURE__ */ new Date()),
-						placeholder: "选择未来日期"
-					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "范围选择（禁用过去）"
-					}), /* @__PURE__ */ jsx(DatePicker, {
-						mode: "range",
-						disabledDate: (current) => current < startOfDay(/* @__PURE__ */ new Date()),
-						placeholder: "选择未来范围"
-					})] })]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: "6. 禁用状态"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "禁用状态"
-					}), /* @__PURE__ */ jsx(DatePicker, {
-						disabled: true,
-						placeholder: "禁用状态"
-					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "禁用状态 + 有值"
-					}), /* @__PURE__ */ jsx(DatePicker, {
-						disabled: true,
-						value: "2024-01-15",
-						placeholder: "禁用状态"
-					})] })]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: "7. 自定义格式"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "自定义日期格式"
-					}), /* @__PURE__ */ jsx(DatePicker, {
-						format: "yyyy/MM/dd",
-						placeholder: "选择日期 (yyyy/MM/dd)"
-					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-2",
-						children: "自定义日期时间格式"
-					}), /* @__PURE__ */ jsx(DatePicker, {
-						showTime: true,
-						format: "yyyy-MM-dd HH:mm:ss",
-						placeholder: "选择日期时间 (yyyy-MM-dd HH:mm:ss)"
-					})] })]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				className: "space-y-4 border-t pt-6",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: "API 说明"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "bg-muted/50 p-4 rounded-lg space-y-2 text-sm",
-					children: [
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
-							className: "font-semibold",
-							children: "showTime"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground ml-2",
-							children: ": boolean - 是否显示时间选择器，时间选择器会显示在日历右侧"
-						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
-							className: "font-semibold",
-							children: "mode"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground ml-2",
-							children: ": 'single' | 'range' - 选择模式，single 为单日期，range 为日期范围"
-						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
-							className: "font-semibold",
-							children: "value"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground ml-2",
-							children: ": string | [string, string] - 受控模式的值"
-						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
-							className: "font-semibold",
-							children: "onChange"
-						}), /* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground ml-2",
-							children: [
-								": (value?: DateChangeStrValue, date?: Date | DateRange) =",
-								">",
-								" void - 值变化回调"
-							]
-						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
-							className: "font-semibold",
-							children: "format"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground ml-2",
-							children: ": string - 日期格式，默认 'yyyy-MM-dd'，showTime 时为 'yyyy-MM-dd HH:mm'"
-						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
-							className: "font-semibold",
-							children: "disabledDate"
-						}), /* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground ml-2",
-							children: [
-								": (current: Date) =",
-								">",
-								" boolean - 禁用日期的判断函数"
-							]
-						})] })
-					]
-				})]
-			})
-		]
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-3xl font-bold mb-2",
+			children: "Date 组件使用示例"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "展示 DatePicker 组件的各种使用场景"
+		})] }), dateDemos.map(({ id, Component, meta, source }) => /* @__PURE__ */ jsx(DemoSection, {
+			title: meta.title,
+			description: meta.description,
+			source,
+			contentClassName: meta.contentClassName,
+			children: /* @__PURE__ */ jsx(Component, {})
+		}, id))]
 	});
 }
 //#endregion

package/fe/packages/react/ui/components/Date/LocaleContext.d.ts

@@ -1,6 +1,7 @@
 import { type DateLocaleConfig } from "./locales";
 export declare const DateLocaleContext: import("react").Context<Partial<DateLocaleConfig> | undefined>;
 export declare const useDateLocale: () => {
+    dateFnsLocale?: import("date-fns").Locale;
     placeholder: string;
     placeholderDateTime: string;
     placeholderRange: string;

package/fe/packages/react/ui/components/Date/index.js

@@ -1,6 +1,6 @@
-import { defaultLocale, enUSLocale, getDateLocale, zhCNLocale } from "./locales.js";
+import { defaultLocale, enUSLocale, getDateFnsLocale, getDateLocale, registerDateFnsLocale, registerDateFnsLocales, zhCNLocale } from "./locales.js";
 import { useDateLocaleStore } from "./dateLocaleStore.js";
 import { useDateLocale } from "./LocaleContext.js";
 import { DatePicker } from "./Date.js";
 import { DateLocaleProvider } from "./LocaleProvider.js";
-export { DateLocaleProvider, DatePicker, defaultLocale, enUSLocale, getDateLocale, useDateLocale, useDateLocaleStore, zhCNLocale };
+export { DateLocaleProvider, DatePicker, defaultLocale, enUSLocale, getDateFnsLocale, getDateLocale, registerDateFnsLocale, registerDateFnsLocales, useDateLocale, useDateLocaleStore, zhCNLocale };

package/fe/packages/react/ui/components/Date/locales.d.ts

@@ -1,5 +1,7 @@
 import type { I18nTranslateState } from "../../../../common/i18n/index";
+import type { Locale as DateFnsLocale } from "date-fns";
 export interface DateLocaleConfig {
+    dateFnsLocale?: DateFnsLocale;
     placeholder: string;
     placeholderDateTime: string;
     placeholderRange: string;
@@ -19,6 +21,9 @@ export interface DateLocaleConfig {
     quickRangeLastYear: string;
     clear: string;
 }
+export declare const registerDateFnsLocale: (language: string, locale: DateFnsLocale) => void;
+export declare const registerDateFnsLocales: (locales: Record<string, DateFnsLocale>) => void;
+export declare const getDateFnsLocale: (language: string, fallbackLanguage?: string) => DateFnsLocale;
 export declare const getDateLocale: (state: I18nTranslateState) => DateLocaleConfig;
 export declare const zhCNLocale: DateLocaleConfig;
 export declare const enUSLocale: DateLocaleConfig;

package/fe/packages/react/ui/components/Date/locales.js

@@ -1,6 +1,21 @@
 import { i18nStore, translate } from "../../../../common/i18n/index.js";
+import { enUS, zhCN } from "date-fns/locale";
 //#region packages/react/ui/components/Date/locales.ts
+var dateFnsLocaleMap = {
+	"zh-CN": zhCN,
+	"en-US": enUS
+};
+var registerDateFnsLocale = (language, locale) => {
+	dateFnsLocaleMap[language] = locale;
+};
+var registerDateFnsLocales = (locales) => {
+	Object.assign(dateFnsLocaleMap, locales);
+};
+var getDateFnsLocale = (language, fallbackLanguage) => {
+	return dateFnsLocaleMap[language] ?? (fallbackLanguage ? dateFnsLocaleMap[fallbackLanguage] : void 0) ?? zhCN;
+};
 var getDateLocale = (state) => ({
+	dateFnsLocale: getDateFnsLocale(state.language, state.fallbackLanguage),
 	placeholder: translate(state, "components.date.placeholder"),
 	placeholderDateTime: translate(state, "components.date.placeholderDateTime"),
 	placeholderRange: translate(state, "components.date.placeholderRange"),
@@ -38,4 +53,4 @@ var enUSLocale = { ...getDateLocaleByLanguage("en-US") };
 */
 var defaultLocale = zhCNLocale;
 //#endregion
-export { defaultLocale, enUSLocale, getDateLocale, zhCNLocale };
+export { defaultLocale, enUSLocale, getDateFnsLocale, getDateLocale, registerDateFnsLocale, registerDateFnsLocales, zhCNLocale };

package/fe/packages/react/ui/components/testPage/DemoSection.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+type DemoSectionProps = {
+    title: string;
+    description?: string;
+    source?: string;
+    children: ReactNode;
+    contentClassName?: string;
+};
+export declare function DemoSection({ title, description, source, children, contentClassName }: DemoSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/fe/packages/react/ui/components/testPage/DemoSection.js

@@ -0,0 +1,73 @@
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Code2, Copy, Eye } from "lucide-react";
+//#region packages/react/ui/components/testPage/DemoSection.tsx
+function DemoSection({ title, description, source, children, contentClassName }) {
+	const [showSource, setShowSource] = useState(false);
+	const [copyStatus, setCopyStatus] = useState("idle");
+	const timerRef = useRef(void 0);
+	const sourceText = source?.trim();
+	const resetCopyStatus = (nextStatus) => {
+		setCopyStatus(nextStatus);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setCopyStatus("idle"), 1400);
+	};
+	const handleCopy = async () => {
+		if (!sourceText) return;
+		try {
+			await navigator.clipboard.writeText(sourceText);
+			resetCopyStatus("copied");
+		} catch {
+			resetCopyStatus("failed");
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mb-8",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-3 border-b pb-2",
+				children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold leading-7",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: description
+				})] })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: contentClassName,
+				children
+			}),
+			sourceText && /* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex flex-wrap items-center gap-2 border-t border-border/70 pt-3",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: showSource ? "primary" : "default",
+					leftIcon: showSource ? /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" }),
+					onClick: () => setShowSource((visible) => !visible),
+					children: showSource ? "收起源码" : "查看源码"
+				}), showSource && /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "text",
+					leftIcon: copyStatus === "copied" ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }),
+					onClick: handleCopy,
+					children: copyStatus === "copied" ? "已复制" : copyStatus === "failed" ? "复制失败" : "复制"
+				})]
+			}),
+			showSource && sourceText && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 overflow-hidden rounded-lg border border-border bg-muted/40",
+				children: /* @__PURE__ */ jsx("pre", {
+					className: "max-h-[520px] overflow-x-auto overflow-y-auto p-4 text-xs leading-6 text-foreground",
+					children: /* @__PURE__ */ jsx("code", {
+						className: "block min-w-max whitespace-pre font-mono",
+						children: sourceText
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { DemoSection };