mfx/loveKeyAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台管理上限

Browse Source
This commit is contained in:
没复习
2026-04-03 16:04:02 +08:00
parent 6608b3045e
commit 7e20966f97
47 changed files with 3148 additions and 830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
src/views/keyboard/aicompanion/index.vue
View File

@@ -1,80 +1,92 @@
<template>
<!-- 搜索 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="角色名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入角色名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form-item label="角色头像" prop="avatarUrl">
<el-input v-model="queryParams.avatarUrl" placeholder="请输入角色头像URL" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="角色封面图" prop="coverImageUrl">
<el-input v-model="queryParams.coverImageUrl" placeholder="请输入角色封面图URL" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-select v-model="queryParams.gender" placeholder="全部" clearable class="!w-240px">
<el-option label="男" value="male" />
<el-option label="女" value="female" />
<el-option label="其他" value="other" />
</el-select>
<el-input v-model="queryParams.gender" placeholder="male / female / other" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="年龄段" prop="ageRange">
<el-input v-model="queryParams.ageRange" placeholder="如：20s、25-30" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="性格标签" prop="personalityTags">
<el-input v-model="queryParams.personalityTags" placeholder="如：温柔、黏人、治愈" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="说话风格" prop="speakingStyle">
<el-input v-model="queryParams.speakingStyle" placeholder="如：撒娇型、理性型、活泼型" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="系统Prompt" prop="systemPrompt">
<el-input v-model="queryParams.systemPrompt" placeholder="定义角色核心人设" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="全部" clearable class="!w-240px">
<el-option label="上线" :value="1" />
<el-option label="下线" :value="0" />
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option label="上线" value="1" />
<el-option label="下线" value="0" />
</el-select>
</el-form-item>
<el-form-item label="可见性" prop="visibility">
<el-select v-model="queryParams.visibility" placeholder="全部" clearable class="!w-240px">
<el-option label="公开" :value="1" />
<el-option label="内测" :value="2" />
<el-option label="隐藏" :value="3" />
<el-select v-model="queryParams.visibility" placeholder="请选择可见性" clearable class="!w-240px">
<el-option label="公开" value="1" />
<el-option label="内测" value="2" />
<el-option label="隐藏" value="3" />
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
<el-form-item label="排序权重" prop="sortOrder">
<el-input v-model="queryParams.sortOrder" placeholder="数值越大排序越靠前" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="热度评分" prop="popularityScore">
<el-input v-model="queryParams.popularityScore" placeholder="用于推荐排序" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="创建时间" prop="createdAt">
<el-date-picker v-model="queryParams.createdAt" value-format="YYYY-MM-DD" type="date" placeholder="选择创建时间"
clearable class="!w-240px" />
</el-form-item>
<el-form-item label="更新时间" prop="updatedAt">
<el-date-picker v-model="queryParams.updatedAt" value-format="YYYY-MM-DD" type="date" placeholder="选择更新时间"
clearable class="!w-240px" />
</el-form-item>
<el-form-item label="开场白" prop="prologue">
<el-input v-model="queryParams.prologue" placeholder="请输入开场白" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="开场白音频" prop="prologueAudio">
<el-input v-model="queryParams.prologueAudio" placeholder="请输入开场白音频" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="音频Id" prop="voiceId">
<el-input v-model="queryParams.voiceId" placeholder="请输入音频Id" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['keyboard:ai-companion:create']"
>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['keyboard:ai-companion:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['keyboard:ai-companion:export']"
>
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
v-hasPermi="['keyboard:ai-companion:export']">
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['keyboard:ai-companion:delete']"
>
<el-button type="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
v-hasPermi="['keyboard:ai-companion:delete']">
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
</el-button>
</el-form-item>
@@ -83,93 +95,64 @@
<!-- 列表 -->
<ContentWrap>
<el-table
row-key="id"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
@selection-change="handleRowCheckboxChange"
>
<el-table row-key="id" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
highlight-current-row @current-change="handleCurrentChange" @selection-change="handleRowCheckboxChange">
<el-table-column type="selection" width="55" />
<el-table-column label="ID" align="center" prop="id" width="70" />
<el-table-column label="头像" align="center" prop="avatarUrl" width="80">
<el-table-column label="陪聊角色唯一ID" align="center" prop="id" width="120px" />
<el-table-column label="角色头像" align="center" prop="avatarUrl" width="100px">
<template #default="scope">
<el-image
v-if="scope.row.avatarUrl"
:src="scope.row.avatarUrl"
:preview-src-list="[scope.row.avatarUrl]"
preview-teleported
fit="cover"
class="w-40px h-40px rounded-full"
/>
<el-image v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl" fit="cover" class="avatar-image" />
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="角色名称" align="center" prop="name" min-width="120" />
<el-table-column label="性别" align="center" prop="gender" width="70">
<el-table-column label="角色封面图" align="center" prop="coverImageUrl" width="150px">
<template #default="scope">
<el-tag v-if="scope.row.gender === 'male'" type="primary">男</el-tag>
<el-tag v-else-if="scope.row.gender === 'female'" type="danger">女</el-tag>
<el-tag v-else type="info">其他</el-tag>
<el-image v-if="scope.row.coverImageUrl" :src="scope.row.coverImageUrl" fit="cover" class="cover-image" />
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="年龄段" align="center" prop="ageRange" width="80" />
<el-table-column label="简介" align="center" prop="shortDesc" min-width="160" />
<el-table-column label="说话风格" align="center" prop="speakingStyle" width="100" />
<el-table-column label="状态" align="center" prop="status" width="80">
<el-table-column label="角色性别（male / female / other）" align="center" prop="gender" />
<el-table-column label="角色年龄段描述（如：20s、25-30）" align="center" prop="ageRange" />
<el-table-column label="角色性格标签数组（如：温柔、黏人、治愈）" align="center" prop="personalityTags" />
<el-table-column label="角色说话风格（如：撒娇型、理性型、活泼型）" align="center" prop="speakingStyle" />
<el-table-column label="AI系统Prompt，定义角色核心人设，仅供模型使用" align="center" prop="systemPrompt" />
<el-table-column label="角色状态：1=上线，0=下线" align="center" prop="status" />
<el-table-column label="角色可见性：1=公开，2=内测，3=隐藏" align="center" prop="visibility" />
<el-table-column label="排序权重，数值越大排序越靠前" align="center" prop="sortOrder" />
<el-table-column label="角色热度评分，用于推荐排序" align="center" prop="popularityScore" />
<!-- <el-table-column label="创建时间" align="center" prop="createdAt" :formatter="dateFormatter" width="180px" />
<el-table-column label="更新时间" align="center" prop="updatedAt" :formatter="dateFormatter" width="180px" /> -->
<el-table-column label="开场白" align="center" prop="prologue" />
<el-table-column label="开场白音频" align="center" prop="prologueAudio" />
<el-table-column label="音频Id" align="center" prop="voiceId" />
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">上线</el-tag>
<el-tag v-else type="info">下线</el-tag>
</template>
</el-table-column>
<el-table-column label="可见性" align="center" prop="visibility" width="80">
<template #default="scope">
<el-tag v-if="scope.row.visibility === 1">公开</el-tag>
<el-tag v-else-if="scope.row.visibility === 2" type="warning">内测</el-tag>
<el-tag v-else-if="scope.row.visibility === 3" type="info">隐藏</el-tag>
</template>
</el-table-column>
<el-table-column label="排序" align="center" prop="sortOrder" width="70" />
<el-table-column label="热度" align="center" prop="popularityScore" width="70" />
<el-table-column
label="创建时间"
align="center"
prop="createdAt"
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="操作" align="center" fixed="right" width="130">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['keyboard:ai-companion:update']"
>
<el-button link type="primary" @click="openForm('update', scope.row.id)"
v-hasPermi="['keyboard:ai-companion:update']">
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['keyboard:ai-companion:delete']"
>
<el-button link type="danger" @click="handleDelete(scope.row.id)"
v-hasPermi="['keyboard:ai-companion:delete']">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<AiCompanionForm ref="formRef" @success="getList" />
<!-- 子表的列表 -->
<ContentWrap>
<el-tabs model-value="aiCompanionI18n">
<el-tab-pane label="AI陪聊角色国际化表，用于存储不同语言下的角色名称、一句话描述和详细介绍" name="aiCompanionI18n">
<AiCompanionI18nList :id="currentRow.id" />
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
@@ -178,26 +161,41 @@ import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { AiCompanionApi, AiCompanion } from '@/api/keyboard/aicompanion'
import AiCompanionForm from './AiCompanionForm.vue'
import AiCompanionI18nList from './components/AiCompanionI18nList.vue'
/** AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设 列表 */
defineOptions({ name: 'KeyboardAiCompanion' })
const message = useMessage()
const { t } = useI18n()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true)
const list = ref<AiCompanion[]>([])
const total = ref(0)
const loading = ref(true) // 列表的加载中
const list = ref<AiCompanion[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
avatarUrl: undefined,
coverImageUrl: undefined,
gender: undefined,
ageRange: undefined,
personalityTags: undefined,
speakingStyle: undefined,
systemPrompt: undefined,
status: undefined,
visibility: undefined,
createTime: []
sortOrder: undefined,
popularityScore: undefined,
createdAt: undefined,
createdAt: [],
updatedAt: undefined,
updatedAt: [],
prologue: undefined,
prologueAudio: undefined,
voiceId: undefined
})
const queryFormRef = ref()
const exportLoading = ref(false)
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
@@ -232,43 +230,92 @@ const openForm = (type: string, id?: number) => {
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await AiCompanionApi.deleteAiCompanion(id)
message.success(t('common.delSuccess'))
currentRow.value = {}
// 刷新列表
await getList()
} catch {}
} catch { }
}
/** 批量删除 */
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: AiCompanion[]) => {
checkedIds.value = records.map((item) => item.id!)
}
/** 批量删除AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设 */
const handleDeleteBatch = async () => {
try {
// 删除的二次确认
await message.delConfirm()
await AiCompanionApi.deleteAiCompanionList(checkedIds.value)
checkedIds.value = []
await AiCompanionApi.deleteAiCompanionList(checkedIds.value);
checkedIds.value = [];
message.success(t('common.delSuccess'))
await getList()
} catch {}
await getList();
} catch { }
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: AiCompanion[]) => {
checkedIds.value = records.map((item) => item.id!);
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await AiCompanionApi.exportAiCompanion(queryParams)
download.excel(data, 'AI陪聊角色.xls')
download.excel(data, 'AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 选中行操作 */
const currentRow = ref({}) // 选中行
const handleCurrentChange = (row) => {
currentRow.value = row
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<style scoped>
.avatar-image {
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.cover-image {
width: 100px;
height: 60px;
border-radius: 4px;
cursor: pointer;
}
/* 表格行悬停效果 */
:deep(.el-table__row:hover) {
background-color: #f5f7fa !important;
}
/* 图片加载和错误处理 */
:deep(.el-image__error) {
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
color: #999;
font-size: 12px;
}
:deep(.el-image__placeholder) {
background-color: #f0f0f0;
}
</style>