From 9087ffb1bdb340e6856da4e5f2376eb02e486335 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 26 Jul 2025 23:40:18 +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=91RoleCategory.vue=E3=80=81RoleHeader.vue=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20unocss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/role/RoleCategoryList.vue      | 18 ++--------
 .../chat/index/components/role/RoleHeader.vue | 33 ++-----------------
 2 files changed, 5 insertions(+), 46 deletions(-)

diff --git a/src/views/ai/chat/index/components/role/RoleCategoryList.vue b/src/views/ai/chat/index/components/role/RoleCategoryList.vue
index c02126d5..2efc8212 100644
--- a/src/views/ai/chat/index/components/role/RoleCategoryList.vue
+++ b/src/views/ai/chat/index/components/role/RoleCategoryList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="category-list">
-    <div class="category" v-for="category in categoryList" :key="category">
+  <div class="flex flex-row flex-wrap items-center">
+    <div class="flex flex-row mr-10px" v-for="category in categoryList" :key="category">
       <el-button
         plain
         round
@@ -37,17 +37,3 @@ const handleCategoryClick = async (category: string) => {
   emits('onCategoryClick', category)
 }
 </script>
-<style scoped lang="scss">
-.category-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-
-  .category {
-    display: flex;
-    flex-direction: row;
-    margin-right: 10px;
-  }
-}
-</style>
diff --git a/src/views/ai/chat/index/components/role/RoleHeader.vue b/src/views/ai/chat/index/components/role/RoleHeader.vue
index 10459702..8d96dcae 100644
--- a/src/views/ai/chat/index/components/role/RoleHeader.vue
+++ b/src/views/ai/chat/index/components/role/RoleHeader.vue
@@ -1,10 +1,10 @@
 <!-- header -->
 <template>
-  <el-header class="chat-header">
-    <div class="title">
+  <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="title-right">
+    <div class="flex flex-row">
       <slot></slot>
     </div>
   </el-header>
@@ -19,30 +19,3 @@ defineProps({
   }
 })
 </script>
-
-<style scoped lang="scss">
-.chat-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 10px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  background-color: var(--el-bg-color-page);
-  width: 100%;
-
-  .title {
-    font-size: 20px;
-    font-weight: bold;
-    overflow: hidden;
-    color: var(--el-text-color-primary);
-    max-width: 220px;
-  }
-
-  .title-right {
-    display: flex;
-    flex-direction: row;
-  }
-}
-</style>