From e8992edabccd5fb7cbfe44fe8cf8bdb3363732ca Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 5 May 2026 09:18:55 -0600
Subject: [PATCH] use naive-ui for default

---
 src/pages/Gradebook.vue      |  37 +---
 src/pages/Showcase.vue       | 138 ++++-----------
 src/pages/ShowcaseDetail.vue | 318 +++++++++++------------------------
 src/pages/ShowcaseManage.vue | 124 +++-----------
 4 files changed, 165 insertions(+), 452 deletions(-)

diff --git a/src/pages/Gradebook.vue b/src/pages/Gradebook.vue
index b450242..1d315b0 100644
--- a/src/pages/Gradebook.vue
+++ b/src/pages/Gradebook.vue
@@ -1,7 +1,11 @@
 <template>
-  <n-flex vertical class="gradebook-page" :size="12">
-    <n-flex class="toolbar" align="center" justify="space-between">
-      <n-flex align="center" :size="8" class="filters">
+  <n-flex
+    vertical
+    :size="12"
+    style="height: 100%; min-width: 0; box-sizing: border-box; padding: 10px 10px 10px 0; overflow: hidden;"
+  >
+    <n-flex class="toolbar" align="center" justify="space-between" style="flex-shrink: 0;">
+      <n-flex align="center" :size="8" wrap style="min-width: 0;">
         <n-select
           v-model:value="query.classname"
           class="class-select"
@@ -56,7 +60,7 @@
       {{ loadError }}
     </n-alert>
 
-    <n-flex v-if="gradebook" class="summary" align="center" :size="8">
+    <n-flex v-if="gradebook" align="center" :size="8" style="flex-shrink: 0;">
       <n-tag size="small">学生 {{ gradebook.student_count }}</n-tag>
       <n-tag size="small">任务 {{ gradebook.task_count }}</n-tag>
       <n-tag size="small" type="success">
@@ -68,7 +72,6 @@
     </n-flex>
 
     <n-data-table
-      class="gradebook-table"
       size="small"
       striped
       flex-height
@@ -77,6 +80,7 @@
       :data="rows"
       :row-key="(row: GradebookRow) => row.user_id"
       :scroll-x="scrollX"
+      style="flex: 1; min-height: 0;"
     />
   </n-flex>
 </template>
@@ -347,24 +351,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.gradebook-page {
-  height: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  padding: 10px 10px 10px 0;
-  overflow: hidden;
-}
-
-.toolbar,
-.summary {
-  flex-shrink: 0;
-}
-
-.filters {
-  min-width: 0;
-  flex-wrap: wrap;
-}
-
 .class-select {
   width: 150px;
 }
@@ -377,11 +363,6 @@ onMounted(async () => {
   width: 160px;
 }
 
-.gradebook-table {
-  flex: 1;
-  min-height: 0;
-}
-
 .task-header {
   min-width: 0;
   line-height: 1.2;
diff --git a/src/pages/Showcase.vue b/src/pages/Showcase.vue
index 5c18a6c..35274c0 100644
--- a/src/pages/Showcase.vue
+++ b/src/pages/Showcase.vue
@@ -1,36 +1,38 @@
 <template>
   <main class="showcase">
-    <header class="header">
+    <n-flex justify="space-between" align="flex-end" style="margin-bottom: 32px;">
       <div>
-        <n-h2 class="title">创意工坊</n-h2>
+        <n-h2 style="margin: 0 0 4px;">创意工坊</n-h2>
         <n-text depth="3">优秀作品展示</n-text>
       </div>
-    </header>
+    </n-flex>
 
     <n-spin :show="loading">
       <n-empty
         v-if="!loading && awards.length === 0"
         description="暂无展示作品"
-        class="empty"
+        style="margin-top: 72px;"
       />
 
       <section
         v-for="section in awards"
         :key="section.id"
-        class="award-section"
+        style="margin-bottom: 48px;"
       >
-        <div class="section-header">
-          <n-h3 class="section-title">{{ section.name }}</n-h3>
-          <n-text v-if="section.description" depth="3" class="section-desc">
+        <n-flex vertical :size="4" style="margin-bottom: 16px;">
+          <n-h3 style="margin: 0;">{{ section.name }}</n-h3>
+          <n-text v-if="section.description" depth="3" style="font-size: 13px;">
             {{ section.description }}
           </n-text>
-        </div>
+        </n-flex>
 
         <div class="card-grid">
-          <article
+          <n-card
             v-for="item in section.items"
             :key="item.submission_id"
             class="work-card"
+            content-style="padding: 0;"
+            hoverable
             @click="openDetail(item.submission_id)"
           >
             <div class="card-preview">
@@ -44,23 +46,31 @@
             </div>
             <div class="card-info">
               <n-flex justify="space-between" align="center" :wrap="false">
-                <n-text strong class="username">{{ item.username }}</n-text>
-                <n-flex align="center" :wrap="false" class="metric-row">
-                  <span class="metric">
+                <n-ellipsis style="font-size: 13px; font-weight: 600; min-width: 0; flex: 1;">
+                  {{ item.username }}
+                </n-ellipsis>
+                <n-flex align="center" :wrap="false" :size="8" style="flex-shrink: 0;">
+                  <n-flex align="center" :size="3">
                     <Icon icon="lucide:star" :width="13" />
-                    {{ item.score.toFixed(1) }}
-                  </span>
-                  <span class="metric">
+                    <n-text style="font-size: 12px; color: #666;">
+                      {{ item.score.toFixed(1) }}
+                    </n-text>
+                  </n-flex>
+                  <n-flex align="center" :size="3">
                     <Icon icon="lucide:eye" :width="13" />
-                    {{ item.view_count }}
-                  </span>
+                    <n-text style="font-size: 12px; color: #666;">
+                      {{ item.view_count }}
+                    </n-text>
+                  </n-flex>
                 </n-flex>
               </n-flex>
-              <n-text depth="3" class="task-title">
+              <n-ellipsis
+                style="display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #888;"
+              >
                 {{ item.task_title }}
-              </n-text>
+              </n-ellipsis>
             </div>
-          </article>
+          </n-card>
         </div>
       </section>
     </n-spin>
@@ -106,40 +116,6 @@ onMounted(init)
   padding: 32px 20px 48px;
 }
 
-.header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-bottom: 32px;
-}
-
-.title {
-  margin: 0 0 4px;
-}
-
-.empty {
-  margin-top: 72px;
-}
-
-.award-section {
-  margin-bottom: 48px;
-}
-
-.section-header {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 16px;
-}
-
-.section-title {
-  margin: 0;
-}
-
-.section-desc {
-  font-size: 13px;
-}
-
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -148,19 +124,11 @@ onMounted(init)
 
 .work-card {
   overflow: hidden;
-  border: 1px solid #e6e6e6;
-  border-radius: 8px;
-  background: #fff;
   cursor: pointer;
-  transition:
-    box-shadow 0.2s ease,
-    transform 0.2s ease,
-    border-color 0.2s ease;
+  transition: transform 0.2s ease;
 }
 
 .work-card:hover {
-  border-color: #c9dcff;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
   transform: translateY(-2px);
 }
 
@@ -190,46 +158,4 @@ onMounted(init)
   padding: 10px 12px;
   border-top: 1px solid #f0f0f0;
 }
-
-.username {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.metric-row {
-  flex-shrink: 0;
-  gap: 8px;
-}
-
-.metric {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  color: #666;
-  font-size: 12px;
-  line-height: 1;
-}
-
-.task-title {
-  display: block;
-  margin-top: 4px;
-  overflow: hidden;
-  font-size: 12px;
-  line-height: 1.4;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media (max-width: 640px) {
-  .showcase {
-    padding: 24px 12px 36px;
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-  }
-}
 </style>
diff --git a/src/pages/ShowcaseDetail.vue b/src/pages/ShowcaseDetail.vue
index 59f597b..52bc756 100644
--- a/src/pages/ShowcaseDetail.vue
+++ b/src/pages/ShowcaseDetail.vue
@@ -9,15 +9,19 @@
           返回创意工坊
         </n-button>
       </div>
-      <iframe ref="iframe" class="preview-iframe" sandbox="allow-scripts" />
+      <iframe
+        v-if="detailSrcdoc"
+        :srcdoc="detailSrcdoc"
+        class="preview-iframe"
+        sandbox="allow-scripts"
+      />
     </section>
 
     <aside class="info-panel">
-      <div class="meta">
-        <n-h3 class="detail-title">{{ detail.task_title }}</n-h3>
+      <n-flex vertical :size="0">
+        <n-h3 style="margin: 0 0 4px;">{{ detail.task_title }}</n-h3>
         <n-text depth="3">{{ detail.username }}</n-text>
-
-        <n-flex class="award-row" wrap>
+        <n-flex wrap :size="8" style="margin-top: 12px;">
           <n-tag
             v-for="award in detail.awards"
             :key="award"
@@ -27,18 +31,21 @@
             {{ award }}
           </n-tag>
         </n-flex>
-
-        <div class="stat-row">
-          <div class="stat-item">
+        <n-flex :size="18" style="margin-top: 14px;">
+          <n-flex align="center" :size="6">
             <Icon icon="lucide:star" :width="16" />
-            <span>{{ detail.score.toFixed(1) }}</span>
-          </div>
-          <div class="stat-item">
+            <n-text strong style="font-size: 14px;">
+              {{ detail.score.toFixed(1) }}
+            </n-text>
+          </n-flex>
+          <n-flex align="center" :size="6">
             <Icon icon="lucide:eye" :width="16" />
-            <span>{{ detail.view_count }}</span>
-          </div>
-        </div>
-      </div>
+            <n-text strong style="font-size: 14px;">
+              {{ detail.view_count }}
+            </n-text>
+          </n-flex>
+        </n-flex>
+      </n-flex>
 
       <n-divider v-if="detail.has_prompt_chain" />
 
@@ -48,45 +55,66 @@
       >
         <n-collapse-item title="创作过程" name="chain">
           <template #header-extra>
-            <n-text depth="3" class="collapse-extra">点击展开</n-text>
+            <n-text depth="3" style="font-size: 12px;">点击展开</n-text>
           </template>
           <n-spin :show="chainLoading">
             <n-empty
               v-if="!chainLoading && rounds.length === 0"
               description="暂无记录"
             />
-            <div v-else class="chain-layout">
-              <div class="round-list">
-                <button
-                  v-for="(round, i) in rounds"
-                  :key="i"
-                  class="round-item"
-                  :class="{ active: selectedRound === i }"
-                  type="button"
-                  @click="selectedRound = i"
-                >
-                  <span class="round-index">{{ i + 1 }}</span>
-                  <span class="round-content">
-                    <span class="round-text">{{ round.question }}</span>
-                    <span class="round-tags">
-                      <span class="tag-source">
-                        {{ round.source === "conversation" ? "对话" : "手动" }}
-                      </span>
-                      <span
-                        v-if="round.prompt_level"
-                        class="tag-level"
-                        :style="{ color: levelColors[round.prompt_level] }"
+            <n-flex v-else vertical :size="12">
+              <n-scrollbar style="max-height: 260px;">
+                <n-flex vertical :size="8" style="padding-right: 4px;">
+                  <n-card
+                    v-for="(round, i) in rounds"
+                    :key="i"
+                    size="small"
+                    content-style="padding: 8px;"
+                    :style="{
+                      cursor: 'pointer',
+                      borderColor: selectedRound === i ? '#2080f0' : undefined,
+                      background: selectedRound === i ? '#e8f0fe' : undefined,
+                    }"
+                    @click="selectedRound = i"
+                  >
+                    <n-flex align="flex-start" :size="8">
+                      <n-avatar
+                        round
+                        :size="20"
+                        :color="selectedRound === i ? '#2080f0' : '#9db7e8'"
+                        style="font-size: 11px; font-weight: 700; flex-shrink: 0;"
                       >
-                        L{{ round.prompt_level }}
-                      </span>
-                    </span>
-                  </span>
-                </button>
-              </div>
-              <div class="round-preview">
-                <div class="round-preview-label">
+                        {{ i + 1 }}
+                      </n-avatar>
+                      <n-flex vertical :size="4" style="min-width: 0; flex: 1;">
+                        <n-text style="font-size: 12px; line-height: 1.5;">
+                          {{ round.question }}
+                        </n-text>
+                        <n-flex :size="5">
+                          <n-tag size="small" style="font-size: 10px;">
+                            {{ round.source === "conversation" ? "对话" : "手动" }}
+                          </n-tag>
+                          <n-text
+                            v-if="round.prompt_level"
+                            :style="{
+                              color: levelColors[round.prompt_level],
+                              fontSize: '11px',
+                              fontWeight: 700,
+                            }"
+                          >
+                            L{{ round.prompt_level }}
+                          </n-text>
+                        </n-flex>
+                      </n-flex>
+                    </n-flex>
+                  </n-card>
+                </n-flex>
+              </n-scrollbar>
+
+              <n-flex vertical :size="8">
+                <n-text strong style="font-size: 12px; color: #555;">
                   第 {{ selectedRound + 1 }} 轮效果
-                </div>
+                </n-text>
                 <iframe
                   v-if="selectedRoundSrcdoc"
                   :key="selectedRound"
@@ -94,30 +122,38 @@
                   sandbox="allow-scripts"
                   class="round-iframe"
                 />
-                <n-empty
+                <n-flex
                   v-else
-                  description="该轮无网页代码"
-                  class="round-empty"
-                />
-              </div>
-            </div>
+                  justify="center"
+                  align="center"
+                  style="min-height: 240px;"
+                >
+                  <n-empty description="该轮无网页代码" />
+                </n-flex>
+              </n-flex>
+            </n-flex>
           </n-spin>
         </n-collapse-item>
       </n-collapse>
     </aside>
   </main>
 
-  <div v-else-if="notFound" class="state">
+  <n-flex
+    v-else-if="notFound"
+    justify="center"
+    align="center"
+    style="min-height: 100vh; padding: 40px;"
+  >
     <n-empty description="作品不存在" />
-  </div>
+  </n-flex>
 
-  <div v-else class="state">
+  <n-flex v-else justify="center" align="center" style="min-height: 100vh;">
     <n-spin />
-  </div>
+  </n-flex>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { useRouter } from "vue-router"
 import { Icon } from "@iconify/vue"
 import { Showcase } from "../api"
@@ -128,7 +164,6 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
-const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
 const detail = ref<ShowcaseDetail | null>(null)
 const notFound = ref(false)
 const rounds = ref<PromptRound[]>([])
@@ -145,6 +180,11 @@ const levelColors: Record<number, string> = {
   6: "#c94f4f",
 }
 
+const detailSrcdoc = computed(() => {
+  if (!detail.value) return null
+  return buildDetailHtml(detail.value)
+})
+
 const selectedRoundSrcdoc = computed(() => {
   const round = rounds.value[selectedRound.value]
   if (!round?.html) return null
@@ -159,15 +199,6 @@ function buildDetailHtml(d: ShowcaseDetail) {
   return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/normalize.min.css" />${css}</head><body>${d.html ?? ""}${js}</body></html>`
 }
 
-function renderPreview() {
-  if (!iframe.value || !detail.value) return
-  const doc = iframe.value.contentDocument
-  if (!doc) return
-  doc.open()
-  doc.write(buildDetailHtml(detail.value))
-  doc.close()
-}
-
 async function loadChain() {
   if (chainLoaded.value) return
   chainLoading.value = true
@@ -190,20 +221,11 @@ function onCollapseChange(
 async function init() {
   try {
     detail.value = await Showcase.getDetail(props.id)
-    await nextTick()
-    renderPreview()
   } catch {
     notFound.value = true
   }
 }
 
-watch(
-  () => detail.value,
-  (value) => {
-    if (value) renderPreview()
-  },
-)
-
 onMounted(init)
 </script>
 
@@ -242,138 +264,6 @@ onMounted(init)
   overflow-y: auto;
 }
 
-.meta {
-  display: flex;
-  flex-direction: column;
-}
-
-.detail-title {
-  margin: 0 0 4px;
-}
-
-.award-row {
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.stat-row {
-  display: flex;
-  gap: 18px;
-  margin-top: 14px;
-}
-
-.stat-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #333;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.collapse-extra {
-  font-size: 12px;
-}
-
-.chain-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 12px;
-}
-
-.round-list {
-  display: flex;
-  max-height: 260px;
-  flex-direction: column;
-  gap: 8px;
-  overflow-y: auto;
-}
-
-.round-item {
-  display: flex;
-  width: 100%;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  background: #f9fafb;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-  transition:
-    background 0.15s ease,
-    border-color 0.15s ease;
-}
-
-.round-item.active {
-  border-color: #2080f0;
-  background: #e8f0fe;
-}
-
-.round-index {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: #9db7e8;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.round-item.active .round-index {
-  background: #2080f0;
-}
-
-.round-content {
-  min-width: 0;
-}
-
-.round-text {
-  display: block;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.round-tags {
-  display: flex;
-  gap: 5px;
-  margin-top: 5px;
-}
-
-.tag-source {
-  border-radius: 4px;
-  background: #eef1f4;
-  color: #666;
-  font-size: 10px;
-  line-height: 1.5;
-  padding: 1px 5px;
-}
-
-.tag-level {
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.round-preview {
-  display: flex;
-  min-height: 260px;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.round-preview-label {
-  color: #555;
-  font-size: 12px;
-  font-weight: 700;
-}
-
 .round-iframe {
   min-height: 240px;
   flex: 1;
@@ -382,18 +272,6 @@ onMounted(init)
   background: #fff;
 }
 
-.round-empty {
-  margin: auto;
-}
-
-.state {
-  display: flex;
-  min-height: 100vh;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-}
-
 @media (max-width: 760px) {
   .detail-layout {
     height: auto;
diff --git a/src/pages/ShowcaseManage.vue b/src/pages/ShowcaseManage.vue
index 7d9fcc6..830e7a0 100644
--- a/src/pages/ShowcaseManage.vue
+++ b/src/pages/ShowcaseManage.vue
@@ -1,6 +1,11 @@
 <template>
-  <n-flex class="manage-page" :wrap="false">
-    <aside class="award-panel">
+  <n-layout has-sider style="height: 100%;">
+    <n-layout-sider
+      :width="260"
+      bordered
+      content-style="overflow: auto; height: 100%;"
+      style="background: #fafafa;"
+    >
       <n-flex class="panel-header" justify="space-between" align="center">
         <n-text strong>奖项</n-text>
         <n-button size="small" secondary title="新建奖项" @click="startCreate">
@@ -15,7 +20,7 @@
           v-if="!awardsLoading && awards.length === 0"
           description="暂无奖项"
           size="small"
-          class="award-empty"
+          style="margin-top: 40px;"
         />
         <button
           v-for="award in awards"
@@ -27,21 +32,23 @@
           ]"
           @click="selectAward(award)"
         >
-          <span class="award-name">{{ award.name }}</span>
-          <span class="award-meta">
+          <n-ellipsis style="flex: 1; min-width: 0; font-size: 14px; font-weight: 500;">
+            {{ award.name }}
+          </n-ellipsis>
+          <n-flex align="center" :size="6" style="flex-shrink: 0; color: #777; font-size: 12px;">
             <n-tag v-if="!award.is_active" size="small">停用</n-tag>
             <span>{{ award.item_count }} 件</span>
-          </span>
+          </n-flex>
         </button>
       </n-spin>
-    </aside>
+    </n-layout-sider>
 
-    <section class="detail-panel">
+    <n-layout content-style="padding: 12px; overflow: auto; height: 100%; box-sizing: border-box;">
       <n-form
         :model="awardDraft"
         label-placement="left"
         label-width="82"
-        class="award-form"
+        style="max-width: 1100px;"
       >
         <n-grid :cols="4" :x-gap="12" :y-gap="8" responsive="screen">
           <n-form-item-gi :span="2" label="名称">
@@ -51,7 +58,7 @@
             <n-input-number
               v-model:value="awardDraft.sort_order"
               :show-button="false"
-              class="number-input"
+              style="width: 120px;"
             />
           </n-form-item-gi>
           <n-form-item-gi label="启用">
@@ -70,7 +77,7 @@
             />
           </n-form-item-gi>
           <n-form-item-gi>
-            <n-flex justify="end" class="form-actions">
+            <n-flex justify="end" style="width: 100%;">
               <n-button
                 type="primary"
                 :disabled="!canSaveAward"
@@ -100,7 +107,7 @@
 
       <n-divider />
 
-      <n-flex class="section-header" justify="space-between" align="center">
+      <n-flex justify="space-between" align="center" style="margin-bottom: 10px;">
         <n-text strong>已授奖作品</n-text>
         <n-flex align="center">
           <n-button
@@ -136,16 +143,16 @@
         :data="awardItems"
         :loading="itemsLoading"
         :row-key="(row: AwardItemManageOut) => row.id"
-        class="items-table"
+        style="max-width: 1100px;"
       />
-    </section>
-  </n-flex>
+    </n-layout>
+  </n-layout>
 
   <n-modal
     v-model:show="addWorkModalVisible"
     preset="card"
     title="添加作品"
-    class="add-work-modal"
+    style="width: min(640px, calc(100vw - 32px));"
   >
     <n-flex vertical :size="12">
       <n-input-group>
@@ -172,7 +179,7 @@
         {{ lookupError }}
       </n-alert>
 
-      <div v-if="submissionCandidate" class="candidate-panel">
+      <n-flex v-if="submissionCandidate" vertical :size="12">
         <n-descriptions :column="2" size="small" bordered>
           <n-descriptions-item label="提交者">
             {{ submissionCandidate.username }}
@@ -209,7 +216,7 @@
             </n-tag>
           </n-descriptions-item>
         </n-descriptions>
-        <n-flex justify="end" class="candidate-actions">
+        <n-flex justify="end" style="width: 100%;">
           <n-button secondary @click="clearSubmissionLookup">清空</n-button>
           <n-button
             type="primary"
@@ -226,7 +233,7 @@
             {{ candidateAlreadyAwarded ? "已添加" : "添加到奖项" }}
           </n-button>
         </n-flex>
-      </div>
+      </n-flex>
     </n-flex>
   </n-modal>
 </template>
@@ -553,21 +560,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.manage-page {
-  height: 100%;
-  min-width: 0;
-}
-
-.award-panel {
-  width: 260px;
-  min-width: 260px;
-  height: 100%;
-  box-sizing: border-box;
-  overflow: auto;
-  border-right: 1px solid #efeff5;
-  background: #fafafa;
-}
-
 .panel-header {
   position: sticky;
   top: 0;
@@ -577,10 +569,6 @@ onMounted(async () => {
   background: #fafafa;
 }
 
-.award-empty {
-  margin-top: 40px;
-}
-
 .award-row {
   display: flex;
   width: 100%;
@@ -606,66 +594,6 @@ onMounted(async () => {
   color: #18a058;
 }
 
-.award-name {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 14px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.award-meta {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 6px;
-  color: #777;
-  font-size: 12px;
-}
-
-.detail-panel {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  box-sizing: border-box;
-  overflow: auto;
-  padding: 12px;
-}
-
-.award-form {
-  max-width: 1100px;
-}
-
-.number-input {
-  width: 120px;
-}
-
-.form-actions {
-  width: 100%;
-}
-
-.section-header {
-  margin-bottom: 10px;
-}
-
-.items-table {
-  max-width: 1100px;
-}
-
-.candidate-panel {
-  display: grid;
-  gap: 12px;
-}
-
-.candidate-actions {
-  width: 100%;
-}
-
-:global(.add-work-modal) {
-  width: min(640px, calc(100vw - 32px));
-}
-
 :deep(.table-number-input) {
   width: 76px;
 }