选择「与我有关的文件夹」，并同步到「我的电脑/工作空间」中
@@ -78,11 +96,12 @@ export default function SyncModal() {
'selectedRows: ',
selectedRows,
);
+ setSelectedKeys(selectedRowKeys as string[]);
},
- getCheckboxProps: (record: DataType) => ({
- disabled: record.name === 'Disabled User', // Column configuration not to be checked
- name: record.name,
- }),
+ // getCheckboxProps: (record: DataType) => ({
+ // disabled: record.name === 'Disabled User', // Column configuration not to be checked
+ // name: record.name,
+ // }),
}}
pagination={false}
columns={columns}
diff --git a/src/pages/sync/index.tsx b/src/pages/sync/index.tsx
index 6b6b9c5..543becb 100644
--- a/src/pages/sync/index.tsx
+++ b/src/pages/sync/index.tsx
@@ -6,6 +6,11 @@ import syncSuccessImg from './assets/sync.success.png';
import syncErrorImg from './assets/sync.error.png';
import classNames from 'classnames';
import SyncModal from '@/components/SyncModal';
+import { useSocketMessages } from '@/services/socket';
+import FileStatus from '@/components/FileStatus';
+import { useMemo } from 'react';
+import { TaskStatus } from '@/services/API.helper';
+import { DATA } from '@/services/API';
enum SyncType {
Syncing,
@@ -20,7 +25,36 @@ const syncTypeList = [
];
export default function SyncView() {
+ const originList = useSocketMessages();
const [type, setType] = useState
(SyncType.Syncing);
+
+ const [syncingList, succList, failList] = useMemo(() => {
+ return originList.reduce(
+ (arr, item) => {
+ if (item.taskSyncStatus === TaskStatus.FINISH) {
+ arr[1].push(item);
+ return arr;
+ } else if (item.taskSyncStatus === TaskStatus.FAILED) {
+ arr[2].push(item);
+ return arr;
+ }
+ arr[0].push(item);
+ return arr;
+ },
+ [[], [], []] as [
+ DATA.SocketFileMsg[],
+ DATA.SocketFileMsg[],
+ DATA.SocketFileMsg[],
+ ],
+ );
+ }, [originList]);
+
+ const curretList = useMemo(() => {
+ if (type === SyncType.SyncSuccess) return succList;
+ if (type === SyncType.SyncError) return failList;
+ return syncingList;
+ }, [type, succList, failList, syncingList]);
+
return (
@@ -43,9 +77,14 @@ export default function SyncView() {
))}
- 同步任务界面
-
+
+ {curretList.map((data) => (
+
+ ))}
+
);
}
diff --git a/src/pages/sync/sync.less b/src/pages/sync/sync.less
index 1f45335..d78023d 100644
--- a/src/pages/sync/sync.less
+++ b/src/pages/sync/sync.less
@@ -13,7 +13,10 @@
padding-left: 12px;
line-height: 32px;
margin-bottom: 0;
- span { display: block; transform: scale(0.83); }
+ span {
+ display: block;
+ transform: scale(0.83);
+ }
}
.tab {
position: relative;
@@ -30,13 +33,40 @@
border-right-color: @primary-color;
background: rgba(120, 80, 255, 0.04);
}
- .icon { flex: none; }
- .label { flex: 0 0 48px; margin: 0 8px; font-size: 12px; color: rgba(#000, 0.85); }
- .count { flex: 1; font-size: 12px; color: #8E909F; transform: scale(0.83); }
+ .icon {
+ flex: none;
+ }
+ .label {
+ flex: 0 0 48px;
+ margin: 0 8px;
+ font-size: 12px;
+ color: rgba(#000, 0.85);
+ }
+ .count {
+ flex: 1;
+ font-size: 12px;
+ color: #8e909f;
+ transform: scale(0.83);
+ }
}
}
.right {
flex: 1;
overflow: auto;
+ padding: 0 12px;
+ .item ~ .item {
+ margin-top: 12px;
+ margin-bottom: 8px;
+ }
+ .date {
+ height: 36px;
+ line-height: 36px;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.8);
+ > div {
+ transform: scale(0.83);
+ transform-origin: left;
+ }
+ }
}
-}
\ No newline at end of file
+}
diff --git a/src/services/API.d.ts b/src/services/API.d.ts
index 340b490..7c8e268 100644
--- a/src/services/API.d.ts
+++ b/src/services/API.d.ts
@@ -1,3 +1,5 @@
+import { TaskStatus, TaskType } from './API.helper';
+
declare namespace API {
export interface ResponseData {
code: number | string;
@@ -8,7 +10,8 @@ declare namespace API {
*/
success: boolean;
/**
- * 用于标明业务请求内容是否成功, 等价于code === 0
+ * 用于标明业务请求内容是否成功,
+ * 等价于code === 0
*/
requestIsSuccess: boolean;
}
@@ -38,4 +41,40 @@ declare namespace DATA {
*/
phone: string;
}
+
+ export interface SocketFileMsg {
+ archName: string;
+ commonStatus: number; // 1,
+ createTime: string; // "2021-04-16T19:33:36+08:00",
+ createUserId: string; // "367294106252087297",
+ createUserName: string; // "",
+ deleted: number; // 0,
+ extension: string; // "pdf",
+ fileSize: number; // 9385910,
+ folderId: string; // "389513225458573314",
+ folderLevelId: string; // "389513225454379009_342050628186824706",
+ id: string; // "389513618179645440",
+ ipfsCid: string; // "QmPYXHLuXoTF7A1BxsgTRVByojMXyWjjrrZS5MQeTX1mNq",
+ isShowRecycle: number; // 0,
+ milestone: number; // 1,
+ modifyName: string; // "",
+ modifyTime: string; // "2021-04-16T19:36:28+08:00",
+ modifyUserId: string; // "0",
+ nodeName: string; // "产品分析",
+ projId: string; // "389513225454379008",
+ projName: string; // "2021416-1",
+ relativePath: string; // "",
+ showUrl: string; // "",
+ status: number; // 2,
+ syncFileSize: number; // 9385910,
+ syncIpfsCid: string; // "QmPYXHLuXoTF7A1BxsgTRVByojMXyWjjrrZS5MQeTX1mNq",
+ syncVersion: number; // 1,
+ taskId: string; // 420964845295652864,
+ taskIsModify: boolean; // false,
+ taskSyncProgress: 100;
+ taskSyncStatus: TaskStatus; // "TASK_SYNC_STATUS_FINISH",
+ taskType: TaskType; // "DOWNLOAD",
+ version: number; // 1,
+ workStatus: number; // 1
+ }
}
diff --git a/src/services/API.helper.ts b/src/services/API.helper.ts
new file mode 100644
index 0000000..a1fd665
--- /dev/null
+++ b/src/services/API.helper.ts
@@ -0,0 +1,28 @@
+export enum TaskStatus {
+ /**
+ * 等待同步
+ */
+ WAITING = 'TASK_SYNC_STATUS_WAIT',
+ /**
+ * 同步中
+ */
+ SYNCING = 'TASK_SYNC_STATUS_ING',
+ /**
+ * 同步暂停
+ */
+ PAUSED = 'TASK_SYNC_STATUS_PAUSE',
+ /**
+ * 同步成功
+ */
+ FINISH = 'TASK_SYNC_STATUS_FINISH',
+ /**
+ * 同步失败
+ */
+ FAILED = 'TASK_SYNC_STATUS_FAIL',
+}
+export enum TaskType {
+ // 下载
+ DOWNLOAD = 'DOWNLOAD',
+ // 上传
+ UPLOAD = 'UPLOAD',
+}
diff --git a/src/services/socket.ts b/src/services/socket.ts
index fe6f22a..2facf9f 100644
--- a/src/services/socket.ts
+++ b/src/services/socket.ts
@@ -1,11 +1,65 @@
+import { firstCharToLowerCase, Subject } from '@/utils/tool';
+import { useEffect, useState } from 'react';
+import { DATA } from './API';
+
export const isClient = !!window.ipcRenderer; // process.env.IS_CLIENT;
-const safeCall = (f: (...args: any[]) => any) => (isClient ? f : () => {});
+class FileMessageManager extends Subject {
+ public list: DATA.SocketFileMsg[] = [];
+ // 主键 taskId
+ public fileMap = new Map();
+
+ addFileMsg(message: DATA.SocketFileMsg) {
+ this.list = [message].concat(this.list);
+ this.notifyObservers(this.list);
+ }
+ updateFileMsg(message: DATA.SocketFileMsg) {
+ this.fileMap.set(message.taskId, message);
+ this.list = this.list.map((msg) =>
+ msg.taskId === message.taskId ? message : msg,
+ );
+ this.notifyObservers(this.list);
+ }
+ receiveMessage(messageStr: string) {
+ try {
+ const message = firstCharToLowerCase(
+ JSON.parse(messageStr),
+ ) as DATA.SocketFileMsg;
+ const existMsg = this.fileMap.get(message.taskId);
+ if (existMsg) {
+ this.updateFileMsg(message);
+ } else {
+ this.addFileMsg(message);
+ }
+ } catch (e) {
+ console.error('message 解析失败:', e, messageStr);
+ }
+ }
+}
-const ipcRenderer = window.ipcRenderer;
+const fileMng = new FileMessageManager();
if (isClient) {
window.addIpcRendererListener('socket:on-message', (_, message) => {
console.log('receive electron socket message:', message);
+ fileMng.receiveMessage(message);
+ });
+ window.addIpcRendererListener('socket:on-error', (_, ...args) => {
+ console.log('receive electron socket error:', args);
});
+ window.addIpcRendererListener('socket:on-close', (_, ...args) => {
+ console.log('receive electron socket close:', args);
+ });
+}
+
+export function useSocketMessages() {
+ const [list, setList] = useState(fileMng.list);
+ useEffect(() => {
+ fileMng.addObserver(setList);
+ return () => {
+ fileMng.removeObserver(setList);
+ };
+ }, []);
+
+ return list;
}
diff --git a/src/services/system.ts b/src/services/system.ts
index 727950c..b28712c 100644
--- a/src/services/system.ts
+++ b/src/services/system.ts
@@ -33,10 +33,26 @@ const system = {
ipcRenderer.invoke('storage:remove', { key });
}),
},
-
- // 发往网关的请求
- login: safeCall((userId: string, userPhone: string) => {
- return fetchLocalApi('login', { userId, userPhone });
+ /* 发往网关的请求 */
+ // 登陆
+ login: safeCall(async (userId: string, userPhone: string) => {
+ const res = await fetchLocalApi(
+ 'login',
+ { userId, userPhone },
+ { silent: true },
+ );
+ ipcRenderer.invoke('socket:send-message', `login:${userPhone}`);
+ return res;
+ }),
+ // 退出登陆
+ logout: safeCall(async () => {
+ return await fetchLocalApi('logout');
+ }),
+ // 发送下载同步文件夹的指令
+ syncProjects: safeCall((projectIds: string[]) => {
+ return fetchLocalApi('syncFolderToWorkSpace', {
+ ids: projectIds.join(','),
+ });
}),
};
diff --git a/src/services/user.ts b/src/services/user.ts
index 2e68f73..d216027 100644
--- a/src/services/user.ts
+++ b/src/services/user.ts
@@ -4,6 +4,7 @@ import storage from '@/utils/storage';
import { errorReponse, firstCharToLowerCase, isReqSuccess } from '@/utils/tool';
import { propertyOf } from 'lodash';
import system, { isClient } from './system';
+import { DATA } from './API';
export async function queryCurrent() {
const accountId = storage.get('accountId');
@@ -69,6 +70,7 @@ export async function login(account: string, password: string) {
export function logout() {
storage.clear();
+ system.logout();
// window.location.href = '/login';
history.replace('/login');
// window.location.reload();
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 12bf03a..5143dba 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -26,10 +26,15 @@ export async function fetchApi(
return res;
}
+interface IOption {
+ silent?: boolean;
+ method?: 'GET' | 'POST';
+}
+
export async function fetchLocalApi(
path: string,
params = {},
- options = { silent: false, method: 'GET' },
+ options: IOption = { silent: false, method: 'GET' },
) {
if (!gatewayPort) {
return errorReponse('gateway infomation failed');
diff --git a/src/utils/tool.ts b/src/utils/tool.ts
index 2a5e493..b0728ab 100644
--- a/src/utils/tool.ts
+++ b/src/utils/tool.ts
@@ -77,3 +77,20 @@ export const isValidPhone = (phone: string) =>
export const passwordReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,16}$/;
export const isValidPassword = (maybePassword: string) =>
new RegExp(passwordReg).test(maybePassword);
+
+type Observer = (...args: any[]) => any;
+export class Subject {
+ public observers: Array = [];
+ // constructor() {
+ // this.observers = [];
+ // }
+ addObserver(observer: Observer) {
+ this.observers.push(observer);
+ }
+ removeObserver(observer: Observer) {
+ this.observers = this.observers.filter((iO) => iO !== observer);
+ }
+ notifyObservers(...args: unknown[]) {
+ this.observers.forEach((f) => f(...args));
+ }
+}