weifuwu 0.36.1 → 0.37.0

package/README.md

@@ -22,7 +22,8 @@ npm install weifuwu
 | **redis** | `weifuwu` | Redis 客户端 → `ctx.redis` | `Router` |
 | **ui** | `weifuwu` | SSR 渲染 + 动态 JS/CSS 编译 → `ctx.ui` | `Router` |
 | **graphql** | `weifuwu` | GraphQL 端点 | `Router` |
-| **client** | `weifuwu/client` | 前端 VDOM + Proxy 框架 | — |
+| **client** | `weifuwu/client` | 前端 VDOM + Proxy 框架 + i18n + ErrorBoundary | — |
+| **components** | `weifuwu/components` | 34 个 HTML 原语组件（Button/Table/Modal/...） | `client` |
 | **layout** | `weifuwu/layout` | 纯 CSS 布局原语 + 主题 Token | — |
 
 ---
@@ -39,6 +40,7 @@ npm install weifuwu
          ctx.sql                              ctx.ws
          ctx.redis                            ctx.route
          ctx.ui                               ctx.api / ctx.auth
+                                             ctx.i18n
 ```
 
 ---
@@ -71,7 +73,7 @@ serve(app, { port: 3000 })
 
 ```tsx
 // src/main.tsx —— 前端
-import { createApp, router, RouteView } from 'weifuwu/client'
+import { createApp, router, RouteView, i18n } from 'weifuwu/client'
 import type { WfuiContext, RouteDef } from 'weifuwu/client'
 
 function Home(_props: {}, ctx: WfuiContext) {
@@ -345,21 +347,28 @@ function Counter(_props: {}, ctx: WfuiContext) {
 
 ### 生命周期 —— ref 回调
 
+`ref` 回调在 mount 时触发，接收 DOM 元素。返回的清理函数在 unmount 时由框架保证调用。
+
 ```tsx
 function MyComponent(_props: {}, ctx: WfuiContext) {
-  function onRef(el: HTMLElement | null) {
-    if (el) {
-      // mount: 加事件监听等
+  return (
+    <div ref={el => {
+      // mount: el 是 DOM 元素
       el.addEventListener('scroll', handler)
-    } else {
-      // unmount: 清理
-    }
-  }
-
-  return <div ref={onRef} />
+      // 返回清理函数，unmount 时框架保证调用
+      return () => el.removeEventListener('scroll', handler)
+    }} />
+  )
 }
 ```
 
+| 场景 | 写法 |
+|------|------|
+| 事件监听 | `ref={el => { el.addEventListener(...); return () => el.removeEventListener(...) }}` |
+| 定时器 | `ref={el => { const t = setInterval(f, 1000); return () => clearInterval(t) }}` |
+| 第三方库 | `ref={el => { const c = new Chart(el); return () => c.destroy() }}` |
+| 仅 mount | `ref={el => { init(el) }}` |
+
 ### 应用 —— createApp
 
 ```tsx
@@ -490,9 +499,36 @@ import { ErrorBoundary } from 'weifuwu/client'
 |------|------|
 | `extendCtx(ctx, fields)` | 创建新 ctx，继承原 ctx 的 getter |
 
+### 国际化 — `ctx.i18n`
+
+`i18n()` 中间件注入 `ctx.i18n`，支持运行时语言切换：
+
+```ts
+import { createApp, i18n } from 'weifuwu/client'
+
+createApp()
+  .use(i18n({
+    locale: 'zh-CN',
+    messages: { 'users.title': '用户管理' },
+  }))
+  .mount('#root', () => <App />)
+
+// 页面中使用
+ctx.i18n?.t('users.title')      // → '用户管理'
+
+// 运行时切换
+ctx.i18n?.setLocale('en-US')    // → 自动触发重渲染
+```
+
+内置语言包：`zh-CN`（默认）、`en-US`。组件文案（Button 的 `加载中...`、FileUpload 的 `点击或拖拽上传文件`）随语言自动切换。组件通过 `ctx.i18n?.components?.ComponentName.field` 读取，支持 `props.locale` 局部覆盖。
+
+```ts
+import { i18n, zhCN, enUS } from 'weifuwu/client'
+```
+
 ### 前端类型
 
-`VNode`, `VNodeType`, `Component`, `WfuiContext`, `AppMiddleware`, `RouteDef`, `ApiClient`, `ApiOptions`, `ApiRequestOptions`, `ApiError`, `AuthClient`, `AuthOptions`, `ErrorBoundaryProps`
+`VNode`, `VNodeType`, `Component`, `WfuiContext`, `AppMiddleware`, `RouteDef`, `ApiClient`, `ApiOptions`, `ApiRequestOptions`, `ApiError`, `AuthClient`, `AuthOptions`, `ErrorBoundaryProps`, `I18nOptions`, `I18nState`, `LocalePackage`
 
 ---
 
@@ -607,6 +643,65 @@ document.documentElement.setAttribute('data-theme', 'dark')
 
 ---
 
+## 组件库 — `weifuwu/components`
+
+29 个 **HTML 原语**，覆盖 90% 的 SaaS 页面 HTML 需求。每个组件是 `(props, ctx) => VNode` 纯函数，引用 `weifuwu/layout` 的 CSS 变量做主题。
+
+```ts
+import { Button, Input, Table, Modal, Toast } from 'weifuwu/components'
+import 'weifuwu/components/style.css'
+```
+
+### 模块总览
+
+| 类别 | 组件 | 用途 |
+|------|------|------|
+| **表单核心** | `Button` `Input` `Textarea` `Select` | 4 个最常用的表单元素 |
+| **表单核心** | `InputNumber` | 数字输入，带自定义步进按钮 (`showStepper`) |
+| **表单选择** | `Checkbox` `Switch` `RadioGroup` `Slider` | 选择类输入 |
+| **表单增强** | `Form` `Field` `FileUpload` `SearchInput` `ProgressBar` | 文件上传、搜索、进度 |
+| **数据展示** | `Table` `Card` `Badge` `Tag` `Avatar` `StatCard` `PageHeader` | 数据展示与页面标题 |
+| **数据反馈** | `Modal` `Drawer` `Tooltip` `Toast` `Alert` `Loading` `EmptyState` | 弹窗、抽屉、提示 |
+| **导航组件** | `Breadcrumb` `Tabs` `Dropdown` `Pagination` `Steps` `Accordion` | 面包屑、标签页、分页 |
+| **布局** | `Divider` | 分割线 (水平/垂直/带文字) |
+
+### 状态管理说明
+
+`ctx.ui.$` 是**组件级**状态——每个组件实例有独立的 Proxy（基于 `vnode._$`），同名变量不会冲突：
+
+```tsx
+// 组件 A
+const $ = ctx.ui.$
+$.open = true  // 只影响组件 A
+
+// 组件 B（在同一页面）
+const $ = ctx.ui.$
+$.open = false // 只影响组件 B，不影响 A
+```
+
+跨组件共享状态请使用 `ctx` 直接挂载属性（延续中间件模式）：
+
+```ts
+ctx.theme = 'dark'          // 所有组件可读
+ctx.toast?.success('成功')   // 如已注入 toast 中间件
+```
+
+### 页面模板 — `docs/pages/`
+
+| 模板 | 文件 | 用途 |
+|------|------|------|
+| **列表页** | `docs/pages/list-page.md` | 搜索 + 表格 + 分页 + 加载/空/错误状态 |
+| **表单页** | `docs/pages/form-page.md` | 表单 + 字段 + 校验 + 提交 |
+| **详情页** | `docs/pages/detail-page.md` | 信息展示 + Tabs + 操作 |
+| **设置页** | `docs/pages/settings-page.md` | 分组设置 + 独立保存 |
+| **仪表盘** | `docs/pages/dashboard-page.md` | KPI 卡片 + 图表 + 列表 |
+| **认证页** | `docs/pages/auth-page.md` | 居中卡片 + 表单 + 错误提示 |
+| **应用壳** | `docs/pages/app-layout.md` | 侧边栏 + 导航菜单 + 认证守卫 |
+
+每个模板标注了「改这里」——复制代码后改 API 路径、字段定义、操作按钮、导航项即可使用。
+
+---
+
 ## 环境变量
 
 | 变量 | 用途 | 默认值 |
@@ -647,6 +742,12 @@ src/
 │       ├── api.ts
 │       ├── auth.ts
 │       └── ws.ts
+├── components/            # 29 个 HTML 原语组件
+│   ├── index.ts
+│   ├── Button/            # Button.ts + .css + .test.ts
+│   ├── Input/
+│   ├── ...
+│   └── PageHeader/
 └── layout/                # 纯 CSS 布局 + 主题
     ├── weifuwu-layout.css
     ├── _tokens.css

package/dist/client/app.d.ts

@@ -5,15 +5,12 @@
  *
  * ctx.ui 在 mount 时注入：
  *   ctx.ui.render()    触发组件重渲染
- *   ctx.ui.$          持久化组件状态（由渲染器管理）
+ *   ctx.ui.$          组件级状态 Proxy（由 renderComponent 创建）
  *   ctx.ui.ready       首次执行标记（由渲染器管理）
  *
- * ctx.ui.$ 是深度 Proxy：
- *   $.x = val              → 自动渲染（顶层属性赋值）
- *   $.items.push(val)      → 自动渲染（数组突变方法）
- *   $.items[0].x = val     → 自动渲染（对象属性突变）
- *   $.items.push({x: 1})   → 新对象自动深度包装
- *   ctx.ui.dirty()         → 极少需要（仅当绕过 Proxy 直接操作底层对象）
+ * ctx.ui.$ 是组件级 Proxy（组件间隔离）：
+ *   $.x = val              → 设置当前组件状态，自动触发渲染
+ *   ctx.ui.dirty()         → 标记脏状态（仅深层突变时需要）
  */
 import type { WfuiContext, AppMiddleware } from './types.ts';
 import type { Component } from './vnode.ts';

package/dist/client/i18n.d.ts

@@ -0,0 +1,27 @@
+/**
+ * weifuwu i18n — 中间件
+ *
+ * 注入 ctx.i18n 支持运行时语言切换。
+ *
+ * 使用:
+ *   app.use(i18n({ locale: 'en', messages: { 'title': 'Dashboard' } }))
+ *   ctx.i18n?.t('title')        // → 'Dashboard'
+ *   ctx.i18n?.setLocale('zh-CN') // → 切换语言，自动重渲染
+ */
+import type { AppMiddleware } from './types.ts';
+export interface I18nOptions {
+    locale?: string;
+    messages?: Record<string, string>;
+    components?: Record<string, Record<string, string>>;
+}
+export interface LocalePackage {
+    messages?: Record<string, string>;
+    components?: Record<string, Record<string, string>>;
+}
+export interface I18nState {
+    locale: string;
+    t: (key: string, fallback?: string) => string;
+    setLocale: (lang: string) => void;
+    components: Record<string, Record<string, string>>;
+}
+export declare function i18n(opts?: I18nOptions): AppMiddleware;

package/dist/client/index.d.ts

@@ -29,3 +29,7 @@ export { extendCtx } from './types.ts';
 export type { WfuiContext, AppMiddleware, RouteDef } from './types.ts';
 export { ErrorBoundary } from './error-boundary.ts';
 export type { ErrorBoundaryProps } from './error-boundary.ts';
+export { i18n } from './i18n.ts';
+export type { I18nOptions, I18nState } from './i18n.ts';
+export { zhCN } from './locale/zh_CN.ts';
+export { enUS } from './locale/en_US.ts';

package/dist/client/index.js

@@ -29,6 +29,57 @@ function normalizeProps(props) {
 }
 
 // src/client/render.ts
+var mutationMethods = ["push", "pop", "splice", "shift", "unshift", "sort", "reverse"];
+var wrappedCache = /* @__PURE__ */ new WeakMap();
+function wrapDeep(val, dirty) {
+  if (val === null || typeof val !== "object") return val;
+  if (val instanceof Node) return val;
+  if (typeof Blob !== "undefined" && val instanceof Blob) return val;
+  if (wrappedCache.has(val)) return wrappedCache.get(val);
+  const handler = Array.isArray(val) ? {
+    get(target, key, receiver) {
+      const v = Reflect.get(target, key, receiver);
+      if (typeof key === "string" && mutationMethods.includes(key) && typeof v === "function") {
+        return function(...args) {
+          const r = v.apply(target, args);
+          dirty();
+          return r;
+        };
+      }
+      return wrapDeep(v, dirty);
+    },
+    set(target, key, v) {
+      Reflect.set(target, key, wrapDeep(v, dirty));
+      dirty();
+      return true;
+    }
+  } : {
+    get(_target, key, receiver) {
+      const v = Reflect.get(_target, key, receiver);
+      return wrapDeep(v, dirty);
+    },
+    set(target, key, v) {
+      Reflect.set(target, key, wrapDeep(v, dirty));
+      dirty();
+      return true;
+    }
+  };
+  const proxy = new Proxy(val, handler);
+  wrappedCache.set(val, proxy);
+  return proxy;
+}
+function createComponentProxy(target, dirty) {
+  return new Proxy(target, {
+    set(t, k, v) {
+      t[k] = wrapDeep(v, dirty);
+      dirty();
+      return true;
+    },
+    get(t, k) {
+      return wrapDeep(t[k], dirty);
+    }
+  });
+}
 function render(input, ctx) {
   return renderValue(input, ctx);
 }
@@ -56,7 +107,8 @@ function renderValue(v, ctx) {
     el.appendChild(renderValue(child, ctx));
   }
   if (vnode.props?.ref) {
-    queueMicrotask(() => vnode.props.ref(el));
+    const result = vnode.props.ref(el);
+    if (typeof result === "function") vnode._cleanup = result;
   }
   return el;
 }
@@ -65,6 +117,8 @@ function renderComponent(Comp, props, vnode, ctx) {
   if (!prev$) vnode._$ = {};
   ctx.ui = ctx.ui ?? {};
   ctx.ui.ready = !!prev$;
+  const _target = vnode._$;
+  ctx.ui.$ = createComponentProxy(_target, () => ctx.ui?.dirty?.());
   let childVNode;
   try {
     childVNode = Comp(props, ctx);
@@ -140,7 +194,7 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
   }
   if (newInput == null) {
     if (oldNode) {
-      callRef(oldInput, null);
+      callRefCleanup(oldInput);
       oldNode.remove();
     }
     return null;
@@ -148,7 +202,7 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
   const oldType = typeOf(oldInput);
   const newType = typeOf(newInput);
   if (oldType !== newType) {
-    callRef(oldInput, null);
+    callRefCleanup(oldInput);
     const node = renderValue(newInput, ctx);
     if (oldNode?.parentNode) {
       oldNode.parentNode.replaceChild(node, oldNode);
@@ -168,6 +222,8 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
     if (oldV._$) newV._$ = oldV._$;
     ctx.ui = ctx.ui ?? {};
     ctx.ui.ready = !!newV._$;
+    const _tgt = newV._$;
+    ctx.ui.$ = createComponentProxy(_tgt, () => ctx.ui?.dirty?.());
     const childNew = comp(newV.props, ctx);
     newV._child = childNew;
     return patchValue(parent, oldNode, oldV._child, childNew, ctx);
@@ -181,7 +237,7 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
       patchProps(oldNode, oldV.props, newV.props);
       patchChildren(oldNode, oldV, newV, ctx);
     } else if (oldNode) {
-      callRef(oldInput, null);
+      callRefCleanup(oldInput);
       const node = renderValue(newInput, ctx);
       oldNode.parentNode?.replaceChild(node, oldNode);
       return node;
@@ -210,7 +266,9 @@ function patchProps(el, oldProps, newProps) {
   const newKeys = newProps ? Object.keys(newProps).filter((k) => k !== "children" && k !== "key" && k !== "ref") : [];
   for (const key of oldKeys) {
     if (!newKeys.includes(key)) {
-      if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+      if (key.startsWith("on") && typeof oldProps[key] === "function") {
+        el.removeEventListener(key.slice(2).toLowerCase(), oldProps[key]);
+      } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
         ;
         el.value = "";
       } else {
@@ -286,7 +344,7 @@ function patchSimpleChildren(parent, oldChildren, newChildren, ctx) {
       parent.appendChild(node);
     } else if (newChild === void 0) {
       if (existingNode) {
-        callRef(oldChild, null);
+        callRefCleanup(oldChild);
         existingNode.remove();
       }
     } else {
@@ -306,7 +364,7 @@ function patchKeyedChildren(parent, oldChildren, newChildren, ctx) {
   for (const key of oldKeyMap.keys()) {
     if (!newKeys.includes(key)) {
       const entry = oldKeyMap.get(key);
-      callRef(entry.vnode, null);
+      callRefCleanup(entry.vnode);
       entry.node?.remove();
       oldKeyMap.delete(key);
     }
@@ -316,7 +374,7 @@ function patchKeyedChildren(parent, oldChildren, newChildren, ctx) {
     if (key === void 0) {
       const node = parent.childNodes[i];
       if (node) {
-        callRef(oldChildren[i], null);
+        callRefCleanup(oldChildren[i]);
         node.remove();
       }
     }
@@ -337,13 +395,21 @@ function patchKeyedChildren(parent, oldChildren, newChildren, ctx) {
     }
   }
 }
-function callRef(input, el) {
+function runRefCleanup(vnode) {
+  if (vnode._cleanup) {
+    vnode._cleanup();
+    vnode._cleanup = void 0;
+  }
+  forEach(vnode.props?.children, (child) => {
+    if (child && typeof child === "object" && child._cleanup) {
+      runRefCleanup(child);
+    }
+  });
+}
+function callRefCleanup(input) {
   if (input == null || typeof input !== "object") return;
   const vnode = input;
-  if (typeof vnode.props?.ref === "function") {
-    vnode.props.ref(el);
-  }
-  forEach(vnode.props?.children, (child) => callRef(child, el));
+  if (vnode._cleanup) runRefCleanup(vnode);
 }
 
 // src/client/router.ts
@@ -404,18 +470,21 @@ function router(opts) {
           params[match.keys[i]] = decodeURIComponent(m[i + 1]);
         }
       }
+      const last = match.chain[match.chain.length - 1];
       return {
         path: match.def.path,
         params,
         query: Object.fromEntries(new URLSearchParams(window.location.search)),
-        chain: match.chain
+        chain: match.chain,
+        title: last?.title ?? ""
       };
     }
-    return { path, params: {}, query: {}, chain: [] };
+    return { path, params: {}, query: {}, chain: [], title: "" };
   }
   return (ctx) => {
     const resolved = resolve(getPath());
     ctx.route = resolved;
+    if (resolved.title) document.title = resolved.title;
     if (!ctx.app) ctx.app = {};
     ctx.app.navigate = (path) => {
       if (mode === "hash") {
@@ -427,11 +496,13 @@ function router(opts) {
         const resolved2 = resolve(path);
         ctx.route = resolved2;
       }
+      if (ctx.route?.title) document.title = ctx.route.title;
       ctx.ui?.render();
     };
     const onPop = () => {
       const resolved2 = resolve(getPath());
       ctx.route = resolved2;
+      if (ctx.route?.title) document.title = ctx.route.title;
       ctx.ui?.render();
     };
     window.addEventListener("popstate", onPop);
@@ -457,48 +528,6 @@ function RouteView(_props, ctx) {
 }
 
 // src/client/app.ts
-var mutationMethods = ["push", "pop", "splice", "shift", "unshift", "sort", "reverse"];
-var wrappedCache = /* @__PURE__ */ new WeakMap();
-function wrapDeep(val, dirty) {
-  if (val === null || typeof val !== "object") return val;
-  if (val instanceof Node) return val;
-  if (wrappedCache.has(val)) return wrappedCache.get(val);
-  let proxy;
-  if (Array.isArray(val)) {
-    proxy = new Proxy(val, {
-      get(target, key, receiver) {
-        const v = Reflect.get(target, key, receiver);
-        if (typeof key === "string" && mutationMethods.includes(key) && typeof v === "function") {
-          return function(...args) {
-            const r = v.apply(target, args);
-            dirty();
-            return r;
-          };
-        }
-        return wrapDeep(v, dirty);
-      },
-      set(target, key, val2) {
-        target[key] = wrapDeep(val2, dirty);
-        dirty();
-        return true;
-      }
-    });
-  } else {
-    proxy = new Proxy(val, {
-      get(_target, key, receiver) {
-        const v = Reflect.get(_target, key, receiver);
-        return wrapDeep(v, dirty);
-      },
-      set(target, key, val2) {
-        target[key] = wrapDeep(val2, dirty);
-        dirty();
-        return true;
-      }
-    });
-  }
-  wrappedCache.set(val, proxy);
-  return proxy;
-}
 function createApp() {
   const middlewares = [];
   let ctx = {};
@@ -533,7 +562,7 @@ function createApp() {
           ctx.ui.render();
         });
       }
-      const $target = {};
+      ;
       ctx.ui = {
         render: () => {
           if (!container || !rootComponent || !oldVNode) return;
@@ -550,13 +579,11 @@ function createApp() {
         dirty: () => {
           scheduleRender();
         },
-        $: new Proxy($target, {
-          set(_target, key, val) {
-            _target[key] = wrapDeep(val, scheduleRender);
-            scheduleRender();
-            return true;
-          }
-        }),
+        /**
+         * 组件级 $ — 在 renderComponent 中被覆盖为每个组件独立的 Proxy。
+         * 这里保留占位，组件实际使用 ctx.ui.$ 时拿到的是 vnode._$ 上的 Proxy。
+         */
+        $: {},
         ready: false
       };
       oldVNode = wrapComponent(RootComponent, ctx);
@@ -866,6 +893,102 @@ function ErrorBoundary(props, ctx) {
     return fb ?? null;
   }
 }
+
+// src/client/locale/zh_CN.ts
+var zhCN = {
+  components: {
+    Button: { loading: "\u52A0\u8F7D\u4E2D..." },
+    FileUpload: {
+      placeholder: "\u70B9\u51FB\u6216\u62D6\u62FD\u4E0A\u4F20\u6587\u4EF6",
+      supportedFormats: "\u652F\u6301\u683C\u5F0F: ",
+      maxSize: "\u6700\u5927 ",
+      remove: "\u5220\u9664"
+    },
+    Pagination: { ariaLabel: "\u5206\u9875" },
+    ProgressBar: { ariaLabel: "\u8FDB\u5EA6" },
+    Switch: { ariaLabel: "\u5207\u6362" },
+    Breadcrumb: { ariaLabel: "\u9762\u5305\u5C51" },
+    Modal: { ariaLabel: "\u5F39\u7A97" },
+    Drawer: { ariaLabel: "\u4FA7\u8FB9\u9762\u677F" },
+    InputNumber: { increase: "\u589E\u52A0", decrease: "\u51CF\u5C11" }
+  }
+};
+
+// src/client/locale/en_US.ts
+var enUS = {
+  components: {
+    Button: { loading: "Loading..." },
+    FileUpload: {
+      placeholder: "Click or drag to upload",
+      supportedFormats: "Supported formats: ",
+      maxSize: "Max size: ",
+      remove: "Remove"
+    },
+    Pagination: { ariaLabel: "Pagination" },
+    ProgressBar: { ariaLabel: "Progress" },
+    Switch: { ariaLabel: "Toggle" },
+    Breadcrumb: { ariaLabel: "Breadcrumb" },
+    Modal: { ariaLabel: "Dialog" },
+    Drawer: { ariaLabel: "Panel" },
+    InputNumber: { increase: "Increase", decrease: "Decrease" }
+  }
+};
+
+// src/client/i18n.ts
+var LOCALE_PACKAGES = {
+  "zh-CN": zhCN,
+  "en-US": enUS
+};
+function resolveLang(locale) {
+  if (LOCALE_PACKAGES[locale]) return locale;
+  const prefix = locale.split("-")[0];
+  const match = Object.keys(LOCALE_PACKAGES).find((k) => k.startsWith(prefix));
+  return match ?? "zh-CN";
+}
+function i18n(opts = {}) {
+  const { locale: raw = "zh-CN", messages = {}, components = {} } = opts;
+  const lang = resolveLang(raw);
+  const pkg = LOCALE_PACKAGES[lang];
+  let merged = mergeLocales(pkg, messages, components);
+  const state = {
+    locale: lang,
+    t: (key, fallback) => merged.messages?.[key] ?? fallback ?? key,
+    setLocale: () => {
+    },
+    components: merged.components
+  };
+  return (ctx) => {
+    ;
+    ctx.i18n = state;
+    state.setLocale = (raw2) => {
+      const lang2 = resolveLang(raw2);
+      const pkg2 = LOCALE_PACKAGES[lang2];
+      if (!pkg2) return;
+      merged = mergeLocales(pkg2, messages, components);
+      state.locale = lang2;
+      state.components = merged.components;
+      ctx?.ui?.render();
+    };
+    return ctx;
+  };
+}
+function mergeLocales(pkg, userMessages, userComponents) {
+  return {
+    messages: { ...pkg?.messages, ...userMessages },
+    components: deepMerge(pkg?.components ?? {}, userComponents)
+  };
+}
+function deepMerge(a, b) {
+  const result = { ...a };
+  for (const key of Object.keys(b)) {
+    if (typeof b[key] === "object" && b[key] !== null && typeof result[key] === "object") {
+      result[key] = { ...result[key], ...b[key] };
+    } else {
+      result[key] = b[key];
+    }
+  }
+  return result;
+}
 export {
   ApiError,
   ErrorBoundary,
@@ -874,11 +997,14 @@ export {
   api,
   auth,
   createApp,
+  enUS,
   extendCtx,
   h,
+  i18n,
   jsx,
   jsxDEV,
   jsxs,
   router,
-  ws
+  ws,
+  zhCN
 };

package/dist/client/locale/en_US.d.ts

@@ -0,0 +1,38 @@
+/**
+ * weifuwu i18n — 英文组件文案
+ */
+export declare const enUS: {
+    components: {
+        Button: {
+            loading: string;
+        };
+        FileUpload: {
+            placeholder: string;
+            supportedFormats: string;
+            maxSize: string;
+            remove: string;
+        };
+        Pagination: {
+            ariaLabel: string;
+        };
+        ProgressBar: {
+            ariaLabel: string;
+        };
+        Switch: {
+            ariaLabel: string;
+        };
+        Breadcrumb: {
+            ariaLabel: string;
+        };
+        Modal: {
+            ariaLabel: string;
+        };
+        Drawer: {
+            ariaLabel: string;
+        };
+        InputNumber: {
+            increase: string;
+            decrease: string;
+        };
+    };
+};