前端UI界面美化-2

frontend/src/components/StudySelector.vue

@@ -1,14 +1,18 @@
 <template>
-  <el-dropdown>
-    <span class="el-dropdown-link">
-      <el-tag size="small" type="info">
-        {{ study.currentStudy?.name || "未选择项目" }}
-      </el-tag>
-    </span>
+  <el-dropdown trigger="click" class="study-selector-dropdown">
+    <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-dropdown-item>
-        <el-dropdown-item @click="clearStudy">清除当前项目</el-dropdown-item>
+        <el-dropdown-item @click="goSelect">
+          <el-icon><Switch /></el-icon>切换项目
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="clearStudy" class="danger-item">
+          <el-icon><Close /></el-icon>退出当前项目
+        </el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
@@ -17,6 +21,7 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { useStudyStore } from "../store/study";
+import { OfficeBuilding, ArrowDown, Switch, Close } from "@element-plus/icons-vue";
 
 const router = useRouter();
 const study = useStudyStore();
@@ -30,3 +35,46 @@ const clearStudy = () => {
   router.push("/studies");
 };
 </script>
+
+<style scoped>
+.selector-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background-color: #fafafa;
+  border: 1px solid var(--ctms-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.selector-trigger:hover {
+  background-color: var(--ctms-primary-light);
+  border-color: var(--ctms-primary-hover);
+}
+
+.trigger-icon {
+  color: var(--ctms-primary);
+  font-size: 16px;
+}
+
+.current-study-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ctms-text-main);
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.arrow-icon {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+}
+
+.danger-item {
+  color: var(--ctms-danger);
+}
+</style>