调整同步文件夹弹窗逻辑

src/components/AppHeader/AppHeader.tsx

@@ -10,23 +10,49 @@ import UserCenter from './components/userCenter';
 import system, { isClient } from '@/services/system';
 import SvgIcon from '../SvgIcon';
 import classNames from 'classnames';
+import { CloudDownloadOutlined } from '@ant-design/icons';
+import ATooltip from '../Tooltip';
+import SyncModal from '../SyncModal';
+import { useState } from 'react';
+import storage from '@/utils/storage';
 
 export default function AppHeader(props) {
   const { className, style } = props;
   const { initialState: { isLogin } = { isLogin: false } } =
     useModel('@@initialState');
+  const [modalVisible, setModalVisible] = useState(() => {
+    const flag = storage.get('isNotFirstLogin');
+    if (!flag) {
+      storage.set('isNotFirstLogin', 'true', true);
+    }
+    return !flag;
+  });
+
   return (
     <div className={css(styles.appHeader, className)} style={style}>
       <div className={styles.left}>
         <img src={logoImg} alt="" />
       </div>
       <div className={styles.right}>
-        <div
-          className={classNames(styles.monitor, styles.mr16)}
-          onClick={() => system.openUrl('https://www.locking.cn')}
-        >
-          <SvgIcon xlinkHref="monitor" />
-        </div>
+        {isLogin ? (
+          <ATooltip title="同步文件夹至工作空间" placement="bottom">
+            <div
+              className={classNames(styles.import, styles.mr16)}
+              onClick={() => setModalVisible(true)}
+            >
+              <CloudDownloadOutlined />
+            </div>
+          </ATooltip>
+        ) : null}
+        <ATooltip placement="bottom" title="LOCKING 平台">
+          <div
+            className={classNames(styles.monitor, styles.mr16)}
+            onClick={() => system.openUrl('https://www.locking.cn')}
+          >
+            <SvgIcon xlinkHref="monitor" />
+          </div>
+        </ATooltip>
+
         {isLogin ? (
           <>
             <UserCenter className={styles.mr16} />
@@ -44,6 +70,13 @@ export default function AppHeader(props) {
           </>
         ) : null}
       </div>
+      {isLogin ? (
+        <SyncModal
+          visible={modalVisible}
+          onCancel={() => setModalVisible(false)}
+          onOk={() => setModalVisible(false)}
+        />
+      ) : null}
     </div>
   );
 }

src/components/AppHeader/index.less

@@ -45,3 +45,8 @@
     color: @primary-color;
   }
 }
+
+.import {
+  .monitor();
+  font-size: 20px;
+}

src/components/SyncModal/SyncModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Table } from 'antd';
+import { Modal, ModalProps, Table } from 'antd';
 import { useModel, useRequest } from 'umi';
 import { useState } from 'react';
 import styles from './SyncModal.less';
@@ -8,6 +8,7 @@ import { fetchApi } from '@/utils/request';
 import { firstCharToLowerCase, handleRequest } from '@/utils/tool';
 import { useCallback } from 'react';
 import system from '@/services/system';
+import { useEffect } from 'react';
 
 const columns = [
   {
@@ -43,10 +44,13 @@ interface DataType {
   address: string;
 }
 
-export default function SyncModal() {
+interface SyncModalProps extends ModalProps {}
+
+export default function SyncModal(props: SyncModalProps) {
+  const { onOk: propsOnOk, onCancel: propsOnCancel, ...restProps } = props;
   const { initialState: { currentUser } = {} } = useModel('@@initialState');
   const [btnLoading, setBtnLoading] = useState(false);
-  const [modalVisible, setModalVisible] = useState(true);
+  const [modalVisible, setModalVisible] = useState(restProps.visible || false);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const { loading, data } = useRequest(async () => {
     return await fetchApi('project/queryProjectListByUserId', {
@@ -54,14 +58,36 @@ export default function SyncModal() {
     });
   });
 
-  const onOk = useCallback(async () => {
-    setBtnLoading(true);
-    const res = await system.syncProjects(selectedKeys);
-    setBtnLoading(false);
-    handleRequest(res!).success(() => {
+  const onOk = useCallback(
+    async (e) => {
+      setBtnLoading(true);
+      const res = await system.syncProjects(selectedKeys);
+      setBtnLoading(false);
+      handleRequest(res!).success(() => {
+        setModalVisible(false);
+        if (propsOnOk) {
+          propsOnOk(e);
+        }
+      });
+    },
+    [selectedKeys, propsOnOk],
+  );
+
+  const onCancel = useCallback(
+    (e) => {
+      if (propsOnCancel) {
+        propsOnCancel(e);
+      }
       setModalVisible(false);
-    });
-  }, [selectedKeys]);
+    },
+    [propsOnCancel],
+  );
+
+  useEffect(() => {
+    if (modalVisible || restProps.visible) {
+      setSelectedKeys([]);
+    }
+  }, [modalVisible, restProps.visible]);
 
   return (
     <Modal
@@ -72,12 +98,13 @@ export default function SyncModal() {
       okText="确定"
       width={540}
       maskClosable={false}
-      onCancel={() => setModalVisible(false)}
+      onCancel={onCancel}
       okButtonProps={{
         disabled: selectedKeys.length === 0,
         loading: btnLoading,
       }}
       onOk={onOk}
+      {...restProps}
     >
       <div className={styles.title}>
         选择「与我有关的文件夹」，并同步到「我的电脑/工作空间」中
@@ -99,6 +126,7 @@ export default function SyncModal() {
             );
             setSelectedKeys(selectedRowKeys as string[]);
           },
+          selectedRowKeys: selectedKeys,
           // getCheckboxProps: (record: DataType) => ({
           //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
           //   name: record.name,

src/pages/sync/index.tsx

@@ -96,7 +96,6 @@ export default function SyncView() {
           <FileStatus key={data.taskId} className={styles.item} data={data} />
         ))}
       </div>
-      <SyncModal />
     </div>
   );
 }