update eventfetcher info display

2025-12-06 18:36:55 +08:00 · 2024-01-20 23:51:21 +08:00
parent 6b20366670
commit 8dd85f205d
15 changed files with 783 additions and 294 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,12 +6,14 @@
          <Suspense>
            <TempComponent>
              <NLayoutContent style="height: 100%" v-if="layout != 'obs'">
-                <ViewerLayout v-if="layout == 'viewer'" />
-                <ManageLayout v-else-if="layout == 'manage'" />
-                <OpenLiveLayout v-else-if="layout == 'open-live'" />
-                <template v-else-if="layout == ''">
-                  <RouterView />
-                </template>
+                <NElement>
+                  <ViewerLayout v-if="layout == 'viewer'" />
+                  <ManageLayout v-else-if="layout == 'manage'" />
+                  <OpenLiveLayout v-else-if="layout == 'open-live'" />
+                  <template v-else-if="layout == ''">
+                    <RouterView />
+                  </template>
+                </NElement>
              </NLayoutContent>
              <RouterView v-else />
            </TempComponent>
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -71,3 +71,12 @@ export function downloadImage(imageSrc: string, filename: string) {
  }
  image.src = imageSrc
 }
+export function getBase64(file: File | undefined | null): Promise<string | undefined> {
+  if (!file) return new Promise((resolve) => resolve(undefined))
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result?.toString().split(',')[1] || undefined)
+    reader.onerror = (error) => reject(error)
+  })
+}
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -43,6 +43,8 @@ export interface AccountInfo extends UserInfo {
  eventFetcherOnline: boolean
  eventFetcherStatus: string
  eventFetcherStatusV3: { [errorCode: string]: string }
+  eventFetcherTodayReceive: number
+  eventFetcherVersion?: string

  nextSendEmailTime?: number
  isServerFetcherOnline: boolean
@@ -525,4 +527,19 @@ export interface ResponsePointGoodModel {
  images: string[]
  status: GoodsStatus
  type: GoodsTypes
+}
+
+export interface PointGoodsModel {
+  id?: number
+  name: string
+  count: number
+  price: number
+  tags: TagInfo[]
+  coverImageBase64?: string
+  status: GoodsStatus
+  type: GoodsTypes
+  collectUrl?: string
+  embedCollectUrl?: boolean
+  description: string
+  content?: string
 }
--- a/src/components/EventFetcherStatusCard.vue
+++ b/src/components/EventFetcherStatusCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { Info24Filled } from '@vicons/fluent'
-import { NAlert, NButton, NDivider, NIcon, NTag, NTooltip } from 'naive-ui'
+import { FlashCheckmark16Filled, Info24Filled } from '@vicons/fluent'
+import { NAlert, NButton, NDivider, NIcon, NTag, NText, NTooltip } from 'naive-ui'
 import { computed } from 'vue'

 const accountInfo = useAccount()
@@ -37,8 +37,18 @@ const status = computed(() => {
        <NButton type="info" size="small" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> 关于 EVENT-FETCHER </NButton>
      </NTooltip>
    </template>
+    <NTooltip v-if="status != 'info'">
+      <template #trigger>
+        <NTag size="small" :color="{ borderColor: 'white', textColor: 'white', color: '#4b6159' }">
+          <NIcon :component="FlashCheckmark16Filled" />
+          {{ accountInfo?.eventFetcherVersion ?? '未知' }}
+        </NTag>
+      </template>
+      你所使用的版本
+    </NTooltip>
+    <NDivider vertical/>
    <NTag :type="status">
-      <template v-if="accountInfo?.eventFetcherStatus">
+      <template v-if="accountInfo?.eventFetcherOnline == true && accountInfo?.eventFetcherStatus">
        此版本已过期, 请更新
        <NTooltip trigger="click">
          <template #trigger>
@@ -48,7 +58,13 @@ const status = computed(() => {
        </NTooltip>
      </template>
      <template v-else>
-        <template v-if="status == 'success'"> 运行中 </template>
+        <template v-if="status == 'success'">
+          运行中 | 今日已接收
+          <NText color="white" strong>
+            {{ accountInfo?.eventFetcherTodayReceive }}
+          </NText>
+          条
+        </template>
        <template v-else-if="status == 'warning'">
          <template v-if="accountInfo?.eventFetcherStatusV3"> 异常: {{ Object.values(accountInfo.eventFetcherStatusV3).join('; ') }} </template>
        </template>
--- a/src/components/VideoCollectInfoCard.vue
+++ b/src/components/VideoCollectInfoCard.vue
@@ -34,6 +34,11 @@ function onClick() {
    <NText depth="3" style="font-size: 13px">
      <NTime :time="item.createAt" />
    </NText>
+    <br/>
+    <NText depth="3" style="font-size: 13px">
+      结束:
+      <NTime :time="item.endAt" />
+    </NText>
    <br />
    <NText depth="3">
      <NEllipsis>
--- a/src/components/manage/PointGoodsItem.vue
+++ b/src/components/manage/PointGoodsItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ResponsePointGoodModel } from '@/api/api-models'
+import { NCard } from 'naive-ui'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  goods: ResponsePointGoodModel
+}>()
+</script>
+
+<template>
+  <NCard>
+    <template #cover>
+      <img :src="goods.cover" />
+    </template>
+    <template #header>
+      {{ goods.name }}
+    </template>
+  </NCard>
+</template>
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -34,6 +34,7 @@ export const FEEDBACK_API_URL = { toString: () => `${BASE_API()}feedback/` }
 export const MUSIC_REQUEST_API_URL = { toString: () => `${BASE_API()}music-request/` }
 export const VTSURU_API_URL = { toString: () => `${BASE_API()}vtsuru/` }
 export const POINT_API_URL = { toString: () => `${BASE_API()}point/` }
+export const BILI_AUTH_API_URL = { toString: () => `${BASE_API()}bili-auth/` }

 export const ScheduleTemplateMap = {
  '': { name: '默认', compoent: defineAsyncComponent(() => import('@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue')) },
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -66,6 +66,15 @@ const routes: Array<RouteRecordRaw> = [
      keepAlive: true,
    },
  },
+  {
+    path: '/bili-auth',
+    name: 'bili-auth',
+    component: () => import('@/views/BiliAuthView.vue'),
+    meta: {
+      title: 'Bilibili 账户认证',
+      keepAlive: true,
+    },
+  },
  manage,
  user,
  obs,
--- a/src/views/BiliAuthView.vue
+++ b/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>
--- a/src/views/ManageLayout.vue
+++ b/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>
--- a/src/views/manage/PointManage.vue
+++ b/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>
--- a/src/views/manage/VideoCollectDetailView.vue
+++ b/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>