feat: 添加路由拦截器/修复打包侧边栏图标失效问题

.env.development

@@ -8,7 +8,7 @@ VITE_APP_BASE_API='/api'
 VITE_APP_TITLE=开发环境
 
 # 网络请求公用地址
-VITE_API_BASE_URL='http://127.0.0.1:5050'
+VITE_API_BASE_URL='http://127.0.0.1:3000'
 #VITE_API_BASE_URL='http://1.95.0.111:4000'
 
 VITE_TITLE_NAME='五味子云存储'

package.json

@@ -36,8 +36,7 @@
 		"regenerator-runtime": "^0.14.1",
 		"timer-manager-lib": "^1.0.2",
 		"vite-plugin-compression": "^0.5.1",
-		"vite-plugin-html": "^3.2.2",
+		"vite-plugin-html": "^3.2.2"
-		"vite-plugin-svg-icons": "^2.0.1"
 	},
 	"devDependencies": {
 		"@rollup/plugin-babel": "^6.0.4",
@@ -63,6 +62,7 @@
 		"stylelint-order": "^6.0.4",
 		"typescript": "^5.4.5",
 		"vite": "^5.2.12",
-		"vite-plugin-node-polyfills": "^0.22.0"
+		"vite-plugin-node-polyfills": "^0.22.0",
+		"vite-plugin-svgr": "^4.2.0"
 	}
 }

src/App.tsx

@@ -0,0 +1,17 @@
+/** @format */
+
+import { BrowserRouter } from "react-router-dom";
+import GetRouter from "@/router/getRouter.tsx";
+import AuthRoute from "@/router/useAuth.tsx";
+
+const App = () => {
+	return (
+		<BrowserRouter>
+			<AuthRoute>
+				<GetRouter />
+			</AuthRoute>
+		</BrowserRouter>
+	);
+};
+
+export default App;

src/api/user/index.ts

@@ -122,3 +122,16 @@ export const generateQRCode = (clientId: string) => {
 		},
 	});
 };
+/**
+ * 获取用户操蛋权限
+ * @param userId
+ */
+export const getUserMenuPermission = (userId: string): any => {
+	return web.request({
+		url: "/auth/permission/selectUserPermission",
+		method: "get",
+		params: {
+			userId: userId,
+		},
+	});
+};

src/assets/icons/dashboard.svg

@@ -1 +1,21 @@
-<svg t="1719935834179" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18524" width="200" height="200"><path d="M524.713318 55.476298C269.808975 55.476298 62.410835 262.874438 62.410835 517.778781S269.808975 980.081264 524.713318 980.081264s462.302483-207.39814 462.302483-462.302483S779.617661 55.476298 524.713318 55.476298z" fill="#3E6CDE" p-id="18525"></path><path d="M524.713318 922.293454c-223.060948 0-404.514673-181.453725-404.514672-404.514673S301.65237 113.264108 524.713318 113.264108s404.514673 181.453725 404.514673 404.514673-181.453725 404.514673-404.514673 404.514673z" fill="#FFFFFF" p-id="18526"></path><path d="M487.72912 122.510158c-199.894971 0-360.595937 160.700966-360.595937 360.595937 0 199.890348 160.700966 360.595937 360.595937 360.595937 199.890348 0 360.595937-160.705589 360.595936-360.595937 0-199.894971-160.705589-360.595937-360.595936-360.595937z" fill="#F4D44B" p-id="18527"></path><path d="M524.713318 402.20316c-21.38149 0-41.144921 6.213345-58.33795 16.384L324.503982 276.715774a28.893905 28.893905 0 0 0-40.85367 40.853671l141.871386 141.871386A113.994546 113.994546 0 0 0 409.137698 517.778781c0 63.737643 51.837977 115.575621 115.57562 115.575621s115.575621-51.837977 115.575621-115.575621-51.837977-115.575621-115.575621-115.575621z" fill="#3E6CDE" p-id="18528"></path><path d="M524.713318 575.566591c-31.871133 0-57.78781-25.916677-57.78781-57.78781S492.842185 459.990971 524.713318 459.990971s57.78781 25.916677 57.787811 57.78781-25.916677 57.78781-57.787811 57.78781z" fill="#FFFFFF" p-id="18529"></path><path d="M524.713318 194.684822c-44.034312 0-86.769553 8.700533-126.962131 25.893562a28.889282 28.889282 0 0 0-16.106618 37.55283 28.893905 28.893905 0 0 0 38.847278 15.551856 263.350609 263.350609 0 0 1 104.193733-21.238176c146.258637 0 265.301526 119.010528 265.301526 265.306149a28.898528 28.898528 0 0 0 57.78781 0c0.032361-178.12977-144.90409-323.066221-323.061598-323.066221zM265.449463 375.648506a28.893905 28.893905 0 0 0-37.908804 15.200505A320.671494 320.671494 0 0 0 201.623982 517.778781a28.893905 28.893905 0 0 0 57.78781 0c0-36.202907 7.13795-71.28242 21.210438-104.189111a28.838429 28.838429 0 0 0-15.071061-37.894934l-0.101706-0.04623z" fill="#3E6CDE" p-id="18530"></path></svg>
+<svg t="1719935834179" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+	 p-id="18524" width="200" height="200">
+	<path
+		d="M524.713318 55.476298C269.808975 55.476298 62.410835 262.874438 62.410835 517.778781S269.808975 980.081264 524.713318 980.081264s462.302483-207.39814 462.302483-462.302483S779.617661 55.476298 524.713318 55.476298z"
+		fill="#3E6CDE" p-id="18525"></path>
+	<path
+		d="M524.713318 922.293454c-223.060948 0-404.514673-181.453725-404.514672-404.514673S301.65237 113.264108 524.713318 113.264108s404.514673 181.453725 404.514673 404.514673-181.453725 404.514673-404.514673 404.514673z"
+		fill="#FFFFFF" p-id="18526"></path>
+	<path
+		d="M487.72912 122.510158c-199.894971 0-360.595937 160.700966-360.595937 360.595937 0 199.890348 160.700966 360.595937 360.595937 360.595937 199.890348 0 360.595937-160.705589 360.595936-360.595937 0-199.894971-160.705589-360.595937-360.595936-360.595937z"
+		fill="#F4D44B" p-id="18527"></path>
+	<path
+		d="M524.713318 402.20316c-21.38149 0-41.144921 6.213345-58.33795 16.384L324.503982 276.715774a28.893905 28.893905 0 0 0-40.85367 40.853671l141.871386 141.871386A113.994546 113.994546 0 0 0 409.137698 517.778781c0 63.737643 51.837977 115.575621 115.57562 115.575621s115.575621-51.837977 115.575621-115.575621-51.837977-115.575621-115.575621-115.575621z"
+		fill="#3E6CDE" p-id="18528"></path>
+	<path
+		d="M524.713318 575.566591c-31.871133 0-57.78781-25.916677-57.78781-57.78781S492.842185 459.990971 524.713318 459.990971s57.78781 25.916677 57.787811 57.78781-25.916677 57.78781-57.787811 57.78781z"
+		fill="#FFFFFF" p-id="18529"></path>
+	<path
+		d="M524.713318 194.684822c-44.034312 0-86.769553 8.700533-126.962131 25.893562a28.889282 28.889282 0 0 0-16.106618 37.55283 28.893905 28.893905 0 0 0 38.847278 15.551856 263.350609 263.350609 0 0 1 104.193733-21.238176c146.258637 0 265.301526 119.010528 265.301526 265.306149a28.898528 28.898528 0 0 0 57.78781 0c0.032361-178.12977-144.90409-323.066221-323.061598-323.066221zM265.449463 375.648506a28.893905 28.893905 0 0 0-37.908804 15.200505A320.671494 320.671494 0 0 0 201.623982 517.778781a28.893905 28.893905 0 0 0 57.78781 0c0-36.202907 7.13795-71.28242 21.210438-104.189111a28.838429 28.838429 0 0 0-15.071061-37.894934l-0.101706-0.04623z"
+		fill="#3E6CDE" p-id="18530"></path>
+</svg>

src/components/Loading/index.less

@@ -1,10 +1,11 @@
-.loading-body {
+.loading-wrapper {
-	align-items: center;
+	align-items: center !important;
-	display: flex;
+	display: flex  !important;
-	justify-content: center;
+	justify-content: center  !important;
-	height: 100vh;
+	height: 100vh  !important;
-	overflow: hidden;
+	overflow: hidden  !important;
-	background-image: url("@/assets/images/background.png");
+	background-image: url("@/assets/images/background.png")  !important;
+	background-size: cover;
 }
 .gegga {
 	width: 0;

src/components/Loading/index.tsx

@@ -1,17 +1,12 @@
 /** @format */
 
-import React, { useEffect } from "react";
+import React from "react";
 import "./index.less";
 
 const Loading: React.FC = () => {
-	useEffect(() => {
-		document.body.classList.add("loading-body");
-		return () => {
-			document.body.classList.remove("loading-body");
-		};
-	}, []);
 	return (
 		<>
+			<div className={"loading-wrapper"}>
 				<svg className="gegga">
 					<defs>
 						<filter id="gegga">
@@ -57,6 +52,7 @@ const Loading: React.FC = () => {
 				{/*		d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>*/}
 				{/*	<circle className="strecken" cx="100" cy="100" r="64"></circle>*/}
 				{/*</svg>*/}
+			</div>
 		</>
 	);
 };

src/components/LoadingPage/index.less

@@ -1,10 +1,11 @@
-.splash-body {
+.loading-page{
-	align-items: center;
+	align-items: center !important;
-	display: flex;
+	display: flex !important;
-	justify-content: center;
+	justify-content: center !important;
-	height: 100vh;
+	height: 100vh !important;
-	overflow: hidden;
+	overflow: hidden !important;
-	background-image: url("@/assets/images/background.png");
+	background-image: url("@/assets/images/background.png") !important;
+	background-size: cover !important;
 }
 .gegga {
 	width: 0;

src/components/LoadingPage/index.tsx

@@ -17,16 +17,13 @@ const LoadingPage = () => {
 	store.setUserId(userId);
 	setStorage("token", token, 24 * 60 * 30);
 	useEffect(() => {
-		document.body.classList.add("loading-body");
 		if (store.getToken() !== null && store.getUserId() !== null) {
-			navigate("/main");
+			navigate("/main/home");
 		}
-		return () => {
-			document.body.classList.remove("loading-body");
-		};
 	}, []);
 	return (
 		<>
+			<div className={"loading-page"}>
 				<svg className="gegga">
 					<defs>
 						<filter id="gegga">
@@ -66,6 +63,7 @@ const LoadingPage = () => {
 						d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>
 					<circle className="strecken" cx="100" cy="100" r="64"></circle>
 				</svg>
+			</div>
 		</>
 	);
 };

src/components/Main/Share/components/ShareDetail.tsx

@@ -0,0 +1,7 @@
+/** @format */
+import React from "react";
+
+const ShareList: React.FunctionComponent = () => {
+	return <></>;
+};
+export default ShareList;

src/components/Main/Share/components/ShareList.tsx

@@ -0,0 +1,86 @@
+/** @format */
+
+import { LikeOutlined, MessageOutlined, StarOutlined } from "@ant-design/icons";
+import { ProList } from "@ant-design/pro-components";
+import { Button, Tag } from "antd";
+import React from "react";
+
+const IconText = ({ icon, text }: { icon: any; text: string }) => (
+	<span>
+		{React.createElement(icon, { style: { marginInlineEnd: 8 } })}
+		{text}
+	</span>
+);
+
+const dataSource = [
+	{
+		title: "语雀的天空",
+	},
+	{
+		title: "Ant Design",
+	},
+	{
+		title: "蚂蚁金服体验科技",
+	},
+	{
+		title: "TechUI",
+	},
+];
+
+const ShareList = () => {
+	return (
+		<ProList<{ title: string }>
+			toolBarRender={() => {
+				return [
+					<Button key="3" type="primary">
+						新建
+					</Button>,
+				];
+			}}
+			itemLayout="vertical"
+			rowKey="id"
+			// headerTitle="竖排样式"
+			dataSource={dataSource}
+			metas={{
+				title: {},
+				description: {
+					render: () => (
+						<>
+							<Tag>语雀专栏</Tag>
+							<Tag>设计语言</Tag>
+							<Tag>蚂蚁金服</Tag>
+						</>
+					),
+				},
+				actions: {
+					render: () => [
+						<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
+						<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
+						<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
+					],
+				},
+				extra: {
+					render: () => (
+						<img
+							width={272}
+							alt="logo"
+							src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
+						/>
+					),
+				},
+				content: {
+					render: () => {
+						return (
+							<div>
+								段落示意：蚂蚁金服设计平台
+								design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
+								design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
+							</div>
+						);
+					},
+				},
+			}}
+		/>
+	);
+};
+export default ShareList;

src/components/Main/Share/index.module.less

@@ -0,0 +1,10 @@
+.share_main{
+	display: flex;
+	flex-direction: column;
+	.share_header{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+}

src/components/Main/Share/index.tsx

@@ -1,7 +1,39 @@
 /** @format */
 import { FunctionComponent } from "react";
-
+import { ProCard } from "@ant-design/pro-components";
+import styles from "./index.module.less";
+import { Avatar, Button, Card } from "antd";
+import setting from "@/assets/icons/setting.svg";
+import Search from "antd/es/input/Search";
+import Meta from "antd/es/card/Meta";
+import { useNavigate } from "react-router-dom";
 const MainShare: FunctionComponent = () => {
-	return <div>分享22222</div>;
+	const navigate = useNavigate();
+	return (
+		<>
+			<div className={styles.share_main}>
+				<ProCard bordered={true} boxShadow={true}>
+					<div className={styles.share_header}>
+						<Search placeholder="搜索圈子" style={{ width: 500 }} />
+						<Button>创建圈子</Button>
+					</div>
+				</ProCard>
+				<ProCard bordered={true} boxShadow={true} style={{ marginTop: 20 }}>
+					<Card
+						style={{ width: 250, marginTop: 16 }}
+						hoverable
+						onClick={() => {
+							navigate("/main/share/list/1");
+						}}>
+						<Meta
+							avatar={<Avatar src={setting} />}
+							title="Card title"
+							description="This is the description"
+						/>
+					</Card>
+				</ProCard>
+			</div>
+		</>
+	);
 };
 export default MainShare;

src/main.tsx

@@ -2,14 +2,11 @@
 
 import ReactDOM from "react-dom/client";
 import "./assets/styles/index.less";
-import "virtual:svg-icons-register";
 import { Provider as MobxProvider } from "mobx-react";
 import { RootStore } from "@/store";
-import routeConfig from "@/router/routes.tsx";
+import App from "@/App.tsx";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-const router = createBrowserRouter(routeConfig);
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<MobxProvider {...RootStore}>
-		<RouterProvider router={router} />
+		<App />
 	</MobxProvider>,
 );

src/router/getRouter.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import { useRoutes } from "react-router-dom";
+import routes from "./routes";
+
+export default function GetRouter() {
+	return useRoutes(routes);
+}

src/router/matchRouter.ts

@@ -0,0 +1,8 @@
+/** @format */
+
+import routes from "./routes.tsx";
+import { matchRoutes } from "react-router-dom";
+function matchRoute(path: string) {
+	return matchRoutes(routes, path);
+}
+export default matchRoute;

src/router/modules/main/share/modules/shareList.tsx

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const ShareList = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Share/components/ShareList"));
+		}),
+);
+export default ShareList;

src/router/routes.tsx

@@ -31,6 +31,7 @@ import Up from "@/router/modules/main/settings/up/up.ts";
 import Wangyi from "@/router/modules/main/settings/wangyi/wangyi.ts";
 import Jinshan from "@/router/modules/main/settings/jinshan/jinshan.ts";
 import Qiniu from "@/router/modules/main/settings/qiniu/qiniu.ts";
+import ShareList from "@/router/modules/main/share/modules/shareList.tsx";
 
 const routes: RouteObject[] = [
 	{
@@ -42,7 +43,7 @@ const routes: RouteObject[] = [
 		Component: (props) => ComponentLoading(Register, props),
 	},
 	{
-		path: "*",
+		path: "/404",
 		Component: (props) => ComponentLoading(NoFound, props),
 	},
 	{
@@ -86,6 +87,10 @@ const routes: RouteObject[] = [
 				path: "/main/share",
 				Component: MainShare,
 			},
+			{
+				path: "/main/share/list/:id",
+				Component: ShareList,
+			},
 			{
 				path: "/main/setting",
 				Component: MainSetting,

src/router/useAuth.tsx

@@ -0,0 +1,45 @@
+/** @format */
+import matchAuth from "./matchRouter.ts";
+import { Navigate, useLocation } from "react-router-dom";
+import { message } from "antd";
+import { getStorageFromKey } from "@/utils/localStorage/config.ts";
+import React from "react";
+export default function AuthRoute(props: { children: React.ReactNode }) {
+	const location: any = useLocation();
+	const isLogin = getStorageFromKey("token");
+	const currentPath: string = location.pathname;
+	// 未登录情况访问login
+	const condition: boolean =
+		(currentPath === "/login" && !isLogin) ||
+		currentPath === "/404" ||
+		(currentPath === "register" && !isLogin) ||
+		(currentPath === "forget" && !isLogin);
+	// 登录后访问login
+	const conditionWithLogin: boolean =
+		(currentPath === "/login" && isLogin) ||
+		(currentPath === "register" && isLogin) ||
+		(currentPath === "forget" && isLogin);
+	const findPath: any = matchAuth(currentPath);
+
+	if (condition) {
+		return props.children;
+	}
+	if (conditionWithLogin && findPath) {
+		return <Navigate to="/main/home" />;
+	}
+
+	if (!findPath) {
+		return <Navigate to="/404" />;
+	}
+
+	if (!isLogin) {
+		message
+			.open({
+				content: "请先登录！",
+				type: "warning",
+			})
+			.then();
+		return <Navigate to="/login" />;
+	}
+	return props.children;
+}

src/utils/axios/request.ts

@@ -59,40 +59,100 @@ class Request {
 	handleCode(code: number): void {
 		switch (code) {
 			case 400:
-				message.error("请求错误(400)").then();
+				message
+					.open({
+						content: "请求错误(400)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 401:
-				message.error("未授权，请重新登录(401)").then();
+				message
+					.open({
+						content: "未授权，请重新登录(401)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 403:
-				message.error("拒绝访问(403)").then();
+				message
+					.open({
+						content: "拒绝访问(403)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 404:
-				message.error("请求出错(404)").then();
+				message
+					.open({
+						content: "请求出错(404)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 408:
-				message.error("请求超时(408)").then();
+				message
+					.open({
+						content: "请求超时(408)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 500:
-				message.error("服务器错误(500)").then();
+				message
+					.open({
+						content: "服务器错误(500)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 501:
-				message.error("服务未实现(501)").then();
+				message
+					.open({
+						content: "服务未实现(501)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 502:
-				message.error("网络错误(502)").then();
+				message
+					.open({
+						content: "网络错误(502)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 503:
-				message.error("服务不可用(503)").then();
+				message
+					.open({
+						content: "服务不可用(503)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 504:
-				message.error("网络超时(504)").then();
+				message
+					.open({
+						content: "网络超时(504)",
+						type: "error",
+					})
+					.then();
 				break;
 			case 505:
-				message.error("HTTP版本不受支持(505)").then();
+				message
+					.open({
+						content: "HTTP版本不受支持(505)",
+						type: "error",
+					})
+					.then();
 				break;
 			default:
-				message.error(`连接出错(${code})!`).then();
+				message
+					.open({
+						content: `连接出错(${code})!`,
+						type: "error",
+					})
+					.then();
 				break;
 		}
 	}

src/views/404/404.tsx

@@ -2,11 +2,17 @@
 
 import { useNavigate } from "react-router-dom";
 import { Button, Result } from "antd";
+import { getStorageFromKey } from "@/utils/localStorage/config.ts";
 
 export default () => {
 	const navigate = useNavigate();
 	const goBack = () => {
-		navigate(-1);
+		const token = getStorageFromKey("token");
+		if (token !== null && token !== undefined) {
+			navigate("/main/home");
+		} else {
+			navigate("/");
+		}
 	};
 
 	return (

src/views/Main/index.tsx

@@ -7,14 +7,15 @@ import {
 	QuestionCircleFilled,
 } from "@ant-design/icons";
 import { DefaultFooter, PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
-import defaultProps from "./defaultSettings.tsx";
+import settings from "./settings.tsx";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import logo from "@/assets/images/logo.png";
 import { Suspense } from "react";
 import { Dropdown } from "antd";
+// import { getUserMenuPermission } from "@/api/user";
 
 export default function Layout() {
-	const location: any = useLocation();
+	const location = useLocation();
 	return (
 		<div
 			id="test-pro-layout"
@@ -27,12 +28,6 @@ export default function Layout() {
 				pure={false}
 				loading={false}
 				contentWidth={"Fluid"}
-				menu={{
-					defaultOpenAll: false,
-					hideMenuWhenCollapsed: false,
-					type: "group",
-					collapsedShowTitle: false,
-				}}
 				title={"五味子云存储"}
 				siderWidth={216}
 				menuItemRender={(menuItemProps, defaultDom) => {
@@ -41,8 +36,18 @@ export default function Layout() {
 					}
 					return <Link to={menuItemProps.path}>{defaultDom}</Link>;
 				}}
-				{...defaultProps}
+				{...settings}
-				disableMobile={true}
+				menu={{
+					// request: async () => {
+					// 	const res: any = await getUserMenuPermission("17");
+					// 	return res.data.routes;
+					// },
+					type: "group",
+					defaultOpenAll: false,
+					hideMenuWhenCollapsed: false,
+					collapsedShowTitle: false,
+				}}
+				disableMobile={false}
 				location={{
 					pathname: location.pathname,
 				}}

src/views/Main/settings.tsx

@@ -1,12 +1,13 @@
 /** @format */
 
-import dashboard from "@/assets/icons/dashboard.svg";
+// import dashboard from "@/assets/images/dashboard.png";
-import bucket from "@/assets/icons/bucket.svg";
+// import bucket from "@/assets/images/bucket.png";
-import file from "@/assets/icons/file.svg";
+// import file_icon from "@/assets/images/file.png";
-import share from "@/assets/icons/share.svg";
+// import share_icon from "@/assets/images/share.png";
-import user from "@/assets/icons/user.svg";
+// import user from "@/assets/images/user.png";
-import userInfo from "@/assets/icons/userInfo.svg";
+// import user_info_icon from "@/assets/images/userInfo.png";
-import setting from "@/assets/icons/setting.svg";
+// import setting from "@/assets/images/setting.png";
+// import storage_setting from "@/assets/images/storage_setting.png";
 import aliyun from "@/assets/icons/aliyun.svg";
 import tencent from "@/assets/icons/tencent.svg";
 import huawei from "@/assets/icons/huawei.svg";
@@ -21,7 +22,6 @@ import pinanyun from "@/assets/icons/pinanyun.svg";
 import qingyun from "@/assets/icons/qingyun.svg";
 import ucloud from "@/assets/icons/ucloud.svg";
 import jinshan from "@/assets/icons/jinshan.svg";
-import storage_setting from "@/assets/icons/storage_setting.svg";
 export default {
 	route: {
 		path: "/",
@@ -30,43 +30,43 @@ export default {
 				index: true,
 				path: "main/home",
 				name: "仪表盘",
-				icon: dashboard,
+				icon: "https://pic.imgdb.cn/item/668b9176d9c307b7e99e51b9.png",
 			},
 			{
 				path: "main/setting",
 				name: "存储商",
-				icon: storage_setting,
+				icon: "https://pic.imgdb.cn/item/668b918cd9c307b7e99e7fbc.png",
 			},
 			{
 				path: "main/bucket",
 				name: "存储桶",
-				icon: bucket,
+				icon: "https://pic.imgdb.cn/item/668b91a5d9c307b7e99ea40d.png",
 			},
 			{
 				path: "main/file",
 				name: "文件",
-				icon: file,
+				icon: "https://pic.imgdb.cn/item/668b91b7d9c307b7e99eb9fb.png",
 			},
 			{
 				path: "main/share",
 				name: "分享圈",
-				icon: share,
+				icon: "https://pic.imgdb.cn/item/668b91d1d9c307b7e99edb1c.png",
 			},
 			{
 				path: "/",
 				name: "个人中心",
-				icon: user,
+				icon: "https://pic.imgdb.cn/item/668b91e1d9c307b7e99eed3a.png",
 				routes: [
 					{
 						index: true,
 						path: "main/user/info",
 						name: "用户信息",
-						icon: userInfo,
+						icon: "https://pic.imgdb.cn/item/668b91fbd9c307b7e99f0f90.png",
 					},
 					{
 						path: "main/user/setting",
 						name: "用户设置",
-						icon: setting,
+						icon: "https://pic.imgdb.cn/item/668b921ad9c307b7e99f35b2.png",
 					},
 				],
 			},

vite.config.ts

@@ -2,26 +2,25 @@
 
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
-import * as path from "path";
 import { resolve } from "path";
-// icons plugin
-import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 import viteCompression from "vite-plugin-compression";
 import { createHtmlPlugin } from "vite-plugin-html";
 import legacy from "@vitejs/plugin-legacy";
 import postcssPresetEnv from "postcss-preset-env";
 import autoprefixer from "autoprefixer";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
+import svgr from "vite-plugin-svgr";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 //配置参数
 export default defineConfig(({ mode }) => {
 	const env = loadEnv(mode, process.cwd());
 	return {
-		base: "./",
+		base: "/",
 		plugins: [
 			react(),
 			nodePolyfills(),
+			svgr({ svgrOptions: { icon: true } }),
 			legacy({
 				targets: [
 					"ie >= 11",
@@ -56,13 +55,6 @@ export default defineConfig(({ mode }) => {
 				],
 				modernPolyfills: ["es.promise.all-settled", "es.object.entries"],
 			}),
-			// 修改 icons 相关配置
-			createSvgIconsPlugin({
-				// 指定需要缓存的图标文件夹
-				iconDirs: [path.resolve(__dirname, "./src/assets/icons")],
-				// 指定symbolId格式
-				symbolId: "icon-[dir]-[name]",
-			}),
 			viteCompression({
 				verbose: true, // 是否在控制台中输出压缩结果
 				disable: false,
@@ -127,7 +119,7 @@ export default defineConfig(({ mode }) => {
 			},
 		},
 		esbuild: {
-			// drop: ['console', 'debugger'],
+			// drop: ["console", "debugger"],
 		},
 		build: {
 			outDir: "dist", // 指定输出路径