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-16 13:16:44 +08:00
parent a5b9f1043e
commit 4d78c5f594
4 changed files with 140 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local
View File

@@ -4,8 +4,8 @@ NODE_ENV=development
VITE_DEV=true
# 请求路径
VITE_BASE_URL='http://192.168.2.22:48081'
# VITE_BASE_URL='https://admin-xtm9a.loveamorkey.com'
# VITE_BASE_URL='http://192.168.2.22:48081'
VITE_BASE_URL='https://admin-xtm9a.loveamorkey.com'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server

97
src/views/keyboard/aicompanion/components/AiCompanionI18nForm.vue
View File

@@ -1,4 +1,4 @@
<template>
<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">
@@ -25,6 +25,45 @@
<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="prologue">
<el-input v-model="formData.prologue" placeholder="请输入开场白" />
</el-form-item>
<el-form-item label="开场白音频" prop="prologueAudio">
<div class="flex items-center gap-12px flex-wrap">
<audio
v-if="formData.prologueAudio"
:src="formData.prologueAudio"
controls
class="prologue-audio-preview"
></audio>
<el-button
type="primary"
plain
:loading="prologueAudioUploading"
@click="prologueAudioInputRef?.click()"
>
{{ formData.prologueAudio ? '重新上传' : '选择音频' }}
</el-button>
<el-button
v-if="formData.prologueAudio"
type="danger"
plain
@click="formData.prologueAudio = undefined"
>
删除
</el-button>
<el-link v-if="formData.prologueAudio" :href="formData.prologueAudio" target="_blank" type="primary">
打开链接
</el-link>
<input
ref="prologueAudioInputRef"
type="file"
accept="audio/*"
class="hidden"
@change="onPrologueAudioFileChange"
/>
</div>
</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>
@@ -38,16 +77,18 @@
</template>
</Dialog>
</template>
<script setup lang="ts">
import { AiCompanionApi, AiCompanionI18n } from '@/api/keyboard/aicompanion'
import * as FileApi from '@/api/infra/file'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
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 dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
id: undefined,
companionId: undefined,
@@ -56,16 +97,33 @@ const formData = ref({
shortDesc: undefined,
introText: undefined,
createdAt: undefined,
prologue: undefined,
prologueAudio: undefined,
updatedAt: undefined
})
const formRules = reactive({
companionId: [{ required: true, message: '主表ID不能为空', trigger: 'blur' }],
locale: [{ required: true, message: '语言标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const formRef = ref()
const prologueAudioInputRef = ref<HTMLInputElement>()
const prologueAudioUploading = ref(false)
const onPrologueAudioFileChange = async (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
prologueAudioUploading.value = true
try {
const res = await FileApi.updateFile({ file, directory: 'ai_companion_i18n_prologue_audio' })
formData.value.prologueAudio = res.data
message.success('开场白音频上传成功')
} finally {
prologueAudioUploading.value = false
;(e.target as HTMLInputElement).value = ''
}
}
/** 打开弹窗 */
const open = async (type: string, id?: number, companionId?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
@@ -73,7 +131,6 @@ const open = async (type: string, id?: number, companionId?: number) => {
resetForm()
formData.value.id = id as any
formData.value.companionId = companionId as any
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
@@ -83,14 +140,11 @@ const open = async (type: string, id?: number, companionId?: number) => {
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
defineExpose({ open })
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const emit = defineEmits(['success'])
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as AiCompanionI18n
@@ -102,14 +156,12 @@ const submitForm = async () => {
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
@@ -119,6 +171,8 @@ const resetForm = () => {
shortDesc: undefined,
introText: undefined,
createdAt: undefined,
prologue: undefined,
prologueAudio: undefined,
updatedAt: undefined
}
formRef.value?.resetFields()
@@ -126,18 +180,19 @@ const resetForm = () => {
</script>
<style scoped>
/* 表单布局优化 */
.el-form-item {
margin-bottom: 16px;
}
/* 按钮间距 */
.el-button {
margin-right: 8px;
}
/* 输入框宽度 */
.el-input {
width: 100%;
}
.prologue-audio-preview {
height: 32px;
}
</style>

113
src/views/keyboard/aicompanion/components/AiCompanionI18nList.vue
View File

@@ -1,38 +1,24 @@
<template>
<template>
<!-- 列表 -->
<ContentWrap>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['keyboard:ai-companion:create']"
>
<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']"
>
<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 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="主表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
<el-table-column label="开场白" align="center" prop="prologue" min-width="300px" />
<el-table-column label="开场白音频" align="center" prop="prologueAudio" min-width="300px" />
<!-- <el-table-column
label="创建时间"
align="center"
prop="createdAt"
@@ -45,35 +31,25 @@
prop="updatedAt"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
/> -->
<el-table-column label="操作" align="center" width="140" :show-overflow-tooltip="false">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['keyboard:ai-companion:update']"
>
<div class="table-actions">
<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>
</div>
</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>
<!-- 表单弹窗：添加/修改 -->
<AiCompanionI18nForm ref="formRef" @success="getList" />
@@ -84,26 +60,25 @@ import { isEmpty } from '@/utils/is'
import { AiCompanionApi, AiCompanionI18n } from '@/api/keyboard/aicompanion'
import AiCompanionI18nForm from './AiCompanionI18nForm.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { t } = useI18n()
const message = useMessage()
const props = defineProps<{
id?: number // 主键ID（主表的关联字段）
id?: number
}>()
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
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 = [] // 清空列表
list.value = []
return
}
queryParams.id = val
@@ -112,7 +87,6 @@ watch(
{ immediate: true, deep: true }
)
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
@@ -124,49 +98,56 @@ const getList = async () => {
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
if (!props.id) {
message.error('请选择一个AI陪聊角色表，用于定义恋爱/陪伴型虚拟角色的基础信息与人设')
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 = [];
await AiCompanionApi.deleteAiCompanionI18nList(checkedIds.value)
checkedIds.value = []
message.success(t('common.delSuccess'))
await getList();
await getList()
} catch { }
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: AiCompanionI18n[]) => {
checkedIds.value = records.map((item) => item.id!);
checkedIds.value = records.map((item) => item.id!)
}
</script>
<style scoped>
.table-actions {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
}
.table-actions :deep(.el-button) {
margin-right: 0;
margin-bottom: 0;
}
</style>

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

@@ -136,8 +136,8 @@
<el-table-column label="热度评分" align="center" prop="popularityScore" width="100px" />
<!-- <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" min-width="150px" />
<el-table-column label="开场白音频" align="center" prop="prologueAudio" min-width="150px" />
<!-- <el-table-column label="开场白" align="center" prop="prologue" min-width="150px" />
<el-table-column label="开场白音频" align="center" prop="prologueAudio" min-width="150px" /> -->
<el-table-column label="音频Id" align="center" prop="voiceId" width="120px" />
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">