feat(workbench): 接入工作台首页概览聚合接口

clinical-web/src/components/layout/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useAppStore } from '@/stores/app'
@@ -9,6 +9,21 @@ const appStore = useAppStore()
 
 const pageTitle = computed(() => String(route.meta.title ?? '首页'))
 const pageGroup = computed(() => String(route.meta.group ?? '工作台'))
+const selectedCampusId = computed<string>({
+  get: () => appStore.selectedCampusId,
+  set: (id) => appStore.selectCampus(id),
+})
+const campusPlaceholder = computed(() => {
+  if (appStore.campusLoading) {
+    return '院区加载中…'
+  }
+
+  return appStore.campusLoadFailed ? '院区加载失败' : '暂无可用院区'
+})
+
+onMounted(() => {
+  void appStore.loadCampuses()
+})
 </script>
 
 <template>
@@ -20,9 +35,16 @@ const pageGroup = computed(() => String(route.meta.group ?? '工作台'))
     <span class="header-spacer" />
     <label class="campus-selector">
       <span class="campus-label">院区</span>
-      <select v-model="appStore.selectedCampus" aria-label="选择院区">
-        <option v-for="campus in appStore.campuses" :key="campus" :value="campus">
-          {{ campus }}
+      <select
+        v-model="selectedCampusId"
+        :disabled="appStore.campusLoading || !appStore.campusRecords.length"
+        aria-label="选择院区"
+      >
+        <option v-if="!appStore.campusRecords.length" value="">
+          {{ campusPlaceholder }}
+        </option>
+        <option v-for="campus in appStore.campusRecords" :key="campus.id" :value="campus.id">
+          {{ campus.name }}
         </option>
       </select>
     </label>