From 3f40a1bc0063265da0ae992ccb91c4b0dd545139 Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Tue, 31 Mar 2026 17:05:59 +0800
Subject: [PATCH] fix: simplify persona page header layout

---
 dashboard/src/views/PersonaPage.vue           | 33 +------------
 .../src/views/persona/PersonaManager.vue      | 46 ++++++++-----------
 2 files changed, 20 insertions(+), 59 deletions(-)

diff --git a/dashboard/src/views/PersonaPage.vue b/dashboard/src/views/PersonaPage.vue
index 4516d9af7..3ea7a50a2 100644
--- a/dashboard/src/views/PersonaPage.vue
+++ b/dashboard/src/views/PersonaPage.vue
@@ -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>
diff --git a/dashboard/src/views/persona/PersonaManager.vue b/dashboard/src/views/persona/PersonaManager.vue
index 6a51dba59..44302be27 100644
--- a/dashboard/src/views/persona/PersonaManager.vue
+++ b/dashboard/src/views/persona/PersonaManager.vue
@@ -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;