particularly complete forum function, add point order export and user delete

2025-12-06 18:36:55 +08:00 · 2024-03-22 01:47:55 +08:00
parent 87df8d5966
commit 932b83ddcd
52 changed files with 2806 additions and 132 deletions
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -36,6 +36,7 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
          </NSpace>
          <NDivider title-placement="left"> 更新日志 </NDivider>
          <NTimeline>
+            <NTimelineItem type="info" title="功能更新" content="积分订单添加导出功能, 允许删除积分用户" time="2024-3-22" />
            <NTimelineItem type="info" title="功能更新" content="1. 点歌(歌势) 修改为点播 2. 棉花糖支持创建话题(标签) 3. 一些bug修复" time="2024-3-12" />
            <NTimelineItem type="info" title="功能更新" content="棉花糖添加展示页面" time="2024-2-20" />
            <NTimelineItem type="info" title="功能更新" content="歌单新增从文件导入" time="2024-2-10" />
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -15,6 +15,7 @@ import {
  Live24Filled,
  Lottery24Filled,
  PeopleQueue24Filled,
+  Person48Filled,
  PersonFeedback24Filled,
  TabletSpeaker24Filled,
  VehicleShip24Filled,
@@ -463,7 +464,7 @@ onMounted(() => {
        <template #extra>
          <NSpace align="center" justify="center">
            <NSwitch
-              :default-value="!isDarkMode()"
+              :default-value="!isDarkMode"
              @update:value="
                (value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
              "
@@ -481,7 +482,7 @@ onMounted(() => {
              type="primary"
              @click="$router.push({ name: 'user-index', params: { id: accountInfo?.name } })"
            >
-              回到主页
+              回到展示页
            </NButton>
          </NSpace>
        </template>
@@ -520,7 +521,7 @@ onMounted(() => {
          </NSpace>
          <NButton v-if="accountInfo.biliUserAuthInfo" @click="gotoAuthPage()" type="info" secondary>
            <template #icon>
-              <NIcon :component="BrowsersOutline" />
+              <NIcon :component="Person48Filled" />
            </template>
            <template v-if="width >= 180"> 认证用户主页 </template>
          </NButton>
--- a/src/views/OpenLiveLayout.vue
+++ b/src/views/OpenLiveLayout.vue
@@ -154,7 +154,7 @@ onUnmounted(() => {
              {{ client?.roomAuthInfo.value ? `已连接 | ${client.roomAuthInfo.value?.anchor_info.uname}` : '未连接' }}
            </NTag>
            <NSwitch
-              :default-value="!isDarkMode()"
+              :default-value="!isDarkMode"
              @update:value="
                (value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
              "
@@ -198,7 +198,7 @@ onUnmounted(() => {
                round
                bordered
                :style="{
-                  boxShadow: isDarkMode() ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)',
+                  boxShadow: isDarkMode ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)',
                }"
              />
              <NEllipsis v-if="width > 100" style="max-width: 100%">
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -7,7 +7,13 @@ import { useUser } from '@/api/user'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
 import { FETCH_API } from '@/data/constants'
 import { useAuthStore } from '@/store/useAuthStore'
-import { BookCoins20Filled, CalendarClock24Filled, VideoAdd20Filled } from '@vicons/fluent'
+import {
+  BookCoins20Filled,
+  CalendarClock24Filled,
+  Person48Filled,
+  VideoAdd20Filled,
+  WindowWrench20Filled,
+} from '@vicons/fluent'
 import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
 import { useElementSize, useStorage } from '@vueuse/core'
 import {
@@ -51,6 +57,7 @@ const notfount = ref(false)
 const registerAndLoginModalVisiable = ref(false)
 const sider = ref()
 const { width } = useElementSize(sider)
+const windowWidth = window.innerWidth

 function renderIcon(icon: unknown) {
  return () => h(NIcon, null, { default: () => h(icon as any) })
@@ -73,11 +80,12 @@ function gotoAuthPage() {
    message.error('你尚未进行 Bilibili 认证, 请前往面板进行认证和绑定')
    return
  }
-  useAuthStore()
+  /*useAuthStore()
    .setCurrentAuth(accountInfo.value?.biliUserAuthInfo.token)
    .then(() => {
      NavigateToNewTab('/bili-user')
-    })
+    })*/
+  NavigateToNewTab('/bili-user')
 }
 onMounted(async () => {
  userInfo.value = await useUser(id.value?.toString())
@@ -193,7 +201,7 @@ onMounted(async () => {
        <template #extra>
          <NSpace align="center">
            <NSwitch
-              :default-value="!isDarkMode()"
+              :default-value="!isDarkMode"
              @update:value="
                (value: string & number & boolean) => (themeType = value ? ThemeType.Light : ThemeType.Dark)
              "
@@ -211,11 +219,16 @@ onMounted(async () => {
                  v-if="useAuth.isAuthed || accountInfo.biliUserAuthInfo"
                  style="right: 0px; position: relative"
                  type="primary"
-                  @click="gotoAuthPage"
+                  tag="a"
+                  href="/bili-user"
+                  target="_blank"
                  size="small"
                  secondary
                >
-                  认证用户中心
+                  <template #icon>
+                    <NIcon :component="Person48Filled" />
+                  </template>
+                  <span v-if="windowWidth >= 768"> 认证用户中心 </span>
                </NButton>
                <NButton
                  style="right: 0px; position: relative"
@@ -223,7 +236,10 @@ onMounted(async () => {
                  @click="$router.push({ name: 'manage-index' })"
                  size="small"
                >
-                  个人中心
+                  <template #icon>
+                    <NIcon :component="WindowWrench20Filled" />
+                  </template>
+                  <span v-if="windowWidth >= 768"> 主播后台 </span>
                </NButton>
              </NSpace>
            </template>
@@ -265,7 +281,7 @@ onMounted(async () => {
                round
                bordered
                :style="{
-                  boxShadow: isDarkMode() ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)',
+                  boxShadow: isDarkMode ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)',
                }"
              />
              <NEllipsis v-if="width > 100" style="max-width: 100%">
@@ -295,7 +311,7 @@ onMounted(async () => {
      <NLayout style="height: 100%">
        <div
          class="viewer-page-content"
-          :style="`box-shadow:${isDarkMode() ? 'rgb(28 28 28 / 9%) 5px 5px 6px inset, rgba(139, 139, 139, 0.09) -5px -5px 6px inset' : 'inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;'}`"
+          :style="`box-shadow:${isDarkMode ? 'rgb(28 28 28 / 9%) 5px 5px 6px inset, rgba(139, 139, 139, 0.09) -5px -5px 6px inset' : 'inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;'}`"
        >
          <RouterView v-if="userInfo" v-slot="{ Component }">
            <KeepAlive>
--- a/src/views/manage/EventView.vue
+++ b/src/views/manage/EventView.vue
@@ -3,7 +3,7 @@ import { isDarkMode } from '@/Utils'
 import { useAccount } from '@/api/account'
 import { QueryGetAPI } from '@/api/query'
 import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
-import { AVATAR_URL, BASE_API, EVENT_API_URL } from '@/data/constants'
+import { AVATAR_URL, BASE_API_URL, EVENT_API_URL } from '@/data/constants'
 import { Grid28Filled, List16Filled } from '@vicons/fluent'
 import { format } from 'date-fns'
 import { saveAs } from 'file-saver'
@@ -253,7 +253,7 @@ function objectsToCSV(arr: any[]) {
                        :color="{
                          color: selectedType == EventType.Guard ? GetGuardColor(item.price) : GetSCColor(item.price),
                          textColor: 'white',
-                          borderColor: isDarkMode() ? 'white' : '#00000000',
+                          borderColor: isDarkMode ? 'white' : '#00000000',
                        }"
                      >
                        {{ item.price }}
--- a/src/views/manage/ForumManage.vue
+++ b/src/views/manage/ForumManage.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { QueryPostAPI } from '@/api/query'
+import { useForumStore } from '@/store/useForumStore'
+import {
+  DataTableColumns,
+  NAlert,
+  NButton,
+  NCard,
+  NCheckbox,
+  NDataTable,
+  NDescriptions,
+  NDescriptionsItem,
+  NDivider,
+  NFlex,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NModal,
+  NSelect,
+  NSpin,
+  NTabPane,
+  NTabs,
+  NTag,
+  NTime,
+  useMessage,
+} from 'naive-ui'
+import { h, ref } from 'vue'
+import { ForumModel, ForumUserModel } from '@/api/models/forum'
+import { FORUM_API_URL } from '@/data/constants'
+// @ts-ignore
+import Agreement from '@/document/EnableForumAgreement.md'
+import { UserBasicInfo } from '@/api/api-models'
+
+const useForum = useForumStore()
+const accountInfo = useAccount()
+const message = useMessage()
+
+const managedForums = ref((await useForum.GetManagedForums()) ?? [])
+const currentForum = ref((await useForum.GetForumInfo(accountInfo.value.id)) ?? ({} as ForumModel))
+const selectedForum = ref(accountInfo.value.id)
+
+const readedAgreement = ref(false)
+const showAgreement = ref(false)
+const create_Name = ref('')
+const create_Description = ref('')
+
+const paginationSetting = { defaultPageSize: 20, showSizePicker: true, pageSizes: [20, 50, 100] }
+
+async function createForum() {
+  if (!readedAgreement.value) {
+    message.warning('请先阅读并同意服务协议')
+    return
+  }
+  if (!create_Name.value) {
+    message.warning('请输入名称')
+    return
+  }
+  try {
+    const data = await QueryPostAPI<ForumModel>(FORUM_API_URL + 'create', {
+      name: create_Name.value,
+    })
+    if (data.code == 200) {
+      message.success('创建成功')
+      currentForum.value = data.data
+    } else {
+      message.error('创建失败:' + data.message)
+      console.error(data.message)
+    }
+  } catch (err) {
+    console.error(err)
+    message.error('创建失败:' + err)
+  }
+}
+async function SwitchForum(owner: number) {
+  currentForum.value = (await useForum.GetForumInfo(owner)) ?? ({} as ForumModel)
+}
+const defaultColumns: DataTableColumns<ForumUserModel> = [
+  {
+    title: '名称',
+    key: 'name',
+  },
+  {
+    title: 'B站账号',
+    key: 'biliId',
+    render(row) {
+      return h(NTag, { type: row.isBiliAuthed ? 'success' : 'warning' }, () => (row.isBiliAuthed ? '已绑定' : '未绑定'))
+    },
+  },
+]
+const applyingColumns: DataTableColumns<ForumUserModel> = [
+  ...defaultColumns,
+  {
+    title: '操作',
+    key: 'action',
+    render(row) {
+      return h(
+        NButton,
+        {
+          text: true,
+          type: 'success',
+          onClick: () =>
+            useForum.ConfirmApply(currentForum.value.owner.id, row.id).then((success) => {
+              if (success) message.success('操作成功')
+              currentForum.value.applying = currentForum.value.applying.filter((u) => u.id != row.id)
+            }),
+        },
+        { default: () => '通过申请' },
+      )
+    },
+  },
+]
+const memberColumns: DataTableColumns<ForumUserModel> = [
+  ...defaultColumns,
+  {
+    title: '操作',
+    key: 'action',
+    render(row) {
+      return h(
+        NButton,
+        {
+          text: true,
+          type: 'success',
+          onClick: () =>
+            useForum.ConfirmApply(currentForum.value.owner.id, row.id).then((success) => {
+              if (success) message.success('操作成功')
+              currentForum.value.applying = currentForum.value.applying.filter((u) => u.id != row.id)
+            }),
+        },
+        { default: () => '通过申请' },
+      )
+    },
+  },
+]
+const banColumns: DataTableColumns<ForumUserModel> = [
+  ...defaultColumns,
+  {
+    title: '操作',
+    key: 'action',
+    render(row) {
+      return h(
+        NButton,
+        {
+          text: true,
+          type: 'success',
+          onClick: () =>
+            useForum.ConfirmApply(currentForum.value.owner.id, row.id).then((success) => {
+              if (success) message.success('操作成功')
+              currentForum.value.applying = currentForum.value.applying.filter((u) => u.id != row.id)
+            }),
+        },
+        { default: () => '通过申请' },
+      )
+    },
+  },
+]
+</script>
+
+<template>
+  <NCard v-if="!currentForum.name" size="small" title="啊哦">
+    <NAlert type="error"> 你尚未创建粉丝讨论区 </NAlert>
+    <NDivider />
+    <NFlex justify="center">
+      <NFlex vertical>
+        <NButton @click="createForum" size="large" type="primary"> 创建粉丝讨论区 </NButton>
+        <NInputGroup>
+          <NInputGroupLabel> 名称 </NInputGroupLabel>
+          <NInput v-model:value="create_Name" placeholder="就是名称" maxlength="20" minlength="1" show-count />
+        </NInputGroup>
+
+        <NInput
+          v-model:value="create_Description"
+          placeholder="(可选) 公告/描述"
+          maxlength="200"
+          show-count
+          type="textarea"
+        />
+        <NCheckbox v-model:checked="readedAgreement">
+          已阅读并同意 <NButton @click="showAgreement = true" text type="info"> 服务协议 </NButton>
+        </NCheckbox>
+      </NFlex>
+    </NFlex>
+  </NCard>
+  <template v-else>
+    <NSpin :show="useForum.isLoading">
+      <NSelect
+        v-model:value="selectedForum"
+        :options="
+          managedForums.map((f) => ({
+            label: (f.owner.id == accountInfo.id ? '[我的] ' : '') + f.name + ` (${f.owner.name})`,
+            value: f.owner.id,
+          }))
+        "
+        @update:value="(v) => SwitchForum(v)"
+      >
+        <template #header>
+          <NButton @click="SwitchForum(accountInfo.id)" size="small" type="primary"> 我的粉丝讨论区 </NButton>
+        </template>
+      </NSelect>
+      <NDivider />
+      <NTabs animated v-bind:key="selectedForum" type="segment">
+        <NTabPane tab="信息" name="info">
+          <NDescriptions bordered size="small">
+            <NDescriptionsItem label="名称"> {{ currentForum.name }} </NDescriptionsItem>
+            <NDescriptionsItem label="公告"> {{ currentForum.description ?? '无' }} </NDescriptionsItem>
+            <NDescriptionsItem label="创建者"> {{ currentForum.owner.name }} </NDescriptionsItem>
+            <NDescriptionsItem label="创建时间"> <NTime :time="currentForum.createAt" /> </NDescriptionsItem>
+            <NDescriptionsItem label="帖子数量"> {{ currentForum.topicCount }} </NDescriptionsItem>
+            <NDescriptionsItem v-if="currentForum.settings.requireApply" label="成员数量">
+              {{ currentForum.members?.length ?? 0 }}
+            </NDescriptionsItem>
+            <NDescriptionsItem label="管理员数量"> {{ currentForum.admins?.length ?? 0 }} </NDescriptionsItem>
+          </NDescriptions>
+          <NDivider> 设置 </NDivider>
+        </NTabPane>
+        <NTabPane tab="成员" name="member">
+          <NDivider> 申请 </NDivider>
+          <NDataTable
+            :columns="applyingColumns"
+            :data="currentForum.applying"
+            :pagination="paginationSetting"
+          />
+          <template v-if="currentForum.settings.requireApply">
+            <NDivider> 成员 </NDivider>
+            <NDataTable
+              :columns="memberColumns"
+              :data="currentForum.members.sort((a, b) => (a.isAdmin ? 1 : 0) - (b.isAdmin ? 1 : 0))"
+              :pagination="paginationSetting"
+            />
+          </template>
+          <NDivider> 封禁用户 </NDivider>
+          <NDataTable
+            :columns="banColumns"
+            :data="currentForum.blackList"
+            :pagination="paginationSetting"
+          />
+        </NTabPane>
+      </NTabs>
+    </NSpin>
+  </template>
+  <NModal
+    v-model:show="showAgreement"
+    preset="card"
+    title="开通粉丝讨论区用户协议"
+    style="width: 600px; max-width: 90vw"
+  >
+    <Agreement />
+  </NModal>
+</template>
--- a/src/views/manage/LiveManager.vue
+++ b/src/views/manage/LiveManager.vue
@@ -2,6 +2,7 @@
 import { useAccount } from '@/api/account'
 import { ResponseLiveInfoModel } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
+import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
 import LiveInfoContainer from '@/components/LiveInfoContainer.vue'
 import { LIVE_API_URL } from '@/data/constants'
 import { NAlert, NButton, NDivider, NList, NListItem, NPagination, NSpace, useMessage } from 'naive-ui'
@@ -43,7 +44,6 @@ function OnClickCover(live: ResponseLiveInfoModel) {

 <template>
  <NSpace vertical>
-    <NAlert type="warning"> 测试功能, 尚不稳定 </NAlert>
    <NAlert type="error" title="2024.2.26">
      近期逸站对开放平台直播弹幕流进行了极为严格的限制, 目前本站服务器只能连接个位数的直播间, 这使得在不使用
      <NButton tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank" type="primary" text>
@@ -57,6 +57,8 @@ function OnClickCover(live: ResponseLiveInfoModel) {
      </NButton>
      , 否则只能记录直播的时间而不包含弹幕
    </NAlert>
+
+    <EventFetcherStatusCard />
  </NSpace>
  <NDivider />
  <NAlert v-if="accountInfo?.isBiliVerified != true" type="info"> 尚未进行Bilibili认证 </NAlert>
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -160,7 +160,10 @@ onMounted(() => {

 <template>
  <NSpace align="center">
-    <NAlert type="info" style="max-width: 200px">
+    <NAlert
+      :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.QuestionBox) ? 'success' : 'warning'"
+      style="max-width: 200px"
+    >
      启用提问箱
      <NDivider vertical />
      <NSwitch
--- a/src/views/manage/ScheduleManageView.vue
+++ b/src/views/manage/ScheduleManageView.vue
@@ -262,7 +262,10 @@ onMounted(() => {

 <template>
  <NSpace align="center">
-    <NAlert type="info" style="max-width: 200px">
+    <NAlert
+      :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.Schedule) ? 'success' : 'warning'"
+      style="max-width: 200px"
+    >
      启用日程表
      <NDivider vertical />
      <NSwitch
--- a/src/views/manage/SongListManageView.vue
+++ b/src/views/manage/SongListManageView.vue
@@ -571,7 +571,10 @@ onMounted(async () => {

 <template>
  <NSpace align="center">
-    <NAlert type="info" style="max-width: 200px">
+    <NAlert
+      :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.SongList) ? 'success' : 'warning'"
+      style="max-width: 200px"
+    >
      启用歌单
      <NDivider vertical />
      <NSwitch
--- a/src/views/manage/VideoCollectManageView.vue
+++ b/src/views/manage/VideoCollectManageView.vue
@@ -127,7 +127,11 @@ function createTable() {
 </script>

 <template>
-  <NAlert type="info" v-if="accountInfo.id">
+  <NAlert
+    :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.VideoCollect) ? 'success' : 'warning'"
+    v-if="accountInfo.id"
+    style="max-width: 300px"
+  >
    在个人主页展示进行中的征集表
    <NSwitch
      :value="accountInfo.settings.enableFunctions.includes(FunctionTypes.VideoCollect)"
--- a/src/views/manage/point/PointManage.vue
+++ b/src/views/manage/point/PointManage.vue
@@ -337,7 +337,14 @@ onMounted(() => {})

 <template>
  <NFlex>
-    <NAlert type="info" style="min-width: 400px">
+    <NAlert
+      :type="
+        accountInfo.settings.enableFunctions.includes(FunctionTypes.Point) && accountInfo.eventFetcherState.online
+          ? 'success'
+          : 'warning'
+      "
+      style="min-width: 400px"
+    >
      启用
      <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/ohulp2torghlqqn8" target="_blank">
        积分系统
@@ -369,6 +376,9 @@ onMounted(() => {})
    <NTabPane name="goods" tab="礼物">
      <NFlex>
        <NButton type="primary" @click="onModalOpen"> 添加礼物 </NButton>
+        <NButton @click="$router.push({ name: 'user-goods', params: { id: accountInfo?.name } })" secondary>
+          前往展示页
+        </NButton>
      </NFlex>
      <NDivider />
      <NEmpty v-if="goods.filter((g) => g.status != GoodsStatus.Discontinued).length == 0" description="暂无礼物" />
--- a/src/views/manage/point/PointOrderManage.vue
+++ b/src/views/manage/point/PointOrderManage.vue
@@ -1,21 +1,47 @@
 <script setup lang="ts">
-import { ResponsePointGoodModel, ResponsePointOrder2OwnerModel } from '@/api/api-models'
+import { useAccount } from '@/api/account'
+import { GoodsTypes, PointOrderStatus, ResponsePointGoodModel, ResponsePointOrder2OwnerModel } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import PointOrderCard from '@/components/manage/PointOrderCard.vue'
 import { POINT_API_URL } from '@/data/constants'
-import { NEmpty, useMessage } from 'naive-ui'
-import { onMounted, ref } from 'vue'
+import { objectsToCSV } from '@/Utils'
+import { useStorage } from '@vueuse/core'
+import { format } from 'date-fns'
+import { saveAs } from 'file-saver'
+import { NButton, NCard, NCheckbox, NDivider, NEmpty, NFlex, NSelect, NSpin, useMessage } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+
+type OrderFilterSettings = {
+  type?: GoodsTypes
+  status?: PointOrderStatus
+  onlyRequireShippingInfo: boolean
+}

 const props = defineProps<{
  goods: ResponsePointGoodModel[]
 }>()
+const defaultSettings = {
+  onlyRequireShippingInfo: false,
+} as OrderFilterSettings
+const filterSettings = useStorage<OrderFilterSettings>('Setting.Point.OrderFilter', defaultSettings)

 const message = useMessage()
+const accountInfo = useAccount()

 const orders = ref<ResponsePointOrder2OwnerModel[]>([])
+const filteredOrders = computed(() => {
+  return orders.value.filter((o) => {
+    if (filterSettings.value.type != undefined && o.type !== filterSettings.value.type) return false
+    if (filterSettings.value.status != undefined && o.status !== filterSettings.value.status) return false
+    if (filterSettings.value.onlyRequireShippingInfo && o.trackingNumber) return false
+    return true
+  })
+})
+const isLoading = ref(false)

 async function getOrders() {
  try {
+    isLoading.value = true
    const data = await QueryGetAPI<ResponsePointOrder2OwnerModel[]>(POINT_API_URL + 'get-orders')
    if (data.code == 200) {
      return data.data
@@ -25,9 +51,53 @@ async function getOrders() {
  } catch (err) {
    console.log(err)
    message.error('获取订单失败: ' + err)
+  } finally {
+    isLoading.value = false
  }
  return []
 }
+const statusText = {
+  [PointOrderStatus.Completed]: '已完成',
+  [PointOrderStatus.Pending]: '等待发货',
+  [PointOrderStatus.Shipped]: '已发货',
+}
+function exportData() {
+  const text = objectsToCSV(
+    filteredOrders.value.map((s) => {
+      const gift = props.goods.find((g) => g.id == s.goodsId)
+      return {
+        订单号: s.id,
+        订单类型: s.type == GoodsTypes.Physical ? '实体' : '虚拟',
+        订单状态: statusText[s.status],
+        用户名: s.customer.name ?? '未知',
+        用户UID: s.customer.userId,
+        联系人: s.address?.name,
+        联系电话: s.address?.phone,
+        地址: s.address
+          ? `${s.address?.province}省${s.address?.city}市${s.address?.district}区${s.address?.street}街道${s.address?.address}`
+          : '无',
+        礼物名: gift?.name ?? '已删除',
+        礼物数量: s.count,
+        礼物单价: gift?.price,
+        礼物总价: s.point,
+        快递公司: s.expressCompany,
+        快递单号: s.trackingNumber,
+        创建时间: format(s.createAt, 'yyyy-MM-dd HH:mm:ss'),
+        更新时间: s.updateAt ? format(s.updateAt, 'yyyy-MM-dd HH:mm:ss') : '未更新',
+      }
+    }),
+  )
+  const BOM = new Uint8Array([0xef, 0xbb, 0xbf])
+  const utf8encoder = new TextEncoder()
+  const utf8array = utf8encoder.encode(text)
+  saveAs(
+    new Blob([BOM, utf8array], { type: 'text/csv;charset=utf-8;' }),
+    `积分订单_${format(Date.now(), 'yyyy-MM-dd HH:mm:ss')}_${accountInfo.value?.name}_.csv`,
+  )
+}
+async function refresh() {
+  orders.value = await getOrders()
+}

 onMounted(async () => {
  orders.value = await getOrders()
@@ -35,6 +105,48 @@ onMounted(async () => {
 </script>

 <template>
-  <NEmpty v-if="orders.length == 0" description="暂无订单"></NEmpty>
-  <PointOrderCard v-else :order="orders" :goods="goods" type="owner" />
+  <NSpin :show="isLoading">
+    <NEmpty v-if="filteredOrders.length == 0" description="暂无订单"></NEmpty>
+    <template v-else>
+      <br />
+      <NFlex>
+        <NButton @click="refresh">刷新</NButton>
+        <NButton @click="exportData" secondary type="info">导出数据</NButton>
+      </NFlex>
+      <NDivider />
+      <NCard size="small" title="筛选订单">
+        <template #header-extra>
+          <NButton @click="filterSettings = JSON.parse(JSON.stringify(defaultSettings))" size="small" type="warning">
+            重置
+          </NButton>
+        </template>
+        <NFlex align="center">
+          <NSelect
+            v-model:value="filterSettings.type"
+            :options="[
+              { label: '实体', value: GoodsTypes.Physical },
+              { label: '虚拟', value: GoodsTypes.Virtual },
+            ]"
+            clearable
+            placeholder="订单类型"
+            style="width: 150px"
+          />
+          <NSelect
+            v-model:value="filterSettings.status"
+            :options="[
+              { label: '已完成', value: PointOrderStatus.Completed },
+              { label: '等待发货', value: PointOrderStatus.Pending },
+              { label: '已发货', value: PointOrderStatus.Shipped },
+            ]"
+            placeholder="订单状态"
+            clearable
+            style="width: 150px"
+          />
+          <NCheckbox v-model:checked="filterSettings.onlyRequireShippingInfo" label="仅包含未填写快递单号的订单" />
+        </NFlex>
+      </NCard>
+      <NDivider />
+      <PointOrderCard :order="filteredOrders" :goods="goods" type="owner" />
+    </template>
+  </NSpin>
 </template>
--- a/src/views/manage/point/PointSettings.vue
+++ b/src/views/manage/point/PointSettings.vue
@@ -111,6 +111,14 @@ async function updateGift() {
 </script>

 <template>
+  <NAlert v-if="!accountInfo.eventFetcherState.online" type="warning">
+    由于你尚未部署
+    <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank">
+      VtsuruEventFetcher
+    </NButton>
+    , 以下选项设置了也没用
+  </NAlert>
+  <br />
  <NAlert type="info"> 积分总是最多保留两位小数, 四舍五入 </NAlert>
  <NDivider> 常用 </NDivider>
  <NSpin :show="isLoading">
--- a/src/views/manage/point/PointUserManage.vue
+++ b/src/views/manage/point/PointUserManage.vue
@@ -133,6 +133,22 @@ const column: DataTableColumns<ResponsePointUserModel> = [
          },
          { default: () => '详情' },
        ),
+        h(
+          NPopconfirm,
+          { onPositiveClick: () => deleteUser(row) },
+          {
+            default: '确定要删除这个用户吗？记录将无法恢复',
+            trigger: () =>
+              h(
+                NButton,
+                {
+                  type: 'error',
+                  size: 'small',
+                },
+                { default: () => '删除' },
+              ),
+          },
+        ),
      ])
    },
  },
@@ -176,7 +192,9 @@ async function givePoint() {
    if (data.code == 200) {
      message.success('添加成功')
      showGivePointModal.value = false
-      await refresh()
+      setTimeout(() => {
+        refresh()
+      }, 1500)

      addPointCount.value = 0
      addPointReason.value = undefined
@@ -186,6 +204,37 @@ async function givePoint() {
    }
  } catch (err) {
    message.error('添加失败: ' + err)
+  } finally {
+    isLoading.value = false
+  }
+}
+async function deleteUser(user: ResponsePointUserModel) {
+  isLoading.value = true
+  try {
+    const data = await QueryGetAPI(
+      POINT_API_URL + 'delete-user',
+      user.isAuthed
+        ? {
+            authId: user.info.id,
+          }
+        : user.info.userId
+          ? {
+              uId: user.info.userId,
+            }
+          : {
+              uId: user.info.openId,
+            },
+    )
+    if (data.code == 200) {
+      message.success('已删除')
+      users.value = users.value.filter((u) => u != user)
+    } else {
+      message.error('删除失败: ' + data.message)
+    }
+  } catch (err) {
+    message.error('删除失败: ' + err)
+  } finally {
+    isLoading.value = false
  }
 }

@@ -215,6 +264,7 @@ onMounted(async () => {
        <NCheckbox v-model:checked="settings.onlyAuthed"> 只显示已认证用户 </NCheckbox>
      </NFlex>
    </NCard>
+    <NDivider />
    <template v-if="filteredUsers.length == 0">
      <NDivider />
      <NEmpty :description="settings.onlyAuthed ? '没有已认证的用户' : '没有用户'" />
--- a/src/views/open_live/LiveRequest.vue
+++ b/src/views/open_live/LiveRequest.vue
@@ -747,7 +747,10 @@ onUnmounted(() => {
 </script>

 <template>
-  <NAlert type="info" v-if="accountInfo.id">
+  <NAlert
+    :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? 'success' : 'warning'"
+    v-if="accountInfo.id"
+  >
    启用弹幕点播功能
    <NSwitch
      :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.SongRequest)"
--- a/src/views/open_live/OpenQueue.vue
+++ b/src/views/open_live/OpenQueue.vue
@@ -749,7 +749,10 @@ onUnmounted(() => {
 </script>

 <template>
-  <NAlert type="info" v-if="accountInfo.id">
+  <NAlert
+    :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.Queue) ? 'success' : 'warning'"
+    v-if="accountInfo.id"
+  >
    启用弹幕队列功能
    <NSwitch
      :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.Queue)"
--- a/src/views/pointViews/PointGoodsView.vue
+++ b/src/views/pointViews/PointGoodsView.vue
@@ -199,7 +199,10 @@ onMounted(async () => {
  <NCard v-else style="max-width: 600px" embedded hoverable>
    <template #header> 你好, {{ useAuth.biliAuth.name }} </template>
    <template #header-extra>
-      <NButton type="info" @click="gotoAuthPage" secondary size="small"> 前往认证用户中心 </NButton>
+      <NFlex>
+        <NButton type="info" @click="gotoAuthPage" secondary size="small"> 前往认证用户中心 </NButton>
+        <NButton @click="NavigateToNewTab('/bili-user#settings')" secondary size="small"> 切换账号 </NButton>
+      </NFlex>
    </template>
    <NText> 你在 {{ userInfo.extra?.streamerInfo?.name ?? userInfo.name }} 的直播间的积分为 {{ currentPoint }} </NText>
  </NCard>
--- a/src/views/pointViews/PointOrderView.vue
+++ b/src/views/pointViews/PointOrderView.vue
@@ -3,7 +3,7 @@ import { ResponsePointOrder2UserModel } from '@/api/api-models'
 import PointOrderCard from '@/components/manage/PointOrderCard.vue'
 import { POINT_API_URL } from '@/data/constants'
 import { useAuthStore } from '@/store/useAuthStore'
-import { NEmpty, useMessage } from 'naive-ui'
+import { NEmpty, NSpin, useMessage } from 'naive-ui'
 import { onMounted, ref } from 'vue'

 const message = useMessage()
@@ -24,8 +24,9 @@ async function getOrders() {
  } catch (err) {
    console.log(err)
    message.error('获取订单失败: ' + err)
+  } finally {
+    isLoading.value = false
  }
-  isLoading.value = false
  return []
 }

@@ -35,6 +36,8 @@ onMounted(async () => {
 </script>

 <template>
-  <NEmpty v-if="orders.length == 0" description="暂无订单"></NEmpty>
-  <PointOrderCard v-else :order="orders" :loading="isLoading" type="user" />
+  <NSpin :show="isLoading">
+    <NEmpty v-if="orders.length == 0" description="暂无订单" />
+    <PointOrderCard v-else :order="orders" :loading="isLoading" type="user" />
+  </NSpin>
 </template>
--- a/src/views/pointViews/PointUserHistoryView.vue
+++ b/src/views/pointViews/PointUserHistoryView.vue
@@ -3,7 +3,7 @@ import { ResponsePointHisrotyModel } from '@/api/api-models'
 import PointHistoryCard from '@/components/manage/PointHistoryCard.vue'
 import { POINT_API_URL } from '@/data/constants'
 import { useAuthStore } from '@/store/useAuthStore'
-import { useMessage } from 'naive-ui'
+import { NSpin, useMessage } from 'naive-ui'
 import { onMounted, ref } from 'vue'

 const message = useMessage()
@@ -26,6 +26,8 @@ async function getHistories() {
  } catch (err) {
    message.error('获取积分历史失败: ' + err)
    console.error(err)
+  } finally {
+    isLoading.value = false
  }
  return []
 }
@@ -36,5 +38,7 @@ onMounted(async () => {
 </script>

 <template>
-  <PointHistoryCard :histories="history" />
+  <NSpin :show="isLoading">
+    <PointHistoryCard :histories="history" />
+  </NSpin>
 </template>
--- a/src/views/pointViews/PointUserLayout.vue
+++ b/src/views/pointViews/PointUserLayout.vue
@@ -4,6 +4,7 @@ import { POINT_API_URL } from '@/data/constants'
 import { useAuthStore } from '@/store/useAuthStore'
 import { useRouteHash } from '@vueuse/router'
 import {
+  NAlert,
  NButton,
  NCard,
  NDataTable,
@@ -123,11 +124,12 @@ onMounted(async () => {

 <template>
  <NLayout>
-    <NSpin v-if="!biliAuth.id && useAuth.currentToken" :show="useAuth.isLoading" />
+    <NSpin v-if="useAuth.isLoading && useAuth.currentToken" :show="useAuth.isLoading" />
    <NLayoutContent
-      v-else-if="!useAuth.currentToken && useAuth.biliTokens.length > 0"
+      v-else-if="(!useAuth.currentToken && useAuth.biliTokens.length > 0) || useAuth.isInvalid"
      style="height: 100vh; padding: 50px"
    >
+      <NAlert v-if="useAuth.isInvalid" type="error"> 当前登录的 Bilibili 账号已失效 </NAlert>
      <NCard title="选择B站账号" embedded>
        <template #header-extra>
          <NButton type="primary" @click="$router.push({ name: 'bili-auth' })" size="small" secondary
@@ -142,6 +144,7 @@ onMounted(async () => {
      </NCard>
    </NLayoutContent>
    <NLayoutContent v-else-if="!useAuth.currentToken" style="height: 100vh">
+      <NAlert v-if="useAuth.isInvalid" type="error"> 当前登录的 Bilibili 账号已失效 </NAlert>
      <NResult status="error" title="你还未进行过B站账户验证" description="请先进行认证" style="padding-top: 64px">
        <template #footer>
          <NButton type="primary" @click="$router.push({ name: 'bili-auth' })">去认证</NButton>
@@ -156,7 +159,7 @@ onMounted(async () => {
      </NLayoutHeader>
      <NLayoutContent content-style="padding: 24px;">
        <NFlex align="center" justify="center">
-          <div style="max-width: 95vw; width: 900px">
+          <div style="max-width: 95vw; width: 1200px">
            <NCard title="我的信息">
              <NDescriptions label-placement="left" bordered size="small">
                <NDescriptionsItem label="用户名">
--- a/src/views/pointViews/PointUserSettings.vue
+++ b/src/views/pointViews/PointUserSettings.vue
@@ -25,6 +25,7 @@ import {
  NSelect,
  NSpin,
  NTag,
+  NText,
  useMessage,
 } from 'naive-ui'
 import { computed, ref } from 'vue'
@@ -284,7 +285,7 @@ function logout() {
          <NListItem v-for="item in useAuth.biliTokens" :key="item.token" @click="switchAuth(item.token)">
            <NFlex align="center">
              <NTag v-if="useAuth.biliToken == item.token" type="info"> 当前账号 </NTag>
-              {{ item.uId }}
+              {{ item.name }} <NDivider vertical style="margin: 0" /><NText depth="3"> {{ item.uId }} </NText>
            </NFlex>
          </NListItem>
        </NList>
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -247,7 +247,7 @@ onUnmounted(() => {
            <NImage v-if="item.question.image" :src="item.question.image" height="100" lazy />
          </NCard>
          <template v-if="item.answer" #footer>
-            <NSpace align="center" :size="6">
+            <NSpace align="center" :size="6" :wrap="false">
              <NAvatar :src="biliInfo.face + '@64w'" circle :size="45" :img-props="{ referrerpolicy: 'no-referrer' }" />
              <NDivider vertical />
              <NText style="font-size: 16px">
--- a/src/views/view/forumViews/ForumCommentItem.vue
+++ b/src/views/view/forumViews/ForumCommentItem.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { ForumCommentModel, ForumTopicModel } from '@/api/models/forum'
+import { VTSURU_API_URL } from '@/data/constants'
+import { useForumStore } from '@/store/useForumStore'
+import { ArrowReply16Filled } from '@vicons/fluent'
+import { Heart, HeartOutline } from '@vicons/ionicons5'
+import { NAvatar, NButton, NCard, NDivider, NFlex, NIcon, NText, NTime, NTooltip } from 'naive-ui'
+import ForumReplyItem from './ForumReplyItem.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  item: ForumCommentModel
+  topic: ForumTopicModel
+}>()
+
+const useForum = useForumStore()
+const accountInfo = useAccount()
+
+const canOprate = computed(() => {
+  return !props.topic.isLocked && accountInfo.value.id > 0
+})
+</script>
+
+<template>
+  <NFlex>
+    <NAvatar
+      :src="VTSURU_API_URL + 'user-face/' + item.user.id + '?size=64'"
+      :img-props="{ referrerpolicy: 'no-referrer' }"
+    />
+    <NFlex vertical style="flex: 1" :size="2">
+      <NFlex>
+        <NText>
+          {{ item.user.name }}
+        </NText>
+        <NText depth="3">
+          <NTooltip>
+            <template #trigger>
+              <NTime :time="item.sendAt" type="relative" />
+            </template>
+            <NTime :time="item.sendAt" />
+          </NTooltip>
+        </NText>
+      </NFlex>
+      <div class="editor-content-view" v-html="item.content"></div>
+      <NDivider style="margin: 0" />
+      <NFlex>
+        <NTooltip>
+          <template #trigger>
+            <NButton
+              size="small"
+              @click="
+                useForum.LikeComment(item.id, !item.isLiked).then((success) => {
+                  if (success) {
+                    item.isLiked = !item.isLiked
+                    item.likeCount += item.isLiked ? 1 : -1
+                  }
+                })
+              "
+              text
+              :loading="useForum.isLikeLoading"
+              :disabled="!canOprate"
+            >
+              <template #icon>
+                <NIcon :component="item.isLiked ? Heart : HeartOutline" :color="item.isLiked ? '#dd484f' : ''" />
+              </template>
+              {{ item.likeCount }}
+            </NButton>
+          </template>
+          点赞
+        </NTooltip>
+        <NTooltip>
+          <template #trigger>
+            <NButton
+              size="small"
+              @click="useForum.SetReplyingComment(item)"
+              text
+              :disabled="!canOprate"
+            >
+              <template #icon>
+                <NIcon :component="ArrowReply16Filled" />
+              </template>
+              {{ item.replies.length }}
+            </NButton>
+          </template>
+          回复
+        </NTooltip>
+      </NFlex>
+      <NCard v-if="item.replies.length > 0" size="small">
+        <NFlex vertical>
+          <ForumReplyItem
+            v-for="reply in item.replies"
+            :key="reply.id"
+            :item="reply"
+            :comment="item"
+            :topic="topic"
+            showReplyButton
+            :reply-to="reply.replyTo ? item.replies.find((r) => r.id === reply.replyTo) : undefined"
+          />
+        </NFlex>
+      </NCard>
+    </NFlex>
+  </NFlex>
+</template>
--- a/src/views/view/forumViews/ForumPreviewItem.vue
+++ b/src/views/view/forumViews/ForumPreviewItem.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ForumModel, ForumTopicBaseModel } from '@/api/models/forum'
+import { useForumStore } from '@/store/useForumStore'
+import { ArrowReply24Filled, Chat24Regular, MoreVertical24Filled, Star24Filled } from '@vicons/fluent'
+import { NButton, NDropdown, NFlex, NIcon, NTag, NText, NTime, NTooltip, useDialog } from 'naive-ui'
+
+const props = defineProps<{
+  item: ForumTopicBaseModel
+  forum: ForumModel
+}>()
+
+const useForum = useForumStore()
+const dialog = useDialog()
+
+function onDropdownSelect(key: string) {
+  switch (key) {
+    case 'delete':
+      dialog.warning({
+        title: '警告',
+        content: '确定要删除这条话题吗？',
+        positiveText: '确定',
+        negativeText: '再想想',
+        onPositiveClick: () => {
+          useForum.DelTopic(props.item.id).then((success) => {
+            if (success) {
+              setTimeout(() => {
+                window.location.reload()
+              }, 1000)
+            }
+          })
+        },
+      })
+      break
+    case 'top':
+      dialog.info({
+        title: '问',
+        content: `确定要${props.item.isPinned ? '取消' : ''}置顶这条话题吗？`,
+        positiveText: '确定',
+        negativeText: '再想想',
+        onPositiveClick: () => {
+          useForum.SetTopicTop(props.item.id, !props.item.isPinned).then((success) => {
+            if (success) {
+              props.item.isPinned = !props.item.isPinned
+            }
+          })
+        },
+      })
+
+      break
+  }
+}
+</script>
+
+<template>
+  <NFlex align="center">
+    <NFlex align="center" :wrap="false">
+      <NTag v-if="item.isPinned" size="small" round>
+        <NIcon :component="Star24Filled" color="#dba913" />
+      </NTag>
+      <NTag size="small" style="color: gray">
+        <template #icon>
+          <NIcon :component="Chat24Regular" />
+        </template>
+        {{ item.commentCount }}
+      </NTag>
+      <NText style="font-size: large">
+        {{ item.title }}
+      </NText>
+    </NFlex>
+    <NFlex style="flex: 1; color: gray; font-size: small" justify="end" align="center">
+      <template v-if="item.latestRepliedBy">
+        <span>
+          <NIcon :component="ArrowReply24Filled" size="15" />
+          @{{ item.latestRepliedBy.name }}
+        </span>
+      </template>
+      <template v-else> @{{ item.user?.name }} 发布于 </template>
+      <NTooltip>
+        <template #trigger>
+          <NTime :time="item.createAt" type="relative" />
+        </template>
+        <NTime :time="item.createAt" />
+      </NTooltip>
+      <NDropdown
+        v-if="forum.isAdmin"
+        :options="[
+          { label: '删除', key: 'delete' },
+          { label: item.isPinned ? '取消置顶' : '置顶', key: 'top' },
+        ]"
+        trigger="hover"
+        @select="onDropdownSelect"
+      >
+        <NButton text>
+          <template #icon>
+            <NIcon :component="MoreVertical24Filled" />
+          </template>
+        </NButton>
+      </NDropdown>
+    </NFlex>
+  </NFlex>
+</template>
--- a/src/views/view/forumViews/ForumReplyItem.vue
+++ b/src/views/view/forumViews/ForumReplyItem.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { getUserAvatarUrl } from '@/Utils'
+import { useAccount } from '@/api/account'
+import { ForumCommentModel, ForumReplyModel, ForumTopicModel } from '@/api/models/forum'
+import { useForumStore } from '@/store/useForumStore'
+import { ArrowReply16Filled } from '@vicons/fluent'
+import { NAvatar, NButton, NCard, NFlex, NIcon, NText, NTime, NTooltip } from 'naive-ui'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  item: ForumReplyModel
+  replyTo?: ForumReplyModel
+  comment: ForumCommentModel
+  topic: ForumTopicModel
+  showReplyButton?: boolean
+}>()
+
+const useForum = useForumStore()
+const accountInfo = useAccount()
+
+const canOprate = computed(() => {
+  return !props.topic.isLocked && accountInfo.value.id > 0
+})
+</script>
+
+<template>
+  <NFlex align="center" class="forum-reply-item">
+    <NFlex :wrap="false" align="center">
+      <NTooltip v-if="replyTo">
+        <template #trigger>
+          <NIcon :component="ArrowReply16Filled" />
+        </template>
+        <ForumReplyItem :item="replyTo" :comment="comment" :topic="topic" :show-reply-button="false" />
+      </NTooltip>
+      <NAvatar
+        :src="getUserAvatarUrl(item.user.id)"
+        :img-props="{ referrerpolicy: 'no-referrer' }"
+        size="small"
+        round
+        style="margin-top: -3px; min-width: 28px; min-height: 28px"
+      />
+      <NText strong depth="3" style="white-space: nowrap">
+        {{ item.user.name }}
+      </NText>
+    </NFlex>
+    {{ item.content }}
+    <NFlex justify="end" align="center" :wrap="false" style="flex: 1">
+      <NTooltip>
+        <template #trigger>
+          <NText depth="3" style="font-size: small; min-width: 50px">
+            <NTime :time="item.sendAt" type="relative" />
+          </NText>
+        </template>
+        <NTime :time="item.sendAt" />
+      </NTooltip>
+      <NTooltip v-if="showReplyButton">
+        <template #trigger>
+          <NButton
+            size="tiny"
+            @click="useForum.SetReplyingComment(comment, item)"
+            round
+            secondary
+            :disabled="!canOprate"
+          >
+            <template #icon>
+              <NIcon :component="ArrowReply16Filled" />
+            </template>
+          </NButton>
+        </template>
+        回复这条回复
+      </NTooltip>
+    </NFlex>
+  </NFlex>
+</template>
+
+<style scoped>
+@media screen and (min-width: 900px) {
+  .forum-reply-item {
+    flex-wrap: nowrap !important;
+  }
+}
+</style>
--- a/src/views/view/forumViews/ForumTopicDetail.vue
+++ b/src/views/view/forumViews/ForumTopicDetail.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { getUserAvatarUrl } from '@/Utils'
+import { UserInfo } from '@/api/api-models'
+import { ForumCommentModel, ForumCommentSortTypes, ForumTopicModel } from '@/api/models/forum'
+import '@/assets/forumContentStyle.css'
+import TurnstileVerify from '@/components/TurnstileVerify.vue'
+import VEditor from '@/components/VEditor.vue'
+import { VTSURU_API_URL } from '@/data/constants'
+import { useForumStore } from '@/store/useForumStore'
+import { ArrowCircleLeft12Filled, ArrowCircleLeft12Regular, Comment24Regular, Eye24Regular } from '@vicons/fluent'
+import { Heart, HeartOutline } from '@vicons/ionicons5'
+import {
+  NAvatar,
+  NAvatarGroup,
+  NBackTop,
+  NBadge,
+  NButton,
+  NCard,
+  NDivider,
+  NEllipsis,
+  NEmpty,
+  NFlex,
+  NIcon,
+  NInput,
+  NList,
+  NListItem,
+  NModal,
+  NText,
+  NTime,
+  NTooltip,
+  useMessage,
+} from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import ForumCommentItem from './ForumCommentItem.vue'
+import ForumReplyItem from './ForumReplyItem.vue'
+import { useAccount } from '@/api/account'
+
+type PostCommentModel = {
+  content: string
+  topic: number
+}
+type PostReplyModel = {
+  content: string
+  comment: number
+  replyTo?: number
+}
+
+const { biliInfo, userInfo } = defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+  userInfo: UserInfo | undefined
+}>()
+
+const route = useRoute()
+const message = useMessage()
+const accountInfo = useAccount()
+
+const topicId = ref(-1)
+const useForum = useForumStore()
+
+const token = ref('')
+const turnstile = ref()
+const editorRef = ref()
+
+const showCommentModal = ref(false)
+const currentCommentContent = ref<PostCommentModel>({} as PostCommentModel)
+
+const currentReplyContent = ref<PostReplyModel>({} as PostReplyModel)
+
+const topic = ref<ForumTopicModel>({ id: -1 } as ForumTopicModel)
+const comments = ref<ForumCommentModel[]>([])
+const ps = ref(20)
+const pn = ref(0)
+const sort = ref(ForumCommentSortTypes.Time)
+
+const canOprate = computed(() => {
+  return !topic.value.isLocked && accountInfo.value.id > 0
+})
+
+async function postComment() {
+  if (!topic.value.id) return
+  if (!currentCommentContent.value.content) {
+    message.error('评论内容不能为空')
+    return
+  }
+  currentCommentContent.value.topic = topic.value.id
+  useForum
+    .PostComment(currentCommentContent.value, token.value)
+    .then(async (comment) => {
+      if (comment) {
+        comments.value = (await useForum.GetComments(topic.value.id, pn.value, ps.value, sort.value)) ?? []
+        currentCommentContent.value = {} as PostCommentModel
+        showCommentModal.value = false
+      }
+    })
+    .finally(() => {
+      turnstile.value?.reset()
+    })
+}
+async function postReply() {
+  if (!topic.value.id) return
+  if (!currentReplyContent.value.content) {
+    message.error('回复内容不能为空')
+    return
+  }
+  currentReplyContent.value.comment = useForum.replyingComment?.id ?? -1
+  currentReplyContent.value.replyTo = useForum.replyingReply?.id
+  useForum
+    .PostReply(currentReplyContent.value, token.value)
+    .then(async (comment) => {
+      if (comment) {
+        comments.value = (await useForum.GetComments(topic.value.id, pn.value, ps.value, sort.value)) ?? []
+        currentReplyContent.value = {} as PostReplyModel
+        useForum.SetReplyingComment()
+      }
+    })
+    .finally(() => {
+      turnstile.value?.reset()
+    })
+}
+
+onMounted(async () => {
+  if (route.params.topicId) {
+    topicId.value = route.params.topicId as unknown as number
+    topic.value = (await useForum.GetTopicDetail(topicId.value)) ?? ({ id: -1 } as ForumTopicModel)
+    comments.value = (await useForum.GetComments(topicId.value, pn.value, ps.value, sort.value)) ?? []
+  }
+})
+</script>
+
+<template>
+  <template v-if="!topic.id"> </template>
+  <template v-else>
+    <div size="small" embedded style="max-width: 1500px; margin: 0 auto">
+      <NBackTop />
+      <NBadge class="back-forum-badge" style="width: 100%; left: 0" type="info" :offset="[3, 3]">
+        <NCard size="small">
+          <NText style="font-size: large; font-weight: bold; text-align: center; width: 100%">
+            <NEllipsis style="width: 100%">
+              {{ topic.title }}
+            </NEllipsis>
+          </NText>
+        </NCard>
+        <template #value>
+          <NTooltip>
+            <template #trigger>
+              <NButton text @click="() => $router.push({ name: 'user-forum', params: { id: userInfo?.name } })">
+                <template #icon>
+                  <NIcon :component="ArrowCircleLeft12Regular" color="white" />
+                </template>
+              </NButton>
+            </template>
+            返回
+          </NTooltip>
+        </template>
+      </NBadge>
+      <NCard content-style="padding: 0 12px 0 12px;" embedded>
+        <template #header>
+          <NFlex align="center" :size="5">
+            <NAvatar
+              :src="VTSURU_API_URL + 'user-face/' + topic?.user?.id + '?size=64'"
+              :img-props="{ referrerpolicy: 'no-referrer' }"
+            />
+            <NDivider vertical />
+            {{ topic.user?.name }}
+          </NFlex>
+        </template>
+        <template #header-extra>
+          <NTooltip>
+            <template #trigger>
+              <NText depth="3">
+                <NTime :time="topic.createAt" type="relative" />
+              </NText>
+            </template>
+            <NTime :time="topic.createAt" />
+          </NTooltip>
+        </template>
+        <template #footer>
+          <NAvatarGroup
+            :size="30"
+            :options="topic.sampleLikedBy?.map((u) => ({ src: getUserAvatarUrl(u) })) ?? []"
+            :img-props="{ referrerpolicy: 'no-referrer' }"
+          />
+          <NDivider style="margin: 5px 0 10px 0" />
+          <NFlex>
+            <NTooltip>
+              <template #trigger>
+                <NButton size="small" :bordered="topic.isLiked" text>
+                  <template #icon>
+                    <NIcon :component="Eye24Regular" />
+                  </template>
+                  {{ topic.viewCount }}
+                </NButton>
+              </template>
+              浏览
+            </NTooltip>
+            <NTooltip>
+              <template #trigger>
+                <NButton
+                  size="small"
+                  @click="
+                    useForum.LikeTopic(topic.id, !topic.isLiked).then((success) => {
+                      if (success) {
+                        topic.isLiked = !topic.isLiked
+                        topic.likeCount += topic.isLiked ? 1 : -1
+                      }
+                    })
+                  "
+                  :bordered="topic.isLiked"
+                  secondary
+                  :type="topic.isLiked ? 'primary' : 'default'"
+                  :loading="useForum.isLikeLoading"
+                  :disabled="!canOprate"
+                >
+                  <template #icon>
+                    <NIcon :component="topic.isLiked ? Heart : HeartOutline" :color="topic.isLiked ? '#dd484f' : ''" />
+                  </template>
+                  {{ topic.likeCount }}
+                </NButton>
+              </template>
+              点赞
+            </NTooltip>
+            <NTooltip>
+              <template #trigger>
+                <NButton size="small" @click="showCommentModal = true" secondary :disabled="!canOprate">
+                  <template #icon>
+                    <NIcon :component="Comment24Regular" />
+                  </template>
+                  {{ topic.commentCount }}
+                </NButton>
+              </template>
+              评论
+            </NTooltip>
+          </NFlex>
+        </template>
+        <div class="editor-content-view" v-html="topic.content"></div>
+      </NCard>
+      <NDivider>
+        <NButton @click="showCommentModal = true" type="primary" :disabled="!canOprate">发送评论</NButton>
+      </NDivider>
+      <NEmpty v-if="comments.length === 0" description="暂无评论" />
+      <NList v-else hoverable bordered size="small">
+        <NListItem v-for="item in comments" :key="item.id">
+          <ForumCommentItem :item="item" :topic="topic" />
+        </NListItem>
+      </NList>
+      <NDivider />
+    </div>
+  </template>
+  <NModal v-model:show="showCommentModal" preset="card" style="width: 1000px; max-width: 90vw; height: auto">
+    <template #header> 发送评论 </template>
+    <VEditor v-model:value="currentCommentContent.content" :max-length="1111" ref="editorRef" />
+    <NButton type="primary" @click="postComment" :loading="!token || useForum.isLoading"> 发布 </NButton>
+  </NModal>
+  <NModal v-model:show="useForum.showReplyModal" preset="card" style="width: 1000px; max-width: 90vw; height: auto">
+    <template #header> 发送回复 </template>
+    <template v-if="useForum.replyingReply">
+      <NCard size="small" title="正在回复" embedded>
+        <ForumReplyItem
+          v-if="useForum.replyingReply && useForum.replyingComment"
+          :item="useForum.replyingReply"
+          :comment="useForum.replyingComment"
+          :topic="topic"
+          :show-reply-button="false"
+        />
+      </NCard>
+      <NDivider />
+    </template>
+    <NInput
+      v-model:value="currentReplyContent.content"
+      type="textarea"
+      placeholder="回复内容"
+      maxlength="233"
+      show-count
+    />
+    <NDivider />
+    <NButton type="primary" @click="postReply" :loading="!token || useForum.isLoading"> 发布 </NButton>
+  </NModal>
+  <TurnstileVerify ref="turnstile" v-model="token" />
+</template>
+
+<style>
+.n-badge-sup {
+  left: 0 !important;
+}
+</style>
--- a/src/views/view/forumViews/ForumView.vue
+++ b/src/views/view/forumViews/ForumView.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { UserInfo } from '@/api/api-models'
+import { ForumPostTopicModel, ForumTopicBaseModel, ForumTopicSortTypes, ForumUserLevels } from '@/api/models/forum'
+import TurnstileVerify from '@/components/TurnstileVerify.vue'
+import VEditor from '@/components/VEditor.vue'
+import { TURNSTILE_KEY } from '@/data/constants'
+import { useForumStore } from '@/store/useForumStore'
+import { useStorage } from '@vueuse/core'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NDivider,
+  NFlex,
+  NInput,
+  NList,
+  NListItem,
+  NModal,
+  NText,
+  NTime,
+  useMessage,
+} from 'naive-ui'
+import { onMounted, onUnmounted, ref } from 'vue'
+import VueTurnstile from 'vue-turnstile'
+import ForumPreviewItem from './ForumPreviewItem.vue'
+import ForumCommentItem from './ForumCommentItem.vue'
+
+const { biliInfo, userInfo } = defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+  userInfo: UserInfo | undefined
+}>()
+const token = ref('')
+const turnstile = ref()
+const editor = ref()
+
+const postTopicBackup = useStorage<{ [key: number]: ForumPostTopicModel }>('Forum.PostTopic', {})
+const showPostTopicModal = ref(false)
+const currentPostTopicModel = ref<ForumPostTopicModel>({} as ForumPostTopicModel)
+const lastBackupTopic = ref(Date.now())
+
+const useForum = useForumStore()
+const message = useMessage()
+const ps = ref(20)
+const pn = ref(0)
+const sort = ref(ForumTopicSortTypes.Time)
+
+const forumInfo = ref(await useForum.GetForumInfo(userInfo?.id ?? -1))
+const topics = ref<{ data: ForumTopicBaseModel[]; total: number; more: boolean } | undefined>({
+  data: [],
+  total: 0,
+  more: false,
+})
+
+async function ApplyToForum() {
+  if (!forumInfo.value) return
+  if (await useForum.ApplyToForum(forumInfo.value.owner.id ?? -1)) {
+    forumInfo.value.isApplied = true
+  }
+}
+function backupTopic() {
+  if (!showPostTopicModal.value) {
+    return
+  }
+  postTopicBackup.value[forumInfo.value?.owner.id ?? -1] = currentPostTopicModel.value
+  lastBackupTopic.value = Date.now()
+}
+function postTopic() {
+  currentPostTopicModel.value.owner = forumInfo.value?.owner.id ?? -1
+  useForum
+    .PostTopic(currentPostTopicModel.value, token.value)
+    .then(async (topic) => {
+      if (topic) {
+        currentPostTopicModel.value = {} as ForumPostTopicModel
+        delete postTopicBackup.value[forumInfo.value?.owner.id ?? -1]
+        showPostTopicModal.value = false
+        topics.value = await useForum.GetTopics(forumInfo.value?.owner.id ?? -1, ps.value, pn.value, sort.value)
+      }
+    })
+    .finally(() => {
+      turnstile.value?.reset()
+    })
+}
+
+let timer: any
+onMounted(async () => {
+  if (forumInfo.value) {
+    topics.value = await useForum.GetTopics(forumInfo.value.owner.id ?? -1, ps.value, pn.value, sort.value)
+    if (postTopicBackup.value[forumInfo.value.owner.id ?? -1]) {
+      currentPostTopicModel.value = postTopicBackup.value[forumInfo.value.owner.id ?? -1]
+    }
+    timer = setInterval(async () => {
+      backupTopic()
+    }, 10000)
+  }
+})
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+
+<template>
+  <NAlert v-if="!forumInfo" type="error"> 用户未创建粉丝讨论区 </NAlert>
+  <NCard
+    v-else-if="
+      (forumInfo.level < ForumUserLevels.Member && forumInfo.settings.requireApply) ||
+      forumInfo.settings.allowedViewerLevel > forumInfo.level
+    "
+  >
+    <NAlert type="warning"> 你需要成为成员才能访问 </NAlert>
+    <NAlert v-if="forumInfo.isApplied" type="success"> 已申请, 正在等待管理员审核 </NAlert>
+    <NCard v-else title="加入">
+      加入 {{ forumInfo.name }}
+      <NButton type="primary" @click="ApplyToForum" :loading="useForum.isLoading">
+        {{ forumInfo.settings.requireApply ? '申请' : '' }}加入
+      </NButton>
+    </NCard>
+  </NCard>
+  <template v-else>
+    <NFlex vertical>
+      <NCard size="small">
+        <template #header>
+          <NFlex justify="center">
+            <NText style="font-size: large">{{ forumInfo.name }}</NText>
+          </NFlex>
+        </template>
+      </NCard>
+      <NFlex>
+        <NCard style="max-width: 300px">
+          <NFlex vertical>
+            <NButton @click="showPostTopicModal = true"> 发布话题 </NButton>
+          </NFlex>
+        </NCard>
+        <NList bordered style="flex: 1" size="small" hoverable clickable>
+          <NListItem v-for="item in topics?.data ?? []" :key="item.id">
+            <a :href="`${$route.path}/topic/${item.id}`" target="_blank">
+              <ForumPreviewItem :item="item" :forum="forumInfo" />
+            </a>
+          </NListItem>
+        </NList>
+      </NFlex>
+    </NFlex>
+    <NModal preset="card" v-model:show="showPostTopicModal" style="width: 800px; max-width: 95%">
+      <template #header>
+        发布话题
+        <NDivider vertical />
+        <NText depth="3" style="font-size: small"> 保存于 <NTime :time="lastBackupTopic" format="HH:mm:ss" /> </NText>
+      </template>
+      <NFlex vertical>
+        <NInput v-model:value="currentPostTopicModel.title" placeholder="标题" />
+        <VEditor v-model:value="currentPostTopicModel.content" :max-length="2333" ref="editor" />
+        <NButton type="primary" @click="postTopic" :loading="!token || useForum.isLoading"> 发布 </NButton>
+      </NFlex>
+    </NModal>
+    <TurnstileVerify ref="turnstile" v-model="token" />
+  </template>
+</template>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+</style>
--- a/src/views/view/indexTemplate/DefaultIndexTemplate.vue
+++ b/src/views/view/indexTemplate/DefaultIndexTemplate.vue
@@ -60,7 +60,7 @@ export const Config: TemplateConfig<ConfigType> = {
        :img-props="{
          referrerpolicy: 'no-referrer',
        }"
-        :style="{ boxShadow: isDarkMode() ? 'rgb(195 192 192 / 35%) 0px 5px 20px' : '0 5px 15px rgba(0, 0, 0, 0.2)' }"
+        :style="{ boxShadow: isDarkMode ? 'rgb(195 192 192 / 35%) 0px 5px 20px' : '0 5px 15px rgba(0, 0, 0, 0.2)' }"
      />
      <NSpace align="baseline" justify="center">
        <NText strong style="font-size: 32px"> {{ biliInfo?.name }} </NText>