前端UI界面美化-2

frontend/src/components/QuickActions.vue

@@ -1,35 +1,128 @@
 <template>
-  <el-card>
-    <div class="actions">
-      <el-button v-for="item in actions" :key="item.path" type="primary" plain @click="go(item.path)">
-        {{ item.label }}
-      </el-button>
+  <div class="quick-actions-section">
+    <div class="section-header">
+      <el-icon class="header-icon"><Pointer /></el-icon>
+      <span class="header-title">通往业务模块的快捷入口</span>
     </div>
-  </el-card>
+    <div class="actions-grid">
+      <div 
+        v-for="item in actions" 
+        :key="item.path" 
+        class="action-item"
+        @click="go(item.path)"
+      >
+        <div class="action-icon-wrapper" :style="{ backgroundColor: item.color + '20', color: item.color }">
+          <el-icon><component :is="item.icon" /></el-icon>
+        </div>
+        <span class="action-label">{{ item.label }}</span>
+        <el-icon class="action-arrow"><ArrowRight /></el-icon>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
+import { 
+  Pointer, ArrowRight, Timer, UserFilled, Warning, 
+  QuestionFilled, Management, Money, Collection 
+} from "@element-plus/icons-vue";
 
 const router = useRouter();
 
 const actions = [
-  { label: "伦理与启动", path: "/study/milestones" },
-  { label: "受试者", path: "/study/subjects" },
-  { label: "AE", path: "/study/aes" },
-  { label: "数据问题", path: "/study/data-queries" },
-  { label: "药品", path: "/study/imp/inventory" },
-  { label: "费用", path: "/study/finance" },
-  { label: "FAQ", path: "/study/faq" },
+  { label: "里程碑管理", path: "/study/milestones", icon: Timer, color: "#2f54eb" },
+  { label: "受试者", path: "/study/subjects", icon: UserFilled, color: "#722ed1" },
+  { label: "不良事件", path: "/study/aes", icon: Warning, color: "#faad14" },
+  { label: "数据问题", path: "/study/data-queries", icon: QuestionFilled, color: "#1890ff" },
+  { label: "药品库存", path: "/study/imp/inventory", icon: Management, color: "#52c41a" },
+  { label: "费用治理", path: "/study/finance", icon: Money, color: "#eb2f96" },
+  { label: "项目知识库", path: "/study/faq", icon: Collection, color: "#fa8c16" },
 ];
 
 const go = (path: string) => router.push(path);
 </script>
 
 <style scoped>
-.actions {
+.quick-actions-section {
+  background-color: #fff;
+  border-radius: var(--ctms-radius);
+  padding: 24px;
+  box-shadow: var(--ctms-shadow-sm);
+}
+
+.section-header {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
   gap: 8px;
+  margin-bottom: 20px;
+}
+
+.header-icon {
+  font-size: 18px;
+  color: var(--ctms-primary);
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.action-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: #fafafa;
+  border: 1px solid var(--ctms-border-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.action-item:hover {
+  background-color: #fff;
+  border-color: var(--ctms-primary-hover);
+  box-shadow: var(--ctms-shadow-sm);
+  transform: translateY(-2px);
+}
+
+.action-icon-wrapper {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  margin-right: 12px;
+}
+
+.action-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ctms-text-main);
+  flex: 1;
+}
+
+.action-arrow {
+  font-size: 14px;
+  color: var(--ctms-text-disabled);
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: translateX(-10px);
+}
+
+.action-item:hover .action-arrow {
+  opacity: 1;
+  transform: translateX(0);
 }
 </style>