打包改为vite

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/api/internal/httpClient.ts

@@ -130,7 +130,7 @@ export class HttpClient {
   }
 }
 
-const APP_URL = process.env.REACT_APP_URL || "";
+const APP_URL = import.meta.env.VITE_APP_URL || "";
 
 const client = new HttpClient(APP_URL);
 

src/js/config.ts

@@ -1,3 +1,3 @@
 export default {
-  app_url: process.env.REACT_APP_URL,
+  app_url: import.meta.env.VITE_APP_URL || "",
 };

src/main.tsx

@@ -8,18 +8,13 @@ import store from "./store/store";
 import { ConfigProvider } from "antd";
 import zhCN from "antd/locale/zh_CN";
 
-const basename = process.env.REACT_BASE_NAME || "";
-
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
-root.render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <Provider store={store}>
     <ConfigProvider
       locale={zhCN}
       theme={{ token: { colorPrimary: "#ff4d4f" } }}
     >
-      <BrowserRouter basename={basename}>
+      <BrowserRouter>
         <App />
       </BrowserRouter>
     </ConfigProvider>

src/pages/dashboard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import styles from "./index.module.less";
 import { Row, Col } from "antd";
 import { Link, useNavigate } from "react-router-dom";
@@ -10,8 +10,10 @@ import iconN3 from "../../assets/images/dashboard/icon-n3.png";
 import { Footer } from "../../compenents/footer";
 import { dashboard } from "../../api/index";
 import { timeFormat } from "../../utils/index";
+import * as echarts from "echarts";
 
 export const Dashboard: React.FC<any> = () => {
+  let chartRef = useRef(null);
   const navigate = useNavigate();
   const [basicData, setBasicData] = useState<any>([]);
 
@@ -44,8 +46,8 @@ export const Dashboard: React.FC<any> = () => {
         value: params.images_count,
       },
     ];
-    var echarts = require("echarts");
-    let myChart = echarts.init(document.getElementById("chartCircle"));
+    let dom: any = chartRef.current;
+    let myChart = echarts.init(dom);
     myChart.setOption({
       title: {
         textAlign: "center",
@@ -523,7 +525,7 @@ export const Dashboard: React.FC<any> = () => {
             <div className={styles["large-title"]}>资源统计</div>
             <div className={styles["charts"]}>
               <div
-                id="chartCircle"
+                ref={chartRef}
                 style={{ width: "100%", height: 280, position: "relative" }}
               ></div>
             </div>

src/react-app-env.d.ts

@@ -1,71 +0,0 @@
-/// <reference types="node" />
-/// <reference types="react" />
-/// <reference types="react-dom" />
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test';
-    readonly PUBLIC_URL: string;
-  }
-}
-
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-    const src: string;
-    export default src;
-}
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/utils/index.ts

@@ -118,4 +118,4 @@ export function ValidataCredentials(value: any) {
       return true;
     }
   }
-}
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />