【增加】增加仓库分类

src/api/ai/model/chatRole/index.ts

@@ -51,7 +51,12 @@ export const ChatRoleApi = {
   },
 
   // 获取 my role
-  getMyRole: async (params: ChatRolePageReqVO) => {
+  getMyPage: async (params: ChatRolePageReqVO) => {
     return await request.get({ url: `/ai/chat-role/my-page`, params})
+  },
+
+  // 获取角色分类
+  getCategoryList: async () => {
+    return await request.get({ url: `/ai/chat-role/category-list`})
   }
 }

src/views/ai/chat/role/RoleCategoryList.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="category-list">
+    <div class="category" v-for="category in categoryList" :key="category">
+      <el-button plain v-if="category !== active" @click="handleCategoryClick(category)">{{ category }}</el-button>
+      <el-button plain type="primary" v-else @click="handleCategoryClick(category)">{{ category }}</el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {PropType} from "vue";
+
+// 定义属性
+defineProps({
+  categoryList: {
+    type: Array as PropType<string[]>,
+    required: true
+  },
+  active: {
+    type: String,
+    required: false
+  }
+})
+
+// 定义回调
+const emits = defineEmits(['onCategoryClick'])
+
+// 处理分类点击事件
+const handleCategoryClick = async (category) => {
+  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: 20px;
+  }
+}
+</style>

src/views/ai/chat/role/index.vue

@@ -4,8 +4,9 @@
     <Header title="角色仓库"/>
     <el-main class="role-main">
       <el-tabs v-model="activeRole" class="demo-tabs" @tab-click="handleTabsClick">
-        <el-tab-pane label="我的角色" name="my-role">
-          <RoleList :role-list="myRoleList" />
+        <el-tab-pane class="role-pane" label="我的角色" name="my-role">
+          <RoleCategoryList :category-list="categoryList" :active="activeCategory" @onCategoryClick="handlerCategoryClick" />
+          <RoleList :role-list="myRoleList" style="margin-top: 20px;" />
         </el-tab-pane>
         <el-tab-pane label="公共角色" name="public-role">
           <RoleList :role-list="publicRoleList" />
@@ -20,6 +21,7 @@
 import {ref} from "vue";
 import Header from '@/views/ai/chat/components/Header.vue'
 import RoleList from './RoleList.vue'
+import RoleCategoryList from './RoleCategoryList.vue'
 import {ChatRoleApi, ChatRolePageReqVO, ChatRoleVO} from '@/api/ai/model/chatRole'
 import {TabsPaneContext} from "element-plus";
 
@@ -32,6 +34,8 @@ const myRoleList = ref<ChatRoleVO[]>([]) // my 分页大小
 const publicPageNo = ref<number>(1) // public 分页下标
 const publicPageSize = ref<number>(50) // public 分页大小
 const publicRoleList = ref<ChatRoleVO[]>([]) // public 分页大小
+const activeCategory = ref<string>('writing') // 选择中的分类
+const categoryList = ref<string[]>([]) // 角色分类类别
 
 // tabs 点击
 const handleTabsClick = async (tab: TabsPaneContext) => {
@@ -43,41 +47,57 @@ const handleTabsClick = async (tab: TabsPaneContext) => {
 }
 
 // 获取 my role
-const getMyRole = async (pageNo: number, pageSize: number) => {
+const getMyRole = async (pageNo: number, pageSize: number, category?: string) => {
   const params:ChatRolePageReqVO = {
     pageNo,
     pageSize,
+    category,
     publicStatus: false
   }
-  const { total, list } = await ChatRoleApi.getMyRole(params)
+  const { total, list } = await ChatRoleApi.getMyPage(params)
   myRoleList.value = list
-  console.log('myRoleList 获取成功', list)
-  console.log('myRoleList 获取成功', myRoleList.value)
 }
 
 // 获取 public role
-const getPublicRole = async (pageNo: number, pageSize: number) => {
+const getPublicRole = async (pageNo: number, pageSize: number, category?: string) => {
   const params:ChatRolePageReqVO = {
     pageNo,
     pageSize,
+    category,
     publicStatus: true
   }
-  const { total, list } = await ChatRoleApi.getMyRole(params)
-  console.log(list)
+  const { total, list } = await ChatRoleApi.getMyPage(params)
   publicRoleList.value = list
 }
 
 // 获取选中的 tabs 角色
-const getActiveTabsRole = async () => {
+const getActiveTabsRole = async (category?: string) => {
   if (activeRole.value === 'my-role') {
-    await getMyRole(myPageNo.value, myPageSize.value)
+    await getMyRole(myPageNo.value, myPageSize.value, category)
   } else {
-    await getPublicRole(myPageNo.value, myPageSize.value)
+    await getPublicRole(publicPageNo.value, publicPageSize.value, category)
   }
 }
 
+// 获取角色分类列表
+const getRoleCategoryList = async () => {
+  categoryList.value = await ChatRoleApi.getCategoryList()
+}
+
+// 处理分类点击
+const handlerCategoryClick = async (category: string) => {
+  if (activeCategory.value === category) {
+    activeCategory.value = ''
+  } else {
+    activeCategory.value = category
+  }
+  await getActiveTabsRole(activeCategory.value)
+}
+
 //
 onMounted( async () => {
+  // 获取分类
+  await getRoleCategoryList()
   // 获取 role 数据
   await getActiveTabsRole()
 })
@@ -103,6 +123,11 @@ onMounted( async () => {
 
   .role-main {
 
+
+    .role-pane {
+      display: flex;
+      flex-direction: column;
+    }
   }
 }