1
2

pnpm add antd @ant-design/icons
pnpm add @ant-design/pro-components

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { Button, Table, ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { ProTable } from '@ant-design/pro-components';

<ConfigProvider locale={zhCN} theme={{ token: { colorPrimary: '#1890ff' } }}>
  <ProTable
    columns={columns}
    request={async (params) => fetchList(params)}
    rowKey="id"
    search={{ labelWidth: 'auto' }}
  />
</ConfigProvider>

1

pnpm add @ant-design/charts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { Line, Column, Pie } from '@ant-design/charts';

<Line
  data={salesData}
  xField="month"
  yField="value"
  point={{ size: 5, shape: 'diamond' }}
  smooth
/>

<Pie data={pieData} angleField="value" colorField="type" radius={0.8} innerRadius={0.5} />

1

pnpm add react-router-dom

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// src/main.tsx
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'users', element: <UserList /> },
      { path: 'users/:id', element: <UserDetail /> },
      {
        path: 'admin',
        element: <RequireAuth roles={['admin']}><Admin /></RequireAuth>,
      },
    ],
  },
  { path: '/login', element: <Login /> },
  { path: '*', element: <NotFound /> },
]);

<RouterProvider router={router} />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// src/Layout.tsx
import { Link, Outlet, useNavigate } from 'react-router-dom';

export const Layout = () => (
  <div>
    <nav>
      <Link to="/">首页</Link>
      <Link to="/users">用户</Link>
    </nav>
    <Outlet />
  </div>
);

1

pnpm add @reduxjs/toolkit react-redux

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import { userApi } from './api/user';
import counterReducer from './slices/counter';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    [userApi.reducerPath]: userApi.reducer,
  },
  middleware: (getDefault) => getDefault().concat(userApi.middleware),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// src/store/slices/counter.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    incrementBy: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// src/store/api/user.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User'],
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => 'users',
      providesTags: ['User'],
    }),
    getUser: builder.query<User, number>({
      query: (id) => `users/${id}`,
    }),
    createUser: builder.mutation<User, Partial<User>>({
      query: (body) => ({
        url: 'users',
        method: 'POST',
        body,
      }),
      invalidatesTags: ['User'],
    }),
  }),
});

export const { useGetUsersQuery, useGetUserQuery, useCreateUserMutation } = userApi;

1
2
3

// 使用
const { data: users, isLoading, refetch } = useGetUsersQuery();
const [createUser] = useCreateUserMutation();

1
2
3

pnpm add -D unocss
pnpm add @unocss/reset
pnpm add @unocss/preset-wind3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { defineConfig, presetWind3 } from 'unocss';

export default defineConfig({
  presets: [presetWind3()],
  theme: {
    colors: {
      primary: '#1890ff',
    },
  },
});

1
2
3
4

<div className="flex items-center gap-4 p-4 bg-white">
  <h1 className="text-2xl font-bold text-primary">标题</h1>
  <Button className="ml-auto">操作</Button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

src/
├── api/                  # 业务 API 抽象
│   ├── user.ts
│   └── order.ts
├── pages/                # 页面
│   ├── Home/
│   ├── UserList/
│   └── UserDetail/
├── components/           # 业务组件
├── layouts/              # 布局
├── hooks/                # 自定义 hooks
├── utils/                # 工具函数
├── store/                # Redux
│   ├── index.ts
│   ├── slices/
│   └── api/
├── routes/               # 路由配置
├── types/                # TS 类型
├── App.tsx
└── main.tsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// src/components/RequireAuth.tsx
import { Navigate, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';

export const RequireAuth = ({ roles, children }) => {
  const user = useSelector((s) => s.user);
  const location = useLocation();

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  if (roles && !roles.includes(user.role)) {
    return <Navigate to="/403" replace />;
  }

  return children;
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react(), unocss()],
  build: {
    target: 'es2020',
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom', 'react-router-dom'],
          antd: ['antd', '@ant-design/icons'],
          charts: ['@ant-design/charts'],
        },
      },
    },
  },
});