From 4906703e408892e16057d2e8c257aadf97e9488d Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 29 Aug 2022 11:39:28 +0800 Subject: [PATCH] client: fix client ui --- package.json | 2 +- packages/client/package.json | 8 +- .../src/components/document/actions/index.tsx | 18 --- .../document/collaboration/index.tsx | 48 ++++-- .../src/components/document/reader/index.tsx | 3 +- .../src/components/document/style/index.tsx | 8 +- .../components/wiki/tocs/index.module.scss | 1 + .../collaboration/collaboration/index.tsx | 5 +- pnpm-lock.yaml | 145 +++++++----------- 9 files changed, 103 insertions(+), 135 deletions(-) diff --git a/package.json b/package.json index a5989f3..e02235f 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "author": "fantasticit", "scripts": { - "clean": "npx rimraf ./node_modules ./packages/**/node_modules", + "clean": "npx rimraf ./node_modules ./packages/**/node_modules ./packages/**/.next", "dev": "concurrently 'pnpm:dev:*'", "dev:server": "pnpm run --dir packages/server dev", "dev:client": "pnpm run --dir packages/client dev", diff --git a/packages/client/package.json b/packages/client/package.json index 4d25991..7e0db3d 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -8,9 +8,9 @@ "pm2": "pm2 start npm --name @think/client -- start" }, "dependencies": { - "@douyinfe/semi-icons": "^2.3.1", - "@douyinfe/semi-next": "^2.3.1", - "@douyinfe/semi-ui": "^2.3.1", + "@douyinfe/semi-icons": "^2.18.0", + "@douyinfe/semi-next": "^2.18.0", + "@douyinfe/semi-ui": "^2.18.0", "@excalidraw/excalidraw": "^0.12.0", "@hocuspocus/provider": "^1.0.0-alpha.29", "@react-pdf-viewer/core": "3.7.0", @@ -63,10 +63,8 @@ "clone": "^2.1.2", "cross-env": "^7.0.3", "deep-equal": "^2.0.5", - "docx": "^7.3.0", "dompurify": "^2.3.5", "downloadjs": "^1.4.7", - "html-to-docx": "^1.4.0", "htmldiff-js": "^1.0.5", "interactjs": "^1.10.11", "katex": "^0.15.2", diff --git a/packages/client/src/components/document/actions/index.tsx b/packages/client/src/components/document/actions/index.tsx index 264cb98..de68b27 100644 --- a/packages/client/src/components/document/actions/index.tsx +++ b/packages/client/src/components/document/actions/index.tsx @@ -169,24 +169,6 @@ export const DocumentActions: React.FC = ({ /> )} - {!hideDocumentVersion && ( - { - return ( - - - - - 文档排版 - - - - ); - }} - /> - )} - {document && ( = ({ wikiId, documentId, disabled = false }) => { const { isMobile } = IsOnMobile.useHook(); const toastedUsersRef = useRef([]); @@ -42,6 +44,27 @@ export const DocumentCollaboration: React.FC = ({ wikiId, documentId, di [disabled, toggleVisible] ); + const renderMore = useCallback((restNumber, restAvatars) => { + const content = restAvatars.map((avatar, index) => { + return ( +
+ {React.cloneElement(avatar, { size: 'extra-small' })} + {avatar.props.content} +
+ ); + }); + return ( + {content}} + autoAdjustOverflow={false} + position={'bottomRight'} + style={{ padding: '12px 8px', paddingBottom: 0 }} + > + {`+${restNumber}`} + + ); + }, []); + useEffect(() => { const handler = (users) => { const joinUsers = users @@ -49,32 +72,37 @@ export const DocumentCollaboration: React.FC = ({ wikiId, documentId, di .filter((state) => state.user) .map((state) => ({ ...state.user, clientId: state.clientId })); - joinUsers + const otherUsers = joinUsers .filter(Boolean) .filter((joinUser) => { return joinUser.name !== currentUser.name; }) - .forEach((joinUser) => { - if (!toastedUsersRef.current.includes(joinUser.clientId)) { - Toast.info(`${joinUser.name}-${joinUser.clientId}加入文档`); - toastedUsersRef.current.push(joinUser.clientId); - } + .filter((joinUser) => { + return !toastedUsersRef.current.includes(joinUser.clientId); }); + if (otherUsers.length) { + Toast.info(`${otherUsers[0].name}等${otherUsers.length}个用户加入文档`); + + otherUsers.forEach((joinUser) => { + toastedUsersRef.current.push(joinUser.clientId); + }); + } + setCollaborationUsers(joinUsers); }; event.on(JOIN_USER, handler); return () => { - toastedUsersRef.current = []; event.off(JOIN_USER, handler); + toastedUsersRef.current = []; }; }, [currentUser]); return ( <> - + {collaborationUsers.map((user) => { return ( diff --git a/packages/client/src/components/document/reader/index.tsx b/packages/client/src/components/document/reader/index.tsx index b039a02..c2c12d0 100644 --- a/packages/client/src/components/document/reader/index.tsx +++ b/packages/client/src/components/document/reader/index.tsx @@ -2,7 +2,6 @@ import { IconEdit } from '@douyinfe/semi-icons'; import { Button, Layout, Nav, Skeleton, Space, Spin, Tooltip, Typography } from '@douyinfe/semi-ui'; import { DataRender } from 'components/data-render'; import { DocumentCollaboration } from 'components/document/collaboration'; -import { DocumentShare } from 'components/document/share'; import { DocumentStar } from 'components/document/star'; import { DocumentStyle } from 'components/document/style'; import { DocumentVersion } from 'components/document/version'; @@ -37,6 +36,7 @@ export const DocumentReader: React.FC = ({ documentId }) => { const { user } = useUser(); const { data: documentAndAuth, loading: docAuthLoading, error: docAuthError } = useDocumentDetail(documentId); const { document, authority } = documentAndAuth || {}; + const [readable, editable] = useMemo(() => { if (!authority) return [false, false]; return [authority.readable, authority.editable]; @@ -84,6 +84,7 @@ export const DocumentReader: React.FC = ({ documentId }) => { documentId={documentId} /> )} +