前端UI界面美化-2

frontend/src/views/workbench/components/SectionCard.vue

@@ -1,28 +1,52 @@
 <template>
   <el-card shadow="never" class="section-card">
-    <div class="section-header">
-      <span>{{ title }}</span>
-      <el-button v-if="!loading" type="primary" link @click="$emit('more')">查看更多</el-button>
-    </div>
-    <el-skeleton :loading="loading" animated :rows="3">
-      <template #default>
-        <div v-if="items && items.length" class="list">
-          <div v-for="item in items.slice(0, 5)" :key="item.title + item.path" class="row" @click="go(item.path)">
-            <div class="title">{{ item.title }}</div>
-            <div class="meta">
-              <el-tag size="small" :type="item.overdue ? 'danger' : 'info'">{{ item.status || "待处理" }}</el-tag>
-              <span class="sub">{{ item.subtitle }}</span>
+    <template #header>
+      <div class="section-header">
+        <span class="section-title">{{ title }}</span>
+        <el-button v-if="!loading" type="primary" link @click="$emit('more')" class="more-btn">
+          查看更多 <el-icon class="el-icon--right"><ArrowRight /></el-icon>
+        </el-button>
+      </div>
+    </template>
+    
+    <div class="section-body">
+      <el-skeleton :loading="loading" animated :rows="3">
+        <template #default>
+          <div v-if="items && items.length" class="list-container">
+            <div 
+              v-for="item in items.slice(0, 5)" 
+              :key="item.title + item.path" 
+              class="list-item" 
+              @click="go(item.path)"
+            >
+              <div class="item-main">
+                <div class="item-title">{{ item.title }}</div>
+                <div class="item-subtitle">{{ item.subtitle }}</div>
+              </div>
+              <div class="item-meta">
+                <el-tag 
+                  size="small" 
+                  :type="item.overdue ? 'danger' : 'info'" 
+                  :effect="item.overdue ? 'dark' : 'light'"
+                  class="status-tag"
+                >
+                  {{ item.status || "待处理" }}
+                </el-tag>
+              </div>
             </div>
           </div>
-        </div>
-        <div v-else class="empty">{{ emptyText }}</div>
-      </template>
-    </el-skeleton>
+          <div v-else class="empty-state">
+            <el-empty :description="emptyText" :image-size="60" />
+          </div>
+        </template>
+      </el-skeleton>
+    </div>
   </el-card>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
+import { ArrowRight } from "@element-plus/icons-vue";
 
 defineProps<{
   title: string;
@@ -42,43 +66,92 @@ const go = (path: string) => {
 
 <style scoped>
 .section-card {
-  min-height: 220px;
+  border: 1px solid var(--ctms-border-color);
+  border-radius: 8px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-.section-header {
+
+:deep(.el-card__header) {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ctms-border-color);
+  background-color: #fafafa;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.more-btn {
+  font-size: 13px;
+  color: var(--ctms-primary);
+}
+
+.section-body {
+  flex: 1;
+  padding: 0;
+}
+
+.list-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.list-item {
+  padding: 16px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
-}
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.row {
-  padding: 8px;
-  border: 1px solid #ebeef5;
-  border-radius: 6px;
   cursor: pointer;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid var(--ctms-border-color);
 }
-.row:hover {
-  background: #f5f7fa;
+
+.list-item:last-child {
+  border-bottom: none;
 }
-.title {
-  font-weight: 600;
+
+.list-item:hover {
+  background-color: var(--ctms-primary-light);
 }
-.meta {
-  margin-top: 4px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #666;
+
+.item-main {
+  flex: 1;
+  overflow: hidden;
+  margin-right: 16px;
+}
+
+.item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ctms-text-main);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-subtitle {
   font-size: 12px;
+  color: var(--ctms-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.sub {
-  color: #888;
+
+.status-tag {
+  border-radius: 4px;
 }
-.empty {
-  color: #888;
+
+.empty-state {
+  padding: 40px 0;
+}
+
+:deep(.el-empty__description) {
+  margin-top: 8px;
+  color: var(--ctms-text-disabled);
 }
 </style>