group info

This commit is contained in:
hptangxi
2025-07-06 12:16:44 +08:00
parent e5cd8f7b34
commit fd9bcc1aba
12 changed files with 124 additions and 284 deletions

View File

@@ -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;
}
}
</style>

View File

@@ -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;
}
}
</script>
<template>
<div class="keys-container">
<div class="keys-content">
<div class="sidebar">
<group-list
:groups="groups"
:selected-group="selectedGroup"
:loading="loading"
@group-select="handleGroupSelect"
@refresh="handleGroupRefresh"
/>
<div class="sidebar">
<group-list
:groups="groups"
:selected-group="selectedGroup"
:loading="loading"
@group-select="handleGroupSelect"
@refresh="handleGroupRefresh"
/>
</div>
<!-- 右侧主内容区域占80% -->
<div class="main-content">
<!-- 分组信息卡片更紧凑 -->
<div class="group-info">
<group-info-card :group="selectedGroup" @refresh="handleGroupRefresh" />
</div>
<!-- 右侧主内容区域80% -->
<div class="main-content">
<!-- 分组信息卡片更紧凑 -->
<div class="group-info">
<group-info-card :group="selectedGroup" @refresh="handleGroupRefresh" />
</div>
<!-- 密钥表格区域占主要空间 -->
<div class="key-table-section">
<key-table :selected-group="selectedGroup" />
</div>
<!-- 密钥表格区域主要空间 -->
<div class="key-table-section">
<key-table :selected-group="selectedGroup" />
</div>
</div>
</div>
</template>
<style scoped>
.page-header {
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e9ecef;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0;
}
.keys-content {
.keys-container {
display: flex;
gap: 12px;
flex: 1;
min-height: 0;
width: 100%;
}
.sidebar {
@@ -97,7 +85,6 @@ function handleGroupRefresh() {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.group-info {
@@ -110,18 +97,4 @@ function handleGroupRefresh() {
flex-direction: column;
min-height: 0;
}
@media (max-width: 1024px) {
.keys-content {
flex-direction: column;
}
.sidebar {
width: 100%;
}
.main-content {
width: 100%;
}
}
</style>

View File

@@ -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;
}
}
</style>