删除项目列表模块（重复内容）

frontend/src/components/StudySelector.vue

@@ -1,16 +1,28 @@
 <template>
-  <el-dropdown trigger="click" class="study-selector-dropdown">
+  <el-dropdown trigger="click" class="study-selector-dropdown" @command="onCommand">
     <div class="selector-trigger">
       <el-icon class="trigger-icon"><OfficeBuilding /></el-icon>
       <span class="current-study-name">{{ study.currentStudy?.name || "选择项目" }}</span>
       <el-icon class="arrow-icon"><ArrowDown /></el-icon>
     </div>
     <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item @click="goSelect">
-          <el-icon><Switch /></el-icon>切换项目
+      <el-dropdown-menu class="study-dropdown">
+        <el-dropdown-item v-if="loading" disabled>
+          <el-icon><Loading /></el-icon>加载项目中...
         </el-dropdown-item>
-        <el-dropdown-item divided @click="clearStudy" class="danger-item">
+        <el-dropdown-item v-else-if="!studies.length" disabled>暂无可用项目</el-dropdown-item>
+        <el-dropdown-item
+          v-for="item in studies"
+          :key="item.id"
+          :command="{ type: 'switch', study: item }"
+          :class="{ active: study.currentStudy?.id === item.id }"
+        >
+          <div class="study-item">
+            <div class="name">{{ item.name }}</div>
+            <div class="code">{{ item.code }}</div>
+          </div>
+        </el-dropdown-item>
+        <el-dropdown-item divided command="clear" class="danger-item">
           <el-icon><Close /></el-icon>退出当前项目
         </el-dropdown-item>
       </el-dropdown-menu>
@@ -19,21 +31,46 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
 import { useStudyStore } from "../store/study";
-import { OfficeBuilding, ArrowDown, Switch, Close } from "@element-plus/icons-vue";
+import { fetchStudies } from "../api/studies";
+import type { Study } from "../types/api";
+import { OfficeBuilding, ArrowDown, Close, Loading } from "@element-plus/icons-vue";
 
 const router = useRouter();
 const study = useStudyStore();
+const studies = ref<Study[]>([]);
+const loading = ref(false);
 
-const goSelect = () => {
-  router.push("/studies");
+const loadStudies = async () => {
+  loading.value = true;
+  try {
+    const { data } = await fetchStudies();
+    studies.value = data.items || [];
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "项目列表加载失败");
+  } finally {
+    loading.value = false;
+  }
 };
 
-const clearStudy = () => {
-  study.clearCurrentStudy();
-  router.push("/studies");
+const onCommand = (cmd: any) => {
+  if (cmd === "clear") {
+    study.clearCurrentStudy();
+    router.push("/workbench");
+    return;
+  }
+  if (cmd?.type === "switch" && cmd.study) {
+    study.setCurrentStudy(cmd.study as Study);
+    router.push("/study/home");
+  }
 };
+
+onMounted(() => {
+  loadStudies();
+});
 </script>
 
 <style scoped>
@@ -74,6 +111,32 @@ const clearStudy = () => {
   color: var(--ctms-text-secondary);
 }
 
+.study-dropdown {
+  max-height: 320px;
+  overflow-y: auto;
+  min-width: 220px;
+}
+
+.study-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.study-item .name {
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.study-item .code {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+}
+
+.active {
+  background-color: var(--ctms-primary-light);
+}
+
 .danger-item {
   color: var(--ctms-danger);
 }