Hooks refactor

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 150,
+  "semi": false,
+  "singleQuote": true
+}

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 4.1.0
+- [ ] MatterItem抽出通用组件
+
 # 4.0.4
 1. 修复已知问题
 

craco.config.js

@@ -1,12 +1,15 @@
-const CracoLessPlugin = require('craco-less');
+const CracoLessPlugin = require('craco-less')
+const { CracoAliasPlugin } = require('react-app-alias')
+const path = require('node:path')
 
 module.exports = {
   devServer: {
     port: 6015,
     // proxy for local development.
     proxy: {
       '/api': {
-        target: 'http://localhost:6010',
+        // target: 'http://localhost:6010',
+        target: 'https://tank.ycyin.cn',
         changeOrigin: true,
         pathRewrite: {
           '^/api': '/api',
@@ -21,10 +24,8 @@ module.exports = {
       options: {
         // resolve-url-loader只对sass生效，craco-less默认使用sass配置，所以这里手动过滤掉resolve-url-loader
         modifyLessRule: (lessRule) => {
-          lessRule.use = lessRule.use.filter(
-            (i) => !i.loader.includes('resolve-url-loader')
-          );
-          return lessRule;
+          lessRule.use = lessRule.use.filter((i) => !i.loader.includes('resolve-url-loader'))
+          return lessRule
         },
         lessLoaderOptions: {
           lessOptions: {
@@ -34,5 +35,13 @@ module.exports = {
         },
       },
     },
+    {
+      plugin: CracoAliasPlugin,
+      options: {
+        alias: {
+          '@': path.resolve(__dirname, 'src'),
+        },
+      },
+    },
   ],
-};
+}

ide-editor-config.xml

@@ -1 +1 @@
-<code_scheme name="Project" version="173" />
+<!--<code_scheme name="Project" version="173" />-->

package.json

@@ -3,6 +3,7 @@
   "version": "4.0.4",
   "private": true,
   "dependencies": {
+    "@ahooksjs/use-url-state": "^3.5.1",
     "@ant-design/icons": "4.7.0",
     "@craco/craco": "6.4.3",
     "@types/echarts": "4.6.1",
@@ -11,9 +12,11 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
     "@types/react-router-dom": "^5.3.3",
+    "ahooks": "^3.8.0",
     "antd": "4.19.2",
-    "axios": "^0.26.1",
+    "axios": "^1.7.2",
     "comma-separated-values": "^3.6.4",
+    "copy-to-clipboard": "^3.3.3",
     "craco-less": "2.0.0",
     "echarts": "4.8.0",
     "echarts-for-react": "2.0.16",
@@ -46,7 +49,9 @@
   "devDependencies": {
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8"
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "prettier": "^3.2.5",
+    "react-app-alias": "^2.2.2"
   },
   "husky": {
     "hooks": {
@@ -58,5 +63,6 @@
       "prettier --write",
       "git add"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

src/App.tsx

@@ -1,20 +1,23 @@
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { ConfigProvider } from 'antd';
-import Frame from './pages/Frame';
-import en_US from 'antd/es/locale/en_US';
+import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { ConfigProvider } from 'antd'
+import Frame from './pages/Frame'
+import en_US from 'antd/es/locale/en_US'
 
 // global less 须放在Frame组件之后，不然会出现按需加载的less文件覆盖样式问题
-import './App.less';
+import './App.less'
+import GlobalContextProvider from '@/contexts/globalContext'
 
 function App() {
   return (
     <Router>
       <ConfigProvider locale={en_US}>
-        <Frame />
+        <GlobalContextProvider>
+          <Frame />
+        </GlobalContextProvider>
       </ConfigProvider>
     </Router>
-  );
+  )
 }
 
-export default App;
+export default App

src/apis/matter.api.ts

@@ -0,0 +1,16 @@
+import { generateCRUDApi } from './util'
+import { IMatter } from '@/models/Matter'
+import { axios } from '@/setupAxios'
+
+const API_PREFIX = 'matter'
+
+export const matterCRUDApi = generateCRUDApi<{
+  listResponse: {
+    data: IMatter[]
+    total: number
+  }
+}>(API_PREFIX)
+
+export const updateMatterPrivacy = (body: { spaceUuid: string; uuid: string; privacy: boolean }) => {
+  return axios.post(`${API_PREFIX}/change/privacy`, body)
+}

src/apis/util.ts

@@ -0,0 +1,19 @@
+import { axios } from '@/setupAxios'
+
+export const generateCRUDApi = <
+  T extends {
+    filters?: Record<string, unknown>
+    listResponse?: any // list接口返回值
+  },
+>(
+  apiPrefix: string,
+) => {
+  return {
+    list: (filters?: T['filters']): Promise<T['listResponse']> => {
+      return axios.get(`${apiPrefix}/page`)
+    },
+    get: () => {},
+    save: () => {},
+    delete: () => {},
+  }
+}

src/assets/css/global/responsive.less

@@ -6,6 +6,10 @@
   .visible-pc {
     display: block !important;
   }
+
+  .visible-pc-flex {
+    display: flex !important;
+  }
 }
 
 @media (max-width: 992px) {
@@ -16,6 +20,10 @@
   .visible-pc {
     display: none !important;
   }
+
+  .visible-pc-flex {
+    display: none !important;
+  }
 }
 
 //浏览器滚动条样式

src/common/menu/MenuManager.tsx

@@ -1,12 +1,12 @@
 /**
  * 管理当前所有的菜单
  */
-import React from 'react';
-import MenuItem from './MenuItem';
-import Moon from '../model/global/Moon';
-import User from '../model/user/User';
-import { UserRole } from '../model/user/UserRole';
-import Sun from '../../common/model/global/Sun';
+import React from 'react'
+import MenuItem from './MenuItem'
+import Moon from '../model/global/Moon'
+import User from '../model/user/User'
+import { UserRole } from '../model/user/UserRole'
+import Sun from '../../common/model/global/Sun'
 import {
   AppstoreOutlined,
   CloudSyncOutlined,
@@ -16,23 +16,23 @@ import {
   SettingOutlined,
   ShareAltOutlined,
   TeamOutlined,
-} from '@ant-design/icons';
-import { LoginOutlined } from '@ant-design/icons/lib';
-import Preference from '../model/preference/Preference';
-import Lang from '../model/global/Lang';
+} from '@ant-design/icons'
+import { LoginOutlined } from '@ant-design/icons/lib'
+import Preference from '../model/preference/Preference'
+import Lang from '../model/global/Lang'
 
 export default class MenuManager {
   //单例模式
-  private static singleton: MenuManager;
+  private static singleton: MenuManager
 
   constructor() {}
 
   static getSingleton(): MenuManager {
     if (!MenuManager.singleton) {
       //初始化一个mainLand.
-      MenuManager.singleton = new MenuManager();
+      MenuManager.singleton = new MenuManager()
     }
-    return MenuManager.singleton;
+    return MenuManager.singleton
   }
 
   /**
@@ -41,96 +41,49 @@ export default class MenuManager {
   getSelectedKeys(): string[] {
     let keys: string[] = this.getMenuItems()
       .filter((menuItem: MenuItem, index: number) => {
-        return menuItem.active;
+        return menuItem.active
       })
       .map((menuItem: MenuItem, index: number) => {
-        return menuItem.url;
-      });
+        return menuItem.url
+      })
 
-    return keys;
+    return keys
   }
 
   /**
    * 高亮某个菜单
    */
   selectMenu(url: string) {
     this.getMenuItems().forEach((menuItem: MenuItem, index: number) => {
-      menuItem.active = menuItem.url === url;
-    });
+      menuItem.active = menuItem.url === url
+    })
   }
 
   getMenuItems(): MenuItem[] {
-    let user: User = Moon.getSingleton().user;
-    let preference: Preference = Moon.getSingleton().preference;
+    let user: User = Moon.getSingleton().user
+    let preference: Preference = Moon.getSingleton().preference
 
-    let menuItems: MenuItem[] = [];
+    let menuItems: MenuItem[] = []
 
     if (!preference.installed) {
-      menuItems = [
-        new MenuItem(
-          Lang.t('layout.install'),
-          '/install/index',
-          <SettingOutlined />
-        ),
-      ];
+      menuItems = [new MenuItem(Lang.t('layout.install'), '/install/index', <SettingOutlined />)]
     } else if (user.role === UserRole.GUEST) {
-      menuItems = [
-        new MenuItem(Lang.t('user.login'), '/user/login', <LoginOutlined />),
-      ];
+      menuItems = [new MenuItem(Lang.t('user.login'), '/user/login', <LoginOutlined />)]
     } else {
-      menuItems.push(
-        new MenuItem(
-          Lang.t('layout.allFiles'),
-          '/matter/list',
-          <AppstoreOutlined />
-        )
-      );
-      menuItems.push(
-        new MenuItem(Lang.t('layout.space'), '/space', <CloudSyncOutlined />)
-      );
-      menuItems.push(
-        new MenuItem(
-          Lang.t('layout.myShare'),
-          '/share/list',
-          <ShareAltOutlined />
-        )
-      );
-      menuItems.push(
-        new MenuItem(Lang.t('layout.bin'), '/bin/list', <DeleteOutlined />)
-      );
+      menuItems.push(new MenuItem(Lang.t('layout.allFiles'), '/matter/list', <AppstoreOutlined />))
+      menuItems.push(new MenuItem(Lang.t('layout.allFiles'), '/new/matter/list', <AppstoreOutlined />))
+      menuItems.push(new MenuItem(Lang.t('layout.space'), '/space', <CloudSyncOutlined />))
+      menuItems.push(new MenuItem(Lang.t('layout.myShare'), '/share/list', <ShareAltOutlined />))
+      menuItems.push(new MenuItem(Lang.t('layout.bin'), '/bin/list', <DeleteOutlined />))
 
       if (user.role === UserRole.ADMINISTRATOR) {
-        menuItems.push(
-          new MenuItem(
-            Lang.t('layout.setting'),
-            '/preference/index',
-            <SettingOutlined />
-          )
-        );
-        menuItems.push(
-          new MenuItem(
-            Lang.t('layout.dashboard'),
-            '/dashboard/index',
-            <DashboardOutlined />
-          )
-        );
-        menuItems.push(
-          new MenuItem(
-            Lang.t('layout.users'),
-            `${Sun.getSingleton().isMobile ? '/mobile' : ''}/user/list`,
-            <TeamOutlined />
-          )
-        );
+        menuItems.push(new MenuItem(Lang.t('layout.setting'), '/preference/index', <SettingOutlined />))
+        menuItems.push(new MenuItem(Lang.t('layout.dashboard'), '/dashboard/index', <DashboardOutlined />))
+        menuItems.push(new MenuItem(Lang.t('layout.users'), `${Sun.getSingleton().isMobile ? '/mobile' : ''}/user/list`, <TeamOutlined />))
       }
-      menuItems.push(
-        new MenuItem(
-          Lang.t('layout.logout'),
-          '/user/logout',
-          <PoweroffOutlined />
-        )
-      );
+      menuItems.push(new MenuItem(Lang.t('layout.logout'), '/user/logout', <PoweroffOutlined />))
     }
 
-    return menuItems;
+    return menuItems
   }
 }