feat: v1.2.0

surmon-china · Dec 6, 2021 · e3fa086 · e3fa086
1 parent 4e1a737
commit e3fa086
Show file tree

Hide file tree

Showing 25 changed files with 699 additions and 653 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,9 +1,8 @@
 {
-  "editor.detectIndentation": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.formatOnType": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
+    "source.fixAll": true
   },
   "prettier.semi": false,
   "prettier.singleQuote": true,

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+### v1.2.0 (2021-12-06)
+
+- Updrade deps
+- Upgrade `react-router` to v6
+- Update `profile.archive` biz
+
 ### v1.1.4 (2021-09-06)
 
 - Fix Demo site bugs

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "veact-admin",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "author": "Surmon",
   "license": "MIT",
   "repository": {
@@ -20,48 +20,47 @@
   },
   "dependencies": {
     "ali-oss": "^6.16.0",
-    "antd": "^4.16.13",
-    "axios": "^0.21.3",
+    "antd": "^4.17.2",
+    "axios": "^0.24.0",
     "bezier-easing": "^2.1.0",
     "classnames": "^2.3.1",
     "gravatar": "^1.8.2",
-    "highlight.js": "^11.2.0",
-    "js-base64": "^3.6.1",
+    "highlight.js": "^11.3.1",
+    "js-base64": "^3.7.2",
     "lodash": "^4.17.21",
-    "marked": "^3.0.2",
+    "marked": "^4.0.6",
     "moment": "^2.29.1",
-    "monaco-editor": "^0.27.0",
+    "monaco-editor": "^0.30.1",
     "performant-array-to-tree": "^1.9.1",
     "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
-    "react-top-loading-bar": "^2.0.1",
+    "react-router-dom": "^6.0.2",
+    "react-top-loading-bar": "^2.1.0",
     "react-transition-group": "^4.4.2",
-    "ua-parser-js": "^0.7.28",
+    "ua-parser-js": "^1.0.2",
     "veact": "^0.1.3",
     "veact-use": "^0.1.3"
   },
   "devDependencies": {
-    "@types/ali-oss": "^6.0.10",
+    "@types/ali-oss": "^6.16.2",
     "@types/gravatar": "^1.8.3",
-    "@types/lodash": "^4.14.172",
-    "@types/marked": "^3.0.0",
-    "@types/node": "^16.7.10",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router-dom": "^5.1.8",
-    "@types/react-transition-group": "^4.4.2",
+    "@types/lodash": "^4.14.177",
+    "@types/marked": "^4.0.1",
+    "@types/node": "^16.11.11",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
     "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.30.0",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "eslint": "^7.32.0",
+    "eslint": "^8.4.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "less": "^4.1.1",
-    "prettier": "^2.3.2",
-    "typescript": "^4.4.2",
-    "vite": "^2.5.3"
+    "less": "^4.1.2",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.2",
+    "vite": "^2.6.14"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,28 +4,35 @@
  */
 
 import React from 'react'
-import { BrowserRouter, HashRouter, Route, Switch, Redirect } from 'react-router-dom'
+import {
+  BrowserRouter,
+  HashRouter,
+  Route,
+  Routes,
+  Navigate,
+  Outlet,
+} from 'react-router-dom'
 import { onMounted, useReactivity } from 'veact'
 import LoadingBar from 'react-top-loading-bar'
 import 'moment/locale/zh-cn'
 
 import { ENV, VITE_ENV, APP_COLOR_PRIMARY, ENABLEd_HASH_ROUTER } from '@/config'
-import { RouteKey, routeMap, rc } from '@/route'
+import { RouteKey, rc } from '@/routes'
 import { loading } from '@/state/loading'
 import { AppAuth } from '@/components/AppAuth'
 import { AppLayout } from '@/components/AppLayout'
 
 import { HelloPage } from '@/pages/Hello'
-import { NotFoundPage } from './pages/NotFound'
-import { DashboardPage } from './pages/Dashboard'
-import { AnnouncementPage } from './pages/Announcement'
-import { CategoryPage } from './pages/Category'
-import { TagPage } from './pages/Tag'
-import { CommentPage } from './pages/Comment'
-import { ArticleList } from './pages/Article/List'
-import { ArticleEdit } from './pages/Article/Edit'
-import { ArticleCreate } from './pages/Article/Create'
-import { ProfilePage } from './pages/Profile'
+import { NotFoundPage } from '@/pages/NotFound'
+import { DashboardPage } from '@/pages/Dashboard'
+import { AnnouncementPage } from '@/pages/Announcement'
+import { CategoryPage } from '@/pages/Category'
+import { TagPage } from '@/pages/Tag'
+import { CommentPage } from '@/pages/Comment'
+import { ArticleList } from '@/pages/Article/List'
+import { ArticleEdit } from '@/pages/Article/Edit'
+import { ArticleCreate } from '@/pages/Article/Create'
+import { ProfilePage } from '@/pages/Profile'
 
 // Router: WORKAROUND for outside
 const RouterComponent: React.FC = (props) => {
@@ -55,61 +62,63 @@ export const App: React.FC = () => {
         progress={loadingState.percent}
       />
       <RouterComponent>
-        <Switch>
-          <Route path="/" exact>
-            <Redirect to={rc(RouteKey.Dashboard).path} />
-          </Route>
+        <Routes>
+          <Route path={rc(RouteKey.Hello).path} element={<HelloPage />} />
           <Route
-            path={Array.from(routeMap.values())
-              .filter((route) => route.id !== RouteKey.Hello)
-              .map((route) => route.path)}
+            path="/"
+            element={
+              <AppAuth>
+                <AppLayout>
+                  <Outlet />
+                </AppLayout>
+              </AppAuth>
+            }
           >
-            <AppAuth>
-              <AppLayout>
-                <Switch>
-                  <Route path={rc(RouteKey.Dashboard).path} exact>
-                    <DashboardPage />
-                  </Route>
-                  <Route path={rc(RouteKey.Announcement).path} exact>
-                    <AnnouncementPage />
-                  </Route>
-                  <Route path={rc(RouteKey.Category).path} exact>
-                    <CategoryPage />
-                  </Route>
-                  <Route path={rc(RouteKey.Tag).path} exact>
-                    <TagPage />
-                  </Route>
-                  <Route path={rc(RouteKey.Comment).path} exact>
-                    <CommentPage />
-                  </Route>
-                  <Route path={rc(RouteKey.Article).path}>
-                    <Switch>
-                      <Route path={rc(RouteKey.ArticlePost).path} exact>
-                        <ArticleCreate />
-                      </Route>
-                      <Route path={rc(RouteKey.ArticleEdit).path} exact>
-                        <ArticleEdit />
-                      </Route>
-                      <Route path={rc(RouteKey.ArticleList).path} exact>
-                        <ArticleList />
-                      </Route>
-                      <Redirect to={rc(RouteKey.ArticleList).path} />
-                    </Switch>
-                  </Route>
-                  <Route path={rc(RouteKey.Profile).path} exact>
-                    <ProfilePage />
-                  </Route>
-                </Switch>
-              </AppLayout>
-            </AppAuth>
-          </Route>
-          <Route path={rc(RouteKey.Hello).path} exact>
-            <HelloPage />
-          </Route>
-          <Route path="*">
-            <NotFoundPage />
+            <Route
+              index={true}
+              element={<Navigate to={rc(RouteKey.Dashboard).path} replace />}
+            />
+            <Route path={rc(RouteKey.Dashboard).path} element={<DashboardPage />} />
+            <Route
+              path={rc(RouteKey.Announcement).path}
+              element={<AnnouncementPage />}
+            />
+            <Route path={rc(RouteKey.Category).path} element={<CategoryPage />} />
+            <Route path={rc(RouteKey.Tag).path} element={<TagPage />} />
+            <Route path={rc(RouteKey.Comment).path} element={<CommentPage />} />
+            <Route path={rc(RouteKey.Profile).path} element={<ProfilePage />} />
+            <Route
+              path={`${rc(RouteKey.Article).path}/*`}
+              element={
+                <Routes>
+                  <Route
+                    index={true}
+                    element={
+                      <Navigate to={rc(RouteKey.ArticleList).subPath!} replace />
+                    }
+                  />
+                  <Route
+                    path={rc(RouteKey.ArticleList).subPath}
+                    element={<ArticleList />}
+                  />
+                  <Route
+                    path={rc(RouteKey.ArticlePost).subPath}
+                    element={<ArticleCreate />}
+                  />
+                  <Route
+                    path={rc(RouteKey.ArticleEdit).subPath}
+                    element={<ArticleEdit />}
+                  />
+                  <Route
+                    path="*"
+                    element={<Navigate to={rc(RouteKey.ArticleList).path} replace />}
+                  />
+                </Routes>
+              }
+            />
           </Route>
-        </Switch>
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
       </RouterComponent>
     </div>
   )

diff --git a/src/components/AppAuth/index.tsx b/src/components/AppAuth/index.tsx
@@ -4,13 +4,13 @@
  */
 
 import React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useRef, onMounted, onBeforeUnmount } from 'veact'
 import { useLoading } from 'veact-use'
 import { notification, Typography } from 'antd'
 import { SwitchTransition, CSSTransition } from 'react-transition-group'
 
-import { RouteKey, rc } from '@/route'
+import { RouteKey, rc } from '@/routes'
 import { renewalToken, checkTokenValidity } from '@/store/auth'
 import {
   getTokenCountdown,
@@ -24,7 +24,7 @@ import styles from './style.module.less'
 let renewalTimer: null | number = null
 
 export const AppAuth: React.FC = (props) => {
-  const history = useHistory()
+  const navigate = useNavigate()
   const loading = useLoading()
   const isLogined = useRef(false)
 
@@ -72,7 +72,7 @@ export const AppAuth: React.FC = (props) => {
         description: '你还好吗？',
       })
       removeToken()
-      history.push(rc(RouteKey.Hello).path)
+      navigate(rc(RouteKey.Hello).path)
     }
   })
 

diff --git a/src/components/AppLayout/Content.tsx b/src/components/AppLayout/Content.tsx
@@ -1,23 +1,19 @@
 import React from 'react'
-import { matchPath } from 'react-router'
-import { useLocation } from 'react-router-dom'
+import { useLocation, matchPath } from 'react-router-dom'
 import { Breadcrumb, BackTop, Typography } from 'antd'
 import { CaretUpOutlined } from '@ant-design/icons'
 import { scrollTo } from '@/services/scroller'
-import { routeMap } from '@/route'
+import { routeMap } from '@/routes'
 import { PageHeaderAD } from './PageAD'
 
 import styles from './style.module.less'
 
 export const AppContent: React.FC = (props) => {
   const location = useLocation()
   const [, ...paths] = location.pathname.split('/')
-  const currentRoute = Array.from(routeMap.values()).find((route) =>
-    matchPath(location.pathname, {
-      path: route.path,
-      exact: true,
-    })
-  )
+  const currentRoute = Array.from(routeMap.values()).find((route) => {
+    return matchPath(route.path, location.pathname)
+  })
 
   return (
     <div className={styles.pageContainer}>

diff --git a/src/components/AppLayout/Header.tsx b/src/components/AppLayout/Header.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { Menu, Dropdown, Avatar, Button, Modal, Spin } from 'antd'
 import {
   LogoutOutlined,
@@ -9,7 +9,7 @@ import {
   MenuFoldOutlined,
 } from '@ant-design/icons'
 
-import { RouteKey, rc } from '@/route'
+import { RouteKey, rc } from '@/routes'
 import { removeToken } from '@/services/token'
 import { useAdminState } from '@/state/admin'
 
@@ -20,11 +20,11 @@ interface AppHeaderProps {
   onToggleSider(): void
 }
 export const AppHeader: React.FC<AppHeaderProps> = (props) => {
-  const history = useHistory()
+  const navigate = useNavigate()
   const admin = useAdminState()
 
   const redriectToProfileRoute = () => {
-    history.push(rc(RouteKey.Profile).path)
+    navigate(rc(RouteKey.Profile).path)
   }
 
   const logout = () => {
@@ -34,7 +34,7 @@ export const AppHeader: React.FC<AppHeaderProps> = (props) => {
       onOk() {
         console.log('退出系统')
         removeToken()
-        history.push(rc(RouteKey.Hello).path)
+        navigate(rc(RouteKey.Hello).path)
       },
     })
   }