()(
persist(
(set) => ({
colorPrimary: "#1DA57A",
setColorPrimary: (colorPrimary) => set({ colorPrimary }),
collapsed: false,
setCollapsed: (collapsed) => set({ collapsed }),
}),
{
name: "app-settings",
},
),
);
```
3. 添加自定义主题色
修改 pages/landing/index.tsx
```tsx
import { Button, ColorPicker, DatePicker, Flex, Typography } from "antd";
import { useSettingsStore } from "@/stores/settings";
const { RangePicker } = DatePicker;
export default function LandingPage() {
const colorPrimary = useSettingsStore((state) => state.colorPrimary);
const setColorPrimary = useSettingsStore((state) => state.setColorPrimary);
return (
Landing Page
{/* */}
{
setColorPrimary(color.toHex());
}}
/>
);
}
```
4. 添加 antd message等静态方法
新建 src/components/static-antd/index.tsx
```tsx
import { App } from "antd";
import type { MessageInstance } from "antd/es/message/interface";
import type { ModalStaticFunctions } from "antd/es/modal/confirm";
import type { NotificationInstance } from "antd/es/notification/interface";
let message: MessageInstance;
let notification: NotificationInstance;
let modal: Omit;
export default function StaticAntd() {
const staticFunction = App.useApp();
// window.$message = staticFunction.message;
// window.$modal = staticFunction.modal;
// window.$notification = staticFunction.notification;
message = staticFunction.message;
modal = staticFunction.modal;
notification = staticFunction.notification;
return null;
}
// eslint-disable-next-line react-refresh/only-export-components
export { message, modal, notification };
```
5. 布局
安装 antd icons
```tsx
npm install @ant-design/icons --save
```
新建 src/layouts/sider/index.tsx
```tsx
import { useEffect, useRef, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { AreaChartOutlined, HomeOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
import { Layout, Menu, type MenuProps } from "antd";
import { useTheme } from "@/components/theme-provider";
import ReactIcon from "@/assets/react.svg";
import { useSettingsStore } from "@/stores/settings";
// 递归函数，找到匹配的菜单项
const findSelectedKeys = (items: MenuProps["items"], pathname: string, path: string[] = []) => {
const selectedKeys: string[] = [];
let openKeys: string[] = [];
const travel = (items: MenuProps["items"], pathname: string, path: string[]) => {
for (const item of items!) {
if (item!.key === pathname) {
selectedKeys.push(item!.key);
openKeys = [...path];
return;
}
if ((item as any).children) {
path.push(item!.key as string);
travel((item as any).children, pathname, path);
path.pop();
}
}
};
travel(items, pathname, path);
return { selectedKeys, openKeys };
};
const items: MenuProps["items"] = [
{
icon: ,
label: 首页,
key: "/landing",
},
{
icon: ,
label: 用户管理,
key: "/user-management",
},
{
icon: ,
label: "一级菜单",
key: "/nav",
children: [
{
key: "/nest-menu/sub-menu-1",
label: 二级菜单-1,
},
{
key: "/nest-menu/sub-menu-2",
label: 二级菜单-2,
},
],
},
{
icon: ,
label: 图表,
key: "/echarts",
},
];
export default function Sider() {
const location = useLocation();
const firstRenderRef = useRef(true);
const [selectedKeys, setSelectedKeys] = useState([]);
const [openKeys, setOpenKeys] = useState([]);
const collapsed = useSettingsStore((state) => state.collapsed);
const { isDarkMode } = useTheme();
useEffect(() => {
if (location.pathname === "/") return;
// 首次渲染时，设置默认值
if (firstRenderRef.current) {
const { selectedKeys, openKeys } = findSelectedKeys(items, location.pathname);
setSelectedKeys(selectedKeys);
setOpenKeys(openKeys);
}
// 将首次渲染标记设置为false
firstRenderRef.current = false;
}, [location.pathname]);
return (
{collapsed ? null : React Admin}
);
}
```
更新 src/layouts/index.tsx
```tsx
import { useNavigate } from "react-router-dom";
import { LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Button, Flex, Layout } from "antd";
import { ThemeSwitch } from "@/components/theme-switch";
import Breadcrumb from "./components/bread-crumb";
import UserAvatar from "./components/user-avatar";
import Content from "./content";
import Sider from "./sider";
import { useSettingsStore } from "@/stores/settings";
export default function MainLayout() {
const navigate = useNavigate();
const collapsed = useSettingsStore((state) => state.collapsed);
const setCollapsed = useSettingsStore((state) => state.setCollapsed);
return (
);
}
```
6. 添加路由切换页面淡入淡出动画
安装 framer-motion
```js
npm install framer-motion
```
封装PageAnimate组件：
```tsx
import type { PropsWithChildren } from "react";
import { AnimatePresence, motion } from "framer-motion";
export function PageAnimate({ children }: PropsWithChildren) {
return (
{children}
);
}
```
将 layouts/index.tsx 中的 content 拆分出来
```tsx
import { Outlet, useMatches } from "react-router-dom";
import { Layout } from "antd";
import { PageAnimate } from "@/components/page-animate";
export default function Content() {
const matches = useMatches();
const currRouter = matches.at(-1);
return (
{/* Outlet是子路由的占位符 */}
);
}
```
# 添加 @tanstack/react-query
用于处理 React 中获取、缓存和更新异步数据
自动缓存+重新获取+窗口重新聚焦+轮询/实时
并行+依赖查询
突变+反应式查询重取
多层缓存+自动垃圾回收
分页+基于游标的查询
无限滚动查询/滚动恢复
请求取消
支持 React Suspense
支持预查询
```js
npm add @tanstack/react-query @tanstack/react-query-devtools
```
修改 main.tsx
```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // 窗口聚焦时重新获取数据
refetchOnReconnect: false, // 网络重新连接时重新获取数据
retry: false, // 失败时重试
},
},
});
createRoot(document.getElementById("root")!).render(
,
);
```