diff --git a/src/api/ai/model/chatRole/index.ts b/src/api/ai/model/chatRole/index.ts
index 5e81110b..1f962cb9 100644
--- a/src/api/ai/model/chatRole/index.ts
+++ b/src/api/ai/model/chatRole/index.ts
@@ -14,6 +14,15 @@ export interface ChatRoleVO {
   status: number // 状态
 }
 
+// AI 聊天角色 分页请求 vo
+export interface ChatRolePageReqVO {
+  name?: string // 角色名称
+  category?: string // 角色类别
+  publicStatus: boolean // 是否公开
+  pageNo: number // 是否公开
+  pageSize: number // 是否公开
+}
+
 // AI 聊天角色 API
 export const ChatRoleApi = {
   // 查询聊天角色分页
@@ -39,5 +48,10 @@ export const ChatRoleApi = {
   // 删除聊天角色
   deleteChatRole: async (id: number) => {
     return await request.delete({ url: `/ai/chat-role/delete?id=` + id })
+  },
+
+  // 获取 my role
+  getMyRole: async (params: ChatRolePageReqVO) => {
+    return await request.get({ url: `/ai/chat-role/my-page`, params})
   }
 }
diff --git a/src/views/ai/chat/role/RoleList.vue b/src/views/ai/chat/role/RoleList.vue
new file mode 100644
index 00000000..e57f09ab
--- /dev/null
+++ b/src/views/ai/chat/role/RoleList.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="card-list">
+    <el-card class="card" body-class="card-body" v-for="role in roleList" :key="role.id">
+      <div>
+        <img class="avatar" :src="role.avatar"/>
+      </div>
+      <div class="right-container">
+        <div class="content-container">
+          <div class="title">{{ role.name }}</div>
+          <div class="description">{{ role.description }}</div>
+        </div>
+        <div class="btn-container">
+          <el-button type="primary" size="small">使用</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ChatRoleVO} from '@/api/ai/model/chatRole'
+import {PropType} from "vue";
+
+// 定义属性
+const props = defineProps({
+  roleList: {
+    type: Array as PropType<ChatRoleVO[]>,
+    required: true
+  }
+})
+
+onMounted(() => {
+  console.log('props', props.roleList)
+})
+
+</script>
+
+<style lang="scss">
+// 重写 card 组件 body 样式
+.card-body {
+  width: auto;
+  max-width: 300px;
+  padding: 15px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+}
+</style>
+<style scoped lang="scss">
+
+// 卡片列表
+.card-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .card {
+    margin-right: 20px;
+    border-radius: 10px;
+
+    .avatar {
+      width: 40px;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .right-container {
+      margin-left: 10px;
+
+      .content-container {
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+          color: #3e3e3e;
+        }
+
+        .description {
+          margin-top: 10px;
+          font-size: 14px;
+          color: #6a6a6a;
+        }
+      }
+
+      .btn-container {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 15px;
+      }
+    }
+
+  }
+
+}
+
+</style>
diff --git a/src/views/ai/chat/role/index.vue b/src/views/ai/chat/role/index.vue
new file mode 100644
index 00000000..0daa3d52
--- /dev/null
+++ b/src/views/ai/chat/role/index.vue
@@ -0,0 +1,110 @@
+<!-- chat 角色仓库 -->
+<template>
+  <el-container class="role-container">
+    <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>
+        <el-tab-pane label="公共角色" name="public-role">
+          <RoleList :role-list="publicRoleList" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-main>
+  </el-container>
+</template>
+
+<!--  setup  -->
+<script setup lang="ts">
+import {ref} from "vue";
+import Header from '@/views/ai/chat/components/Header.vue'
+import RoleList from './RoleList.vue'
+import {ChatRoleApi, ChatRolePageReqVO, ChatRoleVO} from '@/api/ai/model/chatRole'
+import {TabsPaneContext} from "element-plus";
+
+// 属性定义
+const activeRole = ref<string>('my-role') // 选中的角色
+const loadding = ref<boolean>(true) // 加载中
+const myPageNo = ref<number>(1) // my 分页下标
+const myPageSize = ref<number>(50) // my 分页大小
+const myRoleList = ref<ChatRoleVO[]>([]) // my 分页大小
+const publicPageNo = ref<number>(1) // public 分页下标
+const publicPageSize = ref<number>(50) // public 分页大小
+const publicRoleList = ref<ChatRoleVO[]>([]) // public 分页大小
+
+// tabs 点击
+const handleTabsClick = async (tab: TabsPaneContext) => {
+  // 设置切换状态
+  const activeTabs = tab.paneName + ''
+  activeRole.value = activeTabs;
+  // 切换的时候重新加载数据
+  await getActiveTabsRole()
+}
+
+// 获取 my role
+const getMyRole = async (pageNo: number, pageSize: number) => {
+  const params:ChatRolePageReqVO = {
+    pageNo,
+    pageSize,
+    publicStatus: false
+  }
+  const { total, list } = await ChatRoleApi.getMyRole(params)
+  myRoleList.value = list
+  console.log('myRoleList 获取成功', list)
+  console.log('myRoleList 获取成功', myRoleList.value)
+}
+
+// 获取 public role
+const getPublicRole = async (pageNo: number, pageSize: number) => {
+  const params:ChatRolePageReqVO = {
+    pageNo,
+    pageSize,
+    publicStatus: true
+  }
+  const { total, list } = await ChatRoleApi.getMyRole(params)
+  console.log(list)
+  publicRoleList.value = list
+}
+
+// 获取选中的 tabs 角色
+const getActiveTabsRole = async () => {
+  if (activeRole.value === 'my-role') {
+    await getMyRole(myPageNo.value, myPageSize.value)
+  } else {
+    await getPublicRole(myPageNo.value, myPageSize.value)
+  }
+}
+
+//
+onMounted( async () => {
+  // 获取 role 数据
+  await getActiveTabsRole()
+})
+</script>
+<!-- 样式 -->
+<style scoped lang="scss">
+
+// 跟容器
+.role-container {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #ffffff;
+
+  display: flex;
+  flex-direction: column;
+
+  .role-main {
+
+  }
+}
+
+
+</style>