The frontend from bangumi

开发启动前的待解决问题

这个 Issue 列出正式开发前待讨论/待解决的问题：

CSS 预处理/后处理：LESS 好了
CSS linter？
贡献指南 #26
Mock 框架：msw
使用 husky / 配合 husky，增加 eslint、commitlint

欢迎补充

website: 登录失败后应该重置 hcaptcha 的状态

如果在完成 hcaptcha 的状态的情况下登录失败（如错误的密码），再次输入正确的密码会提示 hcaptcha 无效。应该在登录失败的时候重置 hcaptcha，让用户重新完成验证。

design: Typography/Link 依赖问题

现在 Typography/Link 这个组件依赖了 react-router-dom，感觉 design 包只负责样式比较好，业务逻辑在 website 里做就好了

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@types/testing-library__jest-dom`
npm	`eslint-config-standard-with-typescript`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/actions/setup-js-env/action.yaml

actions/setup-node v4

actions/cache v4

.github/workflows/build.yml

actions/checkout v4

actions/upload-artifact v4

.github/workflows/e2e-test.yml

actions/checkout v4

actions/upload-artifact v4

.github/workflows/lint.yml

actions/checkout v4

.github/workflows/preview.yaml

actions/checkout v4

.github/workflows/release.yml

actions/checkout v4

actions/checkout v4

.github/workflows/storybook-build.yml

actions/checkout v4

actions/upload-artifact v4

.github/workflows/todo.yaml

actions/checkout v4

alstr/todo-to-issue-action v4

.github/workflows/unit-test.yml

actions/checkout v4

codecov/codecov-action v3

.github/workflows/update-types.yml

actions/checkout v4

peter-evans/create-pull-request v6

nodenv

.node-version

node 20.13.1

npm

package.json

@actions/core ^1.10.1

@actions/exec ^1.1.1

@actions/github ^5.1.1

@octokit/openapi-types ^17.1.0

@testing-library/jest-dom ^5.16.5

@testing-library/react ^14.0.0

@types/node ^20.12.12

@types/testing-library__jest-dom ^5.14.9

@types/web ^0.0.114

@typescript-eslint/eslint-plugin ^5.59.1

@typescript-eslint/parser ^5.59.1

@vitejs/plugin-react ^4.0.4

@vitest/coverage-v8 ^0.34.1

@vitest/ui ^0.34.1

eslint ^8.39.0

eslint-config-prettier ^8.8.0

eslint-config-standard ^17.0.0

eslint-config-standard-jsx ^11.0.0

eslint-config-standard-react ^13.0.0

eslint-config-standard-with-typescript ^34.0.1

eslint-import-resolver-typescript ^3.5.5

eslint-plugin-import ^2.27.5

eslint-plugin-n ^15.7.0

eslint-plugin-promise ^6.1.1

eslint-plugin-react ^7.32.2

eslint-plugin-react-hooks ^4.6.0

eslint-plugin-simple-import-sort ^10.0.0

eslint-plugin-unicorn ^46.0.0

eslint-plugin-unused-imports ^2.0.0

husky ^8.0.3

jsdom ^21.1.1

lint-staged ^13.2.2

postcss ^8.4.31

postcss-less ^6.0.0

prettier ^3.0.3

react ^18.2.0

react-dom ^18.2.0

stylelint ^15.6.0

stylelint-config-css-modules ^4.2.0

stylelint-config-standard ^31.0.0

stylelint-scss ^4.7.0

timezone-mock ^1.3.6

tsx ^3.12.7

typescript ^5.0.4

vite ^4.5.2

vite-plugin-svgr ^2.4.0

vitest ^0.34.1

vitest-github-actions-reporter ^0.10.0

whatwg-fetch ^3.6.2

pnpm 8.3.1

packages/client/package.json

oazapfts ^4.12.0

@apidevtools/json-schema-ref-parser ^10.1.0

@faker-js/faker ^7.6.0

change-case ^4.1.2

js-yaml ^4.1.0

msw ~1.2.5

node-fetch ^3.3.2

openapi-types ^12.1.3

openapi-typescript ^6.3.4

packages/design/package.json

dayjs ^1.11.9

eventemitter3 ^5.0.1

react ^18.2.0

react-dom ^18.2.0

reset-css ^5.0.2

@storybook/addon-essentials ^7.0.7

@storybook/addon-links ^7.0.7

@storybook/builder-vite ^7.0.7

@storybook/manager-api ^7.0.7

@storybook/react ^7.0.7

@storybook/react-vite ^7.0.7

@storybook/theming ^7.0.7

@testing-library/react ^14.0.0

@types/lodash ^4.14.197

@types/react ^18.2.0

@types/react-dom ^18.2.1

classnames ^2.3.2

less ^4.1.3

lodash ^4.17.21

msw ~1.2.5

react-hook-form ^7.43.9

react-router-dom ^6.11.0

storybook ^7.0.7

typescript ^5.0.4

vite ^4.5.2

vite-plugin-svgr ^2.4.0

lodash ^4.17.21

react-router-dom ^6.11.0

packages/icons/package.json

react ^18.2.0

react-dom ^18.2.0

@storybook/react ^7.0.7

@types/react ^18.2.0

typescript ^5.0.4

packages/server/package.json

packages/utils/package.json

@bgm38/wiki ^0.2.6

lodash ^4.17.21

nanoid ^4.0.2

@types/js-yaml ^4.0.7

@types/lodash ^4.14.197

@types/react ^18.2.0

js-yaml ^4.1.0

typescript ^5.0.4

packages/website/package.json

@marsidev/react-turnstile ^0.2.4

@remix-run/router ^1.6.0

classnames ^2.3.2

dayjs ^1.11.9

lodash ^4.17.21

monaco-editor ^0.37.1

nanoid ^4.0.2

oazapfts ^4.12.0

react ^18.2.0

react-beautiful-dnd ^13.1.1

react-dom ^18.2.0

react-helmet-async ^1.3.0

react-hook-form ^7.43.9

react-router-dom ^6.11.0

reset-css ^5.0.2

rooks ^7.14.0

socket.io-client ^4.7.2

swr ^2.1.5

@playwright/test ^1.36.0

@testing-library/react ^14.0.0

@types/lodash ^4.14.197

@types/react ^18.2.0

@types/react-beautiful-dnd ^13.1.4

@types/react-dom ^18.2.1

@vitejs/plugin-react ^4.0.4

autoprefixer ^10.4.15

babel-plugin-jsx-remove-data-test-id ^3.0.0

babel-plugin-lodash ^3.3.4

less ^4.1.3

msw ~1.2.5

openapi-types ^12.1.3

postcss ^8.4.31

postcss-less ^6.0.0

typescript ^5.0.4

vite ^4.5.2

vite-plugin-pages ^0.29.0

vite-plugin-svgr ^2.4.0

Check this box to trigger a request for Renovate to run again on this repository

website: 小组讨论详情页

设计： https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=1272%3A3740&t=tKoW0IziY9Rn1FBQ-0

TODO：

同步设计稿新改动
reactions

reactions

设计稿 https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF?node-id=1376:5183#414367557
API 见新响应新字段 #540
这里的值跟具体表情之间要map好几次，我不太清除为什么sai老板一开始要这么写...
https://github.com/trim21/bangumi-server-private/blob/478f6d8e298c434a197c13456b160a46f606e9dd/lib/orm/entity/like.ts#L33

tests warning on ref

#225

在LoginPage加了useRef之后在测试多了个warning，我不太熟悉react，这里不知道怎么修

 PASS  packages/website/src/pages/login/index.spec.tsx
  ● Console

    console.error
      Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

      Check the render method of `Login`.
          at onVerify (C:\Users\Trim21\proj\bangumi\frontend\packages\website\src\pages\login\index.spec.tsx:11:74)
          at div
          at div
          at div
          at useState (C:\Users\Trim21\proj\bangumi\frontend\packages\website\src\pages\login\index.tsx:16:51)
          at children (C:\Users\Trim21\proj\bangumi\frontend\packages\website\src\hooks\use-user.tsx:45:61)

      36 |   mockedUseNavigate.mockReturnValue(mockedNavigate);
      37 |
    > 38 |   const { getByPlaceholderText, getByText } = render(
         |                                                     ^
      39 |     <UserProvider>
      40 |       <LoginPage />
      41 |     </UserProvider>,

Originally posted by @trim21 in #225 (comment)

docs: 在贡献指南注明开发服务器中的样例条目

https://github.com/bangumi/frontend/blob/master/CONTRIBUTING.md
https://bangumi.github.io/dev-docs/
https://github.com/bangumi/dev-docs

Tracking Issue: 维基编辑页

页面设计：https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=3101%3A10839&t=W5OYcWukJRZmFrVQ-0

Website 组件/物料：

Header #52
Footer #56

物料设计： https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=16%3A450

页面：

高级模式使用 monaco editor，wiki 语法的 tokenizer 可以参考

https://next.bgm.tv/demo/subject/184017/edit

https://github.com/bangumi/GraphQL/blob/f4a11f12205aa29ef21f8ba038feda4ea466e317/lib/static/editor.js

类型应该按条目类别区分
动画信息支持 wiki 模式与入门模式编辑
字段校验待补充
修改成功跳转【被编辑条目的首页】（没做）

不要使用生产 API 进行测试和开发

Tracking Issue: 发帖/回帖

设计 https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=2165%3A9278&t=zgxJTzwQ91eTTkE5-0

API https://next.bgm.tv/p1/#/default/createNewGroupTopic

https://next.bgm.tv/p1/#/default/createGroupReply

生产环境会污染主站，所以请用stage api进行开发...

回帖 #256
发帖 #320

build: 升级 vite 3

design 中 storybook 的 vite builder 也被已经官方吸收提供支持，可以同时将 storybook-builder-vite 迁移为 @storybook/builder-vite

Ref:

Tracking Issue: 通知

设计稿

api: https://github.com/bangumi/GraphQL/blob/master/docs/socket.io.md#获取通知

现在用的是socket.io，可以在websocket不能工作的情况下fallback回polling。

~~但我们并不需要全双工，而且cf的服务器支持HTTP2/HTTP3，所以也可以考虑用sse。~~

netlify 不能代理 sse，还是用socket.io 吧

可以基于 #239 继续做...

Bug(bbcode): converterMap 在某些情况下不能正常工作

  test('render code by custom converter, nested', () => {
    const input = '[b][url]qq[/url][/b]';
    expect(
      render(input, {
        url: (node) => {
          return '[url]convert map[/url]';
        },
      }),
    ).toBe('<strong>[url]convert map[/url]</strong>');
  });

 PASS  packages/website/src/hooks/use-pagination.spec.tsx
 FAIL  packages/utils/bbcode/__test__/html.test.ts
  ● html render bbcode string › render code by custom converter

    expect(received).toBe(expected) // Object.is equality

    Expected: "<strong>[url]convert map[/url]</strong>"
    Received: "<strong>[url]qq[/url]</strong>"

      249 |         },
      250 |       }),
    > 251 |     ).toBe(
          |       ^
      252 |       '<strong>[url]convert map[/url]</strong>',
      253 |     );
      254 |   });

      at Object.toBe (packages/utils/bbcode/__test__/html.test.ts:251:7)

也可以直接用这个 branch，这个case已经放在里面了 https://github.com/bangumi/frontend/compare/bbcode/convert-map-nested?expand=1

UX: 维基编辑页面提交后没有用户反馈

https://sites--bangumi-next.netlify.app/subject/363612/wiki/edit_detail

错误响应应该弹一个toast

api返回的命名方式是下划线分隔，在类型定义中是采用驼峰命名还是保证和api一致

另外发现在 infobox 中， k 可以没有而只有 v
CharacterID321

使用 husky hooks 强制运行 lint 等检查

待讨论/待解决的问题：

使用 husky
配合 husky，增加 eslint、commitlint

Originally posted by @ubbcou in #12 (comment)

bug: 登录的错误不符合实际的错误信息

@Ayase-252 这个登录的逻辑不太对.........

Originally posted by @trim21 in #141 (comment)

website: header 登录按钮应该有 hover 态

Refs: https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=1376%3A5181

CSS 规范/兼容浏览器问题

组件库不使用 CSS Module, 但仍需要一定规范避免组件库内的类名冲突，如 BEM， #39 里类似这种命名规范？
根据 Slack 里 Sai 老板给的用户浏览器分布，可以确定下支持浏览器的范围（IE 可以不支持了！bgm38）
- Edge
- Chrome
- Firefox
- Andriod
- iOS

国产移动端浏览器，个人是感觉...不用兼容，开发起来问题挺多的。（但是修复问题的 PR 是欢迎的）

Refs:

感觉现在 react-router-dom 6.2 + vite-plugin-pages 这种组合下来的开发模式，导致页面闪烁（白屏）挺严重的。现在 pages 里的 importMode 用了 async 模式，导致 App.tsx 必须套一层 Suspense。在我们去缓存了的页面还好，但去新页面的时候必然导致白屏，而且这种把整个页面套进 Suspense 里以后也不好做过渡。

比较理想的是 Next 那种 Link，加载好数据后再切换页面 ~~（但这样是不是和 #12 中打算做 SPA 有点背道而驰了，现在感觉是嘴上说着做 SPA 但代码里处处是 MPA）~~ ，react-router-dom 中貌似要 6.4 才能实现这种效果。而又由于 vite-plugin-pages 的限制没那么好升级 react-router-dom。

顶部导航栏 logo 春菜应该从 5 种中随机显示一种

设计稿：https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=16%3A450

(bgm11) 表情后缀应为 .gif

bbcode parser 里被解析成了 https://lain.bgm.tv/img/smiles/bgm/11.png 导致这个表情无法显示

有的小组没有头像，无头像小组不应该展示小组头像

无头像小组不应该展示小组头像
如：https://bangumi.tv/group/1

Bug(website): BBCode渲染有XSS攻击漏洞

看到RichContent里用了dangerouslySetInnerHTML突发奇想，随手一测还真有问题

https://pr-269-sites--bangumi-next.netlify.app/group/topic/371602#post_2177438

统一测试写法

看了一下现在的测试文件有 *.test.tsx?, *.spec.tsx? 两种文件名。

测试用例也有 it 和 test 的。

是否要统一一下？

website: 替换 axios

网站页脚BUG。

Module:footer
Description:鼠标能在红色范围内的任意位置触发对这个链接的点击，并设计稿上的鼠标悬浮下划线未生效。

website: 根据hash高亮评论

类似于这个效果

https://bgm.tv/group/topic/375784#post_2177177

现在没有设计稿，可以考虑先复制主站的设计

Bug(website): 响应式设计及移动端适配

宽度按设计稿写死还是不太优雅

style: enable some eslint rule

#198
@typescript-eslint/no-non-null-assertion
@typescript-eslint/no-floating-promises
@typescript-eslint/no-implicit-any-catch
@typescript-eslint/triple-slash-reference
@typescript-eslint/promise-function-async

design: Form 样式

@y-young 感觉 compact Form 的样式看得有点费劲。我觉得可以按这里说的去调下。
现在的话看起来是 Input 的样式由 Form 的 compact 模式注入进来的类名而发生了变化，Form 不应该去处理后代的样式，Form 提供状态就好了，后代在 compact 里长什么样应该它自己去处理，如果有重复的样式可以考虑抽离出来。这样处理的好处是如果新增样式和组件自己的样式发生了冲突，我们可以在组件自己的样式文件里进行调整。另外 useInFormContext 也不太必要，靠 css 是完全足够的，也是清晰的。
具体可以看下 design/Select 和 design/Input.Group 的关系。

网站字体与使用问题

现 figma 设计稿上使用字体：

font-family: 'Source Han Sans SC';

网站上现使用字体：

font-family: 'Noto Sans SC',
system-ui, -apple-system, BlinkMacSystemFont,
Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

老 bgm 使用字体：

font-family: 'SF Pro SC','SF Pro Display','PingFang SC','Lucida Grande','Helvetica Neue',Helvetica,Arial,Verdana,sans-serif,"Hiragino Sans GB"

这个 issue 主要讨论解决使用什么字体，然后如何使用？ Web Font 应该不太行，感觉会连接会有一定问题

Bug: 应动态设置页面标题

每个页面应该设置不同的标题

不知道除了 react-helmet 之外还有没有更好的办法？

feat: 考虑支持超合金组件

虽然现在应该不会考虑支持超合金组件，不过感觉还是有必要讨论一下这个问题，不希望新站点一出来所有超合金组件全都没法维护了。姑且先开个 Issue。

我想到两点需要考虑：

类名。超合金组件经常需要查找页面元素，如果新站点仅仅是布局变了，那组件作者跟进修改一下就好，但是新站点使用了 CSS Modules，页面元素的类名会有易变动的后缀，不方便解析，也比较影响组件代码的可读性。我觉得需要想个方法规避这个问题。比如，专门添加一个类，不添加样式，只为了方便组件通过类名查找元素？
参考 @FoundTheWOUT 在 bangumi/server#266 (comment) 提供的思路：
1. 区分网站样式与 design 包样式，比如加个前缀 _website_
2. website 包下的组件样式可以直接取组件名作为 suffix
3. 而页面样式比如 index.module.less 或者 style.module.less 可以从路径入手，也可以按照某种约定（比如路由地址）修改现有样式名，再直接用该名作为 suffix。
前端API。添加一个 API 方便超合金组件创建风格统一的页面元素，比如按钮、标签、菜单等。类似于 chiiLib（虽然 chiiLib 好像没有创建页面元素的功能）？

参考：bangumi/server#266

环境

os: win11 22h2
node: 16.14.2
pnpm: 7.12.1

`pnpm i` && `pnpm design:doc` 出错

根据 storybookjs/builder-vite#55 ，builder-vite 应该还无法在 pnpm 完美运行，需要解决幽灵依赖问题。
tsconfig.json 是否应位于 design 包根目录（现位于.storybook 是导致上图错误的原因）
frontend/packages/design/.storybook/tsconfig.json

Line 3 in 7f94311

"module": "commonjs"

配置疑似错误，module 选项应为 compilerOptions 的子选项