前端开发

本框架采用了模块化的前端开发模式，旨在提高代码的可维护性和可扩展性。

1. 模块结构

如果您正在开发一个新的业务模块（例如 products），请将其放置在 src/modules/ 目录下。该目录下的模块支持自动路由和菜单注册。

请遵循以下目录结构：

src/modules/products/
├── components/          # 模块私有组件
├── Products.tsx         # 主页面
├── ProductDetail.tsx    # 详情页
├── routes.tsx           # 路由配置文件 (自动注册)
└── menu.ts              # 菜单配置文件 (自动注册)

2. 创建页面组件

在模块目录下创建页面文件，文件命名遵循大驼峰。

// src/modules/products/Products.tsx
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export function Products() {
  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold">产品管理</h1>
      <Card>
        <CardHeader>
          <CardTitle>产品列表</CardTitle>
        </CardHeader>
        <CardContent>
          {/* 功能实现代码 */}
        </CardContent>
      </Card>
    </div>
  );
}

3. 配置模块路由

在模块目录下创建 routes.tsx，导出名为 routes 的变量。系统会自动将其注册到主路由中。

// src/modules/products/routes.tsx
import { Route } from 'react-router-dom';
import { Products } from './Products';

export const routes = (
  <>
    <Route path="products/list" element={<Products />} />
    {/* 其他路由... */}
  </>
);

注意：无需在 src/App.tsx 中手动导入。

4. 配置模块菜单

在模块目录下创建 menu.ts，导出名为 menu 的变量。系统会自动将其添加到侧边栏。

// src/modules/products/menu.ts
import { PackageIcon } from '@heroicons/react/24/outline';

export const menu = {
  title: '产品管理',
  icon: PackageIcon,
  children: [
    { title: '产品列表', path: '/products/list' },
  ],
};

注意：无需在 src/components/menu.ts 中手动导入。

5. 开发规则总结

• 目录位置：必须放置在 src/modules/ 目录下。
• 自动注册导出名：路由必须导出为 routes，菜单必须导出为 menu。
• 页面命名：遵循大驼峰（如 Products.tsx）。
• 组件位置：模块私有组件存放在模块目录下的 components/。
• 路径规范：页面的访问路径通常为 /{module}/{page}。