From 96adf39cbaa24bc3bd2e08fd024d3097b67a1c9f Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 6 Oct 2025 19:13:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=99=E7=A8=8B=E7=9A=84=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/contest/helper.vue                 | 654 +++++++++----------
 src/oj/learn/index.vue                       | 130 ++--
 src/oj/problem/components/EditorForTest.vue  |   4 +-
 src/oj/problem/components/ProblemContent.vue | 132 ++--
 src/shared/store/config.ts                   |   2 +-
 5 files changed, 444 insertions(+), 478 deletions(-)

diff --git a/src/admin/contest/helper.vue b/src/admin/contest/helper.vue
index beaf2f5..462b0a0 100644
--- a/src/admin/contest/helper.vue
+++ b/src/admin/contest/helper.vue
@@ -1,331 +1,323 @@
-<script setup lang="ts">
-import { NButton, NCheckbox, NSelect, NTag } from "naive-ui"
-import { parseTime } from "utils/functions"
-import { getACMHelperList, getContest, updateACMHelperChecked } from "../api"
-import { getSubmission, getSubmissions } from "oj/api"
-import SubmissionDetail from "oj/submission/detail.vue"
-import { isDesktop } from "shared/composables/breakpoints"
-
-interface Props {
-  contestID: string
-}
-
-interface HelperItem {
-  id: number
-  username: string
-  real_name: string
-  problem_id: string
-  problem_display_id: string
-  ac_info: {
-    is_ac: boolean
-    ac_time: number
-    error_number: number
-    checked?: boolean
-  }
-  checked: boolean
-}
-
-const props = defineProps<Props>()
-const message = useMessage()
-
-const submissions = ref<HelperItem[]>([])
-const contestStartTime = ref<Date | null>(null)
-const query = reactive({
-  username: "",
-  problemId: "",
-  checked: "all",
-})
-
-// 检查状态选项
-const checkedOptions = [
-  { label: "全部", value: "all" },
-  { label: "已检查", value: "checked" },
-  { label: "未检查", value: "unchecked" },
-]
-
-// 代码查看模态框
-const [codePanel, toggleCodePanel] = useToggle(false)
-const currentSubmission = ref<any>(null)
-
-// 格式化 AC 时间（ac_time 是相对于比赛开始的秒数）
-function formatACTime(relativeSeconds: number) {
-  if (!contestStartTime.value) return "-"
-  const acTime = new Date(
-    contestStartTime.value.getTime() + relativeSeconds * 1000,
-  )
-  return parseTime(acTime, "YYYY-MM-DD HH:mm:ss")
-}
-
-// 切换检查状态
-async function toggleChecked(item: HelperItem) {
-  const newChecked = !item.checked
-  try {
-    await updateACMHelperChecked(
-      Number(props.contestID),
-      item.id,
-      item.problem_id,
-      newChecked,
-    )
-    // 更新本地状态
-    item.checked = newChecked
-    item.ac_info.checked = newChecked
-    
-    // 强制触发响应式更新
-    submissions.value = [...submissions.value]
-    
-    message.success(newChecked ? "已标记为已检查" : "已取消标记")
-  } catch (err: any) {
-    message.error(err.data || "操作失败")
-  }
-}
-
-// 批量标记为已检查
-async function markAllAsChecked() {
-  const unchecked = filteredSubmissions.value.filter((item) => !item.checked)
-  if (unchecked.length === 0) {
-    message.info("没有需要标记的提交")
-    return
-  }
-
-  const loadingMsg = message.loading("正在标记...", { duration: 0 })
-  try {
-    for (const item of unchecked) {
-      await updateACMHelperChecked(
-        Number(props.contestID),
-        item.id,
-        item.problem_id,
-        true,
-      )
-      item.checked = true
-      item.ac_info.checked = true
-    }
-    
-    // 强制触发响应式更新
-    submissions.value = [...submissions.value]
-    
-    loadingMsg.destroy()
-    message.success(`已标记 ${unchecked.length} 个提交为已检查`)
-  } catch (err: any) {
-    loadingMsg.destroy()
-    message.error(err.data || "批量操作失败")
-  }
-}
-
-// 过滤后的提交列表
-const filteredSubmissions = computed(() => {
-  return submissions.value.filter((item) => {
-    if (query.username && !item.username.includes(query.username))
-      return false
-    if (query.problemId && !item.problem_display_id.includes(query.problemId))
-      return false
-    if (query.checked === "checked" && !item.checked)
-      return false
-    if (query.checked === "unchecked" && item.checked)
-      return false
-    return true
-  })
-})
-
-// 统计信息
-const stats = computed(() => {
-  const total = submissions.value.length
-  const checked = submissions.value.filter((item) => item.checked).length
-  const unchecked = total - checked
-  return { total, checked, unchecked }
-})
-
-// 查看代码 - 获取该用户在该题目的 AC 提交
-async function viewSubmission(item: HelperItem) {
-  try {
-    // 查询该用户在该竞赛该题目的 AC 提交
-    const res = await getSubmissions({
-      username: item.username,
-      problem_id: item.problem_display_id,
-      contest_id: props.contestID,
-      result: "0", // ACCEPTED
-      language: "",
-      page: 1,
-      offset: 0,
-      limit: 1,
-    })
-
-    if (res.data.results.length === 0) {
-      message.warning("未找到该用户的 AC 提交")
-      return
-    }
-
-    // 获取提交详情
-    const submissionListItem = res.data.results[0]
-    const detailRes = await getSubmission(submissionListItem.id)
-
-    // 手动添加 contest 字段（ACM模式下后端不返回此字段）
-    currentSubmission.value = {
-      ...detailRes.data,
-      contest: Number(props.contestID),
-      problem_display_id: item.problem_display_id,
-    }
-
-    toggleCodePanel(true)
-  } catch (err: any) {
-    message.error(err.data || "加载提交失败")
-  }
-}
-
-// 加载数据
-async function loadData() {
-  try {
-    // 先获取比赛信息，获取开始时间
-    const contestRes = await getContest(props.contestID)
-    contestStartTime.value = new Date(contestRes.data.start_time)
-
-    // 再获取 AC 提交列表
-    const { data } = await getACMHelperList(Number(props.contestID))
-    submissions.value = data
-  } catch (err: any) {
-    message.error(err.data || "加载失败")
-  }
-}
-
-const columns: DataTableColumn<HelperItem>[] = [
-  {
-    title: "用户名",
-    key: "username",
-    width: 150,
-  },
-  {
-    title: "题目",
-    key: "problem_display_id",
-    width: 100,
-    render: (row) => h(NTag, { type: "info" }, () => row.problem_display_id),
-  },
-  {
-    title: "AC时间",
-    key: "ac_time",
-    width: 180,
-    render: (row) => formatACTime(row.ac_info.ac_time),
-  },
-  {
-    title: "错误次数",
-    key: "error_number",
-    width: 100,
-    render: (row) =>
-      h(
-        NTag,
-        {
-          type: row.ac_info.error_number > 0 ? "warning" : "success",
-          size: "small",
-        },
-        () => row.ac_info.error_number,
-      ),
-  },
-  {
-    title: "已检查",
-    key: "checked",
-    width: 100,
-    render: (row) =>
-      h(NCheckbox, {
-        checked: row.checked,
-        onUpdateChecked: () => toggleChecked(row),
-      }),
-  },
-  {
-    title: "操作",
-    key: "actions",
-    width: 100,
-    render: (row) =>
-      h(
-        NButton,
-        {
-          size: "small",
-          type: "primary",
-          secondary: true,
-          onClick: () => viewSubmission(row),
-        },
-        () => "查看代码",
-      ),
-  },
-]
-
-onMounted(loadData)
-</script>
-
-<template>
-  <n-flex vertical>
-    <n-flex justify="space-between" align="center">
-      <n-flex align="center">
-        <h2 style="margin: 0">比赛辅助检查</h2>
-        <n-tag type="info" size="large">
-          总计: {{ stats.total }}
-        </n-tag>
-        <n-tag type="success" size="large">
-          已检查: {{ stats.checked }}
-        </n-tag>
-        <n-tag type="warning" size="large">
-          未检查: {{ stats.unchecked }}
-        </n-tag>
-      </n-flex>
-      <n-button
-        type="primary"
-        :disabled="stats.unchecked === 0"
-        @click="markAllAsChecked"
-      >
-        标记全部为已检查
-      </n-button>
-    </n-flex>
-
-    <n-alert type="info" style="margin-bottom: 16px">
-      <template #header>使用说明</template>
-      此工具用于赛后人工审核代码，检查是否存在抄袭、作弊等行为。请逐个查看通过（AC）的提交代码，检查完成后勾选"已检查"。
-    </n-alert>
-
-    <n-flex align="center" style="margin-bottom: 16px">
-      <n-input
-        v-model:value="query.username"
-        placeholder="筛选用户名"
-        style="width: 150px"
-        clearable
-      />
-      <n-input
-        v-model:value="query.problemId"
-        placeholder="筛选题目"
-        style="width: 150px"
-        clearable
-      />
-      <n-select
-        v-model:value="query.checked"
-        :options="checkedOptions"
-        style="width: 120px"
-      />
-    </n-flex>
-
-    <n-data-table
-      :columns="columns"
-      :data="filteredSubmissions"
-      :pagination="{ pageSize: 20 }"
-      :bordered="false"
-    />
-
-    <n-modal
-      v-model:show="codePanel"
-      preset="card"
-      :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
-      :content-style="{ overflow: 'auto' }"
-      title="代码详情"
-    >
-      <SubmissionDetail
-        v-if="currentSubmission"
-        :submission="currentSubmission"
-        :problemID="currentSubmission.problem_display_id"
-        :submissionID="currentSubmission.id"
-        hideList
-      />
-    </n-modal>
-  </n-flex>
-</template>
-
-<style scoped>
-:deep(.n-data-table) {
-  margin-top: 16px;
-}
-</style>
-
+<script setup lang="ts">
+import { NButton, NCheckbox, NSelect, NTag } from "naive-ui"
+import { parseTime } from "utils/functions"
+import { getACMHelperList, getContest, updateACMHelperChecked } from "../api"
+import { getSubmission, getSubmissions } from "oj/api"
+import SubmissionDetail from "oj/submission/detail.vue"
+import { isDesktop } from "shared/composables/breakpoints"
+
+interface Props {
+  contestID: string
+}
+
+interface HelperItem {
+  id: number
+  username: string
+  real_name: string
+  problem_id: string
+  problem_display_id: string
+  ac_info: {
+    is_ac: boolean
+    ac_time: number
+    error_number: number
+    checked?: boolean
+  }
+  checked: boolean
+}
+
+const props = defineProps<Props>()
+const message = useMessage()
+
+const submissions = ref<HelperItem[]>([])
+const contestStartTime = ref<Date | null>(null)
+const query = reactive({
+  username: "",
+  problemId: "",
+  checked: "all",
+})
+
+// 检查状态选项
+const checkedOptions = [
+  { label: "全部", value: "all" },
+  { label: "已检查", value: "checked" },
+  { label: "未检查", value: "unchecked" },
+]
+
+// 代码查看模态框
+const [codePanel, toggleCodePanel] = useToggle(false)
+const currentSubmission = ref<any>(null)
+
+// 格式化 AC 时间（ac_time 是相对于比赛开始的秒数）
+function formatACTime(relativeSeconds: number) {
+  if (!contestStartTime.value) return "-"
+  const acTime = new Date(
+    contestStartTime.value.getTime() + relativeSeconds * 1000,
+  )
+  return parseTime(acTime, "YYYY-MM-DD HH:mm:ss")
+}
+
+// 切换检查状态
+async function toggleChecked(item: HelperItem) {
+  const newChecked = !item.checked
+  try {
+    await updateACMHelperChecked(
+      Number(props.contestID),
+      item.id,
+      item.problem_id,
+      newChecked,
+    )
+    // 更新本地状态
+    item.checked = newChecked
+    item.ac_info.checked = newChecked
+
+    // 强制触发响应式更新
+    submissions.value = [...submissions.value]
+
+    message.success(newChecked ? "已标记为已检查" : "已取消标记")
+  } catch (err: any) {
+    message.error(err.data || "操作失败")
+  }
+}
+
+// 批量标记为已检查
+async function markAllAsChecked() {
+  const unchecked = filteredSubmissions.value.filter((item) => !item.checked)
+  if (unchecked.length === 0) {
+    message.info("没有需要标记的提交")
+    return
+  }
+
+  const loadingMsg = message.loading("正在标记...", { duration: 0 })
+  try {
+    for (const item of unchecked) {
+      await updateACMHelperChecked(
+        Number(props.contestID),
+        item.id,
+        item.problem_id,
+        true,
+      )
+      item.checked = true
+      item.ac_info.checked = true
+    }
+
+    // 强制触发响应式更新
+    submissions.value = [...submissions.value]
+
+    loadingMsg.destroy()
+    message.success(`已标记 ${unchecked.length} 个提交为已检查`)
+  } catch (err: any) {
+    loadingMsg.destroy()
+    message.error(err.data || "批量操作失败")
+  }
+}
+
+// 过滤后的提交列表
+const filteredSubmissions = computed(() => {
+  return submissions.value.filter((item) => {
+    if (query.username && !item.username.includes(query.username)) return false
+    if (query.problemId && !item.problem_display_id.includes(query.problemId))
+      return false
+    if (query.checked === "checked" && !item.checked) return false
+    if (query.checked === "unchecked" && item.checked) return false
+    return true
+  })
+})
+
+// 统计信息
+const stats = computed(() => {
+  const total = submissions.value.length
+  const checked = submissions.value.filter((item) => item.checked).length
+  const unchecked = total - checked
+  return { total, checked, unchecked }
+})
+
+// 查看代码 - 获取该用户在该题目的 AC 提交
+async function viewSubmission(item: HelperItem) {
+  try {
+    // 查询该用户在该竞赛该题目的 AC 提交
+    const res = await getSubmissions({
+      username: item.username,
+      problem_id: item.problem_display_id,
+      contest_id: props.contestID,
+      result: "0", // ACCEPTED
+      language: "",
+      page: 1,
+      offset: 0,
+      limit: 1,
+    })
+
+    if (res.data.results.length === 0) {
+      message.warning("未找到该用户的 AC 提交")
+      return
+    }
+
+    // 获取提交详情
+    const submissionListItem = res.data.results[0]
+    const detailRes = await getSubmission(submissionListItem.id)
+
+    // 手动添加 contest 字段（ACM模式下后端不返回此字段）
+    currentSubmission.value = {
+      ...detailRes.data,
+      contest: Number(props.contestID),
+      problem_display_id: item.problem_display_id,
+    }
+
+    toggleCodePanel(true)
+  } catch (err: any) {
+    message.error(err.data || "加载提交失败")
+  }
+}
+
+// 加载数据
+async function loadData() {
+  try {
+    // 先获取比赛信息，获取开始时间
+    const contestRes = await getContest(props.contestID)
+    contestStartTime.value = new Date(contestRes.data.start_time)
+
+    // 再获取 AC 提交列表
+    const { data } = await getACMHelperList(Number(props.contestID))
+    submissions.value = data
+  } catch (err: any) {
+    message.error(err.data || "加载失败")
+  }
+}
+
+const columns: DataTableColumn<HelperItem>[] = [
+  {
+    title: "用户名",
+    key: "username",
+    width: 150,
+  },
+  {
+    title: "题目",
+    key: "problem_display_id",
+    width: 100,
+    render: (row) => h(NTag, { type: "info" }, () => row.problem_display_id),
+  },
+  {
+    title: "AC时间",
+    key: "ac_time",
+    width: 180,
+    render: (row) => formatACTime(row.ac_info.ac_time),
+  },
+  {
+    title: "错误次数",
+    key: "error_number",
+    width: 100,
+    render: (row) =>
+      h(
+        NTag,
+        {
+          type: row.ac_info.error_number > 0 ? "warning" : "success",
+          size: "small",
+        },
+        () => row.ac_info.error_number,
+      ),
+  },
+  {
+    title: "已检查",
+    key: "checked",
+    width: 100,
+    render: (row) =>
+      h(NCheckbox, {
+        checked: row.checked,
+        onUpdateChecked: () => toggleChecked(row),
+      }),
+  },
+  {
+    title: "操作",
+    key: "actions",
+    width: 100,
+    render: (row) =>
+      h(
+        NButton,
+        {
+          size: "small",
+          type: "primary",
+          secondary: true,
+          onClick: () => viewSubmission(row),
+        },
+        () => "查看代码",
+      ),
+  },
+]
+
+onMounted(loadData)
+</script>
+
+<template>
+  <n-flex vertical>
+    <n-flex justify="space-between" align="center">
+      <n-flex align="center">
+        <h2 style="margin: 0">比赛辅助检查</h2>
+        <n-tag type="info" size="large"> 总计: {{ stats.total }} </n-tag>
+        <n-tag type="success" size="large"> 已检查: {{ stats.checked }} </n-tag>
+        <n-tag type="warning" size="large">
+          未检查: {{ stats.unchecked }}
+        </n-tag>
+      </n-flex>
+      <n-button
+        type="primary"
+        :disabled="stats.unchecked === 0"
+        @click="markAllAsChecked"
+      >
+        标记全部为已检查
+      </n-button>
+    </n-flex>
+
+    <n-alert type="info" style="margin-bottom: 16px">
+      <template #header>使用说明</template>
+      此工具用于赛后人工审核代码，检查是否存在抄袭、作弊等行为。请逐个查看通过（AC）的提交代码，检查完成后勾选"已检查"。
+    </n-alert>
+
+    <n-flex align="center" style="margin-bottom: 16px">
+      <n-input
+        v-model:value="query.username"
+        placeholder="筛选用户名"
+        style="width: 150px"
+        clearable
+      />
+      <n-input
+        v-model:value="query.problemId"
+        placeholder="筛选题目"
+        style="width: 150px"
+        clearable
+      />
+      <n-select
+        v-model:value="query.checked"
+        :options="checkedOptions"
+        style="width: 120px"
+      />
+    </n-flex>
+
+    <n-data-table
+      :columns="columns"
+      :data="filteredSubmissions"
+      :pagination="{ pageSize: 20 }"
+      :bordered="false"
+    />
+
+    <n-modal
+      v-model:show="codePanel"
+      preset="card"
+      :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
+      :content-style="{ overflow: 'auto' }"
+      title="代码详情"
+    >
+      <SubmissionDetail
+        v-if="currentSubmission"
+        :submission="currentSubmission"
+        :problemID="currentSubmission.problem_display_id"
+        :submissionID="currentSubmission.id"
+        hideList
+      />
+    </n-modal>
+  </n-flex>
+</template>
+
+<style scoped>
+:deep(.n-data-table) {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/oj/learn/index.vue b/src/oj/learn/index.vue
index d015b86..4960e11 100644
--- a/src/oj/learn/index.vue
+++ b/src/oj/learn/index.vue
@@ -1,71 +1,49 @@
 <template>
-  <n-grid :cols="2" :x-gap="24" v-if="!!tutorial.id">
+  <n-grid :cols="5" :x-gap="16" v-if="tutorial.id">
     <n-gi :span="1">
-      <n-flex vertical>
-        <n-flex align="center">
-          <n-button text :disabled="step == 1" @click="prev">
-            <Icon :width="30" icon="pepicons-pencil:arrow-left"></Icon>
-          </n-button>
-          <n-dropdown size="large" :options="menu" trigger="click">
-            <n-button tertiary style="flex: 1" size="large">
-              <n-flex align="center">
-                <span style="font-weight: bold">
-                  {{ title }}
-                </span>
-                <Icon :width="24" icon="proicons:chevron-down"></Icon>
-              </n-flex>
-            </n-button>
-          </n-dropdown>
-          <n-button text :disabled="step == titles.length" @click="next">
-            <Icon :width="30" icon="pepicons-pencil:arrow-right"></Icon>
-          </n-button>
-        </n-flex>
-        <n-flex vertical size="large">
-          <MdPreview
-            preview-theme="vuepress"
-            :theme="isDark ? 'dark' : 'light'"
-            :model-value="tutorial.content"
-          />
-          <n-flex justify="space-between">
-            <div style="flex: 1">
-              <n-button
-                block
-                style="height: 40px"
-                v-if="step !== 1"
-                @click="prev"
+      <n-card title="目录" :bordered="false" size="small">
+        <n-scrollbar :style="{ maxHeight: 'calc(100vh - 180px)' }">
+          <n-list hoverable clickable>
+            <n-list-item
+              v-for="(item, index) in titles"
+              :key="item.id"
+              @click="goToLesson(index + 1)"
+            >
+              <n-text
+                :type="step === index + 1 ? 'primary' : undefined"
+                :strong="step === index + 1"
               >
-                上一课时
-              </n-button>
-            </div>
-            <div style="flex: 1">
-              <n-button
-                block
-                style="height: 40px"
-                v-if="step !== titles.length"
-                @click="next"
-              >
-                下一课时
-              </n-button>
-            </div>
-          </n-flex>
-        </n-flex>
-      </n-flex>
+                {{ index + 1 }}. {{ item.title }}
+              </n-text>
+            </n-list-item>
+          </n-list>
+        </n-scrollbar>
+      </n-card>
     </n-gi>
-    <n-gi :span="1">
-      <n-flex vertical>
-        <CodeEditor
-          v-show="!!tutorial.code"
-          language="Python3"
-          v-model="tutorial.code"
+
+    <n-gi :span="tutorial.code ? 2 : 4">
+      <n-card
+        :title="`第 ${step} 课：${titles[step - 1]?.title}`"
+        :bordered="false"
+        size="small"
+      >
+        <MdPreview
+          preview-theme="vuepress"
+          :theme="isDark ? 'dark' : 'light'"
+          :model-value="tutorial.content"
         />
-      </n-flex>
+      </n-card>
+    </n-gi>
+
+    <n-gi :span="2" v-if="tutorial.code">
+      <n-card title="示例代码" :bordered="false" size="small">
+        <CodeEditor language="Python3" v-model="tutorial.code" />
+      </n-card>
     </n-gi>
   </n-grid>
 </template>
 
 <script setup lang="ts">
-import { Icon } from "@iconify/vue"
-
 import { MdPreview } from "md-editor-v3"
 import "md-editor-v3/lib/preview.css"
 import { Tutorial } from "utils/types"
@@ -94,23 +72,11 @@ const tutorial = ref<Partial<Tutorial>>({
 })
 
 const titles = ref<{ id: number; title: string }[]>([])
-const title = computed(
-  () => `第 ${step.value} 课：${titles.value[step.value - 1].title}`,
-)
 
-const menu = computed<DropdownOption[]>(() => {
-  return titles.value.map((item, index) => {
-    const id = (index + 1).toString().padStart(2, "0")
-    const prefix = `第 ${index + 1} 课：`
-    return {
-      key: id,
-      label: prefix + item.title,
-      props: {
-        onClick: () => router.push(`/learn/${id}`),
-      },
-    }
-  })
-})
+function goToLesson(lessonNumber: number) {
+  const dest = lessonNumber.toString().padStart(2, "0")
+  router.push("/learn/" + dest)
+}
 
 async function init() {
   const res1 = await getTutorials()
@@ -121,18 +87,6 @@ async function init() {
   tutorial.value = res2.data
 }
 
-function next() {
-  if (step.value === titles.value.length) return
-  const dest = (step.value + 1).toString().padStart(2, "0")
-  router.push("/learn/" + dest)
-}
-
-function prev() {
-  if (step.value === 1) return
-  const dest = (step.value - 1).toString().padStart(2, "0")
-  router.push("/learn/" + dest)
-}
-
 watch(
   () => route.params.step,
   async () => {
@@ -143,8 +97,8 @@ watch(
 )
 </script>
 
-<style>
-.md-editor-preview .md-editor-code .md-editor-code-head {
+<style scoped>
+:deep(.md-editor-preview .md-editor-code .md-editor-code-head) {
   z-index: 100;
 }
 </style>
diff --git a/src/oj/problem/components/EditorForTest.vue b/src/oj/problem/components/EditorForTest.vue
index bb99cff..aafb1af 100644
--- a/src/oj/problem/components/EditorForTest.vue
+++ b/src/oj/problem/components/EditorForTest.vue
@@ -86,9 +86,7 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
               :options="languageOptions"
               @update:value="changeLanguage"
             />
-            <n-button @click="copy">
-              复制代码
-            </n-button>
+            <n-button @click="copy">复制代码</n-button>
             <n-button @click="reset">重置代码</n-button>
             <n-button type="primary" secondary @click="runCode">
               运行代码
diff --git a/src/oj/problem/components/ProblemContent.vue b/src/oj/problem/components/ProblemContent.vue
index 58ad5ff..613943c 100644
--- a/src/oj/problem/components/ProblemContent.vue
+++ b/src/oj/problem/components/ProblemContent.vue
@@ -204,116 +204,138 @@ function type(status: ProblemStatus) {
   </div>
 </template>
 
-<style>
-.problemContent .problemTitle {
+<style scoped>
+.problemContent {
+  --border-color-light: rgb(239, 239, 245);
+  --bg-code-light: rgb(250, 250, 252);
+  --bg-code-dark: rgb(24, 24, 28);
+  --bg-table-light: rgba(250, 250, 252, 1);
+  --bg-table-dark: rgba(38, 38, 42, 1);
+  --border-color-dark: rgba(255, 255, 255, 0.09);
+  --blockquote-color: #7b7b7b;
+  --blockquote-border: #bbbec4;
+  --link-color: #18a058;
+  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.problemTitle {
   margin: 0;
 }
 
-.problemContent .title {
+.title {
   font-size: 20px;
   margin: 12px 0;
 }
 
-.problemContent .content {
+.testcase {
+  font-size: 14px;
+  white-space: pre;
+  font-family: "Monaco", monospace;
+}
+
+.status-alert {
+  margin-bottom: 16px;
+}
+
+.content {
   font-size: 16px;
   line-height: 2;
 }
 
-.problemContent .testcase {
-  font-size: 14px;
-  white-space: pre;
-  font-family: "Monaco";
-}
-
-.problemContent .status-alert {
-  margin-bottom: 16px;
-}
-
-.problemContent .content > p {
+/* 针对 v-html 渲染内容的深度样式 */
+.content :deep(p) {
   margin: 0;
 }
 
-.problemContent .content > blockquote {
-  border-left: 3px solid #bbbec4;
+.content :deep(blockquote) {
+  border-left: 3px solid var(--blockquote-border);
   padding-left: 10px;
   margin: 10px 0;
-  color: #7b7b7b;
+  color: var(--blockquote-color);
 }
 
-.problemContent .content > pre {
+.content :deep(pre) {
   width: 100%;
-  background-color: rgb(250, 250, 252);
-  border: 1px solid rgb(239, 239, 245);
+  background-color: var(--bg-code-light);
+  border: 1px solid var(--border-color-light);
   word-break: break-word;
   box-sizing: border-box;
   transition:
-    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--transition),
+    border-color var(--transition);
 }
 
-.problemContent .content > pre > code {
-  font-family: "Monaco";
+.content :deep(pre code) {
+  font-family: "Monaco", monospace;
 }
 
-.dark .problemContent .content > pre {
-  background-color: rgb(24, 24, 28);
-  border-color: rgba(255, 255, 255, 0.09);
+.dark .content :deep(pre) {
+  background-color: var(--bg-code-dark);
+  border-color: var(--border-color-dark);
 }
 
-.problemContent .content > table {
+.content :deep(table) {
   width: 100%;
   border-spacing: 0;
-  border: 1px solid rgba(239, 239, 245, 1);
+  border: 1px solid var(--border-color-light);
   transition:
-    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--transition),
+    border-color var(--transition);
 }
 
-.problemContent .content > table th {
-  background-color: rgba(250, 250, 252, 1);
+.content :deep(table th) {
+  background-color: var(--bg-table-light);
+  padding: 8px;
   transition:
-    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color var(--transition),
+    border-color var(--transition);
 }
 
-.dark .problemContent .content > table th {
-  background-color: rgba(38, 38, 42, 1);
+.dark .content :deep(table th) {
+  background-color: var(--bg-table-dark);
 }
 
-.problemContent .content > table td {
+.content :deep(table td) {
   padding: 8px;
 }
 
-.problemContent .content > table td,
-.problemContent .content > table th {
-  border-right: 1px solid rgba(239, 239, 245, 1);
-  border-bottom: 1px solid rgba(239, 239, 245, 1);
+.content :deep(table td),
+.content :deep(table th) {
+  border-right: 1px solid var(--border-color-light);
+  border-bottom: 1px solid var(--border-color-light);
 }
 
-.problemContent .content > table th:last-child,
-.problemContent .content > table td:last-child {
-  border-right: 0px solid rgba(239, 239, 245, 1);
+.content :deep(table th:last-child),
+.content :deep(table td:last-child) {
+  border-right: none;
 }
 
-.problemContent .content > table tr:last-child td {
-  border-bottom: 0px solid rgba(239, 239, 245, 1);
+.content :deep(table tr:last-child td) {
+  border-bottom: none;
 }
 
-.problemContent .content > p > code {
+.content :deep(p code) {
   font-size: 90%;
   padding: 2px 5px;
-  margin: 0px 4px;
+  margin: 0 4px;
   background-color: rgba(27, 31, 35, 0.05);
   border-radius: 3px;
   line-height: 1.5;
+  font-family: "Monaco", monospace;
 }
 
-.problemContent .content img {
-  max-width: 100% !important;
-  height: 100% !important;
+.content :deep(img) {
+  max-width: 100%;
+  height: auto;
 }
 
-.problemContent .content a {
-  color: #18a058;
+.content :deep(a) {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: opacity var(--transition);
+}
+
+.content :deep(a:hover) {
+  opacity: 0.8;
 }
 </style>
diff --git a/src/shared/store/config.ts b/src/shared/store/config.ts
index 35fb5d8..478f680 100644
--- a/src/shared/store/config.ts
+++ b/src/shared/store/config.ts
@@ -8,7 +8,7 @@ export const useConfigStore = defineStore("config", () => {
     website_name_shortcut: "",
     website_footer: "",
     submission_list_show_all: true,
-    allow_register: true,
+    allow_register: false,
     class_list: [],
   })
   async function getConfig() {