feat: 优化代码

JackySoft · Nov 23, 2024 · 2cc4f54 · 2cc4f54
1 parent b213c2a
commit 2cc4f54
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 91 deletions.
diff --git a/packages/admin/src/api/index.ts b/packages/admin/src/api/index.ts
@@ -10,14 +10,6 @@ export const getUserInfo = async () => {
   return request.get('/user/info');
 };
 
-// 获取用户头像
-export const getUserAvatar = () => {
-  // TODO 等后续接入微信扫码后生成用户头像
-  return Promise.resolve({
-    avatar: '',
-  });
-};
-
 // 获取页面详情
 export const getPageDetail = (env: string, id: number) => {
   return request.get(`/admin/page/detail/${env}/${id}`);

diff --git a/packages/admin/src/components/Header/Header.tsx b/packages/admin/src/components/Header/Header.tsx
@@ -7,24 +7,16 @@ import { useProjectStore } from '@/stores/projectStore';
 import Logo from '../Logo/Logo';
 import BreadList from '../BreadList/BreadList';
 import Menu from '../Menu/Menu';
-import { getUserAvatar } from '@/api';
 import styles from './index.module.less';
 
 /**
  * 编辑器顶部组件
  */
 const Header = memo(() => {
-  const [avatar, setAvatar] = useState('');
-  const { userName = '-' } = usePageStore((state) => state.userInfo);
+  const userInfo = usePageStore((state) => state.userInfo);
   const { projectInfo, collapsed, updateCollapsed } = useProjectStore();
   const navigate = useNavigate();
 
-  useEffect(() => {
-    getUserAvatar().then((res) => {
-      setAvatar(res.avatar);
-    });
-  }, []);
-
   // 控制菜单图标关闭和展开
   const toggleCollapsed = () => {
     updateCollapsed();
@@ -61,13 +53,13 @@ const Header = memo(() => {
       {/* 用户信息 */}
       <div className={styles.user}>
         {/* 用户头像 */}
-        {avatar ? <img width={30} src={avatar} style={{ borderRadius: '50%' }} /> : null}
+        {userInfo.avatar ? <img width={30} src={userInfo.avatar} style={{ borderRadius: '50%' }} /> : null}
         <Dropdown
           menu={{
             items: [
               {
                 key: 'profile',
-                label: userName,
+                label: userInfo.nickName,
               },
               {
                 key: 'logout',
@@ -85,7 +77,7 @@ const Header = memo(() => {
         >
           <a onClick={(e) => e.preventDefault()}>
             <Space>
-              <span style={{ marginLeft: '10px', color: isLight ? '' : '#fff' }}>{`${userName}` || '开发者'}</span>
+              <span style={{ marginLeft: '10px', color: isLight ? '' : '#fff' }}>{`${userInfo.nickName}` || '开发者'}</span>
               <DownOutlined />
             </Space>
           </a>

diff --git a/packages/admin/src/pages/console/HomeHeader.tsx b/packages/admin/src/pages/console/HomeHeader.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, Space } from 'antd';
+import { Dropdown, Flex, Space } from 'antd';
 import { useLoaderData, useNavigate } from 'react-router-dom';
 import { DownOutlined } from '@ant-design/icons';
 import style from './index.module.less';
@@ -11,34 +11,38 @@ function HomeHeader() {
         <img width={40} src={`${import.meta.env.VITE_CDN_URL}/mars-logo.png`} alt="logo" />
         <span>工作台</span>
       </div>
-      <Dropdown
-        menu={{
-          items: [
-            {
-              key: 'profile',
-              label: userInfo.userName,
+      <Flex align="center">
+        {/* 用户头像 */}
+        {userInfo.avatar ? <img width={30} src={userInfo.avatar} style={{ marginRight: 10 }} /> : null}
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: 'profile',
+                label: userInfo.userName,
+              },
+              {
+                key: 'logout',
+                label: '退出',
+              },
+            ],
+            onClick: ({ key }) => {
+              if (key === 'logout') {
+                localStorage.clear();
+                navigate(`/login?callback=${window.location.href}`);
+              }
             },
-            {
-              key: 'logout',
-              label: '退出',
-            },
-          ],
-          onClick: ({ key }) => {
-            if (key === 'logout') {
-              localStorage.clear();
-              navigate(`/login?callback=${window.location.href}`);
-            }
-          },
-          selectable: true,
-        }}
-      >
-        <a onClick={(e) => e.preventDefault()}>
-          <Space>
-            {`${userInfo?.userName}` || '开发者'}
-            <DownOutlined />
-          </Space>
-        </a>
-      </Dropdown>
+            selectable: true,
+          }}
+        >
+          <a onClick={(e) => e.preventDefault()}>
+            <Space>
+              {`${userInfo?.nickName}` || '开发者'}
+              <DownOutlined />
+            </Space>
+          </a>
+        </Dropdown>
+      </Flex>
     </div>
   );
 }

diff --git a/packages/admin/src/router/AuthLoader.ts b/packages/admin/src/router/AuthLoader.ts
@@ -9,11 +9,7 @@ export default async function AuthLoader() {
       window.location.replace(`/login?callback=${window.location.href}`);
       return '';
     }
-    const res: any = await getUserInfo();
-    const userInfo = {
-      userId: res.userId,
-      userName: res.userName,
-    };
+    const userInfo: any = await getUserInfo();
     return userInfo;
   } catch (error) {
     return '';

diff --git a/packages/editor/src/api/user.ts b/packages/editor/src/api/user.ts
@@ -20,14 +20,6 @@ export const getUserInfo = async () => {
   return request.get('/user/info', {});
 };
 
-// 获取用户头像
-export const getUserAvatar = () => {
-  // TODO 等后续接入微信扫码后生成用户头像
-  return Promise.resolve({
-    avatar: '',
-  });
-};
-
 // 搜索用户
 export const searchUser = (keyword: string) => {
   return request.post(`/user/search`, { keyword });

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -3,14 +3,12 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Layout, Menu, MenuProps, Button, Popover, Dropdown, Space, Flex, Switch } from 'antd';
 import {
   ProjectOutlined,
-  OneToOneOutlined,
   CaretDownFilled,
   DownOutlined,
   AppstoreOutlined,
   LoadingOutlined,
   PieChartOutlined,
   CloudOutlined,
-  QuestionCircleOutlined,
   SunOutlined,
   MoonFilled,
 } from '@ant-design/icons';
@@ -29,7 +27,6 @@ const Header = memo(() => {
   const [loading, setLoading] = useState(false);
   const [navKey, setNavKey] = useState(['projects']);
   const [pageFrom, setPageFrom] = useState('projects');
-  const [avatar, setAvatar] = useState<string>();
   const navigate = useNavigate();
   const { id } = useParams();
   const location = useLocation();
@@ -113,12 +110,6 @@ const Header = memo(() => {
 
   // 获取用户头像
   useEffect(() => {
-    const [email, suffix] = userInfo.userName.split('@');
-    if (suffix === 'qq.com' && /^\d+$/g.test(email)) {
-      setAvatar(`https://q2.qlogo.cn/headimg_dl?dst_uin=${email}&spec=640`);
-    } else {
-      setAvatar('');
-    }
     const isDark = storage.get('marsview-theme');
     if (isDark) {
       document.documentElement.setAttribute('data-theme', 'dark');
@@ -354,9 +345,9 @@ const Header = memo(() => {
             >
               <Flex align="center" style={{ height: 64 }}>
                 <a onClick={(e) => e.preventDefault()} style={{ marginInline: 5 }}>
-                  {`${userInfo?.userName.split('@')[0]}` || '开发者'}
+                  {`${userInfo.nickName}` || '开发者'}
                 </a>
-                {avatar && <img width={25} style={{ verticalAlign: 'sub', borderRadius: '50%' }} src={avatar} />}
+                {userInfo.avatar && <img width={25} style={{ verticalAlign: 'sub', borderRadius: '50%' }} src={userInfo.avatar} />}
               </Flex>
             </Dropdown>
 

diff --git a/packages/editor/src/pages/user/index.tsx b/packages/editor/src/pages/user/index.tsx
@@ -1,6 +1,15 @@
 import { useEffect, useRef, useState } from 'react';
 import { Avatar, Input, Upload, Button, Form, Alert, Spin, Modal } from 'antd';
-import { CameraOutlined, EditOutlined, LockOutlined, PhoneOutlined, SaveOutlined, UserOutlined, WechatOutlined } from '@ant-design/icons';
+import {
+  CameraOutlined,
+  CheckOutlined,
+  EditOutlined,
+  LockOutlined,
+  PhoneOutlined,
+  SaveOutlined,
+  UserOutlined,
+  WechatOutlined,
+} from '@ant-design/icons';
 import { getUserProfile, updatePassword, updateUserProfile } from '@/api/user';
 import { UserInfo } from '@/pages/types';
 import { message } from '@/utils/AntdGlobal';
@@ -16,7 +25,6 @@ const UserCenter = () => {
   const [editType, setEditType] = useState(1);
   const [editorForm] = Form.useForm();
   const [editNickName, setEditNickName] = useState('');
-  const editNickNameRef = useRef(editNickName);
   const [userInfo, setUserInfo] = useState<UserInfo>({
     id: 0,
     nickName: '',
@@ -71,8 +79,8 @@ const UserCenter = () => {
 
   const updateUserInfo = async (type: number, url = '') => {
     if (type === 1) {
-      await updateUserProfile({ nickName: editNickNameRef.current || editNickName });
-      saveUserInfo({ userId: userInfo.id, userName: editNickNameRef.current || editNickName });
+      await updateUserProfile({ nickName: editNickName });
+      saveUserInfo({ ...userInfo, userId: userInfo.id, userName: editNickName });
       setUserNameEdit(false);
     } else if (type === 2) {
       await updateUserProfile({ avatar: url });
@@ -91,12 +99,7 @@ const UserCenter = () => {
   };
 
   const handleNicknameInputChange = (e: any) => {
-    let value = e.target.value;
-    if (value.length > 15) {
-      value = value.slice(0, 15);
-    }
-    setEditNickName(value);
-    editNickNameRef.current = value;
+    setEditNickName(e.target.value);
   };
 
   const handlePasswordSubmit = async (values: { oldPwd: string; userPwd: string; confirmPwd: string }) => {
@@ -138,10 +141,8 @@ const UserCenter = () => {
               <div className={styles.userName}>
                 {userNameEdit ? (
                   <>
-                    <Input type="text" value={editNickName} onChange={(e) => handleNicknameInputChange(e)} onBlur={handleBlur} />
-                    <div className={styles.nameAction} onClick={handleUserNameEdit}>
-                      <SaveOutlined />
-                    </div>
+                    <Input type="text" value={editNickName} onChange={(e) => handleNicknameInputChange(e)} onBlur={handleBlur} maxLength={15} />
+                    <Button icon={<CheckOutlined />}>保存</Button>
                   </>
                 ) : (
                   <>

diff --git a/packages/editor/src/router/AuthLoader.ts b/packages/editor/src/router/AuthLoader.ts
@@ -10,11 +10,7 @@ export default async function AuthLoader() {
       window.location.replace(`/login?callback=${window.location.href}`);
       return '';
     }
-    const res: any = await getUserInfo();
-    const userInfo = {
-      userId: res.userId,
-      userName: res.userName,
-    };
+    const userInfo: any = await getUserInfo();
     return userInfo;
   } catch (error) {
     return '';

diff --git a/packages/editor/src/stores/pageStore.ts b/packages/editor/src/stores/pageStore.ts
@@ -9,6 +9,8 @@ import { createId, getElement } from '@/utils/util';
 export interface UserInfoStore {
   userId: number;
   userName: string;
+  nickName: string;
+  avatar: string;
 }
 export interface PageState {
   userInfo: UserInfoStore;
@@ -96,6 +98,8 @@ export const usePageStore = create<PageState & PageAction>((set) => ({
   userInfo: {
     userId: 0,
     userName: '',
+    nickName: '',
+    avatar: '',
   },
   mode: 'edit',
   theme: 'light',

diff --git a/packages/materials/stores/pageStore.ts b/packages/materials/stores/pageStore.ts
@@ -5,6 +5,8 @@ import { ComponentType, ApiType, PageVariable, EventType, ComItemType } from '@m
 export interface UserInfoStore {
   userId: number;
   userName: string;
+  nickName: string;
+  avatar: string;
   identifier: string;
 }
 export interface PageState {
@@ -67,6 +69,8 @@ export const usePageStore = create<PageState & PageAction>((set) => ({
   userInfo: {
     userId: 0,
     userName: '',
+    nickName: '',
+    avatar: '',
     identifier: '',
   },
   selectedElement: undefined,