diff --git a/.lingma/rules/add-new-page.md b/.lingma/rules/add-new-page.md new file mode 100644 index 0000000..9c824f0 --- /dev/null +++ b/.lingma/rules/add-new-page.md @@ -0,0 +1,241 @@ +# 添加新页面指南 + +本文档总结了在 ERPTurbo_Admin 项目中添加新页面所需的所有步骤和代码。 + +## 基本步骤 + +1. 创建页面组件 +2. (可选)创建对应的业务组件 +3. 在路由中注册页面(如果使用约定式路由则不需要) + +## 详细说明 + +### 1. 创建页面组件 + +在 `packages/app-operation/src/pages/` 目录下创建一个新的页面文件,例如 `NewPage.tsx`: + +```tsx +import { NewComponentList } from '@/components'; + +export default function Page() { + return ; +} +``` + +页面组件应: +- 默认导出一个函数式组件,名称为 `Page` +- 直接返回要渲染的组件 +- 从 '@/components' 导入需要的业务组件 + +### 2. 创建业务组件(如果需要) + +如果页面需要展示特定业务数据,需要在 `packages/app-operation/src/components/` 目录下创建对应的业务组件。 + +例如,在 `packages/app-operation/src/components/BasicData/` 目录下创建 `NewComponentList.tsx`: + +```tsx +import { BizContainer, BizValueType, ModeType } from '@/components'; +import { business } from '@/services'; +import { useIntl } from '@@/exports'; +import { + ProColumns, + ProFormMoney, + ProFormSwitch, + ProFormText, +} from '@ant-design/pro-components'; +import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions'; +import React from 'react'; + +interface INewComponentListProps { + ghost?: boolean; + id?: BusinessAPI.NewComponentVO['id']; + search?: boolean; + onValueChange?: () => void; + mode?: ModeType; + trigger?: () => React.ReactNode; +} + +export default function NewComponentList(props: INewComponentListProps) { + const { + ghost = false, + itemId, + search = true, + mode = 'drag', + trigger, + onValueChange, + } = props; + + const intl = useIntl(); + const intlPrefix = 'newComponent'; + + const columns: ProColumns[] = [ + { + title: intl.formatMessage({ id: intlPrefix + '.column.name' }), + dataIndex: 'name', + key: 'name', + renderText: (text: string) => {text}, + }, + // 更多列定义...根据 BusinessAPI.NewComponentVO 的字段来生成 + ]; + + const formContext = [ + , + // 更多表单字段...根据 BusinessAPI.NewComponentVO 的字段来生成 + ]; + + const detailColumns: ProDescriptionsItemProps< + BusinessAPI.NewComponentVO, + BizValueType + >[] = columns as ProDescriptionsItemProps< + BusinessAPI.NewComponentVO, + BizValueType + >[]; + + return ( + + rowKey={'id'} + permission={'operation-new-component'} + func={business.newComponent} + method={'newComponent'} + methodUpper={'NewComponent'} + intlPrefix={intlPrefix} + modeType={mode} + onValueChange={onValueChange} + container={{}} + remark={{ + mode: 'editor', + }} + status + drag={{ + fieldProps: { + bordered: true, + ghost, + search, + params: { + // 这里可以添加特定的查询参数 + }, + }, + columns, + }} + create={{ + formType: 'drawer', + formContext, + initValues: { + showInEntry: false, + status: true, + }, + }} + update={{ + formType: 'drawer', + formContext, + }} + destroy={{}} + detail={{ + rowId: id, + formType: 'drawer', + columns: detailColumns, + trigger, + }} + /> + ); +} +``` + +业务组件要点: +- 使用 `BizContainer` 组件来构建标准的增删改查页面 +- 定义国际化前缀 `intlPrefix` 用于多语言支持 +- 定义表格列 `columns` 和表单字段 `formContext` +- 使用 `useIntl()` 进行国际化处理 + +### 3. 导出组件(如果创建了新组件) + +如果创建了新的业务组件,需要在对应目录的 `index.ts` 文件中导出: + +```ts +export { default as NewComponentList } from './NewComponentList'; +``` + +例如,在 `packages/app-operation/src/components/BasicData/index.ts` 中添加导出。 + +### 4. 国际化配置 + +在 `packages/app-operation/src/locales/zh-CN.ts` 中添加对应中文翻译: + +```ts +newComponent: { + column: { + name: '名称', + // 更多字段... + }, + form: { + name: { + label: '名称', + placeholder: '请输入名称', + required: '名称为必填项', + }, + // 更多表单字段... + }, + modal: { + create: { + title: '新增', + button: '新增', + success: '新增成功', + }, + update: { + title: '更新', + button: '编辑', + success: '更新成功', + status: { + success: '修改状态成功', + }, + }, + delete: { + success: '删除成功', + button: '删除', + confirm: { + title: '确认删除', + content: '您确定要删除该项吗?', + okText: '确定', + cancelText: '取消', + }, + }, + import: { + title: '导入', + button: '导入', + success: '导入成功', + }, + view: { + title: '查看', + button: '查看', + }, + }, +}, +``` + +### 5. 路由配置 + +项目使用约定式路由,页面文件放置在 `packages/app-operation/src/pages/` 目录下会自动注册为路由。 + +例如,创建 `packages/app-operation/src/pages/NewPage.tsx` 文件后,访问路径为 `/new-page`。 + +## 示例参考 + +可以参考以下最近添加的页面: + +1. `packages/app-operation/src/pages/ProductionAdvance.tsx` +2. `packages/app-operation/src/pages/WorkerAdvance.tsx` +3. `packages/app-operation/src/components/BasicData/ProductionAdvanceList.tsx` +4. `packages/app-operation/src/components/BasicData/WorkerAdvanceList.tsx` + +## 注意事项 + +1. 页面组件必须默认导出名为 `Page` 的函数组件 +2. 使用已有的业务组件和容器组件以保持一致性 +3. 国际化是必需的,所有显示文本都需要支持多语言 +4. 遵循项目现有的代码风格和结构 diff --git a/packages/app-operation/src/components/BasicData/ExcipientList.tsx b/packages/app-operation/src/components/BasicData/ExcipientList.tsx index 3be8928..b9fbec0 100644 --- a/packages/app-operation/src/components/BasicData/ExcipientList.tsx +++ b/packages/app-operation/src/components/BasicData/ExcipientList.tsx @@ -63,6 +63,7 @@ export default function ExcipientList(props: IExcipientListProps) { const formContext = [