xuyueandClaude Opus 5.5
f4db7dc81c
原来结果是提交按钮下面的 n-popover：点一下外面就收起、最高 600px、盖住编辑器， 学生没法一边看「正确输出 / 你的输出」一边改代码，还得靠「上次结果」按钮找回来。 - 左栏新增「结果」页签（手机上排在「代码」后面），交上去或者语法检查没过就自动切过去； 页签标题带状态图标（✕ / ✓ / ! / 判题中转圈），不只靠颜色 - 页签用 show:lazy：切走不卸载，编辑器里的错误标记、AI 提示都留着 - 「题目描述」改叫「题目」；去掉浮层和「上次结果」按钮 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from "@iconify/vue"
|
|
import { useCodeStore } from "oj/store/code"
|
|
import { useSubmissionStore } from "oj/store/submission"
|
|
import { getSubmitButtonState } from "./submitButtonState"
|
|
import { useBreakpoints } from "shared/composables/breakpoints"
|
|
import { useUserStore } from "shared/store/user"
|
|
|
|
/**
|
|
* 提交按钮。只把点击交给 store：提交的状态在 submission store，结果显示在左栏的
|
|
* 「结果」页签（ResultPane），判完之后该发生的事在页面这一层的 SubmissionEffects ——
|
|
* 这个组件在编辑器的工具栏里，编辑器卸载时它也跟着卸载，所以什么都不能只存在这里。
|
|
*/
|
|
|
|
const userStore = useUserStore()
|
|
const codeStore = useCodeStore()
|
|
const submissionStore = useSubmissionStore()
|
|
const route = useRoute()
|
|
|
|
const { isDesktop } = useBreakpoints()
|
|
|
|
const buttonState = computed(() =>
|
|
getSubmitButtonState({
|
|
isAuthed: userStore.isAuthed,
|
|
hasCode: codeStore.code.value.trim() !== "",
|
|
isFormatting: submissionStore.isFormatting,
|
|
isSubmitting: submissionStore.isSubmittingRequest || submissionStore.submitting,
|
|
isJudging: submissionStore.judging || submissionStore.pending,
|
|
isCooldown: submissionStore.isCooldown,
|
|
}),
|
|
)
|
|
|
|
function submit() {
|
|
if (buttonState.value.disabled) return
|
|
submissionStore.submit({
|
|
contestId: (route.params.contestID as string) ?? "",
|
|
problemSetId: (route.params.problemSetId as string) ?? "",
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-button
|
|
:size="isDesktop ? 'medium' : 'small'"
|
|
type="primary"
|
|
:disabled="buttonState.disabled"
|
|
@click="submit"
|
|
>
|
|
<template #icon>
|
|
<n-icon>
|
|
<Icon :icon="buttonState.icon" />
|
|
</n-icon>
|
|
</template>
|
|
{{ buttonState.label }}
|
|
</n-button>
|
|
</template>
|