mirror of
https://github.com/AstrBotDevs/AstrBot
synced 2026-07-15 17:30:13 +08:00
fix: simplify persona page header layout
This commit is contained in:
@@ -1,27 +1,8 @@
|
||||
<template>
|
||||
<div class="persona-page">
|
||||
<v-container fluid class="pa-0">
|
||||
<!-- 页面标题 -->
|
||||
<v-row class="d-flex justify-space-between align-center px-4 py-3 pb-6">
|
||||
<div>
|
||||
<h1 class="text-h1 font-weight-bold mb-2">
|
||||
<v-icon color="primary" class="me-2"> mdi-heart </v-icon
|
||||
>{{ t("core.navigation.persona") }}
|
||||
</h1>
|
||||
<p class="text-subtitle-1 text-medium-emphasis mb-0">
|
||||
{{ tm("page.description") }}
|
||||
</p>
|
||||
</div>
|
||||
</v-row>
|
||||
|
||||
<!-- 主容器组件 -->
|
||||
<PersonaManager />
|
||||
</v-container>
|
||||
</div>
|
||||
<PersonaManager />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useI18n, useModuleI18n } from "@/i18n/composables";
|
||||
import { PersonaManager } from "@/views/persona";
|
||||
|
||||
export default {
|
||||
@@ -29,17 +10,5 @@ export default {
|
||||
components: {
|
||||
PersonaManager,
|
||||
},
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const { tm } = useModuleI18n("features/persona");
|
||||
return { t, tm };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.persona-page {
|
||||
padding: 20px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,10 @@
|
||||
<template>
|
||||
<div class="persona-manager">
|
||||
<!-- 移动端顶部导航 -->
|
||||
<div class="mobile-nav d-md-none mb-4">
|
||||
<FolderBreadcrumb />
|
||||
</div>
|
||||
|
||||
<div class="manager-layout">
|
||||
<!-- 左侧边栏 - 仅桌面端显示 -->
|
||||
<div class="sidebar d-none d-md-block">
|
||||
<div
|
||||
class="sidebar-header d-flex justify-space-between align-center mb-3"
|
||||
>
|
||||
<div class="sidebar-header mb-3">
|
||||
<h3 class="text-h6">{{ tm("folder.sidebarTitle") }}</h3>
|
||||
<v-btn
|
||||
icon="mdi-folder-plus"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="showCreateFolderDialog = true"
|
||||
:title="tm('folder.createButton')"
|
||||
/>
|
||||
</div>
|
||||
<FolderTree
|
||||
@move-folder="openMoveFolderDialog"
|
||||
@@ -30,17 +16,21 @@
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main-content">
|
||||
<!-- 顶部工具栏 -->
|
||||
<!-- 页面标题与主要操作 -->
|
||||
<div
|
||||
class="toolbar d-flex flex-wrap justify-space-between align-center mb-4 ga-2"
|
||||
class="page-header d-flex flex-wrap justify-space-between align-start mb-4 ga-3"
|
||||
>
|
||||
<!-- 面包屑 - 仅桌面端显示 -->
|
||||
<div class="d-none d-md-block">
|
||||
<FolderBreadcrumb />
|
||||
<div>
|
||||
<h1 class="text-h1 font-weight-bold mb-2 d-flex align-center">
|
||||
<v-icon color="primary" class="me-2">mdi-heart</v-icon>
|
||||
{{ t("core.navigation.persona") }}
|
||||
</h1>
|
||||
<p class="text-subtitle-1 text-medium-emphasis mb-0">
|
||||
{{ tm("page.description") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮组 -->
|
||||
<div class="d-flex ga-2">
|
||||
<div class="d-flex flex-wrap ga-2">
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
@@ -69,6 +59,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FolderBreadcrumb class="mb-4" />
|
||||
|
||||
<!-- 加载状态 - 只有加载超过阈值才显示骨架屏 -->
|
||||
<v-fade-transition>
|
||||
<div v-if="showSkeleton" class="loading-container">
|
||||
@@ -734,11 +726,6 @@ export default defineComponent({
|
||||
// 导出人格数据
|
||||
async handleExportPersona(persona: Persona) {
|
||||
try {
|
||||
console.log(
|
||||
this.tm("persona.messages.exportStart"),
|
||||
persona.persona_id,
|
||||
);
|
||||
|
||||
// 转换为新格式
|
||||
const exportData = {
|
||||
version: "1.0",
|
||||
@@ -1000,6 +987,11 @@ export default defineComponent({
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.system-prompt-content {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
|
||||
Reference in New Issue
Block a user