@zat-design/sisyphus-react 3.13.19-beta.6 → 3.13.19-beta.7

package/.claude/CLAUDE.md

@@ -0,0 +1,44 @@
+# AI 前端专家助手规则
+## 规则概述
+- **规则可见性**
+1. 每次 AI 执行操作时，必须在响应的开头以无序列表形式列出所有当前有效的规则（包括此规则），以确保规则透明。
+2. 每次问答必须使用思考工具， 使用思考工具后，对问题进行多维度、系统化和深入思考，应将思考过程和分解结果以大模型易于理解的结构化语言补充到任务规划和计划清单中，确保后续执行更具针对性和条理性。
+- **角色描述**
+1.您是一位前端开发专家，精通 React、TypeScript、Umi、NextJs、ahooks、Ant Design（antd）以及 PC 界面开发。
+2.熟悉 HTML、CSS、JavaScript、TypeScript，了解浏览器原理，并具备组件化和工程化开发能力。
+3.能够独立分析并解决前端性能、安全和兼容性问题。
+- **回答规范**
+1.始终用中文回复。
+2.主要负责生成清晰且高度可读的 TypeScript/JavaScript 代码。
+3.以可读性为首要目标，结构清晰，表达简洁。
+4.完全实现所有功能需求，包括所有必要的导入。
+5.以标准化方式命名关键组件，并尽量使代码简短。- 如果涉及"sisyphus"或"pro"组件，请自动在 https://procomponents.zhongan.tech 搜索文档。
+6.每次回复开头必须清楚标明**模型名称、模型大小、模型类型及其修订版本（更新日期）**。
+
+- **git任务处理流程**
+1. 修复git提交问题时，不要调整业务逻辑，只修改提到的问题，验证并修复
+
+- **大型模型任务处理流程**
+1. **需求澄清与分析**
+- 分析用户的特定需求和意图，主动考虑用户的真正目标。
+- 阐明需求的含义、背景和目的，对于存在模糊之处要主动求证。
+- 在执行操作前向用户解释理解情况和实施计划，并在确认无误后再进行操作。
+2. **任务规划**
+- 将总体要求分解为若干子任务，每个子任务都有明确的目标和预期成果。
+- 确定每个子任务的执行顺序和相互依赖关系，以确保流程合理。
+- 制定详细的实施计划，涵盖每一步骤和标准。
+3. **计划清单**
+- 使用有序列表或表格列出所有子任务和关键点，以便整体把控和后续检查。
+- 每个子任务应包括：任务名称、主要内容、输入和输出要求。
+- 生成todo list，并必须按计划的todo list执行
+4. **计划执行与检查**
+- 完成每个子任务后，检查以确保目标达成，然后再进行下一个任务。
+- 检查计划清单是否涵盖所有需求点，无遗漏、无重复，且顺序合理、依赖关系明确。
+- 必要时补充或调整任务内容，以确保计划完整且可行。
+5. **总结与反馈**
+- 简要回顾任务目标、步骤和要点，总结经验和注意事项。
+- 强调关键注意事项或后续建议，为优化和迭代提供参考。
+- **联网获取最新信息的补充处理**
+- 【Context7 自动触发规则】在执行任何编码子任务时，若代码实现依赖于任何具体的第三方库或API（例如 antd, ahooks, date-fns, lodash, framer-motion, zod 等），必须主动、优先使用 @context7(library-name) 工具查询该库的最新官方用法和代码示例。此举旨在用权威的官方文档替代可能过时的训练数据，从根源上保证代码的正确性、时效性和最佳实践，其优先级高于依赖模型自身的知识库。
+- **适用范围**
+- 这些规则适用于所有文档和所有操作，以确保每个任务都能高效、准确且标准化地完成。

package/.claude/settings.local.json

@@ -0,0 +1,17 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(/private/tmp/**)",
+      "Bash(npm uninstall:*)",
+      "Bash(npm install:*)",
+      "Bash(npm run build:*)",
+      "Read(/private/tmp/**)",
+      "Bash(npx father:*)",
+      "Bash(npm run release:beta:*)",
+      "Bash(npx update-browserslist-db:*)",
+      "Bash(npm view:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/PROJECT_GUIDE.md

@@ -0,0 +1,250 @@
+# 西西弗 (Sisyphus) React 组件库项目指导
+
+## 项目概述
+
+**西西弗 (Sisyphus) React 组件库** 是一个基于 Ant Design 4.x 的企业级 React UI 组件库，专为业务系统快速开发而设计。项目名称源自希腊神话中的西西弗斯，象征着持续不断的努力和迭代优化。
+
+- **项目名称**: @zat-design/sisyphus-react
+- **当前版本**: 3.13.19-beta.4
+- **官方文档**: https://procomponents.zhongan.tech
+- **许可证**: MIT
+
+## 技术栈架构
+
+### 核心技术栈
+- **前端框架**: React 17/18
+- **UI 基础库**: Ant Design 4.24.16
+- **开发语言**: TypeScript 4.9.5
+- **构建工具**: Father Build + Dumi
+- **测试框架**: Jest + React Testing Library
+- **样式方案**: Less + CSS Modules
+
+### 开发工具链
+- **文档生成**: Dumi 1.x
+- **代码规范**: ESLint + Prettier + Stylelint
+- **提交规范**: Husky + Commitlint
+- **包管理**: npm/yarn
+- **CI/CD**: GitHub Actions
+
+### 关键依赖
+- **状态管理**: React Hooks (ahooks 3.8.4)
+- **拖拽排序**: @dnd-kit 系列
+- **工具库**: lodash, moment, big.js
+- **图标**: @ant-design/icons
+- **水印**: @pansy/react-watermark
+
+## 项目架构
+
+### 目录结构
+```
+xk-sisyphus-web/
+├── src/                    # 源代码目录
+│   ├── ProForm/           # 表单组件
+│   ├── ProTable/          # 表格组件
+│   ├── ProLayout/         # 布局组件
+│   ├── ProSelect/         # 选择器组件
+│   ├── ProEnum/           # 枚举组件
+│   ├── ProUpload/         # 上传组件
+│   ├── ProDrawerForm/     # 抽屉表单
+│   ├── ProEditTable/      # 可编辑表格
+│   ├── ProIcon/           # 图标组件
+│   ├── ProWaterMark/      # 水印组件
+│   ├── ProThemeTools/     # 主题工具
+│   ├── locale/            # 国际化文件
+│   ├── utils/             # 工具函数
+│   └── index.ts           # 主入口文件
+├── docs/                  # 文档目录
+│   ├── 组件/              # 组件文档
+│   ├── 文档/              # 使用文档
+│   ├── 官方模板/          # 模板示例
+│   ├── 登录组件/          # 登录组件文档
+│   ├── 通用函数/          # 工具函数文档
+│   └── 更新日志/          # 版本更新记录
+├── tests/                 # 测试文件
+├── lib/                   # ES5 构建输出
+├── es/                    # ES6 构建输出
+└── dist/                  # UMD 构建输出
+```
+
+### 组件分类
+
+#### 1. 布局组件
+- **ProLayout**: 页面布局框架
+- **ProStep**: 步骤条组件
+- **ProTabs**: 标签页组件
+
+#### 2. 数据展示
+- **ProTable**: 高级表格（支持搜索、分页、排序等）
+- **ProTooltip**: 文字提示
+- **ProViewer**: 文件预览器
+
+#### 3. 数据录入
+- **ProForm**: 高级表单（配置化表单生成）
+- **ProEditTable**: 可编辑表格
+- **ProDrawerForm**: 抽屉表单
+- **ProEditLabel**: 可编辑标签
+- **ProSelect**: 高级选择器
+- **ProEnum**: 枚举选择器
+- **ProUpload**: 文件上传
+
+#### 4. 通用组件
+- **ProIcon**: 图标组件
+- **ProDownload**: 文件下载
+- **ProWaterMark**: 水印组件
+- **ProConfigProvider**: 全局配置
+- **FormsProvider**: 表单提供者
+- **ProThemeTools**: 主题定制工具
+- **ProAction**: 操作按钮组
+
+## 功能特性
+
+### 核心特性
+1. **配置化开发**: 通过 JSON 配置即可生成复杂的表单和表格
+2. **类型安全**: 完整的 TypeScript 类型定义
+3. **主题定制**: 支持动态主题切换和自定义主题
+4. **国际化**: 支持中英文双语
+5. **按需加载**: 支持 babel-plugin-import 按需引入
+6. **响应式设计**: 适配不同屏幕尺寸
+
+### 高级功能
+1. **ProEnum**: 支持频繁枚举请求优化，提供缓存机制
+2. **ProTable**: 内置搜索、分页、排序、导出等功能
+3. **ProForm**: 支持动态表单项、联动校验、自定义组件
+4. **ProEditTable**: 支持行内编辑、批量操作
+5. **ProThemeTools**: 可视化主题编辑器
+6. **ProWaterMark**: 自定义水印保护
+
+## 构建配置
+
+### 构建输出
+- **lib/**: ES5 + CommonJS 格式，用于服务端渲染和旧版本兼容
+- **es/**: ES6 + ES Modules 格式，用于现代构建工具的 tree-shaking
+- **dist/**: UMD 格式，用于直接在浏览器中引用
+
+### 构建脚本
+```bash
+# 完整构建
+npm run build
+
+# 分别构建
+npm run build-lib    # ES5 + CJS
+npm run build-es     # ES6 + ESM  
+npm run build-dist   # UMD
+
+# 开发调试
+npm start            # 启动文档开发服务器
+
+# 代码检查
+npm run lint         # 运行所有检查
+npm run tsc          # TypeScript 类型检查
+```
+
+### 测试配置
+- **测试框架**: Jest + @testing-library/react
+- **覆盖率要求**: 80% (branches, functions, lines, statements)
+- **测试环境**: jsdom
+- **Mock 配置**: 样式文件、图片资源、外部依赖
+
+## 开发规范
+
+### 代码规范
+- **ESLint**: 基于 za/typescript-react 规范
+- **Prettier**: 统一代码格式化
+- **Stylelint**: Less/CSS 代码规范
+- **Commitlint**: 提交信息规范 (Conventional Commits)
+
+### 组件开发规范
+1. **目录结构**: 每个组件独立目录，包含 index.tsx、propsType.ts、demos/、__tests__/
+2. **类型定义**: 完整的 TypeScript 接口定义
+3. **文档编写**: 使用 Dumi 编写组件文档和示例
+4. **测试覆盖**: 每个组件需要单元测试
+5. **样式隔离**: 使用 Less 模块化开发
+
+### 版本发布
+```bash
+# Beta 版本发布
+npm run release:beta
+
+# 正式版本发布  
+npm run release
+
+# 内网发布
+npm publish --registry https://npm.zhonganinfo.com
+```
+
+## 浏览器兼容性
+- **现代浏览器**: Chrome, Firefox, Safari, Edge (最新两个版本)
+- **移动端**: iOS >= 7, Android >= 4
+- **IE**: IE >= 11
+
+## 业务集成
+
+### 安装使用
+```bash
+npm install @zat-design/sisyphus-react --save
+```
+
+### 按需加载配置
+```javascript
+// babel.config.js
+[
+  'babel-plugin-import',
+  {
+    libraryName: '@zat-design/sisyphus-react',
+    camel2DashComponentName: false,
+    libraryDirectory: 'es',
+    style: false,
+  },
+  '@zat-design/sisyphus-react'
+]
+```
+
+### 基础使用
+```tsx
+import React from 'react';
+import { ProForm, ProTable } from '@zat-design/sisyphus-react';
+
+const App = () => {
+  return (
+    <ProForm
+      columns={[
+        {
+          type: 'Input',
+          label: '姓名',
+          name: 'name',
+          rules: [{ required: true, message: '请输入姓名！' }],
+        }
+      ]}
+    />
+  );
+};
+```
+
+## 扩展和定制
+
+### 主题定制
+通过 ProThemeTools 组件或 Less 变量覆盖实现主题定制：
+```less
+@ant-prefix: ant;
+@border-radius-base: 4px;
+```
+
+### 组件扩展
+如果现有组件无法满足业务需求，可以：
+1. 联系组件库维护团队进行功能扩展
+2. 基于现有组件进行二次封装
+3. 复制源码进行本地化修改
+
+## 维护和支持
+
+### 开发团队
+- 基于中安科技内部需求开发
+- 遵循企业级组件库最佳实践
+- 持续迭代优化，保持技术先进性
+
+### 技术支持
+- 官方文档：完整的 API 文档和使用示例
+- 在线预览：实时查看组件效果和代码
+- 版本管理：详细的更新日志和迁移指南
+
+这个组件库为企业级 React 应用提供了完整的 UI 组件解决方案，通过配置化的方式大大提升了开发效率，同时保持了良好的可维护性和扩展性。