后话

src/views/keyboard/aicompanion/AiCompanionForm.vue

@@ -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[] => {

src/views/keyboard/productitems/ProductItemsForm.vue

@@ -1,12 +1,6 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
-      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
+        <el-date-picker v-model="formData.createdAt" type="date" value-format="x" placeholder="选择创建时间" />
-          v-model="formData.createdAt"
-          type="date"
-          value-format="x"
-          placeholder="选择创建时间"
-        />
       </el-form-item>
       <el-form-item label="更新时间" prop="updatedAt">
-        <el-date-picker
+        <el-date-picker v-model="formData.updatedAt" type="date" value-format="x" placeholder="选择更新时间" />
-          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,

src/views/keyboard/productitems/index.vue

@@ -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"
+        <el-date-picker v-model="queryParams.updatedAt" value-format="YYYY-MM-DD" type="date" placeholder="选择更新时间"
-          placeholder="选择更新时间" clearable class="!w-240px" />
+          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="handleQuery">
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        <el-button
+        </el-button>
-          type="primary"
+        <el-button @click="resetQuery">
-          plain
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
-          @click="openForm('create')"
+        </el-button>
-          v-hasPermi="['keyboard:product-items:create']"
+        <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
+        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
-          type="success"
+          v-hasPermi="['keyboard:product-items:export']">
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['keyboard:product-items:export']"
-        >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
-        <el-button
+        <el-button type="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
-            type="danger"
+          v-hasPermi="['keyboard:product-items:delete']">
-            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
+    <el-table row-key="id" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
-        row-key="id"
+      @selection-change="handleRowCheckboxChange">
-        v-loading="loading"
+      <el-table-column type="selection" width="55" />
-        :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
+      <el-table-column label="创建时间" align="center" prop="createdAt" :formatter="dateFormatter" width="180px" />
-        label="创建时间"
+      <el-table-column label="更新时间" align="center" prop="updatedAt" :formatter="dateFormatter" width="180px" />
-        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
+          <el-button link type="primary" @click="openForm('update', scope.row.id)"
-            link
+            v-hasPermi="['keyboard:product-items:update']">
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['keyboard:product-items:update']"
-          >
             编辑
           </el-button>
-          <el-button
+          <el-button link type="danger" @click="handleDelete(scope.row.id)"
-            link
+            v-hasPermi="['keyboard:product-items:delete']">
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['keyboard:product-items:delete']"
-          >
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination
+    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-      :total="total"
+      @pagination="getList" />
-      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[]>([])