fix
This commit is contained in:
57
src/oj/problem/components/ContestEditor.vue
Normal file
57
src/oj/problem/components/ContestEditor.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script lang="ts" setup>
|
||||
import { code } from "oj/composables/code"
|
||||
import { problem } from "oj/composables/problem"
|
||||
import { SOURCES } from "utils/constants"
|
||||
import CodeEditor from "~/shared/components/CodeEditor.vue"
|
||||
import { isDesktop } from "~/shared/composables/breakpoints"
|
||||
import storage from "~/utils/storage"
|
||||
import { LANGUAGE } from "~/utils/types"
|
||||
import Form from "./Form.vue"
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const contestID = route.params.contestID || null
|
||||
const storageKey = computed(
|
||||
() =>
|
||||
`problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
|
||||
)
|
||||
|
||||
const editorHeight = computed(() =>
|
||||
isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)",
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
const savedCode = storage.get(storageKey.value)
|
||||
code.value =
|
||||
savedCode ||
|
||||
problem.value!.template[code.language] ||
|
||||
SOURCES[code.language]
|
||||
})
|
||||
|
||||
const changeCode = (v: string) => {
|
||||
storage.set(storageKey.value, v)
|
||||
}
|
||||
|
||||
const changeLanguage = (v: LANGUAGE) => {
|
||||
const savedCode = storage.get(storageKey.value)
|
||||
code.value =
|
||||
savedCode && storageKey.value.split("_").pop() === v
|
||||
? savedCode
|
||||
: problem.value!.template[code.language] || SOURCES[code.language]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<Form
|
||||
:storage-key="storageKey"
|
||||
@change-language="changeLanguage"
|
||||
/>
|
||||
<CodeEditor
|
||||
v-model:value="code.value"
|
||||
:language="code.language"
|
||||
:height="editorHeight"
|
||||
@update:model-value="changeCode"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
@@ -16,13 +16,13 @@ interface Props {
|
||||
storageKey: string
|
||||
withTest?: boolean
|
||||
otherUserInfo?: { name: string; isSuperAdmin: boolean }
|
||||
isSynced?: boolean
|
||||
isConnected?: boolean // WebSocket 实际的连接状态（已建立/未建立）
|
||||
hadConnection?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
withTest: false,
|
||||
isSynced: false,
|
||||
isConnected: false,
|
||||
hadConnection: false,
|
||||
})
|
||||
|
||||
@@ -36,34 +36,40 @@ const route = useRoute()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const isSynced = ref(false)
|
||||
const syncEnabled = ref(false) // 用户点击按钮后的意图状态（想要开启/关闭）
|
||||
const statisticPanel = ref(false)
|
||||
|
||||
// 计算属性
|
||||
const isContestMode = computed(() => route.name === "contest problem")
|
||||
const buttonSize = computed(() => (isDesktop.value ? "medium" : "small"))
|
||||
const showSyncFeature = computed(
|
||||
() => isDesktop.value && userStore.isAuthed && !isContestMode.value,
|
||||
)
|
||||
|
||||
const menu = computed<DropdownOption[]>(() => [
|
||||
{ label: "去自测猫", key: "test", show: isMobile.value },
|
||||
{ label: "去自测猫", key: "goTestCat", show: isMobile.value },
|
||||
{ label: "复制代码", key: "copy" },
|
||||
{ label: "重置代码", key: "reset" },
|
||||
])
|
||||
|
||||
const languageOptions: DropdownOption[] = problem.value!.languages.map((it) => ({
|
||||
label: () =>
|
||||
h("div", { style: "display: flex; align-items: center;" }, [
|
||||
h("img", {
|
||||
src: `/${it}.svg`,
|
||||
style: { width: "16px", height: "16px", marginRight: "8px" },
|
||||
}),
|
||||
LANGUAGE_SHOW_VALUE[it],
|
||||
]),
|
||||
value: it,
|
||||
}))
|
||||
const languageOptions: DropdownOption[] = problem.value!.languages.map(
|
||||
(it) => ({
|
||||
label: () =>
|
||||
h("div", { style: "display: flex; align-items: center;" }, [
|
||||
h("img", {
|
||||
src: `/${it}.svg`,
|
||||
style: { width: "16px", height: "16px", marginRight: "8px" },
|
||||
}),
|
||||
LANGUAGE_SHOW_VALUE[it],
|
||||
]),
|
||||
value: it,
|
||||
}),
|
||||
)
|
||||
|
||||
// 代码操作相关
|
||||
const copy = async () => {
|
||||
const success = await copyToClipboard(code.value)
|
||||
if (success) {
|
||||
message.success("代码复制成功")
|
||||
} else {
|
||||
message.error("代码复制失败")
|
||||
}
|
||||
message[success ? "success" : "error"](`代码复制${success ? "成功" : "失败"}`)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
@@ -72,123 +78,129 @@ const reset = () => {
|
||||
message.success("代码重置成功")
|
||||
}
|
||||
|
||||
const changeLanguage = (v: LANGUAGE) => {
|
||||
storage.set(STORAGE_KEY.LANGUAGE, v)
|
||||
emit("changeLanguage", v)
|
||||
}
|
||||
|
||||
const runCode = async () => {
|
||||
const res = await createTestSubmission(code, input.value)
|
||||
output.value = res.output
|
||||
}
|
||||
|
||||
// 导航相关
|
||||
const goTestCat = () => {
|
||||
window.open(import.meta.env.PUBLIC_CODE_URL, "_blank")
|
||||
}
|
||||
|
||||
const goSubmissions = () => {
|
||||
const name = route.params.contestID ? "contest submissions" : "submissions"
|
||||
router.push({ name, query: { problem: problem.value!._id } })
|
||||
}
|
||||
|
||||
const goEdit = () => {
|
||||
const baseUrl = "/admin/problem/edit/" + problem.value!.id
|
||||
const url = problem.value!.contest
|
||||
? `/admin/contest/${problem.value!.contest}/problem/edit/${problem.value!.id}`
|
||||
: baseUrl
|
||||
: `/admin/problem/edit/${problem.value!.id}`
|
||||
window.open(router.resolve(url).href, "_blank")
|
||||
}
|
||||
|
||||
const test = async () => {
|
||||
const res = await createTestSubmission(code, input.value)
|
||||
output.value = res.output
|
||||
}
|
||||
|
||||
// 菜单处理
|
||||
const handleMenuSelect = (key: string) => {
|
||||
const actions: Record<string, () => void> = {
|
||||
reset,
|
||||
copy,
|
||||
test: () => window.open(import.meta.env.PUBLIC_CODE_URL, "_blank"),
|
||||
goTestCat,
|
||||
}
|
||||
actions[key]?.()
|
||||
}
|
||||
|
||||
const changeLanguage = (v: LANGUAGE) => {
|
||||
storage.set(STORAGE_KEY.LANGUAGE, v)
|
||||
emit("changeLanguage", v)
|
||||
}
|
||||
|
||||
// 协同编辑相关
|
||||
const toggleSync = () => {
|
||||
isSynced.value = !isSynced.value
|
||||
emit("toggleSync", isSynced.value)
|
||||
}
|
||||
|
||||
const gotoTestCat = () => {
|
||||
window.open(import.meta.env.PUBLIC_CODE_URL, "_blank")
|
||||
syncEnabled.value = !syncEnabled.value
|
||||
emit("toggleSync", syncEnabled.value)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
resetSyncStatus: () => {
|
||||
isSynced.value = false
|
||||
syncEnabled.value = false
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex align="center">
|
||||
<!-- 语言选择器 -->
|
||||
<n-select
|
||||
v-model:value="code.language"
|
||||
class="language"
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
:size="buttonSize"
|
||||
:options="languageOptions"
|
||||
@update:value="changeLanguage"
|
||||
/>
|
||||
|
||||
|
||||
<template v-if="withTest">
|
||||
<n-button @click="reset">重置代码</n-button>
|
||||
<n-button type="primary" secondary @click="test">运行代码</n-button>
|
||||
<n-button type="primary" secondary @click="runCode">运行代码</n-button>
|
||||
</template>
|
||||
|
||||
<n-flex v-else align="center">
|
||||
<Submit />
|
||||
|
||||
|
||||
<n-button
|
||||
v-if="!userStore.isSuperAdmin && userStore.showSubmissions"
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
:size="buttonSize"
|
||||
@click="goSubmissions"
|
||||
>
|
||||
提交信息
|
||||
</n-button>
|
||||
|
||||
|
||||
<n-button
|
||||
v-if="userStore.isSuperAdmin"
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
:size="buttonSize"
|
||||
@click="statisticPanel = true"
|
||||
>
|
||||
{{ isDesktop ? "统计信息" : "统计" }}
|
||||
</n-button>
|
||||
|
||||
<n-button v-if="isDesktop" @click="gotoTestCat">自测猫</n-button>
|
||||
|
||||
|
||||
<n-button v-if="isDesktop" @click="goTestCat">自测猫</n-button>
|
||||
|
||||
<n-dropdown size="large" :options="menu" @select="handleMenuSelect">
|
||||
<n-button :size="isDesktop ? 'medium' : 'small'">操作</n-button>
|
||||
<n-button :size="buttonSize">操作</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
|
||||
<IconButton
|
||||
v-if="isDesktop && userStore.isSuperAdmin"
|
||||
icon="streamline-ultimate-color:file-code-edit"
|
||||
tip="编辑题目"
|
||||
@click="goEdit"
|
||||
/>
|
||||
|
||||
<IconButton
|
||||
v-if="isDesktop && userStore.isAuthed"
|
||||
:icon="
|
||||
isSynced
|
||||
? 'streamline-stickies-color:earpod-connected'
|
||||
: 'streamline-stickies-color:earpod-connected-duo'
|
||||
"
|
||||
:tip="isSynced ? '断开同步' : '打开同步'"
|
||||
:type="isSynced ? 'info' : 'default'"
|
||||
@click="toggleSync"
|
||||
/>
|
||||
|
||||
<template v-if="isDesktop && props.isSynced">
|
||||
<n-tag v-if="otherUserInfo" type="info">
|
||||
与 {{ otherUserInfo.name }} 同步中
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="userStore.isSuperAdmin && !otherUserInfo && hadConnection"
|
||||
type="warning"
|
||||
>
|
||||
学生已退出，可以关闭同步
|
||||
</n-tag>
|
||||
|
||||
<!-- 协同编辑功能（仅在非比赛模式） -->
|
||||
<template v-if="showSyncFeature">
|
||||
<IconButton
|
||||
:icon="
|
||||
syncEnabled
|
||||
? 'streamline-stickies-color:earpod-connected'
|
||||
: 'streamline-stickies-color:earpod-connected-duo'
|
||||
"
|
||||
:tip="syncEnabled ? '断开同步' : '打开同步'"
|
||||
:type="syncEnabled ? 'info' : 'default'"
|
||||
@click="toggleSync"
|
||||
/>
|
||||
|
||||
<!-- 同步状态标签 -->
|
||||
<template v-if="props.isConnected">
|
||||
<n-tag v-if="otherUserInfo" type="info">
|
||||
与 {{ otherUserInfo.name }} 同步中
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="userStore.isSuperAdmin && !otherUserInfo && hadConnection"
|
||||
type="warning"
|
||||
>
|
||||
学生已退出，可以关闭同步
|
||||
</n-tag>
|
||||
</template>
|
||||
</template>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
|
||||
@@ -1,94 +1,94 @@
|
||||
<script lang="ts" setup>
|
||||
import { code } from "oj/composables/code"
|
||||
import { problem } from "oj/composables/problem"
|
||||
import { SOURCES } from "utils/constants"
|
||||
import CodeEditor from "~/shared/components/CodeEditor.vue"
|
||||
import { isDesktop } from "~/shared/composables/breakpoints"
|
||||
import storage from "~/utils/storage"
|
||||
import { LANGUAGE } from "~/utils/types"
|
||||
import Form from "./Form.vue"
|
||||
|
||||
const route = useRoute()
|
||||
const formRef = useTemplateRef<InstanceType<typeof Form>>("formRef")
|
||||
|
||||
const sync = ref(false)
|
||||
const otherUserInfo = ref<{ name: string; isSuperAdmin: boolean }>()
|
||||
const hadConnection = ref(false)
|
||||
|
||||
const contestID = route.params.contestID || null
|
||||
const storageKey = computed(
|
||||
() =>
|
||||
`problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
|
||||
)
|
||||
|
||||
const editorHeight = computed(() =>
|
||||
isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)",
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
const savedCode = storage.get(storageKey.value)
|
||||
code.value =
|
||||
savedCode ||
|
||||
problem.value!.template[code.language] ||
|
||||
SOURCES[code.language]
|
||||
})
|
||||
|
||||
const changeCode = (v: string) => {
|
||||
storage.set(storageKey.value, v)
|
||||
}
|
||||
|
||||
const changeLanguage = (v: LANGUAGE) => {
|
||||
const savedCode = storage.get(storageKey.value)
|
||||
code.value =
|
||||
savedCode && storageKey.value.split("_").pop() === v
|
||||
? savedCode
|
||||
: problem.value!.template[code.language] || SOURCES[code.language]
|
||||
}
|
||||
|
||||
const toggleSync = (value: boolean) => {
|
||||
sync.value = value
|
||||
if (!value) {
|
||||
hadConnection.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSyncClosed = () => {
|
||||
sync.value = false
|
||||
otherUserInfo.value = undefined
|
||||
hadConnection.value = false
|
||||
formRef.value?.resetSyncStatus()
|
||||
}
|
||||
|
||||
const handleSyncStatusChange = (status: {
|
||||
otherUser?: { name: string; isSuperAdmin: boolean }
|
||||
}) => {
|
||||
otherUserInfo.value = status.otherUser
|
||||
if (status.otherUser) {
|
||||
hadConnection.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<Form
|
||||
ref="formRef"
|
||||
:storage-key="storageKey"
|
||||
:other-user-info="otherUserInfo"
|
||||
:is-synced="sync"
|
||||
:had-connection="hadConnection"
|
||||
@change-language="changeLanguage"
|
||||
@toggle-sync="toggleSync"
|
||||
/>
|
||||
<CodeEditor
|
||||
v-model:value="code.value"
|
||||
:sync="sync"
|
||||
:problem="problem!._id"
|
||||
:language="code.language"
|
||||
:height="editorHeight"
|
||||
@update:model-value="changeCode"
|
||||
@sync-closed="handleSyncClosed"
|
||||
@sync-status-change="handleSyncStatusChange"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { code } from "oj/composables/code"
|
||||
import { problem } from "oj/composables/problem"
|
||||
import { SOURCES } from "utils/constants"
|
||||
import SyncCodeEditor from "~/shared/components/SyncCodeEditor.vue"
|
||||
import { isDesktop } from "~/shared/composables/breakpoints"
|
||||
import storage from "~/utils/storage"
|
||||
import { LANGUAGE } from "~/utils/types"
|
||||
import Form from "./Form.vue"
|
||||
|
||||
const route = useRoute()
|
||||
const formRef = useTemplateRef<InstanceType<typeof Form>>("formRef")
|
||||
|
||||
const sync = ref(false)
|
||||
const otherUserInfo = ref<{ name: string; isSuperAdmin: boolean }>()
|
||||
const hadConnection = ref(false)
|
||||
|
||||
const contestID = route.params.contestID || null
|
||||
const storageKey = computed(
|
||||
() =>
|
||||
`problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
|
||||
)
|
||||
|
||||
const editorHeight = computed(() =>
|
||||
isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)",
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
const savedCode = storage.get(storageKey.value)
|
||||
code.value =
|
||||
savedCode ||
|
||||
problem.value!.template[code.language] ||
|
||||
SOURCES[code.language]
|
||||
})
|
||||
|
||||
const changeCode = (v: string) => {
|
||||
storage.set(storageKey.value, v)
|
||||
}
|
||||
|
||||
const changeLanguage = (v: LANGUAGE) => {
|
||||
const savedCode = storage.get(storageKey.value)
|
||||
code.value =
|
||||
savedCode && storageKey.value.split("_").pop() === v
|
||||
? savedCode
|
||||
: problem.value!.template[code.language] || SOURCES[code.language]
|
||||
}
|
||||
|
||||
const toggleSync = (value: boolean) => {
|
||||
sync.value = value
|
||||
if (!value) {
|
||||
hadConnection.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSyncClosed = () => {
|
||||
sync.value = false
|
||||
otherUserInfo.value = undefined
|
||||
hadConnection.value = false
|
||||
formRef.value?.resetSyncStatus()
|
||||
}
|
||||
|
||||
const handleSyncStatusChange = (status: {
|
||||
otherUser?: { name: string; isSuperAdmin: boolean }
|
||||
}) => {
|
||||
otherUserInfo.value = status.otherUser
|
||||
if (status.otherUser) {
|
||||
hadConnection.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<Form
|
||||
ref="formRef"
|
||||
:storage-key="storageKey"
|
||||
:other-user-info="otherUserInfo"
|
||||
:is-connected="sync"
|
||||
:had-connection="hadConnection"
|
||||
@change-language="changeLanguage"
|
||||
@toggle-sync="toggleSync"
|
||||
/>
|
||||
<SyncCodeEditor
|
||||
v-model:value="code.value"
|
||||
:sync="sync"
|
||||
:problem="problem!._id"
|
||||
:language="code.language"
|
||||
:height="editorHeight"
|
||||
@update:model-value="changeCode"
|
||||
@sync-closed="handleSyncClosed"
|
||||
@sync-status-change="handleSyncStatusChange"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
Reference in New Issue
Block a user