From ceded7fe24e64654ed78ccf584da988a6bad3bdc Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 21 Sep 2025 19:18:00 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ai=20=E5=A4=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E3=80=91=E4=BC=98=E5=8C=96=E2=80=9C=E8=A7=92=E8=89=B2?=
 =?UTF-8?q?=E4=BB=93=E5=BA=93=E2=80=9D=E7=9A=84=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/index/components/role/RoleHeader.vue | 21 --------
 .../chat/index/components/role/RoleList.vue   |  2 +-
 .../index/components/role/RoleRepository.vue  | 48 ++++++++++---------
 3 files changed, 27 insertions(+), 44 deletions(-)
 delete mode 100644 src/views/ai/chat/index/components/role/RoleHeader.vue

diff --git a/src/views/ai/chat/index/components/role/RoleHeader.vue b/src/views/ai/chat/index/components/role/RoleHeader.vue
deleted file mode 100644
index 8d96dcae..00000000
--- a/src/views/ai/chat/index/components/role/RoleHeader.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- header -->
-<template>
-  <el-header class="flex flex-row justify-between items-center px-10px whitespace-nowrap text-ellipsis w-full" :style="{ backgroundColor: 'var(--el-bg-color-page)' }">
-    <div class="text-20px font-bold overflow-hidden max-w-220px" :style="{ color: 'var(--el-text-color-primary)' }">
-      {{ title }}
-    </div>
-    <div class="flex flex-row">
-      <slot></slot>
-    </div>
-  </el-header>
-</template>
-
-<script setup lang="ts">
-// 设置组件属性
-defineProps({
-  title: {
-    type: String,
-    required: true
-  }
-})
-</script>
diff --git a/src/views/ai/chat/index/components/role/RoleList.vue b/src/views/ai/chat/index/components/role/RoleList.vue
index 0dd14a0f..a1ecb353 100644
--- a/src/views/ai/chat/index/components/role/RoleList.vue
+++ b/src/views/ai/chat/index/components/role/RoleList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-row flex-wrap relative h-full overflow-auto px-25px pb-140px items-start content-start justify-start"
+    class="flex flex-row flex-wrap relative h-full overflow-auto pb-140px items-start content-start justify-start"
     ref="tabsRef"
     @scroll="handleTabsScroll"
   >
diff --git a/src/views/ai/chat/index/components/role/RoleRepository.vue b/src/views/ai/chat/index/components/role/RoleRepository.vue
index ec00f737..e9bb2054 100644
--- a/src/views/ai/chat/index/components/role/RoleRepository.vue
+++ b/src/views/ai/chat/index/components/role/RoleRepository.vue
@@ -1,14 +1,10 @@
 <!-- chat 角色仓库 -->
 <template>
-  <el-container
-    class="role-container absolute w-full h-full m-0 p-0 left-0 right-0 top-0 bottom-0 bg-[var(--el-bg-color)] overflow-hidden flex !flex-col"
-  >
+  <el-container class="bg-[var(--el-bg-color)] -mt-25px">
     <ChatRoleForm ref="formRef" @success="handlerAddRoleSuccess" />
-    <!-- header -->
-    <RoleHeader title="角色仓库" class="relative" />
     <!-- main -->
     <el-main class="flex-1 overflow-hidden m-0 !p-0 relative">
-      <div class="mx-5 mt-5 mb-0 absolute right-0 -top-1.25 z-100">
+      <div class="mx-3 mt-3 mb-0 absolute right-0 -top-1.25 z-100">
         <!-- 搜索按钮 -->
         <el-input
           :loading="loading"
@@ -30,16 +26,8 @@
         </el-button>
       </div>
       <!-- tabs -->
-      <el-tabs
-        v-model="activeTab"
-        @tab-click="handleTabsClick"
-        class="relative h-full [&_.el-tabs__nav-scroll]:my-2.5 [&_.el-tabs__nav-scroll]:mx-5"
-      >
-        <el-tab-pane
-          label="我的角色"
-          name="my-role"
-          class="flex flex-col h-full overflow-y-auto relative"
-        >
+      <el-tabs v-model="activeTab" @tab-click="handleTabsClick" class="relative h-full">
+        <el-tab-pane label="我的角色" name="my-role" class="flex flex-col h-full overflow-y-auto">
           <RoleList
             :loading="loading"
             :role-list="myRoleList"
@@ -48,12 +36,12 @@
             @on-edit="handlerCardEdit"
             @on-use="handlerCardUse"
             @on-page="handlerCardPage('my')"
-            class="mt-20px"
+            class="mt-3"
           />
         </el-tab-pane>
-        <el-tab-pane label="公共角色" name="public-role">
+        <el-tab-pane label="公共角色" name="public-role" class="!pt-2">
           <RoleCategoryList
-            class="mx-6.75"
+            class="mx-3"
             :category-list="categoryList"
             :active="activeCategory"
             @on-category-click="handlerCategoryClick"
@@ -64,7 +52,7 @@
             @on-edit="handlerCardEdit"
             @on-use="handlerCardUse"
             @on-page="handlerCardPage('public')"
-            class="mt-20px"
+            class="mt-3"
             loading
           />
         </el-tab-pane>
@@ -75,7 +63,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import RoleHeader from './RoleHeader.vue'
 import RoleList from './RoleList.vue'
 import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
 import RoleCategoryList from './RoleCategoryList.vue'
@@ -233,6 +220,23 @@ onMounted(async () => {
 <!-- 覆盖 element plus css -->
 <style lang="scss">
 .el-tabs__nav-scroll {
-  margin: 10px 20px;
+  margin: 2px 8px !important;
+}
+
+.el-tabs__header {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.el-tabs__nav-wrap {
+  margin-bottom: 0 !important;
+}
+
+.el-tabs__content {
+  padding: 0 !important;
+}
+
+.el-tab-pane {
+  padding: 8px 0 0 0 !important;
 }
 </style>