Step F3：项目 Dashboard

frontend/src/views/Aes.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page">
+    <el-card><h2>不良事件</h2></el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+</style>

frontend/src/views/DataQueries.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page">
+    <el-card><h2>数据问题</h2></el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+</style>

frontend/src/views/Faq.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page">
+    <el-card><h2>FAQ</h2></el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+</style>

frontend/src/views/Finance.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page">
+    <el-card><h2>费用管理</h2></el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+</style>

frontend/src/views/Imp.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page">
+    <el-card><h2>药品管理</h2></el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+</style>

frontend/src/views/StudyHome.vue

@@ -1,10 +1,48 @@
 <template>
   <div class="study-home" v-if="study.currentStudy">
-    <el-card>
-      <h2>项目首页</h2>
-      <p>项目名称：{{ study.currentStudy.name }}</p>
-      <p>项目编号：{{ study.currentStudy.code }}</p>
+    <div class="header">
+      <div>
+        <h2>项目首页 / Dashboard</h2>
+        <p class="subtitle">
+          {{ study.currentStudy.name }}（{{ study.currentStudy.code }}）
+        </p>
+      </div>
+    </div>
+
+    <el-row :gutter="16" class="kpi-row">
+      <el-col :span="6">
+        <KpiCard title="任务完成率" :value="formatPercent(progress?.completion_rate)" :loading="loading.progress" />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard title="逾期任务" :value="progress?.tasks_overdue ?? 0" :loading="loading.progress" />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard title="逾期 AE" :value="overdueAes" :loading="loading.overdueAes" />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard title="逾期数据问题" :value="overdueQueries" :loading="loading.overdueQueries" />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard
+          title="费用总额"
+          :value="financeSummary?.total_amount ?? 0"
+          :subtext="`已支付：${financeSummary?.paid_amount ?? 0}`"
+          :loading="loading.finance"
+        />
+      </el-col>
+    </el-row>
+
+    <el-card class="section-card" header="我的待办任务">
+      <el-alert v-if="errors.tasks" type="warning" :title="errors.tasks" show-icon class="mb-8" />
+      <el-table v-else :data="todoTasks" style="width: 100%" v-loading="loading.tasks" @row-click="goTasks">
+        <el-table-column prop="title" label="标题" />
+        <el-table-column prop="priority" label="优先级" width="100" />
+        <el-table-column prop="status" label="状态" width="120" />
+        <el-table-column prop="due_date" label="截止日期" width="140" />
+      </el-table>
     </el-card>
+
+    <QuickActions class="mt-16" />
   </div>
   <div v-else class="study-home">
     <el-alert type="info" title="请先选择一个项目" />
@@ -12,13 +50,131 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ElAlert } from "element-plus";
+import { useAuthStore } from "../store/auth";
 import { useStudyStore } from "../store/study";
+import { fetchFinanceSummary, fetchMyTodoTasks, fetchOverdueAesCount, fetchOverdueQueriesCount, fetchProgress } from "../api/dashboard";
+import KpiCard from "../components/KpiCard.vue";
+import QuickActions from "../components/QuickActions.vue";
 
+const auth = useAuthStore();
 const study = useStudyStore();
+
+const progress = ref<any>(null);
+const financeSummary = ref<any>(null);
+const todoTasks = ref<any[]>([]);
+const overdueAes = ref<number>(0);
+const overdueQueries = ref<number>(0);
+
+const loading = ref({
+  progress: false,
+  finance: false,
+  tasks: false,
+  overdueAes: false,
+  overdueQueries: false,
+});
+
+const errors = ref({
+  progress: "",
+  finance: "",
+  tasks: "",
+  overdueAes: "",
+  overdueQueries: "",
+});
+
+const formatPercent = (v?: number | null) => {
+  if (v === undefined || v === null) return "-";
+  return `${(v * 100).toFixed(0)}%`;
+};
+
+const goTasks = () => {
+  window.location.hash = "#"; // placeholder
+};
+
+const loadData = async () => {
+  const studyId = study.currentStudy?.id;
+  const userId = auth.user?.id;
+  if (!studyId || !userId) return;
+
+  loading.value.progress = true;
+  loading.value.finance = true;
+  loading.value.tasks = true;
+  loading.value.overdueAes = true;
+  loading.value.overdueQueries = true;
+
+  try {
+    const [pRes, fRes, aesRes, dqRes, tasksRes] = await Promise.allSettled([
+      fetchProgress(studyId),
+      fetchFinanceSummary(studyId),
+      fetchOverdueAesCount(studyId),
+      fetchOverdueQueriesCount(studyId),
+      fetchMyTodoTasks(studyId, userId),
+    ]);
+
+    if (pRes.status === "fulfilled") {
+      progress.value = pRes.value.data;
+    } else {
+      errors.value.progress = "进度数据加载失败";
+    }
+    if (fRes.status === "fulfilled") {
+      financeSummary.value = fRes.value.data;
+    } else {
+      errors.value.finance = "费用汇总加载失败";
+    }
+    if (aesRes.status === "fulfilled") {
+      overdueAes.value = aesRes.value.data?.total ?? 0;
+    } else {
+      errors.value.overdueAes = "逾期 AE 加载失败";
+    }
+    if (dqRes.status === "fulfilled") {
+      overdueQueries.value = dqRes.value.data?.total ?? 0;
+    } else {
+      errors.value.overdueQueries = "逾期数据问题加载失败";
+    }
+    if (tasksRes.status === "fulfilled") {
+      todoTasks.value = tasksRes.value.data?.items ?? [];
+    } else {
+      errors.value.tasks = "待办任务加载失败";
+    }
+  } finally {
+    loading.value.progress = false;
+    loading.value.finance = false;
+    loading.value.tasks = false;
+    loading.value.overdueAes = false;
+    loading.value.overdueQueries = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
 </script>
 
 <style scoped>
 .study-home {
   padding: 16px;
 }
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.subtitle {
+  color: #909399;
+  margin: 0;
+}
+.kpi-row {
+  margin-bottom: 16px;
+}
+.section-card {
+  margin-top: 16px;
+}
+.mb-8 {
+  margin-bottom: 8px;
+}
+.mt-16 {
+  margin-top: 16px;
+}
 </style>

frontend/src/views/Subjects.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page">
+    <el-card><h2>受试者</h2></el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+</style>

frontend/src/views/Tasks.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="page">
+    <el-card><h2>任务</h2></el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+</style>