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

383
src/views/keyboard/aicompanion/AiCompanionForm.vue
View File

@@ -1,172 +1,101 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="700px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<!-- 基础信息 -->
<el-divider content-position="left">基础信息</el-divider>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="如：Katie Leona" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="性别" prop="gender">
<el-select v-model="formData.gender" placeholder="请选择性别">
<el-option label="男" value="male" />
<el-option label="女" value="female" />
<el-option label="其他" value="other" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄段" prop="ageRange">
<el-input v-model="formData.ageRange" placeholder="如：20s、25-30" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="头像" prop="avatarUrl">
<div class="flex items-center gap-12px">
<el-avatar v-if="formData.avatarUrl" :src="formData.avatarUrl" :size="50" />
<el-button type="primary" plain @click="avatarInputRef?.click()">
{{ formData.avatarUrl ? '重新上传' : '选择图片' }}
</el-button>
<el-button v-if="formData.avatarUrl" type="danger" plain @click="formData.avatarUrl = undefined">
删除
</el-button>
<input
ref="avatarInputRef"
type="file"
accept="image/*"
class="hidden"
@change="onAvatarFileChange"
/>
</div>
<!-- 头像裁剪弹窗 -->
<Dialog v-model="cropperVisible" title="裁剪头像（50 x 50）" width="800px" :canFullscreen="false">
<div class="flex gap-20px">
<div class="flex-1">
<CropperImage
v-if="avatarCropSrc"
:src="avatarCropSrc"
height="300px"
:options="{ aspectRatio: 1, viewMode: 1 }"
@ready="onCropperReady"
@cropend="onCropend"
/>
</div>
<div class="flex flex-col items-center justify-center">
<div class="w-50px h-50px overflow-hidden border border-gray-300 rounded-full">
<img v-if="avatarPreview" :src="avatarPreview" class="w-full h-full" />
</div>
<span class="mt-8px text-12px text-gray-400">50 x 50 预览</span>
</div>
</div>
<template #footer>
<el-button @click="cropperVisible = false">取消</el-button>
<el-button type="primary" :loading="avatarUploading" @click="confirmCropAvatar">
确认上传
</el-button>
</template>
</Dialog>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="封面图" prop="coverImageUrl">
<UploadImg v-model="formData.coverImageUrl" directory="ai_companion_cover" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="一句话简介" prop="shortDesc">
<el-input v-model="formData.shortDesc" placeholder="用于卡片或列表展示" />
</el-form-item>
<el-form-item label="详细介绍" prop="introText">
<el-input v-model="formData.introText" type="textarea" :rows="3" placeholder="用于角色详情页" />
</el-form-item>
<!-- 人设配置 -->
<el-divider content-position="left">人设配置</el-divider>
<el-form-item label="性格标签" prop="personalityTags">
<div class="w-full">
<div class="flex flex-wrap">
<el-tag
v-for="(tag, index) in formData.personalityTags"
:key="index"
class="mr-5px mb-5px"
closable
@close="removeTag(index)"
>
{{ tag }}
</el-tag>
<span v-if="!formData.personalityTags?.length" class="text-gray-400">暂无标签</span>
</div>
<div class="mt-8px flex items-center gap-8px">
<el-input v-model="newTag" placeholder="输入标签后回车" class="!w-200px" @keyup.enter="addTag" />
<el-button type="primary" plain @click="addTag">添加</el-button>
</div>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<el-form-item label="角色头像" prop="avatarUrl">
<div class="flex items-center gap-12px">
<el-avatar v-if="formData.avatarUrl" :src="formData.avatarUrl" :size="50" />
<el-button type="primary" plain @click="avatarInputRef?.click()">
{{ formData.avatarUrl ? '重新上传' : '选择图片' }}
</el-button>
<el-button v-if="formData.avatarUrl" type="danger" plain @click="formData.avatarUrl = undefined">
删除
</el-button>
<input ref="avatarInputRef" type="file" accept="image/*" class="hidden" @change="onAvatarFileChange" />
</div>
<!-- 头像裁剪弹窗 -->
<Dialog v-model="cropperVisible" title="裁剪头像（50 x 50）" width="800px" :canFullscreen="false">
<div class="flex gap-20px">
<div class="flex-1">
<CropperImage v-if="avatarCropSrc" :src="avatarCropSrc" height="300px"
:options="{ aspectRatio: 1, viewMode: 1 }" @ready="onCropperReady" @cropend="onCropend" />
</div>
<div class="flex flex-col items-center justify-center">
<div class="w-50px h-50px overflow-hidden border border-gray-300 rounded-full">
<img v-if="avatarPreview" :src="avatarPreview" class="w-full h-full" />
</div>
<span class="mt-8px text-12px text-gray-400">200x 200 预览</span>
</div>
</div>
<template #footer>
<el-button @click="cropperVisible = false">取消</el-button>
<el-button type="primary" :loading="avatarUploading" @click="confirmCropAvatar">
确认上传
</el-button>
</template>
</Dialog>
</el-form-item>
<el-form-item label="角色封面图" prop="coverImageUrl">
<div class="flex items-center gap-12px">
<el-image v-if="formData.coverImageUrl" :src="formData.coverImageUrl" fit="cover" class="cover-image-preview"
:preview-src-list="[formData.coverImageUrl]" />
<el-button type="primary" plain @click="coverInputRef?.click()">
{{ formData.coverImageUrl ? '重新上传' : '选择图片' }}
</el-button>
<el-button v-if="formData.coverImageUrl" type="danger" plain @click="formData.coverImageUrl = undefined">
删除
</el-button>
<input ref="coverInputRef" type="file" accept="image/*" class="hidden" @change="onCoverFileChange" />
</div>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input v-model="formData.gender" placeholder="male / female / other" />
</el-form-item>
<el-form-item label="年龄段" prop="ageRange">
<el-input v-model="formData.ageRange" placeholder="如：20s、25-30" />
</el-form-item>
<el-form-item label="性格标签" prop="personalityTags">
<el-input v-model="formData.personalityTags" placeholder="如：温柔、黏人、治愈" />
</el-form-item>
<el-form-item label="说话风格" prop="speakingStyle">
<el-input v-model="formData.speakingStyle" placeholder="如：撒娇型、理性型、活泼型" />
</el-form-item>
<el-form-item label="系统 Prompt" prop="systemPrompt">
<el-input
v-model="formData.systemPrompt"
type="textarea"
:rows="5"
placeholder="定义角色核心人设，仅供 AI 模型使用"
/>
<el-form-item label="系统Prompt" prop="systemPrompt">
<el-input type="textarea" v-model="formData.systemPrompt" placeholder="定义角色核心人设" />
</el-form-item>
<!-- 语音与开场白 -->
<el-divider content-position="left">语音与开场白</el-divider>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :value="1">上线</el-radio>
<el-radio :value="0">下线</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="可见性" prop="visibility">
<el-select v-model="formData.visibility" placeholder="请选择可见性">
<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="sortOrder">
<el-input v-model="formData.sortOrder" placeholder="数值越大排序越靠前" />
</el-form-item>
<el-form-item label="热度评分" prop="popularityScore">
<el-input v-model="formData.popularityScore" placeholder="用于推荐排序" />
</el-form-item>
<!-- <el-form-item label="创建时间" prop="createdAt">
<el-date-picker v-model="formData.createdAt" type="date" value-format="x" placeholder="选择创建时间" />
</el-form-item>
<el-form-item label="更新时间" prop="updatedAt">
<el-date-picker v-model="formData.updatedAt" type="date" value-format="x" placeholder="选择更新时间" />
</el-form-item> -->
<el-form-item label="开场白" prop="prologue">
<el-input v-model="formData.prologue" type="textarea" :rows="2" placeholder="角色的开场白文案" />
<el-input v-model="formData.prologue" placeholder="请输入开场白" />
</el-form-item>
<el-form-item label="开场白音频" prop="prologueAudio">
<el-input v-model="formData.prologueAudio" placeholder="开场白音频 URL" />
<el-input v-model="formData.prologueAudio" placeholder="请输入开场白音频URL" />
</el-form-item>
<el-form-item label="音色 ID" prop="voiceId">
<el-input v-model="formData.voiceId" placeholder="TTS 音色 ID" />
<el-form-item label="音频Id" prop="voiceId">
<el-input v-model="formData.voiceId" placeholder="请输入音频Id" />
</el-form-item>
<!-- 运营配置 -->
<el-divider content-position="left">运营配置</el-divider>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :value="1">上线</el-radio>
<el-radio :value="0">下线</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="可见性" prop="visibility">
<el-select v-model="formData.visibility" placeholder="请选择可见性">
<el-option label="公开" :value="1" />
<el-option label="内测" :value="2" />
<el-option label="隐藏" :value="3" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="排序权重" prop="sortOrder">
<el-input-number v-model="formData.sortOrder" :min="0" controls-position="right" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="热度评分" prop="popularityScore">
<el-input-number v-model="formData.popularityScore" :min="0" :precision="1" controls-position="right" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -174,52 +103,51 @@
</template>
</Dialog>
</template>
<script setup lang="ts">
import { AiCompanionApi, AiCompanion } from '@/api/keyboard/aicompanion'
import { UploadImg } from '@/components/UploadFile'
import { CropperImage } from '@/components/Cropper'
import * as FileApi from '@/api/infra/file'
import type { Cropper } from 'cropperjs'
/** AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设 表单 */
defineOptions({ name: 'AiCompanionForm' })
const { t } = useI18n()
const message = useMessage()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
name: undefined,
avatarUrl: undefined,
coverImageUrl: undefined,
gender: undefined,
ageRange: undefined,
shortDesc: undefined,
introText: undefined,
personalityTags: [] as string[],
personalityTags: undefined,
speakingStyle: undefined,
systemPrompt: undefined,
status: 1,
visibility: 1,
sortOrder: 0,
popularityScore: 0,
status: undefined,
visibility: undefined,
sortOrder: undefined,
popularityScore: undefined,
createdAt: undefined,
updatedAt: undefined,
prologue: undefined,
prologueAudio: undefined,
voiceId: undefined
})
const formRules = reactive({
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
systemPrompt: [{ required: true, message: '系统 Prompt 不能为空', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
visibility: [{ required: true, message: '请选择可见性', trigger: 'change' }]
systemPrompt: [{ required: true, message: '系统Prompt不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
visibility: [{ required: true, message: '可见性不能为空', trigger: 'blur' }],
// createdAt: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
// updatedAt: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }]
})
const formRef = ref()
const formRef = ref() // 表单 Ref
/** 头像裁剪上传 */
/** 头像上传 */
const avatarInputRef = ref<HTMLInputElement>()
const cropperVisible = ref(false)
const avatarCropSrc = ref('')
@@ -227,6 +155,10 @@ const avatarPreview = ref('')
const avatarUploading = ref(false)
let cropperInstance: Cropper | null = null
/** 封面图上传 */
const coverInputRef = ref<HTMLInputElement>()
const coverUploading = ref(false)
const onAvatarFileChange = (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
@@ -237,18 +169,21 @@ const onAvatarFileChange = (e: Event) => {
cropperVisible.value = true
}
reader.readAsDataURL(file)
// 清空 input 以便重复选择同一文件
;(e.target as HTMLInputElement).value = ''
// 清空 input 以便重复选择同一文件
; (e.target as HTMLInputElement).value = ''
}
const onCropperReady = (cropper: Cropper) => {
cropperInstance = cropper
}
const onCropend = ({ imgBase64 }: { imgBase64: string }) => {
avatarPreview.value = imgBase64
}
const confirmCropAvatar = async () => {
if (!cropperInstance) return
const canvas = cropperInstance.getCroppedCanvas({ width: 50, height: 50 })
const canvas = cropperInstance.getCroppedCanvas({ width: 200, height: 200 })
canvas.toBlob(async (blob) => {
if (!blob) return
avatarUploading.value = true
@@ -264,31 +199,19 @@ const confirmCropAvatar = async () => {
}, 'image/png')
}
/** 性格标签 */
const newTag = ref('')
const normalizePersonalityTags = (raw: unknown): string[] => {
if (!raw) return []
if (Array.isArray(raw)) return raw.map(String)
if (typeof raw === 'string') {
try {
const parsed = JSON.parse(raw)
if (Array.isArray(parsed)) return parsed.map(String)
} catch {
return raw.split(/[,，]/).map((s) => s.trim()).filter(Boolean)
}
const onCoverFileChange = async (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
coverUploading.value = true
try {
const res = await FileApi.updateFile({ file, directory: 'ai_companion_cover' })
formData.value.coverImageUrl = res.data
message.success('封面图上传成功')
} finally {
coverUploading.value = false
// 清空 input 以便重复选择同一文件
; (e.target as HTMLInputElement).value = ''
}
return []
}
const addTag = () => {
const text = newTag.value.trim()
if (!text) return
if (!formData.value.personalityTags.includes(text)) {
formData.value.personalityTags = [...formData.value.personalityTags, text]
}
newTag.value = ''
}
const removeTag = (index: number) => {
formData.value.personalityTags = formData.value.personalityTags.filter((_, i) => i !== index)
}
/** 打开弹窗 */
@@ -297,25 +220,24 @@ const open = async (type: string, id?: number) => {
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
const data = await AiCompanionApi.getAiCompanion(id)
formData.value = {
...data,
personalityTags: normalizePersonalityTags(data.personalityTags)
}
formData.value = await AiCompanionApi.getAiCompanion(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open })
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success'])
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as AiCompanion
@@ -327,6 +249,7 @@ const submitForm = async () => {
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
@@ -337,20 +260,19 @@ const submitForm = async () => {
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
avatarUrl: undefined,
coverImageUrl: undefined,
gender: undefined,
ageRange: undefined,
shortDesc: undefined,
introText: undefined,
personalityTags: [] as string[],
personalityTags: undefined,
speakingStyle: undefined,
systemPrompt: undefined,
status: 1,
visibility: 1,
sortOrder: 0,
popularityScore: 0,
status: undefined,
visibility: undefined,
sortOrder: undefined,
popularityScore: undefined,
createdAt: undefined,
updatedAt: undefined,
prologue: undefined,
prologueAudio: undefined,
voiceId: undefined
@@ -358,3 +280,22 @@ const resetForm = () => {
formRef.value?.resetFields()
}
</script>
<style scoped>
.cover-image-preview {
width: 100px;
height: 60px;
border-radius: 4px;
cursor: pointer;
}
/* 表单布局优化 */
.el-form-item {
margin-bottom: 16px;
}
/* 按钮间距 */
.el-button {
margin-right: 8px;
}
</style>

141
src/views/keyboard/aicompanion/components/AiCompanionI18nForm.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<!-- <el-form-item label="主表ID" prop="companionId">
<el-input v-model="formData.companionId" placeholder="请输入主表ID" />
</el-form-item> -->
<el-form-item label="语言标识" prop="locale">
<el-input v-model="formData.locale" placeholder="请选择语言标识" />
<!-- <el-select v-model="formData.locale" placeholder="请选择语言标识">
<el-option label="中文（简体）" value="zh-CN" />
<el-option label="英文（美国）" value="en-US" />
<el-option label="日文" value="ja-JP" />
<el-option label="韩文" value="ko-KR" />
<el-option label="法文" value="fr-FR" />
<el-option label="德文" value="de-DE" />
<el-option label="西班牙文" value="es-ES" />
</el-select> -->
</el-form-item>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="一句话描述" prop="shortDesc">
<el-input v-model="formData.shortDesc" placeholder="请输入一句话人设描述" />
</el-form-item>
<el-form-item label="详细介绍" prop="introText">
<el-input v-model="formData.introText" placeholder="请输入角色详细介绍" type="textarea" :rows="4" />
</el-form-item>
<!-- <el-form-item label="创建时间" prop="createdAt">
<el-date-picker v-model="formData.createdAt" type="date" value-format="x" placeholder="选择创建时间" />
</el-form-item>
<el-form-item label="更新时间" prop="updatedAt">
<el-date-picker v-model="formData.updatedAt" type="date" value-format="x" placeholder="选择更新时间" />
</el-form-item> -->
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { AiCompanionApi, AiCompanionI18n } from '@/api/keyboard/aicompanion'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
companionId: undefined,
locale: undefined,
name: undefined,
shortDesc: undefined,
introText: undefined,
createdAt: undefined,
updatedAt: undefined
})
const formRules = reactive({
locale: [{ required: true, message: '语言标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
formData.value.id = id as any
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await AiCompanionApi.getAiCompanionI18n(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as AiCompanionI18n
if (formType.value === 'create') {
await AiCompanionApi.createAiCompanionI18n(data)
message.success(t('common.createSuccess'))
} else {
await AiCompanionApi.updateAiCompanionI18n(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
companionId: undefined,
locale: undefined,
name: undefined,
shortDesc: undefined,
introText: undefined,
createdAt: undefined,
updatedAt: undefined
}
formRef.value?.resetFields()
}
</script>
<style scoped>
/* 表单布局优化 */
.el-form-item {
margin-bottom: 16px;
}
/* 按钮间距 */
.el-button {
margin-right: 8px;
}
/* 输入框宽度 */
.el-input {
width: 100%;
}
</style>

150
src/views/keyboard/aicompanion/components/AiCompanionI18nList.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<!-- 列表 -->
<ContentWrap>
<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="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
v-hasPermi="['keyboard:ai-companion:delete']">
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
</el-button>
<el-table row-key="id" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
@selection-change="handleRowCheckboxChange">
<el-table-column type="selection" width="55" />
<el-table-column label="主表ID" align="center" prop="companionId" width="120px" />
<el-table-column label="语言标识" align="center" prop="locale" width="120px" />
<el-table-column label="角色名称" align="center" prop="name" width="180px" />
<el-table-column label="一句话描述" align="center" prop="shortDesc" width="200px" />
<el-table-column label="详细介绍" align="center" prop="introText" min-width="300px" />
<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">
<template #default="scope">
<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>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<AiCompanionI18nForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { isEmpty } from '@/utils/is'
import { AiCompanionApi, AiCompanionI18n } from '@/api/keyboard/aicompanion'
import AiCompanionI18nForm from './AiCompanionI18nForm.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const props = defineProps<{
id?: number // 主键ID（主表的关联字段）
}>()
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
id: undefined as unknown
})
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.id,
(val: number) => {
if (!val) {
list.value = [] // 清空列表
return
}
queryParams.id = val
handleQuery()
},
{ immediate: true, deep: true }
)
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await AiCompanionApi.getAiCompanionI18nPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
if (!props.id) {
message.error('请选择一个AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设')
return
}
formRef.value.open(type, id, props.id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await AiCompanionApi.deleteAiCompanionI18n(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch { }
}
/** 批量删除AI陪聊角色国际化表，用于存储不同语言下的角色名称、一句话描述和详细介绍 */
const handleDeleteBatch = async () => {
try {
// 删除的二次确认
await message.delConfirm()
await AiCompanionApi.deleteAiCompanionI18nList(checkedIds.value);
checkedIds.value = [];
message.success(t('common.delSuccess'))
await getList();
} catch { }
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: AiCompanionI18n[]) => {
checkedIds.value = records.map((item) => item.id!);
}
</script>
<style scoped>
/* 按钮间距 */
.el-button {
margin-right: 8px;
margin-bottom: 8px;
}
/* 表格样式优化 */
.el-table {
margin-top: 16px;
}
/* 操作按钮间距 */
.el-table-column__content .el-button {
margin-right: 4px;
}
</style>

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>