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

后话

Browse Source
This commit is contained in:
没复习
2026-02-12 19:40:21 +08:00
parent b3335b4b6e
commit 6608b3045e
3 changed files with 130 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,49 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="头像" prop="avatarUrl">
<UploadImg v-model="formData.avatarUrl" directory="ai_companion_avatar" />
<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">
@@ -136,6 +178,9 @@
<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'
defineOptions({ name: 'AiCompanionForm' })
@@ -174,6 +219,51 @@ const formRules = reactive({
})
const formRef = ref()
/** 头像裁剪上传 */
const avatarInputRef = ref<HTMLInputElement>()
const cropperVisible = ref(false)
const avatarCropSrc = ref('')
const avatarPreview = ref('')
const avatarUploading = ref(false)
let cropperInstance: Cropper | null = null
const onAvatarFileChange = (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
const reader = new FileReader()
reader.onload = (ev) => {
avatarCropSrc.value = (ev.target?.result as string) ?? ''
avatarPreview.value = ''
cropperVisible.value = true
}
reader.readAsDataURL(file)
// 清空 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 })
canvas.toBlob(async (blob) => {
if (!blob) return
avatarUploading.value = true
try {
const file = new File([blob], 'avatar.png', { type: 'image/png' })
const res = await FileApi.updateFile({ file, directory: 'ai_companion_avatar' })
formData.value.avatarUrl = res.data
cropperVisible.value = false
message.success('头像上传成功')
} finally {
avatarUploading.value = false
}
}, 'image/png')
}
/** 性格标签 */
const newTag = ref('')
const normalizePersonalityTags = (raw: unknown): string[] => {

26
src/views/keyboard/productitems/ProductItemsForm.vue
View File

@@ -1,12 +1,6 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<el-form-item label="产品ID" prop="productId">
<el-input v-model="formData.productId" placeholder="请输入产品ID" />
</el-form-item>
@@ -21,6 +15,9 @@
<el-form-item label="产品单位" prop="unit">
<el-input v-model="formData.unit" placeholder="请输入产品单位" />
</el-form-item>
<el-form-item label="订阅等级" prop="level">
<el-input v-model="formData.level" placeholder="请输入订阅等级" />
</el-form-item>
<el-form-item label="时长数值" prop="durationValue">
<el-input v-model="formData.durationValue" placeholder="请输入时长数值" />
</el-form-item>
@@ -37,20 +34,10 @@
<Editor v-model="formData.description" height="150px" />
</el-form-item>
<el-form-item label="创建时间" prop="createdAt">
<el-date-picker
v-model="formData.createdAt"
type="date"
value-format="x"
placeholder="选择创建时间"
/>
<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-date-picker v-model="formData.updatedAt" type="date" value-format="x" placeholder="选择更新时间" />
</el-form-item>
<el-form-item label="时长天数" prop="durationDays">
<el-input v-model="formData.durationDays" placeholder="请输入时长天数" />
@@ -81,6 +68,7 @@ const formData = ref({
type: undefined,
name: undefined,
unit: undefined,
level: undefined,
durationValue: undefined,
durationUnit: undefined,
price: undefined,

99
src/views/keyboard/productitems/index.vue
View File

@@ -15,6 +15,10 @@
<el-input v-model="queryParams.name" placeholder="请输入产品名称" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="订阅等级" prop="level">
<el-input v-model="queryParams.level" placeholder="请输入订阅等级" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="产品单位" prop="unit">
<el-input v-model="queryParams.unit" placeholder="请输入产品单位" clearable @keyup.enter="handleQuery"
class="!w-240px" />
@@ -40,40 +44,29 @@
class="!w-240px" />
</el-form-item>
<el-form-item v-show="showMore" label="更新时间" prop="updatedAt">
<el-date-picker v-model="queryParams.updatedAt" value-format="YYYY-MM-DD" type="date"
placeholder="选择更新时间" clearable class="!w-240px" />
<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 v-show="showMore" label="时长天数" prop="durationDays">
<el-input v-model="queryParams.durationDays" placeholder="请输入时长天数" 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:product-items: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:product-items:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['keyboard:product-items:export']"
>
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
v-hasPermi="['keyboard:product-items:export']">
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['keyboard:product-items:delete']"
>
<el-button type="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
v-hasPermi="['keyboard:product-items:delete']">
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
</el-button>
<el-button link type="primary" @click="toggleMore">
@@ -86,15 +79,9 @@
<!-- 列表 -->
<ContentWrap>
<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 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="id" width="90px" />
<el-table-column label="产品ID" align="center" prop="productId" min-width="200px" />
<el-table-column label="产品类型" align="center" prop="type" width="120px">
@@ -105,55 +92,32 @@
</template>
</el-table-column>
<el-table-column label="产品名称" align="center" prop="name" width="120px" />
<el-table-column label="订阅等级" align="center" prop="level" width="120px" />
<el-table-column label="单位" align="center" prop="unit" width="100px" />
<el-table-column label="时长数值" align="center" prop="durationValue" width="100px" />
<el-table-column label="时长单位" align="center" prop="durationUnit" width="100px" />
<el-table-column label="价格" align="center" prop="price" width="110px" />
<el-table-column label="货币" align="center" prop="currency" width="90px" />
<el-table-column label="描述" align="center" prop="description" min-width="180px" />
<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="createdAt" :formatter="dateFormatter" width="180px" />
<el-table-column label="更新时间" align="center" prop="updatedAt" :formatter="dateFormatter" width="180px" />
<el-table-column label="时长天数" align="center" prop="durationDays" width="100px" />
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['keyboard:product-items:update']"
>
<el-button link type="primary" @click="openForm('update', scope.row.id)"
v-hasPermi="['keyboard:product-items:update']">
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['keyboard:product-items:delete']"
>
<el-button link type="danger" @click="handleDelete(scope.row.id)"
v-hasPermi="['keyboard:product-items: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>
<!-- 表单弹窗：添加/修改 -->
@@ -183,6 +147,7 @@ const queryParams = reactive({
productId: undefined,
type: undefined,
name: undefined,
level: undefined,
unit: undefined,
durationValue: undefined,
durationUnit: undefined,
@@ -244,7 +209,7 @@ const handleDelete = async (id: number) => {
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
} catch { }
}
/** 批量删除内购商品 */
@@ -256,7 +221,7 @@ const handleDeleteBatch = async () => {
checkedIds.value = [];
message.success(t('common.delSuccess'))
await getList();
} catch {}
} catch { }
}
const checkedIds = ref<number[]>([])