update eventfetcher info display

src/views/BiliAuthView.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { GetSelfAccount, useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import { BILI_API_URL, BILI_AUTH_API_URL } from '@/data/constants'
+import { useStorage } from '@vueuse/core'
+import { randomUUID } from 'crypto'
+import { NFlex, NAlert, NButton, NCard, NCountdown, NInput, NInputGroup, NInputNumber, NSpace, NSpin, NText, useMessage, NTimeline, NTimelineItem, NSteps, NStep } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+
+type AuthStartModel = {
+  code: string
+  endAt: number
+  startAt: number
+  targetRoomId: number
+}
+
+const message = useMessage()
+
+const guidKey = useStorage('Bili.Auth.Key', uuidv4())
+const biliToken = useStorage<string>('Bili.Auth.Token', null)
+
+const startModel = ref<AuthStartModel>()
+
+const currentStep = ref(biliToken.value ? 2 : 0)
+
+const isStart = computed(() => {
+  return currentStep.value > 0
+})
+const timeLeft = ref(0)
+const timeOut = ref(false)
+
+const timer = ref()
+
+function onStartVerify() {
+  QueryGetAPI<AuthStartModel>(BILI_AUTH_API_URL + 'start', {
+    key: guidKey.value,
+  }).then((data) => {
+    if (data.code == 200) {
+      message.info('已开始认证流程, 请前往直播间发送认证码')
+      checkStatus()
+      currentStep.value = 1
+      timer.value = setInterval(checkStatus, 2500)
+      startModel.value = data.data
+    }
+  })
+}
+async function checkStatus() {
+  const data = await QueryGetAPI(BILI_AUTH_API_URL + 'status', {
+    key: guidKey.value,
+  })
+  if (data.code == 201) {
+    startModel.value = data.data as AuthStartModel
+    checkTimeLeft()
+    return true
+  } else if (data.code == 200) {
+    clearInterval(timer.value)
+    message.success('认证成功')
+
+    biliToken.value = data.data as string
+    currentStep.value = 2
+
+    return true
+  } else if (data.code == 400 && isStart.value) {
+    timeOut.value = true
+    clearInterval(timer.value)
+    message.error('认证超时')
+    return false
+  }
+  return false
+}
+function checkTimeLeft() {
+  if (startModel.value) {
+    timeLeft.value = startModel.value.endAt - Date.now()
+    if (timeLeft.value <= 0) {
+      timeOut.value = true
+    }
+  }
+}
+function copyCode() {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(startModel.value?.code ?? '')
+    message.success('已复制认证码到剪切板')
+  } else {
+    message.warning('当前环境不支持自动复制, 请手动选择并复制')
+  }
+}
+
+onMounted(async () => {
+  if (!biliToken.value) {
+    if (await checkStatus()) {
+      currentStep.value = 1
+      timer.value = setInterval(checkStatus, 5000)
+    }
+  }
+})
+</script>
+
+<template>
+  <NFlex justify="center" align="center" style="height: 100vh">
+    <NCard embedded style="margin: 20px">
+      <template #header> Bilibili 身份验证 </template>
+      <NFlex :wrap="false">
+        <NSteps :current="currentStep + 1" vertical style="max-width: 300px">
+          <NStep title="准备认证" description="就是开始认证前的一个步骤" />
+          <NStep title="进行认证" description="你需要在指定直播间输入一串验证码来证明自己的身份" />
+          <NStep title="认证完成" description="现在就已经通过了认证!" />
+        </NSteps>
+        <template v-if="currentStep == 1">
+          <NSpace vertical justify="center" align="center" style="width: 100%">
+            <template v-if="!timeOut">
+              <NSpin />
+              <span> 剩余 <NCountdown :duration="timeLeft - Date.now()" /> </span>
+              <NInputGroup>
+                <NInput :value="startModel?.code" :allow-input="() => false" />
+                <NButton @click="copyCode"> 复制认证码 </NButton>
+              </NInputGroup>
+              <NButton type="primary" tag="a" :href="'https://live.bilibili.com/' + startModel?.targetRoomId" target="_blank"> 前往直播间 </NButton>
+            </template>
+            <NAlert v-else type="error">
+              认证超时
+              <NButton
+                @click="
+                  () => {
+                    currentStep = 0
+                    timeOut = false
+                  }
+                "
+                type="error"
+              >
+                重新开始
+              </NButton>
+            </NAlert>
+          </NSpace>
+        </template>
+        <template v-else-if="currentStep == 0">
+          <NSpace vertical justify="center" align="center" style="width: 100%">
+            <NAlert type="info">
+              <NText>
+                点击
+                <NText type="primary" strong> 开始认证 </NText>
+                后请在 2 分钟之内使用
+                <NText strong type="primary"> 需要认证的账户 </NText>
+                在指定的直播间直播间内发送给出的验证码
+              </NText>
+            </NAlert>
+            <NText depth="3" style="font-size: 15px"> 准备好了吗? </NText>
+            <NButton size="large" type="primary" @click="onStartVerify"> 开始认证 </NButton>
+          </NSpace>
+        </template>
+        <template v-else-if="currentStep == 2">
+          <NFlex justify="center" align="center" vertical style="width: 100%">
+            <NAlert type="success"> 你已完成验证! 请妥善保存你的登陆链接, 请勿让其他人获取. 丢失后可以再次通过认证流程获得 </NAlert>
+            <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>
+            </NInputGroup>
+            <NButton @click="" type="primary"> 前往个人中心 </NButton>
+          </NFlex>
+        </template>
+      </NFlex>
+    </NCard>
+  </NFlex>
+</template>

src/views/ManageLayout.vue

@@ -550,7 +550,7 @@ onMounted(() => {
         <RegisterAndLogin style="max-width: 500px; min-width: 350px" />
       </template>
       <template v-else>
-        <NSpin :loading="isLoadingAccount"> 正在请求账户数据... </NSpin>
+        <NSpin :loading="isLoadingAccount" style="overflow: hidden;"> 正在请求账户数据... </NSpin>
       </template>
     </NLayoutContent>
   </template>

src/views/manage/PointManage.vue

@@ -1,19 +1,100 @@
 <script setup lang="ts">
+import { getBase64 } from '@/Utils'
 import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
-import { ResponsePointGoodModel, FunctionTypes } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
+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 { NAlert, NButton, NDivider, NModal, NSwitch, NTabPane, NTabs, NText, useMessage } from 'naive-ui'
-import { ref } from 'vue'
+import { Info24Filled } from '@vicons/fluent'
+import { List } from 'linqts'
+import {
+  NAlert,
+  NButton,
+  NDivider,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NSwitch,
+  NTabPane,
+  NTabs,
+  NText,
+  useMessage,
+  NFlex,
+  NInputNumber,
+  NRadioGroup,
+  NRadio,
+  NTooltip,
+  NIcon,
+  NCheckbox,
+  NRadioButton,
+  NUpload,
+  UploadFileInfo,
+  FormItemRule,
+  NScrollbar,
+  FormValidationError,
+NSelect,
+} from 'naive-ui'
+import { computed, ref } from 'vue'
 
 const message = useMessage()
 const accountInfo = useAccount()
 
 const goods = ref<ResponsePointGoodModel[]>(await getGoods())
+const addGoodsModel = ref<PointGoodsModel>({
+  type: GoodsTypes.Virtual,
+  status: GoodsStatus.Normal,
+} as PointGoodsModel)
+
+const showAddGoodsModal = ref(false)
+
+const isAllowedPrivacyPolicy = ref(false)
+
+const fileList = ref<UploadFileInfo[]>([])
+
+const rules = {
+  name: {
+    required: true,
+    message: '请输入礼物名称',
+  },
+  price: {
+    required: true,
+    message: '请输入礼物价格',
+  },
+  content: {
+    required: true,
+    message: '请输入虚拟礼物的具体内容',
+    validator: (rule: FormItemRule, value: string) => {
+      return addGoodsModel.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
+    },
+  },
+}
+const formRef = ref()
+
+const existTags = computed(() => {
+  //获取所有已存在商品的tags并去重
+  const tempSet = new Set<TagInfo>()
+  for (let i = 0; i < goods.value.length; i++) {
+    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 }
+  })
+})
 
 async function getGoods() {
   try {
-    var resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods')
+    var resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods', {
+      id: accountInfo.value?.id,
+    })
     if (resp.code == 200) {
       return resp.data
     } else {
@@ -37,6 +118,42 @@ async function setFunctionEnable(enable: boolean) {
     message.error('无法' + (enable ? '启用' : '禁用') + '积分系统')
   }
 }
+async function updateGoods(e: MouseEvent) {
+  e.preventDefault()
+  if (!formRef.value) return
+  await formRef.value
+    .validate()
+    .then(async () => {
+      if (fileList.value.length > 0) {
+        addGoodsModel.value.coverImageBase64 = await getBase64(fileList.value[0].file)
+      }
+      await QueryPostAPI<ResponsePointGoodModel>(POINT_API_URL + 'update-goods', addGoodsModel.value)
+        .then((data) => {
+          if (data.code == 200) {
+            message.success('成功')
+          } else {
+            message.error('失败: ' + data.message)
+          }
+        })
+        .catch((err) => {
+          message.error('失败: ' + err)
+          console.error(err)
+        })
+    })
+    .catch((err: unknown) => {
+      console.log(err)
+      message.error('表单验证失败')
+    })
+}
+function OnFileListChange(files: UploadFileInfo[]) {
+  if (files.length == 1) {
+    var file = files[0]
+    if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
+      message.error('文件大小不能超过10MB')
+      fileList.value = []
+    }
+  }
+}
 </script>
 
 <template>
@@ -50,10 +167,94 @@ async function setFunctionEnable(enable: boolean) {
     </NText>
   </NAlert>
   <NTabs>
-    <NTabPane name="goods" tab="商品">
+    <NTabPane name="goods" tab="礼物">
+      <NFlex>
+        <NButton type="primary" @click="showAddGoodsModal = true"> 添加礼物 </NButton>
+      </NFlex>
       <NDivider />
     </NTabPane>
   </NTabs>
 
-  <NModal> </NModal>
+  <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">
+        <NFormItem path="name" label="名称" required>
+          <NInput v-model:value="addGoodsModel.name" placeholder="填写礼物名称" />
+        </NFormItem>
+        <NFormItem path="price" label="所需积分" required>
+          <NInputNumber v-model:value="addGoodsModel.price" placeholder="填写需要的积分" min="0" />
+        </NFormItem>
+        <NFormItem path="description" label="描述" type="textarea">
+          <NInput v-model:value="addGoodsModel.description" placeholder="填写礼物描述" />
+        </NFormItem>
+        <NFormItem path="tags" label="标签">
+          <NSelect v-model:value="addGoodsModel.tags" filterable multiple clearable tag placeholder="可选，按回车确认" :options="existTags" />
+        </NFormItem>
+        <NFormItem path="cover" label="封面" type="textarea">
+          <NUpload
+            :max="1"
+            accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.bmp,.tif,.tiff,.jfif,.jpe,.jp,.psd,."
+            list-type="image-card"
+            :default-upload="false"
+            v-model:file-list="fileList"
+            @update:file-list="OnFileListChange"
+          >
+            + 上传图片
+          </NUpload>
+        </NFormItem>
+        <NFormItem path="type" label="类型">
+          <NRadioGroup v-model:value="addGoodsModel.type">
+            <NRadioButton :value="GoodsTypes.Virtual">虚拟礼物</NRadioButton>
+            <NRadioButton :value="GoodsTypes.Physical">实体礼物</NRadioButton>
+          </NRadioGroup>
+        </NFormItem>
+        <template v-if="addGoodsModel.type == GoodsTypes.Physical">
+          <NFormItem path="collectUrl" label="收货地址">
+            <NFlex vertical>
+              <NRadioGroup :value="addGoodsModel.collectUrl == undefined ? 0 : 1" @update:value="(v) => (addGoodsModel.collectUrl = v == 1 ? '' : undefined)">
+                <NRadioButton :value="0">通过本站收集收货地址</NRadioButton>
+                <NRadioButton :value="1">
+                  使用站外链接收集地址
+                  <NTooltip>
+                    <template #trigger>
+                      <NIcon :component="Info24Filled" />
+                    </template>
+                    用腾讯文档等工具收集收货地址
+                  </NTooltip>
+                </NRadioButton>
+              </NRadioGroup>
+            </NFlex>
+          </NFormItem>
+          <template v-if="addGoodsModel.collectUrl != undefined">
+            <NFormItem path="url" label="收集链接">
+              <NInput v-model:value="addGoodsModel.collectUrl" placeholder="用于给用户填写自己收货地址的表格的分享链接" />
+            </NFormItem>
+            <NFormItem label="内嵌收集链接">
+              <NCheckbox v-model:checked="addGoodsModel.embedCollectUrl"> 尝试将收集链接嵌入到网页中 </NCheckbox>
+            </NFormItem>
+          </template>
+          <template v-else>
+            <NFormItem path="privacy" label="隐私策略" required>
+              <NCheckbox v-model:checked="isAllowedPrivacyPolicy"> 同意本站隐私策略 </NCheckbox>
+            </NFormItem>
+          </template>
+        </template>
+        <template v-else>
+          <NFormItem path="content" label="礼物内容" required>
+            <NInput
+              v-model:value="addGoodsModel.content"
+              style="min-height: 100px"
+              type="textarea"
+              placeholder="虚拟礼物的具体内容, 网盘链接什么之类的"
+              maxlength="10000"
+              show-count
+              autosize
+              clearable
+            />
+          </NFormItem>
+        </template>
+        <NButton @click="updateGoods" type="primary"> 添加 </NButton>
+      </NForm>
+    </NScrollbar>
+  </NModal>
 </template>

src/views/manage/VideoCollectDetailView.vue

@@ -153,7 +153,7 @@ const gridRender = (type: 'padding' | 'reject' | 'accept') => {
                   cover: () =>
                     h('div', { style: 'position: relative;height: 150px;' }, [
                       h('img', {
-                        src: v.video.cover,
+                        src: v.video.cover.replace('http://', 'https://'),
                         referrerpolicy: 'no-referrer',
                         style: 'max-height: 100%; object-fit: contain;cursor: pointer',
                         onClick: () => window.open('https://www.bilibili.com/video/' + v.info.bvid, '_blank'),
@@ -307,7 +307,7 @@ function saveQRCode() {
       <NButton type="success" size="small" @click="shareModalVisiable = true"> 分享 </NButton>
       <NButton type="info" size="small" @click="editModalVisiable = true"> 更新 </NButton>
       <NButton type="warning" size="small" @click="closeTable"> {{ videoDetail.table.isFinish ? '开启表' : '关闭表' }} </NButton>
-      <NButton size="small" @click="$router.push({ name: 'video-collect-list', params: { id: videoDetail.table.id } })"> 结果表 </NButton>
+      <NButton size="small" @click="$router.push({ name: 'video-collect-list', params: { id: videoDetail.table.id } })"> 结果页面 </NButton>
       <NPopconfirm :on-positive-click="deleteTable">
         <template #trigger>
           <NButton type="error" size="small"> 删除 </NButton>