bangumi / frontend Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://next.bgm38.com/
License: BSD 3-Clause "New" or "Revised" License
Home Page: https://next.bgm38.com/
License: BSD 3-Clause "New" or "Revised" License
按照设计稿右边栏应该在输入框下方,如果用 Layout 那样的左右布局就不好对齐了,所以用 grid 比较合适
包括小组讨论页其实也应该是这个布局,现在用 Layout 就会有主楼时间跟下面不对齐的情况
Originally posted by @y-young in #320 (comment)
如果在完成 hcaptcha 的状态的情况下登录失败(如错误的密码),再次输入正确的密码会提示 hcaptcha 无效。应该在登录失败的时候重置 hcaptcha,让用户重新完成验证。
design 中 storybook 的 vite builder 也被已经官方吸收提供支持,可以同时将 storybook-builder-vite 迁移为 @storybook/builder-vite
Ref:
另外发现在 infobox
中, k
可以没有而只有 v
CharacterID321
os: win11 22h2
node: 16.14.2
pnpm: 7.12.1
pnpm i
&& pnpm design:doc
出错builder-vite
应该还无法在 pnpm 完美运行,需要解决幽灵依赖问题。tsconfig.json
是否应位于 design 包根目录(现位于.storybook 是导致上图错误的原因)module
选项应为 compilerOptions
的子选项❓但根据 #106 里的信息,文档是成功构建的,这中间发生了什么...
tsconfig.json
的问题Line 25 in 7f94311
types
在项目中非显示依赖,pnpm 没有shamefully-hois时会报错在按钮内的文字区域外点击无效果,如小组概览按钮
关联讨论: #313
设计: https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=1272%3A3740&t=tKoW0IziY9Rn1FBQ-0
TODO:
设计稿 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
无头像小组不应该展示小组头像
如:https://bangumi.tv/group/1
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 继续做...
bbcode parser 里被解析成了 https://lain.bgm.tv/img/smiles/bgm/11.png 导致这个表情无法显示
需要添加 api mock 吗,比如 msw
Originally posted by @cijiugechu in #12 (comment)
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 |
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@vitest/coverage-v8
, @vitest/ui
, vitest
)@types/react
, @types/react-dom
, react
, react-dom
)@remix-run/router
, react-router-dom
)@storybook/addon-essentials
, @storybook/addon-links
, @storybook/builder-vite
, @storybook/manager-api
, @storybook/react
, @storybook/react-vite
, @storybook/theming
, storybook
)@testing-library/jest-dom
, @testing-library/react
)node
, @types/node
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
, eslint
, eslint-config-prettier
, eslint-config-standard
, eslint-import-resolver-typescript
, eslint-plugin-import
, eslint-plugin-promise
, eslint-plugin-react
, eslint-plugin-react-hooks
, eslint-plugin-unicorn
)@storybook/addon-essentials
, @storybook/addon-links
, @storybook/builder-vite
, @storybook/manager-api
, @storybook/react
, @storybook/react-vite
, @storybook/theming
, storybook
)@testing-library/jest-dom
, @testing-library/react
)@vitest/coverage-v8
, @vitest/ui
, vitest
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
, eslint
, eslint-config-prettier
, eslint-config-standard-with-typescript
, eslint-plugin-n
, eslint-plugin-simple-import-sort
, eslint-plugin-unicorn
, eslint-plugin-unused-imports
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.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
.node-version
node 20.13.1
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
用单测测试一个完整的页面太复杂,依赖和隐式依赖多,是否考虑引入 e2e 测试?
小 icon 越来越多了,可能影响加载效果。
还缺少的:
虽然现在应该不会考虑支持超合金组件,不过感觉还是有必要讨论一下这个问题,不希望新站点一出来所有超合金组件全都没法维护了。姑且先开个 Issue。
我想到两点需要考虑:
类名。超合金组件经常需要查找页面元素,如果新站点仅仅是布局变了,那组件作者跟进修改一下就好,但是新站点使用了 CSS Modules,页面元素的类名会有易变动的后缀,不方便解析,也比较影响组件代码的可读性。我觉得需要想个方法规避这个问题。比如,专门添加一个类,不添加样式,只为了方便组件通过类名查找元素?
参考 @FoundTheWOUT 在 bangumi/server#266 (comment) 提供的思路:
- 区分网站样式与 design 包样式,比如加个前缀
_website_
- website 包下的组件样式可以直接取组件名作为 suffix
- 而页面样式比如 index.module.less 或者 style.module.less 可以从路径入手,也可以按照某种约定(比如路由地址)修改现有样式名,再直接用该名作为 suffix。
前端API。添加一个 API 方便超合金组件创建风格统一的页面元素,比如按钮、标签、菜单等。类似于 chiiLib
(虽然 chiiLib
好像没有创建页面元素的功能)?
@y-young 感觉 compact Form 的样式看得有点费劲。我觉得可以按这里说的去调下。
现在的话看起来是 Input 的样式由 Form 的 compact 模式注入进来的类名而发生了变化,Form 不应该去处理后代的样式,Form 提供状态就好了,后代在 compact 里长什么样应该它自己去处理,如果有重复的样式可以考虑抽离出来。这样处理的好处是如果新增样式和组件自己的样式发生了冲突,我们可以在组件自己的样式文件里进行调整。另外 useInFormContext
也不太必要,靠 css 是完全足够的,也是清晰的。
具体可以看下 design/Select
和 design/Input.Group
的关系。
看了一下现在的测试文件有 *.test.tsx?
, *.spec.tsx?
两种文件名。
测试用例也有 it
和 test
的。
是否要统一一下?
页面设计:https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=3101%3A10839&t=W5OYcWukJRZmFrVQ-0
Website 组件/物料:
物料设计: https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=16%3A450
页面:
高级模式使用 monaco editor,wiki 语法的 tokenizer 可以参考
https://next.bgm.tv/demo/subject/184017/edit
不要使用生产 API 进行测试和开发
每个页面应该设置不同的标题
不知道除了 react-helmet 之外还有没有更好的办法?
/group/[name]
group/[name]/forum
group/[name]/members
关联页面
个人页 -> 旧站
讨论详情页 -> 旧站
小组页 -> 新站
设计:https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=0%3A1
https://bangumi-next.netlify.app/group/topic/371602
本地开发(dev或者preview)都是正常的,但是打包并上传到 netlify 之后无法正常显示。
应该也不是 netlify 的路由问题,返回的内容和首页是一样的
这个前端项目是要做什么的呀,是要嵌到 bgm 里面的吗?还是要重构整个网站呀?
看到RichContent
里用了dangerouslySetInnerHTML
突发奇想,随手一测还真有问题
https://pr-269-sites--bangumi-next.netlify.app/group/topic/371602#post_2177438
现在 Typography/Link 这个组件依赖了 react-router-dom
,感觉 design 包只负责样式比较好,业务逻辑在 website 里做就好了
在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)
感觉现在 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。
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
design: https://www.figma.com/file/jW61odhQl5lZzhY4CqvvSF/Web-Page?node-id=3109%3A10750&t=3RdySxIfHWZoRwsG-0
API:
https://next.bgm.tv/p1/#/wiki/uploadSubjectCover
https://next.bgm.tv/p1/#/wiki/listSubjectCovers
https://next.bgm.tv/p1/#/wiki/voteSubjectCover
目前允许上传 .webp,.jpg,.jpeg,.png
后缀名的图片,图片原始大小应该小于4mb
只要不是127.0.0.1就可以正常过hcaptcha,所以不需要像现在的贡献说明一样改host,直接pnpm dev --host
就行
slack里面提到把登录页面的错误提示提取为公共组件
感觉可以为toast添加不同的类型,如info/error(甚至warning),用这个作为error toast的显示效果。info toast则继续用现在灰色的效果。
比如用于显示比如400/401相应中的错误信息。
这个 Issue 列出正式开发前待讨论/待解决的问题:
欢迎补充
现 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 应该不太行,感觉会连接会有一定问题
@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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.