chore: template

yuhongda · Dec 15, 2023 · 713ccf5 · 713ccf5
1 parent e011e76
commit 713ccf5
Show file tree

Hide file tree

Showing 16 changed files with 216 additions and 247 deletions.
diff --git a/templates/project-react-ts/package.json b/templates/project-react-ts/package.json
@@ -17,8 +17,8 @@
     "@types/jsonpath": "^0.2.0",
     "@types/lodash": "^4.14.172",
     "@types/node": "^16.6.1",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.17",
     "@types/react-faux-dom": "^4.1.5",
     "@types/react-transition-group": "^4.4.2",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
@@ -82,7 +82,6 @@
     "@sentry/browser": "^6.11.0",
     "@superwf/mobx-react-router": "^7.4.0",
     "@types/react-d3-graph": "^2.6.3",
-    "@types/react-router-dom": "^5.1.8",
     "@types/styled-components": "^5.1.26",
     "antd": "^5.3.2",
     "axios": "^0.21.3",
@@ -113,8 +112,8 @@
     "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.0",
     "react-faux-dom": "^4.5.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router": "^6.21.0",
+    "react-router-dom": "^6.21.0",
     "react-transition-group": "^4.4.2",
     "screenfull": "^6.0.2",
     "styled-components": "^5.3.6",

diff --git a/templates/project-react-ts/src/component/Abnormal/index.tsx b/templates/project-react-ts/src/component/Abnormal/index.tsx
@@ -8,6 +8,7 @@ import pic403 from 'src/assets/403.png'
 import picnodata from 'src/assets/images/no_data.png'
 
 import style from './style.module.less'
+import { observer } from 'mobx-react-lite'
 
 interface StatusItem {
   title: string
@@ -64,7 +65,7 @@ const NoAuthorityRoutesPaths: string[] = routes.map(v => v.path || 'iframe' || '
 
 message.destroy()
 
-const Abnormal: FC = () => {
+const Abnormal: FC = observer(() => {
   const { pathname, search } = router.location
   let status: string = pathname?.split('/')?.[2]
 
@@ -95,6 +96,6 @@ const Abnormal: FC = () => {
       </div>
     </div>
   )
-}
+})
 
 export default Abnormal
diff --git a/templates/project-react-ts/src/component/App/Menu/Link.tsx b/templates/project-react-ts/src/component/App/Menu/Link.tsx
@@ -4,6 +4,7 @@ import { router } from 'src/router'
 const checkSamePathname = (e: React.MouseEvent) => {
   const href = (e.target as HTMLAnchorElement).getAttribute('href')
   const { location } = router
+
   if (href === location.pathname) {
     e.preventDefault()
     e.stopPropagation()

diff --git a/templates/project-react-ts/src/component/App/Menu/index.tsx b/templates/project-react-ts/src/component/App/Menu/index.tsx
@@ -23,7 +23,7 @@ export const Menu: React.FC = observer(() => {
   React.useEffect(
     () =>
       router.subscribe(({ location }) => {
-          store.selectedKeys.set([location.pathname])
+        store.selectedKeys.set([location.pathname])
       }),
     [],
   )
@@ -49,80 +49,87 @@ export const Menu: React.FC = observer(() => {
     }
   }
 
-  React.useEffect(() => {
-    // 跳转有权限的首个菜单
-    const firstMenu = sessionStorage.getItem('firstMenuUri')
-    // 刷新时保持当前页签
-    if (!firstMenu || router.location.pathname === '/') {
-      sessionStorage.setItem('firstMenuUri', firstMenuUri.value)
-      // 如果有搜索条件
-      if (router.location.search) {
-        router.push(firstMenuUri.value + router.location.search)
-      } else {
-        router.push(firstMenuUri.value)
-      }
-      store.selectedKeys.set(firstMenuUri.value)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [firstMenuUri.value])
+  // React.useEffect(() => {
+  //   // 跳转有权限的首个菜单
+  //   const firstMenu = sessionStorage.getItem('firstMenuUri')
+  //   // 刷新时保持当前页签
+  //   if (!firstMenu || router.location.pathname === '/') {
+  //     sessionStorage.setItem('firstMenuUri', firstMenuUri.value)
+  //     // 如果有搜索条件
+  //     if (router.location.search) {
+  //       router.push(firstMenuUri.value + router.location.search)
+  //     } else {
+  //       router.push(firstMenuUri.value)
+  //     }
+  //     store.selectedKeys.set(firstMenuUri.value)
+  //   }
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [firstMenuUri.value])
 
   const menus = toJS(store.menuList.value)
   const { history } = router
   const screenHeight = document.body.clientHeight
-console.log(menus)
+
+  let [state, setState] = React.useState({
+    action: router.history.action,
+    location: router.history.location,
+  })
+  React.useLayoutEffect(() => router.subscribe(setState), [])
+
+  console.log(store.selectedKeys.value, state.location.pathname)
   return (
     <div className="menu-wrapper">
       {/* {store.computedOpenKeys.get() && store.computedOpenKeys.get().length > 0 && ( */}
-        <AntMenu
-          selectedKeys={store.selectedKeys.value}
-          defaultOpenKeys={store.computedOpenKeys.get()}
-          mode="inline"
-          className="pl-1 overflow-x-hidden overflow-y-auto"
-          style={{ color: '#000', height: `${screenHeight - 64}px` }}
-          onSelect={onSelect}
-        >
-          {menus.map((m: MenuData) =>
-            m.isShow || m.show ? (
-              m.children && m.children.length ? (
-                <SubMenu key={m.code} title={m.name}>
-                  {m.children.map((n: MenuData) =>
-                    n.children && n.children.length ? (
-                      <SubMenu key={n.code} title={n.name}>
-                        {n.children.map(z =>
-                          z.isShow || z.show ? (
-                            <AntMenu.Item key={z.uri}>
-                              <Router history={history}>
-                                <Link to={z.uri || ''}>{z.name}</Link>
-                              </Router>
-                            </AntMenu.Item>
-                          ) : null,
+      <AntMenu
+        selectedKeys={store.selectedKeys.value}
+        defaultOpenKeys={store.computedOpenKeys.get()}
+        mode="inline"
+        className="pl-1 overflow-x-hidden overflow-y-auto"
+        style={{ color: '#000', height: `${screenHeight - 64}px` }}
+        onSelect={onSelect}
+      >
+        {menus.map((m: MenuData) =>
+          m.isShow || m.show ? (
+            m.children && m.children.length ? (
+              <SubMenu key={m.code} title={m.name}>
+                {m.children.map((n: MenuData) =>
+                  n.children && n.children.length ? (
+                    <SubMenu key={n.code} title={n.name}>
+                      {n.children.map(z =>
+                        z.isShow || z.show ? (
+                          <AntMenu.Item key={z.uri}>
+                            <Router location={state.location} navigationType={state.action} navigator={router.history}>
+                              <Link to={z.uri || ''}>{z.name}</Link>
+                            </Router>
+                          </AntMenu.Item>
+                        ) : null,
+                      )}
+                    </SubMenu>
+                  ) : n.isShow || n.show ? (
+                    <AntMenu.Item key={n.code}>
+                      <Router location={state.location} navigationType={state.action} navigator={router.history}>
+                        {n.linkType === 2 ? (
+                          <a href={n.url} target="_blank" rel="noreferrer">
+                            {n.name}
+                          </a>
+                        ) : (
+                          <Link to={n.uri || ''}>{n.name}</Link>
                         )}
-                      </SubMenu>
-                    ) : n.isShow || n.show ? (
-                      <AntMenu.Item key={n.uri}>
-                        <Router history={history}>
-                          {n.linkType === 2 ? (
-                            <a href={n.url} target="_blank" rel="noreferrer">
-                              {n.name}
-                            </a>
-                          ) : (
-                            <Link to={n.uri || ''}>{n.name}</Link>
-                          )}
-                        </Router>
-                      </AntMenu.Item>
-                    ) : null,
-                  )}
-                </SubMenu>
-              ) : (
-                <AntMenu.Item key={m.uri}>
-                  <Router history={history}>
-                    <Link to={m.uri || ''}>{m.name}</Link>
-                  </Router>
-                </AntMenu.Item>
-              )
-            ) : null,
-          )}
-        </AntMenu>
+                      </Router>
+                    </AntMenu.Item>
+                  ) : null,
+                )}
+              </SubMenu>
+            ) : (
+              <AntMenu.Item key={m.code}>
+                <Router location={state.location} navigationType={state.action} navigator={router.history}>
+                  <Link to={m.uri || ''}>{m.name}</Link>
+                </Router>
+              </AntMenu.Item>
+            )
+          ) : null,
+        )}
+      </AntMenu>
       {/* )} */}
     </div>
   )

diff --git a/templates/project-react-ts/src/component/App/index.tsx b/templates/project-react-ts/src/component/App/index.tsx
@@ -5,7 +5,6 @@ import zhCN from 'antd/lib/locale/zh_CN'
 import * as React from 'react'
 import { DevicePixelRatio } from 'src/devicePixelRadio'
 import { inIframe } from 'tool/InIframe'
-import { router } from 'src/router'
 
 import { Layout } from './Layout'
 import { listen } from './emitter'
@@ -18,17 +17,6 @@ export const App = () => {
     DevicePixelRatio.init()
   }, [])
 
-  React.useEffect(() => {
-    // 初始化零智消息组件
-    if (inIframe) {
-      LsMessage.init({
-        domain: '*', // 父应用域名
-        router,
-        listenUrl: true,
-      })
-    }
-  }, [])
-
   React.useEffect(listen, [])
   return (
     <ConfigProvider

diff --git a/templates/project-react-ts/src/component/App/store.ts b/templates/project-react-ts/src/component/App/store.ts
@@ -34,12 +34,19 @@ export const userInfo = mobxRequest({
 
     const mockMenu = [
       {
-        code: 'Demo',
+        code: '/Demo',
         name: 'Demo',
         uri: '/Demo',
         url: '/Demo',
         isShow: true,
       },
+      {
+        code: '/Demo1',
+        name: 'Demo1',
+        uri: '/Demo1',
+        url: '/Demo1',
+        isShow: true,
+      },
     ]
     setMenuList(mockMenu)
 

diff --git a/templates/project-react-ts/src/component/TransitionRoute/index.tsx b/templates/project-react-ts/src/component/TransitionRoute/index.tsx
@@ -1,7 +1,7 @@
 import Abnormal from 'component/Abnormal'
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
-import { Route, Router, Switch } from 'react-router-dom'
+import { Route, Routes, Router } from 'react-router-dom'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import { router } from 'src/router'
 import { getCurUri } from 'src/component/App/Menu/store'
@@ -32,21 +32,29 @@ const AuthRoutes = (menus: MenuData[]) => {
   // return filterRoutes.filter(v => v)
 }
 
-export const TransitionRoute: React.FC<any> = observer(({ menus }) => (
-  <Router history={router.history}>
-    <TransitionGroup className={s.wrapper}>
-      <CSSTransition classNames="route" timeout={300}>
-        <React.Suspense fallback={<>loading...</>}>
-          <Switch location={router.location}>
-            {AuthRoutes(menus).map(r => (
-              <Route {...r} />
-            ))}
-            {/* <Route path="*" component={RedirectToWorkbench} /> */}
-            {/* 没有匹配到的默认路由，放到最后 */}
-            {menus && menus.length > 0 && <Route component={Abnormal} />}
-          </Switch>
-        </React.Suspense>
-      </CSSTransition>
-    </TransitionGroup>
-  </Router>
-))
+export const TransitionRoute: React.FC<any> = observer(({ menus }) => {
+  let [state, setState] = React.useState({
+    action: router.history.action,
+    location: router.history.location,
+  })
+  React.useLayoutEffect(() => router.subscribe(setState), [])
+
+  return (
+    <Router location={state.location} navigationType={state.action} navigator={router.history}>
+      <TransitionGroup className={s.wrapper}>
+        <CSSTransition classNames="route" timeout={300}>
+          <React.Suspense fallback={<>loading...</>}>
+            <Routes>
+              {AuthRoutes(menus).map(r => (
+                <Route {...r} />
+              ))}
+              {/* <Route path="*" element={<RedirectToWorkbench />} /> */}
+              {/* 没有匹配到的默认路由，放到最后 */}
+              {menus && menus.length > 0 && <Route path="*" element={<Abnormal />} />}
+            </Routes>
+          </React.Suspense>
+        </CSSTransition>
+      </TransitionGroup>
+    </Router>
+  )
+})
diff --git a/templates/project-react-ts/src/index.tsx b/templates/project-react-ts/src/index.tsx
@@ -1,17 +1,14 @@
 /* eslint-disable no-underscore-dangle */
-import { render } from 'react-dom'
-import microApp from '@micro-zoe/micro-app'
+import { createRoot } from 'react-dom/client'
 import { configure } from 'mobx'
-import Meteor from '@scf/meteor-react'
 import { App } from 'component/App'
 
-// import 'antd/dist/antd.less'
-
 import './style/index.css'
 import './style/app.less'
 
 configure({
   isolateGlobalState: true,
 })
 
-render(<App />, document.querySelector('#app'))
+const root = createRoot(document.querySelector('#app')!)
+root.render(<App />)
diff --git a/templates/project-react-ts/src/lib/Router.ts b/templates/project-react-ts/src/lib/Router.ts
@@ -14,7 +14,7 @@ export const clearInstance = () => {
 
 export type HistoryType = 'hash' | 'browser' | 'memory'
 
-export interface Route extends RouteProps {
+export type Route = RouteProps & {
   key: string
 }
 export type Routes = Array<Route>

diff --git a/templates/project-react-ts/src/page/Demo/index.tsx b/templates/project-react-ts/src/page/Demo/index.tsx
@@ -2,12 +2,19 @@ import { observer } from 'mobx-react-lite'
 import React from 'react'
 import * as store from './store'
 import { Button } from 'antd'
+import { router } from 'src/router'
 
-const Demo: React.FC = observer(props => (
-  <div className="content">
-    <h1>{store.count.value}</h1>
-    <Button onClick={() => store.count.set(store.count.value + 1)}>+1</Button>
-  </div>
-))
+const Demo: React.FC = observer(props => {
+  console.log(router.location.pathname, 99)
+  return (
+    <div className="content">
+      <h1>Demo: {store.count.value}</h1>
+      <Button onClick={() => store.count.set(store.count.value + 1)}>+1</Button>
+      <Button onClick={() => {
+        router.push('/Demo1')
+      }}>go demo1</Button>
+    </div>
+  )
+})
 
 export { Demo as default }
diff --git a/templates/project-react-ts/src/page/Demo/store.ts b/templates/project-react-ts/src/page/Demo/store.ts
@@ -4,6 +4,7 @@ import * as api from 'src/services/Demo'
 
 export const count = setter<number>({
   value: 0,
+  autoRestoreOnBecomeUnobserved: true,
 })
 
 export const someData = request({