UI重构 / UI Rework - Githubissues

BA-L10N-Viewer / viewer_site

BA L10N Viewer的网站（基于Vue）

GNU Affero General Public License v3.0

0 stars 0 forks source link

UI重构 / UI Rework #2

Open sctop opened 3 weeks ago

sctop commented 3 weeks ago

因为太过于prototype所以打算现在功能差不多稳定了之后来整一下rework

所有操作请均在 `ui_rework` 分支上进行！

重要【11/03】：先迁移到 PrimeVue 再说！！！

目前是与 ElementPlus 混合开发，但是开发过程中发现 PrimeVue 的相关文档的部分示例（主要是涉及css布局的）无法正常运行。而考虑到潜在的冲突和既有代码异常问题，又无法真正迁移到 PrimeVue 上……

考虑到以上种种，现提议先将所有既有 ElementPlus 组件用 PrimeVue 平替，再考虑下一步开发。

一般要求

所有PrimeVue的组件，在导入时都应改名为 PvXxx ，防止与既有组件冲突
提交代码时，提交消息需指定范围，如 feat(ui): fix(ui): refactor(ui): 等，详见一般提交规范
一个commit只修改一处地方，没改完的地方仍然保留 Element Plus 的组件；修改完成前，既有代码应予以保留，但注释掉
当 pull 或 push 时遇到无法自动解决的冲突时，应遵循：(1) git stash (2) git pull 更新代码 (3) git stash apply (4) 解决既有冲突，如果有 (5) git commit 提交更改 (6) git push 。这么做是为了防止提交记录混乱，同时我们也鼓励每写完一个commit就立刻push，让其他人知道什么情况
稳定前不要merge到master上；可以发pull request

sctop commented 3 weeks ago

UI的打算：

一般原则：

参考 SchaleDB 与碧蓝档案剧情站的圆角设计之类的
毛玻璃可能把握不住而且没有必要，先不管
可以的话，整一个dark mode

sctop commented 3 weeks ago

修改范围：

敬请注意：人物语音页相关代码目前不在本次重构计划中，相关安排后续通知

Navbar 导航栏
- 文本、图标
设置 dialog
搜索页人物
- 卡片风格显示搜索结果
- 整体UI交互重构
搜索页故事
- 见上
Momotalk查看页
- Momotalk人物信息
- 单个Momotalk（MomotalkUi）重构
Scenario查看页
- 故事信息
- 上下故事切换
- 故事表格及分页

负责人

大头给到 @noddy55168 因为有Vue经验且有时间；主要负责UI，数据填充部分的代码可以不管
小部分给到 @sctop ，主要开发者；负责做最后的code review和底层代码重实现等

管理要点

开始着手处理某一项时，将对应issue的assignee分配给自己，然后改project里头的status为in progress，改完commit后close issue

这主要是为了防止多人同时改一处的问题，也让人员及事项关系更加清晰

project: https://github.com/orgs/BA-L10N-Viewer/projects/1/

sctop commented 2 weeks ago

哦，还有一个很严重的问题。

目前来看 PrimeVue 的很多css类都不能正常工作，导致文档中的很多代码（尤其是涉及到排版的）根本跑不通。

此外 PrimeVue 也支持自动导入，但是感觉配了没用，没见到 components.d.ts 有更新，而且不符合既有的 PvXxx 规则，可能会撞命名。

所以目前就是：

在与 ElementPlus 共存的过渡情况下，先不要引入自动导入
把 PrimeVue 相关的css配好，但是还是有可能会和 ElementPlus 冲突的问题

So，，目前可能最好还是先整体迁移到 PrimeVue ，把 ElementPlus 完全卸载了再来开发。。