'完整部分同步文件夹弹窗基础'

src/components/SyncModal/SyncModal.less

@@ -0,0 +1,54 @@
+.syncModal {
+  :global {
+    .ant-modal-content {
+      border-radius: 8px;
+    }
+    .ant-modal-header {
+      border-radius: 8px 8px 0 0;
+    }
+
+    .ant-modal-header {
+      padding: 16px;
+    }
+    .ant-modal-body {
+      padding: 10px 16px;
+    }
+    .ant-modal-footer {
+      display: flex;
+      padding: 16px 54px;
+      // justify-content: ;
+      > .ant-btn {
+        flex: 1;
+      }
+      .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+        margin-left: 16px;
+      }
+    }
+  }
+  .title {
+    margin-bottom: 10px;
+  }
+  .table {
+    height: 240px;
+    :global{
+      th.ant-table-cell {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+        background-color: #EBEBF2;
+        padding: 7px 10px;
+        &:before {
+          content: none !important;
+        }
+      }
+      td.ant-table-cell {
+        font-size: 12px;
+        padding: 10px 10px;
+        &:not(:first-child) {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}

src/components/SyncModal/SyncModal.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Modal, Table } from 'antd';
+import { useModel } from 'umi';
+import { useState } from 'react';
+import styles from './SyncModal.less';
+import ATooltip from '../Tooltip';
+
+
+const columns = [
+  {
+    title: '文件夹名称',
+    dataIndex: 'name',
+    width: 120,
+    render: (text: string) => (
+      <ATooltip title={text} placement="topLeft">
+        {text}
+      </ATooltip>
+    ),
+  },
+  {
+    title: '创建人',
+    dataIndex: 'age',
+    width: 88,
+  },
+  {
+    title: '描述',
+    dataIndex: 'address',
+    render: (text: string) => (
+      <ATooltip title={text} placement="topLeft">
+        {text}
+      </ATooltip>
+    ),
+  },
+];
+
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const data: DataType[] = [
+  {
+    key: '1',
+    name: 'John BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park',
+  },
+  {
+    key: '4',
+    name: 'Disabled User',
+    age: 99,
+    address: 'Sidney No. 1 Lake Park',
+  },
+  {
+    key: '5',
+    name: 'Disabled User',
+    age: 99,
+    address: 'Sidney No. 1 Lake Park',
+  },
+  {
+    key: '6',
+    name: 'Disabled User',
+    age: 99,
+    address: 'Sidney No. 1 Lake Park',
+  },
+];
+
+export default function SyncModal() {
+  const { initialState: { currentUser } = {} } = useModel('@@initialState');
+  const [modalVisible, setModalVisible] = useState(true);
+
+  return (
+    <Modal
+      title="同步文件夹至工作空间"
+      visible={modalVisible}
+      wrapClassName={styles.syncModal}
+      cancelText="取消"
+      okText="确定"
+      width={540}
+    >
+      <div className={styles.title}>选择「与我有关的文件夹」，并同步到「我的电脑/工作空间」中</div>
+      <Table
+        className={styles.table}
+        rowSelection={{
+          type: 'checkbox',
+          onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+          },
+          getCheckboxProps: (record: DataType) => ({
+            disabled: record.name === 'Disabled User', // Column configuration not to be checked
+            name: record.name,
+          }),
+        }}
+        pagination={false}
+        columns={columns}
+        dataSource={data}
+        scroll={{ y: 200 }}
+      />
+    </Modal>
+  )
+}

src/components/SyncModal/index.ts

@@ -0,0 +1 @@
+export { default } from './SyncModal';

src/pages/sync/index.tsx

@@ -5,6 +5,7 @@ import syncingImg from './assets/syncing.png';
 import syncSuccessImg from './assets/sync.success.png';
 import syncErrorImg from './assets/sync.error.png';
 import classNames from 'classnames';
+import SyncModal from '@/components/SyncModal';
 
 enum SyncType {
   Syncing,
@@ -36,7 +37,7 @@ export default function SyncView() {
       </div>
       <div className={styles.right}>
         同步任务界面
-        <div style={{ height: 20000 }}></div>
+        <SyncModal />
       </div>
     </div>
   )