feat(website): implement group topic page

.eslintrc.js

@@ -131,11 +131,12 @@ module.exports = {
       },
     },
     {
-      files: ['*.spec.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',
       },
     },
   ],

jest.config.js

@@ -177,12 +177,9 @@ 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: ['<rootDir>/node_modules/.pnpm/(?!(openapi-typescript-fetch)@)'],
+  transformIgnorePatterns: [
+    '<rootDir>/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
   // unmockedModulePathPatterns: undefined,

packages/client/common.ts

@@ -1,5 +1,6 @@
 import type { components } from './types';
 
+export type User = components['schemas']['User'];
 export type Avatar = components['schemas']['Avatar'];
 export type Topic = components['schemas']['Topic'];
 export type Pagination = Omit<components['schemas']['Paged'], 'data'>;

packages/client/group.ts

@@ -5,3 +5,4 @@ export * from './common';
 export type Group = components['schemas']['Group'];
 export type GroupProfile = components['schemas']['GroupProfile'];
 export type GroupMember = components['schemas']['GroupMember'];
+export type GroupTopics = components['schemas']['PrivateTopicDetail'];

packages/client/topic.ts

@@ -0,0 +1,16 @@
+import type { components } from './types';
+
+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,
+}

packages/client/user.ts

@@ -1,9 +1,6 @@
-import type { components } from './types';
-
 export * from './common';
 
-export type User = components['schemas']['User'];
-
+// https://github.com/drwpow/openapi-typescript/issues/941
 export enum UserGroup {
   Admin = 1,
   BangumiAdmin = 2,

packages/design/components/Avatar/Avatar.stories.tsx

@@ -7,7 +7,7 @@ const componentMeta: ComponentMeta<typeof Avatar> = {
   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',
   },
 };

packages/design/components/Avatar/style/index.less

@@ -18,8 +18,8 @@
   }
 
   &--medium img {
-    height: 48px;
-    width: 48px;
+    height: 60px;
+    width: 60px;
   }
 
   &--large img {

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,14 +11,15 @@
     border: 2px solid @gray-10;
     border-radius: 12px;
     padding: 8px 0 0 10px;
+    z-index: 9999;
   }
 
   &__toolbox {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 26px;
-    width: @toolbox-with;
+    width: @toolbox-width;
     padding: 0 4px;
     margin-bottom: 10px;
 
@@ -29,13 +31,12 @@
   &__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;
     line-height: 26px;
-    resize: vertical;
 
     &::placeholder {
       color: @gray-60;
@@ -47,6 +48,7 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
+    width: @text-width;
   }
 
   &__submit {

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<typeof Layout> = {
+  title: 'Grid/Layout',
+  component: Layout,
+};
+
+export default componentMeta;
+
+const Template: ComponentStory<typeof Layout> = (args) => <Layout {...args} />;
+
+const leftChildren = <div style={{ width: '100%', height: '100vh', background: '#B5E6B5' }} />;
+const rightChildren = <div style={{ width: '100%', height: '100vh', background: '#FFF2E2' }} />;
+
+export const Usage = Template.bind({});
+
+Usage.args = {
+  type: 'alpha',
+  leftChildren,
+  rightChildren,
+};

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<LayoutProps> = ({ leftChildren, rightChildren, type, className }) => {
+  const containerClassNames = classnames('bgm-layout', `bgm-layout--${type}`, className);
+  return (
+    <div className={containerClassNames}>
+      <div className='bgm-layout__left'>{leftChildren}</div>
+      <div className='bgm-layout__right'>{rightChildren}</div>
+    </div>
+  );
+};
+
+export default Index;

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;
+    }
+  }
+}

packages/design/components/Layout/style/index.tsx

@@ -0,0 +1 @@
+import './index.less';

packages/design/components/Pagination/index.tsx

@@ -15,6 +15,9 @@ export interface PaginationProps {
   total?: number;
   /* 页码改变的回调 */
   onChange?: (offset: number) => void;
+
+  /* 自定义 classname */
+  wrapperClass?: string;
 }
 
 function calculatePage(pageSize: number, total: number): number {
@@ -25,6 +28,7 @@ const Pagination: FC<PaginationProps> = ({
   currentPage = 1,
   pageSize = 30,
   total = 0,
+  wrapperClass,
   ...restProps
 }) => {
   const [current, setCurrent] = useState(() => currentPage);
@@ -108,7 +112,7 @@ const Pagination: FC<PaginationProps> = ({
     }
   }
   return (
-    <ul className='bgm-pagination' data-testid='pagination-wrapper'>
+    <ul className={cn('bgm-pagination', wrapperClass)} data-testid='pagination-wrapper'>
       {prevButton}
       {pagerList}
       {nextButton}

packages/design/components/RichContent/index.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface RichTextProps {
+export interface RichContentProps {
   html: string;
   classname?: string;
 }
 
-const RichContent: React.FC<RichTextProps> = ({ html, classname }) => {
+const RichContent: React.FC<RichContentProps> = ({ html, classname }) => {
   return (
-    <article
+    <div
       className={classNames('bgm-rich-content', classname)}
       dangerouslySetInnerHTML={{ __html: html }}
     />

packages/design/components/RichContent/style/index.less

@@ -9,4 +9,8 @@
     color: @blue-100;
     text-decoration: none;
   }
+
+  img {
+    max-width: 99%;
+  }
 }

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<SectionProps>) => {
+const Section = ({
+  title,
+  wrapperClass,
+  children,
+  renderFooter,
+}: PropsWithChildren<SectionProps>) => {
   return (
-    <div className='bgm-section'>
+    <div className={classnames('bgm-section', wrapperClass)}>
       <h3 className='bgm-section__title'>{title}</h3>
       {children}
       {renderFooter && <div className='bgm-section__footer'>{renderFooter()}</div>}

packages/design/components/Topic/Comment.stories.tsx

@@ -0,0 +1,76 @@
+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';
+import mockedCurrentUser from './__test__/fixtures/user.json';
+import type { CommentProps } from './Comment';
+import Comment from './Comment';
+
+export default {
+  title: 'Topic/Comment',
+  component: Comment,
+};
+
+const Template: ComponentStory<typeof Comment> = (args: CommentProps & { states?: State[] }) => {
+  // 0 正常评论 6 被用户删除 7 违反社区指导原则，已被删除
+  // 1 关闭 2 重开 5 下沉
+  return (
+    <div style={{ width: 913 }}>
+      {(args.states ?? [0]).map((state, idx) => (
+        <div key={idx} style={{ marginBottom: 20 }}>
+          <h1>State: {state}</h1>
+          <Comment {...args} state={state} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const SingleComment = Template.bind({});
+
+SingleComment.args = {
+  ...singleComment,
+  isReply: false,
+  is_friend: true,
+  originalPosterId: 1,
+  created_at: String(new Date()),
+  floor: 2,
+  states: [State.Normal, State.DeletedByUser, State.DeletedByAdmin],
+} as any;
+
+export const CommentWithReplies = Template.bind({});
+CommentWithReplies.args = {
+  ...repliesComment,
+  isReply: false,
+  is_friend: false,
+  created_at: String(new Date()),
+  floor: 2,
+} as any;
+
+export const SelfComment = Template.bind({});
+
+const selfUser = { ...mockedCurrentUser, id: 1 };
+
+SelfComment.args = {
+  ...singleComment,
+  isReply: false,
+  is_friend: false,
+  created_at: String(new Date()),
+  user: selfUser,
+  floor: 2,
+} as any;
+
+export const SpecialComment = Template.bind({});
+
+SpecialComment.args = {
+  ...specialComment,
+  isReply: false,
+  is_friend: false,
+  created_at: String(new Date()),
+  floor: 2,
+  states: [State.Closed, State.Reopen, State.Silent],
+} as any;