From fd9bcc1abac9b76549457256b80a272300d212b9 Mon Sep 17 00:00:00 2001 From: hptangxi Date: Sun, 6 Jul 2025 12:16:44 +0800 Subject: [PATCH] group info --- web/src/api/keys.ts | 2 +- web/src/components/BaseInfoCard.vue | 16 -- web/src/components/GlobalTaskProgressBar.vue | 9 - web/src/components/Layout.vue | 2 - web/src/components/LineChart.vue | 14 -- web/src/components/keys/GroupFormModal.vue | 13 +- web/src/components/keys/GroupInfoCard.vue | 198 +++++++++---------- web/src/components/keys/GroupList.vue | 14 -- web/src/components/keys/KeyTable.vue | 36 ---- web/src/views/Dashboard.vue | 10 - web/src/views/Keys.vue | 79 +++----- web/src/views/Logs.vue | 15 -- 12 files changed, 124 insertions(+), 284 deletions(-) diff --git a/web/src/api/keys.ts b/web/src/api/keys.ts index 838946c..d89f318 100644 --- a/web/src/api/keys.ts +++ b/web/src/api/keys.ts @@ -15,7 +15,7 @@ export const keysApi = { }, // 更新分组 - async updateGroup(groupId: number, group: Partial): Promise { + async updateGroup(groupId: number, group: Partial): Promise { const res = await http.put(`/groups/${groupId}`, group); return res.data; }, diff --git a/web/src/components/BaseInfoCard.vue b/web/src/components/BaseInfoCard.vue index c236cc7..f81b2c1 100644 --- a/web/src/components/BaseInfoCard.vue +++ b/web/src/components/BaseInfoCard.vue @@ -203,20 +203,4 @@ onMounted(() => { :deep(.n-grid-item) { min-width: 0; } - -@media (max-width: 1200px) { - :deep(.n-grid) { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 640px) { - :deep(.n-grid) { - grid-template-columns: 1fr; - } - - .stat-value { - font-size: 2rem; - } -} diff --git a/web/src/components/GlobalTaskProgressBar.vue b/web/src/components/GlobalTaskProgressBar.vue index c8dc59d..0372127 100644 --- a/web/src/components/GlobalTaskProgressBar.vue +++ b/web/src/components/GlobalTaskProgressBar.vue @@ -180,13 +180,4 @@ function handleClose() { border-radius: var(--border-radius-sm); margin-top: 8px; } - -@media (max-width: 768px) { - .global-task-progress { - left: 20px; - right: 20px; - width: auto; - top: 10px; - } -} diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue index 0a18b57..06b0c56 100644 --- a/web/src/components/Layout.vue +++ b/web/src/components/Layout.vue @@ -97,8 +97,6 @@ import NavBar from "@/components/NavBar.vue"; } .content-wrapper { - width: 1400px; - margin: 0 auto; padding: 24px 12px; } diff --git a/web/src/components/LineChart.vue b/web/src/components/LineChart.vue index bc7fd4b..32c4aef 100644 --- a/web/src/components/LineChart.vue +++ b/web/src/components/LineChart.vue @@ -248,18 +248,4 @@ onMounted(() => { border-radius: 4px; backdrop-filter: blur(4px); } - -@media (max-width: 768px) { - .chart-legend { - gap: 16px; - } - - .chart-area { - height: 200px; - } - - .chart-svg { - height: 160px; - } -} diff --git a/web/src/components/keys/GroupFormModal.vue b/web/src/components/keys/GroupFormModal.vue index 4e2ba0b..449a363 100644 --- a/web/src/components/keys/GroupFormModal.vue +++ b/web/src/components/keys/GroupFormModal.vue @@ -24,7 +24,7 @@ interface Props { interface Emits { (e: "update:show", value: boolean): void; - (e: "success"): void; + (e: "success", value: Group): void; } // 配置项类型 @@ -138,8 +138,8 @@ function loadGroupData() { : [{ url: "", weight: 1 }], channel_type: props.group.channel_type || "openai", sort: props.group.sort || 1, - test_model: props.group.config?.test_model || "", - param_overrides: JSON.stringify(props.group.config?.param_overrides || {}, null, 2), + test_model: props.group.test_model || "", + param_overrides: JSON.stringify(props.group.param_overrides || {}, null, 2), config: {}, configItems, }); @@ -241,17 +241,18 @@ async function handleSubmit() { config, }; + let res: Group; if (props.group?.id) { // 编辑模式 - await keysApi.updateGroup(props.group.id, submitData); + res = await keysApi.updateGroup(props.group.id, submitData); message.success("分组更新成功"); } else { // 新建模式 - await keysApi.createGroup(submitData); + res = await keysApi.createGroup(submitData); message.success("分组创建成功"); } - emit("success"); + emit("success", res); handleClose(); } finally { loading.value = false; diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue index c2fc68f..6c33624 100644 --- a/web/src/components/keys/GroupInfoCard.vue +++ b/web/src/components/keys/GroupInfoCard.vue @@ -7,25 +7,32 @@ import { NCard, NCollapse, NCollapseItem, - NDescriptions, - NDescriptionsItem, - NGrid, - NGridItem, + NFlex, + NForm, + NFormItem, NSpin, NTag, useMessage, } from "naive-ui"; import { onMounted, ref, watch } from "vue"; +import GroupFormModal from "./GroupFormModal.vue"; interface Props { group: Group | null; } +interface Emits { + (e: "refresh", value: Group): void; +} + const props = defineProps(); +const emit = defineEmits(); + const stats = ref(null); const loading = ref(false); const message = useMessage(); +const showEditModal = ref(false); onMounted(() => { loadStats(); @@ -53,7 +60,14 @@ async function loadStats() { } function handleEdit() { - message.info("编辑分组功能开发中..."); + showEditModal.value = true; +} + +function handleGroupEdited(newGroup: Group) { + showEditModal.value = false; + if (newGroup) { + emit("refresh", newGroup); + } } function handleDelete() { @@ -136,40 +150,27 @@ function copyUrl(url: string) {
- - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
@@ -180,61 +181,73 @@ function copyUrl(url: string) {

基础信息

- - + + {{ group?.name || "-" }} - - - {{ group?.channel_type || "openai" }} - - {{ group?.sort || 0 }} - - {{ group?.description || "" }} - - + + + {{ group?.display_name || "-" }} + + + {{ group?.description || "-" }} + + + {{ group?.channel_type || "-" }} + + + {{ group?.test_model || "-" }} + + + {{ group?.sort || 0 }} + +

上游地址

- - + {{ upstream.url }} 权重: {{ upstream.weight }} - - + +
-
-

配置信息

- - - {{ group?.config?.test_model || "" }} - - - {{ group?.config?.request_timeout || 0 }}ms - - +

高级配置

+ + + {{ value || "-" }} + + 
{{
-                      JSON.stringify(group?.config?.param_overrides || "", null, 2)
+                      JSON.stringify(group?.param_overrides || "", null, 2)
                     }}
- - + +
+ + @@ -305,6 +318,10 @@ function copyUrl(url: string) { text-align: center; } +.status-cards-container:deep(.n-card) { + width: 160px; +} + :deep(.status-card-failure .n-card-header__main) { color: #d03050; } @@ -371,42 +388,7 @@ function copyUrl(url: string) { } } -/* 响应式网格 */ -:deep(.n-grid) { - gap: 8px; -} - -:deep(.n-grid-item) { - min-width: 0; -} - -@media (max-width: 768px) { - :deep(.n-grid) { - grid-template-columns: repeat(2, 1fr); - } - - .group-title { - font-size: 1rem; - } - - .section-title { - font-size: 0.9rem; - } -} - -@media (max-width: 480px) { - :deep(.n-grid) { - grid-template-columns: 1fr; - } - - .card-header { - flex-direction: column; - align-items: flex-start; - gap: 8px; - } - - .header-actions { - align-self: flex-end; - } +:deep(.n-form-item-feedback-wrapper) { + min-height: 0; } diff --git a/web/src/components/keys/GroupList.vue b/web/src/components/keys/GroupList.vue index 6004645..3702516 100644 --- a/web/src/components/keys/GroupList.vue +++ b/web/src/components/keys/GroupList.vue @@ -265,18 +265,4 @@ function handleGroupCreated() { .groups-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } - -@media (max-width: 768px) { - .group-item { - padding: 6px; - } - - .group-name { - font-size: 11px; - } - - .group-meta { - font-size: 9px; - } -} diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue index 2950b51..d874954 100644 --- a/web/src/components/keys/KeyTable.vue +++ b/web/src/components/keys/KeyTable.vue @@ -852,40 +852,4 @@ function changePageSize(size: number) { font-size: 12px; color: #6c757d; } - -/* 响应式设计 */ -@media (max-width: 1200px) { - .keys-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 1024px) { - .toolbar { - flex-direction: column; - align-items: stretch; - gap: 8px; - } - - .toolbar-left, - .toolbar-right { - justify-content: center; - } -} - -@media (max-width: 768px) { - .keys-grid { - grid-template-columns: 1fr; - } - - .key-bottom { - flex-direction: column; - align-items: flex-start; - gap: 6px; - } - - .key-actions { - align-self: flex-end; - } -} diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue index c00e9b3..492fc6c 100644 --- a/web/src/views/Dashboard.vue +++ b/web/src/views/Dashboard.vue @@ -49,14 +49,4 @@ import { NSpace } from "naive-ui"; transform: translateY(0); } } - -@media (max-width: 768px) { - .dashboard-title { - font-size: 1.75rem; - } - - .dashboard-subtitle { - font-size: 1rem; - } -} diff --git a/web/src/views/Keys.vue b/web/src/views/Keys.vue index 1284782..6fc2965 100644 --- a/web/src/views/Keys.vue +++ b/web/src/views/Keys.vue @@ -31,59 +31,47 @@ function handleGroupSelect(group: Group) { selectedGroup.value = group; } -function handleGroupRefresh() { - loadGroups(); +async function handleGroupRefresh() { + await loadGroups(); + if (selectedGroup.value) { + // 重新加载当前选中的分组信息 + selectedGroup.value = groups.value.find(g => g.id === selectedGroup.value?.id) || null; + } } diff --git a/web/src/views/Logs.vue b/web/src/views/Logs.vue index 69880f0..cd56eed 100644 --- a/web/src/views/Logs.vue +++ b/web/src/views/Logs.vue @@ -99,19 +99,4 @@ import { NCard, NH3, NSpace, NTag, NText } from "naive-ui"; transform: translateY(0); } } - -@media (max-width: 768px) { - .placeholder-card { - margin: 0 16px; - padding: 32px 24px; - } - - .page-title { - font-size: 1.75rem; - } - - .page-subtitle { - font-size: 1rem; - } -}