教程的标题

src/admin/contest/helper.vue

@@ -114,14 +114,11 @@ async function markAllAsChecked() {
 // 过滤后的提交列表
 const filteredSubmissions = computed(() => {
   return submissions.value.filter((item) => {
-    if (query.username && !item.username.includes(query.username))
+    if (query.username && !item.username.includes(query.username)) return false
-      return false
     if (query.problemId && !item.problem_display_id.includes(query.problemId))
       return false
-    if (query.checked === "checked" && !item.checked)
+    if (query.checked === "checked" && !item.checked) return false
-      return false
+    if (query.checked === "unchecked" && item.checked) return false
-    if (query.checked === "unchecked" && item.checked)
-      return false
     return true
   })
 })
@@ -254,12 +251,8 @@ onMounted(loadData)
     <n-flex justify="space-between" align="center">
       <n-flex align="center">
         <h2 style="margin: 0">比赛辅助检查</h2>
-        <n-tag type="info" size="large">
+        <n-tag type="info" size="large"> 总计: {{ stats.total }} </n-tag>
-          总计: {{ stats.total }}
+        <n-tag type="success" size="large"> 已检查: {{ stats.checked }} </n-tag>
-        </n-tag>
-        <n-tag type="success" size="large">
-          已检查: {{ stats.checked }}
-        </n-tag>
         <n-tag type="warning" size="large">
           未检查: {{ stats.unchecked }}
         </n-tag>
@@ -328,4 +321,3 @@ onMounted(loadData)
   margin-top: 16px;
 }
 </style>
-

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-card title="目录" :bordered="false" size="small">
-        <n-flex align="center">
+        <n-scrollbar :style="{ maxHeight: 'calc(100vh - 180px)' }">
-          <n-button text :disabled="step == 1" @click="prev">
+          <n-list hoverable clickable>
-            <Icon :width="30" icon="pepicons-pencil:arrow-left"></Icon>
+            <n-list-item
-          </n-button>
+              v-for="(item, index) in titles"
-          <n-dropdown size="large" :options="menu" trigger="click">
+              :key="item.id"
-            <n-button tertiary style="flex: 1" size="large">
+              @click="goToLesson(index + 1)"
-              <n-flex align="center">
+            >
-                <span style="font-weight: bold">
+              <n-text
-                  {{ title }}
+                :type="step === index + 1 ? 'primary' : undefined"
-                </span>
+                :strong="step === index + 1"
-                <Icon :width="24" icon="proicons:chevron-down"></Icon>
+              >
-              </n-flex>
+                {{ index + 1 }}. {{ item.title }}
-            </n-button>
+              </n-text>
-          </n-dropdown>
+            </n-list-item>
-          <n-button text :disabled="step == titles.length" @click="next">
+          </n-list>
-            <Icon :width="30" icon="pepicons-pencil:arrow-right"></Icon>
+        </n-scrollbar>
-          </n-button>
+      </n-card>
-        </n-flex>
+    </n-gi>
-        <n-flex vertical size="large">
+
+    <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 justify="space-between">
+      </n-card>
-            <div style="flex: 1">
-              <n-button
-                block
-                style="height: 40px"
-                v-if="step !== 1"
-                @click="prev"
-              >
-                上一课时
-              </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>
     </n-gi>
-    <n-gi :span="1">
+
-      <n-flex vertical>
+    <n-gi :span="2" v-if="tutorial.code">
-        <CodeEditor
+      <n-card title="示例代码" :bordered="false" size="small">
-          v-show="!!tutorial.code"
+        <CodeEditor language="Python3" v-model="tutorial.code" />
-          language="Python3"
+      </n-card>
-          v-model="tutorial.code"
-        />
-      </n-flex>
     </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[]>(() => {
+function goToLesson(lessonNumber: number) {
-  return titles.value.map((item, index) => {
+  const dest = lessonNumber.toString().padStart(2, "0")
-    const id = (index + 1).toString().padStart(2, "0")
+  router.push("/learn/" + dest)
-    const prefix = `第 ${index + 1} 课：`
-    return {
-      key: id,
-      label: prefix + item.title,
-      props: {
-        onClick: () => router.push(`/learn/${id}`),
-      },
 }
-  })
-})
 
 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>
+<style scoped>
-.md-editor-preview .md-editor-code .md-editor-code-head {
+:deep(.md-editor-preview .md-editor-code .md-editor-code-head) {
   z-index: 100;
 }
 </style>

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 @click="copy">复制代码</n-button>
-              复制代码
-            </n-button>
             <n-button @click="reset">重置代码</n-button>
             <n-button type="primary" secondary @click="runCode">
               运行代码

src/oj/problem/components/ProblemContent.vue

@@ -204,116 +204,138 @@ function type(status: ProblemStatus) {
   </div>
 </template>
 
-<style>
+<style scoped>
-.problemContent .problemTitle {
+.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 {
+/* 针对 v-html 渲染内容的深度样式 */
-  font-size: 14px;
+.content :deep(p) {
-  white-space: pre;
-  font-family: "Monaco";
-}
-
-.problemContent .status-alert {
-  margin-bottom: 16px;
-}
-
-.problemContent .content > p {
   margin: 0;
 }
 
-.problemContent .content > blockquote {
+.content :deep(blockquote) {
-  border-left: 3px solid #bbbec4;
+  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);
+  background-color: var(--bg-code-light);
-  border: 1px solid rgb(239, 239, 245);
+  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),
+    background-color var(--transition),
-    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-color var(--transition);
 }
 
-.problemContent .content > pre > code {
+.content :deep(pre code) {
-  font-family: "Monaco";
+  font-family: "Monaco", monospace;
 }
 
-.dark .problemContent .content > pre {
+.dark .content :deep(pre) {
-  background-color: rgb(24, 24, 28);
+  background-color: var(--bg-code-dark);
-  border-color: rgba(255, 255, 255, 0.09);
+  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),
+    background-color var(--transition),
-    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-color var(--transition);
 }
 
-.problemContent .content > table th {
+.content :deep(table th) {
-  background-color: rgba(250, 250, 252, 1);
+  background-color: var(--bg-table-light);
+  padding: 8px;
   transition:
-    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color var(--transition),
-    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-color var(--transition);
 }
 
-.dark .problemContent .content > table th {
+.dark .content :deep(table th) {
-  background-color: rgba(38, 38, 42, 1);
+  background-color: var(--bg-table-dark);
 }
 
-.problemContent .content > table td {
+.content :deep(table td) {
   padding: 8px;
 }
 
-.problemContent .content > table td,
+.content :deep(table td),
-.problemContent .content > table th {
+.content :deep(table th) {
-  border-right: 1px solid rgba(239, 239, 245, 1);
+  border-right: 1px solid var(--border-color-light);
-  border-bottom: 1px solid rgba(239, 239, 245, 1);
+  border-bottom: 1px solid var(--border-color-light);
 }
 
-.problemContent .content > table th:last-child,
+.content :deep(table th:last-child),
-.problemContent .content > table td:last-child {
+.content :deep(table td:last-child) {
-  border-right: 0px solid rgba(239, 239, 245, 1);
+  border-right: none;
 }
 
-.problemContent .content > table tr:last-child td {
+.content :deep(table tr:last-child td) {
-  border-bottom: 0px solid rgba(239, 239, 245, 1);
+  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 {
+.content :deep(img) {
-  max-width: 100% !important;
+  max-width: 100%;
-  height: 100% !important;
+  height: auto;
 }
 
-.problemContent .content a {
+.content :deep(a) {
-  color: #18a058;
+  color: var(--link-color);
+  text-decoration: none;
+  transition: opacity var(--transition);
+}
+
+.content :deep(a:hover) {
+  opacity: 0.8;
 }
 </style>

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() {