fix music request

src/App.vue

@@ -1,30 +1,32 @@
 <template>
-  <NMessageProvider>
+  <NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
-    <NNotificationProvider>
+    <NMessageProvider>
-      <NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
+      <NNotificationProvider>
-        <NLoadingBarProvider>
+        <NDialogProvider>
-          <Suspense>
+          <NLoadingBarProvider>
-            <TempComponent>
+            <Suspense>
-              <NLayoutContent style="height: 100%" v-if="layout != 'obs'">
+              <TempComponent>
-                <NElement>
+                <NLayoutContent style="height: 100%" v-if="layout != 'obs'">
-                  <ViewerLayout v-if="layout == 'viewer'" />
+                  <NElement>
-                  <ManageLayout v-else-if="layout == 'manage'" />
+                    <ViewerLayout v-if="layout == 'viewer'" />
-                  <OpenLiveLayout v-else-if="layout == 'open-live'" />
+                    <ManageLayout v-else-if="layout == 'manage'" />
-                  <template v-else-if="layout == ''">
+                    <OpenLiveLayout v-else-if="layout == 'open-live'" />
-                    <RouterView />
+                    <template v-else-if="layout == ''">
-                  </template>
+                      <RouterView />
-                </NElement>
+                    </template>
-              </NLayoutContent>
+                  </NElement>
-              <RouterView v-else />
+                </NLayoutContent>
-            </TempComponent>
+                <RouterView v-else />
-            <template #fallback>
+              </TempComponent>
-              <NSpin size="large" show />
+              <template #fallback>
-            </template>
+                <NSpin size="large" show />
-          </Suspense>
+              </template>
-        </NLoadingBarProvider>
+            </Suspense>
-      </NConfigProvider>
+          </NLoadingBarProvider>
-    </NNotificationProvider>
+        </NDialogProvider>
-  </NMessageProvider>
+      </NNotificationProvider>
+    </NMessageProvider>
+  </NConfigProvider>
 </template>
 
 <script setup lang="ts">
@@ -32,7 +34,21 @@ import { useProviderStore } from '@/store/useProviderStore'
 import ManageLayout from '@/views/ManageLayout.vue'
 import ViewerLayout from '@/views/ViewerLayout.vue'
 import { useStorage } from '@vueuse/core'
-import { NConfigProvider, NElement, NLayoutContent, NLoadingBarProvider, NMessageProvider, NNotificationProvider, NSpin, darkTheme, dateZhCN, useLoadingBar, useOsTheme, zhCN } from 'naive-ui'
+import {
+  NConfigProvider,
+  NDialogProvider,
+  NElement,
+  NLayoutContent,
+  NLoadingBarProvider,
+  NMessageProvider,
+  NNotificationProvider,
+  NSpin,
+  darkTheme,
+  dateZhCN,
+  useLoadingBar,
+  useOsTheme,
+  zhCN,
+} from 'naive-ui'
 import { computed, defineComponent, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ThemeType } from './api/api-models'

src/Utils.ts

@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { createDiscreteApi, useOsTheme } from 'naive-ui'
+import { UploadFileInfo, createDiscreteApi, useOsTheme } from 'naive-ui'
 import { ThemeType } from './api/api-models'
 
 const { message } = createDiscreteApi(['message'])
@@ -80,3 +80,26 @@ export function getBase64(file: File | undefined | null): Promise<string | undef
     reader.onerror = (error) => reject(error)
   })
 }
+export async function getImageUploadModel(files: UploadFileInfo[] | undefined | null, maxSize: number = 10 * 1024 * 1024) {
+  let result = {
+    existImages: [],
+    newImagesBase64: [],
+  } as { existImages: string[]; newImagesBase64: string[] }
+  if (!files) return result
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i]
+    if ((file.file?.size ?? 0) > maxSize) {
+      message.error('文件大小不能超过 ' + maxSize / 1024 / 1024 + 'MB')
+      return result
+    }
+    if (!file.file) {
+      result.existImages.push(file.id) //用id绝对路径当的文件名
+    } else {
+      const base64 = await getBase64(file.file)
+      if (base64) {
+        result.newImagesBase64.push(base64)
+      }
+    }
+  }
+  return result
+}

src/api/api-models.ts

@@ -520,7 +520,9 @@ export enum GoodsTypes {
 export interface ResponsePointGoodModel {
   id: number
   name: string
-  count: number
+  description: string
+  content?: string
+  count?: number
   price: number
   tags: TagInfo[]
   cover?: string
@@ -528,14 +530,17 @@ export interface ResponsePointGoodModel {
   status: GoodsStatus
   type: GoodsTypes
 }
-
+export interface ImageUploadModel{
+  existImages: string[]
+  newImagesBase64: string[]
+}
 export interface PointGoodsModel {
   id?: number
   name: string
   count: number
   price: number
   tags: TagInfo[]
-  coverImageBase64?: string
+  cover?: ImageUploadModel
   status: GoodsStatus
   type: GoodsTypes
   collectUrl?: string

src/components/manage/PointGoodsItem.vue

@@ -1,20 +1,45 @@
 <script setup lang="ts">
 import { ResponsePointGoodModel } from '@/api/api-models'
-import { NCard } from 'naive-ui'
+import { NButton, NCard, NDropdown, NEllipsis, NFlex, NIcon, NImage, NPopselect, NText } from 'naive-ui'
-import { ref } from 'vue'
+import { FILE_BASE_URL, IMGUR_URL } from '@/data/constants'
+import { computed, ref } from 'vue'
+import { MoreHorizontal16Filled, MoreVertical16Filled } from '@vicons/fluent'
 
 const props = defineProps<{
   goods: ResponsePointGoodModel
 }>()
+const emptyCover = IMGUR_URL + 'None.png'
 </script>
 
 <template>
-  <NCard>
+  <NCard style="max-width: 300px">
     <template #cover>
-      <img :src="goods.cover" />
+      <NImage :src="goods.cover ? FILE_BASE_URL + goods.cover : emptyCover" :fallback-src="emptyCover" height="150" object-fit="cover" :preview-disabled="!goods.cover" style="width: 100%" />
+    </template>
+    <template #header-extra>
+      <slot name="header-extra"></slot>
     </template>
     <template #header>
-      {{ goods.name }}
+      <NEllipsis>
+        {{ goods.name }}
+      </NEllipsis>
+    </template>
+    <NFlex vertical>
+      <NText depth="3">
+        {{ goods.description }}
+      </NText>
+      <NFlex justify="space-between">
+        <NFlex>
+          <NText> 库存: </NText>
+          <NText v-if="goods.count && goods.count > -1">
+            {{ goods.count }}
+          </NText>
+          <NText v-else> 不限 </NText>
+        </NFlex>
+      </NFlex>
+    </NFlex>
+    <template #footer>
+      <slot name="footer"></slot>
     </template>
   </NCard>
 </template>

src/data/constants.ts

@@ -8,6 +8,8 @@ const failoverAPI = `https://failover-api.vtsuru.suki.club/api/`
 export const isBackendUsable = ref(true)
 
 export const AVATAR_URL = 'https://workers.vrp.moe/api/bilibili/avatar/'
+export const FILE_BASE_URL = 'https://files.vtsuru.live'
+export const IMGUR_URL = FILE_BASE_URL + '/imgur/'
 export const apiFail = ref(false)
 
 export const BASE_API = () => (process.env.NODE_ENV === 'development' ? debugAPI : apiFail.value ? failoverAPI : releseAPI)

src/router/user.ts

@@ -37,6 +37,15 @@ export default {
         title: '日程',
         keepAlive: true,
       },
+      children: [
+        {
+          path: 'ics',
+          beforeEnter(to: any) {
+            // 直接重定向到外部 URL
+            window.location.href = 'https://vtsuru.live/api/schedule/get-ics?id=' + to.query.id
+          },
+        },
+      ],
     },
   ],
 }

src/store/useMusicRequest.ts

@@ -66,18 +66,21 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
   const message = useMessage()
 
   function addWaitingMusic(info: WaitMusicInfo) {
+    console.log(settings.value.orderMusicFirst + ' ' + isPlayingOrderMusic.value)
     if ((settings.value.orderMusicFirst && !isPlayingOrderMusic.value) || aplayerRef.value?.audio.paused == true) {
       playMusic(info.music)
+      isPlayingOrderMusic.value = true
       console.log(`正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`)
+      message.success(`正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`)
     } else {
       waitingMusics.value.push(info)
       message.success(`[${info.from.name}] 点了一首 ${info.music.name} - ${info.music.author?.join('/')}`)
     }
   }
   function onMusicEnd() {
+    isPlayingOrderMusic.value = false
     if (!playWaitingMusic()) {
-      isPlayingOrderMusic.value = false
+      if (currentOriginMusic.value) {
-      if (currentOriginMusic) {
         currentOriginMusic.value = undefined
       }
       setTimeout(() => {
@@ -139,6 +142,14 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
       message.error('设置音频输出设备失败: ' + err)
     }
   }
+  function nextMusic() {
+    if (waitingMusics.value.length > 0) {
+      onMusicEnd()
+    } else {
+      isPlayingOrderMusic.value = false
+      aplayerRef.value?.onAudioEnded()
+    }
+  }
 
   return {
     waitingMusics,
@@ -155,6 +166,7 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
     onMusicEnd,
     onMusicPlay,
     pauseMusic,
+    nextMusic,
     aplayerRef,
   }
 })

src/views/BiliAuthView.vue

@@ -42,6 +42,8 @@ function onStartVerify() {
       currentStep.value = 1
       timer.value = setInterval(checkStatus, 2500)
       startModel.value = data.data
+    } else {
+      message.error('无法开启认证流程: ' + data.message)
     }
   })
 }
@@ -154,7 +156,7 @@ onMounted(async () => {
             <NText> 你的登陆链接为: </NText>
             <NInputGroup>
               <NInput :value="`https://vtsuru.live/point?auth=${biliToken}`" type="textarea" :allow-input="() => false" />
-              <NButton @click="copyCode" type="info" style="height: 100%;"> 复制登陆链接 </NButton>
+              <NButton @click="copyCode" type="info" style="height: 100%"> 复制登陆链接 </NButton>
             </NInputGroup>
             <NButton @click="" type="primary"> 前往个人中心 </NButton>
           </NFlex>

src/views/ManageLayout.vue

@@ -409,6 +409,9 @@ function logout() {
   cookie.value = undefined
   window.location.reload()
 }
+function onNextMusic() {
+  musicRquestStore.nextMusic();
+}
 
 onMounted(() => {
   if (accountInfo.value?.isEmailVerified == false) {
@@ -532,7 +535,7 @@ onMounted(() => {
             />
             <NSpace vertical>
               <NTag :bordered="false" type="info" size="small"> 队列: {{ musicRquestStore.waitingMusics.length }} </NTag>
-              <NButton size="small" type="info" @click="musicRquestStore.waitingMusics.length > 0 ? musicRquestStore.onMusicEnd() : musicRquestStore.aplayerRef?.onAudioEnded()"> 下一首 </NButton>
+              <NButton size="small" type="info" @click="onNextMusic"> 下一首 </NButton>
             </NSpace>
           </div>
         </NLayoutFooter>
@@ -550,7 +553,7 @@ onMounted(() => {
         <RegisterAndLogin style="max-width: 500px; min-width: 350px" />
       </template>
       <template v-else>
-        <NSpin :loading="isLoadingAccount" style="overflow: hidden;"> 正在请求账户数据... </NSpin>
+        <NSpin :loading="isLoadingAccount" style="overflow: hidden"> 正在请求账户数据... </NSpin>
       </template>
     </NLayoutContent>
   </template>

src/views/manage/PointManage.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { getBase64 } from '@/Utils'
+import { getBase64, getImageUploadModel } from '@/Utils'
 import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
 import { ResponsePointGoodModel, FunctionTypes, PointGoodsModel, GoodsTypes, GoodsStatus, TagInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { POINT_API_URL } from '@/data/constants'
+import PointGoodsItem from '@/components/manage/PointGoodsItem.vue'
-import { Info24Filled } from '@vicons/fluent'
+import { FILE_BASE_URL, POINT_API_URL } from '@/data/constants'
+import { Info24Filled, MoreVertical16Filled } from '@vicons/fluent'
 import { List } from 'linqts'
 import {
   NAlert,
@@ -32,15 +33,21 @@ import {
   FormItemRule,
   NScrollbar,
   FormValidationError,
-NSelect,
+  NSelect,
+  NGrid,
+  NGridItem,
+  NDropdown,
+  NImage,
+  useDialog,
 } from 'naive-ui'
 import { computed, ref } from 'vue'
 
 const message = useMessage()
 const accountInfo = useAccount()
+const dialog = useDialog()
 
 const goods = ref<ResponsePointGoodModel[]>(await getGoods())
-const addGoodsModel = ref<PointGoodsModel>({
+const currentGoodsModel = ref<PointGoodsModel>({
   type: GoodsTypes.Virtual,
   status: GoodsStatus.Normal,
 } as PointGoodsModel)
@@ -48,6 +55,7 @@ const addGoodsModel = ref<PointGoodsModel>({
 const showAddGoodsModal = ref(false)
 
 const isAllowedPrivacyPolicy = ref(false)
+const isUpdating = ref(false)
 
 const fileList = ref<UploadFileInfo[]>([])
 
@@ -64,32 +72,55 @@ const rules = {
     required: true,
     message: '请输入虚拟礼物的具体内容',
     validator: (rule: FormItemRule, value: string) => {
-      return addGoodsModel.value.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0
+      return currentGoodsModel.value.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0
     },
   },
   privacy: {
     required: true,
     message: '需要阅读并同意本站隐私政策',
     validator: (rule: FormItemRule, value: boolean) => {
-      return (addGoodsModel.value.type != GoodsTypes.Physical && addGoodsModel.value.collectUrl != undefined) || isAllowedPrivacyPolicy.value
+      return (currentGoodsModel.value.type != GoodsTypes.Physical && currentGoodsModel.value.collectUrl != undefined) || isAllowedPrivacyPolicy.value
     },
   },
 }
 const formRef = ref()
 
 const existTags = computed(() => {
+  if (goods.value.length == 0) {
+    return []
+  }
   //获取所有已存在商品的tags并去重
   const tempSet = new Set<TagInfo>()
   for (let i = 0; i < goods.value.length; i++) {
+    const goodsTags = goods.value[i].tags
+    if (!goodsTags || goodsTags.length == 0) {
+      continue
+    }
     for (let j = 0; j < goods.value[i].tags.length; j++) {
       tempSet.add(goods.value[i].tags[j])
     }
   }
   return Array.from(tempSet).map((item) => {
-    return { label: item.name, value: item.id }
+    return { label: item.name, value: item.name }
   })
 })
 
+const dropDownActions = {
+  update: {
+    label: '修改',
+    key: 'update',
+    action: (item: ResponsePointGoodModel) => onUpdateClick(item),
+  },
+  delete: {
+    label: '删除',
+    key: 'delete',
+    action: (item: ResponsePointGoodModel) => onDeleteClick(item),
+  },
+} as { [key: string]: { label: string; key: string; action: (item: ResponsePointGoodModel) => void } }
+const dropDownOptions = computed(() => {
+  return Object.values(dropDownActions)
+})
+
 async function getGoods() {
   try {
     var resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods', {
@@ -119,18 +150,25 @@ async function setFunctionEnable(enable: boolean) {
   }
 }
 async function updateGoods(e: MouseEvent) {
+  if (isUpdating.value || !formRef.value) return
   e.preventDefault()
-  if (!formRef.value) return
+  isUpdating.value = true
   await formRef.value
     .validate()
     .then(async () => {
       if (fileList.value.length > 0) {
-        addGoodsModel.value.coverImageBase64 = await getBase64(fileList.value[0].file)
+        currentGoodsModel.value.cover = await getImageUploadModel(fileList.value)
       }
-      await QueryPostAPI<ResponsePointGoodModel>(POINT_API_URL + 'update-goods', addGoodsModel.value)
+      console.log(currentGoodsModel.value.cover)
+      await QueryPostAPI<ResponsePointGoodModel>(POINT_API_URL + 'update-goods', currentGoodsModel.value)
         .then((data) => {
           if (data.code == 200) {
             message.success('成功')
+            if (goods.value.find((g) => g.id == data.data.id)) {
+              goods.value[goods.value.findIndex((g) => g.id == data.data.id)] = data.data
+            } else {
+              goods.value.push(data.data)
+            }
           } else {
             message.error('失败: ' + data.message)
           }
@@ -144,6 +182,11 @@ async function updateGoods(e: MouseEvent) {
       console.log(err)
       message.error('表单验证失败')
     })
+    .finally(() => {
+      isUpdating.value = false
+      showAddGoodsModal.value = false
+      currentGoodsModel.value = {} as PointGoodsModel
+    })
 }
 function OnFileListChange(files: UploadFileInfo[]) {
   if (files.length == 1) {
@@ -154,6 +197,50 @@ function OnFileListChange(files: UploadFileInfo[]) {
     }
   }
 }
+function onUpdateClick(item: ResponsePointGoodModel) {
+  currentGoodsModel.value = {
+    ...item,
+    count: item.count ?? 0,
+    cover: undefined,
+  }
+  fileList.value = [
+    {
+      id: item.cover ?? 'cover',
+      thumbnailUrl: FILE_BASE_URL + item.cover,
+      name: '封面',
+      status: 'finished',
+    },
+  ]
+  showAddGoodsModal.value = true
+}
+function onDeleteClick(item: ResponsePointGoodModel) {
+  const d = dialog.warning({
+    title: '警告',
+    content: '你确定要删除这个礼物吗？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      d.loading = true
+      try {
+        const data = await QueryGetAPI(POINT_API_URL + 'delete-goods', {
+          id: item.id,
+        })
+        if (data.code == 200) {
+          message.success('成功')
+          goods.value = goods.value.filter((g) => g.id != item.id)
+        } else {
+          message.error('失败: ' + data.message)
+          console.error(data.message)
+        }
+      } catch (err) {
+        message.error('失败: ' + err)
+        console.error(err)
+      } finally {
+        d.loading = false
+      }
+    },
+  })
+}
 </script>
 
 <template>
@@ -172,25 +259,44 @@ function OnFileListChange(files: UploadFileInfo[]) {
         <NButton type="primary" @click="showAddGoodsModal = true"> 添加礼物 </NButton>
       </NFlex>
       <NDivider />
+      <NGrid :cols="4">
+        <NGridItem v-for="item in goods" :key="item.id">
+          <PointGoodsItem :goods="item">
+            <template #header-extra>
+              <NDropdown :options="dropDownOptions" trigger="click" @select="(v) => dropDownActions[v].action(item)">
+                <NButton text style="font-size: 24px">
+                  <template #icon>
+                    <NIcon :component="MoreVertical16Filled" />
+                  </template>
+                </NButton>
+              </NDropdown>
+            </template>
+          </PointGoodsItem>
+        </NGridItem>
+      </NGrid>
     </NTabPane>
   </NTabs>
 
-  <NModal v-model:show="showAddGoodsModal" preset="card" style="width: 600px; max-width: 90%" title="添加礼物">
+  <NModal v-model:show="showAddGoodsModal" preset="card" style="width: 600px; max-width: 90%" title="添加/修改礼物信息">
     <NScrollbar style="max-height: 80vh">
-      <NForm ref="formRef" :model="addGoodsModel" :rules="rules">
+      <NForm ref="formRef" :model="currentGoodsModel" :rules="rules" style="width: 95%">
         <NFormItem path="name" label="名称" required>
-          <NInput v-model:value="addGoodsModel.name" placeholder="填写礼物名称" />
+          <NInput v-model:value="currentGoodsModel.name" placeholder="必填, 礼物名称" />
         </NFormItem>
         <NFormItem path="price" label="所需积分" required>
-          <NInputNumber v-model:value="addGoodsModel.price" placeholder="填写需要的积分" min="0" />
+          <NInputNumber v-model:value="currentGoodsModel.price" placeholder="必填, 兑换所需要的积分" min="0" />
         </NFormItem>
-        <NFormItem path="description" label="描述" type="textarea">
+        <NFormItem path="description" label="描述">
-          <NInput v-model:value="addGoodsModel.description" placeholder="填写礼物描述" />
+          <NInput v-model:value="currentGoodsModel.description" placeholder="可选, 礼物描述" />
         </NFormItem>
         <NFormItem path="tags" label="标签">
-          <NSelect v-model:value="addGoodsModel.tags" filterable multiple clearable tag placeholder="可选，按回车确认" :options="existTags" />
+          <NSelect :value="currentGoodsModel.tags?.map((tag) => tag.name)" filterable multiple clearable tag placeholder="可选，输入后按回车添加" :options="existTags" />
         </NFormItem>
-        <NFormItem path="cover" label="封面" type="textarea">
+        <NFormItem path="cover" label="封面">
+          <NFlex v-if="currentGoodsModel.cover">
+            <NText>当前封面: </NText>
+            <NImage :src="FILE_BASE_URL + currentGoodsModel.cover" height="50" object-fit="cover" />
+          </NFlex>
           <NUpload
             :max="1"
             accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.bmp,.tif,.tiff,.jfif,.jpe,.jp,.psd,."
@@ -199,19 +305,19 @@ function OnFileListChange(files: UploadFileInfo[]) {
             v-model:file-list="fileList"
             @update:file-list="OnFileListChange"
           >
-            + 上传图片
+            + {{ currentGoodsModel.cover ? '更换' : '上传' }}封面
           </NUpload>
         </NFormItem>
         <NFormItem path="type" label="类型">
-          <NRadioGroup v-model:value="addGoodsModel.type">
+          <NRadioGroup v-model:value="currentGoodsModel.type">
             <NRadioButton :value="GoodsTypes.Virtual">虚拟礼物</NRadioButton>
             <NRadioButton :value="GoodsTypes.Physical">实体礼物</NRadioButton>
           </NRadioGroup>
         </NFormItem>
-        <template v-if="addGoodsModel.type == GoodsTypes.Physical">
+        <template v-if="currentGoodsModel.type == GoodsTypes.Physical">
           <NFormItem path="collectUrl" label="收货地址">
             <NFlex vertical>
-              <NRadioGroup :value="addGoodsModel.collectUrl == undefined ? 0 : 1" @update:value="(v) => (addGoodsModel.collectUrl = v == 1 ? '' : undefined)">
+              <NRadioGroup :value="currentGoodsModel.collectUrl == undefined ? 0 : 1" @update:value="(v) => (currentGoodsModel.collectUrl = v == 1 ? '' : undefined)">
                 <NRadioButton :value="0">通过本站收集收货地址</NRadioButton>
                 <NRadioButton :value="1">
                   使用站外链接收集地址
@@ -225,12 +331,12 @@ function OnFileListChange(files: UploadFileInfo[]) {
               </NRadioGroup>
             </NFlex>
           </NFormItem>
-          <template v-if="addGoodsModel.collectUrl != undefined">
+          <template v-if="currentGoodsModel.collectUrl != undefined">
             <NFormItem path="url" label="收集链接">
-              <NInput v-model:value="addGoodsModel.collectUrl" placeholder="用于给用户填写自己收货地址的表格的分享链接" />
+              <NInput v-model:value="currentGoodsModel.collectUrl" placeholder="用于给用户填写自己收货地址的表格的分享链接" />
             </NFormItem>
             <NFormItem label="内嵌收集链接">
-              <NCheckbox v-model:checked="addGoodsModel.embedCollectUrl"> 尝试将收集链接嵌入到网页中 </NCheckbox>
+              <NCheckbox v-model:checked="currentGoodsModel.embedCollectUrl"> 尝试将收集链接嵌入到网页中 </NCheckbox>
             </NFormItem>
           </template>
           <template v-else>
@@ -240,20 +346,20 @@ function OnFileListChange(files: UploadFileInfo[]) {
           </template>
         </template>
         <template v-else>
-          <NFormItem path="content" label="礼物内容" required>
+          <NFormItem path="content" required>
-            <NInput
+            <template #label>
-              v-model:value="addGoodsModel.content"
+              礼物内容
-              style="min-height: 100px"
+              <NTooltip>
-              type="textarea"
+                <template #trigger>
-              placeholder="虚拟礼物的具体内容, 网盘链接什么之类的"
+                  <NIcon :component="Info24Filled" />
-              maxlength="10000"
+                </template>
-              show-count
+                虚拟礼物的具体内容, 网盘链接什么之类的
-              autosize
+              </NTooltip>
-              clearable
+            </template>
-            />
+            <NInput v-model:value="currentGoodsModel.content" type="textarea" placeholder="写这里咯" maxlength="10000" show-count clearable />
           </NFormItem>
         </template>
-        <NButton @click="updateGoods" type="primary"> 添加 </NButton>
+        <NButton @click="updateGoods" type="primary" :loading="isUpdating"> 添加 </NButton>
       </NForm>
     </NScrollbar>
   </NModal>