@_tc/template-core 0.2.1 → 0.2.3

package/AGENT_README.md

@@ -82,11 +82,14 @@ export default {
     ATKey: 'Authorization',
     RTKey: 'RT',
   },
+  resourceCacheTimeMs: 5 * 60 * 1000,
 }
 ```
 
 `auth.ATKey` / `auth.RTKey` 是业务鉴权中间件读取短 token 和刷新 token header 的默认约定；默认分别是 `Authorization` / `RT`。
 
+`resourceCacheTimeMs` 控制生产环境静态资源缓存时间，单位是 ms，默认 5 分钟。
+
 访问内置后台：
 
 ```text

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
@@ -101,7 +103,7 @@ main().catch((error) => {
 | `homePage` | `string` | 否 | - | 应用首页路径 |
 | `additionalPublicPaths` | `string | string[]` | 否 | - | 追加静态资源目录；如需同时作为 Nunjucks 模板查找目录，建议传绝对路径数组 |
 
-框架会自动读取 `config/config.default.ts` 中的配置（如 `port`、`env`、`auth` 等）。
+框架会自动读取 `config/config.default.ts` 中的配置（如 `port`、`env`、`auth`、`resourceCacheTimeMs` 等）。
 
 常用默认配置示例：
 
@@ -113,11 +115,14 @@ export default {
     ATKey: 'Authorization',
     RTKey: 'RT',
   },
+  resourceCacheTimeMs: 5 * 60 * 1000,
 }
 ```
 
 `auth.ATKey` / `auth.RTKey` 用于约定项目鉴权中间件读取短 token 和刷新 token 的 header 名；默认分别为 `Authorization` 和 `RT`。
 
+`resourceCacheTimeMs` 控制生产环境静态资源缓存时间，单位是 ms，默认 5 分钟。
+
 服务端返回给前端的错误消息会按请求头里的语种翻译。当前优先读取 `x-tc-language`，也兼容 `tc_language`、`tc-language`、`language`、`lang`、`locale` 和 `accept-language`；如果没取到，默认按英文 `en-US` 处理。
 
 静态资源挂载顺序为：项目 `app/public`、框架 `app/public`、`additionalPublicPaths`。Nunjucks 模板查找顺序为：项目 `app/public/dist`、框架 `app/public/dist`、`additionalPublicPaths/dist`。这些目录由 `app.publicsPath` 统一维护。当 `buildFE` 输出到自定义目录时，可以用 `additionalPublicPaths` 把该目录交给 Koa 提供静态资源访问和模板渲染；如果需要模板查找也命中追加目录，请传绝对路径数组。
@@ -165,6 +170,11 @@ await buildFE('prod', { minifyHtml: true })
 // config/config.default.ts
 export default {
   port: 9000,
+  auth: {
+    ATKey: 'Authorization',
+    RTKey: 'RT',
+  },
+  resourceCacheTimeMs: 5 * 60 * 1000,
 }
 ```
 
@@ -457,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/cjs/app/controller/view.js

@@ -1 +1 @@
-const e=require(`../../packages/common/string/index.js`);var t=e=>JSON.stringify(e).replace(/</g,`\\u003c`).replace(/>/g,`\\u003e`).replace(/&/g,`\\u0026`).replace(/\u2028/g,`\\u2028`).replace(/\u2029/g,`\\u2029`),n=(n=>class{async renderPage(r,i){let a=r.path;if(n.extends.localCacheHtmlEtag.keepFreshFEBuildKey(),a.includes(`${n.options.apiPrefix}/`))await i();else{n.extends.logger.log(` - render page: `+r.params.page);try{let i=r.query.projk;Array.isArray(i)&&(i=e.joinStr(...i));let a={projKey:i??``,name:n.options?.name??``,env:n.envs.get(),FEBasePage:t(`${n.options.pageBasePage}`),basePath:t(`${n.options.pageBasePage}${r.params.page}`),projKeyJson:t(String(r.query.projk??``)),signKey:t(n.config.signKey),options:t(n.options)},o=n.extends.renderView(`${r.params.page}.entry.tpl`,r,a),s=e.joinStr(a.basePath,a.name,a.env,a.projKey);if(!n.extends.localCacheHtmlEtag.hasEtag(s)){let e=n.extends.crypto.hmacSign(o);n.extends.localCacheHtmlEtag.setEtag(s,e)}let c=n.extends.localCacheHtmlEtag.getEtag(s);if(c||console.log(`---- etag 缓存异常 请检查服务 ----`),r.etag=c??Date.now()+``,r.fresh){r.status=304;return}}catch(e){console.log(`-------------- render view error --------------`),console.log(e),n.extends.generateErrorMessage(`template not found`,{status:404,showError:!0,code:0})}}}});module.exports=n;
+const e=require(`../../packages/common/string/index.js`);var t=e=>JSON.stringify(e).replace(/</g,`\\u003c`).replace(/>/g,`\\u003e`).replace(/&/g,`\\u0026`).replace(/\u2028/g,`\\u2028`).replace(/\u2029/g,`\\u2029`),n=(n=>class{async renderPage(r,i){let a=r.path;if(n.extends.localCacheHtmlEtag.keepFreshFEBuildKey(),a.includes(`${n.options.apiPrefix}/`))await i();else{n.extends.logger.log(` - render page: `+r.params.page);try{let i=r.query.projk;Array.isArray(i)&&(i=e.joinStr(...i));let a={projKey:i??``,name:n.options?.name??``,env:n.envs.get(),FEBasePage:t(`${n.options.pageBasePage}`),basePath:t(`${n.options.pageBasePage}${r.params.page}`),projKeyJson:t(String(r.query.projk??``)),signKey:t(n.config.signKey),options:t(n.options)},o=n.extends.renderView(`${r.params.page}.entry.tpl`,r,a),s=e.joinStr(a.basePath,a.name,a.env,a.projKey);if(!n.extends.localCacheHtmlEtag.hasEtag(s)){let e=n.extends.crypto.hmacSign(o);n.extends.localCacheHtmlEtag.setEtag(s,e)}let c=n.extends.localCacheHtmlEtag.getEtag(s);if(c||console.log(`---- etag 缓存异常 请检查服务 ----`),r.etag=c??Date.now()+``,r.set(`Cache-Control`,`public, max-age=${n.config.resourceCacheTimeMs??300*1e3}, immutable`),r.fresh){r.status=304;return}}catch(e){console.log(`-------------- render view error --------------`),console.log(e),n.extends.generateErrorMessage(`template not found`,{status:404,showError:!0,code:0})}}}});module.exports=n;

package/cjs/app/middleware.js

@@ -1 +1 @@
-const e=require(`../_virtual/_rolldown/runtime.js`);let t=require(`koa-compress`);t=e.__toESM(t);let n=require(`koa-bodyparser`);n=e.__toESM(n);let r=require(`koa-static`);r=e.__toESM(r);var i=(0,n.default)({formLimit:`1000mb`,enableTypes:[`form`,`json`,`text`]}),a=e=>{let n=e.envs.isLocal()?{maxage:0,setHeaders(e){e.setHeader(`Cache-Control`,`no-store, no-cache, must-revalidate, proxy-revalidate`),e.setHeader(`Pragma`,`no-cache`),e.setHeader(`Expires`,`0`)}}:{maxage:365*24*60*60*1e3};e.use(e.middlewares.errorHandle),e.use((0,t.default)({threshold:2048})),e.publicsPath.forEach(t=>e.use((0,r.default)(t,n))),e.use(i),e.use(e.middlewares.requestParameterParsing),e.use(e.middlewares.projectHandler),!e.envs.isLocal()&&e.use(e.middlewares.apiSignVerify),e.use(e.middlewares.apiParamsVerify)};module.exports=a;
+const e=require(`../_virtual/_rolldown/runtime.js`);let t=require(`koa-compress`);t=e.__toESM(t);let n=require(`koa-bodyparser`);n=e.__toESM(n);let r=require(`koa-static`);r=e.__toESM(r);var i=(0,n.default)({formLimit:`1000mb`,enableTypes:[`form`,`json`,`text`]}),a=e=>{let n=e.envs.isLocal()?{maxage:0,setHeaders(e){e.setHeader(`Cache-Control`,`no-store, no-cache, must-revalidate, proxy-revalidate`),e.setHeader(`Pragma`,`no-cache`),e.setHeader(`Expires`,`0`)}}:{maxage:e.config.resourceCacheTimeMs??300*1e3};e.use(e.middlewares.errorHandle),e.use((0,t.default)({threshold:2048})),e.publicsPath.forEach(t=>e.use((0,r.default)(t,n))),e.use(i),e.use(e.middlewares.requestParameterParsing),e.use(e.middlewares.projectHandler),!e.envs.isLocal()&&e.use(e.middlewares.apiSignVerify),e.use(e.middlewares.apiParamsVerify)};module.exports=a;

package/cjs/config/config.default.js

@@ -1 +1 @@
-var e={frameName:`TemplateCore`,signKey:`sakjdfnkjwjfnfkjkjldljksndf`,apiSignVerify:{whiteList:[]},auth:{ATKey:`Authorization`,RTKey:`RT`},notFoundRedirectCount:5};module.exports=e;
+var e={frameName:`TemplateCore`,signKey:`sakjdfnkjwjfnfkjkjldljksndf`,apiSignVerify:{whiteList:[]},auth:{ATKey:`Authorization`,RTKey:`RT`},notFoundRedirectCount:5,resourceCacheTimeMs:300*1e3};module.exports=e;

package/esm/app/controller/view.js

@@ -24,7 +24,7 @@ var t = (e) => JSON.stringify(e).replace(/</g, "\\u003c").replace(/>/g, "\\u003e
 					n.extends.localCacheHtmlEtag.setEtag(s, e);
 				}
 				let c = n.extends.localCacheHtmlEtag.getEtag(s);
-				if (c || console.log("---- etag 缓存异常 请检查服务 ----"), r.etag = c ?? Date.now() + "", r.fresh) {
+				if (c || console.log("---- etag 缓存异常 请检查服务 ----"), r.etag = c ?? Date.now() + "", r.set("Cache-Control", `public, max-age=${n.config.resourceCacheTimeMs ?? 300 * 1e3}, immutable`), r.fresh) {
 					r.status = 304;
 					return;
 				}

package/esm/app/middleware.js

@@ -15,7 +15,7 @@ var r = t({
 		setHeaders(e) {
 			e.setHeader("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate"), e.setHeader("Pragma", "no-cache"), e.setHeader("Expires", "0");
 		}
-	} : { maxage: 365 * 24 * 60 * 60 * 1e3 };
+	} : { maxage: t.config.resourceCacheTimeMs ?? 300 * 1e3 };
 	t.use(t.middlewares.errorHandle), t.use(e({ threshold: 2048 })), t.publicsPath.forEach((e) => t.use(n(e, i))), t.use(r), t.use(t.middlewares.requestParameterParsing), t.use(t.middlewares.projectHandler), !t.envs.isLocal() && t.use(t.middlewares.apiSignVerify), t.use(t.middlewares.apiParamsVerify);
 };
 //#endregion

package/esm/config/config.default.js

@@ -7,7 +7,8 @@ var e = {
 		ATKey: "Authorization",
 		RTKey: "RT"
 	},
-	notFoundRedirectCount: 5
+	notFoundRedirectCount: 5,
+	resourceCacheTimeMs: 300 * 1e3
 };
 //#endregion
 export { e as default };

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 {};