Keine Beschreibung

Michael Wang 3f19068088 update README.md vor 3 Jahren
public da2e3874a5 init project vor 4 Jahren
src 3c93a9270b 折叠代码块 vor 3 Jahren
vetur a78627bd68 add vetur typing config vor 4 Jahren
.editorconfig 138feb0f59 small improvement vor 3 Jahren
.eslintrc.js a344b7f674 eslint ignore vite.config.ts vor 3 Jahren
.gitignore 8783a4c934 add dist.zip to ignore vor 4 Jahren
README.md 3f19068088 update README.md vor 3 Jahren
components.d.ts 07d93cf651 抽象公共的header vor 3 Jahren
index.html 18ed677dff 留下接口供实施动态设置裁切图缓存大小 vor 4 Jahren
package.json f442dc5125 update deps vor 3 Jahren
pnpm-lock.yaml f442dc5125 update deps vor 3 Jahren
postcss.config.js 34efdf9593 add tailwindcss vor 4 Jahren
prettier.config.js 81ef5d9d3f 一次失败的eslint配置,主要由$ref阻碍了成功 vor 3 Jahren
tailwind.config.js f5d92baeee tailwind prefix vor 4 Jahren
tsconfig.json dc98f150fe 成功的eslint配置 vor 3 Jahren
vetur.config.js fa7315cafe vetur auto import vue components vor 4 Jahren
vite.config.ts 5eebf483ed use Ref Sugar (take 2) vor 3 Jahren

README.md

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]