Cheng Zhou
144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
|
<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 class="study-dropdown">
|
|
<el-dropdown-item v-if="loading" disabled>
|
|
<el-icon><Loading /></el-icon>加载项目中...
|
|
</el-dropdown-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>
|
|
</template>
|
|
</el-dropdown>
|
|
</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 { 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 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 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("/project/overview");
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadStudies();
|
|
});
|
|
</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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
</style>
|