add question display page

2025-12-06 18:36:55 +08:00 · 2024-02-20 22:03:49 +08:00
parent e4c8839491
commit 6bf003d18b
21 changed files with 1427 additions and 573 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,14 +2,8 @@ module.exports = {
  root: true,
  env: {
    node: true,
-    'vite/config': true, // 添加Vite环境支持
  },
-  extends: [
-    '@vue/typescript/recommended',
-    'plugin:vue/vue3-essential',
-    'prettier',
-    '@vue/eslint-config-typescript',
-  ],
+  extends: ['@vue/typescript/recommended', 'plugin:vue/vue3-essential', 'prettier', '@vue/eslint-config-typescript'],
  parserOptions: {
    ecmaVersion: 'latest',
  },
@@ -17,6 +11,8 @@ module.exports = {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+    '@typescript-eslint/no-explicit-any': ['off'],
+    '@typescript-eslint/no-var-requires': ['warn'],
  },
  overrides: [
    {
--- a/package.json
+++ b/package.json
@@ -8,53 +8,53 @@
    "lint": "vite lint"
  },
  "dependencies": {
-    "@types/node": "^20.11.5",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@types/node": "^20.11.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
    "@vicons/fluent": "^0.12.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.0.4",
    "@vueuse/core": "^10.7.2",
    "@vueuse/router": "^10.7.2",
-    "date-fns": "^3.2.0",
+    "date-fns": "^3.3.1",
    "easy-speech": "^2.3.1",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
    "eslint": "^8.56.0",
    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-oxlint": "^0.2.1",
+    "eslint-plugin-oxlint": "^0.2.3",
    "eslint-plugin-prettier": "^5.1.3",
-    "fast-xml-parser": "^4.3.3",
+    "fast-xml-parser": "^4.3.4",
    "file-saver": "^2.0.5",
    "grapheme-splitter": "^1.0.4",
    "html2canvas": "^1.4.1",
    "linqts": "^1.15.0",
    "mitt": "^3.0.1",
    "pinia": "^2.1.7",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
    "qrcode.vue": "^3.4.1",
    "queue-typescript": "^1.0.1",
    "unplugin-vue-markdown": "^0.26.0",
    "uuid": "^9.0.1",
-    "vite": "^5.0.12",
+    "vite": "^5.1.3",
    "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.15",
+    "vue": "^3.4.19",
    "vue-echarts": "^6.6.8",
    "vue-request": "^2.0.4",
    "vue-router": "^4.2.5",
-    "vue-turnstile": "^1.0.7",
+    "vue-turnstile": "^1.0.8",
    "vue3-aplayer": "^1.7.3",
-    "vue3-marquee": "^4.2.0-beta.1",
+    "vue3-marquee": "^4.2.0",
    "vueuc": "^0.4.58",
-    "worker-timers": "^7.1.1",
+    "worker-timers": "^7.1.2",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@types/eslint": "^8.56.2",
-    "@types/uuid": "^9",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/parser": "^7.0.1",
    "@vicons/ionicons5": "^0.12.0",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint-plugin-vue": "^9.21.1",
    "naive-ui": "^2.37.3",
    "stylus": "^0.62.0",
    "typescript": "^5.3.3"
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -5,9 +5,11 @@ import { isSameDay } from 'date-fns'
 import { createDiscreteApi } from 'naive-ui'
 import { ref } from 'vue'
 import { APIRoot, AccountInfo, FunctionTypes } from './api-models'
+import { useRoute } from 'vue-router'

 export const ACCOUNT = ref<AccountInfo>()
 export const isLoadingAccount = ref(true)
+const route = useRoute()

 const { message } = createDiscreteApi(['message'])
 const cookie = useLocalStorage('JWT_Token', '')
@@ -40,7 +42,8 @@ export async function GetSelfAccount() {
 }
 export function UpdateAccountLoop() {
  setInterval(() => {
-    if (ACCOUNT.value) {
+    if (ACCOUNT.value && route?.name != 'question-display') {
+      // 防止在问题详情页刷新
      GetSelfAccount()
    }
  }, 60 * 1000)
@@ -93,7 +96,7 @@ export async function DelBiliBlackList(id: number): Promise<APIRoot<unknown>> {
    id: id,
  })
 }
-export function downloadConfigDirect<T>(name: string) {
+export function downloadConfigDirect(name: string) {
  return QueryGetAPI<string>(VTSURU_API_URL + 'get-config', {
    name: name,
  })
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -91,6 +91,7 @@ export interface UserSetting {
  songRequest: Setting_SongRequest
  queue: Setting_Queue
  point: Setting_Point
+  questionDisplay: Setting_QuestionDisplay

  enableFunctions: FunctionTypes[]

@@ -169,6 +170,32 @@ export interface Setting_Point {
  giftPointPercent: number // double maps to number in TypeScript
  giftAllowType: SettingPointGiftAllowType
 }
+export interface Setting_QuestionDisplay {
+  font?: string // Optional string, with a maximum length of 30 characters
+  nameFont: string // Optional string, with a maximum length of 30 characters
+  fontSize: number // Default is 20
+  fontWeight: number
+  nameFontSize: number // Default is 20
+  lineSpacing: number // Default is 0, 行间距
+  fontColor?: string // Optional string, must exactly be 6 characters long
+  nameFontColor?: string // Optional string, must exactly be 6 characters long
+  nameFontWeight?: number
+  backgroundColor?: string // Optional string, must exactly be 6 characters long
+  showUserName: boolean // Default is true
+  align: QuestionDisplayAlign // Default is QuestionDisplayAlign.Left, 对齐
+  showImage: boolean // Default is false
+
+  borderColor?: string
+  borderWidth?: number
+
+  currentQuestion?: number
+}
+
+export enum QuestionDisplayAlign {
+  Left,
+  Right,
+  Center,
+}
 export enum SettingPointGiftAllowType {
  All,
  WhiteList,
--- a/src/components/QuestionItem.vue
+++ b/src/components/QuestionItem.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { QAInfo } from '@/api/api-models'
+import { NCard, NDivider, NFlex, NImage, NTag, NText, NTime, NTooltip } from 'naive-ui'
+
+const props = defineProps<{
+  item: QAInfo
+}>()
+</script>
+
+<template>
+  <NCard v-if="item" :embedded="!item.isReaded" hoverable size="small" :bordered="false">
+    <template #header>
+      <NFlex :size="0" align="center" >
+        <template v-if="!item.isReaded">
+          <NTag type="warning" size="tiny"> 未读 </NTag>
+          <NDivider vertical />
+        </template>
+        <NText :depth="item.isAnonymous ? 3 : 1" style="margin-top: 3px">
+          {{ item.isAnonymous ? '匿名用户' : item.sender?.name }}
+        </NText>
+        <NTag v-if="item.isSenderRegisted" size="small" type="info" :bordered="false" style="margin-left: 5px">
+          已注册
+        </NTag>
+        <NTag v-if="item.isPublic" size="small" type="success" :bordered="false" style="margin-left: 5px"> 公开 </NTag>
+        <NDivider vertical />
+        <NText depth="3" style="font-size: small">
+          <NTooltip>
+            <template #trigger>
+              <NTime :time="item.sendAt" :to="Date.now()" type="relative" />
+            </template>
+            <NTime :time="item.sendAt" />
+          </NTooltip>
+        </NText>
+      </NFlex>
+    </template>
+    <template #footer>
+      <slot name="footer" :item="item"></slot>
+    </template>
+    <template #header-extra>
+      <slot name="header-extra" :item="item"></slot>
+    </template>
+    <template v-if="item.question?.image">
+      <NImage v-if="item.question?.image" :src="item.question.image" height="100" lazy />
+      <br />
+    </template>
+
+    <NText style="">
+      {{ item.question?.message }}
+    </NText>
+  </NCard>
+</template>
--- a/src/components/QuestionItems.vue
+++ b/src/components/QuestionItems.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { QAInfo } from '@/api/api-models'
+import { NCard, NDivider, NFlex, NImage, NList, NListItem, NTag, NText, NTime, NTooltip } from 'naive-ui'
+import QuestionItem from './QuestionItem.vue'
+
+const props = defineProps<{
+  questions: QAInfo[]
+}>()
+</script>
+
+<template>
+  <NList bordered>
+    <NListItem v-for="item in questions" :key="item?.id">
+      <QuestionItem :item="item">
+        <template #footer>
+          <slot name="footer" :item="item"></slot>
+        </template>
+        <template #header-extra>
+          <slot name="header-extra" :item="item"></slot>
+        </template>
+      </QuestionItem>
+    </NListItem>
+  </NList>
+</template>
--- a/src/mitt.ts
+++ b/src/mitt.ts
@@ -9,9 +9,7 @@ declare type MittType<T = any> = {
  onMusicRequestPlayerEnded: {
    music: Music
  }
-  onMusicRequestPlayNextWaitingMusic: {
-    
-  }
+  onMusicRequestPlayNextWaitingMusic: never
 };
 // 类型
 const emitter: Emitter<MittType> = mitt<MittType>()
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import manage from './manage'
 import user from './user'
 import obs from './obs'
 import open_live from './open_live'
+import singlePage from './singlePage'

 const routes: Array<RouteRecordRaw> = [
  {
@@ -96,6 +97,7 @@ const routes: Array<RouteRecordRaw> = [
      title: '页面不存在',
    },
  },
+  ...singlePage,
 ]

 const router = createRouter({
@@ -106,7 +108,7 @@ router.beforeEach((to, from, next) => {
  useLoadingBarStore().loadingBar?.start()
  next()
 })
-router.afterEach((to, from) => {
+router.afterEach(() => {
  const loadingBar = useLoadingBarStore().loadingBar
  loadingBar?.finish()
 })
--- a/src/router/obs.ts
+++ b/src/router/obs.ts
@@ -34,5 +34,13 @@ export default {
        title: '弹幕排队 (播放',
      },
    },
+    {
+      path: 'question-display',
+      name: 'obs-question-display',
+      component: () => import('@/views/obs/QuestionDisplayOBS.vue'),
+      meta: {
+        title: '棉花糖展示',
+      },
+    },
  ],
-  }
+}
--- a/src/router/singlePage.ts
+++ b/src/router/singlePage.ts
@@ -0,0 +1,10 @@
+export default [
+  {
+    path: '/question-display',
+    name: 'question-display',
+    component: () => import('@/views/single/QuestionDisplay.vue'),
+    meta: {
+      title: '棉花糖展示页',
+    },
+  },
+]
--- a/src/store/useAuthStore.ts
+++ b/src/store/useAuthStore.ts
@@ -106,7 +106,7 @@ export const useAuthStore = defineStore('BiliAuth', () => {
      return []
    }
    try {
-      var resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods', {
+      const resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods', {
        id: id,
      })
      if (resp.code == 200) {
--- a/src/store/useQuestionBox.ts
+++ b/src/store/useQuestionBox.ts
@@ -0,0 +1,245 @@
+import { useAccount } from '@/api/account'
+import { QAInfo } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { ACCOUNT_API_URL, QUESTION_API_URL } from '@/data/constants'
+import { List } from 'linqts'
+import { useMessage } from 'naive-ui'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useQuestionBox = defineStore('QuestionBox', () => {
+  const isLoading = ref(false)
+  const isRepling = ref(false)
+  const isChangingPublic = ref(false)
+
+  const accountInfo = useAccount()
+
+  const recieveQuestions = ref<QAInfo[]>([])
+  const sendQuestions = ref<QAInfo[]>([])
+
+  const onlyFavorite = ref(false)
+  const onlyPublic = ref(false)
+  const onlyUnread = ref(false)
+
+  const recieveQuestionsFiltered = computed(() => {
+    const result = recieveQuestions.value.filter((q) => {
+      /*if (q.id == displayQuestion.value?.id) {
+        return false
+      }*/
+      return (
+        (q.isFavorite || !onlyFavorite.value) && (q.isPublic || !onlyPublic.value) && (!q.isReaded || !onlyUnread.value)
+      )
+    })
+    return result
+    //displayQuestion排在最前面
+    //return displayQuestion.value ? [displayQuestion.value, ...result] : result
+  })
+  const currentQuestion = ref<QAInfo>()
+  const displayQuestion = ref<QAInfo>()
+
+  let isRevieveGetted = false
+  let isSendGetted = false
+
+  const message = useMessage()
+
+  async function GetRecieveQAInfo() {
+    isLoading.value = true
+    await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-recieve')
+      .then((data) => {
+        if (data.code == 200) {
+          if (data.data.length > 0) {
+            recieveQuestions.value = new List(data.data)
+              .OrderBy((d) => d.isReaded)
+              //.ThenByDescending(d => d.isFavorite)
+              .ThenByDescending((d) => d.sendAt)
+              .ToArray()
+            const displayId = accountInfo.value?.settings.questionDisplay.currentQuestion
+            if (displayId && displayQuestion.value?.id != displayId) {
+              displayQuestion.value = recieveQuestions.value.find((q) => q.id == displayId)
+            }
+          }
+          message.success('共收取 ' + data.data.length + ' 条提问')
+          isRevieveGetted = true
+        } else {
+          message.error(data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('发生错误: ' + err)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  }
+  async function GetSendQAInfo() {
+    isLoading.value = true
+    await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-send')
+      .then((data) => {
+        if (data.code == 200) {
+          sendQuestions.value = data.data
+          message.success('共发送 ' + data.data.length + ' 条提问')
+        } else {
+          message.error(data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('发生错误')
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  }
+  async function reply(id: number, msg: string) {
+    isRepling.value = true
+    await QueryPostAPI<QAInfo>(QUESTION_API_URL + 'reply', {
+      Id: id,
+      Message: msg,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          var index = recieveQuestions.value.findIndex((q) => q.id == id)
+          if (index > -1) {
+            recieveQuestions.value[index] = data.data
+          }
+          message.success('回复成功')
+          currentQuestion.value = undefined
+          //replyModalVisiable.value = false
+        } else {
+          message.error('发送失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('发送失败')
+      })
+      .finally(() => {
+        isRepling.value = false
+      })
+  }
+  async function read(question: QAInfo, read: boolean) {
+    await QueryGetAPI(QUESTION_API_URL + 'read', {
+      id: question.id,
+      read: read ? 'true' : 'false',
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          question.isReaded = read
+          if (read && displayQuestion.value?.id == question.id) {
+            setCurrentQuestion(question) //取消设为当前展示的问题
+          }
+        } else {
+          message.error('修改失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('修改失败')
+      })
+  }
+  async function favorite(question: QAInfo, fav: boolean) {
+    await QueryGetAPI(QUESTION_API_URL + 'favorite', {
+      id: question.id,
+      favorite: fav,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          question.isFavorite = fav
+        } else {
+          message.error('修改失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('修改失败')
+      })
+  }
+  async function setPublic(pub: boolean) {
+    isChangingPublic.value = true
+    await QueryGetAPI(QUESTION_API_URL + 'public', {
+      id: currentQuestion.value?.id,
+      public: pub,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          if (currentQuestion.value) currentQuestion.value.isPublic = pub
+          message.success('已修改公开状态')
+        } else {
+          message.error('修改失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('修改失败')
+      })
+      .finally(() => {
+        isChangingPublic.value = false
+      })
+  }
+  async function blacklist(question: QAInfo) {
+    await QueryGetAPI(ACCOUNT_API_URL + 'black-list/add', {
+      id: question.sender.id,
+    })
+      .then(async (data) => {
+        if (data.code == 200) {
+          await QueryGetAPI(QUESTION_API_URL + 'del', {
+            id: question.id,
+          }).then((data) => {
+            if (data.code == 200) {
+              message.success('已拉黑 ' + question.sender.name)
+            } else {
+              message.error('修改失败: ' + data.message)
+            }
+          })
+        } else {
+          message.error('拉黑失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('拉黑失败')
+      })
+  }
+  async function setCurrentQuestion(item: QAInfo) {
+    const isCurrent = displayQuestion.value?.id == item.id
+    if (!isCurrent) {
+      displayQuestion.value = item
+    } else {
+      displayQuestion.value = undefined
+    }
+    try {
+      const data = await QueryGetAPI(
+        QUESTION_API_URL + 'set-current',
+        isCurrent
+          ? null
+          : {
+              id: item.id,
+            },
+      )
+      if (data.code == 200) {
+        //message.success('设置成功')
+      } else {
+        message.error('设置失败: ' + data.message)
+      }
+    } catch (err) {
+      message.error('设置失败:' + err)
+    }
+  }
+
+  return {
+    currentQuestion,
+    isLoading,
+    isRevieveGetted,
+    isRepling,
+    isChangingPublic,
+    recieveQuestions,
+    recieveQuestionsFiltered,
+    sendQuestions,
+    onlyFavorite,
+    onlyPublic,
+    onlyUnread,
+    displayQuestion,
+    GetRecieveQAInfo,
+    GetSendQAInfo,
+    reply,
+    read,
+    favorite,
+    setPublic,
+    blacklist,
+    setCurrentQuestion,
+  }
+})
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -31,6 +31,7 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
          </NSpace>
          <NDivider title-placement="left"> 更新日志 </NDivider>
          <NTimeline>
+            <NTimelineItem type="info" title="功能更新" content="棉花糖添加展示页面" time="2024-2-20" />
            <NTimelineItem type="info" title="功能更新" content="歌单新增从文件导入" time="2024-2-10" />
            <NTimelineItem type="info" title="功能更新" content="排队的OBS组件添加设置项" time="2024-1-27" />
            <NTimelineItem type="warning" title="Bug修复" content="修复点歌会直接跳到下一首的问题 (怎么没人跟我说" time="2024-1-22" />
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -544,7 +544,7 @@ onMounted(() => {
      </NLayoutSider>
      <NLayout>
        <NScrollbar :style="`height: calc(100vh - 50px - ${aplayerHeight}px)`">
-          <NLayoutContent style="box-sizing: border-box; padding: 20px; min-width: 300px">
+          <NLayoutContent style="box-sizing: border-box; padding: 20px; min-width: 300px; height: 100%">
            <RouterView v-if="accountInfo?.isEmailVerified" v-slot="{ Component, route }">
              <KeepAlive>
                <DanmakuLayout v-if="route.meta.danmaku" :component="Component" />
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -59,7 +59,7 @@ const menuOptions = ref<MenuOption[]>()
 async function RequestBiliUserData() {
  await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${userInfo.value?.biliId}`).then(
    async (respone) => {
-      let data = await respone.json()
+      const data = await respone.json()
      if (data.code == 0) {
        biliUserInfo.value = data.card
      } else {
--- a/src/views/manage/LotteryView.vue
+++ b/src/views/manage/LotteryView.vue
@@ -83,7 +83,7 @@ const showModal = ref(false)
 const inputDynamic = ref<string>()
 const inputDynamicId = computed(() => {
  try {
-    var id = BigInt(inputDynamic.value ?? '')
+    const id = BigInt(inputDynamic.value ?? '')
    return id
  } catch {
    try {
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -2,18 +2,19 @@
 import { copyToClipboard, downloadImage } from '@/Utils'
 import { SaveAccountSettings, useAccount } from '@/api/account'
 import { QAInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { ACCOUNT_API_URL, QUESTION_API_URL } from '@/data/constants'
+import { QueryGetAPI } from '@/api/query'
+import { QUESTION_API_URL } from '@/data/constants'
 import router from '@/router'
-import { Heart, HeartOutline } from '@vicons/ionicons5'
+import { Heart, HeartOutline, SwapHorizontal } from '@vicons/ionicons5'
 import { saveAs } from 'file-saver'
 import html2canvas from 'html2canvas'
-import { List } from 'linqts'
 import {
+  NAffix,
  NButton,
  NCard,
  NCheckbox,
  NDivider,
+  NFlex,
  NIcon,
  NImage,
  NInput,
@@ -21,8 +22,10 @@ import {
  NList,
  NListItem,
  NModal,
+  NScrollbar,
  NSpace,
  NSpin,
+  NSplit,
  NSwitch,
  NTabPane,
  NTabs,
@@ -35,195 +38,42 @@ import {
 import QrcodeVue from 'qrcode.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import QuestionDisplay from './QuestionDisplaySettings.vue'
+import { useElementSize } from '@vueuse/core'
+import QuestionItem from '@/components/QuestionItems.vue'
+import { ArrowCircleRight12Filled } from '@vicons/fluent'
+import { useQuestionBox } from '@/store/useQuestionBox'

 const accountInfo = useAccount()
 const route = useRoute()
-
-const recieveQuestions = ref<QAInfo[]>([])
-const recieveQuestionsFiltered = computed(() => {
-  return recieveQuestions.value.filter((q) => {
-    return (
-      (q.isFavorite || !onlyFavorite.value) && (q.isPublic || !onlyPublic.value) && (!q.isReaded || !onlyUnread.value)
-    )
-  })
-})
-const sendQuestions = ref<QAInfo[]>([])
 const message = useMessage()

+const useQB = useQuestionBox()
+
 const selectedTabItem = ref(route.query.send ? '1' : '0')
-const isRepling = ref(false)
-const onlyFavorite = ref(false)
-const onlyPublic = ref(false)
-const onlyUnread = ref(false)
-const isLoading = ref(true)
-const isChangingPublic = ref(false)

 const replyModalVisiable = ref(false)
 const shareModalVisiable = ref(false)
-const currentQuestion = ref<QAInfo>()
 const replyMessage = ref()

+const showSettingCard = ref(true)
+
 const shareCardRef = ref()
 const shareUrl = computed(() => 'https://vtsuru.live/user/' + accountInfo.value?.name + '/question-box')

-async function GetRecieveQAInfo() {
-  isLoading.value = true
-  await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-recieve')
-    .then((data) => {
-      if (data.code == 200) {
-        if (data.data.length > 0) {
-          recieveQuestions.value = new List(data.data)
-            .OrderBy((d) => d.isReaded)
-            //.ThenByDescending(d => d.isFavorite)
-            .ThenByDescending((d) => d.sendAt)
-            .ToArray()
-        }
-        message.success('共收取 ' + data.data.length + ' 条提问')
-        isRevieveGetted = true
-      } else {
-        message.error(data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('发生错误')
-    })
-    .finally(() => {
-      isLoading.value = false
-    })
-}
-async function GetSendQAInfo() {
-  isLoading.value = true
-  await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-send')
-    .then((data) => {
-      if (data.code == 200) {
-        sendQuestions.value = data.data
-        message.success('共发送 ' + data.data.length + ' 条提问')
-      } else {
-        message.error(data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('发生错误')
-    })
-    .finally(() => {
-      isLoading.value = false
-    })
-}
-async function reply() {
-  isRepling.value = true
-  await QueryPostAPI<QAInfo>(QUESTION_API_URL + 'reply', {
-    Id: currentQuestion.value?.id,
-    Message: replyMessage.value,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        var index = recieveQuestions.value.findIndex((q) => q.id == currentQuestion.value?.id)
-        if (index > -1) {
-          recieveQuestions.value[index] = data.data
-        }
-        message.success('回复成功')
-        currentQuestion.value = undefined
-        replyModalVisiable.value = false
-      } else {
-        message.error('发送失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('发送失败')
-    })
-    .finally(() => {
-      isRepling.value = false
-    })
-}
-async function read(question: QAInfo, read: boolean) {
-  await QueryGetAPI(QUESTION_API_URL + 'read', {
-    id: question.id,
-    read: read ? 'true' : 'false',
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        question.isReaded = read
-      } else {
-        message.error('修改失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('修改失败')
-    })
-}
-async function favorite(question: QAInfo, fav: boolean) {
-  await QueryGetAPI(QUESTION_API_URL + 'favorite', {
-    id: question.id,
-    favorite: fav,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        question.isFavorite = fav
-      } else {
-        message.error('修改失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('修改失败')
-    })
-}
-async function setPublic(pub: boolean) {
-  isChangingPublic.value = true
-  await QueryGetAPI(QUESTION_API_URL + 'public', {
-    id: currentQuestion.value?.id,
-    public: pub,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        if (currentQuestion.value) currentQuestion.value.isPublic = pub
-        message.success('已修改公开状态')
-      } else {
-        message.error('修改失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('修改失败')
-    })
-    .finally(() => {
-      isChangingPublic.value = false
-    })
-}
-async function blacklist(question: QAInfo) {
-  await QueryGetAPI(ACCOUNT_API_URL + 'black-list/add', {
-    id: question.sender.id,
-  })
-    .then(async (data) => {
-      if (data.code == 200) {
-        await QueryGetAPI(QUESTION_API_URL + 'del', {
-          id: question.id,
-        }).then((data) => {
-          if (data.code == 200) {
-            message.success('已拉黑 ' + question.sender.name)
-          } else {
-            message.error('修改失败: ' + data.message)
-          }
-        })
-      } else {
-        message.error('拉黑失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('拉黑失败')
-    })
-}
 let isRevieveGetted = false
 let isSendGetted = false
 async function onTabChange(value: string) {
  if (value == '0' && !isRevieveGetted) {
-    await GetRecieveQAInfo()
+    await useQB.GetRecieveQAInfo()
    isRevieveGetted = true
  } else if (value == '1' && !isSendGetted) {
-    await GetSendQAInfo()
+    await useQB.GetSendQAInfo()
    isSendGetted = true
  }
 }
 function onOpenModal(question: QAInfo) {
-  currentQuestion.value = question
+  useQB.currentQuestion = question
  replyMessage.value = question.answer?.message
  replyModalVisiable.value = true
 }
@@ -258,7 +108,7 @@ function saveQRCode() {
 }
 async function saveSettings() {
  try {
-    isLoading.value = true
+    useQB.isLoading = true
    const data = await SaveAccountSettings()
    if (data.code == 200) {
      message.success('保存成功')
@@ -268,15 +118,21 @@ async function saveSettings() {
  } catch (error) {
    message.error('保存失败:' + error)
  }
-  isLoading.value = false
+  useQB.isLoading = false
 }

+const parentRef = ref<HTMLElement | null>(null)
+
 onMounted(() => {
  if (selectedTabItem.value == '0') {
-    GetRecieveQAInfo()
+    useQB.GetRecieveQAInfo()
  } else {
-    GetSendQAInfo()
+    useQB.GetSendQAInfo()
  }
+
+  useQB.displayQuestion = useQB.recieveQuestions.find(
+    (s) => s.id == accountInfo.value?.settings.questionDisplay.currentQuestion,
+  )
 })
 </script>

@@ -286,89 +142,63 @@ onMounted(() => {
    <NButton type="primary" @click="shareModalVisiable = true" secondary> 分享 </NButton>
  </NSpace>
  <NDivider style="margin: 10px 0 10px 0" />
-  <NSpin v-if="isLoading" show />
+  <NSpin v-if="useQB.isLoading" show />
  <NTabs v-else animated @update:value="onTabChange" v-model:value="selectedTabItem">
    <NTabPane tab="我收到的" name="0">
-      <NCheckbox v-model:checked="onlyFavorite"> 只显示收藏 </NCheckbox>
-      <NCheckbox v-model:checked="onlyPublic"> 只显示公开 </NCheckbox>
-      <NCheckbox v-model:checked="onlyUnread"> 只显示未读 </NCheckbox>
-      <NList :bordered="false">
-        <NListItem v-for="item in recieveQuestionsFiltered" :key="item.id">
-          <NCard :embedded="!item.isReaded" hoverable size="small">
-            <template #header>
-              <NSpace :size="0" align="center">
-                <template v-if="!item.isReaded">
-                  <NTag type="warning" size="tiny"> 未读 </NTag>
+      <NButton @click="$router.push({ name: 'question-display' })" type="primary">
+        打开展示页
+      </NButton>
      <NDivider vertical />
-                </template>
-                <NText :depth="item.isAnonymous ? 3 : 1" style="margin-top: 3px">
-                  {{ item.isAnonymous ? '匿名用户' : item.sender?.name }}
-                </NText>
-                <NTag v-if="item.isSenderRegisted" size="small" type="info" :bordered="false" style="margin-left: 5px">
-                  已注册
-                </NTag>
-                <NTag v-if="item.isPublic" size="small" type="success" :bordered="false" style="margin-left: 5px">
-                  公开
-                </NTag>
-                <NDivider vertical />
-                <NText depth="3" style="font-size: small">
+      <NCheckbox v-model:checked="useQB.onlyFavorite"> 只显示收藏 </NCheckbox>
+      <NCheckbox v-model:checked="useQB.onlyPublic"> 只显示公开 </NCheckbox>
+      <NCheckbox v-model:checked="useQB.onlyUnread"> 只显示未读 </NCheckbox>
+      <NDivider style="margin: 10px 0 10px 0" />
+      <QuestionItem :questions="useQB.recieveQuestionsFiltered">
+        <template #footer="{ item }">
+          <NSpace>
            <NTooltip>
              <template #trigger>
-                      <NTime :time="item.sendAt" :to="Date.now()" type="relative" />
+                <NButton
+                  @click="useQB.setCurrentQuestion(item)"
+                  size="small"
+                  :type="useQB.displayQuestion?.id == item.id ? 'primary' : 'default'"
+                >
+                  <template #icon>
+                    <NIcon :component="ArrowCircleRight12Filled" />
                  </template>
-                    <NTime :time="item.sendAt" />
+                </NButton>
+              </template>
+              设为当前展示的提问
            </NTooltip>
-                </NText>
-              </NSpace>
-            </template>
-            <template #footer>
-              <NSpace>
-                <NButton v-if="!item.isReaded" size="small" @click="read(item, true)" type="success">
+            <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="success">
              设为已读
            </NButton>
-                <NButton size="small" @click="favorite(item, !item.isFavorite)">
+            <NButton v-else size="small" @click="useQB.read(item, false)" type="warning">重设为未读</NButton>
+            <NButton size="small" @click="useQB.favorite(item, !item.isFavorite)">
              <template #icon>
-                    <NIcon
-                      :component="item.isFavorite ? Heart : HeartOutline"
-                      :color="item.isFavorite ? '#dd484f' : ''"
-                    />
+                <NIcon :component="item.isFavorite ? Heart : HeartOutline" :color="item.isFavorite ? '#dd484f' : ''" />
              </template>
              收藏
            </NButton>
-                <NTooltip>
+            <!-- <NTooltip>
                        <template #trigger>
                          <NButton size="small"> 举报 </NButton>
                        </template>
                        暂时还没写
-                </NTooltip>
-                <NButton size="small" @click="blacklist(item)"> 拉黑 </NButton>
+                      </NTooltip> -->
+            <NButton size="small" @click="useQB.blacklist(item)"> 拉黑 </NButton>
          </NSpace>
        </template>
-            <template #header-extra>
-              <NButton
-                @click="onOpenModal(item)"
-                :type="item.isReaded ? 'default' : 'primary'"
-                :secondary="item.isReaded"
-              >
+        <template #header-extra="{ item }">
+          <NButton @click="onOpenModal(item)" :type="item.isReaded ? 'default' : 'info'" :secondary="item.isReaded">
            {{ item.answer ? '查看回复' : '回复' }}
          </NButton>
        </template>
-            <template v-if="item.question?.image">
-              <NImage v-if="item.question?.image" :src="item.question.image" height="100" lazy />
-              <br />
-            </template>
-
-            <NText style="">
-              {{ item.question?.message }}
-            </NText>
-            <NButton text @click="onOpenModal(item)" style="max-width: 100%; word-wrap: break-word"> </NButton>
-          </NCard>
-        </NListItem>
-      </NList>
+      </QuestionItem>
    </NTabPane>
-    <NTabPane tab="我发送的" name="1">
+    <NTabPane ref="parentRef" tab="我发送的" name="1">
      <NList>
-        <NListItem v-for="item in sendQuestions" :key="item.id">
+        <NListItem v-for="item in useQB.sendQuestions" :key="item.id">
          <NCard hoverable size="small">
            <template #header>
              <NSpace :size="0" align="center">
@@ -409,7 +239,7 @@ onMounted(() => {
      </NList>
    </NTabPane>
    <NTabPane v-if="accountInfo" tab="设置" name="2">
-      <NSpin :show="isLoading">
+      <NSpin :show="useQB.isLoading">
        <NCheckbox
          v-model:checked="accountInfo.settings.questionBox.allowUnregistedUser"
          @update:checked="saveSettings"
@@ -437,15 +267,20 @@ onMounted(() => {
        show-count
        clearable
      />
-      <NSpin :show="isChangingPublic">
-        <NCheckbox @update:checked="(v) => setPublic(v)" :default-checked="currentQuestion?.isPublic">
+      <NSpin :show="useQB.isChangingPublic">
+        <NCheckbox @update:checked="(v) => useQB.setPublic(v)" :default-checked="useQB.currentQuestion?.isPublic">
          公开可见
        </NCheckbox>
      </NSpin>
    </NSpace>
    <NDivider style="margin: 10px 0 10px 0" />
-    <NButton :loading="isRepling" @click="reply" type="primary" :secondary="currentQuestion?.answer ? true : false">
-      {{ currentQuestion?.answer ? '修改' : '发送' }}
+    <NButton
+      :loading="useQB.isRepling"
+      @click="useQB.reply(useQB.currentQuestion?.id ?? -1, replyMessage)"
+      type="primary"
+      :secondary="useQB.currentQuestion?.answer ? true : false"
+    >
+      {{ useQB.currentQuestion?.answer ? '修改' : '发送' }}
    </NButton>
  </NModal>
  <NModal v-model:show="shareModalVisiable" preset="card" title="分享" style="width: 600px">
--- a/src/views/manage/QuestionDisplayCard.vue
+++ b/src/views/manage/QuestionDisplayCard.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { QAInfo, QuestionDisplayAlign, Setting_QuestionDisplay } from '@/api/api-models'
+import { useDebounceFn, useStorage } from '@vueuse/core'
+
+const props = defineProps<{
+  question: QAInfo | undefined
+  setting: Setting_QuestionDisplay
+
+  showGreenBorder?: boolean
+  css?: string
+}>()
+let styleElement: HTMLStyleElement
+const cssDebounce = useDebounceFn(() => {
+  if (styleElement) {
+    styleElement.textContent = props.css ?? ''
+    console.log('已更新CSS')
+  }
+}, 1000)
+watch(() => props.css, cssDebounce)
+
+const align = computed(() => {
+  switch (props.setting.align) {
+    case QuestionDisplayAlign.Left:
+      return 'left'
+    case QuestionDisplayAlign.Right:
+      return 'right'
+    case QuestionDisplayAlign.Center:
+      return 'center'
+  }
+  return 'left'
+})
+
+onMounted(() => {
+  // 创建<style>元素并添加到<head>中
+  styleElement = document.createElement('style')
+  // 可能需要对 userStyleString 做安全处理以避免XSS攻击
+  styleElement.textContent = props.css ?? ''
+  document.head.appendChild(styleElement)
+})
+onUnmounted(() => {
+  if (styleElement && styleElement.parentNode) {
+    styleElement.parentNode.removeChild(styleElement)
+  }
+})
+</script>
+
+<template>
+  <div
+    class="question-display-root"
+    :style="{
+      backgroundColor: '#' + setting.borderColor,
+      borderColor: setting.borderColor ? '#' + setting.borderColor : undefined,
+      borderWidth: setting.borderWidth ? setting.borderWidth + 'px' : undefined,
+      borderTopWidth: 0,
+    }"
+    :display="question ? 1 : 0"
+  >
+    <div
+      v-if="setting.showUserName"
+      class="question-display-user-name"
+      :style="{
+        color: '#' + setting.nameFontColor,
+        fontSize: setting.nameFontSize + 'px',
+        fontWeight: setting.nameFontWeight ? setting.nameFontWeight : undefined,
+        fontFamily: setting.nameFont,
+      }"
+    >
+      {{ question?.sender?.name ?? '匿名用户' }}
+    </div>
+    <div
+      class="question-display-content"
+      :style="{
+        color: '#' + setting.fontColor,
+        backgroundColor: '#' + setting.backgroundColor,
+        fontSize: setting.fontSize + 'px',
+        fontWeight: setting.fontWeight ? setting.fontWeight : undefined,
+        textAlign: align,
+        fontFamily: setting.font,
+      }"
+    >
+      <div class="question-display-text">
+        {{ question?.question.message }}
+      </div>
+      <img
+        class="question-display-image"
+        v-if="setting.showImage && question?.question.image"
+        :src="question?.question.image"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.question-display-root {
+  height: 100%;
+  width: 100%;
+  border-radius: 16px;
+  border: 2 solid rgb(255, 255, 255);
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  border-style: solid;
+  box-sizing: border-box;
+}
+.question-display-content {
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-evenly;
+  padding: 24px;
+}
+.question-display-user-name {
+  text-align: center;
+  margin: 5px;
+}
+.question-display-text {
+  min-height: 50px;
+  transition: all 0.3s ease;
+}
+.question-display-image {
+  max-width: 40%;
+  max-height: 40%;
+  margin: 0 auto;
+}
+</style>
--- a/src/views/obs/QuestionDisplayOBS.vue
+++ b/src/views/obs/QuestionDisplayOBS.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { QAInfo, Setting_QuestionDisplay } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { QUESTION_API_URL } from '@/data/constants'
+import { useRouteQuery } from '@vueuse/router'
+import { onMounted, ref } from 'vue'
+import QuestionDisplayCard from '../manage/QuestionDisplayCard.vue'
+
+const hash = ref('')
+const token = useRouteQuery('token')
+
+const question = ref<QAInfo>()
+const setting = ref<Setting_QuestionDisplay>({} as Setting_QuestionDisplay)
+
+async function checkIfChanged() {
+  try {
+    const data = await QueryGetAPI<string>(QUESTION_API_URL + 'get-hash', {
+      token: token.value,
+    })
+    if (data.code == 200) {
+      if (data.data != hash.value) {
+        getQuestionAndSetting()
+      }
+      hash.value = data.data
+    }
+  } catch (err) {
+    console.log(err)
+  }
+}
+async function getQuestionAndSetting() {
+  try {
+    const data = await QueryGetAPI<{
+      question: QAInfo
+      setting: Setting_QuestionDisplay
+    }>(QUESTION_API_URL + 'get-current-and-settings', {
+      token: token.value,
+    })
+    if (data.code == 200) {
+      question.value = data.data.question
+      setting.value = data.data.setting
+    }
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+onMounted(() => {
+  setInterval(() => {
+    checkIfChanged()
+  }, 1000)
+})
+</script>
+
+<template>
+  <QuestionDisplayCard :question="question" :setting="setting" />
+</template>
--- a/src/views/single/QuestionDisplay.vue
+++ b/src/views/single/QuestionDisplay.vue
@@ -0,0 +1,462 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import {
+  NButton,
+  NCard,
+  NCheckbox,
+  NColorPicker,
+  NDivider,
+  NEmpty,
+  NFlex,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NInputNumber,
+  NRadioButton,
+  NRadioGroup,
+  NSelect,
+  NSpin,
+  NTooltip,
+  NDrawer,
+  useMessage,
+  NScrollbar,
+  NDrawerContent,
+  NModal,
+} from 'naive-ui'
+import { QAInfo, QuestionDisplayAlign, Setting_QuestionDisplay } from '@/api/api-models'
+import QuestionDisplayCard from '@/views/manage/QuestionDisplayCard.vue'
+import { useAccount } from '@/api/account'
+import { QUESTION_API_URL } from '@/data/constants'
+import {
+  ArrowCircleLeft12Filled,
+  ArrowCircleRight12Filled,
+  Info24Filled,
+  TextAlignCenter16Filled,
+  TextAlignLeft16Filled,
+  TextAlignRight16Filled,
+} from '@vicons/fluent'
+import { useDebounceFn, useElementSize, useStorage } from '@vueuse/core'
+import QuestionItems from '@/components/QuestionItems.vue'
+import QuestionItem from '@/components/QuestionItem.vue'
+import { useQuestionBox } from '@/store/useQuestionBox'
+import { Heart, HeartOutline } from '@vicons/ionicons5'
+
+const message = useMessage()
+const accountInfo = useAccount()
+const defaultSettings = {} as Setting_QuestionDisplay
+const useQB = useQuestionBox()
+
+const showSettingDrawer = ref(false)
+const showGreenBorder = ref(false)
+const showOBSModal = ref(false)
+
+const isLoading = ref(false)
+
+const cardRef = ref<HTMLElement>()
+const cardSize = useElementSize(cardRef)
+const savedCardSize = useStorage<{ width: number; height: number }>('Settings.QuestionDisplay.CardSize', {
+  width: 400,
+  height: 400,
+})
+const customCss = useStorage<string>('Settings.QuestionDisplay.CustomCss', '')
+
+const debouncedSize = useDebounceFn(() => {
+  savedCardSize.value = { width: cardSize.width.value, height: cardSize.height.value }
+}, 500)
+watch([cardSize.width, cardSize.height], () => {
+  if (cardSize.width.value > 300 && cardSize.height.value > 300) {
+    debouncedSize()
+  }
+})
+
+const setting = computed({
+  get: () => {
+    if (accountInfo.value) {
+      return accountInfo.value.settings.questionDisplay
+    }
+    return defaultSettings
+  },
+  set: (value) => {
+    if (accountInfo.value) {
+      accountInfo.value.settings.questionDisplay = value
+    }
+  },
+})
+async function updateSettings() {
+  if (accountInfo.value) {
+    isLoading.value = true
+    await QueryPostAPI(QUESTION_API_URL + 'update-setting', setting.value)
+      .then((data) => {
+        if (data.code == 200) {
+          //message.success('已保存')
+        } else {
+          message.error('保存失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('保存失败')
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  } else {
+    message.success('完成')
+  }
+}
+const fontsOptions = useStorage<{ label: string; value: string }[]>('Settings.Fonts', [])
+async function loadFonts() {
+  if ('queryLocalFonts' in window) {
+    //@ts-expect-error 不知道为啥不存在
+    const status = await navigator.permissions.query({ name: 'local-fonts' })
+    if (status.state === 'granted') {
+      console.log('Permission was granted 👍')
+    } else if (status.state === 'prompt') {
+      console.log('Permission will be requested')
+    } else {
+      console.log('Permission was denied 👎')
+      message.error('你没有授予本地字体权限, 无法读取本地字体')
+    }
+    //@ts-expect-error 不知道为啥不存在
+    const fonts = await window.queryLocalFonts()
+    fontsOptions.value = fonts.map((f: any) => {
+      return { label: f.fullName, value: f.fullName }
+    })
+    message.success('已获取字体列表, 共' + fontsOptions.value.length + '个字体')
+  } else {
+    message.error('你的浏览器不支持获取字体列表')
+  }
+}
+
+onMounted(() => {
+  useQB.GetRecieveQAInfo()
+
+  useQB.displayQuestion = useQB.recieveQuestions.find(
+    (s) => s.id == accountInfo.value?.settings.questionDisplay.currentQuestion,
+  )
+})
+</script>
+
+<template>
+  <NFlex :wrap="false" style="margin: 20px">
+    <NFlex style="height: calc(100vh - 40px)" :wrap="false" vertical>
+      <NCard size="small" title="内容设置">
+        <NFlex align="center">
+          <NButton @click="useQB.GetRecieveQAInfo" type="primary"> 刷新 </NButton>
+          <NCheckbox v-model:checked="useQB.onlyFavorite"> 只显示收藏 </NCheckbox>
+          <NCheckbox v-model:checked="useQB.onlyUnread"> 只显示未读 </NCheckbox>
+        </NFlex>
+      </NCard>
+      <template v-if="useQB.displayQuestion">
+        <NDivider style="margin: 10px 0 10px 0" />
+        <NCard size="small" title="当前展示" embedded>
+          <QuestionItem :item="useQB.displayQuestion" />
+        </NCard>
+        <NDivider style="margin: 10px 0 10px 0" />
+      </template>
+
+      <NScrollbar :style="{ flex: 1, minWidth: '400px', overflow: 'auto' }">
+        <QuestionItems :questions="useQB.recieveQuestionsFiltered">
+          <template #footer="{ item }">
+            <NFlex>
+              <NTooltip>
+                <template #trigger>
+                  <NButton
+                    @click="useQB.setCurrentQuestion(item)"
+                    size="small"
+                    :type="item.id != useQB.displayQuestion?.id ? 'default' : 'primary'"
+                    :secondary="item.id != useQB.displayQuestion?.id"
+                  >
+                    <template #icon>
+                      <NIcon
+                        :component="
+                          item.id != useQB.displayQuestion?.id ? ArrowCircleRight12Filled : ArrowCircleLeft12Filled
+                        "
+                      />
+                    </template>
+                  </NButton>
+                </template>
+                {{ item.id == useQB.displayQuestion?.id ? '取消' : '' }}设为当前展示的提问
+              </NTooltip>
+              <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="success" secondary>
+                设为已读
+              </NButton>
+              <NButton v-else size="small" @click="useQB.read(item, false)" type="warning" secondary
+                >重设为未读</NButton
+              >
+              <NButton size="small" @click="useQB.favorite(item, !item.isFavorite)">
+                <template #icon>
+                  <NIcon
+                    :component="item.isFavorite ? Heart : HeartOutline"
+                    :color="item.isFavorite ? '#dd484f' : ''"
+                  />
+                </template>
+                收藏
+              </NButton>
+            </NFlex>
+          </template>
+        </QuestionItems>
+      </NScrollbar>
+    </NFlex>
+    <NCard style="min-height: 600px">
+      <NFlex vertical :size="0" style="height: 100%">
+        <NFlex align="center">
+          <NButton @click="showSettingDrawer = true" type="primary"> 打开设置 </NButton>
+          <NButton @click="showOBSModal = true" type="primary" secondary> 预览OBS组件 </NButton>
+          <NCheckbox v-model:checked="showGreenBorder">
+            显示边框
+            <NTooltip>
+              <template #trigger>
+                <NIcon :component="Info24Filled" />
+              </template>
+              用于使用 OBS 直接捕获浏览器窗口时消除背景
+            </NTooltip>
+          </NCheckbox>
+          <template v-if="useQB.displayQuestion">
+            <NDivider vertical />
+            <NButton @click="useQB.read(useQB.displayQuestion, true)" type="success"> 将当前问题设为已读 </NButton>
+          </template>
+        </NFlex>
+        <NDivider style="margin-top: 10px">
+          {{ cardSize.width.value.toFixed(0) }} x {{ cardSize.height.value.toFixed(0) }}
+          <NTooltip>
+            <template #trigger>
+              <NIcon :component="Info24Filled" />
+            </template>
+            宽x高, 展示框右下角可以调整尺寸. 如果用的 OBS 组件的话尺寸不会同步到obs, 得你自己调
+          </NTooltip>
+        </NDivider>
+        <NFlex justify="center" align="center" style="height: 100%">
+          <div
+            ref="cardRef"
+            class="resize-box"
+            :style="{
+              border: showGreenBorder ? '24px solid green' : '',
+              background: showGreenBorder ? 'green' : '',
+              padding: '10px',
+              width: savedCardSize.width + 'px',
+              height: savedCardSize.height + 'px',
+            }"
+          >
+            <QuestionDisplayCard :question="useQB.displayQuestion" :setting="setting" :css="customCss" />
+          </div>
+        </NFlex>
+      </NFlex>
+    </NCard>
+  </NFlex>
+  <NDrawer v-model:show="showSettingDrawer" :title="`设置`" :width="400" placement="left">
+    <NDrawerContent title="设置" closable>
+      <NFlex>
+        <NTooltip>
+          <template #trigger>
+            <NRadioGroup v-model:value="setting.align" @update:value="updateSettings">
+              <NRadioButton :value="QuestionDisplayAlign.Left">
+                <NIcon :component="TextAlignLeft16Filled" />
+              </NRadioButton>
+              <NRadioButton :value="QuestionDisplayAlign.Center">
+                <NIcon :component="TextAlignCenter16Filled" />
+              </NRadioButton>
+              <NRadioButton :value="QuestionDisplayAlign.Right">
+                <NIcon :component="TextAlignRight16Filled" />
+              </NRadioButton>
+            </NRadioGroup>
+          </template>
+          文字对齐
+        </NTooltip>
+        <NFlex>
+          <NCheckbox v-model:checked="setting.showImage" @update:checked="updateSettings"> 显示图片 </NCheckbox>
+          <NCheckbox v-model:checked="setting.showUserName" @update:checked="updateSettings">
+            显示投稿用户名
+          </NCheckbox>
+        </NFlex>
+        <NCard size="small" title="内容设置">
+          <NFlex>
+            <NInputGroup style="max-width: 230px">
+              <NInputGroupLabel>字体大小</NInputGroupLabel>
+              <NInputNumber v-model:value="setting.fontSize" :min="1" :max="1000" />
+              <NButton @click="updateSettings" type="info">保存</NButton>
+            </NInputGroup>
+            <NInputGroup style="max-width: 230px">
+              <NInputGroupLabel>边框宽度</NInputGroupLabel>
+              <NInputNumber v-model:value="setting.borderWidth" :min="1" :max="1000" />
+              <NButton @click="updateSettings" type="info">保存</NButton>
+            </NInputGroup>
+            <NInputGroup style="max-width: 300px">
+              <NInputGroupLabel>字重</NInputGroupLabel>
+              <NInputNumber
+                v-model:value="setting.fontWeight"
+                :min="1"
+                :max="10000"
+                step="100"
+                placeholder="只有部分字体支持"
+              />
+              <NButton @click="updateSettings" type="info">保存</NButton>
+            </NInputGroup>
+            <NFlex>
+              <NSelect
+                v-model:value="setting.font"
+                :options="fontsOptions"
+                filterable
+                @update:value="updateSettings"
+                placeholder="选择内容字体"
+              />
+              <NTooltip>
+                <template #trigger>
+                  <NButton @click="loadFonts" type="info" secondary> 获取字体列表 </NButton>
+                </template>
+                如果选用了本地字体且使用了obs组件的话请确保运行obs的电脑上也有这个字体
+              </NTooltip>
+            </NFlex>
+            <NFlex>
+              字体颜色
+              <NColorPicker
+                :value="setting.fontColor ? '#' + setting.fontColor : undefined"
+                show-preview
+                :modes="['hex']"
+                :actions="['clear', 'confirm']"
+                :show-alpha="false"
+                @update:value="
+                  (c: string | null | undefined) => {
+                    setting.fontColor = c?.replace('#', '')
+                  }
+                "
+                @confirm="updateSettings"
+              />
+            </NFlex>
+            <NFlex>
+              背景颜色
+              <NColorPicker
+                :value="setting.backgroundColor ? '#' + setting.backgroundColor : undefined"
+                show-preview
+                :modes="['hex']"
+                :actions="['clear', 'confirm']"
+                :show-alpha="false"
+                @update:value="
+                  (c: string | null | undefined) => {
+                    setting.backgroundColor = c?.replace('#', '')
+                  }
+                "
+                @confirm="updateSettings"
+              />
+            </NFlex>
+            <NFlex>
+              边框颜色
+              <NColorPicker
+                :value="setting.borderColor ? '#' + setting.borderColor : undefined"
+                show-preview
+                :modes="['hex']"
+                :actions="['clear', 'confirm']"
+                :show-alpha="false"
+                @update:value="
+                  (c: string | null | undefined) => {
+                    setting.borderColor = c?.replace('#', '')
+                  }
+                "
+                @confirm="updateSettings"
+              />
+            </NFlex>
+          </NFlex>
+        </NCard>
+        <NCard size="small" title="用户名设置">
+          <NFlex>
+            <NInputGroup style="max-width: 230px">
+              <NInputGroupLabel>字体大小</NInputGroupLabel>
+              <NInputNumber v-model:value="setting.nameFontSize" :min="1" :max="1000" />
+              <NButton @click="updateSettings" type="info">保存</NButton>
+            </NInputGroup>
+            <NInputGroup style="max-width: 300px">
+              <NInputGroupLabel>字重</NInputGroupLabel>
+              <NInputNumber
+                v-model:value="setting.nameFontWeight"
+                :min="1"
+                :max="10000"
+                step="100"
+                placeholder="只有部分字体支持"
+              />
+              <NButton @click="updateSettings" type="info">保存</NButton>
+            </NInputGroup>
+            <NFlex>
+              <NSelect
+                v-model:value="setting.nameFont"
+                :options="fontsOptions"
+                filterable
+                @update:value="updateSettings"
+                placeholder="选择用户名字体"
+              />
+              <NTooltip>
+                <template #trigger>
+                  <NButton @click="loadFonts" type="info" secondary> 获取字体列表 </NButton>
+                </template>
+                如果选用了本地字体且使用了obs组件的话请确保运行obs的电脑上也有这个字体
+              </NTooltip>
+            </NFlex>
+            <NFlex>
+              字体颜色
+              <NColorPicker
+                :value="setting.nameFontColor ? '#' + setting.nameFontColor : undefined"
+                show-preview
+                :modes="['hex']"
+                :actions="['clear', 'confirm']"
+                :show-alpha="false"
+                @update:value="
+                  (c: string | null | undefined) => {
+                    setting.nameFontColor = c?.replace('#', '')
+                  }
+                "
+                @confirm="updateSettings"
+              />
+            </NFlex>
+          </NFlex>
+        </NCard>
+        <NDivider style="margin: 10px 0 10px 0">
+          自定义样式 (CSS)
+          <NTooltip>
+            <template #trigger>
+              <NIcon :component="Info24Filled" />
+            </template>
+            只会在当前页面生效, 要想在OBS中也生效的话需要自己粘贴到创建浏览器源时的css栏中
+          </NTooltip>
+        </NDivider>
+        <NInput type="textarea" v-model:value="customCss" placeholder="写上css" style="max-height: 500px" />
+      </NFlex>
+    </NDrawerContent>
+  </NDrawer>
+  <NModal
+    preset="card"
+    v-model:show="showOBSModal"
+    closable
+    style="max-width: 90vw"
+    title="OBS组件"
+    content-style="display: flex; align-items: center; justify-content: center; flex-direction: column"
+  >
+    <div
+      :style="{
+        width: savedCardSize.width + 'px',
+        height: savedCardSize.height + 'px',
+      }"
+    >
+      <QuestionDisplayCard :question="useQB.displayQuestion" :setting="setting" />
+    </div>
+    <NInput readonly :value="'https://vtsuru.live/obs/question-display?token=' + accountInfo?.token" />
+  </NModal>
+</template>
+
+<style>
+.resize-box {
+  display: flex;
+  justify-content: center;
+  overflow-y: visible;
+  min-width: 300px;
+  min-height: 100px;
+  resize: both;
+  overflow: auto;
+  overflow-y: hidden;
+  padding: 10px;
+}
+.n-drawer-mask {
+  background-color: rgba(0, 0, 0, 0);
+}
+</style>
--- a/yarn.lock
+++ b/yarn.lock
@@ -289,6 +289,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/parser@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/parser@npm:7.23.9"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 7df97386431366d4810538db4b9ec538f4377096f720c0591c7587a16f6810e62747e9fbbfa1ff99257fd4330035e4fb1b5b77c7bd3b97ce0d2e3780a6618975
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-jsx@npm:^7.22.5":
  version: 7.23.3
  resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
@@ -334,12 +343,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.23.8":
-  version: 7.23.8
-  resolution: "@babel/runtime@npm:7.23.8"
+"@babel/runtime@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/runtime@npm:7.23.9"
  dependencies:
    regenerator-runtime: "npm:^0.14.0"
-  checksum: ba5e8fbb32ef04f6cab5e89c54a0497c2fde7b730595cc1af93496270314f13ff2c6a9360fdb2f0bdd4d6b376752ce3cf85642bd6b876969a6a62954934c2df8
+  checksum: e71205fdd7082b2656512cc98e647d9ea7e222e4fe5c36e9e5adc026446fcc3ba7b3cdff8b0b694a0b78bb85db83e7b1e3d4c56ef90726682b74f13249cf952d
  languageName: node
  linkType: hard

@@ -983,12 +992,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/node@npm:^20.11.5":
-  version: 20.11.5
-  resolution: "@types/node@npm:20.11.5"
+"@types/node@npm:^20.11.19":
+  version: 20.11.19
+  resolution: "@types/node@npm:20.11.19"
  dependencies:
    undici-types: "npm:~5.26.4"
-  checksum: 6d18cec852f5cfbed3ec42b5c01c026e7a3f9da540d6e3d6738d4cee9979fb308cf27b6df7ba40a6553e7bc82e678f0ef53ba6e6ad52e5b86bd97b7783c2a42c
+  checksum: f451ef0a1d78f29c57bad7b77e49ebec945f2a6d0d7a89851d7e185ee9fe7ad94d651c0dfbcb7858c9fa791310c8b40a881e2260f56bd3c1b7e7ae92723373ae
  languageName: node
  linkType: hard

@@ -999,10 +1008,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/uuid@npm:^9":
-  version: 9.0.7
-  resolution: "@types/uuid@npm:9.0.7"
-  checksum: b329ebd4f9d1d8e08d4f2cc211be4922d70d1149f73d5772630e4a3acfb5170c6d37b3d7a39a0412f1a56e86e8a844c7f297c798b082f90380608bf766688787
+"@types/uuid@npm:^9.0.8":
+  version: 9.0.8
+  resolution: "@types/uuid@npm:9.0.8"
+  checksum: b411b93054cb1d4361919579ef3508a1f12bf15b5fdd97337d3d351bece6c921b52b6daeef89b62340fd73fd60da407878432a1af777f40648cbe53a01723489
  languageName: node
  linkType: hard

@@ -1013,31 +1022,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/eslint-plugin@npm:^6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:6.19.0"
-  dependencies:
-    "@eslint-community/regexpp": "npm:^4.5.1"
-    "@typescript-eslint/scope-manager": "npm:6.19.0"
-    "@typescript-eslint/type-utils": "npm:6.19.0"
-    "@typescript-eslint/utils": "npm:6.19.0"
-    "@typescript-eslint/visitor-keys": "npm:6.19.0"
-    debug: "npm:^4.3.4"
-    graphemer: "npm:^1.4.0"
-    ignore: "npm:^5.2.4"
-    natural-compare: "npm:^1.4.0"
-    semver: "npm:^7.5.4"
-    ts-api-utils: "npm:^1.0.1"
-  peerDependencies:
-    "@typescript-eslint/parser": ^6.0.0 || ^6.0.0-alpha
-    eslint: ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: ab1a5ace6663b0c6d2418e321328fa28aa4bdc4b5fae257addec01346fb3a9c2d3a2960ade0f7114e6974c513a28632c9e8e602333cc0fab3135c445babdef59
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/eslint-plugin@npm:^6.7.0":
  version: 6.15.0
  resolution: "@typescript-eslint/eslint-plugin@npm:6.15.0"
@@ -1063,21 +1047,28 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/parser@npm:^6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/parser@npm:6.19.0"
+"@typescript-eslint/eslint-plugin@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:7.0.1"
  dependencies:
-    "@typescript-eslint/scope-manager": "npm:6.19.0"
-    "@typescript-eslint/types": "npm:6.19.0"
-    "@typescript-eslint/typescript-estree": "npm:6.19.0"
-    "@typescript-eslint/visitor-keys": "npm:6.19.0"
+    "@eslint-community/regexpp": "npm:^4.5.1"
+    "@typescript-eslint/scope-manager": "npm:7.0.1"
+    "@typescript-eslint/type-utils": "npm:7.0.1"
+    "@typescript-eslint/utils": "npm:7.0.1"
+    "@typescript-eslint/visitor-keys": "npm:7.0.1"
    debug: "npm:^4.3.4"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.2.4"
+    natural-compare: "npm:^1.4.0"
+    semver: "npm:^7.5.4"
+    ts-api-utils: "npm:^1.0.1"
  peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0
+    "@typescript-eslint/parser": ^7.0.0
+    eslint: ^8.56.0
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: d547bfb1aaed112cfc0f9f0be8506a280952ba3b61be42b749352139361bd94e4a47fa043d819e19c6a498cacbd8bb36a46e3628c436a7e2009e7ac27afc8861
+  checksum: 0340a406b6a9036b6b2d92ffa79364d9cbe509e26c9726a953a1b26b4a4413a7079110e94b8a56c7d9d5193885a77f52611af00dea2d60ac79221303f0b91b3d
  languageName: node
  linkType: hard

@@ -1099,6 +1090,24 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/parser@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/parser@npm:7.0.1"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:7.0.1"
+    "@typescript-eslint/types": "npm:7.0.1"
+    "@typescript-eslint/typescript-estree": "npm:7.0.1"
+    "@typescript-eslint/visitor-keys": "npm:7.0.1"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 6e5c17faf94ced7fd5f5e0a44129f1369a691a39824303f947ed8f0089b03493b51e8c40e1f8a9f67e6420cec9aa084440d9362153525f55b20572bc111d4da5
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/scope-manager@npm:6.15.0":
  version: 6.15.0
  resolution: "@typescript-eslint/scope-manager@npm:6.15.0"
@@ -1109,13 +1118,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/scope-manager@npm:6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/scope-manager@npm:6.19.0"
+"@typescript-eslint/scope-manager@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/scope-manager@npm:7.0.1"
  dependencies:
-    "@typescript-eslint/types": "npm:6.19.0"
-    "@typescript-eslint/visitor-keys": "npm:6.19.0"
-  checksum: 1ec7b9dedca7975f0aa4543c1c382f7d6131411bd443a5f9b96f137acb6adb450888ed13c95f6d26546b682b2e0579ce8a1c883fdbe2255dc0b61052193b8243
+    "@typescript-eslint/types": "npm:7.0.1"
+    "@typescript-eslint/visitor-keys": "npm:7.0.1"
+  checksum: a1da8ba1cba503887d7a576132857e2be3345a3b1682251b73f00b87199c20bd06662260895cb8d54ec26aca49902c7dc90fc7b0fde162c8415b63bb94c63e6d
  languageName: node
  linkType: hard

@@ -1136,20 +1145,20 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/type-utils@npm:6.19.0"
+"@typescript-eslint/type-utils@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/type-utils@npm:7.0.1"
  dependencies:
-    "@typescript-eslint/typescript-estree": "npm:6.19.0"
-    "@typescript-eslint/utils": "npm:6.19.0"
+    "@typescript-eslint/typescript-estree": "npm:7.0.1"
+    "@typescript-eslint/utils": "npm:7.0.1"
    debug: "npm:^4.3.4"
    ts-api-utils: "npm:^1.0.1"
  peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0
+    eslint: ^8.56.0
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 5b146b985481e587122026c703ac9f537ad7e90eee1dca814971bca0d7e4a5d4ff9861fb4bf749014c28c6a4fbb4a01a4527355961315eb9501f3569f8e8dd38
+  checksum: 55e2ea9a76fbd62e69124298e3c1a4cf713ffe437874d090b76e747837fd5ea4034a82002e799108f29606bbed1a853e3d24f59b8a4d685b1e17698ffeb83d81
  languageName: node
  linkType: hard

@@ -1160,10 +1169,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/types@npm:6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/types@npm:6.19.0"
-  checksum: 6f81860a3c14df55232c2e6dec21fb166867b9f30b3c3369b325aef5ee1c7e41e827c0504654daa49c8ff1a3a9ca9d9bfe76786882b6212a7c1b58991a9c80b9
+"@typescript-eslint/types@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/types@npm:7.0.1"
+  checksum: 04156d5423b4d00296f0e0154b68aeae0e59876029e7eabb2cc49bb45b57a379248051b281c12644ba5afb79794d828cffcd053f2c5fcb45aa23f244ec98ef45
  languageName: node
  linkType: hard

@@ -1185,12 +1194,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/typescript-estree@npm:6.19.0"
+"@typescript-eslint/typescript-estree@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/typescript-estree@npm:7.0.1"
  dependencies:
-    "@typescript-eslint/types": "npm:6.19.0"
-    "@typescript-eslint/visitor-keys": "npm:6.19.0"
+    "@typescript-eslint/types": "npm:7.0.1"
+    "@typescript-eslint/visitor-keys": "npm:7.0.1"
    debug: "npm:^4.3.4"
    globby: "npm:^11.1.0"
    is-glob: "npm:^4.0.3"
@@ -1200,7 +1209,7 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 5b365f009e43c7beafdbb7d8ecad78ee1087b0a4338cd9ec695eed514b7b4c1089e56239761139ddae629ec0ce8d428840c6ebfeea3618d2efe00c84f8794da5
+  checksum: c8cff32a8d880de6228de900aeb20127e4663570a5f959195fda73f905ab06f3d9fbf46d60db0a6333456e0179e4706737293c90e8cce2d4ad7a220ccef2a8e7
  languageName: node
  linkType: hard

@@ -1221,20 +1230,20 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/utils@npm:6.19.0"
+"@typescript-eslint/utils@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/utils@npm:7.0.1"
  dependencies:
    "@eslint-community/eslint-utils": "npm:^4.4.0"
    "@types/json-schema": "npm:^7.0.12"
    "@types/semver": "npm:^7.5.0"
-    "@typescript-eslint/scope-manager": "npm:6.19.0"
-    "@typescript-eslint/types": "npm:6.19.0"
-    "@typescript-eslint/typescript-estree": "npm:6.19.0"
+    "@typescript-eslint/scope-manager": "npm:7.0.1"
+    "@typescript-eslint/types": "npm:7.0.1"
+    "@typescript-eslint/typescript-estree": "npm:7.0.1"
    semver: "npm:^7.5.4"
  peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0
-  checksum: 343ff4cd4f7e102df8c46b41254d017a33d95df76455531fda679fdb92aebb9c111df8ee9ab54972e73c1e8fad9dd7e421001233f0aee8115384462b0821852e
+    eslint: ^8.56.0
+  checksum: 83038958695daaa2a91092b16a64109797af28ec419f734f9dffa71f852ffb57ebd67c72d0b84c70805e4a53d4ead08e4f87687e944a1db19aeb72fcc89208cd
  languageName: node
  linkType: hard

@@ -1248,13 +1257,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/visitor-keys@npm:6.19.0":
-  version: 6.19.0
-  resolution: "@typescript-eslint/visitor-keys@npm:6.19.0"
+"@typescript-eslint/visitor-keys@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@typescript-eslint/visitor-keys@npm:7.0.1"
  dependencies:
-    "@typescript-eslint/types": "npm:6.19.0"
+    "@typescript-eslint/types": "npm:7.0.1"
    eslint-visitor-keys: "npm:^3.4.1"
-  checksum: bb34e922e018aadf34866995ea5949d6623f184cc4f6470ab05767dd208ffabb003b7dc3872199714574b7f10afe89d49c6f89a4e8d086edea82be73e189f1bb
+  checksum: a7a174d706f1b2ce60ebd17b9d20b36cc89c0ed45fcf510538734d13bca38d25ddbd4b6893a83ef5f344ad9aa7be76c22ea8407fa3c213c14dbcc52f9a2eadd0
  languageName: node
  linkType: hard

@@ -1293,13 +1302,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@vitejs/plugin-vue@npm:^5.0.3":
-  version: 5.0.3
-  resolution: "@vitejs/plugin-vue@npm:5.0.3"
+"@vitejs/plugin-vue@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "@vitejs/plugin-vue@npm:5.0.4"
  peerDependencies:
    vite: ^5.0.0
    vue: ^3.2.25
-  checksum: b03f9bd0bb5f75f133ec25599802c4563f85860fb5cd2774372988ae18727150d7aa2f7de97aa3f2100e362013942a95cbed5b53a0c0e31b84e7c85b6944a65b
+  checksum: 2e65900ff41037a013ef40351aa2fb68ee1963da461795b4e3d01fc4a0226c65e9ca4bc39941dc163f883773bcd80744ee0f1f96ecc2f46fae1a4cd71c741308
  languageName: node
  linkType: hard

@@ -1329,53 +1338,53 @@ __metadata:
  languageName: node
  linkType: hard

-"@vue/compiler-core@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/compiler-core@npm:3.4.15"
+"@vue/compiler-core@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-core@npm:3.4.19"
  dependencies:
-    "@babel/parser": "npm:^7.23.6"
-    "@vue/shared": "npm:3.4.15"
+    "@babel/parser": "npm:^7.23.9"
+    "@vue/shared": "npm:3.4.19"
    entities: "npm:^4.5.0"
    estree-walker: "npm:^2.0.2"
    source-map-js: "npm:^1.0.2"
-  checksum: 151dd9c1a4fae826c53ec60536d14298266baf81f8ed1729b1cbcd082d06410234ee951336c5f43aeaf00febafc0fdd7f82934d747a052b7435be0c2e89b8f2e
+  checksum: 94b021dc5d29564f94aa0bb7a5b03203e68b332ed165799f88c2de579a58730f4eca9c8c92d041a03843a3b8e378857485f7672be880781fe53133bfafb93d79
  languageName: node
  linkType: hard

-"@vue/compiler-dom@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/compiler-dom@npm:3.4.15"
+"@vue/compiler-dom@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-dom@npm:3.4.19"
  dependencies:
-    "@vue/compiler-core": "npm:3.4.15"
-    "@vue/shared": "npm:3.4.15"
-  checksum: d9339ca83f4e2e8fe21435c278e28b8551650d6ab09f0df1ba4afe983b4d692e07d753e70738dffee71e0d04af000eaafd7efebb8c4de5981b2e756ce03c3719
+    "@vue/compiler-core": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
+  checksum: 348aecff6ade0b023ff6b7bec572ba3fa6e2450530f15acb743a5679c3612fd6d3b15f87aafa00e1d8258f637397657e2e6ae1546c41f838da23a631e9b276f8
  languageName: node
  linkType: hard

-"@vue/compiler-sfc@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/compiler-sfc@npm:3.4.15"
+"@vue/compiler-sfc@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-sfc@npm:3.4.19"
  dependencies:
-    "@babel/parser": "npm:^7.23.6"
-    "@vue/compiler-core": "npm:3.4.15"
-    "@vue/compiler-dom": "npm:3.4.15"
-    "@vue/compiler-ssr": "npm:3.4.15"
-    "@vue/shared": "npm:3.4.15"
+    "@babel/parser": "npm:^7.23.9"
+    "@vue/compiler-core": "npm:3.4.19"
+    "@vue/compiler-dom": "npm:3.4.19"
+    "@vue/compiler-ssr": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
    estree-walker: "npm:^2.0.2"
-    magic-string: "npm:^0.30.5"
+    magic-string: "npm:^0.30.6"
    postcss: "npm:^8.4.33"
    source-map-js: "npm:^1.0.2"
-  checksum: 8643f2b6114927034195c06e13b872d186e3b5ae8e84041ea697932613cdd6e848e9253ecf4cfb13302b81a120906e0673b0adf97d07a5e1a731b96aa43f3f75
+  checksum: eb3c6a136c677cf31b624a27f3c23a6511f54b97607a66ef3625ab25ff56370cc589fe2dfa3ef487746a15f4e4033e63e261eb3a76842a5bbe149da1048dfa46
  languageName: node
  linkType: hard

-"@vue/compiler-ssr@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/compiler-ssr@npm:3.4.15"
+"@vue/compiler-ssr@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/compiler-ssr@npm:3.4.19"
  dependencies:
-    "@vue/compiler-dom": "npm:3.4.15"
-    "@vue/shared": "npm:3.4.15"
-  checksum: c71c4df64c1df81f0b0e0e99236135a3e3989ba5d6204eb3c0fac804f7a927a0eb6f6ea67f96df63263ba3667f3a833adb20d76866236124befdf7652ca7a8cd
+    "@vue/compiler-dom": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
+  checksum: 190dfbe89ad6f662276684ef2931fd67c6e6b7e3d008d6368498481f0632cf4ad06db257f5345336403404050e1791f3ba719dc460029cf9fbbe24abe39adcff
  languageName: node
  linkType: hard

@@ -1404,52 +1413,52 @@ __metadata:
  languageName: node
  linkType: hard

-"@vue/reactivity@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/reactivity@npm:3.4.15"
+"@vue/reactivity@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/reactivity@npm:3.4.19"
  dependencies:
-    "@vue/shared": "npm:3.4.15"
-  checksum: 2eb51e6f642817d5078ebc36ae5b0f94712403448f26794bedbefd05ec23f229dcf7b2512e609170b9d31e1c80bd17c5ff40cc9f82e50d6f0d41c3d542955d01
+    "@vue/shared": "npm:3.4.19"
+  checksum: a3febaa2a1a59b428d341db7099238a6182c63d21f1975cf5c3b107a653521163e34ae865d9fca8589b8d3e0d63f3257b8ec57ae276ff47aded5b9797f9583f8
  languageName: node
  linkType: hard

-"@vue/runtime-core@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/runtime-core@npm:3.4.15"
+"@vue/runtime-core@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/runtime-core@npm:3.4.19"
  dependencies:
-    "@vue/reactivity": "npm:3.4.15"
-    "@vue/shared": "npm:3.4.15"
-  checksum: f8784c2b65bb8bec705a0e1723f7b47079604c1d1c075497af6f303f81fa5e228d3ca56da2fac3e6e303a42ab26febfcc7a3be5b932a3c0a2f588f1256b9af38
+    "@vue/reactivity": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
+  checksum: 03e399a3e5183dd89e471d57a392006bf8145dcd4a2db903e4a07a2951ddd8d258791392da2c9ca8e76def0c9657fd3fbeda8efe0f053099cd73afedd8e9cd61
  languageName: node
  linkType: hard

-"@vue/runtime-dom@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/runtime-dom@npm:3.4.15"
+"@vue/runtime-dom@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/runtime-dom@npm:3.4.19"
  dependencies:
-    "@vue/runtime-core": "npm:3.4.15"
-    "@vue/shared": "npm:3.4.15"
+    "@vue/runtime-core": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
    csstype: "npm:^3.1.3"
-  checksum: e9202ca15481e72dce4f2dce2c29401afc82ee89e7f01f2989cee2a94d7689b75139e900717e3c8bfb59b741f403051a02664b5784e5389a49d639f919e234c4
+  checksum: b26ef26d06fd89b7549534c9d53eb10047b4adbea305e80730bd50e17b4859ea67ba782af71624cafc7c83f5249da71fc101c566d76e32437a4645303656b51b
  languageName: node
  linkType: hard

-"@vue/server-renderer@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/server-renderer@npm:3.4.15"
+"@vue/server-renderer@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/server-renderer@npm:3.4.19"
  dependencies:
-    "@vue/compiler-ssr": "npm:3.4.15"
-    "@vue/shared": "npm:3.4.15"
+    "@vue/compiler-ssr": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
  peerDependencies:
-    vue: 3.4.15
-  checksum: 43f86060774b8fa7331c672c564402ec58363642f0457147492b7b69c44fb1c26515968dc72d2ca0be053e838e9c2cf8f274356f982bb2bf9e886b1f4916ecaf
+    vue: 3.4.19
+  checksum: 2156362185d62222db060c66d7fa31d2420708f22e491fe1b616008e931be7fcf9cf47e9cca5135359839c269389b475492657948ea3d6756f6a790fcddc34bf
  languageName: node
  linkType: hard

-"@vue/shared@npm:3.4.15":
-  version: 3.4.15
-  resolution: "@vue/shared@npm:3.4.15"
-  checksum: eddcc1c82e8e550d9f3d622e33fd841c0c3b5c6f04f21f1cb10d3415068daabac0746279c88031861183d75d7a082fb599eec9201757d457de177d86989a9bc7
+"@vue/shared@npm:3.4.19":
+  version: 3.4.19
+  resolution: "@vue/shared@npm:3.4.19"
+  checksum: bd4a060b0064f0e183e5bb8e346f3be6ff7046793b0765a407e5334860ffd646b28a4ef53652b644e83bd473cea91189377cd83c933bb638d1da143d28f779ff
  languageName: node
  linkType: hard

@@ -2108,10 +2117,10 @@ __metadata:
  languageName: node
  linkType: hard

-"date-fns@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "date-fns@npm:3.2.0"
-  checksum: f93e987f785d7f2b7349986d150b014ce21fa6425e2e1edea6f0e01731dceef68deabf0f723689c28604e857648ac708a52b924cb7584e4321835686aa665371
+"date-fns@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "date-fns@npm:3.3.1"
+  checksum: e04ff79244010e03b912d791cd3250af5f18866ce868604958d76bd87e5fb0b79f0a810b8e7066248452b41779b288c4fd21de1cac2cd4b6d384e9dd931c9674
  languageName: node
  linkType: hard

@@ -2244,13 +2253,13 @@ __metadata:
  languageName: node
  linkType: hard

-"echarts@npm:^5.4.3":
-  version: 5.4.3
-  resolution: "echarts@npm:5.4.3"
+"echarts@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "echarts@npm:5.5.0"
  dependencies:
    tslib: "npm:2.3.0"
-    zrender: "npm:5.4.4"
-  checksum: d2040d3fabbe5f0a2c230cceedf9f12361131a221f81cc30bcb75e98e1ee99a0764b1d7372a23fab9a020f36f5549cf0835f14dfa580907f56ccf0146a99a7bd
+    zrender: "npm:5.5.0"
+  checksum: ec1aaf093cf752b90f18271de23da31dab8d3d19b77ee0dcc48424748bddbafbcd210f8d938becfda66b3a28c8548e56fa5dcc542fd880e800c2a8e7a390088b
  languageName: node
  linkType: hard

@@ -2552,10 +2561,10 @@ __metadata:
  languageName: node
  linkType: hard

-"eslint-plugin-oxlint@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "eslint-plugin-oxlint@npm:0.2.1"
-  checksum: 45821ae3a3e847d8200c99d415552746b2b1b61ec0329fd4fbb6cde96edc71fb918c4ee8e169496c998c472a927a819b0a5833580538dc67935d72689bf3b8c0
+"eslint-plugin-oxlint@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "eslint-plugin-oxlint@npm:0.2.3"
+  checksum: 6e25eabbc2dd6ce19c82f9b28b5fa5f7f448f51f5719e0d274898fe78b72674e80ff5c3f29d7cc09246f578bbd5638f8142ac33e18acf73f6cca33c9661b4f4f
  languageName: node
  linkType: hard

@@ -2579,20 +2588,20 @@ __metadata:
  languageName: node
  linkType: hard

-"eslint-plugin-vue@npm:^9.20.1":
-  version: 9.20.1
-  resolution: "eslint-plugin-vue@npm:9.20.1"
+"eslint-plugin-vue@npm:^9.21.1":
+  version: 9.21.1
+  resolution: "eslint-plugin-vue@npm:9.21.1"
  dependencies:
    "@eslint-community/eslint-utils": "npm:^4.4.0"
    natural-compare: "npm:^1.4.0"
    nth-check: "npm:^2.1.1"
    postcss-selector-parser: "npm:^6.0.13"
    semver: "npm:^7.5.4"
-    vue-eslint-parser: "npm:^9.4.0"
+    vue-eslint-parser: "npm:^9.4.2"
    xml-name-validator: "npm:^4.0.0"
  peerDependencies:
    eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
-  checksum: 97c75d8ac0351c6e7d7edb364af176ab1890e5bf8eeb525b9379f0ed88205d889c4297b107d1b196dc45ed14c1b9ccdb7fe9890c6fccd33d9b5aa00502882afa
+  checksum: 475e3ac855f5356f3d43eff788615803f7f13a278465b9629694d9dc8e97db9f2c1b13b572b01598b47342903d47f28c267b00fbfdc60b8ecbe37af62a179d79
  languageName: node
  linkType: hard

@@ -2785,24 +2794,24 @@ __metadata:
  languageName: node
  linkType: hard

-"fast-unique-numbers@npm:^8.0.13":
-  version: 8.0.13
-  resolution: "fast-unique-numbers@npm:8.0.13"
+"fast-unique-numbers@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "fast-unique-numbers@npm:9.0.0"
  dependencies:
-    "@babel/runtime": "npm:^7.23.8"
+    "@babel/runtime": "npm:^7.23.9"
    tslib: "npm:^2.6.2"
-  checksum: bf826d92345083c3146debf44e7dc93414d428eb81bd095dd46fcc6654f77977e0d04a2f65bccfcf0b9fc495a4276259afe99dbee009f463d19a1503f4e9bfac
+  checksum: c53cf4af05a0e86a5a8b1de7488323fa1bb10ca3ce4c2c041b19500d67a507fa17ac23eddfe42901b7fb4956379b4407030054edab0ed5ee498e70931f32ecc8
  languageName: node
  linkType: hard

-"fast-xml-parser@npm:^4.3.3":
-  version: 4.3.3
-  resolution: "fast-xml-parser@npm:4.3.3"
+"fast-xml-parser@npm:^4.3.4":
+  version: 4.3.4
+  resolution: "fast-xml-parser@npm:4.3.4"
  dependencies:
    strnum: "npm:^1.0.5"
  bin:
    fxparser: src/cli/cli.js
-  checksum: 420d15f315dbafac68be8a6bfa6a26c42d3e846c336a4d0c9a901f0a0903b0ab642379766fe7574d1602da2914c5d7481f78edf47c0712ab9078871e26cab296
+  checksum: 1e44cad5f14efa9971fe2df6246e6656c22bccf8e8c1d3545a63c446e67ab23e9f615ecba0c4b103ea1126ee4344d9cc9672bd6409f728330131c3ba76827715
  languageName: node
  linkType: hard

@@ -3731,12 +3740,12 @@ __metadata:
  languageName: node
  linkType: hard

-"magic-string@npm:^0.30.5":
-  version: 0.30.5
-  resolution: "magic-string@npm:0.30.5"
+"magic-string@npm:^0.30.6":
+  version: 0.30.7
+  resolution: "magic-string@npm:0.30.7"
  dependencies:
    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-  checksum: 38ac220ca7539e96da7ea2f38d85796bdf5c69b6bcae728c4bc2565084e6dc326b9174ee9770bea345cf6c9b3a24041b767167874fab5beca874d2356a9d1520
+  checksum: d1d949f7a53c37c6e685f4ea7b2b151c2fe0cc5af8f1f979ecba916f7d60d58f35309aaf4c8b09ce1aef7c160b957be39a38b52b478a91650750931e4ddd5daf
  languageName: node
  linkType: hard

@@ -4265,17 +4274,6 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss@npm:^8.4.32":
-  version: 8.4.32
-  resolution: "postcss@npm:8.4.32"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.0"
-    source-map-js: "npm:^1.0.2"
-  checksum: 39308a9195fa34d4dbdd7b58a896cff0c7809f84f7a4ac1b95b68ca86c9138a395addff33075668ed3983d41b90aac05754c445237a9365eb1c3a5602ebd03ad
-  languageName: node
-  linkType: hard
-
 "postcss@npm:^8.4.33":
  version: 8.4.33
  resolution: "postcss@npm:8.4.33"
@@ -4287,6 +4285,17 @@ __metadata:
  languageName: node
  linkType: hard

+"postcss@npm:^8.4.35":
+  version: 8.4.35
+  resolution: "postcss@npm:8.4.35"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.0.2"
+  checksum: e8dd04e48001eb5857abc9475365bf08f4e508ddf9bc0b8525449a95d190f10d025acebc5b56ac2e94b3c7146790e4ae78989bb9633cb7ee20d1cc9b7dc909b2
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
  version: 1.2.1
  resolution: "prelude-ls@npm:1.2.1"
@@ -4303,12 +4312,12 @@ __metadata:
  languageName: node
  linkType: hard

-"prettier@npm:^3.2.4":
-  version: 3.2.4
-  resolution: "prettier@npm:3.2.4"
+"prettier@npm:^3.2.5":
+  version: 3.2.5
+  resolution: "prettier@npm:3.2.5"
  bin:
    prettier: bin/prettier.cjs
-  checksum: 88dfeb78ac6096522c9a5b81f1413d875f568420d9bb6a5e5103527912519b993f2bcdcac311fcff5718d5869671d44e4f85827d3626f3a6ce32b9abc65d88e0
+  checksum: ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6
  languageName: node
  linkType: hard

@@ -5216,13 +5225,13 @@ __metadata:
  languageName: node
  linkType: hard

-"vite@npm:^5.0.12":
-  version: 5.0.12
-  resolution: "vite@npm:5.0.12"
+"vite@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "vite@npm:5.1.3"
  dependencies:
    esbuild: "npm:^0.19.3"
    fsevents: "npm:~2.3.3"
-    postcss: "npm:^8.4.32"
+    postcss: "npm:^8.4.35"
    rollup: "npm:^4.2.0"
  peerDependencies:
    "@types/node": ^18.0.0 || >=20.0.0
@@ -5252,7 +5261,7 @@ __metadata:
      optional: true
  bin:
    vite: bin/vite.js
-  checksum: c51b8e458851943c903fddde6973e720099ef8a5f364fb107cddade59c9e90f6d9ad98b61a7419cdfa0c6374236e10bff965d0c2d9e7b1790c68b874e5e7950c
+  checksum: d3b19607d736de60b660f7daf4c0f86589edcbbc1fcb09f8aa36630f99518cc8a063062bb952899b8ccaed62f1314fac22c1df492dd035de3c65998ab27e2d2a
  languageName: node
  linkType: hard

@@ -5272,27 +5281,27 @@ __metadata:
  resolution: "vtsuru.live@workspace:."
  dependencies:
    "@types/eslint": "npm:^8.56.2"
-    "@types/node": "npm:^20.11.5"
-    "@types/uuid": "npm:^9"
-    "@typescript-eslint/eslint-plugin": "npm:^6.19.0"
-    "@typescript-eslint/parser": "npm:^6.19.0"
+    "@types/node": "npm:^20.11.19"
+    "@types/uuid": "npm:^9.0.8"
+    "@typescript-eslint/eslint-plugin": "npm:^7.0.1"
+    "@typescript-eslint/parser": "npm:^7.0.1"
    "@vicons/fluent": "npm:^0.12.0"
    "@vicons/ionicons5": "npm:^0.12.0"
-    "@vitejs/plugin-vue": "npm:^5.0.3"
+    "@vitejs/plugin-vue": "npm:^5.0.4"
    "@vitejs/plugin-vue-jsx": "npm:^3.1.0"
    "@vue/eslint-config-typescript": "npm:^12.0.0"
    "@vueuse/core": "npm:^10.7.2"
    "@vueuse/router": "npm:^10.7.2"
-    date-fns: "npm:^3.2.0"
+    date-fns: "npm:^3.3.1"
    easy-speech: "npm:^2.3.1"
-    echarts: "npm:^5.4.3"
+    echarts: "npm:^5.5.0"
    eslint: "npm:^8.56.0"
    eslint-config-prettier: "npm:^9.1.0"
    eslint-plugin-import: "npm:^2.29.1"
-    eslint-plugin-oxlint: "npm:^0.2.1"
+    eslint-plugin-oxlint: "npm:^0.2.3"
    eslint-plugin-prettier: "npm:^5.1.3"
-    eslint-plugin-vue: "npm:^9.20.1"
-    fast-xml-parser: "npm:^4.3.3"
+    eslint-plugin-vue: "npm:^9.21.1"
+    fast-xml-parser: "npm:^4.3.4"
    file-saver: "npm:^2.0.5"
    grapheme-splitter: "npm:^1.0.4"
    html2canvas: "npm:^1.4.1"
@@ -5300,24 +5309,24 @@ __metadata:
    mitt: "npm:^3.0.1"
    naive-ui: "npm:^2.37.3"
    pinia: "npm:^2.1.7"
-    prettier: "npm:^3.2.4"
+    prettier: "npm:^3.2.5"
    qrcode.vue: "npm:^3.4.1"
    queue-typescript: "npm:^1.0.1"
    stylus: "npm:^0.62.0"
    typescript: "npm:^5.3.3"
    unplugin-vue-markdown: "npm:^0.26.0"
    uuid: "npm:^9.0.1"
-    vite: "npm:^5.0.12"
+    vite: "npm:^5.1.3"
    vite-svg-loader: "npm:^5.1.0"
-    vue: "npm:^3.4.15"
+    vue: "npm:^3.4.19"
    vue-echarts: "npm:^6.6.8"
    vue-request: "npm:^2.0.4"
    vue-router: "npm:^4.2.5"
-    vue-turnstile: "npm:^1.0.7"
+    vue-turnstile: "npm:^1.0.8"
    vue3-aplayer: "npm:^1.7.3"
-    vue3-marquee: "npm:^4.2.0-beta.1"
+    vue3-marquee: "npm:^4.2.0"
    vueuc: "npm:^0.4.58"
-    worker-timers: "npm:^7.1.1"
+    worker-timers: "npm:^7.1.2"
    xlsx: "npm:^0.18.5"
  languageName: unknown
  linkType: soft
@@ -5391,9 +5400,9 @@ __metadata:
  languageName: node
  linkType: hard

-"vue-eslint-parser@npm:^9.4.0":
-  version: 9.4.0
-  resolution: "vue-eslint-parser@npm:9.4.0"
+"vue-eslint-parser@npm:^9.4.2":
+  version: 9.4.2
+  resolution: "vue-eslint-parser@npm:9.4.2"
  dependencies:
    debug: "npm:^4.3.4"
    eslint-scope: "npm:^7.1.1"
@@ -5404,7 +5413,7 @@ __metadata:
    semver: "npm:^7.3.6"
  peerDependencies:
    eslint: ">=6.0.0"
-  checksum: c77ddaf69ef076f69164cb52fd1295cc73b002f99bf5bcde25dcbce2c3bba66decdc2abd29ce73434720dd3fca20323073b6044f84fec219c629f7b9276abce6
+  checksum: 79593073adbce8971565133c70a203f12f0be0f8c5e3a4063796fd56e5de64f1f3ad7f91be5a787a7a3fe751306ed22086ee8369d52725be95f452827ce670de
  languageName: node
  linkType: hard

@@ -5447,12 +5456,12 @@ __metadata:
  languageName: node
  linkType: hard

-"vue-turnstile@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "vue-turnstile@npm:1.0.7"
+"vue-turnstile@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "vue-turnstile@npm:1.0.8"
  peerDependencies:
    vue: ^3.2.45
-  checksum: e4c1f8c28e7b7e9e20e856a9deeb5589b48098d9c880b81d0d3f8236f1a92d8f3d4d552d51aaf26fd1cc2bf5de848d26e9b1bac88b91179f3cf810c87659a3a1
+  checksum: adeb0ad8a340f97d64ef4bb12bfd231b649a7aec71852f9ca8313ee3e902c83fc68aa394123191c7cf7b44c2ada4a14d3120b110f94f0e345f6afad23c0924b1
  languageName: node
  linkType: hard

@@ -5467,30 +5476,30 @@ __metadata:
  languageName: node
  linkType: hard

-"vue3-marquee@npm:^4.2.0-beta.1":
-  version: 4.2.0-beta.1
-  resolution: "vue3-marquee@npm:4.2.0-beta.1"
+"vue3-marquee@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "vue3-marquee@npm:4.2.0"
  peerDependencies:
    vue: ^3.2
-  checksum: 053d0d9c5e2edc07e6bcb6feca27c026b196d1c802e010ce3f983a6dbfd13abd25588f0e7686fd0cc766183a089a0aa7efac92f55af266a0fb92751db3a36f83
+  checksum: 4c65589eca01e70392ec36b8e0422311a73cb83faf64666590e8abec9655e5b985942b4d1d98dd7c000949f3ce6a6a45ff9f1afd7cc9bfdf46b5e02cb1ce2e23
  languageName: node
  linkType: hard

-"vue@npm:^3.4.15":
-  version: 3.4.15
-  resolution: "vue@npm:3.4.15"
+"vue@npm:^3.4.19":
+  version: 3.4.19
+  resolution: "vue@npm:3.4.19"
  dependencies:
-    "@vue/compiler-dom": "npm:3.4.15"
-    "@vue/compiler-sfc": "npm:3.4.15"
-    "@vue/runtime-dom": "npm:3.4.15"
-    "@vue/server-renderer": "npm:3.4.15"
-    "@vue/shared": "npm:3.4.15"
+    "@vue/compiler-dom": "npm:3.4.19"
+    "@vue/compiler-sfc": "npm:3.4.19"
+    "@vue/runtime-dom": "npm:3.4.19"
+    "@vue/server-renderer": "npm:3.4.19"
+    "@vue/shared": "npm:3.4.19"
  peerDependencies:
    typescript: "*"
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 7410135553f38d390ece3d5edcb6e2c158c3717e002a4e0766a95f6054f0ab7a8ce69000f5e29ff41f631f3cc7211123fbe34ab591b43b14f4af77c4ac01d116
+  checksum: 90d45a30b096d3a2445314cf5a94db6f56b854bd483a706bc7ec358b555e2c6dba8ce7b6a976d52af2a8ba92fb3caab4b77b50886f732857320073753152528d
  languageName: node
  linkType: hard

@@ -5587,37 +5596,37 @@ __metadata:
  languageName: node
  linkType: hard

-"worker-timers-broker@npm:^6.1.1":
-  version: 6.1.1
-  resolution: "worker-timers-broker@npm:6.1.1"
+"worker-timers-broker@npm:^6.1.2":
+  version: 6.1.2
+  resolution: "worker-timers-broker@npm:6.1.2"
  dependencies:
-    "@babel/runtime": "npm:^7.23.8"
-    fast-unique-numbers: "npm:^8.0.13"
+    "@babel/runtime": "npm:^7.23.9"
+    fast-unique-numbers: "npm:^9.0.0"
    tslib: "npm:^2.6.2"
-    worker-timers-worker: "npm:^7.0.65"
-  checksum: 619698e5860840c9a6e9971c72a7b0d59fd2291b4d571bd5de01488bd9ede5f45b9cbc3606b98290fa2baee01aab90aa5620dd9098c96b5e7300c398c11c01b1
+    worker-timers-worker: "npm:^7.0.66"
+  checksum: 376b28a3aa8a9d786736916175d190cf60b2e996fda4d5a8c6d91b33e51320dd4c80515b7ef8b0cdbf8530bfb96662e9c4b19d0f9f2e44e106905fac6141ef48
  languageName: node
  linkType: hard

-"worker-timers-worker@npm:^7.0.65":
-  version: 7.0.65
-  resolution: "worker-timers-worker@npm:7.0.65"
+"worker-timers-worker@npm:^7.0.66":
+  version: 7.0.66
+  resolution: "worker-timers-worker@npm:7.0.66"
  dependencies:
-    "@babel/runtime": "npm:^7.23.8"
+    "@babel/runtime": "npm:^7.23.9"
    tslib: "npm:^2.6.2"
-  checksum: 3599287cce1f578c7e710181b95e5a83273acdcc737f40fadc707e9d894b8938153b45ae1057b08a43c9d1cecbeb085e6cef621edb4bd9e046ab9e93050965a6
+  checksum: 8c182dd8c22a88fe4c4673353edcd66ccade1f4d51b04f754dbc3ec812c734e25930b9834a67f320a254813d4c24900911e6f980ee69eb12e54710aad1eaee05
  languageName: node
  linkType: hard

-"worker-timers@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "worker-timers@npm:7.1.1"
+"worker-timers@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "worker-timers@npm:7.1.2"
  dependencies:
-    "@babel/runtime": "npm:^7.23.8"
+    "@babel/runtime": "npm:^7.23.9"
    tslib: "npm:^2.6.2"
-    worker-timers-broker: "npm:^6.1.1"
-    worker-timers-worker: "npm:^7.0.65"
-  checksum: cbc3dd073d5244ed0accc8a1252f5a5134a1df07982bb277f298771ff934975bd4e7db0c6bce3d051983384ed0988fa0c151d5b703266802fcbf38f922875e59
+    worker-timers-broker: "npm:^6.1.2"
+    worker-timers-worker: "npm:^7.0.66"
+  checksum: 4994d909094ee827f5c0b4c2c291b2609228f2dccda0a469b210fbe5658a86728d4a78508234cef1c5cadfe604b41ca4b84d148437fea4d238d7be3f55832b70
  languageName: node
  linkType: hard

@@ -5695,11 +5704,11 @@ __metadata:
  languageName: node
  linkType: hard

-"zrender@npm:5.4.4":
-  version: 5.4.4
-  resolution: "zrender@npm:5.4.4"
+"zrender@npm:5.5.0":
+  version: 5.5.0
+  resolution: "zrender@npm:5.5.0"
  dependencies:
    tslib: "npm:2.3.0"
-  checksum: 7c298595c506556b9182edbf94894b9311ebf9cf698934863521232a37dbdcd1c530f895ae2d29c2c170a765fdb390583ba331743f8c92cb6a077f746f6f52d8
+  checksum: d57816b4157e07d74dc82bff5e274181f3cba62544cd80d4ae1c74215916888f7d72597ef6c3bd429a0b7ebde2cc0e210c293c372794659ccc2d1a88a34a3b90
  languageName: node
  linkType: hard