'增加同步设置弹窗'

electron/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, shell } = require('electron');
+const { app, BrowserWindow, dialog, ipcMain, shell } = require('electron');
 const path = require('path');
 const url = require('url');
 
@@ -72,7 +72,14 @@ ipcMain.handle('manipulate-window', (event, { action }) => {
     iWindow.minimize();
   }
 });
-
+// 选择文件夹
+ipcMain.handle('project-choose-folders', async (event, args) => {
+  const res = await dialog.showOpenDialog({
+    properties: ['multiSelections', 'openDirectory'],
+  });
+  return res;
+});
+// 打开浏览器
 ipcMain.handle('open-browser', (event, url) => {
   shell.openExternal(url);
 });

src/components/AppHeader/components/userCenter/FolderSetModal.less

@@ -0,0 +1,22 @@
+.modal {
+  :global(.ant-modal-content) {
+    border-radius: 8px;
+  }
+  :global(.ant-modal-header) {
+    border-radius: 8px 8px 0 0;
+  }
+  :global(.ant-modal-body) {
+    padding: 16px;
+  }
+  .label {
+    font-size: 12px;
+    color: rgba(15, 15, 15, 0.5);
+  }
+  .btnGroup {
+    text-align: center;
+  }
+  .btn {
+    margin-top: 262px;
+    width: 200px;
+  }
+}

src/components/AppHeader/components/userCenter/FolderSetModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Modal, ModalProps, Input, Button } from 'antd';
+import styles from './FolderSetModal.less';
+import classNames from 'classnames';
+
+export default function FolderSetModal(props: ModalProps) {
+  const { className, ...restProps } = props;
+  return (
+    <Modal
+      title="同步设置"
+      className={classNames(styles.modal, className)}
+      width={360}
+      {...restProps}
+      footer={null}
+      maskClosable={false}
+    >
+      <span className={styles.label}>「工作空间」本地盘位置</span>
+      <Input size="small" suffix={<Button type="link">选择</Button>} />
+
+      <div className={styles.btnGroup}>
+        <Button className={styles.btn} type="primary">
+          更新资料
+        </Button>
+      </div>
+    </Modal>
+  );
+}

src/components/AppHeader/components/userCenter/UserCenter.tsx

@@ -11,6 +11,8 @@ import { useCallback } from 'react';
 import { useState } from 'react';
 import styles from './UserCenter.less';
 import defaultAvatorImg from '@/assets/avator_default.svg';
+import FolderSetModal from './FolderSetModal';
+import { isClient } from '@/services/system';
 
 interface UserCenterProps {
   className?: string;
@@ -25,14 +27,14 @@ export default function UserCenter(props: UserCenterProps) {
     setPopVisible(nextVisible);
   }, []);
 
-  const onLogoutBtnClick = useCallback(() => {
+  const hidePop = useCallback(() => {
     setPopVisible(false);
   }, []);
 
   return (
     <Popover
       overlayClassName={styles.popWrapper}
-      content={<PopContent onLogoutBtnClick={onLogoutBtnClick} />}
+      content={<PopContent hidePop={hidePop} />}
       trigger="click"
       visible={popVisible}
       onVisibleChange={onVisibleChange}
@@ -50,19 +52,20 @@ export default function UserCenter(props: UserCenterProps) {
 }
 
 interface PopContentProps {
-  onLogoutBtnClick: () => void;
+  hidePop: () => void;
 }
 
 function PopContent(props: PopContentProps) {
-  const { onLogoutBtnClick } = props;
+  const { hidePop } = props;
   const {
     refresh,
     initialState: { currentUser } = {},
     setInitialState,
   } = useModel('@@initialState');
+  const [folderSetModalVisible, setFolderSetModalVisbile] = useState(false);
 
   const tryLogout = useCallback(() => {
-    if (onLogoutBtnClick) onLogoutBtnClick();
+    if (hidePop) hidePop();
     confirm({
       onOk() {
         logout();
@@ -88,16 +91,24 @@ function PopContent(props: PopContentProps) {
         </div>
       </div>
       <div className={styles.popContent}>
-        {/* <div className={styles.listGroupTitle}><div>账号</div></div>
-        <div className={styles.listItem}>
+        {/* <div className={styles.listGroupTitle}><div>账号</div></div> */}
+        {/* <div className={styles.listItem}>
           <span>账号设置</span>
           <RightOutlined color="#8E909F" />
-        </div>
-        <div className={styles.listItem}>
-          <span>同步设置</span>
-          <RightOutlined color="#8E909F" />
-        </div>
-        <div className={styles.listGroupTitle}><div>其他</div></div>
+        </div> */}
+        {isClient ? (
+          <div
+            className={styles.listItem}
+            onClick={() => {
+              setFolderSetModalVisbile(true);
+              hidePop();
+            }}
+          >
+            <span>同步设置</span>
+            <RightOutlined color="#8E909F" />
+          </div>
+        ) : null}
+        {/* <div className={styles.listGroupTitle}><div>其他</div></div>
         <div className={styles.listItem}>
           <span>系统版本</span>
           <RightOutlined color="#8E909F" />
@@ -112,6 +123,12 @@ function PopContent(props: PopContentProps) {
           </Button>
         </div>
       </div>
+      {isClient ? (
+        <FolderSetModal
+          visible={folderSetModalVisible}
+          onCancel={() => setFolderSetModalVisbile(false)}
+        />
+      ) : null}
     </div>
   );
 }