[FE] 前端代码结构

[beary]

这个 discussion 的主要内容是

• 介绍当前前端部分的代码结构
• 整理当前优先级比较高的待办事项

代码结构

AutoML 作为一个 monorepo ，仓库中包含了多个项目，其中前端部分的代码位于 ui/ 目录下，项目使用的技术栈如下

• 框架 react 17
• 语言 typescript
• 脚手架 vite
• 路由 react-router-router 6
• 组件库 material-ui 5
• 包管理 pnpm

同时使用了 eslint 和 prettier 对编码风格进行了限制，由于 husky 需要在根目录初始化，所以将 lint-staged 和 husky 放在仓库根目录下，并利用 pnpm 的 workspace 功能将 ui/ 作为一个子仓库，在 pre-commit 中只对 ui/ 目录下的改动进行检查。

目前 ui/src/ 目录中的结构如下

layouts/
    |- dashboard.tsx     [登陆成功的主体布局]
    |- auth.tsx                <目前是还没有的，登陆注册相关的布局和 dashboard 不同，所以可能需要创建这样一个 layout>
pages/
    |- datasets.tsx        [数据集列表页]
    |- models.tsx          [模型列表页，也就是原型上的 home]
utils/
    |- http.ts                 [全局使用的 axios 实例]
app.tsx                        [应用的大部分初始化设置]
main.tsx                      [ReactDOM 渲染根节点，未来会升 18]
theme.tsx                   [material 主题，目前是默认的，未来可能会在这里进行修改]

为了统一编码风格，开发编码时，文件名是用全小写 + hyphen 的格式，比如 model-dataset.service.ts ，建议启用 vscode 的 eslint 和 prettier 插件。

优先级较高的待办事项

根据原型稿， AutoML 想要先运行起来，在功能上有几个前置的事情是必须的

• 用户的登陆 (SignIn) 注册 (SignUp) @beary
• 主页的模型列表 (Models) <认领人>
• 创建模型 (Model) <认领人>
• 数据集列表 (Datasets) @a448206058
• 添加数据集 <认领人>

而在项目本身的技术架构上还缺少状态管理库，根据之前的投票结果是 redux ，但目前 redux 还未集成进来，这点目前并不算特别紧急 <认领人>

在下面的评论区认领任务的小伙伴我会把 github ID 更新在上面的 checklist 后面，想做原型上其它部分功能的小伙伴也可以让我把功能加在上面 checklist 中。

目前并无可请求的接口，建议先使用返回固定 json 格式的方式将静态页面实现

[varHarrie]

接口mock推荐个工具哈😀：https://github.com/varHarrie/mokia

[beary]

😂竟然被你找到这里来了，不过我们现在引入依赖都还比较保守

[varHarrie]

偶然发现的，看看大佬都在忙啥，哈哈

[a448206058]

数据集列表 (Datasets) 认领