ERPTurbo_Admin/.lingma/rules/add-new-page.md

添加新页面指南

本文档总结了在 ERPTurbo_Admin 项目中添加新页面所需的所有步骤和代码。

基本步骤

1. 创建页面组件
2. （可选）创建对应的业务组件
3. 在路由中注册页面（如果使用约定式路由则不需要）

详细说明

1. 创建页面组件

在 packages/app-operation/src/pages/ 目录下创建一个新的页面文件，例如 NewPage.tsx：

import { NewComponentList } from '@/components';

export default function Page() {
  return <NewComponentList />;
}

页面组件应:

• 默认导出一个函数式组件，名称为 Page
• 直接返回要渲染的组件
• 从 '@/components' 导入需要的业务组件

2. 创建业务组件（如果需要）

如果页面需要展示特定业务数据，需要在 packages/app-operation/src/components/ 目录下创建对应的业务组件。

例如，在 packages/app-operation/src/components/BasicData/ 目录下创建 NewComponentList.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<BusinessAPI.NewComponentVO, BizValueType>[] = [
    {
      title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
      dataIndex: 'name',
      key: 'name',
      renderText: (text: string) => <span className="font-medium">{text}</span>,
    },
    // 更多列定义...根据 BusinessAPI.NewComponentVO 的字段来生成
  ];

  const formContext = [
    <ProFormText key={'name'} name={'name'} /* 表单字段配置 */ />,
    // 更多表单字段...根据 BusinessAPI.NewComponentVO 的字段来生成
  ];

  const detailColumns: ProDescriptionsItemProps<
    BusinessAPI.NewComponentVO,
    BizValueType
  >[] = columns as ProDescriptionsItemProps<
    BusinessAPI.NewComponentVO,
    BizValueType
  >[];

  return (
    <BizContainer<
      typeof business.newComponent,
      BusinessAPI.NewComponentVO,
      BusinessAPI.NewComponentPageQry,
      BusinessAPI.NewComponentCreateCmd,
      BusinessAPI.NewComponentUpdateCmd
    >
      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 文件中导出：

export { default as NewComponentList } from './NewComponentList';

例如，在 packages/app-operation/src/components/BasicData/index.ts 中添加导出。

4. 国际化配置

在 packages/app-operation/src/locales/zh-CN.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. 遵循项目现有的代码风格和结构