feat: add flask dev mode and optimize SVG handling
- Optimize SVG loading using import.meta.glob and manual chunking
This commit is contained in:
6
.env
6
.env
@@ -1,5 +1,7 @@
|
|||||||
VITE_API_BASE_URL = http://150.158.121.95
|
# VITE_API_BASE_URL
|
||||||
# VITE_API_BASE_URL = http://154.9.253.114:9380
|
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-----
|
VITE_RSA_PUBLIC_KEY="-----BEGIN PUBLIC KEY-----
|
||||||
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArq9XTUSeYr2+N1h3Afl/z8Dse/2yD0ZGrKwx+EEEcdsBLca9Ynmx3nIB5obmLlSfmskLpBo0UACBmB5rEjBp2Q2f3AG3Hjd4B+gNCG6BDaawuDlgANIhGnaTLrIqWrrcm4EMzJOnAOI1fgzJRsOOUEfaS318Eq9OVO3apEyCCt0lOQK6PuksduOjVxtltDav+guVAA068NrPYmRNabVKRNLJpL8w4D44sfth5RvZ3q9t+6RTArpEtc5sh5ChzvqPOzKGMXW83C95TxmXqpbK6olN4RevSfVjEAgCydH6HN6OhtOQEcnrU97r9H0iZOWwbw3pVrZiUkuRD1R56Wzs2wIDAQAB
|
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArq9XTUSeYr2+N1h3Afl/z8Dse/2yD0ZGrKwx+EEEcdsBLca9Ynmx3nIB5obmLlSfmskLpBo0UACBmB5rEjBp2Q2f3AG3Hjd4B+gNCG6BDaawuDlgANIhGnaTLrIqWrrcm4EMzJOnAOI1fgzJRsOOUEfaS318Eq9OVO3apEyCCt0lOQK6PuksduOjVxtltDav+guVAA068NrPYmRNabVKRNLJpL8w4D44sfth5RvZ3q9t+6RTArpEtc5sh5ChzvqPOzKGMXW83C95TxmXqpbK6olN4RevSfVjEAgCydH6HN6OhtOQEcnrU97r9H0iZOWwbw3pVrZiUkuRD1R56Wzs2wIDAQAB
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
"dev:flask": "vite --mode flask",
|
||||||
"build": "tsc -b && vite build",
|
"build": "tsc -b && vite build",
|
||||||
"build:flask": "tsc -b && vite build --mode flask",
|
"build:flask": "tsc -b && vite build --mode flask",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
|
|||||||
@@ -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 |
@@ -2,7 +2,12 @@ import React from "react";
|
|||||||
import { SvgIcon, type SvgIconProps } from "@mui/material";
|
import { SvgIcon, type SvgIconProps } from "@mui/material";
|
||||||
import logger from "@/utils/logger";
|
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 {
|
interface AppSvgIconProps extends SvgIconProps {
|
||||||
name: string;
|
name: string;
|
||||||
@@ -39,10 +44,16 @@ export default function AppSvgIcon(props: AppSvgIconProps) {
|
|||||||
const loadIcon = async () => {
|
const loadIcon = async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const iconPath = `${svgPath}${pointPath}/${name}.svg?react`;
|
const iconPath = `/src/assets/svg${pointPath}/${name}.svg`;
|
||||||
// logger.debug(`[AppSvgIcon] 加载图标: ${iconPath}`);
|
|
||||||
const iconModule = await import(/* @vite-ignore */ iconPath);
|
// 使用预定义的模块映射
|
||||||
setIcon(() => iconModule.default);
|
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) {
|
} catch (error) {
|
||||||
logger.warn(`[AppSvgIcon] 未找到图标: ${name}`, error);
|
logger.warn(`[AppSvgIcon] 未找到图标: ${name}`, error);
|
||||||
setIcon(null);
|
setIcon(null);
|
||||||
|
|||||||
@@ -74,9 +74,18 @@ const convertTheKeysOfTheObjectToSnake = (obj: any): any => {
|
|||||||
return result;
|
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实例
|
// 创建axios实例
|
||||||
const request: AxiosInstance = axios.create({
|
const request: AxiosInstance = axios.create({
|
||||||
baseURL: import.meta.env.VITE_API_BASE_URL,
|
baseURL: getBaseURL(),
|
||||||
timeout: 300000,
|
timeout: 300000,
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
@@ -107,7 +116,7 @@ request.interceptors.request.use(
|
|||||||
// 添加授权头
|
// 添加授权头
|
||||||
const authorization = getAuthorization();
|
const authorization = getAuthorization();
|
||||||
if (authorization && !config.headers?.skipToken) {
|
if (authorization && !config.headers?.skipToken) {
|
||||||
config.headers.Authorization = authorization;
|
config.headers['Authorization'] = authorization;
|
||||||
}
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
@@ -119,7 +128,7 @@ request.interceptors.request.use(
|
|||||||
|
|
||||||
// 响应拦截器
|
// 响应拦截器
|
||||||
request.interceptors.response.use(
|
request.interceptors.response.use(
|
||||||
(response: AxiosResponse) => {
|
(response: AxiosResponse) => {
|
||||||
const { status } = response;
|
const { status } = response;
|
||||||
|
|
||||||
// 处理特定状态码
|
// 处理特定状态码
|
||||||
|
|||||||
@@ -11,9 +11,21 @@ export default defineConfig({
|
|||||||
svgrOptions: {
|
svgrOptions: {
|
||||||
icon: true,
|
icon: true,
|
||||||
prettier: true,
|
prettier: true,
|
||||||
}
|
},
|
||||||
})
|
}),
|
||||||
],
|
],
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: (id) => {
|
||||||
|
// 将所有 SVG 文件打包到一个单独的 chunk 中
|
||||||
|
if (id.includes('.svg') && id.includes('?react')) {
|
||||||
|
return 'svg-icons';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
server: {
|
server: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
allowedHosts: ['154.9.253.114', 'localhost', 'teres.deep-pilot.chat'],
|
allowedHosts: ['154.9.253.114', 'localhost', 'teres.deep-pilot.chat'],
|
||||||
|
|||||||
Reference in New Issue
Block a user