merge to bun

.github/actions/yarn-nm-install/action.yml

@@ -1,123 +0,0 @@
-########################################################################################
-# "yarn install" composite action for yarn 3/4+ and "nodeLinker: node-modules"         #
-#--------------------------------------------------------------------------------------#
-# Requirement: @setup/node should be run before                                        #
-#                                                                                      #
-# Usage in workflows steps:                                                            #
-#                                                                                      #
-#      - name: 📥 Monorepo install                                                     #
-#        uses: ./.github/actions/yarn-nm-install                                       #
-#        with:                                                                         #
-#          enable-corepack: false                   # (default = 'false')              #
-#          cwd: ${{ github.workspace }}/apps/my-app # (default = '.')                  #
-#          cache-prefix: add cache key prefix       # (default = 'default')            #
-#          cache-node-modules: false                # (default = 'false')              #
-#          cache-install-state: false               # (default = 'false')              #
-#                                                                                      #
-# Reference:                                                                           #
-#   - latest: https://gist.github.com/belgattitude/042f9caf10d029badbde6cf9d43e400a    #
-#                                                                                      #
-# Versions:                                                                            #
-#   - 1.1.0 - 22-07-2023 - Option to enable npm global cache folder.                   #
-#   - 1.0.4 - 15-07-2023 - Fix corepack was always enabled.                            #
-#   - 1.0.3 - 05-07-2023 - YARN_ENABLE_MIRROR to false (speed up cold start)           #
-#   - 1.0.2 - 02-06-2023 - install-state default to false                              #
-#   - 1.0.1 - 29-05-2023 - cache-prefix doc                                            #
-#   - 1.0.0 - 27-05-2023 - new input: cache-prefix                                     #
-########################################################################################
-
-name: 'Monorepo install (yarn)'
-description: 'Run yarn install with node_modules linker and cache enabled'
-inputs:
-  cwd:
-    description: "Changes node's process.cwd() if the project is not located on the root. Default to process.cwd()"
-    required: false
-    default: '.'
-  cache-prefix:
-    description: 'Add a specific cache-prefix'
-    required: false
-    default: 'default'
-  cache-npm-cache:
-    description: 'Cache npm global cache folder often used by node-gyp, prebuild binaries (invalidated on lock/os/node-version)'
-    required: false
-    default: 'true'
-  cache-node-modules:
-    description: 'Cache node_modules, might speed up link step (invalidated lock/os/node-version/branch)'
-    required: false
-    default: 'false'
-  cache-install-state:
-    description: 'Cache yarn install state, might speed up resolution step when node-modules cache is activated (invalidated lock/os/node-version/branch)'
-    required: false
-    default: 'false'
-  enable-corepack:
-    description: 'Enable corepack'
-    required: false
-    default: 'true'
-
-runs:
-  using: 'composite'
-
-  steps:
-    - name: ⚙️ Enable Corepack
-      if: inputs.enable-corepack == 'true'
-      shell: bash
-      working-directory: ${{ inputs.cwd }}
-      run: corepack enable
-
-    - name: ⚙️ Expose yarn config as "$GITHUB_OUTPUT"
-      id: yarn-config
-      shell: bash
-      working-directory: ${{ inputs.cwd }}
-      env:
-        YARN_ENABLE_GLOBAL_CACHE: 'false'
-      run: |
-        echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-        echo "CURRENT_NODE_VERSION="node-$(node --version)"" >> $GITHUB_OUTPUT
-        echo "CURRENT_BRANCH=$(echo ${GITHUB_REF#refs/heads/} | sed -r 's,/,-,g')" >> $GITHUB_OUTPUT
-        echo "NPM_GLOBAL_CACHE_FOLDER=$(npm config get cache)" >> $GITHUB_OUTPUT
-
-    - name: ♻️ Restore yarn cache
-      uses: actions/cache@v3
-      id: yarn-download-cache
-      with:
-        path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
-        key: yarn-download-cache-${{ inputs.cache-prefix }}-${{ hashFiles(format('{0}/yarn.lock', inputs.cwd), format('{0}/.yarnrc.yml', inputs.cwd)) }}
-        restore-keys: |
-          yarn-download-cache-${{ inputs.cache-prefix }}-
-
-    - name: ♻️ Restore node_modules
-      if: inputs.cache-node-modules == 'true'
-      id: yarn-nm-cache
-      uses: actions/cache@v3
-      with:
-        path: ${{ inputs.cwd }}/**/node_modules
-        key: yarn-nm-cache-${{ inputs.cache-prefix }}-${{ runner.os }}-${{ steps.yarn-config.outputs.CURRENT_NODE_VERSION }}-${{ steps.yarn-config.outputs.CURRENT_BRANCH }}-${{ hashFiles(format('{0}/yarn.lock', inputs.cwd), format('{0}/.yarnrc.yml', inputs.cwd)) }}
-
-    - name: ♻️ Restore global npm cache folder
-      if: inputs.cache-npm-cache == 'true'
-      id: npm-global-cache
-      uses: actions/cache@v3
-      with:
-        path: ${{ steps.yarn-config.outputs.NPM_GLOBAL_CACHE_FOLDER }}
-        key: npm-global-cache-${{ inputs.cache-prefix }}-${{ runner.os }}-${{ steps.yarn-config.outputs.CURRENT_NODE_VERSION }}-${{ hashFiles(format('{0}/yarn.lock', inputs.cwd), format('{0}/.yarnrc.yml', inputs.cwd)) }}
-
-    - name: ♻️ Restore yarn install state
-      if: inputs.cache-install-state == 'true' && inputs.cache-node-modules == 'true'
-      id: yarn-install-state-cache
-      uses: actions/cache@v3
-      with:
-        path: ${{ inputs.cwd }}/.yarn/ci-cache
-        key: yarn-install-state-cache-${{ inputs.cache-prefix }}-${{ runner.os }}-${{ steps.yarn-config.outputs.CURRENT_NODE_VERSION }}-${{ steps.yarn-config.outputs.CURRENT_BRANCH }}-${{ hashFiles(format('{0}/yarn.lock', inputs.cwd), format('{0}/.yarnrc.yml', inputs.cwd)) }}
-
-    - name: 📥 Install dependencies
-      shell: bash
-      working-directory: ${{ inputs.cwd }}
-      run: yarn install --immutable --inline-builds
-      env:
-        # Overrides/align yarnrc.yml options (v3, v4) for a CI context
-        YARN_ENABLE_GLOBAL_CACHE: 'false' # Use local cache folder to keep downloaded archives
-        YARN_ENABLE_MIRROR: 'false' # Prevent populating global cache for caches misses (local cache only)
-        YARN_NM_MODE: 'hardlinks-local' # Reduce node_modules size
-        YARN_INSTALL_STATE_PATH: '.yarn/ci-cache/install-state.gz' # Might speed up resolution step when node_modules present
-        # Other environment variables
-        HUSKY: '0' # By default do not run HUSKY install

.github/workflows/bun.yml

@@ -0,0 +1,26 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name:  Use bun
+      uses: oven-sh/setup-bun@v2
+
+    - name: 📥 Install dependencies
+      run: bun install
+    - name: 📦 Build
+      run: bun run build

.github/workflows/node.js.yml

@@ -1,36 +0,0 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [ "master" ]
-  pull_request:
-    branches: [ "master" ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [21.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: 📥 Monorepo install
-      uses: ./.github/actions/yarn-nm-install
-
-    - name: Check Yarn Version
-      run: yarn --version
-
-    - name: Build the project
-      run: yarn build

.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

default.d.ts

@@ -1,3 +1,5 @@
+import { LoadingBarProviderInst, MessageProviderInst } from "naive-ui"
+
 declare module 'vue3-aplayer' {
   const content: any
   export = content
@@ -10,3 +12,10 @@ declare module '*.js' {
   const content: any
   export = content
 }
+
+declare global {
+  interface Window {
+    $message: MessageProviderInst,
+    $loadingBar: LoadingBarProviderInst
+  }
+}

gen-version.js

@@ -1,6 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-const version = Date.now()
-const versionModule = `export const version = "${version}"`
-fs.writeFileSync(path.resolve(__dirname, 'src/version.js'), versionModule)

index.html

@@ -12,6 +12,9 @@
       src="https://umami.vtsuru.live/script.js"
       data-website-id="05567214-d234-4076-9228-e4d69e3d202f"
     ></script>
+
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
   </head>
 
   <body>

package.json

@@ -4,68 +4,69 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "bunx --bun vite",
     "build": "vite build",
     "lint": "vite lint"
   },
   "dependencies": {
-    "@microsoft/signalr": "^8.0.0",
+    "@microsoft/signalr": "^8.0.7",
-    "@microsoft/signalr-protocol-msgpack": "^8.0.0",
+    "@microsoft/signalr-protocol-msgpack": "^8.0.7",
-    "@types/node": "^20.12.7",
+    "@types/node": "^22.8.2",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.1",
     "@vicons/fluent": "^0.12.0",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.1.4",
-    "@vueuse/core": "^10.9.0",
+    "@vue/cli": "^5.0.8",
-    "@vueuse/router": "^10.9.0",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/router": "^11.1.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
-    "easy-speech": "^2.3.1",
+    "easy-speech": "^2.4.0",
-    "echarts": "^5.5.0",
+    "echarts": "^5.5.1",
-    "eslint": "^9.1.0",
+    "eslint": "^9.13.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-oxlint": "^0.2.9",
+    "eslint-plugin-oxlint": "^0.10.1",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
-    "fast-xml-parser": "^4.3.6",
+    "fast-xml-parser": "^4.5.0",
     "file-saver": "^2.0.5",
     "grapheme-splitter": "^1.0.4",
     "html2canvas": "^1.4.1",
-    "linqts": "^1.15.0",
+    "linqts": "^2.0.0",
     "mitt": "^3.0.1",
-    "music-metadata-browser": "^2.5.10",
+    "music-metadata-browser": "^2.5.11",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.4",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
-    "qrcode.vue": "^3.4.1",
+    "qrcode.vue": "^3.5.1",
     "queue-typescript": "^1.0.1",
     "unplugin-vue-markdown": "^0.26.2",
-    "uuid": "^9.0.1",
+    "uuid": "^11.0.2",
-    "vite": "^5.2.10",
+    "vite": "^5.4.10",
     "vite-svg-loader": "^5.1.0",
-    "vue": "3.4.21",
+    "vue": "3.5.12",
-    "vue-echarts": "^6.6.10",
+    "vue-echarts": "^7.0.3",
     "vue-request": "^2.0.4",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.4.5",
-    "vue-turnstile": "^1.0.8",
+    "vue-turnstile": "^1.0.11",
     "vue3-aplayer": "^1.7.3",
-    "vue3-marquee": "^4.2.0",
+    "vue3-marquee": "^4.2.2",
-    "vueuc": "^0.4.58",
+    "vueuc": "^0.4.64",
-    "worker-timers": "^7.1.7",
+    "worker-timers": "^8.0.10",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.0.2",
+    "@eslint/eslintrc": "^3.1.0",
-    "@types/eslint": "^8.56.10",
+    "@types/bun": "^1.1.12",
+    "@types/eslint": "^9.6.1",
     "@types/obs-studio": "^2.17.2",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@typescript-eslint/parser": "^8.12.1",
     "@vicons/ionicons5": "^0.12.0",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/eslint-config-typescript": "^14.1.3",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.25.0",
+    "eslint-plugin-vue": "^9.30.0",
-    "naive-ui": "^2.38.1",
+    "naive-ui": "^2.40.1",
-    "stylus": "^0.63.0",
+    "stylus": "^0.64.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.3"
-  },
+  }
-  "packageManager": "yarn@4.0.2"
 }

src/App.vue

@@ -1,11 +1,6 @@
 <template>
-  <NConfigProvider
+  <NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN"
-    :theme-overrides="themeOverrides"
+    :date-locale="dateZhCN">
-    :theme="theme"
-    style="height: 100vh"
-    :locale="zhCN"
-    :date-locale="dateZhCN"
-  >
     <NMessageProvider>
       <NNotificationProvider>
         <NDialogProvider>
@@ -36,10 +31,8 @@
 </template>
 
 <script setup lang="ts">
-import { useLoadingBarStore } from '@/store/useLoadingBarStore'
 import ManageLayout from '@/views/ManageLayout.vue'
 import ViewerLayout from '@/views/ViewerLayout.vue'
-import { useStorage } from '@vueuse/core'
 import {
   NConfigProvider,
   NDialogProvider,
@@ -49,17 +42,14 @@ import {
   NMessageProvider,
   NNotificationProvider,
   NSpin,
-  darkTheme,
   dateZhCN,
-  useLoadingBar,
+  zhCN
-  useOsTheme,
-  zhCN,
 } from 'naive-ui'
-import { computed, defineComponent, onMounted } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { ThemeType } from './api/api-models'
-import OpenLiveLayout from './views/OpenLiveLayout.vue'
 import TempComponent from './components/TempComponent.vue'
+import { theme } from './Utils'
+import OpenLiveLayout from './views/OpenLiveLayout.vue'
 
 const route = useRoute()
 
@@ -82,45 +72,52 @@ const layout = computed(() => {
   }
 })
 
-const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+
-const theme = computed(() => {
-  if (themeType.value == ThemeType.Auto) {
-    var osThemeRef = useOsTheme() //获取当前系统主题
-    return osThemeRef.value === 'dark' ? darkTheme : null
-  } else {
-    return themeType.value == ThemeType.Dark ? darkTheme : null
-  }
-})
 
 const themeOverrides = {
   common: {
     //primaryColor: '#9ddddc',
     fontFamily:
-      '"Noto Sans SC",-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important',
+      'Inter ,"Noto Sans SC",-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important',
   },
   // ...
 }
 </script>
 
-<style lang="stylus">
+<style>
+:root {
+  font-feature-settings: 'liga' 1, 'calt' 1;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: InterVariable, sans-serif;
+  }
+}
+
+/* 进入和离开过渡的样式 */
 .v-enter-from,
 .v-leave-to {
   opacity: 0;
 }
+
 /* 离开和进入过程中的样式 */
 .v-enter-active,
 .v-leave-active {
   /* 添加过渡动画 */
   transition: opacity 0.5s ease;
 }
+
 /* 进入之后和离开之前的样式 */
 .v-enter-to,
 .v-leave-from {
   opacity: 1;
 }
+
 .bounce-enter-active {
   animation: bounce 0.3s;
 }
+
 .bounce-leave-active {
   animation: bounce 0.3s reverse;
 }
@@ -130,14 +127,17 @@ const themeOverrides = {
     transform: scale(1);
     opacity: 0;
   }
+
   60% {
     transform: scale(1.1);
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
   }
 }
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.3s ease;
@@ -152,6 +152,7 @@ const themeOverrides = {
 .scale-leave-active {
   transition: all 0.3s ease;
 }
+
 .scale-enter-from,
 .scale-leave-to {
   opacity: 0;
@@ -162,18 +163,22 @@ const themeOverrides = {
 .slide-leave-active {
   transition: all 0.5s ease-out;
 }
+
 .slide-enter-to {
   position: absolute;
   right: 0;
 }
+
 .slide-enter-from {
   position: absolute;
   right: -100%;
 }
+
 .slide-leave-to {
   position: absolute;
   left: -100%;
 }
+
 .slide-leave-from {
   position: absolute;
   left: 0;
@@ -183,20 +188,24 @@ const themeOverrides = {
 .slide-up-leave-active {
   transition: all 0.5s ease-out;
 }
+
 .slide-up-enter-to {
   position: absolute;
   top: 0;
 }
+
 .slide-up-enter-from {
   position: absolute;
   top: -100%;
 }
+
 .slide-up-leave-to {
   position: absolute;
-  bottom : -100%;
+  bottom: -100%;
 }
+
 .slide-up-leave-from {
   position: absolute;
-  bottom : 0;
+  bottom: 0;
 }
 </style>

src/Utils.ts

@@ -1,16 +1,44 @@
 import { useStorage } from '@vueuse/core'
-import { UploadFileInfo, createDiscreteApi, useOsTheme } from 'naive-ui'
+import {
+  ConfigProviderProps,
+  UploadFileInfo,
+  createDiscreteApi,
+  darkTheme,
+  dateZhCN,
+  useOsTheme,
+  zhCN
+} from 'naive-ui'
 import { ThemeType } from './api/api-models'
 import { computed } from 'vue'
 import { VTSURU_API_URL } from './data/constants'
+import { DiscreteApiType } from 'naive-ui/es/discrete/src/interface'
 
 const { message } = createDiscreteApi(['message'])
 
 const osThemeRef = useOsTheme() //获取当前系统主题
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+export const theme = computed(() => {
+  if (themeType.value == ThemeType.Auto) {
+    var osThemeRef = useOsTheme() //获取当前系统主题
+    return osThemeRef.value === 'dark' ? darkTheme : null
+  } else {
+    return themeType.value == ThemeType.Dark ? darkTheme : null
+  }
+})
+export const configProviderPropsRef = computed<ConfigProviderProps>(() => ({
+  theme: theme.value,
+  locale: zhCN,
+  dateLocale: dateZhCN,
+  
+}))
+export function createNaiveUIApi(types: DiscreteApiType[]) {
+  return createDiscreteApi(types, {
+    configProviderProps: configProviderPropsRef
+  })
+}
 export function NavigateToNewTab(url: string) {
   window.open(url, '_blank')
 }
-const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 export const isDarkMode = computed(() => {
   if (themeType.value == ThemeType.Auto) return osThemeRef.value === 'dark'
   else return themeType.value == ThemeType.Dark
@@ -73,22 +101,25 @@ export function downloadImage(imageSrc: string, filename: string) {
   }
   image.src = imageSrc
 }
-export function getBase64(file: File | undefined | null): Promise<string | undefined> {
+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.onload = () =>
+      resolve(reader.result?.toString().split(',')[1] || undefined)
     reader.onerror = (error) => reject(error)
   })
 }
 export async function getImageUploadModel(
   files: UploadFileInfo[] | undefined | null,
-  maxSize: number = 10 * 1024 * 1024,
+  maxSize: number = 10 * 1024 * 1024
 ) {
   const result = {
     existImages: [],
-    newImagesBase64: [],
+    newImagesBase64: []
   } as { existImages: string[]; newImagesBase64: string[] }
   if (!files) return result
   for (let i = 0; i < files.length; i++) {
@@ -146,7 +177,11 @@ export class GuidUtils {
     const bytes = new Uint8Array(buffer)
     const guid = bytes.reduce((str, byte, idx) => {
       const pair = byte.toString(16).padStart(2, '0')
-      return str + pair + (idx === 3 || idx === 5 || idx === 7 || idx === 9 ? '-' : '')
+      return (
+        str +
+        pair +
+        (idx === 3 || idx === 5 || idx === 7 || idx === 9 ? '-' : '')
+      )
     }, '')
     return guid
   }

src/components/DanmakuItem.vue

@@ -135,7 +135,7 @@ defineEmits<{
             <template #trigger>
               <img :src="'https://' + danmaku.msg + `@22h`" referrerpolicy="no-referrer" :style="`max-height: ${height}px;display:inline-flex;`" />
             </template>
-            <img :src="'https://' + danmaku.msg ?? ''" referrerpolicy="no-referrer" />
+            <img :src="'https://' + danmaku.msg" referrerpolicy="no-referrer" />
           </NTooltip>
         </template>
         <template v-else>

src/components/TempComponent.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { useLoadingBarStore } from '@/store/useLoadingBarStore'
-import { useLoadingBar } from 'naive-ui'
+import { useLoadingBar, useMessage } from 'naive-ui'
 import { onMounted } from 'vue'
 
 // Setup code
 onMounted(() => {
+  window.$loadingBar = useLoadingBar()
+  window.$message = useMessage()
   const providerStore = useLoadingBarStore()
-  const loadingBar = useLoadingBar()
+  providerStore.setLoadingBar(window.$loadingBar)
-  providerStore.setLoadingBar(loadingBar)
 })
 </script>
 

src/data/VTsuruTypes.ts

@@ -13,7 +13,8 @@ export type TemplateConfig<T> = {
   onConfirm?: (arg0: T) => void
 }
 interface TemplateConfigBase {
-  name: string
+  name: string | VNode
+  key: string //将被保存到指定key中
 }
 
 type CommonProps = TemplateConfigBase
@@ -27,7 +28,6 @@ export type TemplateConfigItemWithType<T, V> = CommonProps & { data?: DataAccess
 
 export type TemplateConfigStringItem<T> = TemplateConfigItemWithType<T, string> & {
   type: 'string'
-  key: string //将被保存到指定key中
 }
 export type TemplateConfigStringArrayItem<T> = TemplateConfigItemWithType<T, string[]> & {
   type: 'stringArray'
@@ -51,7 +51,6 @@ export type TemplateConfigRenderItem<T> = TemplateConfigBase & {
 export type TemplateConfigImageItem<T> = TemplateConfigBase & {
   type: 'image' // Specifies the type of configuration item as 'image'.
   imageLimit: number // The maximum number of images allowed.
-  key: string //图片将被保存到指定key中, 类型为字符串数组
   /**
    * Callback function triggered upon image upload.
    * @param {string[]} uploadedImages - The uploaded image or array of images.

src/store/useMusicRequest.ts

@@ -1,6 +1,7 @@
 import { DanmakuUserInfo, SongFrom, SongsInfo } from '@/api/api-models'
+import { createNaiveUIApi, theme } from '@/Utils'
 import { useStorage } from '@vueuse/core'
-import { useMessage } from 'naive-ui'
+import { ConfigProviderProps, createDiscreteApi, zhCN } from 'naive-ui'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
@@ -34,16 +35,21 @@ export type MusicRequestSettings = {
 }
 
 export const useMusicRequestProvider = defineStore('MusicRequest', () => {
-  const waitingMusics = useStorage<WaitMusicInfo[]>('Setting.MusicRequest.Waiting', [])
+  const waitingMusics = useStorage<WaitMusicInfo[]>(
+    'Setting.MusicRequest.Waiting',
+    []
+  )
   const originMusics = ref<SongsInfo[]>([])
-  const aplayerMusics = computed(() => originMusics.value.map((m) => songToMusic(m)))
+  const aplayerMusics = computed(() =>
+    originMusics.value.map((m) => songToMusic(m))
+  )
   const currentMusic = ref<Music>({
     id: -1,
     title: '',
     artist: '',
     src: '',
     pic: '',
-    lrc: '',
+    lrc: ''
   } as Music)
   const currentOriginMusic = ref<WaitMusicInfo>()
   const isPlayingOrderMusic = ref(false)
@@ -60,20 +66,29 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
     orderMusicFirst: true,
     platform: 'netease',
 
-    blacklist: [],
+    blacklist: []
   })
 
-  const message = useMessage()
+const message = window.$message
 
   function addWaitingMusic(info: WaitMusicInfo) {
-    if ((settings.value.orderMusicFirst && !isPlayingOrderMusic.value) || aplayerRef.value?.audio.paused == true) {
+    if (
+      (settings.value.orderMusicFirst && !isPlayingOrderMusic.value) ||
+      aplayerRef.value?.audio.paused == true
+    ) {
       playMusic(info.music)
       isPlayingOrderMusic.value = true
-      console.log(`正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`)
+      console.log(
-      message.success(`正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`)
+        `正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`
+      )
+      message.success(
+        `正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`
+      )
     } else {
       waitingMusics.value.push(info)
-      message.success(`[${info.from.name}] 点了一首 ${info.music.name} - ${info.music.author?.join('/')}`)
+      message.success(
+        `[${info.from.name}] 点了一首 ${info.music.name} - ${info.music.author?.join('/')}`
+      )
     }
   }
   function onMusicEnd() {
@@ -127,9 +142,12 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
       id: s.id,
       title: s.name,
       artist: s.author?.join('/'),
-      src: s.from == SongFrom.Netease ? `https://music.163.com/song/media/outer/url?id=${s.id}.mp3` : s.url,
+      src:
+        s.from == SongFrom.Netease
+          ? `https://music.163.com/song/media/outer/url?id=${s.id}.mp3`
+          : s.url,
       pic: s.cover ?? '',
-      lrc: '',
+      lrc: ''
     } as Music
   }
   function setSinkId() {
@@ -166,6 +184,6 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
     onMusicPlay,
     pauseMusic,
     nextMusic,
-    aplayerRef,
+    aplayerRef
   }
 })

src/views/manage/DashboardView.vue

@@ -4,6 +4,7 @@ import { BiliAuthCodeStatusType, BiliAuthModel } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
 import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import { useAuthStore } from '@/store/useAuthStore'
 import { Info24Filled, Mic24Filled, Question24Regular } from '@vicons/fluent'
 import { useLocalStorage } from '@vueuse/core'
 import {
@@ -14,23 +15,25 @@ import {
   NCountdown,
   NDivider,
   NEllipsis,
+  NFlex,
   NIcon,
   NInput,
   NInputGroup,
   NModal,
   NPopconfirm,
   NSpace,
+  NTabPane,
+  NTabs,
   NTag,
   NText,
   NTime,
   NTooltip,
-  useLoadingBar,
+  useMessage
-  useMessage,
 } from 'naive-ui'
 import { onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 import SettingsManageView from './SettingsManageView.vue'
-import { useAuthStore } from '@/store/useAuthStore'
+import Setting_PaymentView from './Setting_PaymentView.vue'
 
 const token = ref('')
 const turnstile = ref()
@@ -283,7 +286,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NSpace justify="center" align="center" vertical style="width: 100%">
+  <NFlex justify="center" align="center" vertical>
     <NAlert type="warning" title="2024.2.26">
       近期逸站对开放平台直播弹幕流进行了极为严格的限制, 目前本站服务器只能连接个位数的直播间, 这使得在不使用
       <NButton tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank" type="primary" text>
@@ -297,169 +300,162 @@ onUnmounted(() => {
       </NButton>
       以获得完整的功能体验
     </NAlert>
-    <NCard embedded style="width: 100%">
+    <NTabs type="segment" animated v-if="accountInfo" style="width: 100%;">
-      <NSpace align="center" justify="center" vertical>
+      <NTabPane name="info" tab="个人信息" style="width: 100%;" display-directive="show:lazy">
-        <NText style="font-size: 3rem">
+        <NFlex justify="center" align="center">
-          {{ accountInfo?.name }}
+          <NCard embedded style="width: 100%;max-width: 800px;">
-        </NText>
+            <NSpace align="center" justify="center" vertical>
-        <NText style="color: gray">
+              <NText style="font-size: 3rem">
-          于
+                {{ accountInfo?.name }}
-          <NTime :time="accountInfo?.createAt" />
+              </NText>
-          注册
+              <NText style="color: gray">
-        </NText>
+                于
-      </NSpace>
+                <NTime :time="accountInfo?.createAt" />
-      <NDivider>
+                注册
-        <NText depth="3" style="font-size: 18px"> {{ accountInfo?.id }} </NText>
+              </NText>
-      </NDivider>
+            </NSpace>
-      <NSpace vertical>
+            <NDivider>
-        <NCard size="small">
+              <NText depth="3" style="font-size: 18px"> {{ accountInfo?.id }} </NText>
-          <NSpace :size="5">
+            </NDivider>
-            邮箱:
+            <NSpace vertical>
-            <NEllipsis v-if="accountInfo?.isEmailVerified" style="max-width: 100%">
+              <NCard size="small">
-              <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.bindEmail }} </NText>
+                <NSpace :size="5">
-            </NEllipsis>
+                  邮箱:
-            <template v-else>
+                  <NEllipsis v-if="accountInfo?.isEmailVerified" style="max-width: 100%">
-              <NTag type="error" size="small"> 未认证 </NTag>
+                    <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.bindEmail }} </NText>
-            </template>
+                  </NEllipsis>
-            <NButton
+                  <template v-else>
-              v-if="accountInfo?.isEmailVerified"
+                    <NTag type="error" size="small"> 未认证 </NTag>
-              type="warning"
+                  </template>
-              size="tiny"
+                  <NButton v-if="accountInfo?.isEmailVerified" type="warning" size="tiny"
-              @click="resetEmailModalVisiable = true"
+                    @click="resetEmailModalVisiable = true">
-            >
+                    修改邮箱
-              修改邮箱
+                  </NButton>
-            </NButton>
+                </NSpace>
-          </NSpace>
+              </NCard>
-        </NCard>
+              <NCard size="small">
-        <NCard size="small">
+                主播 Bilibili 账户:
-          主播 Bilibili 账户:
+                <NEllipsis v-if="accountInfo?.isBiliVerified" style="max-width: 100%">
-          <NEllipsis v-if="accountInfo?.isBiliVerified" style="max-width: 100%">
+                  <NText style="color: var(--primary-color)">
-            <NText style="color: var(--primary-color)">
+                    <NSpace :size="5" align="center">
-              <NSpace :size="5" align="center">
+                      已认证 | {{ accountInfo?.biliId }}
-                已认证 | {{ accountInfo?.biliId }}
+                      <NTag v-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Active" type="success"
-                <NTag
+                        size="small" :bordered="false">
-                  v-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Active"
+                        身份码: 有效
-                  type="success"
+                      </NTag>
-                  size="small"
+                      <NTag v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Inactive" type="error"
-                  :bordered="false"
+                        size="small" :bordered="false">
-                >
+                        身份码: 需更新
-                  身份码: 有效
+                      </NTag>
-                </NTag>
+                      <NTag v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Notfound" type="warning"
-                <NTag
+                        size="small" :bordered="false">
-                  v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Inactive"
+                        身份码: 需绑定
-                  type="error"
+                        <NTooltip>
-                  size="small"
+                          <template #trigger>
-                  :bordered="false"
+                            <NIcon :component="Mic24Filled" />
-                >
+                          </template>
-                  身份码: 需更新
+                          如果你不是主播的话则不需要在意这个提示
-                </NTag>
+                        </NTooltip>
-                <NTag
+                      </NTag>
-                  v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Notfound"
+                      <NButton size="tiny" type="info" @click="bindBiliCodeModalVisiable = true"> 更新身份码 </NButton>
-                  type="warning"
+                      <NPopconfirm @positive-click="resetBili">
-                  size="small"
+                        <template #trigger>
-                  :bordered="false"
+                          <NButton size="tiny" type="error"> 解除认证 </NButton>
-                >
+                        </template>
-                  身份码: 需绑定
+                        确定解除认证吗? 解除后现有的数据跟踪数据将被删除并且无法恢复
-                  <NTooltip>
+                      </NPopconfirm>
+                    </NSpace>
+                  </NText>
+                </NEllipsis>
+                <template v-else>
+                  <NTag type="error" size="small">
+                    未绑定
+                    <NTooltip>
+                      <template #trigger>
+                        <NIcon :component="Info24Filled" />
+                      </template>
+                      如果你不是主播的话则不需要在意这个
+                    </NTooltip>
+                  </NTag>
+                  <NDivider vertical />
+                  <NButton size="small" @click="bindBiliCodeModalVisiable = true" type="info"> 进行绑定 </NButton>
+                </template>
+              </NCard>
+              <NCard size="small">
+                用户 Bilibili 账户:
+                <NEllipsis v-if="accountInfo?.biliUserAuthInfo" style="max-width: 100%">
+                  <NText style="color: var(--primary-color)">
+                    <NSpace :size="5" align="center">
+                      已绑定 | {{ accountInfo?.biliUserAuthInfo?.name }} [{{ accountInfo?.biliUserAuthInfo?.userId }}]
+                      <NPopconfirm @positive-click="resetBiliAuthBind">
+                        <template #trigger>
+                          <NButton size="tiny" type="error"> 解除绑定 </NButton>
+                        </template>
+                        确定解除绑定吗?
+                      </NPopconfirm>
+                    </NSpace>
+                  </NText>
+                </NEllipsis>
+                <template v-else>
+                  <NTag type="error" size="small">
+                    未认证
+                    <NTooltip>
+                      <template #trigger>
+                        <NIcon :component="Info24Filled" />
+                      </template>
+                      用于进行积分兑换等操作, 如果你是主播可以不用管,
+                      并且即使不绑定也可以直接用认证完成给出的链接查看和使用积分
+                    </NTooltip>
+                  </NTag>
+                  <NDivider vertical />
+                  <NButton size="small" @click="bindBiliAuthModalVisiable = true" type="info"> 进行认证 </NButton>
+                </template>
+              </NCard>
+              <EventFetcherStatusCard />
+              <NAlert title="Token" type="info">
+                请注意保管, 这个东西可以完全操作你的账号
+                <NInputGroup>
+                  <NInput type="password" :value="accountInfo?.token" show-password-on="click" status="error" />
+                  <NPopconfirm @positive-click="resetToken">
                     <template #trigger>
-                      <NIcon :component="Mic24Filled" />
+                      <NButton type="error"> 重置 </NButton>
                     </template>
-                    如果你不是主播的话则不需要在意这个提示
+                    确定要重新生成 Token 吗? EventFetcher 等设施将需要重新部署
-                  </NTooltip>
+                  </NPopconfirm>
-                </NTag>
+                </NInputGroup>
-                <NButton size="tiny" type="info" @click="bindBiliCodeModalVisiable = true"> 更新身份码 </NButton>
+              </NAlert>
-                <NPopconfirm @positive-click="resetBili">
+            </NSpace>
-                  <template #trigger>
+            <NDivider />
-                    <NButton size="tiny" type="error"> 解除认证 </NButton>
+            <NSpace justify="center">
-                  </template>
+              <NButton type="info" @click="resetNameModalVisiable = true"> 修改用户名 </NButton>
-                  确定解除认证吗? 解除后现有的数据跟踪数据将被删除并且无法恢复
+              <NButton type="warning" @click="resetPasswordModalVisiable = true"> 修改密码 </NButton>
-                </NPopconfirm>
+              <NPopconfirm @positive-click="logout">
-              </NSpace>
-            </NText>
-          </NEllipsis>
-          <template v-else>
-            <NTag type="error" size="small">
-              未绑定
-              <NTooltip>
                 <template #trigger>
-                  <NIcon :component="Info24Filled" />
+                  <NButton type="error"> 登出 </NButton>
                 </template>
-                如果你不是主播的话则不需要在意这个
+                确定登出?
-              </NTooltip>
+              </NPopconfirm>
-            </NTag>
+            </NSpace>
-            <NDivider vertical />
+          </NCard>
-            <NButton size="small" @click="bindBiliCodeModalVisiable = true" type="info"> 进行绑定 </NButton>
+        </NFlex>
-          </template>
+      </NTabPane>
-        </NCard>
+      <NTabPane name="setting" tab="设置" display-directive="show:lazy">
-        <NCard size="small">
+        <SettingsManageView />
-          用户 Bilibili 账户:
+      </NTabPane>
-          <NEllipsis v-if="accountInfo?.biliUserAuthInfo" style="max-width: 100%">
+      <NTabPane name="payment" tab="增值" display-directive="show:lazy">
-            <NText style="color: var(--primary-color)">
+        <Setting_PaymentView />
-              <NSpace :size="5" align="center">
+      </NTabPane>
-                已绑定 | {{ accountInfo?.biliUserAuthInfo?.name }} [{{ accountInfo?.biliUserAuthInfo?.userId }}]
+    </NTabs>
-                <NPopconfirm @positive-click="resetBiliAuthBind">
+  </NFlex>
-                  <template #trigger>
-                    <NButton size="tiny" type="error"> 解除绑定 </NButton>
-                  </template>
-                  确定解除绑定吗?
-                </NPopconfirm>
-              </NSpace>
-            </NText>
-          </NEllipsis>
-          <template v-else>
-            <NTag type="error" size="small">
-              未认证
-              <NTooltip>
-                <template #trigger>
-                  <NIcon :component="Info24Filled" />
-                </template>
-                用于进行积分兑换等操作, 如果你是主播可以不用管,
-                并且即使不绑定也可以直接用认证完成给出的链接查看和使用积分
-              </NTooltip>
-            </NTag>
-            <NDivider vertical />
-            <NButton size="small" @click="bindBiliAuthModalVisiable = true" type="info"> 进行认证 </NButton>
-          </template>
-        </NCard>
-        <EventFetcherStatusCard />
-        <NAlert title="Token" type="info">
-          请注意保管, 这个东西可以完全操作你的账号
-          <NInputGroup>
-            <NInput type="password" :value="accountInfo?.token" show-password-on="click" status="error" />
-            <NPopconfirm @positive-click="resetToken">
-              <template #trigger>
-                <NButton type="error"> 重置 </NButton>
-              </template>
-              确定要重新生成 Token 吗? EventFetcher 等设施将需要重新部署
-            </NPopconfirm>
-          </NInputGroup>
-        </NAlert>
-      </NSpace>
-      <NDivider />
-      <NSpace justify="center">
-        <NButton type="info" @click="resetNameModalVisiable = true"> 修改用户名 </NButton>
-        <NButton type="warning" @click="resetPasswordModalVisiable = true"> 修改密码 </NButton>
-        <NPopconfirm @positive-click="logout">
-          <template #trigger>
-            <NButton type="error"> 登出 </NButton>
-          </template>
-          确定登出?
-        </NPopconfirm>
-      </NSpace>
-    </NCard>
-  </NSpace>
-  <div>
-    <NDivider />
-    <SettingsManageView />
-    <NDivider />
-  </div>
   <NModal v-model:show="resetEmailModalVisiable" preset="card" title="改绑邮箱" style="width: 400px; max-width: 90%">
     <NSpace vertical>
       <NInput v-model:value="newEmailAddress" placeholder="新邮箱地址" />
       <NInputGroup>
         <NInput v-model:value="newEmailVerifyCode" placeholder="验证码" />
         <NButton type="primary" @click="sendEmailVerifyCode">
-          发送验证码 <template v-if="!canSendEmailVerifyCode"> | <NCountdown :duration="60000" /> </template>
+          发送验证码 <template v-if="!canSendEmailVerifyCode"> |
+            <NCountdown :duration="60000" />
+          </template>
         </NButton>
       </NInputGroup>
     </NSpace>
@@ -484,12 +480,7 @@ onUnmounted(() => {
       <NButton @click="resetName" type="warning" :loading="isLoading"> 确定修改 </NButton>
     </template>
   </NModal>
-  <NModal
+  <NModal v-model:show="bindBiliCodeModalVisiable" preset="card" title="绑定/更新身份码" style="width: 400px; max-width: 90%">
-    v-model:show="bindBiliCodeModalVisiable"
-    preset="card"
-    title="绑定/更新身份码"
-    style="width: 400px; max-width: 90%"
-  >
     <NSpace vertical>
       <NInputGroup>
         <NInput v-model:value="biliCode" placeholder="身份码" />
@@ -509,21 +500,13 @@ onUnmounted(() => {
       </NInputGroup>
     </NSpace>
     <template #footer>
-      <NButton
+      <NButton @click="accountInfo?.isBiliVerified ? ChangeBili() : BindBili()" type="success"
-        @click="accountInfo?.isBiliVerified ? ChangeBili() : BindBili()"
+        :loading="!token || isLoading">
-        type="success"
-        :loading="!token || isLoading"
-      >
         确定
       </NButton>
     </template>
   </NModal>
-  <NModal
+  <NModal v-model:show="bindBiliAuthModalVisiable" preset="card" title="绑定用户账户" style="width: 700px; max-width: 90%">
-    v-model:show="bindBiliAuthModalVisiable"
-    preset="card"
-    title="绑定用户账户"
-    style="width: 700px; max-width: 90%"
-  >
     <NSpace vertical>
       <NAlert title="获取认证链接" type="info">
         因为部分功能如积分兑换等也需要对没有注册本站账户的用户开放, 所以需要现在另一个页面获取认证链接,

src/views/manage/Setting_PaymentView.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account';
+import { onMounted } from 'vue';
+
+const accountInfo = useAccount()
+
+const { } = defineProps<{
+
+}>()
+
+async function getAccountPaymentSettings() {
+  try {
+
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(() => {
+  getAccountPaymentSettings()
+});
+</script>
+
+<template>
+  WIP...
+</template>

src/views/view/forumViews/ForumPreviewItem.vue

@@ -35,7 +35,7 @@ function onDropdownSelect(key: string) {
         },
       })
       break
-    case 'delete':
+    case 'restore':
       dialog.warning({
         title: '问问',
         content: '确定要恢复这条话题吗？',

src/views/view/indexTemplate/SimpleIndexTemplate.vue

@@ -33,6 +33,7 @@ export const Config: TemplateConfig<ConfigType> = {
     },
     {
       name: 'test',
+      key: 'test',
       type: 'render',
       render: (config) => h('div', '1'),
     },