协同编辑代码
This commit is contained in:
@@ -15,151 +15,187 @@ import IconButton from "~/shared/components/IconButton.vue"
|
||||
interface Props {
|
||||
storageKey: string
|
||||
withTest?: boolean
|
||||
otherUserInfo?: { name: string; isSuperAdmin: boolean }
|
||||
isSynced?: boolean
|
||||
hadConnection?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
withTest: false,
|
||||
isSynced: false,
|
||||
hadConnection: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
changeLanguage: [v: LANGUAGE]
|
||||
toggleSync: [v: boolean]
|
||||
}>()
|
||||
|
||||
const message = useMessage()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const emit = defineEmits(["changeLanguage"])
|
||||
|
||||
const isSynced = ref(false)
|
||||
const statisticPanel = ref(false)
|
||||
|
||||
function copy() {
|
||||
copyText(code.value)
|
||||
message.success("代码复制成功")
|
||||
}
|
||||
|
||||
function reset() {
|
||||
code.value = problem.value!.template[code.language] || SOURCES[code.language]
|
||||
storage.remove(props.storageKey)
|
||||
message.success("代码重置成功")
|
||||
}
|
||||
|
||||
function goSubmissions() {
|
||||
const name = !!route.params.contestID ? "contest submissions" : "submissions"
|
||||
router.push({ name, query: { problem: problem.value!._id } })
|
||||
}
|
||||
|
||||
function goEdit() {
|
||||
let data = router.resolve("/admin/problem/edit/" + problem.value!.id)
|
||||
if (problem.value!.contest) {
|
||||
data = router.resolve(
|
||||
`/admin/contest/${problem.value!.contest}/problem/edit/${problem.value!.id}`,
|
||||
)
|
||||
}
|
||||
window.open(data.href, "_blank")
|
||||
}
|
||||
|
||||
async function test() {
|
||||
const res = await createTestSubmission(code, input.value)
|
||||
output.value = res.output
|
||||
}
|
||||
|
||||
const menu = computed<DropdownOption[]>(() => [
|
||||
{ label: "去自测猫", key: "test", show: isMobile.value },
|
||||
{ label: "复制代码", key: "copy" },
|
||||
{ label: "重置代码", key: "reset" },
|
||||
])
|
||||
|
||||
const options: DropdownOption[] = problem.value!.languages.map((it) => ({
|
||||
label: () => [
|
||||
h("img", {
|
||||
src: `/${it}.svg`,
|
||||
style: {
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
marginRight: "8px",
|
||||
transform: "translateY(3px)",
|
||||
},
|
||||
}),
|
||||
LANGUAGE_SHOW_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,
|
||||
}))
|
||||
|
||||
async function select(key: string) {
|
||||
switch (key) {
|
||||
case "reset":
|
||||
reset()
|
||||
break
|
||||
case "copy":
|
||||
copy()
|
||||
break
|
||||
case "test":
|
||||
window.open(import.meta.env.PUBLIC_CODE_URL, "_blank")
|
||||
break
|
||||
}
|
||||
const copy = () => {
|
||||
copyText(code.value)
|
||||
message.success("代码复制成功")
|
||||
}
|
||||
|
||||
function changeLanguage(v: LANGUAGE) {
|
||||
const reset = () => {
|
||||
code.value = problem.value!.template[code.language] || SOURCES[code.language]
|
||||
storage.remove(props.storageKey)
|
||||
message.success("代码重置成功")
|
||||
}
|
||||
|
||||
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
|
||||
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"),
|
||||
}
|
||||
actions[key]?.()
|
||||
}
|
||||
|
||||
const changeLanguage = (v: LANGUAGE) => {
|
||||
storage.set(STORAGE_KEY.LANGUAGE, v)
|
||||
emit("changeLanguage", v)
|
||||
}
|
||||
|
||||
function gotoTestCat() {
|
||||
const url = import.meta.env.PUBLIC_CODE_URL
|
||||
window.open(url, "_blank")
|
||||
const toggleSync = () => {
|
||||
isSynced.value = !isSynced.value
|
||||
emit("toggleSync", isSynced.value)
|
||||
}
|
||||
|
||||
function showStatisticsPanel() {
|
||||
statisticPanel.value = true
|
||||
const gotoTestCat = () => {
|
||||
window.open(import.meta.env.PUBLIC_CODE_URL, "_blank")
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
resetSyncStatus: () => {
|
||||
isSynced.value = false
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex align="center">
|
||||
<n-select
|
||||
class="language"
|
||||
v-model:value="code.language"
|
||||
@update:value="changeLanguage"
|
||||
class="language"
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
:options="options"
|
||||
:options="languageOptions"
|
||||
@update:value="changeLanguage"
|
||||
/>
|
||||
<n-button v-if="withTest" @click="reset">重置代码</n-button>
|
||||
<n-button v-if="withTest" type="primary" secondary @click="test">
|
||||
运行代码
|
||||
</n-button>
|
||||
<n-flex align="center" v-if="!withTest">
|
||||
|
||||
<template v-if="withTest">
|
||||
<n-button @click="reset">重置代码</n-button>
|
||||
<n-button type="primary" secondary @click="test">运行代码</n-button>
|
||||
</template>
|
||||
|
||||
<n-flex v-else align="center">
|
||||
<Submit />
|
||||
<n-button v-if="isDesktop" @click="gotoTestCat">自测猫</n-button>
|
||||
|
||||
<n-button
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
v-if="!userStore.isSuperAdmin && userStore.showSubmissions"
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
@click="goSubmissions"
|
||||
>
|
||||
提交信息
|
||||
</n-button>
|
||||
|
||||
<n-button
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
v-if="userStore.isSuperAdmin"
|
||||
@click="showStatisticsPanel"
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
@click="statisticPanel = true"
|
||||
>
|
||||
{{ isDesktop ? "统计信息" : "统计" }}
|
||||
</n-button>
|
||||
<n-dropdown size="large" :options="menu" @select="select">
|
||||
|
||||
<n-button v-if="isDesktop" @click="gotoTestCat">自测猫</n-button>
|
||||
|
||||
<n-dropdown size="large" :options="menu" @select="handleMenuSelect">
|
||||
<n-button :size="isDesktop ? 'medium' : 'small'">操作</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
<IconButton
|
||||
v-if="isDesktop && userStore.isSuperAdmin"
|
||||
icon="streamline-ultimate-color:file-code-edit"
|
||||
tip="编辑题目"
|
||||
v-if="isDesktop && userStore.isSuperAdmin"
|
||||
@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="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>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
|
||||
<n-modal
|
||||
v-if="userStore.isSuperAdmin"
|
||||
v-model:show="statisticPanel"
|
||||
preset="card"
|
||||
title="提交记录的统计"
|
||||
:style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
|
||||
:content-style="{ overflow: 'auto' }"
|
||||
title="提交记录的统计"
|
||||
>
|
||||
<StatisticsPanel :problem="problem!._id" username="" />
|
||||
</n-modal>
|
||||
|
||||
Reference in New Issue
Block a user