diff --git a/packages/design/components/Popover/Popover.stories.tsx b/packages/design/components/Popover/Popover.stories.tsx new file mode 100644 index 000000000..114344a2d --- /dev/null +++ b/packages/design/components/Popover/Popover.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryFn } from '@storybook/react'; +import React from 'react'; + +import Button from '../Button'; +import type { PopoverProps } from '.'; +import Popover from '.'; + +const storyMeta: Meta = { + title: 'modern/Popover', + component: Popover, +}; + +export default storyMeta; + +const Template: StoryFn = (args) => { + return ; +}; + +export const Default = Template.bind({}); +Default.args = { + content:
Popover content
, + children: , +}; diff --git a/packages/design/components/Popover/index.tsx b/packages/design/components/Popover/index.tsx new file mode 100644 index 000000000..3db66a7bd --- /dev/null +++ b/packages/design/components/Popover/index.tsx @@ -0,0 +1,24 @@ +import './style/index.less'; + +import classNames from 'classnames'; +import React from 'react'; + +export interface PopoverProps { + content: React.ReactNode; + children: React.ReactNode; + className?: string; +} + +const Popover = ({ children, content, className }: PopoverProps) => { + return ( +
+ {children} + {/* 添加一个wrapper使绝对定位元素能够水平居中 */} +
+
{content}
+
+
+ ); +}; + +export default Popover; diff --git a/packages/design/components/Popover/style/index.less b/packages/design/components/Popover/style/index.less new file mode 100644 index 000000000..25fe6242b --- /dev/null +++ b/packages/design/components/Popover/style/index.less @@ -0,0 +1,29 @@ +@import '../../../theme/base.less'; + +.bgm-popover { + display: inline-block; + + &__container { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + } + + &__content { + border: 1px solid @gray-10; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); + background-color: white; + border-radius: 17px; + position: absolute; + visibility: hidden; + opacity: 0; + transition: visibility 0s, opacity 0.15s linear; + z-index: 99; + } + + &:hover &__content { + visibility: visible; + opacity: 1; + } +} diff --git a/packages/design/components/Topic/Comment.tsx b/packages/design/components/Topic/Comment.tsx index 3165faaa0..c2ce9d23b 100644 --- a/packages/design/components/Topic/Comment.tsx +++ b/packages/design/components/Topic/Comment.tsx @@ -11,10 +11,10 @@ import { Friend, OriginalPoster, TopicClosed, TopicReopen, TopicSilent } from '@ import { getUserProfileLink } from '@bangumi/utils/pages'; import Avatar from '../../components/Avatar'; -import Button from '../../components/Button'; import RichContent from '../../components/RichContent'; import Typography from '../../components/Typography'; import { toast } from '../Toast'; +import CommentActions from './CommentActions'; import CommentInfo from './CommentInfo'; import ReplyForm from './ReplyForm'; @@ -161,46 +161,6 @@ const Comment: FC = ({ } }; - const commentActions = user && !isDeleted && ( -
- {showReplyEditor ? ( - { - setShowReplyEditor(false); - }} - onSuccess={handleReplySuccess} - /> - ) : ( - <> - - - {user.id === creator.id && ( - <> - {!replies?.length && ( - - 编辑 - - )} - - - )} - - )} -
- ); - return (
@@ -219,11 +179,40 @@ const Comment: FC = ({ {isFriend ? : null} {!isReply && creator.sign ? {`(${creator.sign})`} : null}
- +
+ + {user && !isDeleted && ( + <> +   |   + + + )} +
- {commentActions} + {showReplyEditor && ( +
+ { + setShowReplyEditor(false); + }} + onSuccess={handleReplySuccess} + /> +
+ )} {replies?.map((reply, idx) => ( diff --git a/packages/design/components/Topic/CommentActions.stories.tsx b/packages/design/components/Topic/CommentActions.stories.tsx new file mode 100644 index 000000000..4eb744da3 --- /dev/null +++ b/packages/design/components/Topic/CommentActions.stories.tsx @@ -0,0 +1,51 @@ +import type { StoryFn } from '@storybook/react'; +import React from 'react'; +import { BrowserRouter } from 'react-router-dom'; + +import type { CommentActionsProps } from './CommentActions'; +import CommentActions from './CommentActions'; + +export default { + title: 'Topic/CommentActions', + component: CommentActions, +}; + +const Template: StoryFn = (args) => { + return ( + + + + ); +}; + +export const Basic = Template.bind({}); + +export const WithText = Template.bind({}); +WithText.args = { + showText: true, +}; + +export const IsAuthor = Template.bind({}); +IsAuthor.args = { + isAuthor: true, +}; +IsAuthor.parameters = { + docs: { + description: { + story: '显示编辑和删除按钮', + }, + }, +}; + +export const NonEditable = Template.bind({}); +NonEditable.args = { + isAuthor: true, + editable: false, +}; +NonEditable.parameters = { + docs: { + description: { + story: '显示删除按钮，但隐藏编辑按钮，例如有子回复时', + }, + }, +}; diff --git a/packages/design/components/Topic/CommentActions.tsx b/packages/design/components/Topic/CommentActions.tsx new file mode 100644 index 000000000..d3cc6497b --- /dev/null +++ b/packages/design/components/Topic/CommentActions.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import { Comment as CommentIcon, More } from '@bangumi/icons'; + +import Button from '../../components/Button'; +import Popover from '../Popover'; + +export interface CommentActionsProps { + id: number; + onReply?: () => void; + onDelete?: () => void; + isAuthor?: boolean; + editable?: boolean; + showText?: boolean; +} + +const CommentActions = ({ + id, + onReply, + onDelete, + isAuthor = false, + editable = true, + showText = false, +}: CommentActionsProps) => { + return ( +
+ + {/* TODO: 实现贴贴功能 */} + + {isAuthor && ( + <> + {editable && ( + + 编辑 + + )} + + + )} + {/* TODO: 实现绝交和报告疑虑功能 */} + + +
+ } + > + + + + ); +}; + +export default CommentActions; diff --git a/packages/design/components/Topic/CommentInfo.tsx b/packages/design/components/Topic/CommentInfo.tsx index 503d1730b..50a2c7fe3 100644 --- a/packages/design/components/Topic/CommentInfo.tsx +++ b/packages/design/components/Topic/CommentInfo.tsx @@ -8,12 +8,11 @@ export interface CommentInfoProps { floor: string | number; isSpecial?: boolean; createdAt: number | string | Date; - id?: string; + id?: number; } const spaces = '\u00A0'.repeat(2); -// Todo: report const CommentInfo: FC = ({ floor, createdAt, isSpecial = false, id = '' }) => { let date: string; if (typeof createdAt === 'number') { @@ -24,10 +23,9 @@ const CommentInfo: FC = ({ floor, createdAt, isSpecial = false return !isSpecial ? ( - #{floor} + #{floor} {spaces}|{spaces} {date} - {spaces}|{spaces}! ) : ( {date} diff --git a/packages/design/components/Topic/__test__/Comment.spec.tsx b/packages/design/components/Topic/__test__/Comment.spec.tsx index b7f3537a0..99e7d3632 100644 --- a/packages/design/components/Topic/__test__/Comment.spec.tsx +++ b/packages/design/components/Topic/__test__/Comment.spec.tsx @@ -104,9 +104,7 @@ describe('Normal Comment', () => { const props = buildProps(false, repliesComment, '233', 233, user); const { container } = render(); // 选取主评论的操作区域 - const actions = container.querySelector( - '.bgm-comment__box > .bgm-comment__opinions', - )?.textContent; + const actions = container.querySelector('.bgm-comment__box .bgm-comment-actions')?.textContent; expect(actions?.includes('编辑')).toBeFalsy(); expect(actions?.includes('删除')).toBeTruthy(); }); @@ -119,10 +117,10 @@ describe('Normal Comment', () => { it('click reply button should show editor form', () => { const props = buildProps(false); - const { getByText, container } = render(); + const { getByText, container, getByTitle } = render(); expect(container.getElementsByClassName('bgm-editor__form').length).toBe(0); - fireEvent.click(getByText('回复')); + fireEvent.click(getByTitle('回复')); expect(container.getElementsByClassName('bgm-editor__form').length).toBe(1); fireEvent.click(getByText('取消')); @@ -141,11 +139,11 @@ describe('Normal Comment', () => { const onSuccess = vi.fn(); const props = buildProps(false); - const { getByText, container } = render( + const { getByText, container, getByTitle } = render( , ); const fillAndSubmit = () => { - fireEvent.click(getByText('回复')); + fireEvent.click(getByTitle('回复')); fireEvent.change(container.querySelector('textarea')!, { target: { value: '233' } }); fireEvent.click(getByText('写好了')); }; diff --git a/packages/design/components/Topic/__test__/CommentActions.spec.tsx b/packages/design/components/Topic/__test__/CommentActions.spec.tsx new file mode 100644 index 000000000..267efe85b --- /dev/null +++ b/packages/design/components/Topic/__test__/CommentActions.spec.tsx @@ -0,0 +1,37 @@ +import { render as _render } from '@testing-library/react'; +import React from 'react'; +import { BrowserRouter } from 'react-router-dom'; + +import type { CommentActionsProps } from '../CommentActions'; +import CommentActions from '../CommentActions'; + +const render = (props: CommentActionsProps) => + _render( + + + , + ); + +describe('Basic Usage', () => { + it('should render', () => { + expect(render({ id: 233 })).toMatchSnapshot(); + }); +}); + +describe('With Text', () => { + it('should render', () => { + expect(render({ id: 233, showText: true })).toMatchSnapshot(); + }); +}); + +describe('Is Author', () => { + it('should render', () => { + expect(render({ id: 233, isAuthor: true })).toMatchSnapshot(); + }); +}); + +describe('Non-editable', () => { + it('should render', () => { + expect(render({ id: 233, isAuthor: true, editable: false })).toMatchSnapshot(); + }); +}); diff --git a/packages/design/components/Topic/__test__/CommentInfo.spec.tsx b/packages/design/components/Topic/__test__/CommentInfo.spec.tsx index 78dcc46c4..c8cd6f9af 100644 --- a/packages/design/components/Topic/__test__/CommentInfo.spec.tsx +++ b/packages/design/components/Topic/__test__/CommentInfo.spec.tsx @@ -14,5 +14,5 @@ it('normal comment should render floor', () => { const createdAt = Math.trunc(new Date('2022-09-22T06:03:21Z').getTime() / 1000); const { container } = render(); const el = container.getElementsByClassName('bgm-topic__commentInfo')[0]; - expect(el!.textContent).toBe('#1  |  2022-9-22 06:03  |  !'); + expect(el!.textContent).toBe('#1  |  2022-9-22 06:03'); }); 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 b00b77bf6..b192b3637 100644 --- a/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap +++ b/packages/design/components/Topic/__test__/__snapshots__/Comment.spec.tsx.snap @@ -36,24 +36,24 @@ exports[`Normal Comment > do not show opinions if not login 1`] = ` (我是签名) - - - # - 233 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233 + +    + | +    + 2022-9-22 06:03 + +
should highlight comment corresponding to hash 1`] = ` (我是签名)
- - - # - 233 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233 + +    + | +    + 2022-9-22 06:03 + +   |   +
+ +
+ +
+
+
+ + +
+
+
+
+
+
should highlight comment corresponding to hash 1`] = ` 123456789~~~
-
- - -
@@ -175,24 +204,67 @@ exports[`Normal Comment > should highlight comment corresponding to hash 1`] = ` 用户
- - - # - 233-1 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233-1 + +    + | +    + 2022-9-22 06:03 + +   |   +
+ +
+ +
+
+
+ + +
+
+
+
+
+
should highlight comment corresponding to hash 1`] = ` 123456789~~~
-
- - -
@@ -257,24 +315,67 @@ exports[`Normal Comment > should render 0 1`] = ` (我是签名) - - - # - 233 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233 + +    + | +    + 2022-9-22 06:03 + +   |   +
+ +
+ +
+
+
+ + +
+
+
+
+
+
should render 0 1`] = ` 123456789~~~
-
- - -
@@ -338,24 +425,24 @@ exports[`Normal Comment > should render 6 1`] = ` (我是签名) - - - # - 233 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233 + +    + | +    + 2022-9-22 06:03 + +
should render 7 1`] = ` (我是签名)
- - - # - 233 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233 + +    + | +    + 2022-9-22 06:03 + +
should render with reply 1`] = ` (我是签名)
- - - # - 233 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233 + +    + | +    + 2022-9-22 06:03 + +   |   +
+ +
+ +
+
+
+ + +
+
+
+
+
+
should render with reply 1`] = ` 123456789~~~
-
- - -
@@ -551,24 +667,67 @@ exports[`Normal Comment > should render with reply 1`] = ` 用户
- - - # - 233-1 - -    - | -    - 2022-9-22 06:03 -    - | -    - ! - + + # + 233-1 + +    + | +    + 2022-9-22 06:03 + +   |   +
+ +
+ +
+
+
+ + +
+
+
+
+
+
should render with reply 1`] = ` 123456789~~~
-
- - -
diff --git a/packages/design/components/Topic/__test__/__snapshots__/CommentActions.spec.tsx.snap b/packages/design/components/Topic/__test__/__snapshots__/CommentActions.spec.tsx.snap new file mode 100644 index 000000000..72e32cdb5 --- /dev/null +++ b/packages/design/components/Topic/__test__/__snapshots__/CommentActions.spec.tsx.snap @@ -0,0 +1,625 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Basic Usage > should render 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+ +
+ +
+
+
+ + +
+
+
+
+
+
+ , + "container":
+
+ +
+ +
+
+
+ + +
+
+
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Is Author > should render 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+ +
+ +
+
+
+ + 编辑 + + + + +
+
+
+
+
+
+ , + "container":
+
+ +
+ +
+
+
+ + 编辑 + + + + +
+
+
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Non-editable > should render 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+ +
+ +
+
+
+ + + +
+
+
+
+
+
+ , + "container":
+
+ +
+ +
+
+
+ + + +
+
+
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`With Text > should render 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+ +
+ +
+
+
+ + +
+
+
+
+
+
+ , + "container":
+
+ +
+ +
+
+
+ + +
+
+
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/packages/design/components/Topic/index.tsx b/packages/design/components/Topic/index.tsx index 6116f9fca..05dec60e9 100644 --- a/packages/design/components/Topic/index.tsx +++ b/packages/design/components/Topic/index.tsx @@ -1,12 +1,15 @@ import './style'; import Comment from './Comment'; +import CommentActions from './CommentActions'; import CommentInfo from './CommentInfo'; export default { Comment, CommentInfo, + CommentActions, }; export type { CommentProps } from './Comment'; export type { CommentInfoProps } from './CommentInfo'; +export type { CommentActionsProps } from './CommentActions'; diff --git a/packages/design/components/Topic/style/Comment.less b/packages/design/components/Topic/style/Comment.less index c0476e54a..1451eb15a 100644 --- a/packages/design/components/Topic/style/Comment.less +++ b/packages/design/components/Topic/style/Comment.less @@ -6,7 +6,6 @@ &__header { display: flex; align-items: flex-start; - max-width: 913px; padding-top: 20px; padding-bottom: 12px; border-bottom: 1px dashed @gray-10; @@ -59,18 +58,22 @@ display: flex; align-items: center; justify-content: space-between; + + .bgm-link, + svg { + padding-right: 12px; + } } - div > a, - svg { - padding-right: 12px; + .comment-info { + display: flex; + font-size: 14px; + line-height: 20px; } } &__opinions { margin-top: 12px; - display: flex; - gap: 10px; } &__content { diff --git a/packages/design/components/Topic/style/CommentActions.less b/packages/design/components/Topic/style/CommentActions.less new file mode 100644 index 000000000..e3bb32762 --- /dev/null +++ b/packages/design/components/Topic/style/CommentActions.less @@ -0,0 +1,40 @@ +@import '../../../theme/base'; + +.bgm-comment-actions { + display: flex; + gap: 12px; + + .bgm-button { + height: 20px; + font-weight: 400; + + &.bgm-comment-actions__more:hover { + color: @gray-80; + } + } + + &__popover { + border-radius: 17px; + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + padding: 10px; + + .bgm-button { + font-size: 14px; + height: 22px; + border-radius: 11px; + width: 70px; + display: flex; + justify-content: center; + align-items: center; + color: @gray-80; + cursor: pointer; + + &:hover { + background-color: #f5f5f5; + } + } + } +} diff --git a/packages/design/components/Topic/style/index.tsx b/packages/design/components/Topic/style/index.tsx index 6891be189..e02409ced 100644 --- a/packages/design/components/Topic/style/index.tsx +++ b/packages/design/components/Topic/style/index.tsx @@ -1,2 +1,3 @@ import './Comment.less'; import './CommentInfo.less'; +import './CommentActions.less'; diff --git a/packages/design/index.tsx b/packages/design/index.tsx index a302434fe..0b098da8a 100644 --- a/packages/design/index.tsx +++ b/packages/design/index.tsx @@ -18,6 +18,7 @@ export { default as Form } from './components/Form'; export { default as Select } from './components/Select'; export { default as Radio } from './components/Radio'; export { default as Message } from './components/Message'; +export { default as Popover } from './components/Popover'; export { toast } from './components/Toast'; export type { ButtonProps } from './components/Button'; @@ -35,3 +36,4 @@ export type { RichContentProps } from './components/RichContent'; export type { PaginationProps } from './components/Pagination'; export type { LayoutProps } from './components/Layout'; export type { MessageType } from './components/Message'; +export type { PopoverProps } from './components/Popover'; diff --git a/packages/icons/assets/comment.svg b/packages/icons/assets/comment.svg new file mode 100644 index 000000000..eb53118c3 --- /dev/null +++ b/packages/icons/assets/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/assets/more.svg b/packages/icons/assets/more.svg new file mode 100644 index 000000000..0d2bdad10 --- /dev/null +++ b/packages/icons/assets/more.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/index.tsx b/packages/icons/index.tsx index 0ca6977ae..b91cb1a08 100644 --- a/packages/icons/index.tsx +++ b/packages/icons/index.tsx @@ -39,3 +39,5 @@ export { ReactComponent as TopicReopen } from './assets/topic-reopen.svg'; export { ReactComponent as OpenQuote } from './assets/open-quote.svg'; export { ReactComponent as CloseQuote } from './assets/close-quote.svg'; export { ReactComponent as Enter } from './assets/enter.svg'; +export { ReactComponent as Comment } from './assets/comment.svg'; +export { ReactComponent as More } from './assets/more.svg'; diff --git a/packages/website/e2e/group.spec.ts b/packages/website/e2e/group.spec.ts index 17a14f447..3d1857c37 100644 --- a/packages/website/e2e/group.spec.ts +++ b/packages/website/e2e/group.spec.ts @@ -41,6 +41,7 @@ test.describe('group', () => { }) .first(), ).toBeVisible(); + await page.hover('.bgm-comment-actions__more'); await expect( page .getByRole('button', { 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 0272e6bd1..539035a7f 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 @@ -33,7 +33,7 @@ const GroupTopicHeader: FC
= ({ title, createdAt, creator, group, id }) » 组内讨论 - +

{title}

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 78bfc4166..656c30efc 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 @@ -4,8 +4,8 @@ .topicActions { display: flex; - gap: 10px; margin-top: 12px; + flex-direction: row-reverse; } .replies { 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 78aa8df48..54bcf4cab 100644 --- a/packages/website/src/pages/index/group/topic/[id]/index.tsx +++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx @@ -3,7 +3,7 @@ import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { Avatar, Button, Layout, RichContent, Topic } from '@bangumi/design'; +import { Avatar, Layout, RichContent, Topic } from '@bangumi/design'; import ReplyForm from '@bangumi/design/components/Topic/ReplyForm'; import Helmet from '@bangumi/website/components/Helmet'; import { useGroup } from '@bangumi/website/hooks/use-group'; @@ -14,7 +14,7 @@ import GroupInfo from '../../components/GroupInfo'; import GroupTopicHeader from './components/GroupTopicHeader'; import styles from './index.module.less'; -const { Comment } = Topic; +const { Comment, CommentActions } = Topic; const TopicPage: FC = () => { const { id } = useParams(); @@ -71,19 +71,13 @@ const TopicPage: FC = () => { {user && (
- - {user.id === topicDetail.creator.id && ( - <> - - 编辑 - - - - )} +
)}