refactor: streamline layout, views routing and component composition

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/App.vue

@@ -90,10 +90,15 @@
           @reject-case="toast(`${activeCase?.id} 已转人工复核。`)"
         />
 
+        <TravelReimbursementCreateView
+          v-else-if="activeView === 'requests' && detailMode"
+          @back-to-requests="detailMode = false"
+        />
+
         <RequestsView
           v-else-if="activeView === 'requests'"
           :filtered-requests="filteredRequests"
-          @ask="handleOpenChat"
+          @ask="detailMode = true"
           @approve="handleApprove"
           @reject="handleReject"
           @create-request="openTravelCreate"
@@ -137,6 +142,7 @@ import { documents } from './data/requests.js'
 
 const loggedIn = ref(false)
 const travelCreateMode = ref(false)
+const detailMode = ref(false)
 
 function handleLogin(credentials) {
   if (credentials.username && credentials.password) {
@@ -162,10 +168,10 @@ const customRange = ref({ start: '2024-07-06', end: '2024-07-12' })
 const travelPrompts = ['帮我提交出差申请', '预订机票', '预订酒店', '预订火车票', '查询差旅政策']
 
 const topBarView = computed(() => {
-  if (travelCreateMode.value) {
+  if (travelCreateMode.value || detailMode.value) {
     return {
-      title: '差旅报销助手',
+      title: '差旅报销详情',
-      desc: '帮你填写报销、检查材料、跟踪进度'
+      desc: '查看报销单据详情、票据识别与审批进度'
     }
   }
   return currentView.value
@@ -191,6 +197,7 @@ function handleReject(request) {
 
 function handleNavigate(view) {
   travelCreateMode.value = false
+  detailMode.value = false
   setView(view)
 }
 

src/views/OverviewView.vue

@@ -217,19 +217,19 @@ const rankedDepartments = computed(() => {
 <style scoped>
 .dashboard {
   display: grid;
-  gap: 24px;
+  gap: 16px;
   animation: fadeUp 260ms var(--ease) both;
 }
 
 .kpi-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 24px;
+  gap: 12px;
 }
 
 .kpi-card {
   position: relative;
-  padding: 20px 20px 16px;
+  padding: 12px 14px 10px;
   display: flex;
   flex-direction: column;
   border-left: 3px solid var(--accent);
@@ -246,19 +246,19 @@ const rankedDepartments = computed(() => {
 .kpi-head {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 
 .kpi-icon {
-  width: 36px;
+  width: 26px;
-  height: 36px;
+  height: 26px;
   display: grid;
   place-items: center;
-  border-radius: 8px;
+  border-radius: 7px;
   background: color-mix(in srgb, var(--accent) 10%, white);
   color: var(--accent);
-  font-size: 18px;
+  font-size: 14px;
   flex: 0 0 auto;
   animation: iconPop 560ms var(--ease) both;
   animation-delay: calc(var(--delay, 0ms) + 100ms);
@@ -266,9 +266,9 @@ const rankedDepartments = computed(() => {
 
 .kpi-label {
   color: #64748b;
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 500;
-  line-height: 1.3;
+  line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -276,15 +276,14 @@ const rankedDepartments = computed(() => {
 
 .kpi-value {
   display: block;
-  height: 32px;
+  min-height: 22px;
-  line-height: 32px;
   color: #0f172a;
-  font-size: clamp(20px, 1.6vw, 26px);
+  font-size: clamp(16px, 1.2vw, 20px);
   line-height: 1;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
-  margin-bottom: 16px;
+  margin-bottom: 6px;
   letter-spacing: 0;
 }
 
@@ -292,20 +291,20 @@ const rankedDepartments = computed(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 6px;
-  padding-top: 12px;
+  padding-top: 6px;
   border-top: 1px solid #f1f5f9;
 }
 
 .kpi-badge {
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 2px;
-  padding: 2px 8px;
+  padding: 1px 6px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
-  line-height: 1.6;
+  line-height: 1.45;
 }
 
 .kpi-badge.up {
@@ -319,12 +318,12 @@ const rankedDepartments = computed(() => {
 }
 
 .kpi-badge .mdi {
-  font-size: 13px;
+  font-size: 11px;
 }
 
 .kpi-delta {
   color: #94a3b8;
-  font-size: 12px;
+  font-size: 10px;
   white-space: nowrap;
 }
 

src/views/PoliciesView.vue

@@ -2,17 +2,6 @@
   <section class="knowledge-page">
     <div class="knowledge-grid">
       <section class="knowledge-main">
-        <div class="knowledge-metrics panel">
-          <article v-for="item in metrics" :key="item.label" class="metric-card" :style="{ '--accent': item.accent }">
-            <span class="metric-icon"><i :class="item.icon"></i></span>
-            <div>
-              <p>{{ item.label }} <i v-if="item.help" class="mdi mdi-help-circle-outline"></i></p>
-              <strong>{{ item.value }}</strong>
-              <small>{{ item.meta }}</small>
-            </div>
-          </article>
-        </div>
-
         <article class="library-panel panel">
           <header class="panel-title">
             <h2>文档库 / 文件夹</h2>
@@ -100,12 +89,12 @@
       <aside class="analytics-column">
         <article class="ops-card panel">
           <header class="card-head">
-            <h2>知识运营概览 <i class="mdi mdi-help-circle-outline"></i></h2>
+            <h2>知识运营概览</h2>
           </header>
           <div class="ops-grid">
             <div v-for="item in opsMetrics" :key="item.label" class="ops-item" :style="{ '--accent': item.accent }">
-              <span><i :class="item.icon"></i></span>
+              <span class="ops-icon"><i :class="item.icon"></i></span>
-              <div>
+              <div class="ops-text">
                 <strong>{{ item.value }}</strong>
                 <p>{{ item.label }}</p>
                 <small>{{ item.meta }}</small>
@@ -116,7 +105,7 @@
 
         <article class="top-card panel">
           <header class="card-head">
-            <h2>热门问题 TOP5 <i class="mdi mdi-help-circle-outline"></i></h2>
+            <h2>热门问题 TOP5</h2>
             <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
           </header>
           <ol class="hot-list">
@@ -128,38 +117,9 @@
           </ol>
         </article>
 
-        <article class="feedback-card panel">
-          <header class="card-head">
-            <h2>用户点赞最多 <i class="mdi mdi-help-circle-outline"></i></h2>
-            <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
-          </header>
-          <ul class="feedback-list positive">
-            <li v-for="(item, idx) in likedAnswers" :key="item.title">
-              <span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
-              <span>{{ item.title }}</span>
-              <b><i class="mdi mdi-thumb-up"></i>{{ item.count }}</b>
-            </li>
-          </ul>
-        </article>
-
-        <article class="feedback-card panel">
-          <header class="card-head">
-            <h2>用户点踩较多 / 待优化 <i class="mdi mdi-help-circle-outline"></i></h2>
-            <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
-          </header>
-          <ul class="feedback-list negative">
-            <li v-for="(item, idx) in dislikedAnswers" :key="item.title">
-              <span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
-              <span>{{ item.title }}</span>
-              <b><i class="mdi mdi-thumb-down"></i>{{ item.count }}</b>
-              <em>待优化</em>
-            </li>
-          </ul>
-        </article>
-
         <article class="trend-card panel">
           <header class="card-head">
-            <h2>近7天提问趋势 <i class="mdi mdi-help-circle-outline"></i></h2>
+            <h2>近7天提问趋势</h2>
             <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
           </header>
           <svg class="trend-chart" viewBox="0 0 420 190" role="img" aria-label="近7天提问趋势">
@@ -171,9 +131,38 @@
           </svg>
         </article>
 
+        <article class="feedback-card panel">
+          <header class="card-head">
+            <h2>用户反馈</h2>
+            <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
+          </header>
+          <div class="feedback-split">
+            <div class="feedback-half">
+              <h3><i class="mdi mdi-thumb-up"></i> 点赞最多</h3>
+              <ul class="feedback-list positive">
+                <li v-for="(item, idx) in likedAnswers" :key="item.title">
+                  <span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
+                  <span>{{ item.title }}</span>
+                  <b><i class="mdi mdi-thumb-up"></i>{{ item.count }}</b>
+                </li>
+              </ul>
+            </div>
+            <div class="feedback-half">
+              <h3><i class="mdi mdi-thumb-down"></i> 待优化</h3>
+              <ul class="feedback-list negative">
+                <li v-for="(item, idx) in dislikedAnswers" :key="item.title">
+                  <span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
+                  <span>{{ item.title }}</span>
+                  <b><i class="mdi mdi-thumb-down"></i>{{ item.count }}</b>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </article>
+
         <article class="recent-card panel">
           <header class="card-head">
-            <h2>最近更新知识 <i class="mdi mdi-help-circle-outline"></i></h2>
+            <h2>最近更新知识</h2>
             <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
           </header>
           <ul class="recent-list">
@@ -192,13 +181,6 @@
 <script setup>
 import { computed } from 'vue'
 
-const metrics = [
-  { label: '文档总数', value: '1,248', meta: '较上周 +68', icon: 'mdi mdi-file-document-outline', accent: '#10b981', help: true },
-  { label: '文件夹总数', value: '36', meta: '较上周 +2', icon: 'mdi mdi-folder', accent: '#3b82f6' },
-  { label: '问答总量', value: '8,562', meta: '较上周 +321', icon: 'mdi mdi-comment-text-multiple-outline', accent: '#8b5cf6' },
-  { label: '知识命中率', value: '87.3%', meta: '较上周 +1.2%', icon: 'mdi mdi-bullseye-arrow', accent: '#f59e0b' }
-]
-
 const folders = [
   { name: '财务知识库', count: 36, icon: 'mdi mdi-folder', active: false },
   { name: '制度政策', count: 8, icon: 'mdi mdi-folder', active: false },
@@ -304,78 +286,19 @@ const recentKnowledge = [
   min-width: 0;
   min-height: 0;
   display: grid;
-  gap: 16px;
+  gap: 12px;
 }
 
 .knowledge-main {
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
 }
 
 .analytics-column {
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-auto-rows: minmax(0, auto);
+  grid-auto-rows: minmax(176px, 1fr);
-  overflow-y: auto;
-}
-
-.knowledge-metrics {
-  min-height: 96px;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  padding: 0;
-  overflow: hidden;
-}
-
-.metric-card {
-  min-height: 96px;
-  display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
-  align-items: center;
   gap: 14px;
-  padding: 16px 20px;
+  overflow: hidden;
-  border-right: 1px solid #edf2f7;
-}
-
-.metric-card:last-child {
-  border-right: 0;
-}
-
-.metric-icon {
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--accent) 14%, white);
-  color: var(--accent);
-  font-size: 22px;
-}
-
-.metric-card p {
-  color: #334155;
-  font-size: 14px;
-  font-weight: 650;
-}
-
-.metric-card p i,
-.card-head h2 i {
-  color: #94a3b8;
-  font-size: 12px;
-}
-
-.metric-card strong {
-  display: block;
-  margin-top: 5px;
-  color: #0f172a;
-  font-size: 24px;
-  font-weight: 850;
-  line-height: 1;
-}
-
-.metric-card small {
-  display: block;
-  margin-top: 7px;
-  color: #64748b;
-  font-size: 13px;
 }
 
 .library-panel {
@@ -389,7 +312,7 @@ const recentKnowledge = [
 .panel-title h2,
 .card-head h2 {
   color: #0f172a;
-  font-size: 19px;
+  font-size: 16px;
   font-weight: 850;
 }
 
@@ -677,79 +600,90 @@ th {
 }
 
 .ops-card {
-  grid-column: span 1;
+  grid-column: span 2;
-  padding: 16px 18px;
+  padding: 14px 18px;
 }
 
 .ops-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px 12px;
+  gap: 12px;
-  margin-top: 18px;
+  margin-top: 14px;
 }
 
 .ops-item {
   min-width: 0;
-  display: grid;
+  display: flex;
-  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: flex-start;
-  gap: 9px;
+  gap: 8px;
-  align-items: start;
 }
 
-.ops-item > span {
+.ops-icon {
-  width: 26px;
+  width: 28px;
-  height: 26px;
+  height: 28px;
+  flex-shrink: 0;
   display: grid;
   place-items: center;
-  border-radius: 999px;
+  border-radius: 8px;
-  background: color-mix(in srgb, var(--accent) 12%, white);
+  background: color-mix(in srgb, var(--accent) 10%, #f8fafc);
   color: var(--accent);
-  font-size: 16px;
+  font-size: 15px;
 }
 
-.ops-item strong {
+.ops-text strong {
-  color: #0f172a;
-  font-size: 18px;
-  font-weight: 900;
-}
-
-.ops-item p {
-  margin-top: 3px;
-  color: #334155;
-  font-size: 12px;
-  font-weight: 750;
-}
-
-.ops-item small {
   display: block;
-  margin-top: 8px;
+  color: #0f172a;
-  color: #64748b;
+  font-size: 16px;
+  font-weight: 850;
+  line-height: 1.2;
+}
+
+.ops-text p {
+  margin-top: 2px;
+  color: #334155;
   font-size: 11px;
+  font-weight: 700;
+}
+
+.ops-text small {
+  display: block;
+  margin-top: 2px;
+  color: #94a3b8;
+  font-size: 10px;
 }
 
 .top-card,
-.feedback-card,
 .trend-card,
 .recent-card {
-  padding: 16px 18px;
+  padding: 14px 16px;
 }
 
-.hot-list,
+.feedback-card {
-.feedback-list,
+  grid-column: span 2;
-.recent-list {
+  padding: 14px 18px;
+}
+
+.hot-list {
   display: grid;
-  gap: 13px;
+  gap: 6px;
-  margin: 16px 0 0;
+  margin: 10px 0 0;
   padding: 0;
   list-style: none;
 }
 
 .hot-list li {
-  min-height: 32px;
+  min-height: 28px;
   display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) auto;
+  grid-template-columns: 22px minmax(0, 1fr) auto;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: 6px;
+  transition: background 120ms ease;
+}
+
+.hot-list li:hover {
+  background: #f8fafc;
 }
 
 .hot-list span {
@@ -759,7 +693,7 @@ th {
   place-items: center;
   border-radius: 5px;
   color: #fff;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 900;
 }
 
@@ -770,77 +704,27 @@ th {
   color: #64748b;
 }
 
-.hot-list strong,
+.hot-list strong {
-.feedback-list span {
   min-width: 0;
   color: #334155;
-  font-size: 13px;
+  font-size: 12px;
-  font-weight: 800;
+  font-weight: 750;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .hot-list b {
-  color: #334155;
+  color: #64748b;
-  font-size: 13px;
-  font-weight: 850;
-}
-
-.feedback-list li {
-  min-height: 32px;
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
-}
-
-.feedback-list.negative li {
-  grid-template-columns: 24px minmax(0, 1fr) auto auto;
-}
-
-.feedback-list b {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #059669;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.feedback-list .rank-badge {
-  width: 20px;
-  height: 20px;
-  display: grid;
-  place-items: center;
-  border-radius: 5px;
-  color: #fff;
   font-size: 12px;
-  font-weight: 900;
+  font-weight: 800;
-}
+  white-space: nowrap;
-
-.feedback-list .rank-badge.hot { background: #ef4444; }
-.feedback-list .rank-badge.warm { background: #f59e0b; }
-.feedback-list .rank-badge.normal { background: #f1f5f9; color: #64748b; }
-
-.feedback-list.negative b {
-  color: #ef4444;
-}
-
-.feedback-list em {
-  padding: 4px 8px;
-  border-radius: 7px;
-  background: #fee2e2;
-  color: #ef4444;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 850;
 }
 
 .trend-chart {
   width: 100%;
-  height: 220px;
+  height: 160px;
-  margin-top: 12px;
+  margin-top: 8px;
 }
 
 .trend-chart line {
@@ -855,13 +739,105 @@ th {
 .trend-chart polyline {
   fill: none;
   stroke: #10b981;
-  stroke-width: 3;
+  stroke-width: 2.5;
 }
 
 .trend-chart circle {
   fill: #fff;
   stroke: #10b981;
-  stroke-width: 3;
+  stroke-width: 2.5;
+}
+
+.feedback-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 10px;
+}
+
+.feedback-half h3 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.feedback-half h3 i {
+  font-size: 14px;
+}
+
+.feedback-half:first-child h3 i { color: #059669; }
+.feedback-half:last-child h3 i { color: #ef4444; }
+
+.feedback-list {
+  display: grid;
+  gap: 5px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.feedback-list li {
+  min-height: 26px;
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: 6px;
+  transition: background 120ms ease;
+}
+
+.feedback-list li:hover {
+  background: #f8fafc;
+}
+
+.feedback-list span {
+  min-width: 0;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.feedback-list .rank-badge {
+  width: 18px;
+  height: 18px;
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.feedback-list .rank-badge.hot { background: #ef4444; }
+.feedback-list .rank-badge.warm { background: #f59e0b; }
+.feedback-list .rank-badge.normal { background: #f1f5f9; color: #64748b; }
+
+.feedback-list b {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.feedback-list.positive b { color: #059669; }
+.feedback-list.negative b { color: #ef4444; }
+
+.recent-list {
+  display: grid;
+  gap: 6px;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
 }
 
 .recent-list li {
@@ -869,21 +845,29 @@ th {
   grid-template-columns: 18px minmax(0, 1fr) auto;
   align-items: center;
   gap: 8px;
+  padding: 4px;
+  border-radius: 6px;
+  transition: background 120ms ease;
+}
+
+.recent-list li:hover {
+  background: #f8fafc;
 }
 
 .recent-list strong {
   color: #334155;
   font-size: 12px;
-  font-weight: 850;
+  font-weight: 800;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .recent-list time {
-  color: #64748b;
+  color: #94a3b8;
-  font-size: 12px;
+  font-size: 11px;
-  font-weight: 750;
+  font-weight: 700;
+  white-space: nowrap;
 }
 
 @media (max-width: 1380px) {
@@ -894,11 +878,19 @@ th {
 }
 
 @media (max-width: 980px) {
-  .knowledge-metrics,
   .analytics-column {
     grid-template-columns: 1fr;
   }
 
+  .ops-card,
+  .feedback-card {
+    grid-column: span 1;
+  }
+
+  .feedback-split {
+    grid-template-columns: 1fr;
+  }
+
   .library-body {
     grid-template-columns: 1fr;
   }
@@ -910,7 +902,7 @@ th {
   }
 
   .ops-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 </style>

src/views/RequestsView.vue

@@ -1,21 +1,6 @@
 <template>
   <section class="travel-page">
-    <div class="travel-kpis">
-      <article v-for="item in kpis" :key="item.label" class="travel-kpi panel" :style="{ '--accent': item.accent }">
-        <span class="kpi-icon"><i :class="item.icon"></i></span>
-        <div>
-          <p>{{ item.label }}</p>
-          <strong>{{ item.value }} <small>单</small></strong>
-          <span :class="item.trend">较上月 {{ item.delta }} <i :class="item.arrow"></i></span>
-        </div>
-      </article>
-    </div>
-
     <article class="travel-list panel">
-      <header class="list-head">
-          <h2>我的差旅报销单</h2>
-        </header>
-
       <nav class="status-tabs" aria-label="差旅报销状态">
         <button
           v-for="tab in tabs"
@@ -67,17 +52,6 @@
             <i class="mdi mdi-chevron-down"></i>
           </button>
         </div>
-
-        <div class="toolbar-actions">
-          <button class="export-btn" type="button">
-            <i class="mdi mdi-upload"></i>
-            <span>导出</span>
-          </button>
-          <button class="create-btn" type="button" @click="emit('createRequest')">
-            <i class="mdi mdi-plus"></i>
-            <span>发起报销</span>
-          </button>
-        </div>
       </div>
 
       <p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意行可查看单据详情</p>
@@ -141,7 +115,14 @@
           <button v-for="p in totalPages" :key="p" class="page-number" :class="{ active: currentPage === p }" type="button" :aria-current="currentPage === p ? 'page' : undefined" @click="currentPage = p">{{ p }}</button>
           <button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++"><i class="mdi mdi-chevron-right"></i></button>
         </div>
-        <button class="page-size" type="button">{{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i></button>
+        <div class="page-size-wrap">
+          <button class="page-size" type="button" @click="pageSizeOpen = !pageSizeOpen">
+            {{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i>
+          </button>
+          <div v-if="pageSizeOpen" class="page-size-dropdown" role="listbox">
+            <button v-for="size in pageSizes" :key="size" type="button" role="option" :aria-selected="pageSize === size" :class="{ active: pageSize === size }" @click="changePageSize(size)">{{ size }} 条/页</button>
+          </div>
+        </div>
       </footer>
     </article>
   </section>
@@ -154,7 +135,7 @@ defineProps({
   filteredRequests: { type: Array, required: true }
 })
 
-const emit = defineEmits(['ask', 'approve', 'reject', 'createRequest'])
+const emit = defineEmits(['ask', 'approve', 'reject'])
 
 const activeTab = ref('全部')
 const tabs = ['全部', '待提交', '审批中', '待出行', '已完成']
@@ -178,13 +159,6 @@ function applyDateRange() {
   datePopover.value = false
 }
 
-const kpis = [
-  { label: '全部单据', value: 30, delta: '+8', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clipboard-text-outline', accent: '#10b981' },
-  { label: '待提交', value: 5, delta: '-1', trend: 'down good', arrow: 'mdi mdi-arrow-down', icon: 'mdi mdi-send', accent: '#f59e0b' },
-  { label: '审批中', value: 8, delta: '+2', trend: 'up bad', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clock-outline', accent: '#3b82f6' },
-  { label: '已完成', value: 17, delta: '+7', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-check', accent: '#10b981' }
-]
-
 const rows = [
   { id: 'BR240715001', reason: '华东区域客户拜访', city: '上海、苏州、杭州', period: '07-14~07-17 (4天)', applyTime: '2024-07-13', amount: '￥4,280.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
   { id: 'BR240714010', reason: '年度战略合作伙伴会议', city: '北京', period: '07-15~07-16 (2天)', applyTime: '2024-07-12', amount: '￥1,860.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
@@ -219,7 +193,15 @@ const rows = [
 ]
 
 const currentPage = ref(1)
-const pageSize = 10
+const pageSize = ref(10)
+const pageSizes = [10, 20, 50]
+const pageSizeOpen = ref(false)
+
+function changePageSize(size) {
+  pageSize.value = size
+  pageSizeOpen.value = false
+  currentPage.value = 1
+}
 
 const filteredRows = computed(() => {
   if (activeTab.value === '全部') return rows
@@ -227,11 +209,11 @@ const filteredRows = computed(() => {
 })
 
 const totalCount = computed(() => filteredRows.value.length)
-const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize)))
+const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize.value)))
 
 const visibleRows = computed(() => {
-  const start = (currentPage.value - 1) * pageSize
+  const start = (currentPage.value - 1) * pageSize.value
-  return filteredRows.value.slice(start, start + pageSize)
+  return filteredRows.value.slice(start, start + pageSize.value)
 })
 
 watch(activeTab, () => { currentPage.value = 1 })
@@ -242,90 +224,20 @@ watch(activeTab, () => { currentPage.value = 1 })
   height: 100%;
   min-height: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
   gap: 14px;
   animation: fadeUp 220ms var(--ease) both;
   overflow: hidden;
 }
 
-.travel-kpis {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.travel-kpi {
-  min-height: 96px;
-  display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
-  align-items: center;
-  gap: 14px;
-  padding: 16px 20px;
-}
-
-.kpi-icon {
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--accent) 14%, white);
-  color: var(--accent);
-  font-size: 22px;
-}
-
-.travel-kpi p {
-  color: #334155;
-  font-size: 14px;
-  font-weight: 650;
-}
-
-.travel-kpi strong {
-  display: block;
-  margin-top: 5px;
-  color: #0f172a;
-  font-size: 26px;
-  font-weight: 850;
-  line-height: 1;
-}
-
-.travel-kpi small {
-  color: #0f172a;
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.travel-kpi span:not(.kpi-icon) {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 7px;
-  color: #64748b;
-  font-size: 14px;
-}
-
-.travel-kpi .good i {
-  color: #059669;
-}
-
-.travel-kpi .bad i {
-  color: #ef4444;
-}
-
 .travel-list {
   min-height: 0;
   display: grid;
-  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
   padding: 16px 18px;
   overflow: hidden;
 }
 
-.list-head h2 {
-  color: #0f172a;
-  font-size: 19px;
-  font-weight: 850;
-}
-
 .list-search {
   position: relative;
   width: 220px;
@@ -402,8 +314,7 @@ watch(activeTab, () => { currentPage.value = 1 })
   margin-top: 14px;
 }
 
-.filter-set,
+.filter-set {
-.toolbar-actions {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -411,8 +322,6 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 .filter-btn,
-.export-btn,
-.create-btn,
 .page-size {
   min-height: 38px;
   display: inline-flex;
@@ -424,11 +333,6 @@ watch(activeTab, () => { currentPage.value = 1 })
   font-size: 14px;
   font-weight: 750;
   white-space: nowrap;
-}
-
-.filter-btn,
-.export-btn,
-.page-size {
   border: 1px solid #d7e0ea;
   background: #fff;
   color: #334155;
@@ -558,23 +462,11 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 .filter-btn:hover,
-.export-btn:hover,
 .page-size:hover {
   border-color: rgba(16, 185, 129, .32);
   color: #0f9f78;
 }
 
-.create-btn {
-  border: 0;
-  background: #059669;
-  color: #fff;
-  box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
-}
-
-.create-btn:hover {
-  background: #047857;
-}
-
 .hint {
   display: inline-flex;
   align-items: center;
@@ -589,7 +481,6 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 .table-wrap {
-  min-height: 495px;
   margin-top: 10px;
   overflow-x: auto;
   overflow-y: auto;
@@ -598,6 +489,7 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 table {
+  height: 100%;
   width: 100%;
   min-width: 1140px;
   border-collapse: collapse;
@@ -623,6 +515,9 @@ td {
 }
 
 th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   background: #f7fafc;
   color: #64748b;
   font-size: 13px;
@@ -763,11 +658,50 @@ tbody tr:last-child td {
   box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
 }
 
-@media (max-width: 1200px) {
+.page-size-wrap {
-  .travel-kpis {
+  position: relative;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  justify-self: end;
-  }
+}
 
+.page-size-dropdown {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 40;
+  display: grid;
+  border: 1px solid #d7e0ea;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
+  overflow: hidden;
+}
+
+.page-size-dropdown button {
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 750;
+  white-space: nowrap;
+  padding: 0 20px;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.page-size-dropdown button:hover {
+  background: #f0fdf4;
+  color: #059669;
+}
+
+.page-size-dropdown button.active {
+  background: #059669;
+  color: #fff;
+}
+
+@media (max-width: 1200px) {
   .list-toolbar,
   .list-foot {
     grid-template-columns: 1fr;
@@ -775,12 +709,7 @@ tbody tr:last-child td {
 }
 
 @media (max-width: 760px) {
-  .travel-kpis {
+  .travel-list {
-    grid-template-columns: 1fr;
-  }
-
-  .travel-list,
-  .travel-kpi {
     padding: 16px;
   }
 
@@ -790,13 +719,10 @@ tbody tr:last-child td {
   }
 
   .filter-btn,
-  .export-btn,
-  .create-btn,
   .page-size {
     width: 100%;
   }
 
-  .toolbar-actions,
   .filter-set {
     width: 100%;
   }