smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【antd】【ai】chat/index：角色面板的优化

Browse Source
This commit is contained in:
YunaiV
2025-11-19 17:10:51 +08:00
parent 523e4b81da
commit 3b434cefa9
3 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/ai/chat/index/modules/role/category-list.vue
View File

@@ -24,7 +24,7 @@ async function handleCategoryClick(category: string) {
</script>
<template>
<div class="flex flex-wrap items-center">
<div class="mx-0 flex flex-wrap items-center">
<div
class="mr-2 flex flex-row"
v-for="category in categoryList"

74
apps/web-antd/src/views/ai/chat/index/modules/role/list.vue
View File

@@ -58,67 +58,67 @@ async function handleTabsScroll() {
<template>
<div
class="relative flex h-full flex-wrap content-start items-start overflow-auto px-6 pb-36"
class="relative flex h-full flex-wrap content-start items-start overflow-auto pb-36"
ref="tabsRef"
@scroll="handleTabsScroll"
>
<div class="mb-5 mr-5 inline-block" v-for="role in roleList" :key="role.id">
<div class="mb-3 mr-3 inline-block" v-for="role in roleList" :key="role.id">
<Card
class="relative rounded-lg"
:body-style="{
position: 'relative',
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
justifyContent: 'flex-start',
width: '240px',
maxWidth: '240px',
padding: '15px 15px 10px',
padding: '15px',
}"
>
<!-- 更多操作 -->
<div v-if="showMore" class="absolute right-2 top-0">
<Dropdown>
<Button type="link">
<IconifyIcon icon="lucide:ellipsis-vertical" />
<!-- 头部：头像、名称 -->
<div class="flex items-center justify-between">
<div class="flex min-w-0 flex-1 items-center">
<Avatar
:src="role.avatar"
class="h-8 w-8 flex-shrink-0 overflow-hidden"
/>
<div class="ml-2 truncate text-base font-medium">
{{ role.name }}
</div>
</div>
</div>
<!-- 描述信息 -->
<div
class="mt-2 line-clamp-2 h-10 overflow-hidden text-sm text-gray-600"
>
{{ role.description }}
</div>
<!-- 底部操作按钮 -->
<div class="flex items-center justify-end gap-2">
<Dropdown v-if="showMore">
<Button size="small">
<IconifyIcon icon="lucide:ellipsis" />
</Button>
<template #overlay>
<Menu>
<Menu.Item @click="handleMoreClick(['edit', role])">
<div class="flex items-center">
<IconifyIcon icon="lucide:edit" color="#787878" />
<span class="text-primary">编辑</span>
</div>
</Menu.Item>
<Menu.Item @click="handleMoreClick(['delete', role])">
<div class="flex items-center">
<IconifyIcon icon="lucide:trash" color="red" />
<span class="text-red-500">删除</span>
<span class="ml-2 text-red-500">删除</span>
</div>
</Menu.Item>
<Menu.Item @click="handleMoreClick(['edit', role])">
<div class="flex items-center">
<IconifyIcon icon="lucide:edit" color="#787878" />
<span class="text-primary ml-2">编辑</span>
</div>
</Menu.Item>
</Menu>
</template>
</Dropdown>
</div>
<!-- 角色信息 -->
<div>
<Avatar :src="role.avatar" class="h-10 w-10 overflow-hidden" />
</div>
<div class="ml-2 w-4/5">
<div class="h-20">
<div class="max-w-32 text-lg font-bold">
{{ role.name }}
</div>
<div class="mt-2 text-sm">
{{ role.description }}
</div>
</div>
<div class="mt-1 flex flex-row-reverse">
<Button type="primary" size="small" @click="handleUseClick(role)">
使用
</Button>
</div>
<Button type="primary" size="small" @click="handleUseClick(role)">
使用
</Button>
</div>
</Card>
</div>

2
apps/web-antd/src/views/ai/chat/index/modules/role/repository.vue
View File

@@ -112,6 +112,7 @@ async function handlerCategoryClick(category: string) {
async function handlerAddRole() {
formModalApi.setData({ formType: 'my-create' }).open();
}
/** 编辑角色 */
async function handlerCardEdit(role: any) {
formModalApi.setData({ formType: 'my-update', id: role.id }).open();
@@ -219,7 +220,6 @@ onMounted(async () => {
@on-edit="handlerCardEdit"
@on-use="handlerCardUse"
@on-page="handlerCardPage('my')"
class="mt-5"
/>
</Tabs.TabPane>