xuyueandClaude Opus 5.5
e7b95d211d
题目页重构之后按「功能对照 / 状态 / 结果页 / 布局与后端」四路审查了一遍，查出的问题一起修： 提交与换题 - 提交、画流程图途中换题：A 题格式化好的代码会盖掉 B 的草稿，A 判对了把 B 标成已解决、 弹 B 的点评、题单里跳回题单。现在每个请求回来先核对题目，轮询和推送回来的也核对提交编号 - 画着流程图换到不能画的题，语言退到题目的第一门、还被记成偏好；现在回到学生习惯的那门 - 强制点评评完点「继续 / 下一题」，学生之前在看「题目」页签的话会停在原题 - 离开题目页之后判题、流程图的 WebSocket 一直连着，现在闲 15 分钟断开 运行例子 - 输出开头的空格被削掉，打印菱形这类题对的代码也显示「没对上」 - C 的编译警告拼进了「你的输出」（后台生成测试点也会写进 .out） - Python 的语法错误（中文标点）被说成「下标有没有越界、除数是不是 0」 - 比赛里仍然把空格画成「·」、把不同的地方标红 入口与协作 - 比赛里不给「课堂统计」、不绑协作：房间和统计都按题号找，比赛题号和公开题撞号 - 「看他交过什么」按整名匹配，不再混进学号相近的同学 - 协作中点上下文条、相似题、下一题开新标签，协作不断 - 题单入口给管理员的「⋯」里留「本题提交」 结果与题面 - 「去自己输入拿 51 这些数试试」取到了题面 HTML 里的颜色值；「题目原话」露出 " - 流程图 A 级的学生标题下还写着「还没交过」 - 「我的提交」上方补回「答案错误 × 3」这样的计数 - 流程图历次评分能点开看那一版的图；读分数失败不再说「还没交过流程图」；手机上能看流程图点评 - 「结果」页签有新结果没看时加粗上色，看过就恢复 - 空画布拖进第一个节点画布会跳一下；画布底下空着一条 - 比赛没开始写成「已结束」、倒计时超过一个月算错；分隔条拖到头工具栏被挤坏；题单里的题目页有备案页脚 - 流程图历次分数只读需要的几列（一个学生一道题 23 次提交：96 kB → 2 kB） - 比赛密码、比赛没开始等几条学生看得到的英文报错换成中文 设计文档照实际做法更新了第 5.5、5.6、6、8、9、10、11 节。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { useMyFlowchartStore } from "shared/store/myFlowchart"
|
|
import { useMermaid } from "shared/composables/useMermaid"
|
|
|
|
/**
|
|
* 学生自己画到 A/S 的那张流程图。题面里是缩略的一小块（compact），点「放大看」弹出整张。
|
|
* 原来是左栏单独一个「我的流程图」页签，评到 A/S 时还会把学生强行切过去。
|
|
*
|
|
* 结果页签里翻历次评分时也用它摆「这一版的图」，那时由 code 传进来，不读 store。
|
|
*/
|
|
const props = defineProps<{ compact?: boolean; code?: string }>()
|
|
|
|
const store = useMyFlowchartStore()
|
|
const { renderError, renderFlowchart } = useMermaid()
|
|
const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
|
|
|
|
watch(
|
|
() => props.code ?? store.mermaidCode,
|
|
async (code) => {
|
|
if (!code) return
|
|
await nextTick()
|
|
await renderFlowchart(mermaidContainer.value, code)
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<n-alert v-if="renderError" type="error" title="流程图渲染失败" size="small">
|
|
{{ renderError }}
|
|
</n-alert>
|
|
<div
|
|
v-show="!renderError"
|
|
ref="mermaidContainer"
|
|
class="flowchart-container"
|
|
:class="{ compact: props.compact }"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.flowchart-container {
|
|
width: 100%;
|
|
min-height: 500px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
:deep(.flowchart-container > svg) {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.flowchart-container.compact {
|
|
min-height: 0;
|
|
height: 150px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 缩略图按高度缩：流程图一般是竖长的，按宽度铺满的话 150px 里只看得见开头两个框 */
|
|
:deep(.flowchart-container.compact > svg) {
|
|
width: auto;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|