再优化一个版本

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne/example-driver",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "用于在线展示和编辑React组件",
   "syntax": {
     "esmodules": true
@@ -16,11 +16,10 @@
     "init-example": "modules-dev-libs-init",
     "build:md": "npx @kne/md-doc",
     "start:md": "npx @kne/md-doc --watch",
-    "build:types": "cp src/index.d.ts dist/",
-    "build:package-manifest": "cp src/package-manifest.json dist/",
-    "build:lib-main": "microbundle --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment",
-    "build:lib": "run-s build:lib-main build:types build:package-manifest",
-    "start:lib": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment",
+    "build:locale": "microbundle src/locale/*.js -o dist/locale --no-compress --format modern,cjs ",
+    "build:lib-main": "microbundle --no-compress --format modern,cjs --jsxImportSource react --jsx React.createElement --jsxFragment React.Fragment",
+    "build:lib": "run-s build:locale build:lib-main",
+    "start:lib": "microbundle watch --no-compress --format modern,cjs --jsxImportSource react --jsx React.createElement --jsxFragment React.Fragment",
     "build:example": "cd example && npm run build",
     "start:example": "cd example && npm run start",
     "test:build": "run-s build",
@@ -72,14 +71,15 @@
     "husky": "^9.0.11",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
-    "react-scripts": "^5.0.0",
-    "sass": "^1.97.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.0",
+    "sass": "^1.97.3"
   },
   "dependencies": {
     "@babel/standalone": "^7.24.0",
     "@kne/react-error-boundary": "^0.1.1",
+    "@kne/react-intl": "^0.1.12",
     "@monaco-editor/react": "^4.6.0",
     "babel-standalone": "^6.26.0",
     "classnames": "^2.3.1",

prompts/prompts-frontend-libs/README.md

@@ -0,0 +1,132 @@
+# Prompts Frontend Libs 文档索引
+
+本项目包含多个前端开发辅助提示词文档，用于指导 AI 完成常见的前端组件库开发任务。
+
+## 文档列表
+
+### 1. 组件国际化
+
+**功能**: 指导将 React 组件完成国际化，支持多语言切换
+
+**适用场景**: 
+- 组件需要支持多语言显示
+- 项目需要面向国际用户
+- 现有组件需要添加国际化支持
+
+**核心内容**:
+- useIntl Hook 使用方法
+- withLocale HOC 包裹模式
+- 语言包配置规范
+- 不同组件类型的国际化处理方式
+
+**使用方式**: 阅读 [国际化](prompts/国际化.md) 了解详情
+
+---
+
+### 2. 添加 TypeScript 类型声明
+
+**功能**: 为现有的 React 组件库添加完整的 TypeScript 类型定义
+
+**适用场景**: 
+- JavaScript 组件库需要添加 TypeScript 支持
+- 提升代码可维护性和 IDE 智能提示
+- 便于团队协作和代码审查
+
+**核心内容**:
+- Props 接口定义规范
+- 类型声明文件结构
+- 复杂场景处理（嵌套对象、函数属性、联合类型）
+- 组件导出声明模板
+
+**使用方式**: 阅读 [添加ts类型声明](prompts/添加ts类型声明.md) 了解详情
+
+---
+
+### 3. 完善 package.json 描述和关键词
+
+**功能**: 为项目完善 package.json 的 description 和 keywords 字段
+
+**适用场景**: 
+- 新建项目需要完善 package.json 信息
+- 项目功能更新后需要调整描述
+- 提升 npm 包的搜索可发现性
+
+**核心内容**:
+- 描述撰写原则和模板
+- 关键词分类和提取来源
+- 信息收集和分析流程
+- 输出格式和检查清单
+
+**使用方式**: 阅读 [完善package.json描述和关键词](prompts/完善package.json描述和关键词.md) 了解详情
+
+---
+
+### 4. 生成包功能描述文件
+
+**功能**: 为 JavaScript/TypeScript 包生成 package-manifest.json 描述文件
+
+**适用场景**: 
+- 自动化 API 文档生成
+- IDE 智能提示和自动补全
+- 包管理和分发平台的组件展示
+- 第三方工具的集成和分析
+
+**核心内容**:
+- 项目结构分析流程
+- 导出模块识别方法
+- JSON 结构构建规范
+- 类型定义标准和描述编写原则
+
+**使用方式**: 阅读 [生成包功能描述文件](prompts/生成包功能描述文件.md) 了解详情
+
+---
+
+### 5. 生成文档
+
+**功能**: 为项目生成标准化的 API 文档和概述文档
+
+**适用场景**: 
+- 需要生成项目概述文档 (summary.md)
+- 需要生成 API 文档 (api.md)
+- 规范化项目文档结构
+
+**核心内容**:
+- 文档结构规范
+- 标题级别使用规范
+- 表格格式要求
+- 内容基于实际代码分析的原则
+
+**使用方式**: 阅读 [生成文档](prompts/生成文档.md) 了解详情
+
+---
+
+### 6. 组件示例编写
+
+**功能**: 编写遵循特定目录结构规范的 React 组件示例
+
+**适用场景**: 
+- 为组件创建可运行的示例代码
+- 编写组件演示和文档
+- 构建组件库的示例展示系统
+
+**核心内容**:
+- 项目目录布局规范
+- example.json 配置结构
+- 示例代码编写模板
+- scope 依赖声明规则
+- 数据模拟方法
+
+**使用方式**: 阅读 [组件示例编写](prompts/组件示例编写.md) 了解详情
+
+---
+
+## 如何选择
+
+| 需求 | 使用文档 |
+|------|----------|
+| 组件需要支持多语言 | 组件国际化 |
+| 为 JS 组件库添加 TS 类型支持 | 添加 TypeScript 类型声明 |
+| 完善 package.json 描述和关键词 | 完善 package.json 描述和关键词 |
+| 生成包的 API 描述文件 | 生成包功能描述文件 |
+| 生成项目概述和 API 文档 | 生成文档 |
+| 编写组件演示示例代码 | 组件示例编写 |

prompts/prompts-frontend-libs/国际化.md

@@ -0,0 +1,217 @@
+# 组件国际化指南
+
+## 概述
+
+本指南用于将组件完成国际化。
+
+## 一、创建的文件
+
+1. **`src/withLocale.js`** - 统一的国际化 HOC，所有组件共用
+2. **`src/locale/zh-CN.js`** - 中文语言包，所有组件共用
+3. **`src/locale/en-US.js`** - 英文语言包，所有组件共用
+
+## 二、需要修改的文件类型
+
+### 主组件文件
+- 添加 `useIntl` Hook
+- 用 `withLocale` 包裹导出
+
+### FormInner 表单组件
+- 添加 `useIntl` Hook
+- 用 `withLocale` 包裹导出
+- 表单 label 国际化
+
+### getColumns 等工具函数
+- 通过参数接收 `formatMessage`
+- 移除内部的 `useIntl` 和 `withLocale` 引入
+
+### Action 操作组件
+- 添加 `useIntl` Hook
+- 用 `withLocale` 包裹导出
+
+## 三、国际化的关键模式
+
+### 1. useIntl Hook 使用
+```javascript
+import { useIntl } from '@kne/react-intl';
+
+const Component = () => {
+  const { formatMessage } = useIntl();
+  return <div>{formatMessage({ id: 'ComponentName.Key' })}</div>;
+};
+```
+
+### 2. withLocale 包裹普通组件
+```javascript
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const ComponentInner = ({ ...props }) => {
+  const { formatMessage } = useIntl();
+  // 将所有中文替换为 formatMessage({ id: 'ComponentName.Key' })
+  return <div>{formatMessage({ id: 'ComponentName.Key' })}</div>;
+};
+
+const Component = withLocale(ComponentInner);
+
+export default Component;
+```
+
+### 3. createWithRemoteLoader 组件（推荐格式）
+```javascript
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const ComponentInner = createWithRemoteLoader({...})(({ remoteModules, ...props }) => {
+  const { formatMessage } = useIntl();
+  // ...
+});
+
+const Component = withLocale(ComponentInner);
+
+export default Component;
+```
+
+**注意：** 对于 `createWithRemoteLoader` 创建的组件，可以先用 `ComponentInner` 存储，再用 `withLocale` 包裹。
+
+### 4. getColumns 等工具函数（formatMessage 从父组件传入）
+```javascript
+const getColumns = ({formatMessage}) => {
+  return [
+    {
+      name: 'name',
+      title: formatMessage({ id: 'ComponentName.Key' })
+    }
+  ];
+};
+
+// 父组件中使用
+const columns = getColumns({formatMessage});
+```
+
+### 5. 带参数的翻译
+```javascript
+formatMessage({ id: 'ComponentName.KeyWithParam' }, { name: value })
+```
+
+## 四、注意事项
+
+1. **所有使用 `useIntl` 的组件必须用 `withLocale` 包裹**
+2. **`getColumns` 等工具函数通过参数接收 `formatMessage`，不使用 `useIntl`**
+3. **语言包中避免重复的 key**，命名规则：`组件名 + 功能名`，如 `PersonalCard.status.online`
+4. **`createWithRemoteLoader` 创建的组件内部使用 useIntl 时，外层需要重命名并用 withLocale 包裹**
+5. 注意检查 `withLocale`文件的引用地址，根目录组件使用 `../withLocale`
+
+---
+
+# 组件国际化操作步骤
+
+## 步骤
+
+### 1. 更新语言包文件
+在 `src/locale/zh-CN.js` 和 `src/locale/en-US.js` 中添加对应的翻译文本：
+```javascript
+// zh-CN.js
+const locale = {
+  ComponentName: {
+    status: {
+      online: '在线',
+      offline: '离线'
+    },
+    summary: '简介'
+  }
+};
+
+// en-US.js
+const locale = {
+  ComponentName: {
+    status: {
+      online: 'Online',
+      offline: 'Offline'
+    },
+    summary: 'Summary'
+  }
+};
+```
+
+### 2. 修改组件文件
+
+#### 主组件修改模式：
+```javascript
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const ComponentInner = ({ ...props }) => {
+  const { formatMessage } = useIntl();
+  // 将所有中文替换为 formatMessage({ id: 'ComponentName.Key' })
+  return (
+    // ...
+  );
+};
+
+const Component = withLocale(ComponentInner);
+
+export default Component;
+```
+
+#### FormInner 修改模式：
+```javascript
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const FormInnerInner = createWithRemoteLoader({...})(({ remoteModules, ...props }) => {
+  const { formatMessage } = useIntl();
+  // label={formatMessage({ id: 'ComponentName.Key' })}
+  // ...
+});
+
+const FormInner = withLocale(FormInnerInner);
+
+export default FormInner;
+```
+
+#### Action 操作组件修改模式：
+```javascript
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const ActionInner = createWithRemoteLoader({...})(({ remoteModules, ...props }) => {
+  const { formatMessage } = useIntl();
+  // ...
+});
+
+const ActionComponent = withLocale(ActionInner);
+
+export default ActionComponent;
+```
+
+#### getColumns 修改模式：
+```javascript
+// 移除 useIntl 和 withLocale 引入
+const getColumns = ({formatMessage}) => {
+  return [
+    {
+      name: 'xxx',
+      title: formatMessage({ id: 'ComponentName.Key' })
+    }
+  ];
+};
+```
+
+父组件中调用：`getColumns({formatMessage})`
+
+### 3. 语言包 key 命名规范
+- 避免重复，使用 `组件名+功能名` 格式，如 `PersonalCard.status.online`、`UserName`、`UserRole`、`SettingType`
+- 中文和英文语言包保持完全一致的 key 结构
+
+### 4. 检查要点
+- [ ] 所有使用 `useIntl` 的组件都用 `withLocale` 包裹
+- [ ] `getColumns` 等工具函数通过参数接收 `formatMessage`
+- [ ] 语言包中无重复 key
+- [ ] `withLocale` 引用路径正确（组件在子目录使用 `../withLocale`）
+
+### 5. 最后检查
+运行命令找到所有使用 useIntl 的文件，确保都已正确包裹：
+```bash
+grep -r "useIntl" src/ --include="*.js" -l
+```