optimize(projects): optimize code

packages/simple-router/src/matcher/index.ts

@@ -21,12 +21,15 @@ class CreateRouterMatcher {
   // Internal routes maintained for react-router
   matchers: RouteRecordRaw[] = [];
 
+  basename: string = '';
+
   matcherMap = new Map<string, RouteRecordRaw>();
 
   initRoutes: ElegantConstRoute[] = [];
 
-  constructor(routes: ElegantConstRoute[]) {
+  constructor(routes: ElegantConstRoute[], basename: string) {
     this.initRoutes = routes;
+    this.basename = basename;
     this.initializeRoutes();
     this.removeRoute = this.removeRoute.bind(this);
   }
@@ -162,21 +165,25 @@ class CreateRouterMatcher {
     } else if (location.pathname) {
       // no need to resolve the path with the matcher as it was provided
       // this also allows the user to control the encoding
-      path = location.pathname;
+      path = this.basename === '/' ? location.pathname : location.pathname.replace(this.basename, '');
 
-      matcher = this.matchers.slice(1).find(m => matchPath(m.record.path, location.pathname));
+      matcher = this.matchers.slice(1).find(m => matchPath(m.record.path, path)) || this.matchers[0];
       if (!matcher) matcher = this.matchers[0];
 
       // matcher should have a value after the loop
       query = getQueryParams(location.search);
 
       if (matcher) {
-        const match = matchPath(matcher.record.path, location.pathname);
+        const match = matchPath(matcher.record.path, path);
         if (match?.params) {
           params = match.params; // 如果有 params 则赋值
         }
         name = matcher.record.name;
-        fullPath = transformLocationToFullPath(location);
+
+        fullPath =
+          this.basename === '/'
+            ? transformLocationToFullPath(location)
+            : transformLocationToFullPath(location).replace(this.basename, '');
       }
       // location is a relative path
     } else {

packages/simple-router/src/router.ts

@@ -35,7 +35,7 @@ export interface RouterOptions {
 }
 
 export function createRouter({ getReactRoutes, init, initRoutes, mode, opt }: RouterOptions) {
-  const matcher = new CreateRouterMatcher(initRoutes);
+  const matcher = new CreateRouterMatcher(initRoutes, opt?.basename);
 
   const initReactRoutes = initRoutes.map(route => getReactRoutes(route));
 
@@ -211,7 +211,7 @@ export function createRouter({ getReactRoutes, init, initRoutes, mode, opt }: Ro
 
   async function initReady(): Promise<boolean> {
     return new Promise((resolved, reject) => {
-      init(currentRoute.fullPath)
+      init(currentRoute.fullPath, reactRouter.patchRoutes)
         .then(res => {
           if (!res) {
             reactRouter.initialize();

packages/simple-router/src/types/router.ts

@@ -4,7 +4,22 @@ import type { Location, RouteObject } from 'react-router-dom';
 
 import type { RouteRecordNormalized } from '../matcher/types';
 
-import type { RouteLocationNormalizedLoaded } from './route';
+import type { Route, RouteLocationNormalizedLoaded } from './route';
+
+export interface RouterGuard {
+  afterEach?: (to: Route, from: Route | null) => void;
+  beforeEach?: (to: Route, from: Route | null) => boolean | Promise<boolean>;
+}
+
+export interface RouteParams {
+  [key: string]: string;
+}
+
+export interface RouteLocation {
+  params: RouteParams;
+  path: string;
+  query: Record<string, string>;
+}
 
 export interface RouterOptions {
   afterEach: AfterEach;
@@ -123,4 +138,9 @@ export interface RouteQueryAndHash {
  */
 export interface RouteLocationNamedRaw extends RouteQueryAndHash, LocationAsRelativeRaw, RouteLocationOptions {}
 
-export type Init = (currentFullPath: string) => Promise<RouteLocationNamedRaw | null>;
+type PatchRoutesParams = Parameters<RemixRouter['patchRoutes']>;
+
+export type Init = (
+  currentFullPath: string,
+  patchRoutes?: (parentId: PatchRoutesParams[0], routes: PatchRoutesParams[1]) => void
+) => Promise<RouteLocationNamedRaw | null>;

src/pages/home/modules/LineChart.tsx

@@ -1,5 +1,3 @@
-import { Card } from 'antd';
-
 import { getLocale } from '@/store/slice/app';
 
 const LineChart = memo(() => {
@@ -134,15 +132,15 @@ const LineChart = memo(() => {
     updateLocale();
   }, [locale]);
   return (
-    <Card
+    <ACard
       bordered={false}
       className="card-wrapper"
     >
       <div
         className="h-360px overflow-hidden"
         ref={domRef}
       />
-    </Card>
+    </ACard>
   );
 });
 

src/pages/home/modules/PieChart.tsx

@@ -1,5 +1,3 @@
-import { Card } from 'antd';
-
 import { getLocale } from '@/store/slice/app';
 
 const PieChart = memo(() => {
@@ -93,15 +91,15 @@ const PieChart = memo(() => {
     updateLocale();
   }, [locale]);
   return (
-    <Card
+    <ACard
       bordered={false}
       className="card-wrapper"
     >
       <div
         className="h-360px overflow-hidden"
         ref={domRef}
       />
-    </Card>
+    </ACard>
   );
 });
 

src/pages/home/modules/ProjectNews.tsx

@@ -1,5 +1,4 @@
 import { useArray } from '@sa/hooks';
-import { Card, List } from 'antd';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import SoybeanAvatar from '@/components/stateful/SoybeanAvatar';
@@ -26,7 +25,7 @@ const ProjectNews = () => {
   };
 
   return (
-    <Card
+    <ACard
       bordered={false}
       className="card-wrapper"
       size="small"
@@ -83,7 +82,7 @@ const ProjectNews = () => {
       ]}
     >
       <AnimatePresence mode="popLayout">
-        <List
+        <AList
           dataSource={newses}
           renderItem={item => (
             <motion.div
@@ -94,7 +93,7 @@ const ProjectNews = () => {
               key={item.id}
               variants={variants} // 应用定义的动画 variants
             >
-              <List.Item
+              <AList.Item
                 actions={[
                   <AButton
                     key="up"
@@ -121,17 +120,17 @@ const ProjectNews = () => {
                   </AButton>
                 ]}
               >
-                <List.Item.Meta
+                <AList.Item.Meta
                   avatar={<SoybeanAvatar className="size-48px!" />}
                   description={item.time}
                   title={item.content}
                 />
-              </List.Item>
+              </AList.Item>
             </motion.div>
           )}
         />
       </AnimatePresence>
-    </Card>
+    </ACard>
   );
 };
 

src/pages/login/index.tsx

@@ -32,6 +32,7 @@ export function Component() {
       style={{ backgroundColor: bgColor }}
     >
       <WaveBg themeColor={bgThemeColor} />
+
       <Card
         bordered={false}
         className="relative z-4 w-auto rd-12px"

src/router/routes/builtin.ts

@@ -38,7 +38,6 @@ const LOG_OUT_ROUTE: CustomRoute = {
 
     // 如果需要还需要调用登出接口  也是在这里 去做相关的操作
     // If needed, you can also call the logout API and perform related operations here
-
     const needRedirect = formData.get('needRedirect');
 
     if (needRedirect) {

src/types/auto-imports.d.ts

@@ -22,6 +22,7 @@ declare global {
   const AForm: typeof import('antd')['Form']
   const AInput: typeof import('antd')['Input']
   const AInputNumber: typeof import('antd')['InputNumber']
+  const AList: typeof import('antd')['List']
   const AMenu: typeof import('antd')['Menu']
   const AModal: typeof import('antd')['Modal']
   const APopconfirm: typeof import('antd')['Popconfirm']