From 0e3a8b5147ccc942086e0efeb7b0455cdeb191fd Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 3 Aug 2022 14:37:04 +0800 Subject: [PATCH 01/69] feat: new folder --- .../website/src/pages/group/topic/[id]/index.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 packages/website/src/pages/group/topic/[id]/index.tsx diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx new file mode 100644 index 000000000..5b4d522b3 --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -0,0 +1,13 @@ +import React, { FC } from 'react' +import { useParams } from 'react-router-dom' +import GlobalLayout from '../../../../components/GlobalLayout' + +const Topic: FC = () => { + const { id } = useParams() + return ( + +
{id}
+ + ) +} +export default Topic From 909002e9b0c9bb11f5ab60072399cce0ce53c0ab Mon Sep 17 00:00:00 2001 From: cokemine Date: Tue, 23 Aug 2022 01:26:28 +0800 Subject: [PATCH 02/69] wip --- .../design/components/Avatar/style/index.less | 4 +- .../design/components/RichContent/index.tsx | 4 +- packages/design/index.tsx | 2 + packages/website/src/hooks/use-group-topic.ts | 16 +++++++ .../components/GroupTopicHeader.module.less | 43 +++++++++++++++++ .../[id]/components/GroupTopicHeader.tsx | 38 +++++++++++++++ .../pages/group/topic/[id]/index.module.less | 22 +++++++++ .../src/pages/group/topic/[id]/index.tsx | 20 +++++++- packages/website/src/types/common.ts | 46 +++++++++++++++++++ 9 files changed, 190 insertions(+), 5 deletions(-) create mode 100644 packages/website/src/hooks/use-group-topic.ts create mode 100644 packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less create mode 100644 packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx create mode 100644 packages/website/src/pages/group/topic/[id]/index.module.less diff --git a/packages/design/components/Avatar/style/index.less b/packages/design/components/Avatar/style/index.less index c7e51847d..84627727a 100644 --- a/packages/design/components/Avatar/style/index.less +++ b/packages/design/components/Avatar/style/index.less @@ -18,8 +18,8 @@ } &--medium img { - height: 48px; - width: 48px; + height: 60px; + width: 60px; } &--large img { diff --git a/packages/design/components/RichContent/index.tsx b/packages/design/components/RichContent/index.tsx index a5bfbd507..abb08da5b 100644 --- a/packages/design/components/RichContent/index.tsx +++ b/packages/design/components/RichContent/index.tsx @@ -1,12 +1,12 @@ import React from 'react' import classNames from 'classnames' -export interface RichTextProps { +export interface RichContentProps { html: string classname?: string } -const RichContent: React.FC = ({ html, classname }) => { +const RichContent: React.FC = ({ html, classname }) => { return (
>(`/p/groups/boring/topics/${id}`, privateRequest.get) + return { topicDetail } +} + +export default useGroupTopic diff --git a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less new file mode 100644 index 000000000..0f1dcf197 --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less @@ -0,0 +1,43 @@ +@import '@bangumi/design/theme/base'; + +.groupTopicHeader { + display: flex; + align-items: center; + height: 98px; + max-width: 913px; +} + +.headerMain { + margin-left: 12px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + width: 100%; +} + +.navBar { + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + justify-content: space-between; + color: @gray-60; + width: 100%; + + div > a, + span { + padding-right: 10px; + } + + .info { + font-size: 14px; + line-height: 20px; + } +} + +.title { + font-size: 24px; + line-height: 34px; + color: @gray-100; +} diff --git a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx new file mode 100644 index 000000000..9c42ffb76 --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx @@ -0,0 +1,38 @@ +import React, { FC } from 'react' +import styles from './GroupTopicHeader.module.less' +import { Avatar, Typography } from '@bangumi/design' +import { Creator } from '../../../../../types/common' +import dayjs from 'dayjs' + +interface Header { + title: string + createdAt: Date + creator: Creator +} + +const Link = Typography.Link + +const GroupTopicHeader: FC
= (props) => { + return ( +
+ +
+ +
+ {props.creator.nickname} + 发表于 + 靠谱人生茶话会 + » + 组内讨论 +
+ #1  |  {dayjs(props.createdAt).format('YYYY-M-D HH:MM')}  |  ! + +

{props.title}

+
+
+ ) +} + +export default GroupTopicHeader diff --git a/packages/website/src/pages/group/topic/[id]/index.module.less b/packages/website/src/pages/group/topic/[id]/index.module.less new file mode 100644 index 000000000..f92adb9ae --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/index.module.less @@ -0,0 +1,22 @@ +@import '@bangumi/design/theme/base'; + +/* Todo: col & raw component */ +.columnContainer { + display: flex; +} + +.leftCol { + width: 913px; + flex: 1; + margin-right: 40px; +} + +.rightCol { + width: 427px; +} + +.content { + font-size: 16px; + line-height: 24px; + color: @gray-100; +} diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 5b4d522b3..4b294073f 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -1,12 +1,30 @@ import React, { FC } from 'react' import { useParams } from 'react-router-dom' +import { RichContent } from '@bangumi/design' import GlobalLayout from '../../../../components/GlobalLayout' +import useGroupTopic from '../../../../hooks/use-group-topic' +import GroupTopicHeader from './components/GroupTopicHeader' +import styles from './index.module.less' +import { render as renderBBCode } from '@bangumi/utils' const Topic: FC = () => { const { id } = useParams() + const { topicDetail } = useGroupTopic(id!) + if (!topicDetail) { + return null + } + const parsedText = renderBBCode(topicDetail.text) return ( -
{id}
+ +
+
+ +
+
+ RightCol +
+
) } diff --git a/packages/website/src/types/common.ts b/packages/website/src/types/common.ts index 2796db373..9754ba43d 100644 --- a/packages/website/src/types/common.ts +++ b/packages/website/src/types/common.ts @@ -133,3 +133,49 @@ export interface Pagination { export interface ResponseWithPagination extends Pagination { data: T } + +/* Todo: refactor types usage +* 目前引入 type 可能需要 ../../../../types/common 这样引用 +* 同时 Group 和 Character / User 的类型可以分开到不同文件 +* */ + +export interface Creator { + avatar: AvatarSet + sign: string + url: string + username: string + nickname: string + id: number + user_group: number +} + +export interface Reply { + created_at: Date + text: string + creator: Creator + is_friend: boolean + state: number + id: number +} + +export interface Comment { + created_at: Date + text: string + creator: Creator + replies: Reply[] + id: number + is_friend: boolean + state: number +} + +export interface GroupTopicDetail { + created_at: Date + updated_at: Date + title: string + creator: Creator + text: string + comments: Comment[] + id: number + is_friend: boolean + state: number +} From 5c444b1788148499bed3ffc92154a099a876528c Mon Sep 17 00:00:00 2001 From: cokemine Date: Tue, 23 Aug 2022 01:38:14 +0800 Subject: [PATCH 03/69] fix: fix style import --- packages/website/vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts index 650753d86..867f18e6a 100644 --- a/packages/website/vite.config.ts +++ b/packages/website/vite.config.ts @@ -57,7 +57,7 @@ export default defineConfig({ libs: [ { libraryName: '@bangumi/design', - libraryNameChangeCase: 'capitalCase', + libraryNameChangeCase: 'pascalCase', ensureStyleFile: true, resolveStyle: (name: string) => `@bangumi/design/components/${name}/style/index.tsx` } From f22e6d418686823d0bd59507037d347e77ea8a61 Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 31 Aug 2022 16:49:32 +0800 Subject: [PATCH 04/69] update api --- packages/website/src/hooks/use-group-topic.ts | 2 +- packages/website/src/types/common.ts | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/website/src/hooks/use-group-topic.ts b/packages/website/src/hooks/use-group-topic.ts index 15bb2701a..b53ff521a 100644 --- a/packages/website/src/hooks/use-group-topic.ts +++ b/packages/website/src/hooks/use-group-topic.ts @@ -9,7 +9,7 @@ interface UseGroupTopic { function useGroupTopic (id: string): UseGroupTopic { // todo - const { data: { data: topicDetail } = {} } = useSWR>(`/p/groups/boring/topics/${id}`, privateRequest.get) + const { data: { data: topicDetail } = {} } = useSWR>(`/p/groups/-/topics/${id}`, privateRequest.get) return { topicDetail } } diff --git a/packages/website/src/types/common.ts b/packages/website/src/types/common.ts index 9754ba43d..82a742547 100644 --- a/packages/website/src/types/common.ts +++ b/packages/website/src/types/common.ts @@ -169,6 +169,13 @@ export interface Comment { } export interface GroupTopicDetail { + group: { + id: number + name: string + created_at: string + title: string + icon: string + } created_at: Date updated_at: Date title: string From 657a9cb438716ccc137ec2ecb4563bdca1f88fb3 Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 31 Aug 2022 20:29:48 +0800 Subject: [PATCH 05/69] refactor: replyinfo --- .../components/GroupTopicHeader.module.less | 5 ---- .../[id]/components/GroupTopicHeader.tsx | 26 +++++++++++-------- .../[id]/components/ReplyInfo.module.less | 7 +++++ .../group/topic/[id]/components/ReplyInfo.tsx | 18 +++++++++++++ .../src/pages/group/topic/[id]/index.tsx | 9 ++++++- packages/website/src/types/common.ts | 16 +++++++----- 6 files changed, 57 insertions(+), 24 deletions(-) create mode 100644 packages/website/src/pages/group/topic/[id]/components/ReplyInfo.module.less create mode 100644 packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx diff --git a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less index 0f1dcf197..b25a1cc34 100644 --- a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.module.less @@ -29,11 +29,6 @@ span { padding-right: 10px; } - - .info { - font-size: 14px; - line-height: 20px; - } } .title { diff --git a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx index 9c42ffb76..ff5aa0e3e 100644 --- a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx @@ -1,35 +1,39 @@ import React, { FC } from 'react' import styles from './GroupTopicHeader.module.less' import { Avatar, Typography } from '@bangumi/design' -import { Creator } from '../../../../../types/common' -import dayjs from 'dayjs' +import { Creator, GroupTopicGroupInfo } from '../../../../../types/common' +import ReplyInfo from './ReplyInfo' interface Header { title: string createdAt: Date creator: Creator + group: GroupTopicGroupInfo } const Link = Typography.Link -const GroupTopicHeader: FC
= (props) => { +const GroupTopicHeader: FC
= ({ + title, + createdAt, + creator, + group +}) => { return (
- +
- {props.creator.nickname} + {creator.nickname} 发表于 - 靠谱人生茶话会 + {group.title} » - 组内讨论 + 组内讨论
- #1  |  {dayjs(props.createdAt).format('YYYY-M-D HH:MM')}  |  ! + -

{props.title}

+

{title}

) diff --git a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.module.less b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.module.less new file mode 100644 index 000000000..8022619c3 --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.module.less @@ -0,0 +1,7 @@ +@import '@bangumi/design/theme/base'; + +.replyInfo { + color: @gray-60; + font-size: 14px; + line-height: 20px; +} diff --git a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx new file mode 100644 index 000000000..34196e4d5 --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import styles from './ReplyInfo.module.less' +import dayjs from 'dayjs' + +interface ReplyInfoProps { + floor: string + createdAt: Date +} + +const ReplyInfo: React.FC = ({ floor, createdAt }) => { + return ( + #{floor}  |  {dayjs(createdAt).format('YYYY-M-D HH:MM')}  |  ! + ) +} + +export default ReplyInfo diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 4b294073f..78877d094 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -16,10 +16,17 @@ const Topic: FC = () => { const parsedText = renderBBCode(topicDetail.text) return ( - +
+ {/* Topic content */} + {/* Topic replies */}
RightCol diff --git a/packages/website/src/types/common.ts b/packages/website/src/types/common.ts index 82a742547..ed3f7d5fb 100644 --- a/packages/website/src/types/common.ts +++ b/packages/website/src/types/common.ts @@ -168,14 +168,16 @@ export interface Comment { state: number } +export interface GroupTopicGroupInfo { + id: number + name: string + created_at: string + title: string + icon: string +} + export interface GroupTopicDetail { - group: { - id: number - name: string - created_at: string - title: string - icon: string - } + group: GroupTopicGroupInfo created_at: Date updated_at: Date title: string From 540fa34c9d08fec6fcd6985cdf4c5efaa4b27e5e Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 31 Aug 2022 22:00:54 +0800 Subject: [PATCH 06/69] wip: add comments --- .github/workflows/preview-build.yml | 2 +- .github/workflows/preview-storybook.yml | 2 +- packages/icons/assets/friend.svg | 3 ++ packages/icons/assets/original-poster.svg | 3 ++ packages/icons/index.tsx | 5 ++ .../group/topic/[id]/components/ReplyInfo.tsx | 2 +- .../[id]/components/TopicComment.module.less | 39 ++++++++++++++ .../topic/[id]/components/TopicComment.tsx | 53 +++++++++++++++++++ .../src/pages/group/topic/[id]/index.tsx | 15 +++++- 9 files changed, 120 insertions(+), 4 deletions(-) create mode 100644 packages/icons/assets/friend.svg create mode 100644 packages/icons/assets/original-poster.svg create mode 100644 packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less create mode 100644 packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml index e56593a31..2ee8123e7 100644 --- a/.github/workflows/preview-build.yml +++ b/.github/workflows/preview-build.yml @@ -42,7 +42,7 @@ jobs: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_PREVIEW_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_PREVIEW_SITE_ID }} - - name: Find Comment + - name: Find TopicComment uses: peter-evans/find-comment@v1 id: fc with: diff --git a/.github/workflows/preview-storybook.yml b/.github/workflows/preview-storybook.yml index b7257618e..898f8a21a 100644 --- a/.github/workflows/preview-storybook.yml +++ b/.github/workflows/preview-storybook.yml @@ -40,7 +40,7 @@ jobs: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_PREVIEW_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_PREVIEW_SITE_ID }} - - name: Find Comment + - name: Find TopicComment uses: peter-evans/find-comment@v1 id: fc with: diff --git a/packages/icons/assets/friend.svg b/packages/icons/assets/friend.svg new file mode 100644 index 000000000..ade2bc437 --- /dev/null +++ b/packages/icons/assets/friend.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/assets/original-poster.svg b/packages/icons/assets/original-poster.svg new file mode 100644 index 000000000..36bcb9d90 --- /dev/null +++ b/packages/icons/assets/original-poster.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/index.tsx b/packages/icons/index.tsx index 4f97e0c03..bce20665f 100644 --- a/packages/icons/index.tsx +++ b/packages/icons/index.tsx @@ -18,3 +18,8 @@ export { ReactComponent as Underscore } from './assets/underscore.svg' export { ReactComponent as Image } from './assets/image.svg' export { ReactComponent as Link } from './assets/link.svg' export { ReactComponent as Size } from './assets/size.svg' + +// Topic + +export { ReactComponent as OriginalPoster } from './assets/original-poster.svg' +export { ReactComponent as Friend } from './assets/friend.svg' diff --git a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx index 34196e4d5..28c910867 100644 --- a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx @@ -3,7 +3,7 @@ import styles from './ReplyInfo.module.less' import dayjs from 'dayjs' interface ReplyInfoProps { - floor: string + floor: string | number createdAt: Date } diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less new file mode 100644 index 000000000..63eb19e4a --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -0,0 +1,39 @@ +@import '@bangumi/design/theme/base'; + +.commentHeader { + display: flex; + align-items: center; + height: 98px; + max-width: 913px; +} + +.commentMain { + height: 60px; + margin-left: 12px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + width: 100%; +} + +.navBar { + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + justify-content: space-between; + color: @gray-60; + width: 100%; + + .creatorInfo { + display: flex; + align-items: center; + justify-content: space-between; + } + + div > a, + svg { + padding-right: 12px; + } +} diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx new file mode 100644 index 000000000..169cd393a --- /dev/null +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -0,0 +1,53 @@ +import React, { FC } from 'react' +import { Reply, Comment } from '../../../../../types/common' +import { Avatar, RichContent, Typography } from '@bangumi/design' +import { render as renderBBCode } from '@bangumi/utils' +import styles from './TopicComment.module.less' +import ReplyInfo from './ReplyInfo' +import { Friend, OriginalPoster } from '@bangumi/icons' + +type TopicCommentProps = + ((Reply & { isReply: true }) | (Comment & { isReply: false })) + & { + floor: string | number + isOriginalPoster: boolean + } + +const Link = Typography.Link + +const TopicComment: FC = ({ + text, + creator, + created_at: createAt, + floor, + is_friend: isFriend, + isOriginalPoster +}) => { + return ( +
+
+ +
+ +
+ {creator.nickname} + { + isOriginalPoster ? : null + } + { + isFriend ? : null + } + { + creator.sign ? {`// ${creator.sign}`} : null + } +
+ + + +
+
+
+ ) +} + +export default TopicComment diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 78877d094..59c2caf45 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -6,6 +6,7 @@ import useGroupTopic from '../../../../hooks/use-group-topic' import GroupTopicHeader from './components/GroupTopicHeader' import styles from './index.module.less' import { render as renderBBCode } from '@bangumi/utils' +import TopicComment from './components/TopicComment' const Topic: FC = () => { const { id } = useParams() @@ -13,6 +14,7 @@ const Topic: FC = () => { if (!topicDetail) { return null } + const originalPosterId = topicDetail.creator.id const parsedText = renderBBCode(topicDetail.text) return ( @@ -26,7 +28,18 @@ const Topic: FC = () => {
{/* Topic content */} - {/* Topic replies */} + {/* Topic Comments */} + { + topicDetail.comments.map((comment, idx) => + ( + + ) + ) + }
RightCol From 75c95c9de27fa653a64d9766ef72b5328e4fc8d0 Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 31 Aug 2022 22:22:49 +0800 Subject: [PATCH 07/69] add comment reply --- .../[id]/components/TopicComment.module.less | 10 ++++++- .../topic/[id]/components/TopicComment.tsx | 28 +++++++++++++++---- .../src/pages/group/topic/[id]/index.tsx | 6 ++-- 3 files changed, 35 insertions(+), 9 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index 63eb19e4a..72bf358a6 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -2,11 +2,15 @@ .commentHeader { display: flex; - align-items: center; + align-items: flex-start; height: 98px; max-width: 913px; } +.replyHeader { + margin-left: 60px; +} + .commentMain { height: 60px; margin-left: 12px; @@ -17,6 +21,10 @@ width: 100%; } +.topicContent { + line-height: 26px; +} + .navBar { font-size: 16px; line-height: 22px; diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index 169cd393a..14fd3f3f1 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -5,12 +5,13 @@ import { render as renderBBCode } from '@bangumi/utils' import styles from './TopicComment.module.less' import ReplyInfo from './ReplyInfo' import { Friend, OriginalPoster } from '@bangumi/icons' +import classNames from 'classnames' type TopicCommentProps = ((Reply & { isReply: true }) | (Comment & { isReply: false })) & { floor: string | number - isOriginalPoster: boolean + originalPosterId: number } const Link = Typography.Link @@ -21,18 +22,22 @@ const TopicComment: FC = ({ created_at: createAt, floor, is_friend: isFriend, - isOriginalPoster + originalPosterId, + ...props }) => { + const isReply = props.isReply + const replies = !isReply ? props.replies : null + const headerClassName = classNames(styles.commentHeader, { [styles.replyHeader]: isReply }) return (
-
- +
+
{creator.nickname} { - isOriginalPoster ? : null + originalPosterId === creator.id ? : null } { isFriend ? : null @@ -43,9 +48,20 @@ const TopicComment: FC = ({
- +
+ { + replies?.map((reply, idx) => ( + + )) + }
) } diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 59c2caf45..bbe78c18e 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -33,9 +33,11 @@ const Topic: FC = () => { topicDetail.comments.map((comment, idx) => ( ) ) From 45ce877dbb7bbd13045b9d15d43e42d6b8f13f19 Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 31 Aug 2022 22:25:08 +0800 Subject: [PATCH 08/69] revert ci changes --- .github/workflows/preview-build.yml | 2 +- .github/workflows/preview-storybook.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml index 2ee8123e7..e56593a31 100644 --- a/.github/workflows/preview-build.yml +++ b/.github/workflows/preview-build.yml @@ -42,7 +42,7 @@ jobs: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_PREVIEW_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_PREVIEW_SITE_ID }} - - name: Find TopicComment + - name: Find Comment uses: peter-evans/find-comment@v1 id: fc with: diff --git a/.github/workflows/preview-storybook.yml b/.github/workflows/preview-storybook.yml index 898f8a21a..b7257618e 100644 --- a/.github/workflows/preview-storybook.yml +++ b/.github/workflows/preview-storybook.yml @@ -40,7 +40,7 @@ jobs: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_PREVIEW_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_PREVIEW_SITE_ID }} - - name: Find TopicComment + - name: Find Comment uses: peter-evans/find-comment@v1 id: fc with: From 15ce6ca95464ed7c26b36fd0c6c92532c7d8d6c4 Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 31 Aug 2022 22:38:39 +0800 Subject: [PATCH 09/69] fix some styles --- packages/design/components/RichContent/style/index.less | 4 ++++ .../group/topic/[id]/components/TopicComment.module.less | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/design/components/RichContent/style/index.less b/packages/design/components/RichContent/style/index.less index a94014706..e35f755fa 100644 --- a/packages/design/components/RichContent/style/index.less +++ b/packages/design/components/RichContent/style/index.less @@ -9,4 +9,8 @@ color: @blue-100; text-decoration: none; } + + img { + max-width: 99%; + } } diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index 72bf358a6..9a305be1b 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -3,7 +3,7 @@ .commentHeader { display: flex; align-items: flex-start; - height: 98px; + min-height: 98px; max-width: 913px; } @@ -12,7 +12,7 @@ } .commentMain { - height: 60px; + min-height: 60px; margin-left: 12px; display: flex; flex-direction: column; From 1d1d4018bb897fc4fdef4c9b9692893715514ead Mon Sep 17 00:00:00 2001 From: cokemine Date: Wed, 31 Aug 2022 22:41:00 +0800 Subject: [PATCH 10/69] fix reply floor --- .../src/pages/group/topic/[id]/components/TopicComment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index 14fd3f3f1..5793192f2 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -56,7 +56,7 @@ const TopicComment: FC = ({ From cd06defb32bae8904776f8d40093ef997689e72f Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 1 Sep 2022 15:30:34 +0800 Subject: [PATCH 11/69] add reply collapse --- .../[id]/components/TopicComment.module.less | 4 ++++ .../topic/[id]/components/TopicComment.tsx | 23 +++++++++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index 9a305be1b..7b3b87a65 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -9,6 +9,10 @@ .replyHeader { margin-left: 60px; + + &.collapsed { + min-height: 22px; + } } .commentMain { diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index 5793192f2..f7f872e1e 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react' +import React, { FC, useState } from 'react' import { Reply, Comment } from '../../../../../types/common' import { Avatar, RichContent, Typography } from '@bangumi/design' import { render as renderBBCode } from '@bangumi/utils' @@ -27,7 +27,26 @@ const TopicComment: FC = ({ }) => { const isReply = props.isReply const replies = !isReply ? props.replies : null - const headerClassName = classNames(styles.commentHeader, { [styles.replyHeader]: isReply }) + const [shouldCollapsed, setShouldCollapsed] = useState(isReply && /[+-]\d+$/.test(text)) + const headerClassName = classNames(styles.commentHeader, { + [styles.replyHeader]: isReply, + [styles.collapsed]: shouldCollapsed + }) + + if (shouldCollapsed) { + return ( +
setShouldCollapsed(false)}> + +
+ {creator.nickname} + +
+ + +
+ ) + } + return (
From de312993485978d16eba3e7943063826b239e5a4 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 1 Sep 2022 15:50:00 +0800 Subject: [PATCH 12/69] update styles --- .../[id]/components/GroupTopicHeader.tsx | 5 ++-- .../[id]/components/TopicComment.module.less | 6 ++++- .../topic/[id]/components/TopicComment.tsx | 3 ++- .../pages/group/topic/[id]/index.module.less | 4 +++ .../src/pages/group/topic/[id]/index.tsx | 26 ++++++++++--------- 5 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx index ff5aa0e3e..ae1e3c8a8 100644 --- a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx @@ -1,8 +1,9 @@ import React, { FC } from 'react' import styles from './GroupTopicHeader.module.less' import { Avatar, Typography } from '@bangumi/design' -import { Creator, GroupTopicGroupInfo } from '../../../../../types/common' import ReplyInfo from './ReplyInfo' +import { Creator, GroupTopicGroupInfo } from '../../../../../types/common' +import { getGroupForumPage } from '../../../../../utils/pages' interface Header { title: string @@ -29,7 +30,7 @@ const GroupTopicHeader: FC
= ({ 发表于 {group.title} » - 组内讨论 + 组内讨论
diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index 7b3b87a65..7c8c9b369 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -5,10 +5,14 @@ align-items: flex-start; min-height: 98px; max-width: 913px; + padding-top: 20px; + padding-bottom: 12px; + border-bottom: 1px dashed @gray-10; } .replyHeader { - margin-left: 60px; + margin-left: 72px; + padding-top: 12px; &.collapsed { min-height: 22px; diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index f7f872e1e..edfa437fc 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -23,11 +23,12 @@ const TopicComment: FC = ({ floor, is_friend: isFriend, originalPosterId, + state, ...props }) => { const isReply = props.isReply const replies = !isReply ? props.replies : null - const [shouldCollapsed, setShouldCollapsed] = useState(isReply && /[+-]\d+$/.test(text)) + const [shouldCollapsed, setShouldCollapsed] = useState(isReply && (/[+-]\d+$/.test(text) || state === 6)) const headerClassName = classNames(styles.commentHeader, { [styles.replyHeader]: isReply, [styles.collapsed]: shouldCollapsed diff --git a/packages/website/src/pages/group/topic/[id]/index.module.less b/packages/website/src/pages/group/topic/[id]/index.module.less index f92adb9ae..56781603c 100644 --- a/packages/website/src/pages/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/group/topic/[id]/index.module.less @@ -20,3 +20,7 @@ line-height: 24px; color: @gray-100; } + +.replies { + margin-top: 40px; +} diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index bbe78c18e..f424490a2 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -29,19 +29,21 @@ const Topic: FC = () => { {/* Topic content */} {/* Topic Comments */} - { - topicDetail.comments.map((comment, idx) => - ( - +
+ { + topicDetail.comments.map((comment, idx) => + ( + + ) ) - ) - } + } +
RightCol From 1028ff95b6e6496a7c0d02f4d17b62927e9aac3f Mon Sep 17 00:00:00 2001 From: cokemine Date: Sat, 3 Sep 2022 10:34:09 +0800 Subject: [PATCH 13/69] add button group --- .../[id]/components/TopicComment.module.less | 22 ++++++++++++- .../topic/[id]/components/TopicComment.tsx | 32 ++++++++++++------- 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index 7c8c9b369..e1773f9c7 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -19,9 +19,12 @@ } } +.commentBox { + margin-left: 12px; +} + .commentMain { min-height: 60px; - margin-left: 12px; display: flex; flex-direction: column; align-items: flex-start; @@ -33,6 +36,23 @@ line-height: 26px; } +.buttonGroup { + margin-top: 12px; + + :global(.bgm-button) { + height: 24px; + line-height: 22px; + margin-right: 10px; + } + + :global(.bgm-button__secondary) { + background-color: #fff; + border: 2px solid @gray-10; + border-radius: 12px; + padding: 0 15px; + } +} + .navBar { font-size: 16px; line-height: 22px; diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index edfa437fc..d824f03d3 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -1,6 +1,6 @@ import React, { FC, useState } from 'react' import { Reply, Comment } from '../../../../../types/common' -import { Avatar, RichContent, Typography } from '@bangumi/design' +import { Avatar, RichContent, Typography, Button } from '@bangumi/design' import { render as renderBBCode } from '@bangumi/utils' import styles from './TopicComment.module.less' import ReplyInfo from './ReplyInfo' @@ -52,23 +52,31 @@ const TopicComment: FC = ({
-
- -
- {creator.nickname} - { +
+
+ +
+ {creator.nickname} + { originalPosterId === creator.id ? : null } - { + { isFriend ? : null } - { + { creator.sign ? {`// ${creator.sign}`} : null } -
- - - +
+ + + +
+
+ + + + +
{ From ec9b9f60e14af404874c10b8045f7cb35a92f1d7 Mon Sep 17 00:00:00 2001 From: cokemine Date: Sat, 3 Sep 2022 11:01:02 +0800 Subject: [PATCH 14/69] fix --- .../[id]/components/TopicComment.module.less | 1 + .../topic/[id]/components/TopicComment.tsx | 51 ++++++++++++------- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index e1773f9c7..944c3dd38 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -21,6 +21,7 @@ .commentBox { margin-left: 12px; + width: 100%; } .commentMain { diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index d824f03d3..f1c787e6d 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -6,6 +6,7 @@ import styles from './TopicComment.module.less' import ReplyInfo from './ReplyInfo' import { Friend, OriginalPoster } from '@bangumi/icons' import classNames from 'classnames' +import { useUser } from '../../../../../hooks/use-user' type TopicCommentProps = ((Reply & { isReply: true }) | (Comment & { isReply: false })) @@ -29,6 +30,8 @@ const TopicComment: FC = ({ const isReply = props.isReply const replies = !isReply ? props.replies : null const [shouldCollapsed, setShouldCollapsed] = useState(isReply && (/[+-]\d+$/.test(text) || state === 6)) + const { user } = useUser() + const headerClassName = classNames(styles.commentHeader, { [styles.replyHeader]: isReply, [styles.collapsed]: shouldCollapsed @@ -58,14 +61,17 @@ const TopicComment: FC = ({
{creator.nickname} { - originalPosterId === creator.id ? : null - } + originalPosterId === creator.id ? : null + } { - isFriend ? : null - } + isFriend ? : null + } { - creator.sign ? {`// ${creator.sign}`} : null - } + // Todo: XSS ? + creator.sign + ? + : null + }
@@ -74,22 +80,31 @@ const TopicComment: FC = ({
- - + { + user?.id === creator.id + ? ( + <> + + + + ) + : null + } +
{ - replies?.map((reply, idx) => ( - - )) - } + replies?.map((reply, idx) => ( + + )) + }
) } From 3a0ea4f645c0f0d80410fcbb2de607be6fc961c4 Mon Sep 17 00:00:00 2001 From: cokemine Date: Sun, 4 Sep 2022 10:57:11 +0800 Subject: [PATCH 15/69] add reply editor --- .../topic/[id]/components/TopicComment.tsx | 59 +++++++++++-------- 1 file changed, 36 insertions(+), 23 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index f1c787e6d..ac919ba30 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -1,6 +1,6 @@ import React, { FC, useState } from 'react' import { Reply, Comment } from '../../../../../types/common' -import { Avatar, RichContent, Typography, Button } from '@bangumi/design' +import { Avatar, RichContent, Typography, Button, EditorForm } from '@bangumi/design' import { render as renderBBCode } from '@bangumi/utils' import styles from './TopicComment.module.less' import ReplyInfo from './ReplyInfo' @@ -30,6 +30,7 @@ const TopicComment: FC = ({ const isReply = props.isReply const replies = !isReply ? props.replies : null const [shouldCollapsed, setShouldCollapsed] = useState(isReply && (/[+-]\d+$/.test(text) || state === 6)) + const [showReplyEditor, setShowReplyEditor] = useState(false) const { user } = useUser() const headerClassName = classNames(styles.commentHeader, { @@ -78,33 +79,45 @@ const TopicComment: FC = ({
- - { - user?.id === creator.id - ? ( - <> - - - - ) - : null - } - + showReplyEditor + ? ( + setShowReplyEditor(false)} + placeholder={`回复给 @${creator.nickname}：`} + /> + ) + : ( + <> + + + { + user?.id === creator.id + ? ( + <> + + + + ) + : null + } + + ) + }
{ - replies?.map((reply, idx) => ( - - )) - } + replies?.map((reply, idx) => ( + + )) + }
) } From 783b35fa6b027030f75f0ac0880f395cd080d5d5 Mon Sep 17 00:00:00 2001 From: cokemine Date: Sun, 4 Sep 2022 11:18:31 +0800 Subject: [PATCH 16/69] fix bbcode editor style --- .../design/components/EditorForm/style/index.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/design/components/EditorForm/style/index.less b/packages/design/components/EditorForm/style/index.less index e62c47e65..c72996e0d 100644 --- a/packages/design/components/EditorForm/style/index.less +++ b/packages/design/components/EditorForm/style/index.less @@ -1,6 +1,7 @@ @import '../../../theme/base'; -@toolbox-with: 215px; +@toolbox-width: 215px; +@text-width: 682px; .bgm-editor { &__container { @@ -10,6 +11,7 @@ border: 2px solid @gray-10; border-radius: 12px; padding: 8px 0 0 10px; + z-index: 9999; } &__toolbox { @@ -17,7 +19,7 @@ justify-content: space-between; align-items: center; height: 26px; - width: @toolbox-with; + width: @toolbox-width; padding: 0 4px; margin-bottom: 10px; @@ -29,8 +31,8 @@ &__text { flex: 1 0 auto; padding: 0; - min-width: @toolbox-with; - width: 682px; + min-width: @toolbox-width; + width: @text-width; border: none; outline: none; color: @gray-100; @@ -46,6 +48,7 @@ flex-direction: column; align-items: flex-start; justify-content: flex-start; + max-width: @text-width; } &__submit { From e3c1b62d8b354ce9988b2abd9890fb9d2da8bee8 Mon Sep 17 00:00:00 2001 From: cokemine Date: Sun, 4 Sep 2022 15:02:40 +0800 Subject: [PATCH 17/69] add reply editor --- .../components/EditorForm/style/index.less | 2 +- .../[id]/components/TopicComment.module.less | 6 +++--- .../group/topic/[id]/components/TopicComment.tsx | 2 +- .../src/pages/group/topic/[id]/index.module.less | 10 ++++++++++ .../website/src/pages/group/topic/[id]/index.tsx | 16 +++++++++++++++- 5 files changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/design/components/EditorForm/style/index.less b/packages/design/components/EditorForm/style/index.less index c72996e0d..e1447b8af 100644 --- a/packages/design/components/EditorForm/style/index.less +++ b/packages/design/components/EditorForm/style/index.less @@ -48,7 +48,7 @@ flex-direction: column; align-items: flex-start; justify-content: flex-start; - max-width: @text-width; + width: @text-width; } &__submit { diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index 944c3dd38..ea05fa23a 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -37,16 +37,16 @@ line-height: 26px; } -.buttonGroup { +.optionBox { margin-top: 12px; - :global(.bgm-button) { + > :global(.bgm-button) { height: 24px; line-height: 22px; margin-right: 10px; } - :global(.bgm-button__secondary) { + > :global(.bgm-button__secondary) { background-color: #fff; border: 2px solid @gray-10; border-radius: 12px; diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index ac919ba30..86d13c7af 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -78,7 +78,7 @@ const TopicComment: FC = ({ -
+
{ showReplyEditor ? ( diff --git a/packages/website/src/pages/group/topic/[id]/index.module.less b/packages/website/src/pages/group/topic/[id]/index.module.less index 56781603c..f7d724412 100644 --- a/packages/website/src/pages/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/group/topic/[id]/index.module.less @@ -24,3 +24,13 @@ .replies { margin-top: 40px; } + +.replyFormContainer { + display: flex; + align-items: flex-start; + margin-top: 20px; + + .replyForm { + margin-left: 12px; + } +} diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index f424490a2..4fb6db46c 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -1,16 +1,18 @@ import React, { FC } from 'react' import { useParams } from 'react-router-dom' -import { RichContent } from '@bangumi/design' +import { EditorForm, RichContent, Avatar } from '@bangumi/design' import GlobalLayout from '../../../../components/GlobalLayout' import useGroupTopic from '../../../../hooks/use-group-topic' import GroupTopicHeader from './components/GroupTopicHeader' import styles from './index.module.less' import { render as renderBBCode } from '@bangumi/utils' import TopicComment from './components/TopicComment' +import { useUser } from '../../../../hooks/use-user' const Topic: FC = () => { const { id } = useParams() const { topicDetail } = useGroupTopic(id!) + const { user } = useUser() if (!topicDetail) { return null } @@ -44,6 +46,18 @@ const Topic: FC = () => { ) }
+ {/* Reply BBCode Editor */} + { + user && ( +
+ + +
+ ) + }
RightCol From 5d44f1f30b2282af737ec941513d48175ecdf901 Mon Sep 17 00:00:00 2001 From: cokemine Date: Sun, 4 Sep 2022 15:55:44 +0800 Subject: [PATCH 18/69] add deleted state --- .../[id]/components/TopicComment.module.less | 4 +++ .../topic/[id]/components/TopicComment.tsx | 28 +++++++++++++++++-- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index ea05fa23a..cdcdde314 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -37,6 +37,10 @@ line-height: 26px; } +.deletedContent { + color: @gray-80; +} + .optionBox { margin-top: 12px; diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index 86d13c7af..d1e624c6b 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -17,6 +17,27 @@ type TopicCommentProps = const Link = Typography.Link +const RenderContent: FC<{ state: number, text: string }> = ( + { + state, + text + } +) => { + switch (state) { + case 0: + return + case 6: + return
内容已被用户删除
+ case 7: + return ( +
内容因违反「社区指导原则」已被删除 +
+ ) + default: + return null + } +} + const TopicComment: FC = ({ text, creator, @@ -28,8 +49,9 @@ const TopicComment: FC = ({ ...props }) => { const isReply = props.isReply + const isDeleted = state === 6 || state === 7 const replies = !isReply ? props.replies : null - const [shouldCollapsed, setShouldCollapsed] = useState(isReply && (/[+-]\d+$/.test(text) || state === 6)) + const [shouldCollapsed, setShouldCollapsed] = useState(isReply && (/[+-]\d+$/.test(text) || isDeleted)) const [showReplyEditor, setShowReplyEditor] = useState(false) const { user } = useUser() @@ -44,7 +66,7 @@ const TopicComment: FC = ({
{creator.nickname} - +
@@ -76,7 +98,7 @@ const TopicComment: FC = ({
- +
{ From 822b8b1eb9dfceddf434063193c642aa23e726d7 Mon Sep 17 00:00:00 2001 From: cokemine Date: Sun, 4 Sep 2022 22:42:53 +0800 Subject: [PATCH 19/69] add special comment state --- packages/icons/assets/topic-closed.svg | 4 ++ packages/icons/assets/topic-silent.svg | 4 ++ packages/icons/index.tsx | 2 + .../group/topic/[id]/components/ReplyInfo.tsx | 18 +++++--- .../[id]/components/TopicComment.module.less | 7 +-- .../topic/[id]/components/TopicComment.tsx | 43 +++++++++++++++++-- .../src/pages/group/topic/[id]/index.tsx | 3 +- 7 files changed, 68 insertions(+), 13 deletions(-) create mode 100644 packages/icons/assets/topic-closed.svg create mode 100644 packages/icons/assets/topic-silent.svg diff --git a/packages/icons/assets/topic-closed.svg b/packages/icons/assets/topic-closed.svg new file mode 100644 index 000000000..31c7551eb --- /dev/null +++ b/packages/icons/assets/topic-closed.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/assets/topic-silent.svg b/packages/icons/assets/topic-silent.svg new file mode 100644 index 000000000..289ebd599 --- /dev/null +++ b/packages/icons/assets/topic-silent.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/index.tsx b/packages/icons/index.tsx index 84769f143..a479a4f51 100644 --- a/packages/icons/index.tsx +++ b/packages/icons/index.tsx @@ -25,3 +25,5 @@ export { ReactComponent as Size } from './assets/size.svg' export { ReactComponent as OriginalPoster } from './assets/original-poster.svg' export { ReactComponent as Friend } from './assets/friend.svg' +export { ReactComponent as TopicSilent } from './assets/topic-silent.svg' +export { ReactComponent as TopicClosed } from './assets/topic-closed.svg' diff --git a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx index 28c910867..1ee510b1a 100644 --- a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx @@ -4,15 +4,21 @@ import dayjs from 'dayjs' interface ReplyInfoProps { floor: string | number + isSpecial?: boolean createdAt: Date } -const ReplyInfo: React.FC = ({ floor, createdAt }) => { - return ( - #{floor}  |  {dayjs(createdAt).format('YYYY-M-D HH:MM')}  |  ! - ) +const ReplyInfo: React.FC = ({ floor, createdAt, isSpecial = false }) => { + const date = dayjs(createdAt).format('YYYY-M-D HH:MM') + return !isSpecial + ? ( + #{floor}  |  {date}  |  ! + ) + : ( + {date} + ) } export default ReplyInfo diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index cdcdde314..73d969d59 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -13,10 +13,10 @@ .replyHeader { margin-left: 72px; padding-top: 12px; +} - &.collapsed { - min-height: 22px; - } +.commentCollapsed { + min-height: 22px; } .commentBox { @@ -34,6 +34,7 @@ } .topicContent { + color: @gray-100; line-height: 26px; } diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index d1e624c6b..6ded60636 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -4,7 +4,7 @@ import { Avatar, RichContent, Typography, Button, EditorForm } from '@bangumi/de import { render as renderBBCode } from '@bangumi/utils' import styles from './TopicComment.module.less' import ReplyInfo from './ReplyInfo' -import { Friend, OriginalPoster } from '@bangumi/icons' +import { Friend, OriginalPoster, TopicClosed, TopicSilent } from '@bangumi/icons' import classNames from 'classnames' import { useUser } from '../../../../../hooks/use-user' @@ -26,6 +26,12 @@ const RenderContent: FC<{ state: number, text: string }> = ( switch (state) { case 0: return + case 1: + return
关闭了该主题
+ case 2: + return
重新开启了该主题
+ case 5: + return
下沉了该主题
case 6: return
内容已被用户删除
case 7: @@ -50,14 +56,16 @@ const TopicComment: FC = ({ }) => { const isReply = props.isReply const isDeleted = state === 6 || state === 7 + // 1 关闭 2 重开 5 下沉 + const isSpecial = state === 1 || state === 2 || state === 5 const replies = !isReply ? props.replies : null - const [shouldCollapsed, setShouldCollapsed] = useState(isReply && (/[+-]\d+$/.test(text) || isDeleted)) + const [shouldCollapsed, setShouldCollapsed] = useState(isReply && ((/[+-]\d+$/.test(text) || isDeleted))) const [showReplyEditor, setShowReplyEditor] = useState(false) const { user } = useUser() const headerClassName = classNames(styles.commentHeader, { [styles.replyHeader]: isReply, - [styles.collapsed]: shouldCollapsed + [styles.commentCollapsed]: shouldCollapsed || isSpecial }) if (shouldCollapsed) { @@ -74,6 +82,35 @@ const TopicComment: FC = ({ ) } + if (isSpecial) { + let icon = null + switch (state) { + case 1: + icon = + break + case 2: + icon = null + break + case 5: + icon = + break + } + return ( +
+ +
+ { + icon + } + {creator.nickname} + +
+ + +
+ ) + } + return (
diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 4fb6db46c..b7c4836c4 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -18,6 +18,7 @@ const Topic: FC = () => { } const originalPosterId = topicDetail.creator.id const parsedText = renderBBCode(topicDetail.text) + const isClosed = topicDetail.state === 1 return ( {
{/* Reply BBCode Editor */} { - user && ( + !isClosed && user && (
Date: Sun, 4 Sep 2022 22:49:02 +0800 Subject: [PATCH 20/69] refactor --- .../[id]/components/TopicComment.module.less | 2 +- .../topic/[id]/components/TopicComment.tsx | 26 ++++++------------- 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less index 73d969d59..67ed0ff93 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less @@ -12,10 +12,10 @@ .replyHeader { margin-left: 72px; - padding-top: 12px; } .commentCollapsed { + padding-top: 12px; min-height: 22px; } diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index 6ded60636..91535a916 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -59,32 +59,21 @@ const TopicComment: FC = ({ // 1 关闭 2 重开 5 下沉 const isSpecial = state === 1 || state === 2 || state === 5 const replies = !isReply ? props.replies : null - const [shouldCollapsed, setShouldCollapsed] = useState(isReply && ((/[+-]\d+$/.test(text) || isDeleted))) + const [shouldCollapsed, setShouldCollapsed] = useState(isSpecial || (isReply && ((/[+-]\d+$/.test(text) || isDeleted)))) const [showReplyEditor, setShowReplyEditor] = useState(false) const { user } = useUser() const headerClassName = classNames(styles.commentHeader, { [styles.replyHeader]: isReply, - [styles.commentCollapsed]: shouldCollapsed || isSpecial + [styles.commentCollapsed]: shouldCollapsed }) if (shouldCollapsed) { - return ( -
setShouldCollapsed(false)}> - -
- {creator.nickname} - -
- - -
- ) - } - - if (isSpecial) { let icon = null switch (state) { + case 0: + icon = null + break case 1: icon = break @@ -95,8 +84,9 @@ const TopicComment: FC = ({ icon = break } + return ( -
+
setShouldCollapsed(false)}>
{ @@ -105,7 +95,7 @@ const TopicComment: FC = ({ {creator.nickname}
- +
) From 7155bebdc5fd11511d57ca7992a97315a6aa3175 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 5 Sep 2022 09:48:28 +0800 Subject: [PATCH 21/69] wip: right col --- .../pages/group/topic/[id]/index.module.less | 42 +++++++++++++++++++ .../src/pages/group/topic/[id]/index.tsx | 26 +++++++++++- packages/website/src/types/common.ts | 2 + 3 files changed, 68 insertions(+), 2 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/index.module.less b/packages/website/src/pages/group/topic/[id]/index.module.less index f7d724412..27d8dfe65 100644 --- a/packages/website/src/pages/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/group/topic/[id]/index.module.less @@ -1,3 +1,5 @@ +/* stylelint-disable value-no-vendor-prefix */ + @import '@bangumi/design/theme/base'; /* Todo: col & raw component */ @@ -34,3 +36,43 @@ margin-left: 12px; } } + +// Right Col +.groupInfo { + display: flex; +} + +.groupDetails { + margin-left: 10px; + + > a { + font-weight: 600; + font-size: 16px; + line-height: 22px; + } + + > div { + font-size: 12px; + line-height: 17px; + color: @gray-60; + } +} + +.groupDescription { + margin-top: 20px; + font-size: 14px; + line-height: 20px; + color: @gray-80; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 8; +} + +.groupOpinions { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 20px; +} diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index b7c4836c4..67a77ac1f 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react' import { useParams } from 'react-router-dom' -import { EditorForm, RichContent, Avatar } from '@bangumi/design' +import { EditorForm, RichContent, Avatar, Section, Typography } from '@bangumi/design' import GlobalLayout from '../../../../components/GlobalLayout' import useGroupTopic from '../../../../hooks/use-group-topic' import GroupTopicHeader from './components/GroupTopicHeader' @@ -9,6 +9,8 @@ import { render as renderBBCode } from '@bangumi/utils' import TopicComment from './components/TopicComment' import { useUser } from '../../../../hooks/use-user' +const { Link } = Typography + const Topic: FC = () => { const { id } = useParams() const { topicDetail } = useGroupTopic(id!) @@ -19,6 +21,7 @@ const Topic: FC = () => { const originalPosterId = topicDetail.creator.id const parsedText = renderBBCode(topicDetail.text) const isClosed = topicDetail.state === 1 + const { group } = topicDetail return ( { }
- RightCol +
+
+ +
+ {group.title} +
{`${group.total_members} 名成员`}
+
+
+
+
+ 小组概览 + 组内讨论 + 小组成员 +
+
diff --git a/packages/website/src/types/common.ts b/packages/website/src/types/common.ts index 60685c936..47708fe02 100644 --- a/packages/website/src/types/common.ts +++ b/packages/website/src/types/common.ts @@ -176,6 +176,8 @@ export interface GroupTopicGroupInfo { created_at: string title: string icon: string + description: string + total_members: number } export interface GroupTopicDetail { From bb7d72b7f4b8663371a1447d14e788a44bcf3f6a Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 5 Sep 2022 11:25:32 +0800 Subject: [PATCH 22/69] group info --- .../src/pages/group/topic/[id]/index.module.less | 14 ++++++++++++++ .../website/src/pages/group/topic/[id]/index.tsx | 9 +++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/index.module.less b/packages/website/src/pages/group/topic/[id]/index.module.less index 27d8dfe65..cdaf41a76 100644 --- a/packages/website/src/pages/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/group/topic/[id]/index.module.less @@ -75,4 +75,18 @@ align-items: center; justify-content: space-between; margin-top: 20px; + + > :global(.bgm-button) { + border: 2px solid @gray-10; + border-radius: 15px; + height: 30px; + line-height: 24px; + padding: 0 32px; + + a { + font-weight: 600; + color: @gray-60; + text-decoration: none; + } + } } diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 67a77ac1f..f68ffce42 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react' import { useParams } from 'react-router-dom' -import { EditorForm, RichContent, Avatar, Section, Typography } from '@bangumi/design' +import { EditorForm, RichContent, Avatar, Section, Typography, Button } from '@bangumi/design' import GlobalLayout from '../../../../components/GlobalLayout' import useGroupTopic from '../../../../hooks/use-group-topic' import GroupTopicHeader from './components/GroupTopicHeader' @@ -8,6 +8,7 @@ import styles from './index.module.less' import { render as renderBBCode } from '@bangumi/utils' import TopicComment from './components/TopicComment' import { useUser } from '../../../../hooks/use-user' +import { getGroupForumPage } from '../../../../utils/pages' const { Link } = Typography @@ -79,9 +80,9 @@ const Topic: FC = () => { dangerouslySetInnerHTML={{ __html: renderBBCode(group.description) }} />
- 小组概览 - 组内讨论 - 小组成员 + + +
From 592a50f0cf473af6466506b7ae907d6ac43c1038 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 5 Sep 2022 11:35:02 +0800 Subject: [PATCH 23/69] wip --- packages/website/src/pages/group/[name]/index.tsx | 2 +- .../{[name] => }/components/ClampableContent.module.less | 0 .../group/{[name] => }/components/ClampableContent.tsx | 0 packages/website/src/pages/group/topic/[id]/index.tsx | 9 +++++++++ 4 files changed, 10 insertions(+), 1 deletion(-) rename packages/website/src/pages/group/{[name] => }/components/ClampableContent.module.less (100%) rename packages/website/src/pages/group/{[name] => }/components/ClampableContent.tsx (100%) diff --git a/packages/website/src/pages/group/[name]/index.tsx b/packages/website/src/pages/group/[name]/index.tsx index 24f8e0daf..244bebfb9 100644 --- a/packages/website/src/pages/group/[name]/index.tsx +++ b/packages/website/src/pages/group/[name]/index.tsx @@ -9,7 +9,7 @@ import { render as renderBBCode } from '@bangumi/utils' import { UserCard } from './components/UserCard' import { getGroupForumPage, getGroupMemberPage, getGroupTopicLink, getUserProfileLink } from '../../../utils/pages' import dayjs from 'dayjs' -import { ClampableContent } from './components/ClampableContent' +import { ClampableContent } from '../components/ClampableContent' import { ReactComponent as RightArrow } from '../../../assets/right-arrow.svg' const { Link } = Typography diff --git a/packages/website/src/pages/group/[name]/components/ClampableContent.module.less b/packages/website/src/pages/group/components/ClampableContent.module.less similarity index 100% rename from packages/website/src/pages/group/[name]/components/ClampableContent.module.less rename to packages/website/src/pages/group/components/ClampableContent.module.less diff --git a/packages/website/src/pages/group/[name]/components/ClampableContent.tsx b/packages/website/src/pages/group/components/ClampableContent.tsx similarity index 100% rename from packages/website/src/pages/group/[name]/components/ClampableContent.tsx rename to packages/website/src/pages/group/components/ClampableContent.tsx diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index f68ffce42..d3467a403 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -7,11 +7,14 @@ import GroupTopicHeader from './components/GroupTopicHeader' import styles from './index.module.less' import { render as renderBBCode } from '@bangumi/utils' import TopicComment from './components/TopicComment' +import { ClampableContent } from '../../components/ClampableContent' import { useUser } from '../../../../hooks/use-user' import { getGroupForumPage } from '../../../../utils/pages' const { Link } = Typography +const CLAMP_HEIGHT_THRESHOLD = 193 + const Topic: FC = () => { const { id } = useParams() const { topicDetail } = useGroupTopic(id!) @@ -75,6 +78,12 @@ const Topic: FC = () => {
{`${group.total_members} 名成员`}
+ { }} + />
Date: Mon, 5 Sep 2022 11:42:59 +0800 Subject: [PATCH 24/69] wip --- .../group/components/ClampableContent.tsx | 18 ++++++++++++------ .../pages/group/topic/[id]/index.module.less | 5 ----- .../src/pages/group/topic/[id]/index.tsx | 6 +----- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/website/src/pages/group/components/ClampableContent.tsx b/packages/website/src/pages/group/components/ClampableContent.tsx index 688e1ee60..26fbca0a7 100644 --- a/packages/website/src/pages/group/components/ClampableContent.tsx +++ b/packages/website/src/pages/group/components/ClampableContent.tsx @@ -1,16 +1,18 @@ import React from 'react' -import { ReactComponent as DownArrow } from '../../../../assets/down-arrow.svg' -import { ReactComponent as UpArrow } from '../../../../assets/up-arrow.svg' +import { ReactComponent as DownArrow } from '../../../assets/down-arrow.svg' +import { ReactComponent as UpArrow } from '../../../assets/up-arrow.svg' import styles from './ClampableContent.module.less' +import classNames from 'classnames' export interface ClampableContentProps { threshold: number content: string isClamped: boolean - onChange: (isClamped: boolean) => void + className?: string + onChange?: (isClamped: boolean) => void } -export const ClampableContent: React.FC = ({ content, threshold, isClamped, onChange }) => { +export const ClampableContent: React.FC = ({ content, threshold, isClamped, onChange, className }) => { const [isClampEnabled, setIsClampedEnable] = React.useState(false) const contentRef = React.useRef(null) @@ -43,7 +45,11 @@ export const ClampableContent: React.FC = ({ content, thr return ( <>
...
-
展开
+ { + onChange + ?
展开
+ : null + } ) } else { @@ -52,7 +58,7 @@ export const ClampableContent: React.FC = ({ content, thr } return ( -
+
{renderControl()}
diff --git a/packages/website/src/pages/group/topic/[id]/index.module.less b/packages/website/src/pages/group/topic/[id]/index.module.less index cdaf41a76..53db6164c 100644 --- a/packages/website/src/pages/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/group/topic/[id]/index.module.less @@ -63,11 +63,6 @@ font-size: 14px; line-height: 20px; color: @gray-80; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 8; } .groupOpinions { diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index d3467a403..2c3db84b3 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -81,12 +81,8 @@ const Topic: FC = () => { { }} - /> -
From bf2c9d3ac3e59dded15ebf290fe123fddadc3354 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 5 Sep 2022 11:47:28 +0800 Subject: [PATCH 25/69] add reopen state --- packages/icons/assets/topic-reopen.svg | 4 ++++ packages/icons/index.tsx | 1 + .../src/pages/group/topic/[id]/components/TopicComment.tsx | 4 ++-- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 packages/icons/assets/topic-reopen.svg diff --git a/packages/icons/assets/topic-reopen.svg b/packages/icons/assets/topic-reopen.svg new file mode 100644 index 000000000..fdaa23f5b --- /dev/null +++ b/packages/icons/assets/topic-reopen.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/index.tsx b/packages/icons/index.tsx index a479a4f51..62d1da44e 100644 --- a/packages/icons/index.tsx +++ b/packages/icons/index.tsx @@ -27,3 +27,4 @@ export { ReactComponent as OriginalPoster } from './assets/original-poster.svg' export { ReactComponent as Friend } from './assets/friend.svg' export { ReactComponent as TopicSilent } from './assets/topic-silent.svg' export { ReactComponent as TopicClosed } from './assets/topic-closed.svg' +export { ReactComponent as TopicReopen } from './assets/topic-reopen.svg' diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx index 91535a916..11a0d7fe8 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx @@ -4,7 +4,7 @@ import { Avatar, RichContent, Typography, Button, EditorForm } from '@bangumi/de import { render as renderBBCode } from '@bangumi/utils' import styles from './TopicComment.module.less' import ReplyInfo from './ReplyInfo' -import { Friend, OriginalPoster, TopicClosed, TopicSilent } from '@bangumi/icons' +import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons' import classNames from 'classnames' import { useUser } from '../../../../../hooks/use-user' @@ -78,7 +78,7 @@ const TopicComment: FC = ({ icon = break case 2: - icon = null + icon = break case 5: icon = From 974e4de000612b23f751cc0951971a6109db14f5 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 5 Sep 2022 19:56:41 +0800 Subject: [PATCH 26/69] fix button style --- .../website/src/pages/group/topic/[id]/index.module.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/website/src/pages/group/topic/[id]/index.module.less b/packages/website/src/pages/group/topic/[id]/index.module.less index 53db6164c..960989749 100644 --- a/packages/website/src/pages/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/group/topic/[id]/index.module.less @@ -83,5 +83,13 @@ color: @gray-60; text-decoration: none; } + + &:hover { + background-color: @gray-10; + + a { + color: @gray-80; + } + } } } From 84a1833e56c19d4ae6a2a2c8338c8126341c1718 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 22 Sep 2022 17:42:49 +0800 Subject: [PATCH 27/69] wip --- .../components/Topic/Comment.stories.tsx | 32 ++ .../components/Topic/Comment.tsx} | 70 ++-- .../components/Topic/CommentInfo.tsx} | 11 +- .../__test__/fixtures/singleComment.json | 21 ++ packages/design/components/Topic/index.tsx | 10 + .../components/Topic/style/Comment.less | 83 +++++ .../components/Topic/style/CommentInfo.less} | 4 +- .../design/components/Topic/style/index.tsx | 2 + packages/design/index.tsx | 1 + packages/design/package.json | 3 + packages/types/group.ts | 58 ++++ packages/types/index.ts | 3 + packages/types/package.json | 5 + .../[id]/components/GroupTopicHeader.tsx | 6 +- .../[id]/components/TopicComment.module.less | 81 ----- .../src/pages/group/topic/[id]/index.tsx | 12 +- pnpm-lock.yaml | 327 ++++++++---------- 17 files changed, 411 insertions(+), 318 deletions(-) create mode 100644 packages/design/components/Topic/Comment.stories.tsx rename packages/{website/src/pages/group/topic/[id]/components/TopicComment.tsx => design/components/Topic/Comment.tsx} (67%) rename packages/{website/src/pages/group/topic/[id]/components/ReplyInfo.tsx => design/components/Topic/CommentInfo.tsx} (53%) create mode 100644 packages/design/components/Topic/__test__/fixtures/singleComment.json create mode 100644 packages/design/components/Topic/index.tsx create mode 100644 packages/design/components/Topic/style/Comment.less rename packages/{website/src/pages/group/topic/[id]/components/ReplyInfo.module.less => design/components/Topic/style/CommentInfo.less} (52%) create mode 100644 packages/design/components/Topic/style/index.tsx create mode 100644 packages/types/group.ts create mode 100644 packages/types/index.ts create mode 100644 packages/types/package.json delete mode 100644 packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx new file mode 100644 index 000000000..946ba86ca --- /dev/null +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import Comment from './Comment' +import { ComponentStory } from '@storybook/react' +import singleComment from './__test__/fixtures/singleComment.json' + +export default { + title: 'Topic/Comment', + component: Comment +} + +const Template: ComponentStory = ( + args +) => { + return ( + + ) +} + +export const SingleComment = Template.bind({}) + +SingleComment.args = { ...singleComment, isReply: false, author: null as any, created_at: new Date(), floor: 1 } + +export const CommentWithIcons = Template.bind({}) + +CommentWithIcons.args = { + ...singleComment, + isReply: false, + is_friend: true, + author: { id: 1 } as any, + created_at: new Date(), + floor: 1 +} diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx b/packages/design/components/Topic/Comment.tsx similarity index 67% rename from packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx rename to packages/design/components/Topic/Comment.tsx index 11a0d7fe8..60e1b8370 100644 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -1,18 +1,17 @@ import React, { FC, useState } from 'react' -import { Reply, Comment } from '../../../../../types/common' -import { Avatar, RichContent, Typography, Button, EditorForm } from '@bangumi/design' +import { Avatar, RichContent, Typography, Button, EditorForm } from '../../' import { render as renderBBCode } from '@bangumi/utils' -import styles from './TopicComment.module.less' -import ReplyInfo from './ReplyInfo' +import { Reply, Comment as IComment, Creator } from '@bangumi/types' +import CommentInfo from './CommentInfo' import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons' import classNames from 'classnames' -import { useUser } from '../../../../../hooks/use-user' -type TopicCommentProps = - ((Reply & { isReply: true }) | (Comment & { isReply: false })) +export type CommentProps = + ((Reply & { isReply: true }) | (IComment & { isReply: false })) & { floor: string | number originalPosterId: number + author: Creator } const Link = Typography.Link @@ -25,18 +24,26 @@ const RenderContent: FC<{ state: number, text: string }> = ( ) => { switch (state) { case 0: - return + return case 1: - return
关闭了该主题
+ return
关闭了该主题
case 2: - return
重新开启了该主题
+ return
重新开启了该主题
case 5: - return
下沉了该主题
+ return
下沉了该主题
case 6: - return
内容已被用户删除
+ return
内容已被用户删除
case 7: return ( -
内容因违反「社区指导原则」已被删除 +
+ 内容因违反「 + + 社区指导原则 + + 」已被删除
) default: @@ -44,7 +51,7 @@ const RenderContent: FC<{ state: number, text: string }> = ( } } -const TopicComment: FC = ({ +const Comment: FC = ({ text, creator, created_at: createAt, @@ -52,6 +59,7 @@ const TopicComment: FC = ({ is_friend: isFriend, originalPosterId, state, + author, ...props }) => { const isReply = props.isReply @@ -61,11 +69,10 @@ const TopicComment: FC = ({ const replies = !isReply ? props.replies : null const [shouldCollapsed, setShouldCollapsed] = useState(isSpecial || (isReply && ((/[+-]\d+$/.test(text) || isDeleted)))) const [showReplyEditor, setShowReplyEditor] = useState(false) - const { user } = useUser() - const headerClassName = classNames(styles.commentHeader, { - [styles.replyHeader]: isReply, - [styles.commentCollapsed]: shouldCollapsed + const headerClassName = classNames('bgm-comment__header', { + 'bgm-comment__header--reply': isReply, + 'bgm-comment__header--collapsed': shouldCollapsed }) if (shouldCollapsed) { @@ -87,15 +94,15 @@ const TopicComment: FC = ({ return (
setShouldCollapsed(false)}> - -
+ +
{ icon } {creator.nickname}
- +
) @@ -105,10 +112,10 @@ const TopicComment: FC = ({
-
-
- -
+
+
+ +
{creator.nickname} { originalPosterId === creator.id ? : null @@ -119,15 +126,15 @@ const TopicComment: FC = ({ { // Todo: XSS ? creator.sign - ? + ? : null }
- +
-
+
{ showReplyEditor ? ( @@ -141,7 +148,7 @@ const TopicComment: FC = ({ { - user?.id === creator.id + author?.id === creator.id ? ( <> @@ -158,11 +165,12 @@ const TopicComment: FC = ({
{ replies?.map((reply, idx) => ( - )) @@ -171,4 +179,4 @@ const TopicComment: FC = ({ ) } -export default TopicComment +export default Comment diff --git a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx b/packages/design/components/Topic/CommentInfo.tsx similarity index 53% rename from packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx rename to packages/design/components/Topic/CommentInfo.tsx index 1ee510b1a..858fe81a5 100644 --- a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.tsx +++ b/packages/design/components/Topic/CommentInfo.tsx @@ -1,24 +1,23 @@ import React from 'react' -import styles from './ReplyInfo.module.less' import dayjs from 'dayjs' -interface ReplyInfoProps { +export interface CommentInfoProps { floor: string | number isSpecial?: boolean createdAt: Date } -const ReplyInfo: React.FC = ({ floor, createdAt, isSpecial = false }) => { +const CommentInfo: React.FC = ({ floor, createdAt, isSpecial = false }) => { const date = dayjs(createdAt).format('YYYY-M-D HH:MM') return !isSpecial ? ( #{floor}  |  {date}  |  ! ) : ( - {date} + {date} ) } -export default ReplyInfo +export default CommentInfo diff --git a/packages/design/components/Topic/__test__/fixtures/singleComment.json b/packages/design/components/Topic/__test__/fixtures/singleComment.json new file mode 100644 index 000000000..fad25e92f --- /dev/null +++ b/packages/design/components/Topic/__test__/fixtures/singleComment.json @@ -0,0 +1,21 @@ +{ + "created_at": "2022-09-22T06:03:21Z", + "text": "123456789~~~", + "creator": { + "avatar": { + "large": "https://lain.bgm.tv/pic/user/l/000/42/29/422922.jpg?r=1602346224", + "medium": "https://lain.bgm.tv/pic/user/m/000/42/29/422922.jpg?r=1602346224", + "small": "https://lain.bgm.tv/pic/user/s/000/42/29/422922.jpg?r=1602346224" + }, + "sign": "我是签名", + "url": "https://bgm.tv/user/sai", + "username": "cokemine", + "nickname": "用户", + "id": 1, + "user_group": 11 + }, + "replies": [], + "id": 2104702, + "is_friend": false, + "state": 0 +} \ No newline at end of file diff --git a/packages/design/components/Topic/index.tsx b/packages/design/components/Topic/index.tsx new file mode 100644 index 000000000..3b1015056 --- /dev/null +++ b/packages/design/components/Topic/index.tsx @@ -0,0 +1,10 @@ +import Comment from './Comment' +import CommentInfo from './CommentInfo' + +export default { + Comment, + CommentInfo +} + +export type { CommentProps } from './Comment' +export type { CommentInfoProps } from './CommentInfo' diff --git a/packages/design/components/Topic/style/Comment.less b/packages/design/components/Topic/style/Comment.less new file mode 100644 index 000000000..64c913f16 --- /dev/null +++ b/packages/design/components/Topic/style/Comment.less @@ -0,0 +1,83 @@ +@import '../../../theme/base'; + +.bgm-comment { + &__header { + display: flex; + align-items: flex-start; + min-height: 98px; + max-width: 913px; + padding-top: 20px; + padding-bottom: 12px; + border-bottom: 1px dashed @gray-10; + + &--reply { + margin-left: 72px; + } + + &--collapsed { + padding-top: 12px; + min-height: 22px; + } + } + + &__box { + margin-left: 12px; + width: 100%; + } + + &__main { + min-height: 60px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + width: 100%; + } + + &__tip { + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + justify-content: space-between; + color: @gray-60; + width: 100%; + + .creator-info { + display: flex; + align-items: center; + justify-content: space-between; + } + + div > a, + svg { + padding-right: 12px; + } + } + + &__opinions { + margin-top: 12px; + + > .bgm-button { + height: 24px; + line-height: 22px; + margin-right: 10px; + } + + > .bgm-button__secondary { + background-color: #fff; + border: 2px solid @gray-10; + border-radius: 12px; + padding: 0 15px; + } + } + + &__content { + color: @gray-100; + line-height: 26px; + + &--deleted { + color: @gray-80; + } + } +} diff --git a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.module.less b/packages/design/components/Topic/style/CommentInfo.less similarity index 52% rename from packages/website/src/pages/group/topic/[id]/components/ReplyInfo.module.less rename to packages/design/components/Topic/style/CommentInfo.less index 8022619c3..3f87d2573 100644 --- a/packages/website/src/pages/group/topic/[id]/components/ReplyInfo.module.less +++ b/packages/design/components/Topic/style/CommentInfo.less @@ -1,6 +1,6 @@ -@import '@bangumi/design/theme/base'; +@import '../../../theme/base'; -.replyInfo { +.bgm-topic__commentInfo { color: @gray-60; font-size: 14px; line-height: 20px; diff --git a/packages/design/components/Topic/style/index.tsx b/packages/design/components/Topic/style/index.tsx new file mode 100644 index 000000000..7fa7a8bbd --- /dev/null +++ b/packages/design/components/Topic/style/index.tsx @@ -0,0 +1,2 @@ +import './Comment.less' +import './CommentInfo.less' diff --git a/packages/design/index.tsx b/packages/design/index.tsx index 025bb702e..59b1ff03f 100644 --- a/packages/design/index.tsx +++ b/packages/design/index.tsx @@ -11,6 +11,7 @@ export { default as Section } from './components/Section' export { default as EditorForm } from './components/EditorForm' export { default as RichContent } from './components/RichContent' export { default as Pagination } from './components/Pagination' +export { default as Topic } from './components/Topic' export type { ButtonProps } from './components/Button' export type { LinkProps } from './components/Typography' diff --git a/packages/design/package.json b/packages/design/package.json index 668436964..7daafe36a 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -4,12 +4,15 @@ "private": true, "main": "index.tsx", "dependencies": { + "dayjs": "^1.11.3", "react": "^17.0.2", "react-dom": "^17.0.2", "reset-css": "^5.0.1" }, "devDependencies": { "@bangumi/icons": "workspace:*", + "@bangumi/utils": "workspace:*", + "@bangumi/types": "workspace:*", "@storybook/addon-actions": "^6.5.9", "@storybook/addon-essentials": "^6.5.9", "@storybook/addon-links": "^6.5.9", diff --git a/packages/types/group.ts b/packages/types/group.ts new file mode 100644 index 000000000..eed740c46 --- /dev/null +++ b/packages/types/group.ts @@ -0,0 +1,58 @@ +// Todo +export interface AvatarSet { + large: string + medium: string + small: string +} + +export interface Creator { + avatar: AvatarSet + sign: string + url: string + username: string + nickname: string + id: number + user_group: number +} + +export interface Reply { + created_at: Date + text: string + creator: Creator + is_friend: boolean + state: number + id: number +} + +export interface Comment { + created_at: Date + text: string + creator: Creator + replies: Reply[] + id: number + is_friend: boolean + state: number +} + +export interface GroupTopicGroupInfo { + id: number + name: string + created_at: string + title: string + icon: string + description: string + total_members: number +} + +export interface GroupTopicDetail { + group: GroupTopicGroupInfo + created_at: Date | string + updated_at: Date | string + title: string + creator: Creator + text: string + comments: Comment[] + id: number + is_friend: boolean + state: number +} diff --git a/packages/types/index.ts b/packages/types/index.ts new file mode 100644 index 000000000..78b82fd44 --- /dev/null +++ b/packages/types/index.ts @@ -0,0 +1,3 @@ +// Todo + +export * from './group' diff --git a/packages/types/package.json b/packages/types/package.json new file mode 100644 index 000000000..2bd1777a5 --- /dev/null +++ b/packages/types/package.json @@ -0,0 +1,5 @@ +{ + "name": "@bangumi/types", + "version": "0.0.0", + "private": true +} \ No newline at end of file diff --git a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx index ae1e3c8a8..718d25867 100644 --- a/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx +++ b/packages/website/src/pages/group/topic/[id]/components/GroupTopicHeader.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react' import styles from './GroupTopicHeader.module.less' -import { Avatar, Typography } from '@bangumi/design' -import ReplyInfo from './ReplyInfo' +import { Avatar, Typography, Topic } from '@bangumi/design' import { Creator, GroupTopicGroupInfo } from '../../../../../types/common' import { getGroupForumPage } from '../../../../../utils/pages' @@ -13,6 +12,7 @@ interface Header { } const Link = Typography.Link +const CommentInfo = Topic.CommentInfo const GroupTopicHeader: FC
= ({ title, @@ -32,7 +32,7 @@ const GroupTopicHeader: FC
= ({ » 组内讨论
- +

{title}

diff --git a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less b/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less deleted file mode 100644 index 67ed0ff93..000000000 --- a/packages/website/src/pages/group/topic/[id]/components/TopicComment.module.less +++ /dev/null @@ -1,81 +0,0 @@ -@import '@bangumi/design/theme/base'; - -.commentHeader { - display: flex; - align-items: flex-start; - min-height: 98px; - max-width: 913px; - padding-top: 20px; - padding-bottom: 12px; - border-bottom: 1px dashed @gray-10; -} - -.replyHeader { - margin-left: 72px; -} - -.commentCollapsed { - padding-top: 12px; - min-height: 22px; -} - -.commentBox { - margin-left: 12px; - width: 100%; -} - -.commentMain { - min-height: 60px; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: space-between; - width: 100%; -} - -.topicContent { - color: @gray-100; - line-height: 26px; -} - -.deletedContent { - color: @gray-80; -} - -.optionBox { - margin-top: 12px; - - > :global(.bgm-button) { - height: 24px; - line-height: 22px; - margin-right: 10px; - } - - > :global(.bgm-button__secondary) { - background-color: #fff; - border: 2px solid @gray-10; - border-radius: 12px; - padding: 0 15px; - } -} - -.navBar { - font-size: 16px; - line-height: 22px; - display: flex; - align-items: center; - justify-content: space-between; - color: @gray-60; - width: 100%; - - .creatorInfo { - display: flex; - align-items: center; - justify-content: space-between; - } - - div > a, - svg { - padding-right: 12px; - } -} diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 2c3db84b3..95b3530c3 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -1,12 +1,11 @@ import React, { FC } from 'react' import { useParams } from 'react-router-dom' -import { EditorForm, RichContent, Avatar, Section, Typography, Button } from '@bangumi/design' +import { EditorForm, RichContent, Avatar, Section, Typography, Button, Topic } from '@bangumi/design' import GlobalLayout from '../../../../components/GlobalLayout' import useGroupTopic from '../../../../hooks/use-group-topic' import GroupTopicHeader from './components/GroupTopicHeader' import styles from './index.module.less' import { render as renderBBCode } from '@bangumi/utils' -import TopicComment from './components/TopicComment' import { ClampableContent } from '../../components/ClampableContent' import { useUser } from '../../../../hooks/use-user' import { getGroupForumPage } from '../../../../utils/pages' @@ -15,7 +14,9 @@ const { Link } = Typography const CLAMP_HEIGHT_THRESHOLD = 193 -const Topic: FC = () => { +const { Comment } = Topic + +const TopicPage: FC = () => { const { id } = useParams() const { topicDetail } = useGroupTopic(id!) const { user } = useUser() @@ -43,11 +44,12 @@ const Topic: FC = () => { { topicDetail.comments.map((comment, idx) => ( - ) @@ -95,4 +97,4 @@ const Topic: FC = () => { ) } -export default Topic +export default TopicPage diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4e67ea899..d5e012e25 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,6 +83,8 @@ importers: packages/design: specifiers: '@bangumi/icons': workspace:* + '@bangumi/types': workspace:* + '@bangumi/utils': workspace:* '@storybook/addon-actions': ^6.5.9 '@storybook/addon-essentials': ^6.5.9 '@storybook/addon-links': ^6.5.9 @@ -91,6 +93,7 @@ importers: '@types/react': ^17.0.33 '@types/react-dom': ^17.0.10 classnames: ^2.3.1 + dayjs: ^1.11.3 less: ^4.1.2 react: ^17.0.2 react-dom: ^17.0.2 @@ -100,11 +103,14 @@ importers: vite: ^3.0.2 vite-plugin-svgr: ^2.2.0 dependencies: + dayjs: 1.11.3 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 reset-css: r2.cnpmjs.org/reset-css/5.0.1 devDependencies: '@bangumi/icons': link:../icons + '@bangumi/types': link:../types + '@bangumi/utils': link:../utils '@storybook/addon-actions': 6.5.9_sfoxds7t5ydpegc3knd667wn6m '@storybook/addon-essentials': 6.5.9_3tgeifm2vmwrlpqlopppsnjtcu '@storybook/addon-links': 6.5.9_sfoxds7t5ydpegc3knd667wn6m @@ -135,6 +141,9 @@ importers: packages/server: specifiers: {} + packages/types: + specifiers: {} + packages/utils: specifiers: '@types/js-yaml': ^4.0.5 @@ -276,7 +285,7 @@ packages: gensync: r2.cnpmjs.org/gensync/1.0.0-beta.2 json5: r2.cnpmjs.org/json5/2.2.0 semver: r2.cnpmjs.org/semver/6.3.0 - source-map: r2.cnpmjs.org/source-map/0.5.7 + source-map: 0.5.7 transitivePeerDependencies: - supports-color dev: true @@ -310,7 +319,7 @@ packages: dependencies: '@babel/types': 7.16.7 jsesc: r2.cnpmjs.org/jsesc/2.5.2 - source-map: r2.cnpmjs.org/source-map/0.5.7 + source-map: 0.5.7 dev: true /@babel/generator/7.18.9: @@ -8470,6 +8479,28 @@ packages: resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==} dev: true + /chokidar/2.1.8: + resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==} + deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies + dependencies: + anymatch: r2.cnpmjs.org/anymatch/2.0.0 + async-each: r2.cnpmjs.org/async-each/1.0.3 + braces: r2.cnpmjs.org/braces/2.3.2 + glob-parent: r2.cnpmjs.org/glob-parent/3.1.0 + inherits: r2.cnpmjs.org/inherits/2.0.4 + is-binary-path: r2.cnpmjs.org/is-binary-path/1.0.1 + is-glob: r2.cnpmjs.org/is-glob/4.0.3 + normalize-path: r2.cnpmjs.org/normalize-path/3.0.0 + path-is-absolute: r2.cnpmjs.org/path-is-absolute/1.0.1 + readdirp: r2.cnpmjs.org/readdirp/2.2.1 + upath: r2.cnpmjs.org/upath/1.2.0 + optionalDependencies: + fsevents: 1.2.13 + transitivePeerDependencies: + - supports-color + dev: true + optional: true + /chokidar/3.5.2: resolution: {integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==} engines: {node: '>= 8.10.0'} @@ -8482,7 +8513,7 @@ packages: normalize-path: r2.cnpmjs.org/normalize-path/3.0.0 readdirp: r2.cnpmjs.org/readdirp/3.6.0 optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/2.3.2 + fsevents: 2.3.2 dev: true /chownr/1.1.4: @@ -8526,7 +8557,7 @@ packages: resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==} engines: {node: '>= 4.0'} dependencies: - source-map: r2.cnpmjs.org/source-map/0.6.1 + source-map: 0.6.1 dev: true /clean-stack/2.2.0: @@ -8552,7 +8583,7 @@ packages: dependencies: string-width: r2.cnpmjs.org/string-width/4.2.3 optionalDependencies: - colors: r2.cnpmjs.org/colors/1.4.0 + colors: 1.4.0 dev: true /cli-truncate/2.1.0: @@ -8633,6 +8664,13 @@ packages: resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==} dev: true + /colors/1.4.0: + resolution: {integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==} + engines: {node: '>=0.1.90'} + requiresBuild: true + dev: true + optional: true + /combined-stream/1.0.8: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} @@ -9103,6 +9141,18 @@ packages: engines: {node: '>=0.10.0'} dev: true + /default-browser-id/1.0.4: + resolution: {integrity: sha512-qPy925qewwul9Hifs+3sx1ZYn14obHxpkX+mPD369w4Rzg+YkJBgi3SOvwUq81nWSjqGUegIgEPwD8u+HUnxlw==} + engines: {node: '>=0.10.0'} + hasBin: true + requiresBuild: true + dependencies: + bplist-parser: 0.1.1 + meow: 3.7.0 + untildify: 2.1.0 + dev: true + optional: true + /define-lazy-prop/2.0.0: resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==} engines: {node: '>=8'} @@ -9389,6 +9439,7 @@ packages: /errno/0.1.8: resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==} hasBin: true + requiresBuild: true dependencies: prr: r2.cnpmjs.org/prr/1.0.1 dev: true @@ -9712,7 +9763,7 @@ packages: esutils: 2.0.3 optionator: 0.8.3 optionalDependencies: - source-map: r2.cnpmjs.org/source-map/0.6.1 + source-map: 0.6.1 dev: true /eslint-config-standard-jsx/10.0.0_kqu4i3lv3dayvcexvayuoxbqny: @@ -10505,6 +10556,26 @@ packages: resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=} dev: true + /fsevents/1.2.13: + resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==} + engines: {node: '>= 4.0'} + os: [darwin] + deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. + requiresBuild: true + dependencies: + bindings: 1.5.0 + nan: 2.15.0 + dev: true + optional: true + + /fsevents/2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + dev: true + optional: true + /function-bind/1.1.1: resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} dev: true @@ -10760,7 +10831,7 @@ packages: source-map: 0.6.1 wordwrap: 1.0.0 optionalDependencies: - uglify-js: r2.cnpmjs.org/uglify-js/3.14.5 + uglify-js: 3.14.5 dev: true /hard-rejection/2.1.0: @@ -11081,6 +11152,14 @@ packages: engines: {node: '>= 4'} dev: true + /image-size/0.5.5: + resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==} + engines: {node: '>=0.10.0'} + hasBin: true + requiresBuild: true + dev: true + optional: true + /import-fresh/3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -11737,7 +11816,7 @@ packages: sane: 4.1.0 walker: 1.0.8 optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/2.3.2 + fsevents: 2.3.2 transitivePeerDependencies: - supports-color dev: true @@ -11759,7 +11838,7 @@ packages: micromatch: 4.0.4 walker: 1.0.8 optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/2.3.2 + fsevents: 2.3.2 dev: true /jest-jasmine2/27.4.6: @@ -12458,6 +12537,7 @@ packages: /make-dir/2.1.0: resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} engines: {node: '>=6'} + requiresBuild: true dependencies: pify: r2.cnpmjs.org/pify/4.0.1 semver: r2.cnpmjs.org/semver/5.7.1 @@ -12690,6 +12770,7 @@ packages: resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} engines: {node: '>=4'} hasBin: true + requiresBuild: true dev: true /mime/2.6.0: @@ -12886,6 +12967,20 @@ packages: resolution: {integrity: sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=} dev: true + /needle/2.9.1: + resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==} + engines: {node: '>= 4.4.x'} + hasBin: true + requiresBuild: true + dependencies: + debug: 3.2.7 + iconv-lite: r2.cnpmjs.org/iconv-lite/0.4.24 + sax: r2.cnpmjs.org/sax/1.2.4 + transitivePeerDependencies: + - supports-color + dev: true + optional: true + /negotiator/0.6.2: resolution: {integrity: sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==} engines: {node: '>= 0.6'} @@ -14386,7 +14481,7 @@ packages: engines: {node: '>=10.0.0'} hasBin: true optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/2.3.2 + fsevents: 2.3.2 dev: true /rooks/5.11.0_sfoxds7t5ydpegc3knd667wn6m: @@ -14726,7 +14821,7 @@ packages: dev: true /source-map/0.5.7: - resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=} + resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} engines: {node: '>=0.10.0'} dev: true @@ -15565,6 +15660,14 @@ packages: hasBin: true dev: true + /uglify-js/3.14.5: + resolution: {integrity: sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==} + engines: {node: '>=0.8.0'} + hasBin: true + requiresBuild: true + dev: true + optional: true + /unbox-primitive/1.0.1: resolution: {integrity: sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==} dependencies: @@ -15942,7 +16045,7 @@ packages: resolve: 1.22.1 rollup: 2.77.0 optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/2.3.2 + fsevents: 2.3.2 dev: true /vite/3.0.2_less@4.1.2: @@ -15970,7 +16073,7 @@ packages: resolve: 1.22.1 rollup: 2.77.0 optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/2.3.2 + fsevents: 2.3.2 dev: true /vm-browserify/1.1.2: @@ -15996,14 +16099,24 @@ packages: makeerror: 1.0.12 dev: true + /watchpack-chokidar2/2.0.1: + resolution: {integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==} + requiresBuild: true + dependencies: + chokidar: 2.1.8 + transitivePeerDependencies: + - supports-color + dev: true + optional: true + /watchpack/1.7.5: resolution: {integrity: sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==} dependencies: graceful-fs: 4.2.9 neo-async: 2.6.2 optionalDependencies: - chokidar: r2.cnpmjs.org/chokidar/3.5.2 - watchpack-chokidar2: r2.cnpmjs.org/watchpack-chokidar2/2.0.1 + chokidar: 3.5.2 + watchpack-chokidar2: 2.0.1 transitivePeerDependencies: - supports-color dev: true @@ -16355,7 +16468,7 @@ packages: resolution: {integrity: sha512-7LKo7RtWfoFN/rHx1UELv/2zHGMx8MkZKDq1xENmOCTkfIqZJ0zZ26NEJX8czhnPXVcqS0ARjjfJB+eJ0/5Cvw==} hasBin: true optionalDependencies: - default-browser-id: r2.cnpmjs.org/default-browser-id/1.0.4 + default-browser-id: 1.0.4 dev: true /xml-name-validator/3.0.0: @@ -17124,30 +17237,6 @@ packages: version: 0.7.0 dev: true - r2.cnpmjs.org/chokidar/2.1.8: - resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/chokidar/-/chokidar-2.1.8.tgz} - name: chokidar - version: 2.1.8 - deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies - dependencies: - anymatch: r2.cnpmjs.org/anymatch/2.0.0 - async-each: r2.cnpmjs.org/async-each/1.0.3 - braces: r2.cnpmjs.org/braces/2.3.2 - glob-parent: r2.cnpmjs.org/glob-parent/3.1.0 - inherits: r2.cnpmjs.org/inherits/2.0.4 - is-binary-path: r2.cnpmjs.org/is-binary-path/1.0.1 - is-glob: r2.cnpmjs.org/is-glob/4.0.3 - normalize-path: r2.cnpmjs.org/normalize-path/3.0.0 - path-is-absolute: r2.cnpmjs.org/path-is-absolute/1.0.1 - readdirp: r2.cnpmjs.org/readdirp/2.2.1 - upath: r2.cnpmjs.org/upath/1.2.0 - optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/1.2.13 - transitivePeerDependencies: - - supports-color - dev: true - optional: true - r2.cnpmjs.org/chokidar/3.5.2: resolution: {integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/chokidar/-/chokidar-3.5.2.tgz} name: chokidar @@ -17162,7 +17251,7 @@ packages: normalize-path: r2.cnpmjs.org/normalize-path/3.0.0 readdirp: r2.cnpmjs.org/readdirp/3.6.0 optionalDependencies: - fsevents: r2.cnpmjs.org/fsevents/2.3.2 + fsevents: 2.3.2 dev: true r2.cnpmjs.org/class-utils/0.3.6: @@ -17259,15 +17348,6 @@ packages: version: 1.1.4 dev: true - r2.cnpmjs.org/colors/1.4.0: - resolution: {integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/colors/-/colors-1.4.0.tgz} - name: colors - version: 1.4.0 - engines: {node: '>=0.1.90'} - requiresBuild: true - dev: true - optional: true - r2.cnpmjs.org/component-emitter/1.3.0: resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/component-emitter/-/component-emitter-1.3.0.tgz} name: component-emitter @@ -17397,20 +17477,6 @@ packages: version: 0.1.4 dev: true - r2.cnpmjs.org/default-browser-id/1.0.4: - resolution: {integrity: sha512-qPy925qewwul9Hifs+3sx1ZYn14obHxpkX+mPD369w4Rzg+YkJBgi3SOvwUq81nWSjqGUegIgEPwD8u+HUnxlw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/default-browser-id/-/default-browser-id-1.0.4.tgz} - name: default-browser-id - version: 1.0.4 - engines: {node: '>=0.10.0'} - hasBin: true - requiresBuild: true - dependencies: - bplist-parser: 0.1.1 - meow: 3.7.0 - untildify: 2.1.0 - dev: true - optional: true - r2.cnpmjs.org/defaults/1.0.3: resolution: {integrity: sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/defaults/-/defaults-1.0.3.tgz} name: defaults @@ -17504,17 +17570,6 @@ packages: ansi-colors: r2.cnpmjs.org/ansi-colors/4.1.1 dev: true - r2.cnpmjs.org/errno/0.1.8: - resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/errno/-/errno-0.1.8.tgz} - name: errno - version: 0.1.8 - hasBin: true - requiresBuild: true - dependencies: - prr: r2.cnpmjs.org/prr/1.0.1 - dev: true - optional: true - r2.cnpmjs.org/es-abstract/1.19.1: resolution: {integrity: sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/es-abstract/-/es-abstract-1.19.1.tgz} name: es-abstract @@ -18042,30 +18097,6 @@ packages: version: 1.0.3 dev: true - r2.cnpmjs.org/fsevents/1.2.13: - resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/fsevents/-/fsevents-1.2.13.tgz} - name: fsevents - version: 1.2.13 - engines: {node: '>= 4.0'} - os: [darwin] - deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. - requiresBuild: true - dependencies: - bindings: 1.5.0 - nan: 2.15.0 - dev: true - optional: true - - r2.cnpmjs.org/fsevents/2.3.2: - resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/fsevents/-/fsevents-2.3.2.tgz} - name: fsevents - version: 2.3.2 - engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} - os: [darwin] - requiresBuild: true - dev: true - optional: true - r2.cnpmjs.org/function-bind/1.1.1: resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/function-bind/-/function-bind-1.1.1.tgz} name: function-bind @@ -18294,16 +18325,6 @@ packages: engines: {node: '>= 4'} dev: true - r2.cnpmjs.org/image-size/0.5.5: - resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/image-size/-/image-size-0.5.5.tgz} - name: image-size - version: 0.5.5 - engines: {node: '>=0.10.0'} - hasBin: true - requiresBuild: true - dev: true - optional: true - r2.cnpmjs.org/import-fresh/3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/import-fresh/-/import-fresh-3.3.0.tgz} name: import-fresh @@ -18824,13 +18845,13 @@ packages: parse-node-version: r2.cnpmjs.org/parse-node-version/1.0.1 tslib: r2.cnpmjs.org/tslib/2.3.1 optionalDependencies: - errno: r2.cnpmjs.org/errno/0.1.8 + errno: 0.1.8 graceful-fs: 4.2.9 - image-size: r2.cnpmjs.org/image-size/0.5.5 - make-dir: r2.cnpmjs.org/make-dir/2.1.0 - mime: r2.cnpmjs.org/mime/1.6.0 - needle: r2.cnpmjs.org/needle/2.9.1 - source-map: r2.cnpmjs.org/source-map/0.6.1 + image-size: 0.5.5 + make-dir: 2.1.0 + mime: 1.6.0 + needle: 2.9.1 + source-map: 0.6.1 transitivePeerDependencies: - supports-color dev: true @@ -18926,18 +18947,6 @@ packages: yallist: r2.cnpmjs.org/yallist/4.0.0 dev: true - r2.cnpmjs.org/make-dir/2.1.0: - resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/make-dir/-/make-dir-2.1.0.tgz} - name: make-dir - version: 2.1.0 - engines: {node: '>=6'} - requiresBuild: true - dependencies: - pify: r2.cnpmjs.org/pify/4.0.1 - semver: r2.cnpmjs.org/semver/5.7.1 - dev: true - optional: true - r2.cnpmjs.org/map-cache/0.2.2: resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/map-cache/-/map-cache-0.2.2.tgz} name: map-cache @@ -18961,16 +18970,6 @@ packages: engines: {node: '>= 8'} dev: true - r2.cnpmjs.org/mime/1.6.0: - resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/mime/-/mime-1.6.0.tgz} - name: mime - version: 1.6.0 - engines: {node: '>=4'} - hasBin: true - requiresBuild: true - dev: true - optional: true - r2.cnpmjs.org/mimic-fn/2.1.0: resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz} name: mimic-fn @@ -19054,22 +19053,6 @@ packages: version: 1.4.0 dev: true - r2.cnpmjs.org/needle/2.9.1: - resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/needle/-/needle-2.9.1.tgz} - name: needle - version: 2.9.1 - engines: {node: '>= 4.4.x'} - hasBin: true - requiresBuild: true - dependencies: - debug: 3.2.7 - iconv-lite: r2.cnpmjs.org/iconv-lite/0.4.24 - sax: r2.cnpmjs.org/sax/1.2.4 - transitivePeerDependencies: - - supports-color - dev: true - optional: true - r2.cnpmjs.org/node-fetch/2.6.6: resolution: {integrity: sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/node-fetch/-/node-fetch-2.6.6.tgz} name: node-fetch @@ -19911,13 +19894,6 @@ packages: deprecated: See https://github.com/lydell/source-map-url#deprecated dev: true - r2.cnpmjs.org/source-map/0.5.7: - resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/source-map/-/source-map-0.5.7.tgz} - name: source-map - version: 0.5.7 - engines: {node: '>=0.10.0'} - dev: true - r2.cnpmjs.org/source-map/0.6.1: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/source-map/-/source-map-0.6.1.tgz} name: source-map @@ -19925,13 +19901,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - r2.cnpmjs.org/source-map/0.7.3: - resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/source-map/-/source-map-0.7.3.tgz} - name: source-map - version: 0.7.3 - engines: {node: '>= 8'} - dev: true - r2.cnpmjs.org/split-string/3.1.0: resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/split-string/-/split-string-3.1.0.tgz} name: split-string @@ -20238,16 +20207,6 @@ packages: engines: {node: '>=10'} dev: true - r2.cnpmjs.org/uglify-js/3.14.5: - resolution: {integrity: sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/uglify-js/-/uglify-js-3.14.5.tgz} - name: uglify-js - version: 3.14.5 - engines: {node: '>=0.8.0'} - hasBin: true - requiresBuild: true - dev: true - optional: true - r2.cnpmjs.org/unbox-primitive/1.0.1: resolution: {integrity: sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz} name: unbox-primitive @@ -20331,20 +20290,8 @@ packages: dependencies: '@types/istanbul-lib-coverage': r2.cnpmjs.org/@types/istanbul-lib-coverage/2.0.4 convert-source-map: r2.cnpmjs.org/convert-source-map/1.8.0 - source-map: r2.cnpmjs.org/source-map/0.7.3 - dev: true - - r2.cnpmjs.org/watchpack-chokidar2/2.0.1: - resolution: {integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz} - name: watchpack-chokidar2 - version: 2.0.1 - requiresBuild: true - dependencies: - chokidar: r2.cnpmjs.org/chokidar/2.1.8 - transitivePeerDependencies: - - supports-color + source-map: 0.7.3 dev: true - optional: true r2.cnpmjs.org/wcwidth/1.0.1: resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/wcwidth/-/wcwidth-1.0.1.tgz} From 88c1ac1bb2c05244151e3b1e012726e1d90c5119 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 22 Sep 2022 18:51:25 +0800 Subject: [PATCH 28/69] wip --- .../design/components/RichContent/index.tsx | 2 +- .../components/Topic/Comment.stories.tsx | 31 ++++++++++++-- packages/design/components/Topic/Comment.tsx | 27 +++++++----- .../__test__/fixtures/commentWithReplies.json | 42 +++++++++++++++++++ .../__test__/fixtures/singleComment.json | 4 +- pnpm-lock.yaml | 2 +- 6 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 packages/design/components/Topic/__test__/fixtures/commentWithReplies.json diff --git a/packages/design/components/RichContent/index.tsx b/packages/design/components/RichContent/index.tsx index abb08da5b..a1515ac59 100644 --- a/packages/design/components/RichContent/index.tsx +++ b/packages/design/components/RichContent/index.tsx @@ -8,7 +8,7 @@ export interface RichContentProps { const RichContent: React.FC = ({ html, classname }) => { return ( -
diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index 946ba86ca..f52e46b27 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -2,6 +2,7 @@ import React from 'react' import Comment from './Comment' import { ComponentStory } from '@storybook/react' import singleComment from './__test__/fixtures/singleComment.json' +import commentWithReplies from './__test__/fixtures/commentWithReplies.json' export default { title: 'Topic/Comment', @@ -12,13 +13,15 @@ const Template: ComponentStory = ( args ) => { return ( - +
+ +
) } export const SingleComment = Template.bind({}) -SingleComment.args = { ...singleComment, isReply: false, author: null as any, created_at: new Date(), floor: 1 } +SingleComment.args = { ...singleComment, isReply: false, user: null as any, created_at: new Date(), floor: 1 } export const CommentWithIcons = Template.bind({}) @@ -26,7 +29,27 @@ CommentWithIcons.args = { ...singleComment, isReply: false, is_friend: true, - author: { id: 1 } as any, + originalPosterId: 1, created_at: new Date(), - floor: 1 + floor: 2 +} + +export const CommentWithReplies = Template.bind({}) +CommentWithReplies.args = { + ...commentWithReplies, + isReply: false, + is_friend: false, + created_at: new Date(), + floor: 2 +} as any + +export const SelfComment = Template.bind({}) + +SelfComment.args = { + ...singleComment, + isReply: false, + is_friend: false, + created_at: new Date(), + user: singleComment.creator, + floor: 2 } diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 60e1b8370..dbeb0b2b0 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -1,17 +1,21 @@ import React, { FC, useState } from 'react' -import { Avatar, RichContent, Typography, Button, EditorForm } from '../../' -import { render as renderBBCode } from '@bangumi/utils' import { Reply, Comment as IComment, Creator } from '@bangumi/types' -import CommentInfo from './CommentInfo' import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons' import classNames from 'classnames' +import { render as renderBBCode } from '@bangumi/utils' +import Avatar from '../../components/Avatar' +import RichContent from '../../components/RichContent' +import Typography from '../../components/Typography' +import Button from '../../components/Button' +import EditorForm from '../../components/EditorForm' +import CommentInfo from './CommentInfo' export type CommentProps = ((Reply & { isReply: true }) | (IComment & { isReply: false })) & { floor: string | number originalPosterId: number - author: Creator + user: Creator } const Link = Typography.Link @@ -59,7 +63,7 @@ const Comment: FC = ({ is_friend: isFriend, originalPosterId, state, - author, + user, ...props }) => { const isReply = props.isReply @@ -93,7 +97,10 @@ const Comment: FC = ({ } return ( -
setShouldCollapsed(false)}> +
setShouldCollapsed(false)} + id={`post_${props.id}`} + >
{ @@ -110,7 +117,7 @@ const Comment: FC = ({ return (
-
+
@@ -126,7 +133,7 @@ const Comment: FC = ({ { // Todo: XSS ? creator.sign - ? + ? : null }
@@ -148,7 +155,7 @@ const Comment: FC = ({ { - author?.id === creator.id + user?.id === creator.id ? ( <> @@ -170,7 +177,7 @@ const Comment: FC = ({ isReply floor={`${floor}-${idx + 1}`} originalPosterId={originalPosterId} - author={author} + user={user} {...reply} /> )) diff --git a/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json b/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json new file mode 100644 index 000000000..c4538c58e --- /dev/null +++ b/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json @@ -0,0 +1,42 @@ +{ + "created_at": "2022-09-22T06:03:21Z", + "text": "123456789~~~", + "creator": { + "avatar": { + "large": "https://lain.bgm.tv/pic/user/l/000/42/29/422922.jpg?r=1602346224", + "medium": "https://lain.bgm.tv/pic/user/m/000/42/29/422922.jpg?r=1602346224", + "small": "https://lain.bgm.tv/pic/user/s/000/42/29/422922.jpg?r=1602346224" + }, + "sign": "我是签名", + "url": "https://bgm.tv/user/123456789", + "username": "123456789", + "nickname": "用户", + "id": 1, + "user_group": 11 + }, + "replies": [ + { + "created_at": "2022-09-22T06:03:21Z", + "text": "123456789~~~", + "creator": { + "avatar": { + "large": "https://lain.bgm.tv/pic/user/l/000/42/29/422922.jpg?r=1602346224", + "medium": "https://lain.bgm.tv/pic/user/m/000/42/29/422922.jpg?r=1602346224", + "small": "https://lain.bgm.tv/pic/user/s/000/42/29/422922.jpg?r=1602346224" + }, + "sign": "我是签名", + "url": "https://bgm.tv/user/123456789", + "username": "123456789", + "nickname": "用户", + "id": 1, + "user_group": 11 + }, + "id": 2104702, + "is_friend": false, + "state": 0 + } + ], + "id": 2104702, + "is_friend": false, + "state": 0 +} \ No newline at end of file diff --git a/packages/design/components/Topic/__test__/fixtures/singleComment.json b/packages/design/components/Topic/__test__/fixtures/singleComment.json index fad25e92f..15366b690 100644 --- a/packages/design/components/Topic/__test__/fixtures/singleComment.json +++ b/packages/design/components/Topic/__test__/fixtures/singleComment.json @@ -8,8 +8,8 @@ "small": "https://lain.bgm.tv/pic/user/s/000/42/29/422922.jpg?r=1602346224" }, "sign": "我是签名", - "url": "https://bgm.tv/user/sai", - "username": "cokemine", + "url": "https://bgm.tv/user/123456789", + "username": "123456789", "nickname": "用户", "id": 1, "user_group": 11 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d5e012e25..35aa220f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16016,7 +16016,7 @@ packages: dependencies: '@rollup/pluginutils': 4.2.1 '@svgr/core': 6.2.1 - vite: 3.0.2 + vite: 3.0.2_less@4.1.2 transitivePeerDependencies: - supports-color dev: true From 9c27ff43be73da95bad21031aa2282415e8d7866 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 22 Sep 2022 21:24:24 +0800 Subject: [PATCH 29/69] fix build --- packages/website/src/pages/group/topic/[id]/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 95b3530c3..301da6b3d 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -49,7 +49,7 @@ const TopicPage: FC = () => { isReply={false} floor={idx + 2} originalPosterId={originalPosterId} - author={topicDetail?.creator} + user={topicDetail?.creator} {...comment} /> ) From a403251e4ab968c0a7a5e7421e21147f4672d8b2 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 22 Sep 2022 21:26:27 +0800 Subject: [PATCH 30/69] fix: reply should not show sign --- packages/design/components/Topic/Comment.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index dbeb0b2b0..ea7168b66 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -131,9 +131,11 @@ const Comment: FC = ({ isFriend ? : null } { - // Todo: XSS ? - creator.sign - ? + !isReply + // Todo: XSS ? + ? creator.sign + ? + : null : null }
From 77d7599bfcceb5a5e04a8150b490be339e5d0585 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 22 Sep 2022 21:32:15 +0800 Subject: [PATCH 31/69] fix --- packages/design/components/Topic/Comment.tsx | 4 +-- packages/types/group.ts | 4 +-- packages/types/index.ts | 1 + packages/types/user.ts | 25 +++++++++++++++++++ .../src/pages/group/topic/[id]/index.tsx | 2 +- 5 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 packages/types/user.ts diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index ea7168b66..6aa6dd28e 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -1,5 +1,5 @@ import React, { FC, useState } from 'react' -import { Reply, Comment as IComment, Creator } from '@bangumi/types' +import { Reply, Comment as IComment, User } from '@bangumi/types' import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons' import classNames from 'classnames' import { render as renderBBCode } from '@bangumi/utils' @@ -15,7 +15,7 @@ export type CommentProps = & { floor: string | number originalPosterId: number - user: Creator + user?: User } const Link = Typography.Link diff --git a/packages/types/group.ts b/packages/types/group.ts index eed740c46..3374b377a 100644 --- a/packages/types/group.ts +++ b/packages/types/group.ts @@ -46,8 +46,8 @@ export interface GroupTopicGroupInfo { export interface GroupTopicDetail { group: GroupTopicGroupInfo - created_at: Date | string - updated_at: Date | string + created_at: Date + updated_at: Date title: string creator: Creator text: string diff --git a/packages/types/index.ts b/packages/types/index.ts index 78b82fd44..a79b870a4 100644 --- a/packages/types/index.ts +++ b/packages/types/index.ts @@ -1,3 +1,4 @@ // Todo export * from './group' +export * from './user' diff --git a/packages/types/user.ts b/packages/types/user.ts new file mode 100644 index 000000000..1813389a1 --- /dev/null +++ b/packages/types/user.ts @@ -0,0 +1,25 @@ +export enum UserGroup { + Admin = 1, + BangumiAdmin = 2, + DoujinAdmin = 3, + MutedUser = 4, + AccessForbiddenUser = 5, + CharacterAdmin = 8, + WikiAdmin = 9, + User = 10, + WikiContributor = 11 +} + +export interface User { + id: number + url: string + username: string + nickname: string + user_group: UserGroup + avatar: { + large: string + medium: string + small: string + } + sign: string +} diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 301da6b3d..8b3353e0c 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -49,7 +49,7 @@ const TopicPage: FC = () => { isReply={false} floor={idx + 2} originalPosterId={originalPosterId} - user={topicDetail?.creator} + user={user} {...comment} /> ) From 05cd4efbba66724d79578a46ee56828a9b735bc9 Mon Sep 17 00:00:00 2001 From: cokemine Date: Tue, 27 Sep 2022 14:04:52 +0800 Subject: [PATCH 32/69] fix: remove layout --- packages/website/src/pages/group/topic/[id]/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/website/src/pages/group/topic/[id]/index.tsx b/packages/website/src/pages/group/topic/[id]/index.tsx index 8b3353e0c..c134a7717 100644 --- a/packages/website/src/pages/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/group/topic/[id]/index.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react' import { useParams } from 'react-router-dom' import { EditorForm, RichContent, Avatar, Section, Typography, Button, Topic } from '@bangumi/design' -import GlobalLayout from '../../../../components/GlobalLayout' import useGroupTopic from '../../../../hooks/use-group-topic' import GroupTopicHeader from './components/GroupTopicHeader' import styles from './index.module.less' @@ -28,7 +27,7 @@ const TopicPage: FC = () => { const isClosed = topicDetail.state === 1 const { group } = topicDetail return ( - + <> {
- + ) } export default TopicPage From 56de47bd5a6d6737f922ee44ba6596f1253babb3 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 17 Nov 2022 23:49:11 +0800 Subject: [PATCH 33/69] update --- .../design/components/Topic/CommentInfo.tsx | 2 +- packages/website/src/hooks/use-group-topic.ts | 2 +- .../components/ClampableContent.module.less | 35 ---------- .../[name]/components/ClampableContent.tsx | 66 ------------------- .../src/pages/index/group/[name]/index.tsx | 5 +- .../group/components/ClampableContent.tsx | 17 ++++- .../[id]/components/GroupTopicHeader.tsx | 2 +- .../pages/index/group/topic/[id]/index.tsx | 5 +- 8 files changed, 19 insertions(+), 115 deletions(-) delete mode 100644 packages/website/src/pages/index/group/[name]/components/ClampableContent.module.less delete mode 100644 packages/website/src/pages/index/group/[name]/components/ClampableContent.tsx diff --git a/packages/design/components/Topic/CommentInfo.tsx b/packages/design/components/Topic/CommentInfo.tsx index 858fe81a5..100d6f13c 100644 --- a/packages/design/components/Topic/CommentInfo.tsx +++ b/packages/design/components/Topic/CommentInfo.tsx @@ -4,7 +4,7 @@ import dayjs from 'dayjs' export interface CommentInfoProps { floor: string | number isSpecial?: boolean - createdAt: Date + createdAt: string | Date } const CommentInfo: React.FC = ({ floor, createdAt, isSpecial = false }) => { diff --git a/packages/website/src/hooks/use-group-topic.ts b/packages/website/src/hooks/use-group-topic.ts index d05345641..46eb69dea 100644 --- a/packages/website/src/hooks/use-group-topic.ts +++ b/packages/website/src/hooks/use-group-topic.ts @@ -4,7 +4,7 @@ import { AxiosResponse } from 'axios' import { privateRequest } from '../api/request' type TopicsResp = { - group?: Group + group: Group } & GroupTopics interface UseGroupTopic { diff --git a/packages/website/src/pages/index/group/[name]/components/ClampableContent.module.less b/packages/website/src/pages/index/group/[name]/components/ClampableContent.module.less deleted file mode 100644 index a5fdf9904..000000000 --- a/packages/website/src/pages/index/group/[name]/components/ClampableContent.module.less +++ /dev/null @@ -1,35 +0,0 @@ -@import '@bangumi/design/theme/base'; - -.container { - > * { - margin-bottom: 6px; - } -} - -.content { - width: 100%; - color: @gray-100; - font-size: 16px; - line-height: 24px; -} - -.textButton { - display: flex; - align-items: center; - color: @gray-60; - font-size: 14px; - line-height: 14px; - cursor: pointer; - - span { - margin-right: 4px; - } - - &:hover { - color: @blue-100; - - path { - fill: @blue-100; - } - } -} diff --git a/packages/website/src/pages/index/group/[name]/components/ClampableContent.tsx b/packages/website/src/pages/index/group/[name]/components/ClampableContent.tsx deleted file mode 100644 index e53a9b5a0..000000000 --- a/packages/website/src/pages/index/group/[name]/components/ClampableContent.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react' -import { ReactComponent as DownArrow } from '@bangumi/website/assets/down-arrow.svg' -import { ReactComponent as UpArrow } from '@bangumi/website/assets/up-arrow.svg' -import styles from './ClampableContent.module.less' -import classNames from 'classnames' - -export interface ClampableContentProps { - threshold: number - content: string - isClamped: boolean - className?: string - onChange?: (isClamped: boolean) => void -} - -export const ClampableContent: React.FC = ({ content, threshold, isClamped, onChange, className }) => { - const [isClampEnabled, setIsClampedEnable] = React.useState(false) - const contentRef = React.useRef(null) - - React.useEffect(() => { - if (!contentRef.current) { - return - } - setIsClampedEnable(contentRef.current.scrollHeight > threshold) - }, [threshold]) - - const clampedStyle: React.CSSProperties = { - maxHeight: threshold, - overflow: 'hidden' - } - - const handleUnclamp = (): void => { - onChange?.(false) - } - - const handleClamp = (): void => { - onChange?.(true) - } - - const renderControl = (): React.ReactElement | null => { - if (!isClampEnabled) { - return null - } - - if (isClamped) { - return ( - <> -
...
- { - onChange - ?
展开
- : null - } - - ) - } else { - return
收起
- } - } - - return ( -
-
- {renderControl()} -
- ) -} diff --git a/packages/website/src/pages/index/group/[name]/index.tsx b/packages/website/src/pages/index/group/[name]/index.tsx index ab4c27399..7a11af9f3 100644 --- a/packages/website/src/pages/index/group/[name]/index.tsx +++ b/packages/website/src/pages/index/group/[name]/index.tsx @@ -4,13 +4,11 @@ import { useParams, Link as RouterLink } from 'react-router-dom' import { DescriptionClamp, useGroupTopic } from '@bangumi/website/hooks/use-group' import CommonStyles from '../common.module.less' import { render as renderBBCode } from '@bangumi/utils' -import { ClampableContent } from './components/ClampableContent' +import { ClampableContent } from '../components/ClampableContent' import { ReactComponent as RightArrow } from '@bangumi/website/assets/right-arrow.svg' import TopicsTable from './components/TopicsTable' import { useGroupContext } from '../[name]' -const CLAMP_HEIGHT_THRESHOLD = 193 - const GroupHome: React.FC = () => { const { name } = useParams() const groupContext = useGroupContext() @@ -38,7 +36,6 @@ const GroupHome: React.FC = () => { return ( <> void } -export const ClampableContent: React.FC = ({ content, threshold, isClamped, onChange, className }) => { +const CLAMP_HEIGHT_THRESHOLD = 193 + +export const ClampableContent: React.FC = ({ + content, + threshold = CLAMP_HEIGHT_THRESHOLD, + isClamped, + onChange, + className +}) => { const [isClampEnabled, setIsClampedEnable] = React.useState(false) const contentRef = React.useRef(null) @@ -59,7 +67,10 @@ export const ClampableContent: React.FC = ({ content, thr return (
-
+
{renderControl()}
) diff --git a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx index 36c10a65c..40a75568a 100644 --- a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx @@ -6,7 +6,7 @@ import { getGroupForumPage, getUserProfileLink } from '@bangumi/website/utils/pa interface Header { title: string - createdAt: Date + createdAt: string | Date creator: User group: Group } diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index f485c1d97..59e1ef459 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -11,8 +11,6 @@ import { getGroupForumPage } from '@bangumi/website/utils/pages' const { Link } = Typography -const CLAMP_HEIGHT_THRESHOLD = 193 - const { Comment } = Topic const TopicPage: FC = () => { @@ -31,7 +29,7 @@ const TopicPage: FC = () => {
@@ -80,7 +78,6 @@ const TopicPage: FC = () => {
Date: Fri, 18 Nov 2022 00:24:55 +0800 Subject: [PATCH 34/69] refactor --- packages/types/topic.ts | 5 +++++ packages/website/src/pages/index/group/topic/[id]/index.tsx | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 packages/types/topic.ts diff --git a/packages/types/topic.ts b/packages/types/topic.ts new file mode 100644 index 000000000..958b0ec58 --- /dev/null +++ b/packages/types/topic.ts @@ -0,0 +1,5 @@ +import { components } from './types' + +export type Topics = components['schemas']['PrivateTopicDetail'] +export type Comment = components['schemas']['Comment'] +export type Reply = components['schemas']['Comment']['replies'][0] diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 59e1ef459..7e1d36d46 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -15,7 +15,11 @@ const { Comment } = Topic const TopicPage: FC = () => { const { id } = useParams() - const { topicDetail } = useGroupTopic(id!) + if (!id) { + // Todo: ErrorBoundary + throw new Error('topic id is required') + } + const { topicDetail } = useGroupTopic(id) const { user } = useUser() if (!topicDetail) { return null From 25bd8dcb10e26ec7e4cdb9a13e9c4f83b55808e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9E=E6=A5=BD=E5=9D=82=E3=81=BF=E3=81=9A=E3=81=8D?= <45122329+cokemine@users.noreply.github.com> Date: Fri, 18 Nov 2022 00:27:35 +0800 Subject: [PATCH 35/69] Update packages/website/src/pages/index/group/topic/[id]/index.tsx Co-authored-by: Trim21 --- packages/website/src/pages/index/group/topic/[id]/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 7e1d36d46..84862b909 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -17,7 +17,7 @@ const TopicPage: FC = () => { const { id } = useParams() if (!id) { // Todo: ErrorBoundary - throw new Error('topic id is required') + throw new Error('BUG: topic id is required') } const { topicDetail } = useGroupTopic(id) const { user } = useUser() From 8967f0fd8152b10815ec8ceae6aa9d054608b3fc Mon Sep 17 00:00:00 2001 From: Trim21 Date: Sat, 19 Nov 2022 00:02:32 +0800 Subject: [PATCH 36/69] prettier --- packages/design/components/Topic/Comment.tsx | 2 +- packages/website/src/pages/index/group/topic/[id]/index.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 457f7a126..bf1039322 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import type { FC} from 'react'; +import type { FC } from 'react'; import React, { useState } from 'react'; import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons'; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 42807d1f1..35c3670ce 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -20,7 +20,6 @@ import { ClampableContent } from '../../components/ClampableContent'; import GroupTopicHeader from './components/GroupTopicHeader'; import styles from './index.module.less'; - const { Link } = Typography; const { Comment } = Topic; From 888ac074278b33827970307cea18699955482165 Mon Sep 17 00:00:00 2001 From: Trim21 Date: Sat, 19 Nov 2022 00:03:09 +0800 Subject: [PATCH 37/69] prettier --- tsconfig.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index e1275fa68..1d199066e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,9 +18,7 @@ "noEmit": true, "jsx": "react-jsx", "types": ["jest", "vite-plugin-svgr/client", "@testing-library/jest-dom"], - "paths": { - "@bangumi/website/*": ["packages/website/src/*"] - } + "paths": { "@bangumi/website/*": ["packages/website/src/*"] } }, "include": ["./packages", "./jest-setup.ts", ".eslintrc.js", "./packages/design/.storybook/*"] } From ef67c33954d8313d213495fb7d71e85bce1bb05c Mon Sep 17 00:00:00 2001 From: cokemine Date: Sun, 20 Nov 2022 23:12:42 +0800 Subject: [PATCH 38/69] wip --- .eslintrc.js | 2 +- .../design/components/Topic/Comment.stories.tsx | 8 ++++---- packages/design/components/Topic/Comment.tsx | 15 +++++++++------ packages/types/group.ts | 2 ++ packages/types/index.ts | 2 -- packages/types/topic.ts | 2 ++ packages/types/user.ts | 4 +--- packages/website/src/hooks/use-group-topic.ts | 14 +++----------- .../src/pages/index/group/topic/[id]/index.tsx | 4 ++-- 9 files changed, 24 insertions(+), 29 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 68af79c0d..6b222555d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -129,7 +129,7 @@ module.exports = { }, }, { - files: ['*.spec.tsx'], + files: ['*.spec.tsx', '*.stories.tsx'], rules: { '@typescript-eslint/no-unsafe-assignment': 'off', '@typescript-eslint/no-unsafe-argument': 'off', diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index 54cff7a7c..85416d9fd 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -24,7 +24,7 @@ SingleComment.args = { ...singleComment, isReply: false, user: null as any, - created_at: new Date(), + created_at: String(new Date()), floor: 1, }; @@ -35,7 +35,7 @@ CommentWithIcons.args = { isReply: false, is_friend: true, originalPosterId: 1, - created_at: new Date(), + created_at: String(new Date()), floor: 2, }; @@ -44,7 +44,7 @@ CommentWithReplies.args = { ...commentWithReplies, isReply: false, is_friend: false, - created_at: new Date(), + created_at: String(new Date()), floor: 2, } as any; @@ -54,7 +54,7 @@ SelfComment.args = { ...singleComment, isReply: false, is_friend: false, - created_at: new Date(), + created_at: String(new Date()), user: singleComment.creator, floor: 2, }; diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index bf1039322..418c62a9d 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -3,7 +3,7 @@ import type { FC } from 'react'; import React, { useState } from 'react'; import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons'; -import type { Reply, Comment as IComment, User } from '@bangumi/types'; +import type { Reply, Comment as IComment, User } from '@bangumi/types/topic'; import { render as renderBBCode } from '@bangumi/utils'; import Avatar from '../../components/Avatar'; @@ -65,7 +65,7 @@ const Comment: FC = ({ const isSpecial = state === 1 || state === 2 || state === 5; const replies = !isReply ? props.replies : null; const [shouldCollapsed, setShouldCollapsed] = useState( - isSpecial || (isReply && (/[+-]\d+$/.test(text) || isDeleted)), + isSpecial || (isReply && (/[+-]\d+$/.test(text!) || isDeleted)), ); const [showReplyEditor, setShowReplyEditor] = useState(false); @@ -74,6 +74,9 @@ const Comment: FC = ({ 'bgm-comment__header--collapsed': shouldCollapsed, }); + // todo + const url = `https://bgm.tv/${creator.username}`; + if (shouldCollapsed) { let icon = null; switch (state) { @@ -100,10 +103,10 @@ const Comment: FC = ({
{icon} - + {creator.nickname} - +
@@ -119,7 +122,7 @@ const Comment: FC = ({
- + {creator.nickname} {originalPosterId === creator.id ? : null} @@ -133,7 +136,7 @@ const Comment: FC = ({
- +
{showReplyEditor ? ( diff --git a/packages/types/group.ts b/packages/types/group.ts index 6e8c07e95..f85353f6f 100644 --- a/packages/types/group.ts +++ b/packages/types/group.ts @@ -1,5 +1,7 @@ import type { components } from './types'; +export * from './common'; + export type Group = components['schemas']['Group']; export type GroupProfile = components['schemas']['GroupProfile']; export type GroupMember = components['schemas']['GroupMember']; diff --git a/packages/types/index.ts b/packages/types/index.ts index 3867704b3..f40141ed5 100644 --- a/packages/types/index.ts +++ b/packages/types/index.ts @@ -1,6 +1,4 @@ import type { operations } from './types'; -export * from './group'; -export * from './user'; /** * usage: diff --git a/packages/types/topic.ts b/packages/types/topic.ts index 28daa32c1..89c4b3f23 100644 --- a/packages/types/topic.ts +++ b/packages/types/topic.ts @@ -1,5 +1,7 @@ import type { components } from './types'; +export * from './common'; + export type Topics = components['schemas']['PrivateTopicDetail']; export type Comment = components['schemas']['Comment']; export type Reply = components['schemas']['Comment']['replies'][0]; diff --git a/packages/types/user.ts b/packages/types/user.ts index 949590b20..5e576cc4c 100644 --- a/packages/types/user.ts +++ b/packages/types/user.ts @@ -1,6 +1,4 @@ -import type { components } from './types'; - -export type User = components['schemas']['User']; +export * from './common'; export enum UserGroup { Admin = 1, diff --git a/packages/website/src/hooks/use-group-topic.ts b/packages/website/src/hooks/use-group-topic.ts index 1acc9df6f..766378da1 100644 --- a/packages/website/src/hooks/use-group-topic.ts +++ b/packages/website/src/hooks/use-group-topic.ts @@ -8,17 +8,9 @@ type TopicsResp = { group: Group; } & GroupTopics; -interface UseGroupTopic { - topicDetail: TopicsResp; -} - -function useGroupTopic(id: string): UseGroupTopic { - // todo - const { data: { data: topicDetail } = {} } = useSWR( - `/p/groups/-/topics/${id}`, - privateGet, - ); - return { topicDetail }; +function useGroupTopic(id: string): TopicsResp | undefined { + const { data: topicDetail } = useSWR(`/p/groups/-/topics/${id}`, privateGet); + return topicDetail; } export default useGroupTopic; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 35c3670ce..76b9264d7 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -30,7 +30,7 @@ const TopicPage: FC = () => { // Todo: ErrorBoundary throw new Error('BUG: topic id is required'); } - const { topicDetail } = useGroupTopic(id); + const topicDetail = useGroupTopic(id); const { user } = useUser(); if (!topicDetail) { return null; @@ -44,7 +44,7 @@ const TopicPage: FC = () => {
From 5c90032d6b53d3bbc5d641d28a7266eb0e149dce Mon Sep 17 00:00:00 2001 From: cokemine Date: Sun, 20 Nov 2022 23:19:59 +0800 Subject: [PATCH 39/69] fix build --- packages/website/src/hooks/use-group.ts | 2 +- .../src/pages/index/group/components/ClampableContent.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/website/src/hooks/use-group.ts b/packages/website/src/hooks/use-group.ts index 819f23ef1..1981c5b80 100644 --- a/packages/website/src/hooks/use-group.ts +++ b/packages/website/src/hooks/use-group.ts @@ -32,7 +32,7 @@ export function useGroupTopic(name: string, pagination?: Partial) { privateGet, { suspense: true }, ); - return recentTopicsResp; + return recentTopicsResp!; } export function useGroup(name: string): UseGroupRet { diff --git a/packages/website/src/pages/index/group/components/ClampableContent.tsx b/packages/website/src/pages/index/group/components/ClampableContent.tsx index e23a0d18a..ac085b5ce 100644 --- a/packages/website/src/pages/index/group/components/ClampableContent.tsx +++ b/packages/website/src/pages/index/group/components/ClampableContent.tsx @@ -39,11 +39,11 @@ export const ClampableContent: React.FC = ({ }; const handleUnclamp = (): void => { - onChange(false); + onChange?.(false); }; const handleClamp = (): void => { - onChange(true); + onChange?.(true); }; const renderControl = (): React.ReactElement | null => { From f5f79cf06a2c49d5896402751f8bb19b3d4c3d87 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 13:46:43 +0800 Subject: [PATCH 40/69] wip --- .../src/pages/index/group/topic/[id]/index.module.less | 4 +++- packages/website/src/pages/index/group/topic/[id]/index.tsx | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/website/src/pages/index/group/topic/[id]/index.module.less b/packages/website/src/pages/index/group/topic/[id]/index.module.less index 960989749..9f9c4dba5 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/index/group/topic/[id]/index.module.less @@ -46,12 +46,14 @@ margin-left: 10px; > a { + display: block; + margin-bottom: 6px; font-weight: 600; font-size: 16px; line-height: 22px; } - > div { + > span { font-size: 12px; line-height: 17px; color: @gray-60; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 76b9264d7..10c13778f 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -67,7 +67,7 @@ const TopicPage: FC = () => { {/* Reply BBCode Editor */} {!isClosed && user && (
- +
)} @@ -78,7 +78,7 @@ const TopicPage: FC = () => {
{group.title} -
{`${group.total_members} 名成员`}
+ {`${group.total_members} 名成员`}
Date: Mon, 21 Nov 2022 13:57:49 +0800 Subject: [PATCH 41/69] update styles --- .../pages/index/group/components/ClampableContent.tsx | 10 ++++++---- .../src/pages/index/group/topic/[id]/index.module.less | 9 +++------ .../website/src/pages/index/group/topic/[id]/index.tsx | 4 +++- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/website/src/pages/index/group/components/ClampableContent.tsx b/packages/website/src/pages/index/group/components/ClampableContent.tsx index ac085b5ce..2b3755bc3 100644 --- a/packages/website/src/pages/index/group/components/ClampableContent.tsx +++ b/packages/website/src/pages/index/group/components/ClampableContent.tsx @@ -10,7 +10,8 @@ export interface ClampableContentProps { threshold?: number; content: string; isClamped: boolean; - className?: string; + containerClassName?: string; + contentClassName?: string; onChange?: (isClamped: boolean) => void; } @@ -21,7 +22,8 @@ export const ClampableContent: React.FC = ({ threshold = CLAMP_HEIGHT_THRESHOLD, isClamped, onChange, - className, + containerClassName, + contentClassName, }) => { const [isClampEnabled, setIsClampedEnable] = React.useState(false); const contentRef = React.useRef(null); @@ -74,10 +76,10 @@ export const ClampableContent: React.FC = ({ }; return ( -
+
diff --git a/packages/website/src/pages/index/group/topic/[id]/index.module.less b/packages/website/src/pages/index/group/topic/[id]/index.module.less index 9f9c4dba5..b36d3ae38 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/index/group/topic/[id]/index.module.less @@ -17,12 +17,6 @@ width: 427px; } -.content { - font-size: 16px; - line-height: 24px; - color: @gray-100; -} - .replies { margin-top: 40px; } @@ -62,6 +56,9 @@ .groupDescription { margin-top: 20px; +} + +.groupDescriptionContent { font-size: 14px; line-height: 20px; color: @gray-80; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 10c13778f..60c07c1eb 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -83,7 +83,9 @@ const TopicPage: FC = () => {
From 85d8b8ddefe2b5786f34f02ee30e50c36c210010 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 14:48:20 +0800 Subject: [PATCH 42/69] update story --- .eslintrc.js | 3 +- .../components/Avatar/Avatar.stories.tsx | 2 +- .../components/Topic/Comment.stories.tsx | 34 ++++++++++++------- .../__test__/fixtures/commentWithReplies.json | 12 +++---- .../__test__/fixtures/singleComment.json | 6 ++-- .../__test__/fixtures/specialComment.json | 21 ++++++++++++ 6 files changed, 55 insertions(+), 23 deletions(-) create mode 100644 packages/design/components/Topic/__test__/fixtures/specialComment.json diff --git a/.eslintrc.js b/.eslintrc.js index 6b222555d..727845e3f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -129,11 +129,12 @@ module.exports = { }, }, { - files: ['*.spec.tsx', '*.stories.tsx'], + files: ['*.spec.tsx', '*.test.tsx', '*.stories.tsx'], rules: { '@typescript-eslint/no-unsafe-assignment': 'off', '@typescript-eslint/no-unsafe-argument': 'off', '@typescript-eslint/no-unsafe-member-access': 'off', + '@typescript-eslint/no-explicit-any': 'off', }, }, ], diff --git a/packages/design/components/Avatar/Avatar.stories.tsx b/packages/design/components/Avatar/Avatar.stories.tsx index 528134097..6cf885725 100644 --- a/packages/design/components/Avatar/Avatar.stories.tsx +++ b/packages/design/components/Avatar/Avatar.stories.tsx @@ -7,7 +7,7 @@ const componentMeta: ComponentMeta = { title: 'modern/Avatar', component: Avatar, args: { - src: 'https://lain.bgm.tv/pic/user/l/000/00/00/1.jpg', + src: 'https://lain.bgm.tv/pic/user/l/icon.jpg', size: 'small', }, }; diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index 85416d9fd..e8e0bf5c7 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -3,6 +3,7 @@ import React from 'react'; import commentWithReplies from './__test__/fixtures/commentWithReplies.json'; import singleComment from './__test__/fixtures/singleComment.json'; +import specialComment from './__test__/fixtures/specialComment.json'; import Comment from './Comment'; export default { @@ -18,26 +19,31 @@ const Template: ComponentStory = (args) => { ); }; -export const SingleComment = Template.bind({}); - -SingleComment.args = { - ...singleComment, - isReply: false, - user: null as any, - created_at: String(new Date()), - floor: 1, +const SpecialCommentTemplate: ComponentStory = (args) => { + // 1 关闭 2 重开 5 下沉 + const states = [1, 2, 5]; + return ( +
+ {states.map((state, idx) => ( +
+

State: {state}

+ +
+ ))} +
+ ); }; -export const CommentWithIcons = Template.bind({}); +export const SingleComment = Template.bind({}); -CommentWithIcons.args = { +SingleComment.args = { ...singleComment, isReply: false, is_friend: true, originalPosterId: 1, created_at: String(new Date()), floor: 2, -}; +} as any; export const CommentWithReplies = Template.bind({}); CommentWithReplies.args = { @@ -57,4 +63,8 @@ SelfComment.args = { created_at: String(new Date()), user: singleComment.creator, floor: 2, -}; +} as any; + +export const SpecialComment = SpecialCommentTemplate.bind({}); + +SpecialComment.args = specialComment as any; diff --git a/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json b/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json index 009b01d97..538c8a087 100644 --- a/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json +++ b/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json @@ -3,9 +3,9 @@ "text": "123456789~~~", "creator": { "avatar": { - "large": "https://lain.bgm.tv/pic/user/l/000/42/29/422922.jpg?r=1602346224", - "medium": "https://lain.bgm.tv/pic/user/m/000/42/29/422922.jpg?r=1602346224", - "small": "https://lain.bgm.tv/pic/user/s/000/42/29/422922.jpg?r=1602346224" + "large": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "medium": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "small": "https://lain.bgm.tv/pic/user/l/icon.jpg" }, "sign": "我是签名", "url": "https://bgm.tv/user/123456789", @@ -20,9 +20,9 @@ "text": "123456789~~~", "creator": { "avatar": { - "large": "https://lain.bgm.tv/pic/user/l/000/42/29/422922.jpg?r=1602346224", - "medium": "https://lain.bgm.tv/pic/user/m/000/42/29/422922.jpg?r=1602346224", - "small": "https://lain.bgm.tv/pic/user/s/000/42/29/422922.jpg?r=1602346224" + "large": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "medium": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "small": "https://lain.bgm.tv/pic/user/l/icon.jpg" }, "sign": "我是签名", "url": "https://bgm.tv/user/123456789", diff --git a/packages/design/components/Topic/__test__/fixtures/singleComment.json b/packages/design/components/Topic/__test__/fixtures/singleComment.json index 445067404..4f18da52e 100644 --- a/packages/design/components/Topic/__test__/fixtures/singleComment.json +++ b/packages/design/components/Topic/__test__/fixtures/singleComment.json @@ -3,9 +3,9 @@ "text": "123456789~~~", "creator": { "avatar": { - "large": "https://lain.bgm.tv/pic/user/l/000/42/29/422922.jpg?r=1602346224", - "medium": "https://lain.bgm.tv/pic/user/m/000/42/29/422922.jpg?r=1602346224", - "small": "https://lain.bgm.tv/pic/user/s/000/42/29/422922.jpg?r=1602346224" + "large": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "medium": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "small": "https://lain.bgm.tv/pic/user/l/icon.jpg" }, "sign": "我是签名", "url": "https://bgm.tv/user/123456789", diff --git a/packages/design/components/Topic/__test__/fixtures/specialComment.json b/packages/design/components/Topic/__test__/fixtures/specialComment.json new file mode 100644 index 000000000..d8bf5585a --- /dev/null +++ b/packages/design/components/Topic/__test__/fixtures/specialComment.json @@ -0,0 +1,21 @@ +{ + "created_at": "2022-07-17T04:08:38Z", + "text": "", + "creator": { + "avatar": { + "large": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "medium": "https://lain.bgm.tv/pic/user/m/icon.jpg", + "small": "https://lain.bgm.tv/pic/user/s/icon.jpg" + }, + "sign": "我是签名", + "url": "https://bgm.tv/user/123456789", + "username": "123456789", + "nickname": "用户", + "id": 123456789, + "user_group": 0 + }, + "replies": [], + "id": 2056216, + "is_friend": false, + "state": 0 +} From 50d963bbcc61a3b9378910765d26bb2840b2c726 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 14:55:18 +0800 Subject: [PATCH 43/69] refactor: move pages utils to @bangumi/utils --- packages/design/components/Topic/Comment.tsx | 4 ++-- packages/{website/src => }/utils/pages.ts | 0 packages/website/src/pages/components/UserHome.tsx | 2 +- .../src/pages/index/group/[name]/components/TopicsTable.tsx | 2 +- .../website/src/pages/index/group/components/UserCard.tsx | 2 +- .../index/group/topic/[id]/components/GroupTopicHeader.tsx | 2 +- packages/website/src/pages/index/group/topic/[id]/index.tsx | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) rename packages/{website/src => }/utils/pages.ts (100%) diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 418c62a9d..a5854f4ca 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -5,6 +5,7 @@ import React, { useState } from 'react'; import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons'; import type { Reply, Comment as IComment, User } from '@bangumi/types/topic'; import { render as renderBBCode } from '@bangumi/utils'; +import { getUserProfileLink } from '@bangumi/utils/pages'; import Avatar from '../../components/Avatar'; import Button from '../../components/Button'; @@ -74,8 +75,7 @@ const Comment: FC = ({ 'bgm-comment__header--collapsed': shouldCollapsed, }); - // todo - const url = `https://bgm.tv/${creator.username}`; + const url = getUserProfileLink(creator.username); if (shouldCollapsed) { let icon = null; diff --git a/packages/website/src/utils/pages.ts b/packages/utils/pages.ts similarity index 100% rename from packages/website/src/utils/pages.ts rename to packages/utils/pages.ts diff --git a/packages/website/src/pages/components/UserHome.tsx b/packages/website/src/pages/components/UserHome.tsx index e2a1fd600..4fbb4502d 100644 --- a/packages/website/src/pages/components/UserHome.tsx +++ b/packages/website/src/pages/components/UserHome.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Typography } from '@bangumi/design'; +import { getUserProfileLink } from '@bangumi/utils/pages'; import { useUser } from '../../hooks/use-user'; -import { getUserProfileLink } from '../../utils/pages'; import styles from './UserHome.module.less'; const { Link } = Typography; diff --git a/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx b/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx index 76d31abe9..2af5f7b81 100644 --- a/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx +++ b/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Typography } from '@bangumi/design'; import type { Topic } from '@bangumi/types/common'; -import { getGroupTopicLink, getUserProfileLink } from '@bangumi/website/utils/pages'; +import { getGroupTopicLink, getUserProfileLink } from '@bangumi/utils/pages'; import styles from './TopicsTable.module.less'; diff --git a/packages/website/src/pages/index/group/components/UserCard.tsx b/packages/website/src/pages/index/group/components/UserCard.tsx index 32e985199..61914a1a9 100644 --- a/packages/website/src/pages/index/group/components/UserCard.tsx +++ b/packages/website/src/pages/index/group/components/UserCard.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Image, Typography } from '@bangumi/design'; -import { getUserProfileLink } from '@bangumi/website/utils/pages'; +import { getUserProfileLink } from '@bangumi/utils/pages'; import styles from './UserCard.module.less'; diff --git a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx index 2d6310419..b2450bb5a 100644 --- a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Avatar, Typography, Topic } from '@bangumi/design'; import type { User, Group } from '@bangumi/types/group'; -import { getGroupForumPage, getUserProfileLink } from '@bangumi/website/utils/pages'; +import { getGroupForumPage, getUserProfileLink } from '@bangumi/utils/pages'; import styles from './GroupTopicHeader.module.less'; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 60c07c1eb..d5f1ee7fa 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -12,9 +12,9 @@ import { Topic, } from '@bangumi/design'; import { render as renderBBCode } from '@bangumi/utils'; +import { getGroupForumPage } from '@bangumi/utils/pages'; import useGroupTopic from '@bangumi/website/hooks/use-group-topic'; import { useUser } from '@bangumi/website/hooks/use-user'; -import { getGroupForumPage } from '@bangumi/website/utils/pages'; import { ClampableContent } from '../../components/ClampableContent'; import GroupTopicHeader from './components/GroupTopicHeader'; From b30f76c3dc05893b0ea7db1e44674f4ea1c3e7e1 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 15:07:35 +0800 Subject: [PATCH 44/69] update story --- .../design/components/Topic/Comment.stories.tsx | 13 ++++++++++--- .../components/Topic/__test__/Comment.spec.tsx | 12 ++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 packages/design/components/Topic/__test__/Comment.spec.tsx diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index e8e0bf5c7..e636becd0 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -12,6 +12,7 @@ export default { }; const Template: ComponentStory = (args) => { + const states = [1, 2, 5]; return (
@@ -20,8 +21,8 @@ const Template: ComponentStory = (args) => { }; const SpecialCommentTemplate: ComponentStory = (args) => { - // 1 关闭 2 重开 5 下沉 - const states = [1, 2, 5]; + // 1 关闭 2 重开 5 下沉 6 被用户删除 7 违反社区指导原则，已被删除 + const states = [1, 2, 5, 6, 7]; return (
{states.map((state, idx) => ( @@ -67,4 +68,10 @@ SelfComment.args = { export const SpecialComment = SpecialCommentTemplate.bind({}); -SpecialComment.args = specialComment as any; +SpecialComment.args = { + ...specialComment, + isReply: false, + is_friend: false, + created_at: String(new Date()), + floor: 2, +} as any; diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx new file mode 100644 index 000000000..64a353036 --- /dev/null +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -0,0 +1,12 @@ +import { render } from '@testing-library/react'; +import React from 'react'; + +import Comment from '../Comment'; + +describe('Comment', () => { + it('should render', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); From 03d6efa4a164e4d47a9e837a15cc133d2dcc94c1 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 15:18:20 +0800 Subject: [PATCH 45/69] update --- packages/design/components/Topic/Comment.tsx | 8 ++------ .../components/Topic/__test__/Comment.spec.tsx | 9 +-------- packages/design/package.json | 4 +++- pnpm-lock.yaml | 16 +++++++++++++++- 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index a5854f4ca..2f0233ef4 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames'; +import { unescape } from 'lodash-es'; import type { FC } from 'react'; import React, { useState } from 'react'; @@ -127,12 +128,7 @@ const Comment: FC = ({ {originalPosterId === creator.id ? : null} {isFriend ? : null} - {!isReply ? ( - // Todo: XSS ? - creator.sign ? ( - - ) : null - ) : null} + {!isReply && creator.sign ? {`// ${unescape(creator.sign)}`} : null}
diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx index 64a353036..c10e2df40 100644 --- a/packages/design/components/Topic/__test__/Comment.spec.tsx +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -1,12 +1,5 @@ -import { render } from '@testing-library/react'; -import React from 'react'; - -import Comment from '../Comment'; - describe('Comment', () => { it('should render', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); + expect(true).toBe(true); }); }); diff --git a/packages/design/package.json b/packages/design/package.json index eb97bf1d4..ca2167c2e 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -5,19 +5,21 @@ "main": "index.tsx", "dependencies": { "dayjs": "^1.11.3", + "lodash-es": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "reset-css": "^5.0.1" }, "devDependencies": { "@bangumi/icons": "workspace:*", - "@bangumi/utils": "workspace:*", "@bangumi/types": "workspace:*", + "@bangumi/utils": "workspace:*", "@storybook/addon-essentials": "^6.5.13", "@storybook/addon-links": "^6.5.13", "@storybook/builder-vite": "^0.2.5", "@storybook/react": "^6.5.13", "@testing-library/react": "^13.4.0", + "@types/lodash-es": "^4.17.6", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", "classnames": "^2.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d89fcf6a3..3ce9460e4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,11 +98,13 @@ importers: '@storybook/builder-vite': ^0.2.5 '@storybook/react': ^6.5.13 '@testing-library/react': ^13.4.0 + '@types/lodash-es': ^4.17.6 '@types/react': ^18.0.25 '@types/react-dom': ^18.0.9 classnames: ^2.3.2 dayjs: ^1.11.3 less: ^4.1.3 + lodash-es: ^4.17.21 react: ^18.2.0 react-dom: ^18.2.0 react-router-dom: ^6.4.3 @@ -112,6 +114,7 @@ importers: vite-plugin-svgr: ^2.2.2 dependencies: dayjs: 1.11.6 + lodash-es: 4.17.21 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 reset-css: 5.0.1 @@ -124,6 +127,7 @@ importers: '@storybook/builder-vite': 0.2.5_nmkzzyqwffs4h6amewtih5qz4i '@storybook/react': 6.5.13_yalvw3r2waubxycyb7k7qsruca '@testing-library/react': 13.4.0_biqbaboplfbrettd7655fr4n2y + '@types/lodash-es': 4.17.6 '@types/react': 18.0.25 '@types/react-dom': 18.0.9 classnames: 2.3.2 @@ -5544,6 +5548,12 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/lodash-es/4.17.6: + resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==} + dependencies: + '@types/lodash': 4.14.189 + dev: true + /@types/lodash/4.14.189: resolution: {integrity: sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA==} dev: true @@ -5859,7 +5869,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.2 magic-string: 0.26.7 react-refresh: 0.14.0 - vite: 3.2.3 + vite: 3.2.3_less@4.1.3 transitivePeerDependencies: - supports-color dev: true @@ -11941,6 +11951,10 @@ packages: p-locate: 5.0.0 dev: true + /lodash-es/4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + dev: false + /lodash.debounce/4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} From 06b9981b0d6241d55436b89293c7042794f57597 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 15:50:08 +0800 Subject: [PATCH 46/69] update --- packages/design/components/Topic/CommentInfo.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/design/components/Topic/CommentInfo.tsx b/packages/design/components/Topic/CommentInfo.tsx index e63260d9f..3728e0f8b 100644 --- a/packages/design/components/Topic/CommentInfo.tsx +++ b/packages/design/components/Topic/CommentInfo.tsx @@ -7,11 +7,16 @@ export interface CommentInfoProps { createdAt: string | Date; } +const spaces = '\u00A0'.repeat(2); + const CommentInfo: React.FC = ({ floor, createdAt, isSpecial = false }) => { const date = dayjs(createdAt).format('YYYY-M-D HH:MM'); return !isSpecial ? ( - #{floor}  |  {date}  |  ! + #{floor} + {spaces}|{spaces} + {date} + {spaces}|{spaces}! ) : ( {date} From 233653e4e5658f6d1d7e24c0cb2dbaecb985e213 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 16:12:59 +0800 Subject: [PATCH 47/69] fix and add tests --- .../design/components/Topic/CommentInfo.tsx | 2 +- .../Topic/__test__/CommentInfo.spec.tsx | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 packages/design/components/Topic/__test__/CommentInfo.spec.tsx diff --git a/packages/design/components/Topic/CommentInfo.tsx b/packages/design/components/Topic/CommentInfo.tsx index 3728e0f8b..d3a8dacd4 100644 --- a/packages/design/components/Topic/CommentInfo.tsx +++ b/packages/design/components/Topic/CommentInfo.tsx @@ -10,7 +10,7 @@ export interface CommentInfoProps { const spaces = '\u00A0'.repeat(2); const CommentInfo: React.FC = ({ floor, createdAt, isSpecial = false }) => { - const date = dayjs(createdAt).format('YYYY-M-D HH:MM'); + const date = dayjs(createdAt).format('YYYY-M-D HH:mm'); return !isSpecial ? ( #{floor} diff --git a/packages/design/components/Topic/__test__/CommentInfo.spec.tsx b/packages/design/components/Topic/__test__/CommentInfo.spec.tsx new file mode 100644 index 000000000..86ee83c05 --- /dev/null +++ b/packages/design/components/Topic/__test__/CommentInfo.spec.tsx @@ -0,0 +1,18 @@ +import { render } from '@testing-library/react'; +import React from 'react'; + +import CommentInfo from '../CommentInfo'; + +it('special comment should not render floor', () => { + const createdAt = '2022-09-22T06:03:21Z'; + const { container } = render(); + const el = container.getElementsByClassName('bgm-topic__commentInfo')[0]; + expect(el!.textContent).toBe('2022-9-22 06:03'); +}); + +it('normal comment should render floor', () => { + const createdAt = '2022-09-22T06:03:21Z'; + const { container } = render(); + const el = container.getElementsByClassName('bgm-topic__commentInfo')[0]; + expect(el!.textContent).toBe('#1  |  2022-9-22 06:03  |  !'); +}); From a58c1a439a9975698b426b77c5b28510f0975b27 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 17:15:48 +0800 Subject: [PATCH 48/69] wip: add tests --- jest.config.js | 5 +- .../components/Topic/Comment.stories.tsx | 7 +- .../Topic/__test__/Comment.spec.tsx | 87 +++++- .../__snapshots__/Comment.spec.tsx.snap | 254 ++++++++++++++++++ ...ntWithReplies.json => repliesComment.json} | 0 .../Topic/__test__/fixtures/user.json | 13 + 6 files changed, 357 insertions(+), 9 deletions(-) create mode 100644 packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap rename packages/design/components/Topic/__test__/fixtures/{commentWithReplies.json => repliesComment.json} (100%) create mode 100644 packages/design/components/Topic/__test__/fixtures/user.json diff --git a/jest.config.js b/jest.config.js index dc17a5259..da158943f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -177,10 +177,7 @@ module.exports = { // transform: undefined, // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - // transformIgnorePatterns: [ - // "/node_modules/", - // "\\.pnp\\.[^\\/]+$" - // ], + transformIgnorePatterns: ['/!node_modules\\/lodash-es/'], // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them // unmockedModulePathPatterns: undefined, diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index e636becd0..49375ca32 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -1,9 +1,10 @@ import type { ComponentStory } from '@storybook/react'; import React from 'react'; -import commentWithReplies from './__test__/fixtures/commentWithReplies.json'; +import repliesComment from './__test__/fixtures/repliesComment.json'; import singleComment from './__test__/fixtures/singleComment.json'; import specialComment from './__test__/fixtures/specialComment.json'; +import mockedCurrentUser from './__test__/fixtures/user.json'; import Comment from './Comment'; export default { @@ -48,7 +49,7 @@ SingleComment.args = { export const CommentWithReplies = Template.bind({}); CommentWithReplies.args = { - ...commentWithReplies, + ...repliesComment, isReply: false, is_friend: false, created_at: String(new Date()), @@ -62,7 +63,7 @@ SelfComment.args = { isReply: false, is_friend: false, created_at: String(new Date()), - user: singleComment.creator, + user: mockedCurrentUser, floor: 2, } as any; diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx index c10e2df40..4d2f22d68 100644 --- a/packages/design/components/Topic/__test__/Comment.spec.tsx +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -1,5 +1,88 @@ -describe('Comment', () => { +import { render } from '@testing-library/react'; +import React from 'react'; + +import type { CommentProps } from '../Comment'; +import Comment from '../Comment'; +import repliesComment from './fixtures/repliesComment.json'; +import singleComment from './fixtures/singleComment.json'; +import mockedCurrentUser from './fixtures/user.json'; + +function buildProps( + isReply = false, + comment?: any, + floor = '233', + originalPosterId = 233, + user = mockedCurrentUser, +) { + const reply = repliesComment.replies[0]; + const mockedComment = comment ?? (isReply ? reply : singleComment); + return { + ...mockedComment, + floor, + originalPosterId, + user, + isReply, + } as unknown as CommentProps; +} + +describe('Normal Comment', () => { it('should render', () => { - expect(true).toBe(true); + const props = buildProps(); + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should render with reply', () => { + const props = buildProps(false, repliesComment); + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('reply should have reply styles', () => { + const props = buildProps(true); + const { container } = render(); + // should have reply styles + expect(container.getElementsByClassName('bgm-comment__header--reply').length).toBe(1); + + // should not have collapsed styles + expect(container.getElementsByClassName('bgm-comment__header--collapsed').length).toBe(0); + }); + + it('reply end with +1/-1 reply should be collapsed', () => { + const props = buildProps(true); + const { container: container1 } = render(); + expect(container1.getElementsByClassName('bgm-comment__header--collapsed').length).toBe(1); + + const { container: container2 } = render(); + expect(container2.getElementsByClassName('bgm-comment__header--collapsed').length).toBe(1); + + // should not have collapsed styles if is not reply + const { container: container3 } = render(); + expect(container3.getElementsByClassName('bgm-comment__header--collapsed').length).toBe(0); + }); + + it('show icons', () => { + const props = buildProps(false); + const { container: container1 } = render( + , + ); + expect(container1.getElementsByClassName('creator-info')[0]!.childNodes).toHaveLength(3); + + const { container: container2 } = render( + , + ); + expect(container2.getElementsByClassName('creator-info')[0]!.childNodes).toHaveLength(3); + + const { container: container3 } = render(); + expect(container3.getElementsByClassName('creator-info')[0]!.childNodes).toHaveLength(4); + }); + + it('show edit button if current user is comment creator', () => { + const user = mockedCurrentUser; + user.id = 1; + const props = buildProps(false, singleComment, '233', 233, user); + const { getByText } = render(); + expect(getByText('编辑')).toBeInTheDocument(); + expect(getByText('删除')).toBeInTheDocument(); }); }); diff --git a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap new file mode 100644 index 000000000..58e37301f --- /dev/null +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -0,0 +1,254 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Normal Comment should render 1`] = ` +
+
+
+
+ +
+
+
+ +
+ + 用户 + + + // 我是签名 + +
+ + # + 233 +    + | +    + 2022-9-22 06:03 +    + | +    + ! + + +
+ 123456789~~~ +
+
+
+ + + + +
+
+
+
+
+`; + +exports[`Normal Comment should render with reply 1`] = ` +
+
+
+
+ +
+
+
+ +
+ + 用户 + + + // 我是签名 + +
+ + # + 233 +    + | +    + 2022-9-22 06:03 +    + | +    + ! + + +
+ 123456789~~~ +
+
+
+ + + + +
+
+
+
+
+
+ +
+
+
+ +
+ + 用户 + +
+ + # + 233-1 +    + | +    + 2022-9-22 06:03 +    + | +    + ! + + +
+ 123456789~~~ +
+
+
+ + + + +
+
+
+
+
+
+`; diff --git a/packages/design/components/Topic/__test__/fixtures/commentWithReplies.json b/packages/design/components/Topic/__test__/fixtures/repliesComment.json similarity index 100% rename from packages/design/components/Topic/__test__/fixtures/commentWithReplies.json rename to packages/design/components/Topic/__test__/fixtures/repliesComment.json diff --git a/packages/design/components/Topic/__test__/fixtures/user.json b/packages/design/components/Topic/__test__/fixtures/user.json new file mode 100644 index 000000000..3f834be7e --- /dev/null +++ b/packages/design/components/Topic/__test__/fixtures/user.json @@ -0,0 +1,13 @@ +{ + "avatar": { + "large": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "medium": "https://lain.bgm.tv/pic/user/l/icon.jpg", + "small": "https://lain.bgm.tv/pic/user/l/icon.jpg" + }, + "sign": "我是签名", + "url": "https://bgm.tv/user/123456789", + "username": "123456789", + "nickname": "用户", + "id": 1, + "user_group": 11 +} From 8affaf11ed39b8bc1a7c30b87654142bdc88c4ff Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 17:49:14 +0800 Subject: [PATCH 49/69] update tests --- .../components/Topic/Comment.stories.tsx | 4 ++- .../Topic/__test__/Comment.spec.tsx | 19 +++++++++--- .../__snapshots__/Comment.spec.tsx.snap | 30 ------------------- .../Topic/__test__/fixtures/user.json | 2 +- 4 files changed, 19 insertions(+), 36 deletions(-) diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index 49375ca32..124243c5d 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -58,12 +58,14 @@ CommentWithReplies.args = { export const SelfComment = Template.bind({}); +const selfUser = { ...mockedCurrentUser, id: 1 }; + SelfComment.args = { ...singleComment, isReply: false, is_friend: false, created_at: String(new Date()), - user: mockedCurrentUser, + user: selfUser, floor: 2, } as any; diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx index 4d2f22d68..7954ec1b4 100644 --- a/packages/design/components/Topic/__test__/Comment.spec.tsx +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -1,4 +1,4 @@ -import { render } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import type { CommentProps } from '../Comment'; @@ -77,12 +77,23 @@ describe('Normal Comment', () => { expect(container3.getElementsByClassName('creator-info')[0]!.childNodes).toHaveLength(4); }); - it('show edit button if current user is comment creator', () => { - const user = mockedCurrentUser; - user.id = 1; + it('show edit and delete button if current user is comment creator', () => { + const user = { ...mockedCurrentUser, id: 1 }; const props = buildProps(false, singleComment, '233', 233, user); const { getByText } = render(); expect(getByText('编辑')).toBeInTheDocument(); expect(getByText('删除')).toBeInTheDocument(); }); + + it('click reply button should show editor form', () => { + const props = buildProps(false); + const { getByText, container } = render(); + expect(container.getElementsByClassName('bgm-editor__form').length).toBe(0); + + fireEvent.click(getByText('回复')); + expect(container.getElementsByClassName('bgm-editor__form').length).toBe(1); + + fireEvent.click(getByText('取消')); + expect(container.getElementsByClassName('bgm-editor__form').length).toBe(0); + }); }); diff --git a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap index 58e37301f..cb4c4b838 100644 --- a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -70,16 +70,6 @@ exports[`Normal Comment should render 1`] = ` > +1 - -
@@ -157,16 +147,6 @@ exports[`Normal Comment should render with reply 1`] = ` > +1 - -
@@ -235,16 +215,6 @@ exports[`Normal Comment should render with reply 1`] = ` > +1 - -
diff --git a/packages/design/components/Topic/__test__/fixtures/user.json b/packages/design/components/Topic/__test__/fixtures/user.json index 3f834be7e..9821314dc 100644 --- a/packages/design/components/Topic/__test__/fixtures/user.json +++ b/packages/design/components/Topic/__test__/fixtures/user.json @@ -8,6 +8,6 @@ "url": "https://bgm.tv/user/123456789", "username": "123456789", "nickname": "用户", - "id": 1, + "id": 10, "user_group": 11 } From 9916249ec5bb9934196fafae719bd7d33d2161f7 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 17:56:56 +0800 Subject: [PATCH 50/69] add tests --- .../Topic/__test__/Comment.spec.tsx | 53 ++-- .../__snapshots__/Comment.spec.tsx.snap | 264 ++++++++++++++++++ 2 files changed, 299 insertions(+), 18 deletions(-) diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx index 7954ec1b4..eee7dcf79 100644 --- a/packages/design/components/Topic/__test__/Comment.spec.tsx +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -5,27 +5,28 @@ import type { CommentProps } from '../Comment'; import Comment from '../Comment'; import repliesComment from './fixtures/repliesComment.json'; import singleComment from './fixtures/singleComment.json'; +import specialComment from './fixtures/specialComment.json'; import mockedCurrentUser from './fixtures/user.json'; -function buildProps( - isReply = false, - comment?: any, - floor = '233', - originalPosterId = 233, - user = mockedCurrentUser, -) { - const reply = repliesComment.replies[0]; - const mockedComment = comment ?? (isReply ? reply : singleComment); - return { - ...mockedComment, - floor, - originalPosterId, - user, - isReply, - } as unknown as CommentProps; -} - describe('Normal Comment', () => { + function buildProps( + isReply = false, + comment?: any, + floor = '233', + originalPosterId = 233, + user = mockedCurrentUser, + ) { + const reply = repliesComment.replies[0]; + const mockedComment = comment ?? (isReply ? reply : singleComment); + return { + ...mockedComment, + floor, + originalPosterId, + user, + isReply, + } as unknown as CommentProps; + } + it('should render', () => { const props = buildProps(); const { container } = render(); @@ -97,3 +98,19 @@ describe('Normal Comment', () => { expect(container.getElementsByClassName('bgm-editor__form').length).toBe(0); }); }); + +// 1 关闭 2 重开 5 下沉 6 被用户删除 7 违反社区指导原则，已被删除 +describe('Special Comment', () => { + function buildProps(state: number) { + return { + ...specialComment, + state, + } as unknown as CommentProps; + } + + it.each([1, 2, 5, 6, 7])('should render state is %d', (state) => { + const props = buildProps(state); + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap index cb4c4b838..1f93ca204 100644 --- a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -222,3 +222,267 @@ exports[`Normal Comment should render with reply 1`] = `
`; + +exports[`Special Comment should render state is 1 1`] = ` +
+
+ +
+
+ + 用户 + +
+ 关闭了该主题 +
+
+ + 2022-7-17 04:08 + + +
+
+`; + +exports[`Special Comment should render state is 2 1`] = ` +
+
+ +
+
+ + 用户 + +
+ 重新开启了该主题 +
+
+ + 2022-7-17 04:08 + + +
+
+`; + +exports[`Special Comment should render state is 5 1`] = ` +
+
+ +
+
+ + 用户 + +
+ 下沉了该主题 +
+
+ + 2022-7-17 04:08 + + +
+
+`; + +exports[`Special Comment should render state is 6 1`] = ` +
+
+
+
+ +
+
+
+ +
+ + 用户 + + + // 我是签名 + +
+ + # +    + | +    + 2022-7-17 04:08 +    + | +    + ! + + +
+ 内容已被用户删除 +
+
+
+ + +
+
+
+
+
+`; + +exports[`Special Comment should render state is 7 1`] = ` +
+
+
+
+ +
+
+
+ +
+ + 用户 + + + // 我是签名 + +
+ + # +    + | +    + 2022-7-17 04:08 +    + | +    + ! + + +
+ 内容因违反「 + + 社区指导原则 + + 」已被删除 +
+
+
+ + +
+
+
+
+
+`; From 1c0cdd192cfcb3c31e364305add5e4f9f5f080c7 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 20:10:18 +0800 Subject: [PATCH 51/69] update --- jest.config.js | 2 +- .../components/Topic/Comment.stories.tsx | 24 +- .../Topic/__test__/Comment.spec.tsx | 9 +- .../__snapshots__/Comment.spec.tsx.snap | 285 ++++++------------ .../src/pages/index/group/[name]/index.tsx | 1 + .../group/components/ClampableContent.tsx | 6 +- 6 files changed, 109 insertions(+), 218 deletions(-) diff --git a/jest.config.js b/jest.config.js index da158943f..4d584f39f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -177,7 +177,7 @@ module.exports = { // transform: undefined, // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - transformIgnorePatterns: ['/!node_modules\\/lodash-es/'], + transformIgnorePatterns: ['/node_modules/.pnpm/(?!(lodash-es)@)'], // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them // unmockedModulePathPatterns: undefined, diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index 124243c5d..fa6f6d6c8 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -5,6 +5,7 @@ import repliesComment from './__test__/fixtures/repliesComment.json'; import singleComment from './__test__/fixtures/singleComment.json'; import specialComment from './__test__/fixtures/specialComment.json'; import mockedCurrentUser from './__test__/fixtures/user.json'; +import type { CommentProps } from './Comment'; import Comment from './Comment'; export default { @@ -12,22 +13,13 @@ export default { component: Comment, }; -const Template: ComponentStory = (args) => { - const states = [1, 2, 5]; +const Template: ComponentStory = (args: CommentProps & { states?: number[] }) => { + // 0 正常评论 6 被用户删除 7 违反社区指导原则，已被删除 + // 1 关闭 2 重开 5 下沉 return (
- -
- ); -}; - -const SpecialCommentTemplate: ComponentStory = (args) => { - // 1 关闭 2 重开 5 下沉 6 被用户删除 7 违反社区指导原则，已被删除 - const states = [1, 2, 5, 6, 7]; - return ( -
- {states.map((state, idx) => ( -
+ {(args.states ?? [0]).map((state, idx) => ( +

State: {state}

@@ -45,6 +37,7 @@ SingleComment.args = { originalPosterId: 1, created_at: String(new Date()), floor: 2, + states: [0, 6, 7], } as any; export const CommentWithReplies = Template.bind({}); @@ -69,7 +62,7 @@ SelfComment.args = { floor: 2, } as any; -export const SpecialComment = SpecialCommentTemplate.bind({}); +export const SpecialComment = Template.bind({}); SpecialComment.args = { ...specialComment, @@ -77,4 +70,5 @@ SpecialComment.args = { is_friend: false, created_at: String(new Date()), floor: 2, + states: [1, 2, 5], } as any; diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx index eee7dcf79..4723b3b2d 100644 --- a/packages/design/components/Topic/__test__/Comment.spec.tsx +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -8,6 +8,7 @@ import singleComment from './fixtures/singleComment.json'; import specialComment from './fixtures/specialComment.json'; import mockedCurrentUser from './fixtures/user.json'; +// 0 正常评论 6 被用户删除 7 违反社区指导原则，已被删除 describe('Normal Comment', () => { function buildProps( isReply = false, @@ -27,9 +28,9 @@ describe('Normal Comment', () => { } as unknown as CommentProps; } - it('should render', () => { + it.each([0, 6, 7])('should render %d', (state) => { const props = buildProps(); - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); @@ -99,7 +100,7 @@ describe('Normal Comment', () => { }); }); -// 1 关闭 2 重开 5 下沉 6 被用户删除 7 违反社区指导原则，已被删除 +// 1 关闭 2 重开 5 下沉 describe('Special Comment', () => { function buildProps(state: number) { return { @@ -108,7 +109,7 @@ describe('Special Comment', () => { } as unknown as CommentProps; } - it.each([1, 2, 5, 6, 7])('should render state is %d', (state) => { + it.each([1, 2, 5])('should render state is %d', (state) => { const props = buildProps(state); const { container } = render(); expect(container).toMatchSnapshot(); diff --git a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap index 1f93ca204..f666fbdfb 100644 --- a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Normal Comment should render 1`] = ` +exports[`Normal Comment should render 0 1`] = `
`; -exports[`Normal Comment should render with reply 1`] = ` +exports[`Normal Comment should render 6 1`] = `
- 123456789~~~ + 内容已被用户删除
-
-
-
- -
-
-
- -
- - 用户 - -
- - # - 233-1 -    - | -    - 2022-9-22 06:03 -    - | -    - ! - - -
- 123456789~~~ -
-
-
- - -
-
-
-
-
-
-`; - -exports[`Special Comment should render state is 1 1`] = ` -
-
- -
-
- - 用户 - -
- 关闭了该主题 -
-
- - 2022-7-17 04:08 - - -
-
-`; - -exports[`Special Comment should render state is 2 1`] = ` -
-
- -
-
- - 用户 - -
- 重新开启了该主题 -
-
- - 2022-7-17 04:08 - - -
-
-`; - -exports[`Special Comment should render state is 5 1`] = ` -
-
- -
-
- - 用户 - -
- 下沉了该主题 -
-
- - 2022-7-17 04:08 - -
`; -exports[`Special Comment should render state is 6 1`] = ` +exports[`Normal Comment should render 7 1`] = `
# + 233    |    - 2022-7-17 04:08 + 2022-9-22 06:03    |    @@ -381,7 +208,14 @@ exports[`Special Comment should render state is 6 1`] = `
- 内容已被用户删除 + 内容因违反「 + + 社区指导原则 + + 」已被删除
`; -exports[`Special Comment should render state is 7 1`] = ` +exports[`Normal Comment should render with reply 1`] = `
# + 233    |    - 2022-7-17 04:08 + 2022-9-22 06:03    |    @@ -455,16 +290,9 @@ exports[`Special Comment should render state is 7 1`] = `
- 内容因违反「 - - 社区指导原则 - - 」已被删除 + 123456789~~~
+
+
+
+ +
+
+
+ +
+ + 用户 + +
+ + # + 233-1 +    + | +    + 2022-9-22 06:03 +    + | +    + ! + + +
+ 123456789~~~ +
+
+
+ + +
+
+
+
`; diff --git a/packages/website/src/pages/index/group/[name]/index.tsx b/packages/website/src/pages/index/group/[name]/index.tsx index df463d76c..8c3b61741 100644 --- a/packages/website/src/pages/index/group/[name]/index.tsx +++ b/packages/website/src/pages/index/group/[name]/index.tsx @@ -37,6 +37,7 @@ const GroupHome: React.FC = () => { return ( <> void; } -const CLAMP_HEIGHT_THRESHOLD = 193; - export const ClampableContent: React.FC = ({ content, - threshold = CLAMP_HEIGHT_THRESHOLD, + threshold, isClamped, onChange, containerClassName, From fbd95a8211f96ed77daa2b65b5c414f2eb7faba2 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 20:17:59 +0800 Subject: [PATCH 52/69] update --- packages/design/components/EditorForm/style/index.less | 1 - .../pages/index/group/components/ClampableContent.module.less | 2 -- .../src/pages/index/group/components/ClampableContent.tsx | 3 --- .../website/src/pages/index/group/topic/[id]/index.module.less | 3 --- packages/website/src/pages/index/group/topic/[id]/index.tsx | 1 - 5 files changed, 10 deletions(-) diff --git a/packages/design/components/EditorForm/style/index.less b/packages/design/components/EditorForm/style/index.less index 35d0118e2..e1447b8af 100644 --- a/packages/design/components/EditorForm/style/index.less +++ b/packages/design/components/EditorForm/style/index.less @@ -37,7 +37,6 @@ outline: none; color: @gray-100; line-height: 26px; - resize: vertical; &::placeholder { color: @gray-60; diff --git a/packages/website/src/pages/index/group/components/ClampableContent.module.less b/packages/website/src/pages/index/group/components/ClampableContent.module.less index a5fdf9904..47c6fe3a4 100644 --- a/packages/website/src/pages/index/group/components/ClampableContent.module.less +++ b/packages/website/src/pages/index/group/components/ClampableContent.module.less @@ -4,9 +4,7 @@ > * { margin-bottom: 6px; } -} -.content { width: 100%; color: @gray-100; font-size: 16px; diff --git a/packages/website/src/pages/index/group/components/ClampableContent.tsx b/packages/website/src/pages/index/group/components/ClampableContent.tsx index e37d08598..3b495be1e 100644 --- a/packages/website/src/pages/index/group/components/ClampableContent.tsx +++ b/packages/website/src/pages/index/group/components/ClampableContent.tsx @@ -11,7 +11,6 @@ export interface ClampableContentProps { content: string; isClamped: boolean; containerClassName?: string; - contentClassName?: string; onChange?: (isClamped: boolean) => void; } @@ -21,7 +20,6 @@ export const ClampableContent: React.FC = ({ isClamped, onChange, containerClassName, - contentClassName, }) => { const [isClampEnabled, setIsClampedEnable] = React.useState(false); const contentRef = React.useRef(null); @@ -77,7 +75,6 @@ export const ClampableContent: React.FC = ({
diff --git a/packages/website/src/pages/index/group/topic/[id]/index.module.less b/packages/website/src/pages/index/group/topic/[id]/index.module.less index b36d3ae38..633c5413c 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/index/group/topic/[id]/index.module.less @@ -56,9 +56,6 @@ .groupDescription { margin-top: 20px; -} - -.groupDescriptionContent { font-size: 14px; line-height: 20px; color: @gray-80; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index d5f1ee7fa..09f4a5345 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -84,7 +84,6 @@ const TopicPage: FC = () => { From c227a641889d846ac47c01f85ee1b3fd73d68c11 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 20:23:24 +0800 Subject: [PATCH 53/69] links --- .../src/pages/index/group/[name]/components/TopicsTable.tsx | 4 ++-- packages/website/src/pages/index/group/topic/[id]/index.tsx | 5 +---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx b/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx index 2af5f7b81..46c28b011 100644 --- a/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx +++ b/packages/website/src/pages/index/group/[name]/components/TopicsTable.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Typography } from '@bangumi/design'; import type { Topic } from '@bangumi/types/common'; -import { getGroupTopicLink, getUserProfileLink } from '@bangumi/utils/pages'; +import { getUserProfileLink } from '@bangumi/utils/pages'; import styles from './TopicsTable.module.less'; @@ -24,7 +24,7 @@ const TopicsTable: React.FC<{ topics: Topic[] }> = ({ topics }) => { {/* TODO: replace to Link */} - + {topic.title} diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 09f4a5345..53e5a3cf9 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -12,7 +12,6 @@ import { Topic, } from '@bangumi/design'; import { render as renderBBCode } from '@bangumi/utils'; -import { getGroupForumPage } from '@bangumi/utils/pages'; import useGroupTopic from '@bangumi/website/hooks/use-group-topic'; import { useUser } from '@bangumi/website/hooks/use-user'; @@ -92,9 +91,7 @@ const TopicPage: FC = () => { 小组概览
`; + +exports[`Special Comment should render state is 1 1`] = ` +
+
+ +
+
+ + 用户 + +
+ 关闭了该主题 +
+
+ + 2022-7-17 04:08 + + +
+
+`; + +exports[`Special Comment should render state is 2 1`] = ` +
+
+ +
+
+ + 用户 + +
+ 重新开启了该主题 +
+
+ + 2022-7-17 04:08 + + +
+
+`; + +exports[`Special Comment should render state is 5 1`] = ` +
+
+ +
+
+ + 用户 + +
+ 下沉了该主题 +
+
+ + 2022-7-17 04:08 + + +
+
+`; From c7a2c39c8fa7314adc1536ce513adfd34510bd43 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 20:31:39 +0800 Subject: [PATCH 55/69] update --- packages/design/components/Topic/Comment.tsx | 5 ++++- .../Topic/__test__/__snapshots__/Comment.spec.tsx.snap | 2 +- .../components/Topic/__test__/fixtures/repliesComment.json | 4 ++-- .../components/Topic/__test__/fixtures/singleComment.json | 4 ++-- .../design/components/Topic/__test__/fixtures/user.json | 4 ++-- .../index/group/topic/[id]/components/GroupTopicHeader.tsx | 6 ++---- 6 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 2f0233ef4..e58a2d1cb 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -118,7 +118,10 @@ const Comment: FC = ({ return (
- +
diff --git a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap index de3931851..3c1c6403c 100644 --- a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -320,7 +320,7 @@ exports[`Normal Comment should render with reply 1`] = ` class="bgm-avatar bgm-avatar--small" >
= ({ title, createdAt, creator, group }) => { 发表于 {group.title} » - - 组内讨论 - + 组内讨论
From d3d522a83ea3d414230ee058f4c300037cee4fbd Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 21:11:57 +0800 Subject: [PATCH 56/69] add layout component --- packages/design/components/Layout/index.tsx | 22 +++++++ .../design/components/Layout/style/index.less | 15 +++++ .../design/components/Layout/style/index.tsx | 1 + packages/design/index.tsx | 2 + .../group/components/GroupLayout.module.less | 25 -------- .../index/group/components/GroupLayout.tsx | 13 +++-- .../index/group/topic/[id]/index.module.less | 15 ----- .../pages/index/group/topic/[id]/index.tsx | 58 ++++++++++--------- 8 files changed, 78 insertions(+), 73 deletions(-) create mode 100644 packages/design/components/Layout/index.tsx create mode 100644 packages/design/components/Layout/style/index.less create mode 100644 packages/design/components/Layout/style/index.tsx diff --git a/packages/design/components/Layout/index.tsx b/packages/design/components/Layout/index.tsx new file mode 100644 index 000000000..bae06caf3 --- /dev/null +++ b/packages/design/components/Layout/index.tsx @@ -0,0 +1,22 @@ +import classnames from 'classnames'; +import type { FC } from 'react'; +import React from 'react'; + +export interface LayoutProps { + type: 'alpha' | 'beta'; + className?: string; + leftChildren?: React.ReactNode; + rightChildren?: React.ReactNode; +} + +const Index: FC = ({ leftChildren, rightChildren, type, className }) => { + const containerClassNames = classnames('bgm-layout', `bgm-layout--${type}`, className); + return ( +
+
{leftChildren}
+
{rightChildren}
+
+ ); +}; + +export default Index; diff --git a/packages/design/components/Layout/style/index.less b/packages/design/components/Layout/style/index.less new file mode 100644 index 000000000..34590915f --- /dev/null +++ b/packages/design/components/Layout/style/index.less @@ -0,0 +1,15 @@ +.bgm-layout { + display: flex; + + &--alpha { + .bgm-layout__left { + width: 913px; + flex: 1; + margin-right: 40px; + } + + .bgm-layout__right { + width: 427px; + } + } +} diff --git a/packages/design/components/Layout/style/index.tsx b/packages/design/components/Layout/style/index.tsx new file mode 100644 index 000000000..d74e52ee9 --- /dev/null +++ b/packages/design/components/Layout/style/index.tsx @@ -0,0 +1 @@ +import './index.less'; diff --git a/packages/design/index.tsx b/packages/design/index.tsx index 8632f10dd..ebe01c8e3 100644 --- a/packages/design/index.tsx +++ b/packages/design/index.tsx @@ -12,6 +12,7 @@ export { default as EditorForm } from './components/EditorForm'; export { default as RichContent } from './components/RichContent'; export { default as Pagination } from './components/Pagination'; export { default as Topic } from './components/Topic'; +export { default as Layout } from './components/Layout'; export type { ButtonProps } from './components/Button'; export type { LinkProps } from './components/Typography'; @@ -26,3 +27,4 @@ export type { SectionProps } from './components/Section'; export type { EditorFormProps } from './components/EditorForm'; export type { RichContentProps } from './components/RichContent'; export type { PaginationProps } from './components/Pagination'; +export type { LayoutProps } from './components/Layout'; diff --git a/packages/website/src/pages/index/group/components/GroupLayout.module.less b/packages/website/src/pages/index/group/components/GroupLayout.module.less index 8c6db3710..a6b96074c 100644 --- a/packages/website/src/pages/index/group/components/GroupLayout.module.less +++ b/packages/website/src/pages/index/group/components/GroupLayout.module.less @@ -6,31 +6,6 @@ } } -.columnContainer { - display: flex; -} - -.leftCol, -.rightCol { - > * { - margin-bottom: 20px; - } - - &:last-child { - margin-bottom: 0; - } -} - -.leftCol { - width: 913px; - flex: 1; - margin-right: 40px; -} - -.rightCol { - width: 427px; -} - .newMembers { display: grid; grid-template-columns: repeat(5, 1fr); diff --git a/packages/website/src/pages/index/group/components/GroupLayout.tsx b/packages/website/src/pages/index/group/components/GroupLayout.tsx index 1e46fc5ba..a5b7621bb 100644 --- a/packages/website/src/pages/index/group/components/GroupLayout.tsx +++ b/packages/website/src/pages/index/group/components/GroupLayout.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react'; import React from 'react'; import { Link } from 'react-router-dom'; -import { Section, Tab } from '@bangumi/design'; +import { Section, Tab, Layout } from '@bangumi/design'; import type { GroupProfile } from '@bangumi/types/group'; import { keyBy } from '@bangumi/utils'; import { ReactComponent as RightArrow } from '@bangumi/website/assets/right-arrow.svg'; @@ -55,9 +55,10 @@ const GroupLayout: React.FC = ({ group, children, curTab, gro activeKey={curTab} onChange={(_, value) => navigate(value.to(groupName))} /> -
-
{children}
-
+ @@ -86,8 +87,8 @@ const GroupLayout: React.FC = ({ group, children, curTab, gro })}
-
-
+ } + />
); }; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.module.less b/packages/website/src/pages/index/group/topic/[id]/index.module.less index 633c5413c..8216fab60 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.module.less +++ b/packages/website/src/pages/index/group/topic/[id]/index.module.less @@ -2,21 +2,6 @@ @import '@bangumi/design/theme/base'; -/* Todo: col & raw component */ -.columnContainer { - display: flex; -} - -.leftCol { - width: 913px; - flex: 1; - margin-right: 40px; -} - -.rightCol { - width: 427px; -} - .replies { margin-top: 40px; } diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 53e5a3cf9..e4403c204 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -10,6 +10,7 @@ import { Typography, Button, Topic, + Layout, } from '@bangumi/design'; import { render as renderBBCode } from '@bangumi/utils'; import useGroupTopic from '@bangumi/website/hooks/use-group-topic'; @@ -46,32 +47,35 @@ const TopicPage: FC = () => { createdAt={topicDetail.created_at!} group={topicDetail.group} /> -
-
- {/* Topic content */} - - {/* Topic Comments */} -
- {topicDetail.comments.map((comment, idx) => ( - - ))} -
- {/* Reply BBCode Editor */} - {!isClosed && user && ( -
- - + + {/* Topic content */} + + {/* Topic Comments */} +
+ {topicDetail.comments.map((comment, idx) => ( + + ))} + {/* Reply BBCode Editor */} + {!isClosed && user && ( +
+ + +
+ )}
- )} -
-
+ + } + rightChildren={
@@ -98,8 +102,8 @@ const TopicPage: FC = () => {
-
-
+ } + /> ); }; From 59ce2ce41f4174d25073b24a7c2f00051285ec2a Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 21:18:06 +0800 Subject: [PATCH 57/69] add error boundary --- packages/website/src/hooks/use-group-topic.ts | 8 +++++--- .../website/src/pages/index/group/topic/[id].tsx | 12 ++++++++++++ .../src/pages/index/group/topic/[id]/index.tsx | 4 ---- 3 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 packages/website/src/pages/index/group/topic/[id].tsx diff --git a/packages/website/src/hooks/use-group-topic.ts b/packages/website/src/hooks/use-group-topic.ts index 766378da1..a59455039 100644 --- a/packages/website/src/hooks/use-group-topic.ts +++ b/packages/website/src/hooks/use-group-topic.ts @@ -8,9 +8,11 @@ type TopicsResp = { group: Group; } & GroupTopics; -function useGroupTopic(id: string): TopicsResp | undefined { - const { data: topicDetail } = useSWR(`/p/groups/-/topics/${id}`, privateGet); - return topicDetail; +function useGroupTopic(id: string): TopicsResp { + const { data: topicDetail } = useSWR(`/p/groups/-/topics/${id}`, privateGet, { + suspense: true, + }); + return topicDetail!; } export default useGroupTopic; diff --git a/packages/website/src/pages/index/group/topic/[id].tsx b/packages/website/src/pages/index/group/topic/[id].tsx new file mode 100644 index 000000000..03b279835 --- /dev/null +++ b/packages/website/src/pages/index/group/topic/[id].tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Outlet } from 'react-router-dom'; + +import ErrorBoundary from '@bangumi/website/components/ErrorBoundary'; + +const GroupTopicPage = () => ( + Topic Not found}> + + +); + +export default GroupTopicPage; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index e4403c204..96760c0e2 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -27,14 +27,10 @@ const { Comment } = Topic; const TopicPage: FC = () => { const { id } = useParams(); if (!id) { - // Todo: ErrorBoundary throw new Error('BUG: topic id is required'); } const topicDetail = useGroupTopic(id); const { user } = useUser(); - if (!topicDetail) { - return null; - } const originalPosterId = topicDetail.creator.id; const parsedText = renderBBCode(topicDetail.text); const isClosed = topicDetail.state === 1; From 02be365db53d0ddf9a8037af02d0a7f5251ee7aa Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 21:27:34 +0800 Subject: [PATCH 58/69] add layout story --- .../components/Layout/Layout.stories.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 packages/design/components/Layout/Layout.stories.tsx diff --git a/packages/design/components/Layout/Layout.stories.tsx b/packages/design/components/Layout/Layout.stories.tsx new file mode 100644 index 000000000..7203f7d32 --- /dev/null +++ b/packages/design/components/Layout/Layout.stories.tsx @@ -0,0 +1,24 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import React from 'react'; + +import Layout from '.'; + +const componentMeta: ComponentMeta = { + title: 'Grid/Layout', + component: Layout, +}; + +export default componentMeta; + +const Template: ComponentStory = (args) => ; + +const leftChildren =
; +const rightChildren =
; + +export const Usage = Template.bind({}); + +Usage.args = { + type: 'alpha', + leftChildren, + rightChildren, +}; From b9ee86be0959753623c61d0aee66db0a878d008d Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 21:57:26 +0800 Subject: [PATCH 59/69] fix styles --- .../design/components/Pagination/index.tsx | 7 +++++- packages/design/components/Section/index.tsx | 11 ++++++-- .../src/pages/index/group/[name]/forum.tsx | 2 ++ .../src/pages/index/group/[name]/index.tsx | 2 ++ .../index/group/[name]/members.module.less | 25 ------------------- .../src/pages/index/group/[name]/members.tsx | 9 +++++-- .../index/group/[name]/style.module.less | 15 +++++++++++ .../components/GroupTopicHeader.module.less | 2 +- 8 files changed, 42 insertions(+), 31 deletions(-) delete mode 100644 packages/website/src/pages/index/group/[name]/members.module.less create mode 100644 packages/website/src/pages/index/group/[name]/style.module.less diff --git a/packages/design/components/Pagination/index.tsx b/packages/design/components/Pagination/index.tsx index f4c583284..bd8702632 100644 --- a/packages/design/components/Pagination/index.tsx +++ b/packages/design/components/Pagination/index.tsx @@ -1,4 +1,5 @@ import cn from 'classnames'; +import classnames from 'classnames'; import type { FC } from 'react'; import React, { useState } from 'react'; @@ -15,6 +16,9 @@ export interface PaginationProps { total?: number; /* 页码改变的回调 */ onChange?: (offset: number) => void; + + /* 自定义 classname */ + wrapperClass?: string; } function calculatePage(pageSize: number, total: number): number { @@ -25,6 +29,7 @@ const Pagination: FC = ({ currentPage = 1, pageSize = 30, total = 0, + wrapperClass, ...restProps }) => { const [current, setCurrent] = useState(() => currentPage); @@ -108,7 +113,7 @@ const Pagination: FC = ({ } } return ( -
    +
      {prevButton} {pagerList} {nextButton} diff --git a/packages/design/components/Section/index.tsx b/packages/design/components/Section/index.tsx index 7d14addc7..ed17ae9ad 100644 --- a/packages/design/components/Section/index.tsx +++ b/packages/design/components/Section/index.tsx @@ -1,13 +1,20 @@ +import classnames from 'classnames'; import type { PropsWithChildren } from 'react'; import React from 'react'; export interface SectionProps { title: string; renderFooter?: () => React.ReactNode; + wrapperClass?: string; } -const Section = ({ title, children, renderFooter }: PropsWithChildren) => { +const Section = ({ + title, + wrapperClass, + children, + renderFooter, +}: PropsWithChildren) => { return ( -
      +

      {title}

      {children} {renderFooter &&
      {renderFooter()}
      } diff --git a/packages/website/src/pages/index/group/[name]/forum.tsx b/packages/website/src/pages/index/group/[name]/forum.tsx index 5aedfd527..78f462ec0 100644 --- a/packages/website/src/pages/index/group/[name]/forum.tsx +++ b/packages/website/src/pages/index/group/[name]/forum.tsx @@ -7,6 +7,7 @@ import { useTransitionNavigate } from '@bangumi/website/hooks/use-navigate'; import { usePaginationParams } from '@bangumi/website/hooks/use-pagination'; import TopicsTable from './components/TopicsTable'; +import styles from './style.module.less'; const GroupForum = () => { const { name } = useParams(); @@ -30,6 +31,7 @@ const GroupForum = () => { total={topics.total} pageSize={pageSize} currentPage={curPage} + wrapperClass={styles.pagination} onChange={handlePageChange} /> diff --git a/packages/website/src/pages/index/group/[name]/index.tsx b/packages/website/src/pages/index/group/[name]/index.tsx index 8c3b61741..de6a197c5 100644 --- a/packages/website/src/pages/index/group/[name]/index.tsx +++ b/packages/website/src/pages/index/group/[name]/index.tsx @@ -10,6 +10,7 @@ import { useGroupContext } from '../[name]'; import CommonStyles from '../common.module.less'; import { ClampableContent } from '../components/ClampableContent'; import TopicsTable from './components/TopicsTable'; +import styles from './style.module.less'; const GroupHome: React.FC = () => { const { name } = useParams(); @@ -44,6 +45,7 @@ const GroupHome: React.FC = () => { />
      ( 更多组内讨论 diff --git a/packages/website/src/pages/index/group/[name]/members.module.less b/packages/website/src/pages/index/group/[name]/members.module.less deleted file mode 100644 index cda25c679..000000000 --- a/packages/website/src/pages/index/group/[name]/members.module.less +++ /dev/null @@ -1,25 +0,0 @@ -@import '@bangumi/design/theme/base'; - -.pageContainer { - > * { - margin-bottom: 10px; - } -} - -.columnContainer { - display: flex; -} - -.leftCol { - width: 913px; - flex: 1; - margin-right: 40px; -} - -.members { - margin-bottom: 20px; - display: grid; - grid-template-columns: repeat(3, 290px); - column-gap: 14px; - row-gap: 20px; -} diff --git a/packages/website/src/pages/index/group/[name]/members.tsx b/packages/website/src/pages/index/group/[name]/members.tsx index 514a98a59..3c1ce52b4 100644 --- a/packages/website/src/pages/index/group/[name]/members.tsx +++ b/packages/website/src/pages/index/group/[name]/members.tsx @@ -9,7 +9,7 @@ import { useTransitionNavigate } from '@bangumi/website/hooks/use-navigate'; import { usePaginationParams } from '@bangumi/website/hooks/use-pagination'; import { UserCard } from '../components/UserCard'; -import styles from './members.module.less'; +import styles from './style.module.less'; const GroupMembersPage = () => { const { curPage, offset, pageSize } = usePaginationParams(30); @@ -65,7 +65,12 @@ const GroupMembersPage = () => { ); })}
      - + ); diff --git a/packages/website/src/pages/index/group/[name]/style.module.less b/packages/website/src/pages/index/group/[name]/style.module.less new file mode 100644 index 000000000..4ec8983c2 --- /dev/null +++ b/packages/website/src/pages/index/group/[name]/style.module.less @@ -0,0 +1,15 @@ +.recentTopics { + margin-top: 40px; +} + +.pagination { + margin-top: 20px; +} + +.members { + margin-bottom: 20px; + display: grid; + grid-template-columns: repeat(3, 290px); + column-gap: 14px; + row-gap: 20px; +} \ No newline at end of file diff --git a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less index b25a1cc34..22d21eecc 100644 --- a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less +++ b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less @@ -3,7 +3,7 @@ .groupTopicHeader { display: flex; align-items: center; - height: 98px; + margin-bottom: 20px; max-width: 913px; } From 9b1cbffd2b16e076442e0e91fbc6b569403a6d20 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 22:01:21 +0800 Subject: [PATCH 60/69] fix --- packages/design/components/Pagination/index.tsx | 3 +-- .../website/src/pages/index/group/[name]/style.module.less | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/design/components/Pagination/index.tsx b/packages/design/components/Pagination/index.tsx index bd8702632..f22554b22 100644 --- a/packages/design/components/Pagination/index.tsx +++ b/packages/design/components/Pagination/index.tsx @@ -1,5 +1,4 @@ import cn from 'classnames'; -import classnames from 'classnames'; import type { FC } from 'react'; import React, { useState } from 'react'; @@ -113,7 +112,7 @@ const Pagination: FC = ({ } } return ( -
        +
          {prevButton} {pagerList} {nextButton} diff --git a/packages/website/src/pages/index/group/[name]/style.module.less b/packages/website/src/pages/index/group/[name]/style.module.less index 4ec8983c2..1598e3a40 100644 --- a/packages/website/src/pages/index/group/[name]/style.module.less +++ b/packages/website/src/pages/index/group/[name]/style.module.less @@ -12,4 +12,4 @@ grid-template-columns: repeat(3, 290px); column-gap: 14px; row-gap: 20px; -} \ No newline at end of file +} From a9b770e78dc97204640e6b1a5064e7cd99cdec2a Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 23:09:50 +0800 Subject: [PATCH 61/69] fix: add missing id --- packages/design/components/RichContent/index.tsx | 4 +++- packages/website/src/pages/index/group/topic/[id]/index.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/design/components/RichContent/index.tsx b/packages/design/components/RichContent/index.tsx index 9d5ded7b0..ed2697d31 100644 --- a/packages/design/components/RichContent/index.tsx +++ b/packages/design/components/RichContent/index.tsx @@ -4,13 +4,15 @@ import React from 'react'; export interface RichContentProps { html: string; classname?: string; + id?: string; } -const RichContent: React.FC = ({ html, classname }) => { +const RichContent: React.FC = ({ html, classname, id }) => { return (
          ); }; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 96760c0e2..62bd46c66 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -48,7 +48,7 @@ const TopicPage: FC = () => { leftChildren={ <> {/* Topic content */} - + {/* Topic Comments */}
          {topicDetail.comments.map((comment, idx) => ( From 123d1e62882afa4955366ea47c9c4a409ae7075c Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 23:41:03 +0800 Subject: [PATCH 62/69] update --- packages/design/components/RichContent/index.tsx | 4 +--- packages/design/components/Topic/Comment.tsx | 2 +- packages/design/components/Topic/CommentInfo.tsx | 10 ++++++++-- .../design/components/Topic/style/CommentInfo.less | 5 +++++ .../topic/[id]/components/GroupTopicHeader.module.less | 2 +- .../group/topic/[id]/components/GroupTopicHeader.tsx | 5 +++-- .../website/src/pages/index/group/topic/[id]/index.tsx | 5 ++++- 7 files changed, 23 insertions(+), 10 deletions(-) diff --git a/packages/design/components/RichContent/index.tsx b/packages/design/components/RichContent/index.tsx index ed2697d31..9d5ded7b0 100644 --- a/packages/design/components/RichContent/index.tsx +++ b/packages/design/components/RichContent/index.tsx @@ -4,15 +4,13 @@ import React from 'react'; export interface RichContentProps { html: string; classname?: string; - id?: string; } -const RichContent: React.FC = ({ html, classname, id }) => { +const RichContent: React.FC = ({ html, classname }) => { return (
          ); }; diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index e58a2d1cb..0fe82fbdf 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -133,7 +133,7 @@ const Comment: FC = ({ {isFriend ? : null} {!isReply && creator.sign ? {`// ${unescape(creator.sign)}`} : null}
          - +
          diff --git a/packages/design/components/Topic/CommentInfo.tsx b/packages/design/components/Topic/CommentInfo.tsx index d3a8dacd4..26c0f12aa 100644 --- a/packages/design/components/Topic/CommentInfo.tsx +++ b/packages/design/components/Topic/CommentInfo.tsx @@ -5,15 +5,21 @@ export interface CommentInfoProps { floor: string | number; isSpecial?: boolean; createdAt: string | Date; + id?: string; } const spaces = '\u00A0'.repeat(2); -const CommentInfo: React.FC = ({ floor, createdAt, isSpecial = false }) => { +const CommentInfo: React.FC = ({ + floor, + createdAt, + isSpecial = false, + id = '', +}) => { const date = dayjs(createdAt).format('YYYY-M-D HH:mm'); return !isSpecial ? ( - #{floor} + #{floor} {spaces}|{spaces} {date} {spaces}|{spaces}! diff --git a/packages/design/components/Topic/style/CommentInfo.less b/packages/design/components/Topic/style/CommentInfo.less index 3f87d2573..50da60fec 100644 --- a/packages/design/components/Topic/style/CommentInfo.less +++ b/packages/design/components/Topic/style/CommentInfo.less @@ -4,4 +4,9 @@ color: @gray-60; font-size: 14px; line-height: 20px; + + a { + color: @gray-60; + text-decoration: none; + } } diff --git a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less index 22d21eecc..7c5336cef 100644 --- a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less +++ b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.module.less @@ -26,7 +26,7 @@ width: 100%; div > a, - span { + div > span { padding-right: 10px; } } diff --git a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx index 73cea0fbb..8f5155363 100644 --- a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx @@ -12,12 +12,13 @@ interface Header { createdAt: string | Date; creator: User; group: Group; + id: number; } const Link = Typography.Link; const CommentInfo = Topic.CommentInfo; -const GroupTopicHeader: FC
          = ({ title, createdAt, creator, group }) => { +const GroupTopicHeader: FC
          = ({ title, createdAt, creator, group, id }) => { return (
          @@ -32,7 +33,7 @@ const GroupTopicHeader: FC
          = ({ title, createdAt, creator, group }) => { » 组内讨论
          - +

          {title}

          diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 62bd46c66..f336571ed 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -38,6 +38,7 @@ const TopicPage: FC = () => { return ( <> { leftChildren={ <> {/* Topic content */} - +
          + +
          {/* Topic Comments */}
          {topicDetail.comments.map((comment, idx) => ( From b44cc7ca3c5829c2d16e342a5ec7cabfbd743eaf Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 21 Nov 2022 23:44:05 +0800 Subject: [PATCH 63/69] update snapshot --- .../__snapshots__/Comment.spec.tsx.snap | 40 ++++++++++++++----- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap index 3c1c6403c..ee4fc5b0b 100644 --- a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -39,8 +39,12 @@ exports[`Normal Comment should render 0 1`] = ` - # - 233 + + # + 233 +    |    @@ -116,8 +120,12 @@ exports[`Normal Comment should render 6 1`] = ` - # - 233 + + # + 233 +    |    @@ -193,8 +201,12 @@ exports[`Normal Comment should render 7 1`] = ` - # - 233 + + # + 233 +    |    @@ -277,8 +289,12 @@ exports[`Normal Comment should render with reply 1`] = ` - # - 233 + + # + 233 +    |    @@ -345,8 +361,12 @@ exports[`Normal Comment should render with reply 1`] = ` - # - 233-1 + + # + 233-1 +    |    From e8625555588bd647145790259271d234eebde5e4 Mon Sep 17 00:00:00 2001 From: cokemine Date: Tue, 22 Nov 2022 20:10:19 +0800 Subject: [PATCH 64/69] update --- jest.config.js | 7 ++++--- packages/client/topic.ts | 1 - packages/design/components/Topic/Comment.tsx | 2 +- packages/design/package.json | 2 +- packages/website/src/hooks/use-group-topic.ts | 20 ++++++++++--------- packages/website/src/hooks/use-group.ts | 5 ++++- .../src/pages/index/group/[name]/forum.tsx | 4 ++-- .../src/pages/index/group/[name]/index.tsx | 4 ++-- .../[id]/components/GroupTopicHeader.tsx | 2 +- .../pages/index/group/topic/[id]/index.tsx | 4 ++-- pnpm-lock.yaml | 6 +++--- 11 files changed, 31 insertions(+), 26 deletions(-) diff --git a/jest.config.js b/jest.config.js index 345436885..145f6ba71 100644 --- a/jest.config.js +++ b/jest.config.js @@ -177,9 +177,10 @@ module.exports = { // transform: undefined, // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - transformIgnorePatterns: ['/node_modules/.pnpm/(?!(lodash-es)@)'], - - transformIgnorePatterns: ['/node_modules/.pnpm/(?!(openapi-typescript-fetch)@)'], + transformIgnorePatterns: [ + '/node_modules/.pnpm/(?!(lodash-es)@)', + '/node_modules/.pnpm/(?!(openapi-typescript-fetch)@)', + ], // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them // unmockedModulePathPatterns: undefined, diff --git a/packages/client/topic.ts b/packages/client/topic.ts index 4d15e8699..d05cd987f 100644 --- a/packages/client/topic.ts +++ b/packages/client/topic.ts @@ -2,6 +2,5 @@ import type { components } from './types'; export * from './common'; -export type Topics = components['schemas']['Topic']; export type Comment = components['schemas']['Comment']; export type Reply = components['schemas']['Comment']['replies'][0]; diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 0fe82fbdf..00ea8d797 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -3,8 +3,8 @@ import { unescape } from 'lodash-es'; import type { FC } from 'react'; import React, { useState } from 'react'; +import type { Reply, Comment as IComment, User } from '@bangumi/client/topic'; import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons'; -import type { Reply, Comment as IComment, User } from '@bangumi/types/topic'; import { render as renderBBCode } from '@bangumi/utils'; import { getUserProfileLink } from '@bangumi/utils/pages'; diff --git a/packages/design/package.json b/packages/design/package.json index ca2167c2e..5216dcb31 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -12,7 +12,7 @@ }, "devDependencies": { "@bangumi/icons": "workspace:*", - "@bangumi/types": "workspace:*", + "@bangumi/client": "workspace:*", "@bangumi/utils": "workspace:*", "@storybook/addon-essentials": "^6.5.13", "@storybook/addon-links": "^6.5.13", diff --git a/packages/website/src/hooks/use-group-topic.ts b/packages/website/src/hooks/use-group-topic.ts index a59455039..235bc9ac5 100644 --- a/packages/website/src/hooks/use-group-topic.ts +++ b/packages/website/src/hooks/use-group-topic.ts @@ -1,18 +1,20 @@ import useSWR from 'swr'; -import type { GroupTopics, Group } from '@bangumi/types/group'; - -import { privateGet } from '../api/request'; - +import { api } from '@bangumi/client'; +import type { GroupTopics, Group } from '@bangumi/client/group'; type TopicsResp = { group: Group; } & GroupTopics; -function useGroupTopic(id: string): TopicsResp { - const { data: topicDetail } = useSWR(`/p/groups/-/topics/${id}`, privateGet, { - suspense: true, - }); - return topicDetail!; +function useGroupTopic(id: number): TopicsResp { + const { data: topicDetail } = useSWR( + api.getGroupTopicById.swrKey({ topicID: id }), + api.getGroupTopicById.fetcher, + { + suspense: true, + }, + ); + return topicDetail! as TopicsResp; } export default useGroupTopic; diff --git a/packages/website/src/hooks/use-group.ts b/packages/website/src/hooks/use-group.ts index 0edd4df0d..11bfeb999 100644 --- a/packages/website/src/hooks/use-group.ts +++ b/packages/website/src/hooks/use-group.ts @@ -15,7 +15,10 @@ export interface UseGroupRet { setDescriptionClamp: (val: DescriptionClamp) => void; } -export function useGroupTopic(name: string, { limit = 20, offset = 0 }: Partial = {}) { +export function useGroupRecentTopics( + name: string, + { limit = 20, offset = 0 }: Partial = {}, +) { const { data: recentTopicsResp } = useSWR( api.getGroupTopicsByGroupName.swrKey({ name }, { limit, offset }), api.getGroupTopicsByGroupName.fetcher, diff --git a/packages/website/src/pages/index/group/[name]/forum.tsx b/packages/website/src/pages/index/group/[name]/forum.tsx index 78f462ec0..2bdf8c30c 100644 --- a/packages/website/src/pages/index/group/[name]/forum.tsx +++ b/packages/website/src/pages/index/group/[name]/forum.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useParams } from 'react-router-dom'; import { Pagination } from '@bangumi/design'; -import { useGroupTopic } from '@bangumi/website/hooks/use-group'; +import { useGroupRecentTopics } from '@bangumi/website/hooks/use-group'; import { useTransitionNavigate } from '@bangumi/website/hooks/use-navigate'; import { usePaginationParams } from '@bangumi/website/hooks/use-pagination'; @@ -14,7 +14,7 @@ const GroupForum = () => { const [, navigate] = useTransitionNavigate(); const { curPage, offset, pageSize } = usePaginationParams(); - const topics = useGroupTopic(name!, { + const topics = useGroupRecentTopics(name!, { offset, limit: pageSize, }); diff --git a/packages/website/src/pages/index/group/[name]/index.tsx b/packages/website/src/pages/index/group/[name]/index.tsx index de6a197c5..7b387a7b2 100644 --- a/packages/website/src/pages/index/group/[name]/index.tsx +++ b/packages/website/src/pages/index/group/[name]/index.tsx @@ -4,7 +4,7 @@ import { useParams, Link as RouterLink } from 'react-router-dom'; import { Section } from '@bangumi/design'; import { render as renderBBCode, UnreadableCodeError } from '@bangumi/utils'; import { ReactComponent as RightArrow } from '@bangumi/website/assets/right-arrow.svg'; -import { DescriptionClamp, useGroupTopic } from '@bangumi/website/hooks/use-group'; +import { DescriptionClamp, useGroupRecentTopics } from '@bangumi/website/hooks/use-group'; import { useGroupContext } from '../[name]'; import CommonStyles from '../common.module.less'; @@ -18,7 +18,7 @@ const GroupHome: React.FC = () => { throw new UnreadableCodeError('BUG: name is undefined'); } const groupContext = useGroupContext(); - const recentTopics = useGroupTopic(name); + const recentTopics = useGroupRecentTopics(name); if (!groupContext?.groupRet?.group || !recentTopics.data.length) { return null; diff --git a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx index 8f5155363..7e3fde740 100644 --- a/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/components/GroupTopicHeader.tsx @@ -1,8 +1,8 @@ import type { FC } from 'react'; import React from 'react'; +import type { User, Group } from '@bangumi/client/group'; import { Avatar, Typography, Topic } from '@bangumi/design'; -import type { User, Group } from '@bangumi/types/group'; import { getUserProfileLink } from '@bangumi/utils/pages'; import styles from './GroupTopicHeader.module.less'; diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index f336571ed..1b226fbb1 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -26,10 +26,10 @@ const { Comment } = Topic; const TopicPage: FC = () => { const { id } = useParams(); - if (!id) { + if (!id || Number.isNaN(Number(id))) { throw new Error('BUG: topic id is required'); } - const topicDetail = useGroupTopic(id); + const topicDetail = useGroupTopic(Number(id)); const { user } = useUser(); const originalPosterId = topicDetail.creator.id; const parsedText = renderBBCode(topicDetail.text); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a66ecbfd7..c6aa879b1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -112,8 +112,8 @@ importers: packages/design: specifiers: + '@bangumi/client': workspace:* '@bangumi/icons': workspace:* - '@bangumi/types': workspace:* '@bangumi/utils': workspace:* '@storybook/addon-essentials': ^6.5.13 '@storybook/addon-links': ^6.5.13 @@ -141,8 +141,8 @@ importers: react-dom: 18.2.0_react@18.2.0 reset-css: 5.0.1 devDependencies: + '@bangumi/client': link:../client '@bangumi/icons': link:../icons - '@bangumi/types': link:../types '@bangumi/utils': link:../utils '@storybook/addon-essentials': 6.5.13_yalvw3r2waubxycyb7k7qsruca '@storybook/addon-links': 6.5.13_biqbaboplfbrettd7655fr4n2y @@ -6313,7 +6313,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.2 magic-string: 0.26.7 react-refresh: 0.14.0 - vite: 3.2.3_less@4.1.3 + vite: 3.2.3 transitivePeerDependencies: - supports-color dev: true From c2261bedcf4aa8c26c9df7410019bfb17a737061 Mon Sep 17 00:00:00 2001 From: cokemine Date: Tue, 22 Nov 2022 20:21:52 +0800 Subject: [PATCH 65/69] fix test --- jest.config.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/jest.config.js b/jest.config.js index 145f6ba71..bb5adf2ca 100644 --- a/jest.config.js +++ b/jest.config.js @@ -178,8 +178,7 @@ module.exports = { // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation transformIgnorePatterns: [ - '/node_modules/.pnpm/(?!(lodash-es)@)', - '/node_modules/.pnpm/(?!(openapi-typescript-fetch)@)', + '/node_modules/.pnpm/(?!(lodash-es|openapi-typescript-fetch)@)', ], // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them From ab670f11d6d1930a7c12ad52797c1eefe75e96f3 Mon Sep 17 00:00:00 2001 From: cokemine Date: Mon, 28 Nov 2022 11:28:16 +0800 Subject: [PATCH 66/69] update --- .../website/src/pages/index/group/topic/[id]/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx index 1b226fbb1..45fc67748 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -1,5 +1,5 @@ import type { FC } from 'react'; -import React from 'react'; +import React, { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { @@ -35,6 +35,14 @@ const TopicPage: FC = () => { const parsedText = renderBBCode(topicDetail.text); const isClosed = topicDetail.state === 1; const { group } = topicDetail; + + // Todo: element highlight style https://github.com/bangumi/frontend/pull/113#issuecomment-1328466708 + // https://github.com/bangumi/frontend/pull/113#issuecomment-1322303601 + useEffect(() => { + const anchor = window.location.hash.slice(1); + document.getElementById(anchor)?.scrollIntoView(true); + }, [topicDetail]); + return ( <> Date: Wed, 30 Nov 2022 10:07:51 +0800 Subject: [PATCH 67/69] update --- packages/design/components/Topic/Comment.tsx | 48 ++++++------- .../design/components/Topic/CommentInfo.tsx | 9 +-- .../Topic/__test__/Comment.spec.tsx | 6 ++ .../__snapshots__/Comment.spec.tsx.snap | 67 +++++++++++++++++++ .../components/Topic/style/Comment.less | 1 - 5 files changed, 101 insertions(+), 30 deletions(-) diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 00ea8d797..7acfb583e 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -137,29 +137,31 @@ const Comment: FC = ({
          -
          - {showReplyEditor ? ( - setShowReplyEditor(false)} - placeholder={`回复给 @${creator.nickname}：`} - /> - ) : ( - <> - - - {user?.id === creator.id ? ( - <> - - - - ) : null} - - )} -
          + {user ? ( +
          + {showReplyEditor ? ( + setShowReplyEditor(false)} + placeholder={`回复给 @${creator.nickname}：`} + /> + ) : ( + <> + + + {user.id === creator.id ? ( + <> + + + + ) : null} + + )} +
          + ) : null}
{replies?.map((reply, idx) => ( diff --git a/packages/design/components/Topic/CommentInfo.tsx b/packages/design/components/Topic/CommentInfo.tsx index 26c0f12aa..cb8e6aba6 100644 --- a/packages/design/components/Topic/CommentInfo.tsx +++ b/packages/design/components/Topic/CommentInfo.tsx @@ -1,4 +1,5 @@ import dayjs from 'dayjs'; +import type { FC } from 'react'; import React from 'react'; export interface CommentInfoProps { @@ -10,12 +11,8 @@ export interface CommentInfoProps { const spaces = '\u00A0'.repeat(2); -const CommentInfo: React.FC = ({ - floor, - createdAt, - isSpecial = false, - id = '', -}) => { +// Todo: report +const CommentInfo: FC = ({ floor, createdAt, isSpecial = false, id = '' }) => { const date = dayjs(createdAt).format('YYYY-M-D HH:mm'); return !isSpecial ? ( diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx index 4723b3b2d..1303e3e9e 100644 --- a/packages/design/components/Topic/__test__/Comment.spec.tsx +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -87,6 +87,12 @@ describe('Normal Comment', () => { expect(getByText('删除')).toBeInTheDocument(); }); + it('do not show opinions if not login', () => { + const props = buildProps(false, singleComment, '233', 233, null as any); + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it('click reply button should show editor form', () => { const props = buildProps(false); const { getByText, container } = render(); diff --git a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap index ee4fc5b0b..e95ccdfa5 100644 --- a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -1,5 +1,72 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Normal Comment do not show opinions if not login 1`] = ` +
+
+
+
+ +
+
+
+ +
+ + 用户 + + + // 我是签名 + +
+ + + # + 233 + +    + | +    + 2022-9-22 06:03 +    + | +    + ! + + +
+ 123456789~~~ +
+
+
+
+
+
+`; + exports[`Normal Comment should render 0 1`] = `
diff --git a/packages/design/components/Topic/style/Comment.less b/packages/design/components/Topic/style/Comment.less index 64c913f16..edfab752f 100644 --- a/packages/design/components/Topic/style/Comment.less +++ b/packages/design/components/Topic/style/Comment.less @@ -4,7 +4,6 @@ &__header { display: flex; align-items: flex-start; - min-height: 98px; max-width: 913px; padding-top: 20px; padding-bottom: 12px; From 7d4f7e117aa0b61eb43e078ed8aca23aaa8af43a Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 1 Dec 2022 10:14:40 +0800 Subject: [PATCH 68/69] update enum --- packages/client/topic.ts | 10 ++++++++ packages/client/user.ts | 1 + packages/design/components/Topic/Comment.tsx | 27 ++++++++++---------- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/client/topic.ts b/packages/client/topic.ts index d05cd987f..fa0ff0cee 100644 --- a/packages/client/topic.ts +++ b/packages/client/topic.ts @@ -4,3 +4,13 @@ export * from './common'; export type Comment = components['schemas']['Comment']; export type Reply = components['schemas']['Comment']['replies'][0]; + +// https://github.com/drwpow/openapi-typescript/issues/941 +export enum State { + Normal = 0, + Closed = 1, + Reopen = 2, + Silent = 5, + DeletedByUser = 6, + DeletedByAdmin = 7, +} diff --git a/packages/client/user.ts b/packages/client/user.ts index 5e576cc4c..5a08be5ef 100644 --- a/packages/client/user.ts +++ b/packages/client/user.ts @@ -1,5 +1,6 @@ export * from './common'; +// https://github.com/drwpow/openapi-typescript/issues/941 export enum UserGroup { Admin = 1, BangumiAdmin = 2, diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 7acfb583e..7ad54d14c 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -3,6 +3,7 @@ import { unescape } from 'lodash-es'; import type { FC } from 'react'; import React, { useState } from 'react'; +import { State } from '@bangumi/client/topic'; import type { Reply, Comment as IComment, User } from '@bangumi/client/topic'; import { Friend, OriginalPoster, TopicClosed, TopicSilent, TopicReopen } from '@bangumi/icons'; import { render as renderBBCode } from '@bangumi/utils'; @@ -23,19 +24,19 @@ export type CommentProps = ((Reply & { isReply: true }) | (IComment & { isReply: const Link = Typography.Link; -const RenderContent: FC<{ state: number; text: string }> = ({ state, text }) => { +const RenderContent: FC<{ state: State; text: string }> = ({ state, text }) => { switch (state) { - case 0: + case State.Normal: return ; - case 1: + case State.Closed: return
关闭了该主题
; - case 2: + case State.Reopen: return
重新开启了该主题
; - case 5: + case State.Silent: return
下沉了该主题
; - case 6: + case State.DeletedByUser: return
内容已被用户删除
; - case 7: + case State.DeletedByAdmin: return (
内容因违反「 @@ -62,9 +63,9 @@ const Comment: FC = ({ ...props }) => { const isReply = props.isReply; - const isDeleted = state === 6 || state === 7; + const isDeleted = state === State.DeletedByUser || state === State.DeletedByAdmin; // 1 关闭 2 重开 5 下沉 - const isSpecial = state === 1 || state === 2 || state === 5; + const isSpecial = state === State.Closed || state === State.Reopen || state === State.Silent; const replies = !isReply ? props.replies : null; const [shouldCollapsed, setShouldCollapsed] = useState( isSpecial || (isReply && (/[+-]\d+$/.test(text!) || isDeleted)), @@ -81,16 +82,16 @@ const Comment: FC = ({ if (shouldCollapsed) { let icon = null; switch (state) { - case 0: + case State.Normal: icon = null; break; - case 1: + case State.Closed: icon = ; break; - case 2: + case State.Reopen: icon = ; break; - case 5: + case State.Silent: icon = ; break; } From 4b156b852faf135f891628f9427649d896d5bc58 Mon Sep 17 00:00:00 2001 From: cokemine Date: Thu, 1 Dec 2022 10:24:36 +0800 Subject: [PATCH 69/69] update story --- packages/design/components/Topic/Comment.stories.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/design/components/Topic/Comment.stories.tsx b/packages/design/components/Topic/Comment.stories.tsx index fa6f6d6c8..f11aa28c8 100644 --- a/packages/design/components/Topic/Comment.stories.tsx +++ b/packages/design/components/Topic/Comment.stories.tsx @@ -1,6 +1,8 @@ import type { ComponentStory } from '@storybook/react'; import React from 'react'; +import { State } from '@bangumi/client/topic'; + import repliesComment from './__test__/fixtures/repliesComment.json'; import singleComment from './__test__/fixtures/singleComment.json'; import specialComment from './__test__/fixtures/specialComment.json'; @@ -13,7 +15,7 @@ export default { component: Comment, }; -const Template: ComponentStory = (args: CommentProps & { states?: number[] }) => { +const Template: ComponentStory = (args: CommentProps & { states?: State[] }) => { // 0 正常评论 6 被用户删除 7 违反社区指导原则，已被删除 // 1 关闭 2 重开 5 下沉 return ( @@ -21,7 +23,7 @@ const Template: ComponentStory = (args: CommentProps & { states? {(args.states ?? [0]).map((state, idx) => (

State: {state}

- +
))}
@@ -37,7 +39,7 @@ SingleComment.args = { originalPosterId: 1, created_at: String(new Date()), floor: 2, - states: [0, 6, 7], + states: [State.Normal, State.DeletedByUser, State.DeletedByAdmin], } as any; export const CommentWithReplies = Template.bind({}); @@ -70,5 +72,5 @@ SpecialComment.args = { is_friend: false, created_at: String(new Date()), floor: 2, - states: [1, 2, 5], + states: [State.Closed, State.Reopen, State.Silent], } as any;