update

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { dateZhCN, zhCN } from "naive-ui"
+import type { GlobalThemeOverrides } from "naive-ui"
 import Login from "./components/Login.vue"
 import { onMounted, watch } from "vue"
 import { Account } from "./api"
@@ -7,6 +8,16 @@ import { authed, user } from "./store/user"
 import { STORAGE_KEY } from "./utils/const"
 import hljs from "highlight.js/lib/core"
 
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    borderRadius: "6px",
+    borderRadiusSmall: "4px",
+  },
+  Card: {
+    borderRadius: "8px",
+  },
+}
+
 onMounted(async () => {
   try {
     const data = await Account.getMyProfile()
@@ -33,6 +44,7 @@ watch(authed, (v) => {
     :locale="zhCN"
     :date-locale="dateZhCN"
     :hljs="hljs"
+    :theme-overrides="themeOverrides"
   >
     <n-modal-provider>
       <n-message-provider :max="1">

src/components/submissions/ChainModal.vue

@@ -2,10 +2,57 @@
   <n-modal
     :show="show"
     preset="card"
-    title="提示词"
     style="width: 90vw; max-width: 1400px"
     @update:show="$emit('update:show', $event)"
   >
+    <template #header>
+      <n-flex justify="start" align="center">
+        <span>提示词</span>
+        <n-tooltip placement="bottom-start">
+          <template #trigger>
+            <Icon icon="lucide:info" :width="20" style="color: #aaa" />
+          </template>
+          <div style="line-height: 2">
+            <div>
+              <span :style="{ color: levelColors[1], fontWeight: 'bold' }">
+                L1
+              </span>
+              — 记忆：复述或识别知识点
+            </div>
+            <div>
+              <span :style="{ color: levelColors[2], fontWeight: 'bold' }">
+                L2
+              </span>
+              — 理解：用自己的话解释概念
+            </div>
+            <div>
+              <span :style="{ color: levelColors[3], fontWeight: 'bold' }">
+                L3
+              </span>
+              — 应用：将知识用于新情境
+            </div>
+            <div>
+              <span :style="{ color: levelColors[4], fontWeight: 'bold' }">
+                L4
+              </span>
+              — 分析：拆解结构、找出规律
+            </div>
+            <div>
+              <span :style="{ color: levelColors[5], fontWeight: 'bold' }">
+                L5
+              </span>
+              — 评价：基于标准作出判断
+            </div>
+            <div>
+              <span :style="{ color: levelColors[6], fontWeight: 'bold' }">
+                L6
+              </span>
+              — 创造：整合信息产出新成果
+            </div>
+          </div>
+        </n-tooltip>
+      </n-flex>
+    </template>
     <n-spin :show="loading">
       <n-empty
         v-if="!loading && rounds.length === 0"
@@ -124,6 +171,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
 import { Prompt } from "../../api"
 import type { PromptMessage } from "../../utils/type"
 

src/global.css

@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d0d0d0;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #b0b0b0;
+}

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue"
 import { create } from "naive-ui"
 import App from "./App.vue"
+import "./global.css"
 import { addAPIProvider } from "@iconify/vue"
 
 //@ts-ignore

src/pages/Dashboard.vue

@@ -1,21 +1,25 @@
 <template>
   <n-flex class="container" :wrap="false">
-    <n-flex vertical class="menu">
+    <div class="sidebar">
-      <n-button secondary @click="() => goHome($router, taskTab, step)">
+      <div
-        返回
+        class="back-btn"
-      </n-button>
+        @click="() => goHome($router, taskTab, step)"
-      <n-button
+      >
+        ← 返回
+      </div>
+      <n-divider style="margin: 8px 0" />
+      <div
         v-for="item in menu"
         :key="item.label"
-        :type="$route.name === item.route.name ? 'primary' : 'default'"
+        :class="['nav-item', { active: $route.name === item.route.name }]"
         @click="$router.push(item.route)"
       >
         {{ item.label }}
-      </n-button>
+      </div>
-    </n-flex>
+    </div>
-    <n-flex class="content">
+    <div class="content">
       <router-view></router-view>
-    </n-flex>
+    </div>
   </n-flex>
 </template>
 <script lang="ts" setup>
@@ -56,13 +60,56 @@ const menu = computed(() =>
   width: 100vw;
   box-sizing: border-box;
 }
-.menu {
+
-  width: 100px;
+.sidebar {
-  padding: 10px 0 10px 10px;
+  width: 110px;
+  min-width: 110px;
+  padding: 12px 8px;
+  border-right: 1px solid #efeff5;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
+
+.back-btn {
+  padding: 7px 10px;
+  font-size: 13px;
+  color: #888;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.15s, color 0.15s;
+  user-select: none;
+}
+
+.back-btn:hover {
+  background-color: #f0f0f0;
+  color: #444;
+}
+
+.nav-item {
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  color: #444;
+  transition: background-color 0.15s, color 0.15s;
+  user-select: none;
+}
+
+.nav-item:hover {
+  background-color: #f0f0f0;
+}
+
+.nav-item.active {
+  background-color: #e8f8f0;
+  color: #18a058;
+  font-weight: 500;
+}
+
 .content {
+  flex: 1;
   box-sizing: border-box;
-  width: calc(100vw - 100px);
   overflow: hidden;
 }
 </style>