feat: add flask dev mode and optimize SVG handling

- Optimize SVG loading using import.meta.glob and manual chunking
This commit is contained in:
2025-10-28 15:28:56 +08:00
parent ba569dafad
commit 303715f82c
6 changed files with 57 additions and 12 deletions

6
.env
View File

@@ -1,5 +1,7 @@
VITE_API_BASE_URL = http://150.158.121.95
# VITE_API_BASE_URL = http://154.9.253.114:9380
# VITE_API_BASE_URL
VITE_API_BASE_URL = http://154.9.253.114:9380
# VITE_FLASK_API_BASE_URL
VITE_FLASK_API_BASE_URL = http://150.158.121.95
VITE_RSA_PUBLIC_KEY="-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArq9XTUSeYr2+N1h3Afl/z8Dse/2yD0ZGrKwx+EEEcdsBLca9Ynmx3nIB5obmLlSfmskLpBo0UACBmB5rEjBp2Q2f3AG3Hjd4B+gNCG6BDaawuDlgANIhGnaTLrIqWrrcm4EMzJOnAOI1fgzJRsOOUEfaS318Eq9OVO3apEyCCt0lOQK6PuksduOjVxtltDav+guVAA068NrPYmRNabVKRNLJpL8w4D44sfth5RvZ3q9t+6RTArpEtc5sh5ChzvqPOzKGMXW83C95TxmXqpbK6olN4RevSfVjEAgCydH6HN6OhtOQEcnrU97r9H0iZOWwbw3pVrZiUkuRD1R56Wzs2wIDAQAB

View File

@@ -5,6 +5,7 @@
"type": "module",
"scripts": {
"dev": "vite",
"dev:flask": "vite --mode flask",
"build": "tsc -b && vite build",
"build:flask": "tsc -b && vite build --mode flask",
"lint": "eslint .",

View File

@@ -0,0 +1,10 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.75 4C7.75 2.20508 9.20508 0.75 11 0.75H27C27.1212 0.75 27.2375 0.798159 27.3232 0.883885L38.1161 11.6768C38.2018 11.7625 38.25 11.8788 38.25 12V36C38.25 37.7949 36.7949 39.25 35 39.25H11C9.20507 39.25 7.75 37.7949 7.75 36V4Z"
stroke="#D0D5DD" stroke-width="1.5" />
<path d="M27 0.5V8C27 10.2091 28.7909 12 31 12H38.5" stroke="#D0D5DD" stroke-width="1.5" />
<rect x="1" y="18" width="28" height="16" rx="2" fill="#10B981" />
<path
d="M4.91433 30V22.7273H7.78365C8.33526 22.7273 8.80519 22.8326 9.19345 23.0433C9.58171 23.2517 9.87763 23.5417 10.0812 23.9134C10.2872 24.2827 10.3902 24.7088 10.3902 25.1918C10.3902 25.6747 10.286 26.1009 10.0777 26.4702C9.86935 26.8395 9.5675 27.1271 9.17214 27.3331C8.77915 27.5391 8.3033 27.642 7.74458 27.642H5.91575V26.4098H7.496C7.79193 26.4098 8.03578 26.3589 8.22754 26.2571C8.42167 26.1529 8.56608 26.0097 8.66078 25.8274C8.75784 25.6428 8.80637 25.4309 8.80637 25.1918C8.80637 24.9503 8.75784 24.7396 8.66078 24.5597C8.56608 24.3774 8.42167 24.2365 8.22754 24.1371C8.03341 24.0353 7.7872 23.9844 7.4889 23.9844H6.45197V30H4.91433ZM11.3889 30L14.5531 22.7273H16.1439L19.3081 30H17.6889L16.9659 28.0256H13.7315L13.0085 30H11.3889ZM14.2582 26.6364H16.4392L15.3594 23.7812H15.3381L14.2582 26.6364ZM20.1736 30V22.7273H21.7112V28.8636H25.1949V30H20.1736Z"
fill="white" />
</svg>

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -2,7 +2,12 @@ import React from "react";
import { SvgIcon, type SvgIconProps } from "@mui/material";
import logger from "@/utils/logger";
const svgPath = '/src/assets/svg'
// 使用 import.meta.glob 预加载所有 SVG 文件
const svgModules = import.meta.glob('/src/assets/svg/**/*.svg', {
query: '?react',
import: 'default',
eager: false
});
interface AppSvgIconProps extends SvgIconProps {
name: string;
@@ -39,10 +44,16 @@ export default function AppSvgIcon(props: AppSvgIconProps) {
const loadIcon = async () => {
try {
setLoading(true);
const iconPath = `${svgPath}${pointPath}/${name}.svg?react`;
// logger.debug(`[AppSvgIcon] 加载图标: ${iconPath}`);
const iconModule = await import(/* @vite-ignore */ iconPath);
setIcon(() => iconModule.default);
const iconPath = `/src/assets/svg${pointPath}/${name}.svg`;
// 使用预定义的模块映射
const moduleLoader = svgModules[iconPath];
if (moduleLoader) {
const iconModule = await moduleLoader();
setIcon(() => iconModule as React.FC<React.SVGProps<SVGSVGElement>>);
} else {
throw new Error(`Icon not found: ${iconPath}`);
}
} catch (error) {
logger.warn(`[AppSvgIcon] 未找到图标: ${name}`, error);
setIcon(null);

View File

@@ -74,9 +74,18 @@ const convertTheKeysOfTheObjectToSnake = (obj: any): any => {
return result;
};
const getBaseURL = (): string => {
if (import.meta.env.DEV) {
if (import.meta.env.MODE == 'flask') {
return import.meta.env.VITE_FLASK_API_BASE_URL;
}
}
return import.meta.env.VITE_API_BASE_URL;
}
// 创建axios实例
const request: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
baseURL: getBaseURL(),
timeout: 300000,
headers: {
'Content-Type': 'application/json',
@@ -107,7 +116,7 @@ request.interceptors.request.use(
// 添加授权头
const authorization = getAuthorization();
if (authorization && !config.headers?.skipToken) {
config.headers.Authorization = authorization;
config.headers['Authorization'] = authorization;
}
return config;

View File

@@ -11,9 +11,21 @@ export default defineConfig({
svgrOptions: {
icon: true,
prettier: true,
}
})
},
}),
],
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
// 将所有 SVG 文件打包到一个单独的 chunk 中
if (id.includes('.svg') && id.includes('?react')) {
return 'svg-icons';
}
}
}
}
},
server: {
host: '0.0.0.0',
allowedHosts: ['154.9.253.114', 'localhost', 'teres.deep-pilot.chat'],