fix: update antd deps

Author: virgoone

template/antd-console/.eslintrc.js

@@ -0,0 +1,21 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  typescript: true,
+  ignores: ['**/scripts'],
+  stylistic: {
+    indent: 2, // 4, or 'tab'
+    quotes: 'single', // or 'double'
+  },
+  rules: {
+    'unused-imports/no-unused-vars': ['warn'],
+    'no-console': ['warn'],
+    'prefer-regex-literals': ['warn'],
+    'style/multiline-ternary': ['warn'],
+    'ts/ban-ts-comment': ['warn'],
+    'array-callback-return': ['warn'],
+    'unicorn/no-new-array': ['warn'],
+    'ts/no-require-imports': ['warn'],
+    'node/prefer-global/process': ['warn'],
+  },
+})

template/antd-console/eslint.config.mjs

@@ -13,76 +13,83 @@
     "build": "lark build",
     "lint": "concurrently pnpm:lint:*",
     "lint:format": "prettier --write .",
-    "lint:code": "eslint --fix . --ext .js,.ts,.tsx",
-    "preversion": "pnpm run lint",
+    "lint:fix": "eslint . --fix",
     "prepare": "husky install"
   },
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
-    "@ant-design/icons": "^5.1.4",
+    "@ant-design/icons": "^5.4.0",
     "@ant-design/plots": "^1.2.5",
     "@ant-design/use-emotion-css": "^1.0.4",
     "@antv/data-set": "^0.11.8",
-    "@loadable/component": "^5.15.3",
-    "@turf/turf": "^6.5.0",
-    "antd": "^5.6.0",
-    "axios": "^1.4.0",
-    "clsx": "^1.2.1",
-    "dayjs": "^1.11.8",
+    "@loadable/component": "^5.16.4",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@tanstack/react-query": "^5.55.0",
+    "@tanstack/react-query-devtools": "^5.55.0",
+    "@turf/turf": "^7.1.0",
+    "antd": "^5.20.5",
+    "axios": "^1.7.7",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "history": "^5.3.0",
+    "immer": "^10.1.1",
     "lodash": "^4.17.21",
-    "lottie-web": "^5.12.0",
-    "mobx": "^6.9.0",
-    "mobx-react": "^7.6.0",
+    "lottie-web": "^5.12.2",
     "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "query-string": "^8.1.0",
-    "react": "^18.2.0",
+    "query-string": "^9.1.0",
+    "react": "^18.3.1",
     "react-color": "^2.19.3",
     "react-document-title": "^2.0.3",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.12.0",
-    "react-router-dom": "^6.12.0",
-    "recompose": "^0.30.0"
+    "react-dom": "^18.3.1",
+    "react-router": "^6.26.1",
+    "react-router-dom": "^6.26.1",
+    "recompose": "^0.30.0",
+    "spark-md5": "^3.0.2",
+    "tailwind-merge": "^2.5.2",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.22.3",
-    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.5",
-    "@lark-org/lark-cli": "^1.8.13",
-    "@types/loadable__component": "^5.13.4",
-    "@types/lodash": "^4.14.195",
-    "@types/mockjs": "^1.0.7",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.8",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.2.4",
+    "@antfu/eslint-config": "^3.5.0",
+    "@babel/runtime": "^7.25.6",
+    "@commitlint/cli": "^19.4.1",
+    "@commitlint/config-conventional": "^19.4.1",
+    "@lark-org/lark-cli": "^1.8.14",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/loadable__component": "^5.13.9",
+    "@types/lodash": "^4.17.7",
+    "@types/mockjs": "^1.0.10",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.5",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.20",
-    "@types/react-router-config": "^5.0.7",
+    "@types/react-router-config": "^5.0.11",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.26",
-    "babel-plugin-import": "^1.13.6",
+    "@types/styled-components": "^5.1.34",
+    "babel-plugin-import": "^1.13.8",
     "babel-plugin-macros": "^3.1.0",
-    "concurrently": "^8.1.0",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
+    "enzyme-adapter-react-16": "^1.15.8",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.42.0",
-    "eslint-config-lark": "^0.4.0",
-    "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "lint-staged": "^13.2.2",
+    "eslint": "^9.9.1",
+    "husky": "^9.1.5",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.10",
     "lolex": "^6.0.0",
+    "netlify-cli": "^17.36.0",
     "penv.macro": "^0.4.0",
-    "prettier": "^2.8.8",
-    "styled-components": "^5.3.11",
-    "tailwindcss": "^3.3.2",
-    "typescript": "^5.1.3"
+    "prettier": "^3.3.3",
+    "styled-components": "^6.1.13",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4"
   },
   "lint-staged": {
-    "*.{js,ts,jsx,tsx}": "eslint src --fix",
+    "*.{js,ts,jsx,tsx}": "eslint --fix",
     "**/*": "prettier -w -u"
   },
   "browserslist": {

template/antd-console/package.json

@@ -1,21 +1,20 @@
-import React, { useEffect, useState } from 'react'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { Provider } from 'mobx-react'
-import { ConfigProvider, theme as antdTheme } from 'antd'
-import zhCN from 'antd/locale/zh_CN'
+import { IconPrefix, Prefix } from '@/constants/config'
+import { GlobalContext } from '@/globals/context'
+import { useModel } from '@/store'
+import { theme as antdTheme, ConfigProvider } from 'antd'
 import enUS from 'antd/locale/en_US'
+import zhCN from 'antd/locale/zh_CN'
 
-import { GlobalContext } from '@/globals/context'
-import store from '@/store'
+import React, { useEffect, useState } from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import PageLayout from './layout'
 import Login from './pages/login'
+import { QueryProvider } from './query-provider'
 
 function App() {
   const defaultLang = localStorage.getItem('antd-lang') || 'zh-CN'
   const [lang, setLang] = useState(defaultLang)
-
-  const { user, global } = store
-
+  const store = useModel((state) => state)
   function getLocale() {
     switch (lang) {
       case 'zh-CN':
@@ -30,45 +29,43 @@ function App() {
   useEffect(() => {
     localStorage.setItem('antd-lang', lang)
   }, [lang])
-
   useEffect(() => {
-    const isLogin = localStorage.getItem('@token')
-
-    if (isLogin) {
-      user.getUserInfo()
-      user.isLogin = true
+    if (!!localStorage.getItem('@@token')) {
+      store.init()
     } else if (window.location.pathname !== '/user/login') {
       window.location.href = '/user/login'
     }
   }, [])
 
   const contextValue = {
-    user,
+    user: store.info,
     lang,
     setLang,
   }
 
   return (
-    <BrowserRouter basename="/">
+    <QueryProvider>
       <ConfigProvider
         locale={getLocale()}
+        prefixCls={Prefix}
+        iconPrefixCls={IconPrefix}
         theme={{
           algorithm:
-            global.theme === 'light'
+            store.theme === 'light'
               ? antdTheme.defaultAlgorithm
               : antdTheme.darkAlgorithm,
         }}
       >
-        <Provider {...store}>
-          <GlobalContext.Provider value={contextValue}>
+        <GlobalContext.Provider value={contextValue}>
+          <BrowserRouter basename="/">
             <Routes>
               <Route path="/user/login" element={<Login />} />
               <Route path="*" element={<PageLayout />} />
             </Routes>
-          </GlobalContext.Provider>
-        </Provider>
+          </BrowserRouter>
+        </GlobalContext.Provider>
       </ConfigProvider>
-    </BrowserRouter>
+    </QueryProvider>
   )
 }
 

template/antd-console/src/App.tsx

@@ -1,18 +1,17 @@
+import { useModel } from '@/store'
 import React from 'react'
-import { observer } from 'mobx-react'
-import { Navigate, useLocation } from 'react-router-dom'
 
-import useStores from '@/hooks/useStores'
+import { Navigate, useLocation } from 'react-router-dom'
 
 function Auth({ children }: { children: JSX.Element }) {
   const location = useLocation()
-  const userStore = useStores('user')
+  const [isLogin] = useModel((state) => [state.isLogin])
 
-  if (!userStore?.isLogin) {
+  if (!isLogin) {
     return <Navigate to="/user/login" state={{ from: location }} replace />
   }
 
   return children
 }
 
-export default observer(Auth)
+export default Auth

template/antd-console/src/components/auth/index.tsx

@@ -14,7 +14,7 @@
     border-radius: 4px;
     color: var(--color-text-2);
 
-    :global(.ant-badge-status-dot) {
+    :global(.lark-badge-status-dot) {
       width: 10px;
       height: 10px;
       margin-right: 8px;

template/antd-console/src/components/chart/style/index.less

@@ -0,0 +1,79 @@
+import { cn } from '@/utils'
+
+import * as React from 'react'
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }