117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="md:max-w-[720px] mx-auto">
|
||
|
|
<n-card segmented>
|
||
|
|
<template #header>
|
||
|
|
<n-page-header @back="navigateTo('/')">
|
||
|
|
<template #title>Challenge #{{ challenge?.id }}</template>
|
||
|
|
<template #subtitle>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<n-tag size="small" class="case-capital">{{ challenge?.status?.replaceAll("-", " ") }}</n-tag>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</n-page-header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<client-only>
|
||
|
|
<vue-monaco-editor
|
||
|
|
:options="options"
|
||
|
|
v-model:value="answer.code"
|
||
|
|
class="min-h-[360px] code-editor"
|
||
|
|
/>
|
||
|
|
</client-only>
|
||
|
|
|
||
|
|
<n-divider class="mx-[-24px] w-[calc(100%+48px)] divider-below-code" />
|
||
|
|
|
||
|
|
<template #action>
|
||
|
|
<div class="w-full flex justify-between">
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<n-button secondary circle class="rounded-[4px]" type="warning" :disabled="submitting" @click="save">
|
||
|
|
<template #icon>
|
||
|
|
<n-icon :component="Save" />
|
||
|
|
</template>
|
||
|
|
</n-button>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<n-button secondary type="error" :disabled="submitting" @click="abandon">放弃</n-button>
|
||
|
|
<n-button type="primary" :disabled="submitting" @click="submit">提交</n-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</n-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { NButton, NCard, NDivider, NPageHeader, NTag, NIcon, useDialog, useMessage } from "naive-ui";
|
||
|
|
import { VueMonacoEditor } from "@guolao/vue-monaco-editor";
|
||
|
|
import { Save } from "@vicons/carbon";
|
||
|
|
|
||
|
|
const route = useRoute();
|
||
|
|
const client = useSupabaseClient();
|
||
|
|
const message = useMessage();
|
||
|
|
const dialog = useDialog();
|
||
|
|
|
||
|
|
const options = {
|
||
|
|
minimap: { enabled: false }
|
||
|
|
};
|
||
|
|
|
||
|
|
const submitting = ref(false);
|
||
|
|
|
||
|
|
const { data: challenge } = await client
|
||
|
|
.from("challenges")
|
||
|
|
.select<any, any>("*")
|
||
|
|
.eq("id", route.params.id)
|
||
|
|
.single();
|
||
|
|
|
||
|
|
useHead({
|
||
|
|
title: challenge ? `挑战 #${challenge.id}` : "挑战 #404"
|
||
|
|
});
|
||
|
|
|
||
|
|
const answer = ref(challenge?.answer ?? {});
|
||
|
|
|
||
|
|
async function save() {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function abandon() {
|
||
|
|
const instance = dialog.warning({
|
||
|
|
title: "警告",
|
||
|
|
content: "你确定要放弃该次挑战？这会让该挑战立刻转化为放弃状态，并且扣除 5 点社会信用点，三思而后行！",
|
||
|
|
positiveText: "确定",
|
||
|
|
negativeText: "再试试",
|
||
|
|
onPositiveClick: async () => {
|
||
|
|
await client
|
||
|
|
.from("challenges")
|
||
|
|
// @ts-ignore
|
||
|
|
.update<any>({ status: "abandoned" })
|
||
|
|
.eq("id", challenge.id);
|
||
|
|
|
||
|
|
const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
|
||
|
|
|
||
|
|
instance.loading = true
|
||
|
|
message.info("已放弃挑战该题");
|
||
|
|
|
||
|
|
await delay(1850);
|
||
|
|
window.close();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function submit() {
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.code-editor {
|
||
|
|
min-width: calc(100% + 48px);
|
||
|
|
margin-top: -20px;
|
||
|
|
margin-left: -24px;
|
||
|
|
margin-right: -24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider-below-code {
|
||
|
|
margin-top: 0 !important;
|
||
|
|
}
|
||
|
|
</style>
|