Step F3：项目 Dashboard

frontend/src/api/dashboard.ts

@@ -0,0 +1,19 @@
+import { apiGet } from "./axios";
+import type { ApiListResponse, Study, UserInfo } from "../types/api";
+
+export const fetchProgress = (studyId: string) =>
+  apiGet(`/api/v1/studies/${studyId}/dashboard/progress`);
+
+export const fetchFinanceSummary = (studyId: string) =>
+  apiGet(`/api/v1/studies/${studyId}/finance/summary`);
+
+export const fetchOverdueAesCount = (studyId: string) =>
+  apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/aes`, { params: { overdue: true, limit: 1 } });
+
+export const fetchOverdueQueriesCount = (studyId: string) =>
+  apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/data-queries`, { params: { overdue: true, limit: 1 } });
+
+export const fetchMyTodoTasks = (studyId: string, assigneeId: string) =>
+  apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/tasks`, {
+    params: { assignee_id: assigneeId, status: "TODO" },
+  });

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>

frontend/src/router/index.ts

@@ -6,6 +6,13 @@ import Home from "../views/Home.vue";
 import Login from "../views/Login.vue";
 import StudyList from "../views/StudyList.vue";
 import StudyHome from "../views/StudyHome.vue";
+import Tasks from "../views/Tasks.vue";
+import Subjects from "../views/Subjects.vue";
+import Aes from "../views/Aes.vue";
+import DataQueries from "../views/DataQueries.vue";
+import Imp from "../views/Imp.vue";
+import Finance from "../views/Finance.vue";
+import Faq from "../views/Faq.vue";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -31,6 +38,48 @@ const routes: RouteRecordRaw[] = [
         component: StudyHome,
         meta: { title: "项目首页", requiresStudy: true },
       },
+      {
+        path: "study/tasks",
+        name: "StudyTasks",
+        component: Tasks,
+        meta: { title: "任务", requiresStudy: true },
+      },
+      {
+        path: "study/subjects",
+        name: "StudySubjects",
+        component: Subjects,
+        meta: { title: "受试者", requiresStudy: true },
+      },
+      {
+        path: "study/aes",
+        name: "StudyAes",
+        component: Aes,
+        meta: { title: "AE", requiresStudy: true },
+      },
+      {
+        path: "study/data-queries",
+        name: "StudyDataQueries",
+        component: DataQueries,
+        meta: { title: "数据问题", requiresStudy: true },
+      },
+      {
+        path: "study/imp",
+        name: "StudyImp",
+        component: Imp,
+        meta: { title: "药品", requiresStudy: true },
+      },
+      {
+        path: "study/finance",
+        name: "StudyFinance",
+        component: Finance,
+        meta: { title: "费用", requiresStudy: true },
+      },
+      {
+        path: "study/faq",
+        name: "StudyFaq",
+        component: Faq,
+        meta: { title: "FAQ", requiresStudy: true },
+      },
     ],
   },
   {

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>
+    <div class="header">
-      <h2>项目首页</h2>
+      <div>
-      <p>项目名称：{{ study.currentStudy.name }}</p>
+        <h2>项目首页 / Dashboard</h2>
-      <p>项目编号：{{ study.currentStudy.code }}</p>
+        <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>