feat: 访问端增加退出功能

JackySoft · Aug 17, 2024 · 0d5092f · 0d5092f
1 parent d2a8a9d
commit 0d5092f
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 11 deletions.
diff --git a/packages/admin/.env.development b/packages/admin/.env.development
@@ -1,5 +1,5 @@
 # 接口地址
-# VITE_BASE_API=http://localhost:5000/api
-VITE_BASE_API=http://mars-api.marsview.cc/api
+VITE_BASE_API=http://localhost:5000/api
+# VITE_BASE_API=http://mars-api.marsview.cc/api
 # 后台访问地址
 VITE_ADMIN_URL=http://admin.marsview.cc
diff --git a/packages/admin/src/components/Header/Header.tsx b/packages/admin/src/components/Header/Header.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
-import { Flex } from 'antd';
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Dropdown, Flex, Space } from 'antd';
+import { DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
 import { usePageStore } from '@/stores/pageStore';
 import { useProjectStore } from '@/stores/projectStore';
 import Logo from '../Logo/Logo';
@@ -15,6 +16,7 @@ const Header = memo(() => {
   const [avatar, setAvatar] = useState('');
   const { userName } = usePageStore((state) => state.userInfo);
   const { projectInfo, collapsed, updateCollapsed } = useProjectStore();
+  const navigate = useNavigate();
 
   useEffect(() => {
     getUserAvatar().then((res) => {
@@ -53,7 +55,37 @@ const Header = memo(() => {
       <div className={styles.user}>
         {/* 用户头像 */}
         {avatar ? <img width={30} src={avatar} style={{ borderRadius: '50%' }} /> : null}
-        <span style={{ marginLeft: '10px', color: isLight ? '#000' : '#fff' }}>{`${userName}` || '开发者'}</span>
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: '1',
+                label: `${userName}`,
+              },
+              {
+                key: '2',
+                label: (
+                  <div
+                    onClick={(e) => {
+                      localStorage.clear();
+                      navigate(`/login?callback=${window.location.href}`);
+                    }}
+                  >
+                    退出
+                  </div>
+                ),
+              },
+            ],
+            selectable: true,
+          }}
+        >
+          <a onClick={(e) => e.preventDefault()}>
+            <Space>
+              <span style={{ marginLeft: '10px', color: isLight ? '#000' : '#fff' }}>{`${userName}` || '开发者'}</span>
+              <DownOutlined />
+            </Space>
+          </a>
+        </Dropdown>
       </div>
     </div>
   );

diff --git a/packages/admin/src/pages/console/HomeHeader.tsx b/packages/admin/src/pages/console/HomeHeader.tsx
@@ -1,15 +1,47 @@
+import { Dropdown, Space } from 'antd';
 import style from './index.module.less';
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData, useNavigate } from 'react-router-dom';
+import { DownOutlined } from '@ant-design/icons';
 function HomeHeader() {
   const userInfo: any = useLoaderData();
-
+  const navigate = useNavigate();
   return (
     <div className={style.homeHeader}>
       <div className={style.logo}>
         <img width={38} src="/imgs/mars-logo.png" alt="logo" />
         工作台
       </div>
-      <div>{userInfo.userName}</div>
+      <Dropdown
+        menu={{
+          items: [
+            {
+              key: '1',
+              label: `${userInfo?.userName}`,
+            },
+            {
+              key: '2',
+              label: (
+                <div
+                  onClick={(e) => {
+                    localStorage.clear();
+                    navigate(`/login?callback=${window.location.href}`);
+                  }}
+                >
+                  退出
+                </div>
+              ),
+            },
+          ],
+          selectable: true,
+        }}
+      >
+        <a onClick={(e) => e.preventDefault()}>
+          <Space>
+            <span>{`${userInfo?.userName}` || '开发者'}</span>
+            <DownOutlined />
+          </Space>
+        </a>
+      </Dropdown>
     </div>
   );
 }

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -2,7 +2,7 @@ import { Layout, Menu, MenuProps, Button, Popover, Dropdown, Space, Image } from
 import { memo, useEffect, useState } from 'react';
 import { ProjectOutlined, OneToOneOutlined, CaretDownFilled, DownOutlined, AppstoreOutlined, LoadingOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { toBlob, toPng } from 'html-to-image';
+import { toBlob } from 'html-to-image';
 import { usePageStore } from '@/stores/pageStore';
 import { message } from '@/utils/AntdGlobal';
 import { getUserAvatar, updatePageData, uploadImg } from '@/api';
@@ -255,6 +255,9 @@ const Header = memo(() => {
               退出预览
             </Button>
           )}
+          <a href="http://docs.marsview.cc" target="_blank">
+            文档
+          </a>
           <Popover
             content={
               <>

diff --git a/packages/editor/src/pages/welcome/Welcome.tsx b/packages/editor/src/pages/welcome/Welcome.tsx
@@ -3,14 +3,13 @@ import { Link } from 'react-router-dom';
 import { Button } from 'antd';
 import { setNebulaCanvas } from '@/utils/canvas';
 import style from './index.module.less';
-import { message } from '@/utils/AntdGlobal';
 export default function Welcome() {
   useEffect(() => {
     setNebulaCanvas();
   }, []);
 
   const openDoc = () => {
-    message.info('敬请期待');
+    window.open('http://docs.marsview.cc', '_blank');
   };
 
   return (