feat：【AI 大模型】RoleCategory.vue、RoleHeader.vue 使用 unocss

Author: YunaiV

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>

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>