From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/ai/chat/index/components/role/RoleList.vue | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 106 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/chat/index/components/role/RoleList.vue b/src/views/ai/chat/index/components/role/RoleList.vue
new file mode 100644
index 0000000..a1ecb35
--- /dev/null
+++ b/src/views/ai/chat/index/components/role/RoleList.vue
@@ -0,0 +1,106 @@
+<template>
+ <div
+ class="flex flex-row flex-wrap relative h-full overflow-auto pb-140px items-start content-start justify-start"
+ ref="tabsRef"
+ @scroll="handleTabsScroll"
+ >
+ <div v-for="role in roleList" :key="role.id">
+ <el-card
+ class="inline-block mr-20px rounded-10px mb-20px relative"
+ body-class="max-w-240px w-240px pt-15px px-15px pb-10px flex flex-row justify-start relative"
+ >
+ <!-- 鏇村鎿嶄綔 -->
+ <div class="absolute top-0 right-12px" v-if="showMore">
+ <el-dropdown @command="handleMoreClick">
+ <span class="el-dropdown-link">
+ <el-button type="text">
+ <el-icon><More /></el-icon>
+ </el-button>
+ </span>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item :command="['edit', role]">
+ <Icon icon="ep:edit" color="var(--el-text-color-placeholder)" />缂栬緫
+ </el-dropdown-item>
+ <el-dropdown-item :command="['delete', role]" style="color: var(--el-color-danger)">
+ <Icon icon="ep:delete" color="var(--el-color-danger)" />鍒犻櫎
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </div>
+ <!-- 瑙掕壊淇℃伅 -->
+ <div>
+ <img class="w-40px h-40px rounded-10px overflow-hidden" :src="role.avatar" />
+ </div>
+ <div class="ml-10px w-full">
+ <div class="h-85px">
+ <div class="text-18px font-bold" style="color: var(--el-text-color-primary)">
+ {{ role.name }}
+ </div>
+ <div class="mt-10px text-14px" style="color: var(--el-text-color-regular)">
+ {{ role.description }}
+ </div>
+ </div>
+ <div class="flex flex-row-reverse mt-2px">
+ <el-button type="primary" size="small" @click="handleUseClick(role)">浣跨敤</el-button>
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ChatRoleVO } from '@/api/ai/model/chatRole'
+import { PropType, ref } from 'vue'
+import { More } from '@element-plus/icons-vue'
+
+const tabsRef = ref<any>() // tabs ref
+
+// 瀹氫箟灞炴��
+const props = defineProps({
+ loading: {
+ type: Boolean,
+ required: true
+ },
+ roleList: {
+ type: Array as PropType<ChatRoleVO[]>,
+ required: true
+ },
+ showMore: {
+ type: Boolean,
+ required: false,
+ default: false
+ }
+})
+
+// 瀹氫箟閽╁瓙
+const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage'])
+
+/** 鎿嶄綔锛氱紪杈戙�佸垹闄� */
+const handleMoreClick = async (data) => {
+ const type = data[0]
+ const role = data[1]
+ if (type === 'delete') {
+ emits('onDelete', role)
+ } else {
+ emits('onEdit', role)
+ }
+}
+
+/** 閫変腑 */
+const handleUseClick = (role: any) => {
+ emits('onUse', role)
+}
+
+/** 婊氬姩 */
+const handleTabsScroll = async () => {
+ if (tabsRef.value) {
+ const { scrollTop, scrollHeight, clientHeight } = tabsRef.value
+ if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
+ emits('onPage')
+ }
+ }
+}
+</script>
--
Gitblit v1.8.0