fix: 修改详情页路由传参方式

config/routes.ts

@@ -84,7 +84,7 @@
             component: './Institutions/Company/List'
           },
           {
-            path: 'detail',
+            path: ':id',
             name: 'detail',
             hideInMenu: true,
             component: './Institutions/Company/Detail'

src/app.tsx

@@ -5,8 +5,7 @@ import consts from './utils/consts'
 import { queryCurrentUser } from './services/api/login'
 import defaultSettings from '../config/defaultSettings'
 import type { Settings as LayoutSettings } from '@ant-design/pro-layout'
-import type { RequestConfig } from '@umijs/max'
-import type { RunTimeLayoutConfig } from '@@/plugin-layout'
+import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max'
 
 export async function getInitialState(): Promise<{
   settings?: Partial<LayoutSettings>
@@ -108,7 +107,7 @@ export const request: RequestConfig = {
   requestInterceptors: [authHeaderInterceptor]
 }
 
-export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
+export const layout: RunTimeLayoutConfig = ({ initialState }) => {
   return {
     rightContentRender: () => <RightContent />,
     disableContentMargin: false,
@@ -122,9 +121,6 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
         })
       }
     },
-    onCollapse: (collapsed: boolean) => {
-      setInitialState({ ...initialState, setting: { ...initialState.setting, collapsed } })
-    },
     ...defaultSettings
   }
 }

src/pages/Institutions/Company/Detail/index.tsx

@@ -3,9 +3,7 @@ import Staff from './components/Staff'
 import Organization from './components/Organization'
 import Role from './components/Role'
 import { PageContainer } from '@ant-design/pro-layout'
-import type { RouteComponentProps } from 'react-router'
-import type { InstitutionDetailProps } from '../List'
-import { useRequest } from '@umijs/max'
+import { useParams, useRequest } from '@umijs/max'
 import { queryInstitution } from '@/services/api/institution'
 
 export enum TabEnum {
@@ -14,10 +12,8 @@ export enum TabEnum {
   ROLE = '2'
 }
 
-type CompanyDetailProps = RouteComponentProps
-
-const CompanyDetail: React.FC<CompanyDetailProps> = ({ location }) => {
-  const { dataID } = location.state as InstitutionDetailProps
+const CompanyDetail: React.FC = () => {
+  const { id: ID } = useParams()
   const [company, setCompany] = useState<Nullable<API.InstitutionListItem>>(null)
   const { run: tryQueryCompany } = useRequest(queryInstitution, {
     manual: true,
@@ -26,11 +22,11 @@ const CompanyDetail: React.FC<CompanyDetailProps> = ({ location }) => {
     }
   })
   function initData() {
-    dataID && tryQueryCompany({ ID: dataID })
+    ID && tryQueryCompany({ ID })
   }
   useEffect(() => {
     initData()
-  }, [dataID])
+  }, [ID])
 
   const menuMap: Record<string, string> = {
     [TabEnum.STAFF]: '人员管理',
@@ -44,19 +40,19 @@ const CompanyDetail: React.FC<CompanyDetailProps> = ({ location }) => {
       case TabEnum.STAFF:
         return (
           <Staff
-            dataID={dataID}
+            dataID={ID}
             companyName={company?.name}
             memberTotal={company?.memberTotal}
             managerID={company?.manager?.ID}
           />
         )
       case TabEnum.ORGANIZATION:
-        return <Organization dataID={dataID} />
+        return <Organization dataID={ID} />
       case TabEnum.ROLE:
         return (
           <Role
             initData={initData}
-            dataID={dataID}
+            dataID={ID}
             memberTotal={company?.memberTotal}
             managerID={company?.manager?.ID}
           />

src/pages/Institutions/Company/List/index.tsx

@@ -3,7 +3,7 @@ import ProTable from '@ant-design/pro-table'
 import consts from '@/utils/consts'
 import { Button } from 'antd'
 import { useMemo, useRef, useState } from 'react'
-import { history } from '@umijs/max'
+import { history, Link } from '@umijs/max'
 import { queryInstitutionList } from '@/services/api/institution'
 import type { ProColumnType, ActionType } from '@ant-design/pro-table'
 import { PageContainer } from '@ant-design/pro-layout'
@@ -27,13 +27,6 @@ const CompanyList = () => {
     defaultFormData: null
   })
 
-  const goToDetail = (params: InstitutionDetailProps) => {
-    return history.push({
-      pathname: '/institutions/company/detail',
-      state: params
-    })
-  }
-
   const columns: ProColumnType<API.InstitutionListItem>[] = [
     {
       dataIndex: 'name',
@@ -41,15 +34,9 @@ const CompanyList = () => {
       width: 286,
       onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       render: (name, record) => (
-        <span
-          onClick={() =>
-            goToDetail({
-              dataID: record.ID
-            })
-          }
-          className="text-primary cursor-pointer">
+        <Link to={`/institutions/company/${record.ID}`} className="text-primary cursor-pointer">
           {name}
-        </span>
+        </Link>
       )
     },
     {

tsconfig.json

@@ -35,7 +35,7 @@
     ".stylelintrc.js",
     ".prettierrc.js",
     "jest.config.js",
-    "windi.config.ts",
+    "unocss.config.ts",
     "mock/*"
   ],
   "exclude": ["node_modules", "build", "dist", "scripts", "src/.umi/*", "webpack", "jest"]