feat(website): wiki/edit_detail #312

FoundTheWOUT · 2023-01-11T11:53:06Z

做得差不多了，各位大大可以点 https://pr-312-sites--bangumi-next.netlify.app/subject/363612/wiki/edit_detail 多测试测试哈，改动有点大 bgm38

ref #53

新增

新增 Radio 组件
新增 Select 组件
新增 Input.Group 组件
新增 Form 组件，只封装了样式，逻辑在 website 使用 react-hook-form 实现
新增 404 页面

修改

Input 组件样式
Nav 组件拆分成 Nav.Group 和 Nav.Item。Nav 保留原来的用法，只是现在可以更灵活的控制 active
关闭了 StrictMode，这功能会导致开发阶段 react-beadutify-dnd 异常

TODO

一些问题

~~确认下工作量，我这个 PR 是只做原站的 /subject/xx/edit_detail 页面吗。还是说把整个 wiki 编辑的所有页面都做了 @trim21~~
路由是必须按照原站的写吗，原站的一些路由有些问题，比如 /subject/xx/edit 是历史记录等等。另外，由于 wiki 页面的路由和 subject 页面的路由混在一起了，也导致一些组件复用问题。如果不需要百分百复刻原站的话，使用 /subject/xxx/wiki/xxx 可能更好

trim21 · 2023-01-11T11:54:08Z

确认下工作量，我这个 PR 是只做原站的 /subject/xx/edit_detail 页面吗。还是说把整个 wiki 编辑的所有页面都做了

我觉得一个页面一个PR比较好，而且关联投票啥的API都还没做…

路由是必须按照原站的写吗，原站的一些路由有些问题，比如 /subject/xx/edit 是历史记录等等。另外，由于 wiki 页面的路由和 subject 页面的路由混在一起了，也导致一些组件复用问题。如果不需要百分百复刻原站的话，使用 /subject/xxx/wiki/xxx 可能更好

不用完全复刻

github-actions · 2023-01-11T11:55:37Z

Preview Deployment

Storybook https://pr-312-storybook--bangumi-next.netlify.app

Sites https://pr-312-sites--bangumi-next.netlify.app

trim21 · 2023-01-11T12:01:14Z

Select 组件尚未设计

这里的 select 有设计吧？

FoundTheWOUT · 2023-01-11T12:09:44Z

这里的 select 有设计吧？

你是指 Header 那个吗，那个只是导航栏是这样吧，通用的 Select 也按照那个吗

trim21 · 2023-01-11T12:15:31Z

不对，我傻了，把select和radio弄混了

那这里也 @vistaing

vistaing · 2023-01-11T12:27:36Z

这里的 select 有设计吧？

你是指 Header 那个吗，那个只是导航栏是这样吧，通用的 Select 也按照那个吗

目前建议先使用浏览器默认样式，若后续确有需要，再参照 Header 的 hover 菜单来设计一个，我个人是觉得浏览器默认的样式差不多够用

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

…i-edit

packages/design/components/Tab/index.tsx

…i-edit

packages/utils/wiki.ts

trim21 · 2023-01-14T02:25:53Z

还有个功能，如果觉得麻烦留成TODO也可以

记忆入门模式和高级模式，如果用户切换到高级模式，下次进入编辑页面默认使用高级模式打开

Ayase-252 · 2023-01-23T15:52:52Z

packages/design/theme/variables.less

@@ -2,6 +2,8 @@

 @primary-color: #f09199;

+@bg-gray-10: #fcfcfc;


这是设计稿里给的名字吗？我看给的是

我看错了，感觉有点迷，这里background好像没有色系，cc @vistaing
图里的是子项目输入框

packages/website/src/components/ErrorBoundary.tsx

packages/website/src/components/GlobalLayout/style.module.less

packages/website/src/components/Header/style.module.less

packages/website/src/components/WikiEditor/WikiEditor.tsx

packages/website/src/pages/index/group/common.module.less

packages/website/src/pages/index/subject/[id]/components/WikiLayout.tsx

packages/website/src/pages/index/subject/[id]/wiki.tsx

packages/website/src/pages/index/subject/[id]/wiki/edit.tsx

packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx

2. remove wikItem when key ctrl+x|X down 3. use class instead of inline style

Ayase-252 · 2023-01-24T15:34:53Z

packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx

+                <div
+                  className={style.Tips}
+                  style={{ display: editorType === EditorType.Beginner ? 'block' : 'none' }}
+                >
+                  <div>Tips:</div>
+                  <div>可拖拽改变行顺序</div>
+                  <div>
+                    按<kbd>Ctrl</kbd>+<kbd>Enter</kbd>切换为二级项目
+                  </div>
+                  <div>
+                    按<kbd>Ctrl</kbd>+<kbd>X</kbd>可删除项目
+                  </div>
+                </div>
+
+                {/* 入门编辑模式 */}
+                <div hidden={editorType !== EditorType.Beginner}>
+                  <WikiInfoContext.Provider
+                    value={{
+                      els: wikiElement,
+                      addOneWikiElement,
+                      removeOneWikiElement,
+                      editOneWikiElement,
+                      switchWikiElementToArray,
+                    }}
+                  >


{editorType === EditorType.Biginner && <>{// 里面的内容 }</>}

直接不渲染，不用 display: none 可以吗？

当时是想有可能切换得比较频繁，但具体我也不清楚维基人的日常操作（，如果切换得比较少，可以直接不渲染。

packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx

Ayase-252 · 2023-01-24T15:44:02Z

packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx

+    wikiRef.current = parseWiki(subjectWikiInfo.infobox);
+    monoEditorInstanceRef.current?.setValue(subjectWikiInfo.infobox);
+    setWikiElement(toWikiElement(wikiRef.current));
+  }, []);


lint 的 deps 补一下吧

这个 effect 只有第一次跑，如果 subjectWikiInfo.infobox （api 来的数据）变了也不应该重新跑的吧，感觉涉及到编辑冲突的一些问题。另外就是 WikiEditor 那边的 effect 也是，编辑器应该实例化一次就好了，defaultValue 只影响初始状态，如果 defaultValue 变了不应该重新实例化编辑器，应该是没反应。若需要修改编辑器的值，应该通过 api，而不是更新 defaultValue。

不会多次请求 subjectWikiInfo 吧？对于接口请求这类，请求之前是个 undefined，请求后才有数据是很常见的场合

确实不会，只是想表达这个 effect 应该只运行一次，无论什么情况 re-render，都不应该重新跑（

Ayase-252 · 2023-01-25T07:18:36Z

packages/utils/wiki.ts

+    if (isEmpty(el.value) && isEmpty(el.key)) continue;
+    const value = el.value;
+    const initWikiItemValue = typeof value === 'string' ? value : '';
+    const item = new WikiItem(el.key ?? '', initWikiItemValue, 'object');


value 是数组的时候，可以用 WikiItem 的 type 参数吧？手动写 item.array 有点依赖 wiki-parser 的内部实现了？

wiki-parser也是我们写的，需要的话可以改…（

写成现在这个样主要为了照顾静态语言的JSON序列化和反序列化…

我在想有没有可能这里写成 const item = isArray(values) ? new WikiItem(..,.., 'array') : new WikiItem(..,.., 'object')... 如果上游能够分开最好（

我在想有没有可能这里写成 const item = isArray(values) ? new WikiItem(..,.., 'array') : new WikiItem(..,.., 'object')...

不太行，WikiItem 构造函数签名问题。估计 server 那边也有依赖 wiki-parser 吧。

写成现在这个样主要为了照顾静态语言的JSON序列化和反序列化…

没有太理解这个🤔，静态语言是指？

这是按着之前go版本的写的（

packages/utils/wiki.ts

packages/utils/wiki.spec.ts

packages/utils/wiki.ts

trim21 · 2023-01-25T12:01:45Z

这种转高级模式的时候是不是考虑合并一下？

trim21 · 2023-01-25T12:05:20Z

还是先保持原样吧，后面再说了（

Ayase-252 · 2023-01-26T07:51:09Z

packages/website/src/shared/wiki.ts

+
+export const WikiEditTabsItemsByKey = keyBy(WikiEditTabsItems, 'key');
+
+export const getWikiTemplate = (subjectType: number, targetTemplate: string | undefined) => {


这个函数能注释下吗？targetTemplate 是干啥的？

不知道有没有写清楚，写得稍微有点绕。

Ayase-252

上面的注释后没啥问题了

FoundTheWOUT added 5 commits January 10, 2023 23:35

lot of stuff

6be3651

form basic

7171f82

fix(comp): input style

cd577a6

Radio and Select

66f1911

WIP

4f4c20a

pull-request-size bot added the size/XXL label Jan 11, 2023

FoundTheWOUT changed the title ~~feat(website): wiki~~ feat(website): wiki/edit_tail Jan 11, 2023

trim21 reviewed Jan 11, 2023

View reviewed changes

packages/design/components/Radio/style/index.tsx Show resolved Hide resolved

FoundTheWOUT added 4 commits January 12, 2023 11:55

move into wiki path

37eb149

Merge branch 'master' of https://github.com/bangumi/frontend into wik…

1a05bbc

…i-edit

WIP

4d30e50

WIP

e4da1de

y-young reviewed Jan 13, 2023

View reviewed changes

packages/design/components/Tab/index.tsx Outdated Show resolved Hide resolved

FoundTheWOUT added 4 commits January 13, 2023 15:57

move icon

81b2955

WIP

92a4e5c

Merge branch 'master' of https://github.com/bangumi/frontend into wik…

f52be6b

…i-edit

fix dep

ae8c701

trim21 reviewed Jan 13, 2023

View reviewed changes

packages/utils/wiki.ts Outdated Show resolved Hide resolved

trim21 reviewed Jan 13, 2023

View reviewed changes

packages/utils/wiki.ts Show resolved Hide resolved

toWikiElement use map

f00f952

FoundTheWOUT added 3 commits January 14, 2023 23:18

basic func!!!

0fb3936

Update Snapshot

0f1e79b

tag template

76f1135

Ayase-252 reviewed Jan 23, 2023

View reviewed changes

FoundTheWOUT added 3 commits January 24, 2023 12:40

ErrorBoundary types

4324438

header style

380e7d1

ts-expect-error

5d31663

Ayase-252 reviewed Jan 24, 2023

View reviewed changes

FoundTheWOUT added 6 commits January 24, 2023 15:10

doc

5ce444d

set font size, header style

bf7d31b

update swc

5045e1f

fix lint

f0cc086

fix test

754e9c6

less variable

5723d14

Ayase-252 reviewed Jan 24, 2023

View reviewed changes

FoundTheWOUT added 3 commits January 24, 2023 20:29

clean up

47857e1

test for mergeWIki

4054c7c

1. replace toFixed to toString

e72b0cc

2. remove wikItem when key ctrl+x|X down 3. use class instead of inline style

Ayase-252 reviewed Jan 24, 2023

View reviewed changes

Ayase-252 reviewed Jan 25, 2023

View reviewed changes

packages/utils/wiki.ts Outdated Show resolved Hide resolved

Ayase-252 reviewed Jan 25, 2023

View reviewed changes

packages/utils/wiki.spec.ts Outdated Show resolved Hide resolved

Ayase-252 reviewed Jan 25, 2023

View reviewed changes

packages/utils/wiki.ts Outdated Show resolved Hide resolved

FoundTheWOUT added 2 commits January 25, 2023 17:48

WikiBeginnerEditor

1c926e0

some description for wiki

eb18a85

Ayase-252 reviewed Jan 26, 2023

View reviewed changes

Ayase-252 approved these changes Jan 26, 2023

View reviewed changes

doc

ce364ca

trim21 merged commit 3c3fd34 into bangumi:master Jan 27, 2023

FoundTheWOUT deleted the wiki-edit branch January 28, 2023 08:45

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(website): wiki/edit_detail #312

feat(website): wiki/edit_detail #312

FoundTheWOUT commented Jan 11, 2023 •

edited by trim21

Loading

trim21 commented Jan 11, 2023 •

edited

Loading

github-actions bot commented Jan 11, 2023 •

edited

Loading

trim21 commented Jan 11, 2023

FoundTheWOUT commented Jan 11, 2023

trim21 commented Jan 11, 2023 •

edited

Loading

vistaing commented Jan 11, 2023

trim21 commented Jan 14, 2023

Ayase-252 Jan 23, 2023

FoundTheWOUT Jan 24, 2023 •

edited

Loading

Ayase-252 Jan 24, 2023

FoundTheWOUT Jan 25, 2023

Ayase-252 Jan 24, 2023

FoundTheWOUT Jan 25, 2023 •

edited

Loading

Ayase-252 Jan 25, 2023 •

edited

Loading

FoundTheWOUT Jan 25, 2023

Ayase-252 Jan 25, 2023

trim21 Jan 25, 2023

trim21 Jan 25, 2023

Ayase-252 Jan 25, 2023 •

edited

Loading

FoundTheWOUT Jan 25, 2023

trim21 Jan 25, 2023

trim21 commented Jan 25, 2023 •

edited

Loading

trim21 commented Jan 25, 2023

Ayase-252 Jan 26, 2023

FoundTheWOUT Jan 26, 2023

Ayase-252 left a comment

		@@ -2,6 +2,8 @@

		@primary-color: #f09199;

		@bg-gray-10: #fcfcfc;


		export const WikiEditTabsItemsByKey = keyBy(WikiEditTabsItems, 'key');

		export const getWikiTemplate = (subjectType: number, targetTemplate: string \| undefined) => {

feat(website): wiki/edit_detail #312

feat(website): wiki/edit_detail #312

Conversation

FoundTheWOUT commented Jan 11, 2023 • edited by trim21 Loading

新增

修改

TODO

一些问题

trim21 commented Jan 11, 2023 • edited Loading

github-actions bot commented Jan 11, 2023 • edited Loading

Preview Deployment

trim21 commented Jan 11, 2023

FoundTheWOUT commented Jan 11, 2023

trim21 commented Jan 11, 2023 • edited Loading

vistaing commented Jan 11, 2023

trim21 commented Jan 14, 2023

Choose a reason for hiding this comment

FoundTheWOUT Jan 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FoundTheWOUT Jan 25, 2023 • edited Loading

Choose a reason for hiding this comment

Ayase-252 Jan 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ayase-252 Jan 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

trim21 commented Jan 25, 2023 • edited Loading

trim21 commented Jan 25, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ayase-252 left a comment

Choose a reason for hiding this comment

FoundTheWOUT commented Jan 11, 2023 •

edited by trim21

Loading

trim21 commented Jan 11, 2023 •

edited

Loading

github-actions bot commented Jan 11, 2023 •

edited

Loading

trim21 commented Jan 11, 2023 •

edited

Loading

FoundTheWOUT Jan 24, 2023 •

edited

Loading

FoundTheWOUT Jan 25, 2023 •

edited

Loading

Ayase-252 Jan 25, 2023 •

edited

Loading

Ayase-252 Jan 25, 2023 •

edited

Loading

trim21 commented Jan 25, 2023 •

edited

Loading