stmms-web

Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can use the following:

If Using Volar

Run Volar: Switch TS Plugin on/off from VSCode command palette.

核心组件复用

主要分为：CommonMarkBody.vue 前端切片渲染的组件，凡是评卷任务类型的都可以复用它来渲染（包含轨迹）。
src/features/student/studentInspect/MarkBody.vue 整卷渲染的组件，凡是不用前端切分的试卷都可以复用它来渲染（包含轨迹）。

Reactivity 关联 CommonMarkBody.vue MarkBoardTrack.vue MarkBoardMouse.vue MarkBoardKeyBoard.vue MarkHistory.vue

以上组件的 reactivity 比较复杂，总结如下：

1. currentTask 切换后，所有组件都得跟着变
2. 轨迹模式下，
   1. 分数轨迹发生变化，MarkBoardTrack.vue 改变 store.removeScoreTracks ，CommonMarkBody.vue 监听 store.removeScoreTracks 改变 sliceImagesWithTrackList 的 trackList
   2. 特殊标记轨迹发生变化，SpecialTagModal.vue 改变 store.currentMarkResult.specialTagList ，CommonMarkBody.vue 监听 store.currentMarkResult.specialTagList 改变 sliceImagesWithTrackList 的 tagList
3. 分数之间的关系，(理想设计)
   1. 来源: question.score 和 track.score, history.task.markerScore 评卷时不参与给分板的计算和显示
   2. 初始收集: markResult.scoreList markResult.trackList.score markResult.markerScore 要区分 0 分和 null
   3. 轨迹改变：track.score 动态计算 scoreList，再显示到给分板上（单题和总分自动计算），只有轨迹改变才去计算 scoreList 对应的题的分数，这样可以尽可能长时间的显示旧分数
   4. 普通改变：scoreList[index]的值
   5. 回评时普通模式评分的记录在轨迹模式下如何保持？先将 task 中的 question.score 转移到 markResult.scoreList，如果 trackList 有变化，则更新对应 scoreList，不然则保持原样。
4. 优化
   1. markResult 放到 task 里面？ 回评清理它的 markResult . DONE!
   2. 使用 pinia . DONE!

watch 的层次(列出有外部影响的状态)：

1. Top component watch currentTask 1.1 body watch special: track 1.1 openSide
2. header watch setting / status
3. history watch open , change currentTask
4. body watch trackList, computed score? emit 'trackListChange'('add', questionIndex, trackList)/('removeLast', questionIndex)/('removeAll',questionIndex)
5. markboard watch currentQuestion, normal mode -> change scoreList[index]

本地开发配置

• 启动本项目：

  # 安装依赖
  npm install
  # 启动
  npm start
  

• 配置 nginx:

  # 云阅卷开发
  server {
  listen       8071;
  server_name  localhost;
  # 管理端
  location / {
  proxy_pass  http://192.168.10.83:8004;
  }
  
  # 阅卷端
  location /web/ {
  proxy_pass  http://localhost:9000;
  }
  
  # 接口/附件等
  location ~ ^/(api|admin|login|mark|slice)/ {
  proxy_pass  http://192.168.10.83:8004;
  }
  }
  
  

• 使用管理端账号登录调试。

说明： 管理端和阅卷端虽然独立启动，但他们的接口地址是一样的。 单独访问阅卷端，使用的接口是阅卷端配置的接口地址。访问 8071 地址，接口则是 nginx 配置的地址。注意两者的区别。