gzkx-package 0.0.1

package/README.md

@@ -0,0 +1,263 @@
+# CommonPage 组件库
+
+一个基于 React 和 Ant Design 的通用页面组件库，提供完整的 CRUD 功能。
+
+## 安装
+
+```bash
+npm install gzkx-package
+# 或
+yarn add gzkx-package
+# 或
+pnpm add gzkx-package
+```
+
+## 使用
+
+### 基础用法
+
+```tsx
+import React from 'react';
+import { CommonPage } from 'gzkx-package';
+import 'gzkx-package/style';
+
+// 引入样式文件
+import 'gzkx-package/dist/style.css';
+
+function App() {
+  const searchFormConfig = [
+    {
+      type: 'input',
+      label: '名称',
+      name: 'name',
+      placeholder: '请输入名称',
+    },
+    {
+      type: 'select',
+      label: '状态',
+      name: 'status',
+      options: [
+        { label: '启用', value: '1' },
+        { label: '禁用', value: '0' },
+      ],
+    },
+  ];
+
+  const addFormConfig = [
+    {
+      type: 'input',
+      label: '名称',
+      name: 'name',
+      rules: [{ required: true, message: '请输入名称' }],
+    },
+  ];
+
+  const tableColumns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+  ];
+
+  const URL = {
+    search: '/api/search',
+    add: '/api/add',
+    edit: '/api/edit',
+    delete: '/api/delete',
+  };
+
+  return (
+    <CommonPage
+      searchFormConfig={searchFormConfig}
+      addFormConfig={addFormConfig}
+      tableColumns={tableColumns}
+      URL={URL}
+    />
+  );
+}
+
+export default App;
+```
+
+### 使用 ref 调用组件方法
+
+```tsx
+import React, { useRef } from 'react';
+import { CommonPage, CommonPageHandle } from 'gzkx-package';
+
+function App() {
+  const commonPageRef = useRef<CommonPageHandle>(null);
+
+  const handleRefresh = () => {
+    commonPageRef.current?.reload();
+  };
+
+  const handleSetFormValues = () => {
+    commonPageRef.current?.setFieldsValue({
+      name: '测试名称',
+    });
+  };
+
+  return (
+    <>
+      <button onClick={handleRefresh}>刷新列表</button>
+      <button onClick={handleSetFormValues}>设置表单值</button>
+      <CommonPage
+        ref={commonPageRef}
+        searchFormConfig={searchFormConfig}
+        addFormConfig={addFormConfig}
+        tableColumns={tableColumns}
+        URL={URL}
+      />
+    </>
+  );
+}
+```
+
+## API
+
+### CommonPage Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| searchFormConfig | 搜索表单配置 | FormItemConfig[] \| null | null |
+| addFormConfig | 新增/编辑表单配置 | AddItemConfig[] | - |
+| tableColumns | 表格列配置 | any[] | - |
+| URL | API 接口地址配置 | { search?: string; add?: string; edit?: string; delete?: string; view?: string } | - |
+| topHeight | 顶部高度 | number | - |
+| isnopage | 是否不分页 | boolean | false |
+| tableHeight | 表格高度 | number | 150 |
+| actionWidth | 操作列宽度 | number | 150 |
+| delText | 删除按钮文本 | string | '删除' |
+| editText | 编辑按钮文本 | string | '编辑' |
+| viewText | 查看按钮文本 | string | '查看' |
+| CustomOperations | 自定义操作列 | React.ReactNode \| ((record: any) => React.ReactNode) | - |
+| PropOtherButton | 其他按钮 | React.ReactNode \| ((record: any) => React.ReactNode) | - |
+| CustomModalFooter | 自定义模态框底部 | ((record: any) => React.ReactNode) | - |
+| addisdisabled | 是否禁用新增按钮 | { isdisabled: boolean; message: string } | { isdisabled: false, message: '' } |
+| postParams | POST 请求参数 | { addParams?: any; delParams?: any; editParams?: any; searchParams?: any } | - |
+| limit | 权限控制 | { addLimit?: boolean; delLimit?: boolean; editLimit?: boolean; searchLimit?: boolean } | { addLimit: true, delLimit: true, editLimit: true, searchLimit: true } |
+| proplist | 假数据（用于测试） | any[] | - |
+| editdclickback | 编辑/新增点击回调 | (record?: any) => void | - |
+| oneditFormChange | 表单值变化回调 | (changedValues: any, allValues: any) => void | - |
+| onRowClick | 行点击回调 | (record: any, event: any) => void | - |
+| tableId | 表格ID（用于保存表格配置） | string | - |
+| isaddtab | 是否使用 Tab 表单 | boolean | false |
+
+### CommonPageHandle Methods
+
+| 方法 | 说明 | 类型 |
+|------|------|------|
+| getList | 获取列表数据 | (parentParams?: any) => Promise<void> |
+| setFieldsValue | 设置表单值 | (values: any) => void |
+| getFieldsValue | 获取表单值 | () => any |
+| reload | 重新加载列表 | () => void |
+
+## 注意事项
+
+### 依赖要求
+
+本组件库依赖以下 peer dependencies，请确保在使用前已安装：
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `antd` >= 5.0.0
+- `lodash` >= 4.17.0
+- `dayjs` >= 1.11.0
+- `pinyin-pro` >= 3.0.0
+- `axios` >= 1.0.0
+
+### API 请求配置
+
+组件内部使用 `commonPost` 函数进行 API 请求。由于组件依赖项目特定的 API 函数，您需要：
+
+1. **提供 `commonPost` 函数**：组件需要从 `@/api/common` 导入 `commonPost` 函数。如果您的项目结构不同，需要：
+   - 创建对应的 API 文件，或
+   - 修改组件中的导入路径
+
+2. **提供 `auth` 工具**：组件需要从 `@/utils/auth` 导入 `auth` 对象。如果您的项目结构不同，需要：
+   - 创建对应的工具文件，或
+   - 修改组件中的导入路径
+
+3. **API 响应格式**：确保 API 返回符合以下格式：
+
+```typescript
+{
+  code: 200,
+  msg: 'success',
+  data: {
+    list: [], // 或直接是数组
+    pageNum: 1,
+    pageSize: 15,
+    total: 0
+  }
+}
+```
+
+### 项目结构要求
+
+组件使用路径别名 `@/` 来导入依赖。如果您的项目结构不同，需要：
+
+1. 在 `tsconfig.json` 中配置路径别名：
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}
+```
+
+2. 确保以下文件存在：
+   - `src/api/common.ts` - 包含 `commonPost` 函数
+   - `src/utils/auth.ts` - 包含 `auth` 对象
+   - `src/utils/request.ts` - 包含 `post` 和 `get` 函数
+   - `src/utils/pycode.ts` - 包含拼音转换函数
+   - `src/api/table.ts` - 包含表格配置相关的 API 函数
+
+### 业务组件依赖
+
+组件还依赖以下业务组件（如果使用相关功能）：
+- `AreaSelector` - 地址选择器
+- `ImageUploadComponent` - 图片上传组件
+- `FileUploadComponent` - 文件上传组件
+- `RichText` - 富文本编辑器
+
+如果您的项目中没有这些组件，需要：
+1. 创建对应的组件，或
+2. 在表单配置中避免使用相关类型（`area`、`upload`、`file`、`richText`）
+
+### 样式引入
+
+请确保在使用组件前引入样式文件：
+
+```tsx
+import 'gzkx-package/dist/style.css';
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建库
+npm run build:lib
+
+# 发布到 npm
+npm publish
+```
+
+## License
+
+MIT