yuetsh
ed56a209ea
Some checks failed
Deploy / deploy (push) Has been cancelled
原来只有 `apps/web` 在 Prettier 下（配置在 `apps/web/.prettierrc.toml`、脚本在 web 的 package.json），后端和契约从来没格式化过 —— 手写在 100 列上下，`db/schema.ts` 还是 drizzle-kit pull 留下的 tab 缩进。两套口径分叉久了，跨端改一处就得记着「这边 什么风格」。 - 配置搬到根目录 `.prettierrc.toml`，内容不变（`semi=false`，其余全默认， printWidth 80 —— 和前端已有的格式一致，不另立一套宽度）； - 脚本统一成根目录 `bun run fmt`，覆盖 `apps/*/src`、`apps/web/tests` 和两个构建 配置；web 自己那份 `fmt` 和重复的 prettier 依赖删掉； - `.prettierignore` 挡掉两类不该碰的：drizzle-kit 生成的 `src/db/meta/` 结构快照 （它是 db:generate 的比对输入，只该由 drizzle-kit 写）、unplugin 每次 dev 都会 重写的 `auto-imports.d.ts` / `components.d.ts`； - 全量跑了一遍。纯格式，无行为改动：api typecheck / check:routes / check:ast、 前端 type-check 全过，起 api 打了接口确认正常。前端这 39 个文件的小改动是 prettier 版本漂移（类型断言的换行口径变了），不是新配置带来的。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
301 lines
9.1 KiB
Vue
301 lines
9.1 KiB
Vue
<script setup lang="ts">
|
||
import { getProblem } from "oj/api"
|
||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||
import { storeToRefs } from "pinia"
|
||
import { useProblemStore } from "oj/store/problem"
|
||
import { useScreenModeStore } from "shared/store/screenMode"
|
||
import { useMyFlowchartStore } from "shared/store/myFlowchart"
|
||
import { useUserStore } from "shared/store/user"
|
||
|
||
// 抽成具名 loader，便于进页面时与接口并行预取编辑器 chunk
|
||
const loadProblemEditor = () => import("./components/ProblemEditor.vue")
|
||
const loadContestEditor = () => import("./components/ContestEditor.vue")
|
||
const ProblemEditor = defineAsyncComponent(loadProblemEditor)
|
||
const ContestEditor = defineAsyncComponent(loadContestEditor)
|
||
const EditorForTest = defineAsyncComponent(
|
||
() => import("./components/EditorForTest.vue"),
|
||
)
|
||
const ProblemContent = defineAsyncComponent(
|
||
() => import("./components/ProblemContent.vue"),
|
||
)
|
||
const ProblemInfo = defineAsyncComponent(
|
||
() => import("./components/ProblemInfo.vue"),
|
||
)
|
||
const ProblemSubmission = defineAsyncComponent(
|
||
() => import("./components/ProblemSubmission.vue"),
|
||
)
|
||
const ProblemReaction = defineAsyncComponent(
|
||
() => import("./components/ProblemReaction.vue"),
|
||
)
|
||
const ProblemFlowchart = defineAsyncComponent(
|
||
() => import("./components/ProblemFlowchart.vue"),
|
||
)
|
||
const MyFlowchartTab = defineAsyncComponent(
|
||
() => import("./components/MyFlowchartTab.vue"),
|
||
)
|
||
|
||
interface Props {
|
||
problemID: string
|
||
contestID?: string
|
||
problemSetId?: string
|
||
}
|
||
|
||
const { problemID, contestID = "", problemSetId = "" } = defineProps<Props>()
|
||
|
||
const errMsg = ref("无数据")
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
const problemStore = useProblemStore()
|
||
const screenModeStore = useScreenModeStore()
|
||
const myFlowchartStore = useMyFlowchartStore()
|
||
const { problem } = storeToRefs(problemStore)
|
||
const { shouldShowProblem } = storeToRefs(screenModeStore)
|
||
|
||
const { isMobile, isDesktop } = useBreakpoints()
|
||
|
||
// tab 选项和面板必须用同一个条件。后端在 allowFlowchart 为真时会把 mermaidCode
|
||
// 置成 null（不能把标准答案下发给正要自己画图的学生），只看 showFlowchart 的话，
|
||
// 两个开关同时打开就会做出一个「选项存在、面板不存在」的 tab —— URL 里带
|
||
// ?tab=flowchart 会选中一个渲染不出任何东西的页签。
|
||
const canShowFlowchart = computed(
|
||
() => !!problem.value?.showFlowchart && !!problem.value?.mermaidCode,
|
||
)
|
||
|
||
const tabOptions = computed(() => {
|
||
const options: string[] = ["content"]
|
||
if (canShowFlowchart.value) {
|
||
options.push("flowchart")
|
||
}
|
||
|
||
if (isMobile.value) {
|
||
options.push("editor")
|
||
}
|
||
options.push("info")
|
||
if (!contestID) {
|
||
options.push("comment")
|
||
}
|
||
if (myFlowchartStore.showing) {
|
||
options.push("my-flowchart")
|
||
}
|
||
options.push("submission")
|
||
return options
|
||
})
|
||
|
||
const currentTab = ref("content")
|
||
|
||
const inProblem = computed(() => route.name === "problem")
|
||
|
||
watch(
|
||
[() => route.query.tab, () => tabOptions.value],
|
||
([rawTab]) => {
|
||
const tabs = tabOptions.value
|
||
const fallback = tabs[0] ?? "content"
|
||
currentTab.value = tabs.includes(rawTab as string)
|
||
? (rawTab as string)
|
||
: fallback
|
||
},
|
||
{ immediate: true },
|
||
)
|
||
|
||
watch(currentTab, (tab) => {
|
||
if (!tabOptions.value.includes(tab) || route.query.tab === tab) return
|
||
router.replace({
|
||
query: { ...route.query, tab },
|
||
})
|
||
})
|
||
|
||
watch(
|
||
() => myFlowchartStore.showing,
|
||
(showing) => {
|
||
if (showing) currentTab.value = "my-flowchart"
|
||
},
|
||
)
|
||
|
||
async function init() {
|
||
screenModeStore.resetScreenMode()
|
||
// 并行预取右侧编辑器 chunk（CodeMirror ~370K+），
|
||
// 避免等 getProblem 返回后才串行下载，编辑器才迟迟出现
|
||
;(inProblem.value ? loadProblemEditor : loadContestEditor)()
|
||
try {
|
||
const res = await getProblem(problemID, contestID)
|
||
problem.value = res
|
||
} catch (err: any) {
|
||
problem.value = null
|
||
if (err.error === "contest-not-started") {
|
||
errMsg.value = "比赛还没有开始"
|
||
}
|
||
}
|
||
}
|
||
onMounted(init)
|
||
watch(() => problemID, init)
|
||
|
||
// 题目详情里的 myStatus / myFailedCount 是按当前用户算的，而登录不重新挂载这个页面 ——
|
||
// 会话过期后直接在题目页登录的（机房里最常见的那条路）不补拉一次，AI 提示的解锁进度
|
||
// 就还是匿名时的 0，等于白改。只换 problem，不走 init：那里还会重置分栏模式。
|
||
watch(
|
||
() => useUserStore().isAuthed,
|
||
async (authed) => {
|
||
if (!authed || !problem.value) return
|
||
try {
|
||
problem.value = await getProblem(problemID, contestID)
|
||
} catch {
|
||
// 拉不到就留着现在这份题面，不要把页面清空
|
||
}
|
||
},
|
||
)
|
||
onBeforeUnmount(() => {
|
||
problem.value = null
|
||
errMsg.value = "无数据"
|
||
screenModeStore.resetScreenMode()
|
||
myFlowchartStore.hide()
|
||
})
|
||
|
||
watch(isMobile, (value) => {
|
||
if (value) screenModeStore.resetScreenMode()
|
||
})
|
||
|
||
// SQL 题不支持"自测"模式（外部代码运行器无法执行 SQL），切到该屏时自动跳到下一模式
|
||
watch(
|
||
() => screenModeStore.isCodeOnlyMode,
|
||
(codeOnly) => {
|
||
if (codeOnly && problem.value?.languages.includes("SQL")) {
|
||
screenModeStore.switchScreenMode()
|
||
}
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<template>
|
||
<template v-if="problem">
|
||
<n-split
|
||
v-if="isDesktop && screenModeStore.isBothMode"
|
||
direction="horizontal"
|
||
:default-size="0.43"
|
||
:min="0.2"
|
||
:max="0.8"
|
||
style="height: calc(100vh - 92px)"
|
||
>
|
||
<template #1>
|
||
<n-scrollbar style="height: 100%">
|
||
<n-tabs v-model:value="currentTab" type="segment">
|
||
<n-tab-pane name="content" tab="题目描述">
|
||
<ProblemContent />
|
||
</n-tab-pane>
|
||
<n-tab-pane v-if="canShowFlowchart" name="flowchart" tab="流程图表">
|
||
<ProblemFlowchart />
|
||
</n-tab-pane>
|
||
<n-tab-pane name="info" tab="题目统计" :disabled="!!problemSetId">
|
||
<ProblemInfo />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
v-if="!contestID"
|
||
name="comment"
|
||
tab="题目点评"
|
||
:disabled="!!problemSetId"
|
||
>
|
||
<ProblemReaction />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
v-if="myFlowchartStore.showing"
|
||
name="my-flowchart"
|
||
tab="我的流程图"
|
||
>
|
||
<MyFlowchartTab />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
name="submission"
|
||
tab="我的提交"
|
||
:disabled="!!problemSetId"
|
||
>
|
||
<ProblemSubmission />
|
||
</n-tab-pane>
|
||
</n-tabs>
|
||
</n-scrollbar>
|
||
</template>
|
||
<template #2>
|
||
<component :is="inProblem ? ProblemEditor : ContestEditor" />
|
||
</template>
|
||
</n-split>
|
||
|
||
<!-- Desktop: code only mode -->
|
||
<template v-else-if="isDesktop && screenModeStore.isCodeOnlyMode">
|
||
<EditorForTest />
|
||
</template>
|
||
|
||
<!-- Desktop: problem only mode -->
|
||
<template v-else-if="isDesktop && shouldShowProblem">
|
||
<n-scrollbar style="max-height: calc(100vh - 92px)">
|
||
<n-tabs v-model:value="currentTab" type="segment">
|
||
<n-tab-pane name="content" tab="题目描述">
|
||
<ProblemContent />
|
||
</n-tab-pane>
|
||
<n-tab-pane v-if="canShowFlowchart" name="flowchart" tab="流程图表">
|
||
<ProblemFlowchart />
|
||
</n-tab-pane>
|
||
<n-tab-pane name="info" tab="题目统计" :disabled="!!problemSetId">
|
||
<ProblemInfo />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
v-if="!contestID"
|
||
name="comment"
|
||
tab="题目点评"
|
||
:disabled="!!problemSetId"
|
||
>
|
||
<ProblemReaction />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
v-if="myFlowchartStore.showing"
|
||
name="my-flowchart"
|
||
tab="我的流程图"
|
||
>
|
||
<MyFlowchartTab />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
name="submission"
|
||
tab="我的提交"
|
||
:disabled="!!problemSetId"
|
||
>
|
||
<ProblemSubmission />
|
||
</n-tab-pane>
|
||
</n-tabs>
|
||
</n-scrollbar>
|
||
</template>
|
||
|
||
<!-- Mobile -->
|
||
<n-tabs v-else v-model:value="currentTab" type="segment">
|
||
<n-tab-pane name="content" tab="描述">
|
||
<ProblemContent />
|
||
</n-tab-pane>
|
||
<n-tab-pane v-if="canShowFlowchart" name="flowchart" tab="流程">
|
||
<ProblemFlowchart />
|
||
</n-tab-pane>
|
||
<n-tab-pane name="editor" tab="代码">
|
||
<component :is="inProblem ? ProblemEditor : ContestEditor" />
|
||
</n-tab-pane>
|
||
<n-tab-pane name="info" tab="统计" :disabled="!!problemSetId">
|
||
<ProblemInfo />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
v-if="!contestID"
|
||
name="comment"
|
||
tab="点评"
|
||
:disabled="!!problemSetId"
|
||
>
|
||
<ProblemReaction />
|
||
</n-tab-pane>
|
||
<n-tab-pane
|
||
v-if="myFlowchartStore.showing"
|
||
name="my-flowchart"
|
||
tab="我的流程图"
|
||
>
|
||
<MyFlowchartTab />
|
||
</n-tab-pane>
|
||
<n-tab-pane name="submission" tab="提交" :disabled="!!problemSetId">
|
||
<ProblemSubmission />
|
||
</n-tab-pane>
|
||
</n-tabs>
|
||
</template>
|
||
<n-empty v-else :description="errMsg"></n-empty>
|
||
</template>
|