Step F3：项目 Dashboard

frontend/src/components/KpiCard.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-card class="kpi-card" shadow="hover">
+    <div class="title">{{ title }}</div>
+    <div class="value" v-if="!loading">{{ value }}</div>
+    <div class="value loading" v-else>加载中...</div>
+    <div class="subtext" v-if="subtext">{{ subtext }}</div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string;
+  value: string | number;
+  subtext?: string;
+  loading?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+.kpi-card {
+  min-height: 120px;
+}
+.title {
+  color: #909399;
+  font-size: 13px;
+}
+.value {
+  font-size: 28px;
+  font-weight: 600;
+  margin: 8px 0;
+}
+.subtext {
+  color: #909399;
+  font-size: 12px;
+}
+.loading {
+  color: #c0c4cc;
+}
+</style>

frontend/src/components/QuickActions.vue

@@ -0,0 +1,35 @@
+<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>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const actions = [
+  { label: "任务", path: "/study/tasks" },
+  { label: "受试者", path: "/study/subjects" },
+  { label: "AE", path: "/study/aes" },
+  { label: "数据问题", path: "/study/data-queries" },
+  { label: "药品", path: "/study/imp" },
+  { label: "费用", path: "/study/finance" },
+  { label: "FAQ", path: "/study/faq" },
+];
+
+const go = (path: string) => router.push(path);
+</script>
+
+<style scoped>
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+</style>