root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

【优化】处理 AI 角色搜索换行问题

Browse Source
This commit is contained in:
cherishsince 2024-05-17 16:00:00 +08:00
parent d5ffc80ea5
commit 68762e73a2
1 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/ai/chat/role/RoleList.vue
View File

@ -1,42 +1,44 @@
<template> <template>
<div class="card-list" ref="tabsRef" @scroll="handleTabsScroll"> <div class="card-list" ref="tabsRef" @scroll="handleTabsScroll">
<el-card class="card" body-class="card-body" v-for="role in roleList" :key="role.id"> <div class="card-item" v-for="role in roleList" :key="role.id">
<!-- 更多 --> <el-card class="card" body-class="card-body">
<div class="more-container"> <!-- 更多 -->
<el-dropdown @command="handleMoreClick"> <div class="more-container">
<el-dropdown @command="handleMoreClick">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<el-button type="text" > <el-button type="text" >
<el-icon><More /></el-icon> <el-icon><More /></el-icon>
</el-button> </el-button>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item :command="['edit', role]" > <el-dropdown-item :command="['edit', role]" >
<el-icon><EditPen /></el-icon>编辑 <el-icon><EditPen /></el-icon>编辑
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item :command="['delete', role]" style="color: red;" > <el-dropdown-item :command="['delete', role]" style="color: red;" >
<el-icon><Delete /></el-icon> <el-icon><Delete /></el-icon>
<span>删除</span> <span>删除</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<!-- 头像 --> <!-- 头像 -->
<div> <div>
<img class="avatar" :src="role.avatar"/> <img class="avatar" :src="role.avatar"/>
</div> </div>
<div class="right-container"> <div class="right-container">
<div class="content-container"> <div class="content-container">
<div class="title">{{ role.name }}</div> <div class="title">{{ role.name }}</div>
<div class="description">{{ role.description }}</div> <div class="description">{{ role.description }}</div>
</div>
<div class="btn-container">
<el-button type="primary" size="small" @click="handleUseClick(role)">使用</el-button>
</div>
</div> </div>
<div class="btn-container"> </el-card>
<el-button type="primary" size="small" @click="handleUseClick(role)">使用</el-button> </div>
</div>
</div>
</el-card>
</div> </div>
</template> </template>
@ -121,12 +123,17 @@ onMounted(() => {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding: 0px 25px; padding: 0px 25px;
align-items: start;
align-content: flex-start;
justify-content: start;
.card { .card {
display: inline-block;
margin-right: 20px; margin-right: 20px;
border-radius: 10px; border-radius: 10px;
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
//max-height: 152px;
.more-container { .more-container {
position: absolute; position: absolute;