# final-project

> My dandy Nuxt.js project

## Build Setup

``` bash
# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start
```

## Doker

```shell
docker pull bbida/seec-dl
docker run --rm -it --name containerName -p 3000:5000 bbida/seec-dl
```

然后直接在 `localhost:3000` 进行访问即可

### todo

- [ ] 进行设置使其能与后端进行交互

## 开发指南

### 使用的库

- [Vuetify](https://vuetifyjs.com/en/)
- nuxt-i18n
- nuxt
- d3

### 编写 Playground 组件

1. 在 `components/playground` 中创建文件夹编写一个 Playground 的相关组件

2. 在 `pages/learning/_chapter/_level/playground.vue` 中将组件进行注册，注册的方式如下

   ```typescript
   const playgroundComponents = {
     'math/function': () => import('~/components/playground/nn/Simulation.vue')
     // 新的 Playground 组件添加在此处
   } as { [key: string]: Object }
   ```

   其中 `math/function` 是 `route` 的参数，分别对应 `:chapter/:level`（添加新的 Chapter 或 Level 的方法在后面）

### 添加新的 Chapter 和 Level

1. 在 `docs` 中创建新的文件夹，且文件的名称为 chapter 的名称。

2. 在 `data/chapter.ts` 中的 `chapter` 变量中添加相应信息

   ```typescript
   const chapters: Chapter[] = [
     { name: 'learning.chapter.math.title', description: 'learning.chapter.math.description', chapterNum: 1, to: 'learning/math' },
     { name: 'learning.chapter.tf.title', description: 'learning.chapter.tf.description', chapterNum: 2, to: 'learning/tf' }
   ]
   ```

   - `name` 和 `description` 由于都使用了 `nuxt-i18n` ，所以需在 `locales/zh-CN.json` 中添加对应的中文
   - `chapterNum`: 章节 id，在不重复的前提下随便取
   - `to`: 路由，格式为 `learning/${chapterName}`，其中 `chapterName` 应与创建的 chapter 文件夹名称一致

3. 在刚刚创建的 chapter 文件夹下创建 `${levelName}.md` 文件作为该关卡的教程，如 `docs/math/function.md` 即为 math 章节的 function 关卡的教程文本

4. 在新创建的 chapter 文件夹中创建 `meta.json` 文件，用于描述该章节的关卡信息，格式如下

   ```json
   [
     { "levelNum": "Math-1", "name": "learning.chapter.math.level.function", "to": "/learning/math/function" },
     { "levelNum": "Math-2", "name": "learning.chapter.math.level.vector", "to": "/learning/math/vector" }
   ]
   ```

   - `levelNum`: 当前关卡的 ID（自定义，可随意取）

   - `name`: 当前关卡的名称

     - `name` 的格式为 `learning.chapter.${chapterName}.level.${levelName}`，`levelName` 与 `chapterName` 最好与路由中的参数 `chapter` 和 `level` 一致

     - 此处由于使用了 `nuxt-i18n` 所以 `name` 只是一串代号，最终显示的名称应在 `locales/zh-CN.json` 中进行注册，如 `learning.chapter.math.level.function` 应注册为

       ```json
       "learning": {
           "chapter": {
             "math": {
               "description": "本章梳理了神经网络所需的数学知识，包括微积分、矩阵等内容",
               "level": {
                 "function": "神经网络所需的函数",
               }
             }
           }
       }
       ```

   - `to`: 路由。注意 `chapter` 与 `level` 要分别和 chapter 文件夹的名称以及教程文本的名称一致。如 `/learning/math/function` 中的 `math` 有 `docs/math` 这一文件夹与之对应， `function` 有 `docs/math/function.md` 与之对应。