项目结构 #

my-antd-app/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   ├── images/
│   │   └── styles/
│   │       ├── global.css
│   │       └── variables.css
│   ├── components/
│   │   ├── common/
│   │   │   ├── Button/
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   └── index.ts
│   │   └── business/
│   │       ├── UserCard/
│   │       └── index.ts
│   ├── hooks/
│   │   ├── useAuth.ts
│   │   └── useRequest.ts
│   ├── layouts/
│   │   ├── BasicLayout/
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   └── index.ts
│   ├── pages/
│   │   ├── Home/
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   ├── User/
│   │   │   ├── List/
│   │   │   └── Detail/
│   │   └── index.ts
│   ├── services/
│   │   ├── api.ts
│   │   └── user.ts
│   ├── store/
│   │   ├── index.ts
│   │   └── modules/
│   │       └── user.ts
│   ├── utils/
│   │   ├── request.ts
│   │   ├── storage.ts
│   │   └── format.ts
│   ├── types/
│   │   └── index.d.ts
│   ├── constants/
│   │   └── index.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── router.tsx
├── .env
├── .env.development
├── .env.production
├── package.json
├── tsconfig.json
└── vite.config.ts

components/
├── common/              通用组件
│   ├── Button/
│   │   ├── index.tsx    组件入口
│   │   ├── style.ts     样式文件
│   │   └── types.ts     类型定义
│   └── index.ts         统一导出
└── business/            业务组件
    ├── UserCard/
    └── index.ts

pages/
├── Home/
│   ├── index.tsx        页面入口
│   ├── style.ts         页面样式
│   ├── components/      页面私有组件
│   │   └── Hero/
│   └── hooks/           页面私有 hooks
│       └── useHome.ts
└── User/
    ├── List/
    │   ├── index.tsx
    │   └── style.ts
    └── Detail/
        ├── index.tsx
        └── style.ts

services/
├── api.ts               API 配置
├── request.ts           请求封装
└── modules/
    ├── user.ts          用户相关 API
    ├── product.ts       产品相关 API
    └── order.ts         订单相关 API

store/
├── index.ts             Store 入口
└── modules/
    ├── user.ts          用户状态
    ├── app.ts           应用状态
    └── permission.ts    权限状态

hooks/
├── useAuth.ts           认证 Hook
├── useRequest.ts        请求 Hook
├── useTable.ts          表格 Hook
└── useModal.ts          弹窗 Hook

utils/
├── request.ts           请求工具
├── storage.ts           存储工具
├── format.ts            格式化工具
├── validate.ts          验证工具
└── constants.ts         常量定义

import React from 'react';
import { ButtonProps } from './types';
import styles from './style';

const MyButton: React.FC<ButtonProps> = ({ type = 'primary', children, ...props }) => {
  return (
    <button className={styles[type]} {...props}>
      {children}
    </button>
  );
};

export default MyButton;

import MyButton from './MyButton';
import MyInput from './MyInput';

export { MyButton, MyInput };

import { lazy } from 'react';
import { RouteObject } from 'react-router-dom';

const Home = lazy(() => import('@/pages/Home'));
const UserList = lazy(() => import('@/pages/User/List'));

const routes: RouteObject[] = [
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'user', element: <UserList /> },
    ],
  },
];

export default routes;

import request from '@/utils/request';

export const userApi = {
  getList: (params) => request.get('/users', { params }),
  getDetail: (id) => request.get(`/users/${id}`),
  create: (data) => request.post('/users', data),
  update: (id, data) => request.put(`/users/${id}`, data),
  delete: (id) => request.delete(`/users/${id}`),
};

import React, { useState, useEffect } from 'react';
import { Button, Input } from 'antd';
import { useNavigate } from 'react-router-dom';

import { userApi } from '@/services/user';
import { formatDate } from '@/utils/format';
import { useAuth } from '@/hooks/useAuth';

import styles from './style';

const UserList = () => {
  return (
    <div>
      <UserListHeader />
      <UserListTable />
      <UserListFooter />
    </div>
  );
};