From 02c2309255523a359030270932791360618d313d Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Wed, 11 Oct 2023 23:23:07 +0800
Subject: [PATCH] 1011

---
 package.json                               |   1 +
 src/App.vue                                |   4 +-
 src/api/account.ts                         |  10 +-
 src/api/api-models.ts                      |  16 ++
 src/api/query.ts                           |  14 ++
 src/components/RegisterAndLogin.vue        | 114 +++++-----
 src/components/SongList.vue                | 232 ++++++++++++---------
 src/data/constants.ts                      |   1 +
 src/router/index.ts                        |   5 +
 src/views/ManageLayout.vue                 |   8 +-
 src/views/ViewerLayout.vue                 |  10 +-
 src/views/manage/LotteryView.vue           |  49 +++++
 src/views/manage/QuestionBoxManageView.vue | 204 +++++++++++++++---
 src/views/view/QuestionBoxView.vue         |  40 +++-
 src/views/view/SongListView.vue            |  14 +-
 yarn.lock                                  |   5 +
 16 files changed, 522 insertions(+), 205 deletions(-)
 create mode 100644 src/views/manage/LotteryView.vue

diff --git a/package.json b/package.json
index be4d9e7..14fa1c3 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@vueuse/router": "^10.1.2",
     "core-js": "^3.8.3",
     "grapheme-splitter": "^1.0.4",
+    "linqts": "^1.15.0",
     "universal-cookie": "^4.0.4",
     "vite": "^4.3.9",
     "vue": "^3.2.13",
diff --git a/src/App.vue b/src/App.vue
index 760f6a0..846a712 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <NMessageProvider>
     <NNotificationProvider>
-      <NConfigProvider :theme-overrides="themeOverrides" :locale="zhCN" style="height: 100vh">
+      <NConfigProvider :theme-overrides="themeOverrides" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
         <ViewerLayout v-if="layout == 'viewer'" />
         <ManageLayout v-else-if="layout == 'manage'" />
         <template v-else>
@@ -16,7 +16,7 @@
 import ViewerLayout from '@/views/ViewerLayout.vue'
 import ManageLayout from '@/views/ManageLayout.vue'
 import { useRoute } from 'vue-router'
-import { NConfigProvider, NMessageProvider, NNotificationProvider, zhCN } from 'naive-ui'
+import { NConfigProvider, NMessageProvider, NNotificationProvider, zhCN, dateZhCN } from 'naive-ui'
 import { computed } from 'vue'
 
 const route = useRoute()
diff --git a/src/api/account.ts b/src/api/account.ts
index 2d6aaf5..2bafaed 100644
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -17,13 +17,13 @@ export async function GetSelfAccount() {
       ACCOUNT.value = result.data
       console.log('[vtsuru] 已获取账户信息')
       return result.data
-    } else if (result.code == 403) {
-      cookie.value = ''
+    } else if (result.code == 401) {
+      localStorage.removeItem('JWT_Token')
       console.warn('[vtsuru] Cookie 已失效, 需要重新登陆')
       message.error('Cookie 已失效, 需要重新登陆')
-    }
-    else {
-      console.warn('[vtsuru] '+ result.message)
+      location.reload()
+    } else {
+      console.warn('[vtsuru] ' + result.message)
       message.error(result.message)
     }
   }
diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 84941ec..91dcaa5 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -95,3 +95,19 @@ export interface QAInfo {
   isFavorite:boolean
   sendAt: number
 }
+export interface LotteryUserInfo {
+  name: string
+  uId: number
+  level?: number
+  avatar: string
+  location?: string
+  isVIP?: boolean
+  card?: LotteryUserCardInfo
+}
+export interface LotteryUserCardInfo {
+  name: string
+  level: number
+  guardLevel: number
+  isGuard: boolean
+  isCharge: boolean
+}
diff --git a/src/api/query.ts b/src/api/query.ts
index 975c016..9d9fb0d 100644
--- a/src/api/query.ts
+++ b/src/api/query.ts
@@ -16,6 +16,20 @@ export async function QueryPostAPI<T>(url: string, body?: unknown, headers?: [st
   }) // 不处理异常, 在页面处理
   return (await data.json()) as APIRoot<T>
 }
+export async function QueryPostAPIWithParams<T>(urlString: string, params?: any, body?: any, contentType?: string, headers?: [string, string][]): Promise<APIRoot<T>> {
+  const url = new URL(urlString)
+  url.search = new URLSearchParams(params).toString()
+  headers ??= []
+  headers?.push(['Authorization', `Bearer ${cookie.value}`])
+  if (contentType) headers?.push(['Content-Type', contentType])
+
+  const data = await fetch(url, {
+    method: 'post',
+    headers: headers,
+    body: body,
+  }) // 不处理异常, 在页面处理
+  return (await data.json()) as APIRoot<T>
+}
 export async function QueryGetAPI<T>(urlString: string, params?: any, headers?: [string, string][]): Promise<APIRoot<T>> {
   const url = new URL(urlString)
   url.search = new URLSearchParams(params).toString()
diff --git a/src/components/RegisterAndLogin.vue b/src/components/RegisterAndLogin.vue
index a057501..23d9bae 100644
--- a/src/components/RegisterAndLogin.vue
+++ b/src/components/RegisterAndLogin.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { GetSelfAccount } from '@/api/account'
+import { AccountInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import { GetNotifactions } from '@/data/notifactions'
@@ -128,7 +129,10 @@ function onLoginButtonClick(e: MouseEvent) {
 
   formRef.value?.validate().then(async () => {
     isLoading.value = true
-    await QueryPostAPI<string>(
+    await QueryPostAPI<{
+      account: AccountInfo
+      token: string
+    }>(
       ACCOUNT_API_URL + 'login',
       {
         nameOrEmail: loginModel.value.account,
@@ -138,13 +142,11 @@ function onLoginButtonClick(e: MouseEvent) {
     )
       .then(async (data) => {
         if (data.code == 200) {
-          cookie.value = data.data
+          localStorage.setItem('JWT_Token', data.data.token)
+          message.success(`成功登陆为 ${data?.data.account.name}`)
           setTimeout(() => {
-            GetSelfAccount().then((data) => {
-              message.success(`成功登陆为 ${data?.name}`)
-              GetNotifactions();
-            })
-          }, 1)
+            location.reload()
+          }, 1000)
         } else {
           message.error(data.message)
         }
@@ -161,57 +163,51 @@ function onLoginButtonClick(e: MouseEvent) {
 </script>
 
 <template>
-  <NSpin :show="isLoading">
-    <NCard embedded>
-      <template #header-extra>
-        <slot name="header-extra"> </slot>
-      </template>
-      <template v-if="cookie">
-        <NAlert type="warning"> 你已经登录 </NAlert>
-      </template>
-      <template v-else>
-        <NTabs default-value="login" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
-          <NTabPane name="login" tab="登陆">
-            <NForm ref="formRef" :rules="loginRules" :model="loginModel">
-              <NFormItem path="account" label="用户名或邮箱">
-                <NInput v-model:value="loginModel.account" />
-              </NFormItem>
-              <NFormItem path="password" label="密码">
-                <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-              </NFormItem>
-            </NForm>
-            <NSpace vertical justify="center" align="center">
-              <NSpin :show="!token">
-                <NButton type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
-              </NSpin>
-            </NSpace>
-          </NTabPane>
-          <NTabPane name="register" tab="注册">
-            <NForm ref="formRef" :rules="registerRules" :model="registerModel">
-              <NFormItem path="username" label="用户名">
-                <NInput v-model:value="registerModel.username" />
-              </NFormItem>
-              <NFormItem path="email" label="邮箱">
-                <NInput v-model:value="registerModel.email" />
-              </NFormItem>
-              <NFormItem path="password" label="密码">
-                <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-              </NFormItem>
-              <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
-                <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
-              </NFormItem>
-            </NForm>
-            <NSpace vertical justify="center" align="center">
-              <NSpin :show="!token">
-                <NButton type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
-              </NSpin>
-            </NSpace>
-          </NTabPane>
-        </NTabs>
+  <NCard embedded>
+    <template #header-extra>
+      <slot name="header-extra"> </slot>
+    </template>
+    <template v-if="cookie">
+      <NAlert type="warning"> 你已经登录 </NAlert>
+    </template>
+    <template v-else>
+      <NTabs default-value="login" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+        <NTabPane name="login" tab="登陆">
+          <NForm ref="formRef" :rules="loginRules" :model="loginModel">
+            <NFormItem path="account" label="用户名或邮箱">
+              <NInput v-model:value="loginModel.account" />
+            </NFormItem>
+            <NFormItem path="password" label="密码">
+              <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+            </NFormItem>
+          </NForm>
+          <NSpace vertical justify="center" align="center">
+            <NButton :loading="!token || isLoading" type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
+          </NSpace>
+        </NTabPane>
+        <NTabPane name="register" tab="注册">
+          <NForm ref="formRef" :rules="registerRules" :model="registerModel">
+            <NFormItem path="username" label="用户名">
+              <NInput v-model:value="registerModel.username" />
+            </NFormItem>
+            <NFormItem path="email" label="邮箱">
+              <NInput v-model:value="registerModel.email" />
+            </NFormItem>
+            <NFormItem path="password" label="密码">
+              <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+            </NFormItem>
+            <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
+              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
+            </NFormItem>
+          </NForm>
+          <NSpace vertical justify="center" align="center">
+            <NButton :loading="!token || isLoading" type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
+          </NSpace>
+        </NTabPane>
+      </NTabs>
 
-        <NDivider />
-        <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
-      </template>
-    </NCard>
-  </NSpin>
+      <NDivider />
+      <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
+    </template>
+  </NCard>
 </template>
diff --git a/src/components/SongList.vue b/src/components/SongList.vue
index 5e8bb4d..6d15158 100644
--- a/src/components/SongList.vue
+++ b/src/components/SongList.vue
@@ -2,6 +2,7 @@
 import { SongAuthorInfo, SongFrom, SongLanguage, SongsInfo } from '@/api/api-models'
 import { QueryPostAPI } from '@/api/query'
 import { SONG_API_URL } from '@/data/constants'
+import { List } from 'linqts'
 import {
   DataTableColumns,
   FormInst,
@@ -25,7 +26,9 @@ import {
   NText,
   useMessage,
 } from 'naive-ui'
-import { onMounted, h, ref, watch } from 'vue'
+import { FilterOptionValue } from 'naive-ui/es/data-table/src/interface'
+import { nextTick } from 'process'
+import { onMounted, h, ref, watch, computed } from 'vue'
 import APlayer from 'vue3-aplayer'
 
 const props = defineProps<{
@@ -104,118 +107,135 @@ const songSelectOption = [
   },
 ]
 const tagsSelectOption = ref<{ label: string; value: string }[]>([])
+const tags = ref<string[]>([])
+const tagsOptions = computed(() => {
+  return tags.value.map((t) => ({
+    label: t,
+    value: t,
+  }))
+})
 
-const createColumns = (): DataTableColumns<SongsInfo> => [
-  {
-    title: '名称',
-    key: 'name',
-    resizable: true,
-    minWidth: 100,
-    width: 300,
-    sorter: 'default',
-    render(data) {
-      return h(NSpace, { size: 5 }, () => [h(NText, () => data.name), h(NText, { depth: '3' }, () => data.translateName)])
+function createColumns(): DataTableColumns<SongsInfo> {
+  return [
+    {
+      title: '名称',
+      key: 'name',
+      resizable: true,
+      minWidth: 100,
+      width: 300,
+      sorter: 'default',
+      render(data) {
+        return h(NSpace, { size: 5 }, () => [h(NText, () => data.name), h(NText, { depth: '3' }, () => data.translateName)])
+      },
     },
-  },
-  {
-    title: '作者',
-    key: 'artist',
-    width: 200,
-    resizable: true,
-    render(data) {
-      return h(NSpace, { size: 5 }, () => data.author.map((a) => h(NTag, { bordered: false, size: 'small', type: 'info' }, () => a)))
+    {
+      title: '作者',
+      key: 'artist',
+      width: 200,
+      resizable: true,
+      render(data) {
+        return h(NSpace, { size: 5 }, () => data.author.map((a) => h(NTag, { bordered: false, size: 'small', type: 'info' }, () => a)))
+      },
     },
-  },
-  {
-    title: '语言',
-    key: 'language',
-    width: 150,
-    resizable: true,
-    render(data) {
-      return (data.language?.length ?? 0) > 0
-        ? h(NSpace, { size: 5 }, () => data.language?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => songSelectOption.find((s) => s.value == a)?.label)))
-        : null
+    {
+      title: '语言',
+      key: 'language',
+      width: 150,
+      resizable: true,
+      render(data) {
+        return (data.language?.length ?? 0) > 0
+          ? h(NSpace, { size: 5 }, () => data.language?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => songSelectOption.find((s) => s.value == a)?.label)))
+          : null
+      },
     },
-  },
-  {
-    title: '描述',
-    key: 'description',
-    resizable: true,
-    render(data) {
-      return h(NEllipsis, () => data.description)
+    {
+      title: '描述',
+      key: 'description',
+      resizable: true,
+      render(data) {
+        return h(NEllipsis, () => data.description)
+      },
     },
-  },
-  {
-    title: '标签',
-    key: 'tags',
-    resizable: true,
-    render(data) {
-      return (data.tags?.length ?? 0) > 0 ? h(NSpace, { size: 5 }, () => data.tags?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a))) : null
+    {
+      title: '标签',
+      key: 'tags',
+      resizable: true,
+      filter(value, row) {
+        return (row.tags?.findIndex((t) => t == value.toString()) ?? -1) > -1
+      },
+      filterOptions: tagsOptions.value,
+      render(data) {
+        return (data.tags?.length ?? 0) > 0 ? h(NSpace, { size: 5 }, () => data.tags?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a))) : null
+      },
     },
-  },
-  {
-    title: '操作',
-    key: 'manage',
-    disabled: () => !props.canEdit,
-    width: 200,
-    render(data) {
-      return h(NSpace, {
-        justify: 'space-around'
-      }, () => [
-        h(
-          NButton,
+    {
+      title: '操作',
+      key: 'manage',
+      disabled: () => !props.canEdit,
+      width: 200,
+      render(data) {
+        return h(
+          NSpace,
           {
-            size: 'small',
-            onClick: () => {
-              updateSongModel.value = JSON.parse(JSON.stringify(data))
-              showModal.value = true
-            },
+            justify: 'space-around',
           },
-          {
-            default: () => '修改',
-          }
-        ),
-        h(
-          NButton,
-          {
-            type: 'primary',
-            size: 'small',
-            onClick: () => {
-              aplayerMusic.value = {
-                title: data.name,
-                artist: data.author.join('/') ?? '',
-                src: data.url,
-                pic: '',
+          () => [
+            h(
+              NButton,
+              {
+                size: 'small',
+                onClick: () => {
+                  updateSongModel.value = JSON.parse(JSON.stringify(data))
+                  showModal.value = true
+                },
+              },
+              {
+                default: () => '修改',
               }
-            },
-          },
-          {
-            default: () => '播放',
-          }
-        ),
-        h(
-          NButton,
-          {
-            type: 'error',
-            size: 'small',
-            onClick: () => {
-              aplayerMusic.value = {
-                title: data.name,
-                artist: data.author.join('/') ?? '',
-                src: data.url,
-                pic: '',
+            ),
+            h(
+              NButton,
+              {
+                type: 'primary',
+                size: 'small',
+                onClick: () => {
+                  aplayerMusic.value = {
+                    title: data.name,
+                    artist: data.author.join('/') ?? '',
+                    src: data.url,
+                    pic: '',
+                  }
+                },
+              },
+              {
+                default: () => '播放',
               }
-            },
-          },
-          {
-            default: () => '删除',
-          }
-        ),
-        GetPlayButton(data),
-      ])
+            ),
+            h(
+              NButton,
+              {
+                type: 'error',
+                size: 'small',
+                onClick: () => {
+                  aplayerMusic.value = {
+                    title: data.name,
+                    artist: data.author.join('/') ?? '',
+                    src: data.url,
+                    pic: '',
+                  }
+                },
+              },
+              {
+                default: () => '删除',
+              }
+            ),
+            GetPlayButton(data),
+          ]
+        )
+      },
     },
-  },
-]
+  ]
+}
 function GetPlayButton(song: SongsInfo) {
   switch (song.from) {
     case SongFrom.FiveSing: {
@@ -273,7 +293,13 @@ async function updateSong() {
 
 onMounted(() => {
   songsInternal.value = props.songs
-  columns.value = createColumns()
+  tags.value = new List(songsInternal.value)
+    .SelectMany((s) => new List(s?.tags))
+    .Distinct()
+    .ToArray()
+  setTimeout(() => {
+    columns.value = createColumns()
+  }, 1)
 })
 </script>
 
diff --git a/src/data/constants.ts b/src/data/constants.ts
index 49d9e1e..8dedab0 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -12,3 +12,4 @@ export const BILI_API_URL = `${BASE_API}bili/`
 export const SONG_API_URL = `${BASE_API}song-list/`
 export const NOTIFACTION_API_URL = `${BASE_API}notifaction/`
 export const QUESTION_API_URL = `${BASE_API}qa/`
+export const LOTTERY_API_URL = `${BASE_API}lottery/`
diff --git a/src/router/index.ts b/src/router/index.ts
index cf3b238..0afed9f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -65,6 +65,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'manage-questionBox',
         component: () => import('@/views/manage/QuestionBoxManageView.vue'),
       },
+      {
+        path: 'lottery',
+        name: 'manage-lottery',
+        component: () => import('@/views/manage/LotteryView.vue'),
+      },
       {
         path: 'bili-verify',
         name: 'manage-biliVerify',
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index cf35925..a28779e 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -24,7 +24,7 @@ const menuOptions = [
         },
         { default: () => '歌单' }
       ),
-    key: 'song-list',
+    key: 'manage-songList',
     icon: renderIcon(BookOutline),
   },
   {
@@ -36,9 +36,9 @@ const menuOptions = [
             name: 'manage-questionBox',
           },
         },
-        { default: () => '棉花糖(提问箱' }
+        { default: () => '棉花糖 (提问箱' }
       ),
-    key: 'song-list',
+    key: 'manage-questionBox',
     icon: renderIcon(BookOutline),
   },
 ]
@@ -52,7 +52,7 @@ const menuOptions = [
         <NButton>
           <RouterLink :to="{ name: 'manage-index' }"> 个人中心 </RouterLink>
         </NButton>
-        <NMenu :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
+        <NMenu :default-value="$route.name?.toString()" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
       </NLayoutSider>
       <NLayout style="height: 100%">
         <div style="box-sizing: border-box; padding: 20px">
diff --git a/src/views/ViewerLayout.vue b/src/views/ViewerLayout.vue
index 594abf7..77183e3 100644
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/component-name-in-template-casing -->
 <script setup lang="ts">
-import { NAvatar, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NEmpty, NResult, NPageHeader, NSwitch, useOsTheme } from 'naive-ui'
+import { NAvatar, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NEmpty, NResult, NPageHeader, NSwitch, useOsTheme, NModal } from 'naive-ui'
 import { computed, h, onMounted, ref } from 'vue'
 import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as WineIcon } from '@vicons/ionicons5'
 import { GetInfo, useUser, useUserWithUId } from '@/api/user'
@@ -8,6 +8,7 @@ import { RouterLink, useRoute } from 'vue-router'
 import { UserInfo } from '@/api/api-models'
 import { FETCH_API } from '@/data/constants'
 import { useAccount } from '@/api/account'
+import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
 
 const route = useRoute()
 const id = computed(() => {
@@ -19,6 +20,8 @@ const userInfo = ref<UserInfo>()
 const biliUserInfo = ref()
 const accountInfo = useAccount()
 
+const registerAndLoginModalVisiable = ref(false)
+
 function renderIcon(icon: unknown) {
   return () => h(NIcon, null, { default: () => h(icon as any) })
 }
@@ -100,7 +103,7 @@ onMounted(async () => {
               <NButton style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'manage-index' })"> 个人中心 </NButton>
             </template>
             <template v-else>
-              <NButton style="right: 0px; position: relative" type="primary"> 注册 / 登陆 </NButton>
+              <NButton style="right: 0px; position: relative" type="primary" @click="registerAndLoginModalVisiable = true"> 注册 / 登陆 </NButton>
             </template>
           </NSpace>
         </template>
@@ -134,6 +137,9 @@ onMounted(async () => {
       </NLayout>
     </NLayout>
   </NLayout>
+  <NModal v-model:show="registerAndLoginModalVisiable" style="width: 500px; max-width: 90vw;">
+    <RegisterAndLogin />
+  </NModal>
 </template>
 
 <style lang="stylus" scoped>
diff --git a/src/views/manage/LotteryView.vue b/src/views/manage/LotteryView.vue
new file mode 100644
index 0000000..d04c111
--- /dev/null
+++ b/src/views/manage/LotteryView.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { LotteryUserInfo } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { LOTTERY_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import { NButton, NTabPane, NTabs, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import VueTurnstile from 'vue-turnstile'
+
+interface TempLotteryResponseModel {
+  users: LotteryUserInfo[]
+  createTime: number
+  total: number
+}
+const message = useMessage()
+const token = ref()
+const turnstile = ref()
+
+const commentUsers = ref<TempLotteryResponseModel>()
+
+async function getCommentsUsers() {
+  await QueryGetAPI<TempLotteryResponseModel>(
+    LOTTERY_API_URL + 'comments',
+    {
+      id: 803541974225256452n,
+    },
+    [['Turnstile', token.value]]
+  )
+    .then((data) => {
+      if (data.code == 200) {
+        commentUsers.value = data.data
+      } else {
+        message.error('获取用户失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('获取失败')
+    })
+    .finally(() => {
+      turnstile.value?.reset()
+    })
+}
+</script>
+<template>
+  <NTabs>
+    <NTabPane name="dynamic" tab="动态抽奖"> <NButton @click="getCommentsUsers" :loading="!token"> 11 </NButton> </NTabPane>
+  </NTabs>
+  <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
+</template>
diff --git a/src/views/manage/QuestionBoxManageView.vue b/src/views/manage/QuestionBoxManageView.vue
index 40448f0..ed075a8 100644
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -1,22 +1,38 @@
 <script setup lang="ts">
 import { QAInfo } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import { BASE_API, QUESTION_API_URL } from '@/data/constants'
-import { HeartOutline } from '@vicons/ionicons5'
-import { NButton, NCard, NDivider, NIcon, NImage, NList, NListItem, NTabPane, NTabs, NTag, useMessage } from 'naive-ui'
-import { onMounted, ref } from 'vue'
+import { Heart, HeartOutline } from '@vicons/ionicons5'
+import { NButton, NCard, NDivider, NIcon, NImage, NInput, NList, NListItem, NModal, NSpace, NSwitch, NTabPane, NTabs, NTag, NText, NTime, NTooltip, useMessage } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { List } from 'linqts'
+import router from '@/router'
 
 const recieveQuestions = ref<QAInfo[]>([])
+const recieveQuestionsFiltered = computed(() => {
+  return onlyFavorite.value ? recieveQuestions.value.filter((d) => d.isFavorite) : recieveQuestions.value
+})
 const sendQuestions = ref<QAInfo[]>([])
 const message = useMessage()
 
 const selectedTabItem = ref('0')
+const isRepling = ref(false)
+const onlyFavorite = ref(false)
+
+const replyModalVisiable = ref(false)
+const currentQuestion = ref<QAInfo>()
+const replyMessage = ref()
 
 async function GetRecieveQAInfo() {
   await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-recieve')
     .then((data) => {
       if (data.code == 200) {
-        recieveQuestions.value = data.data
+        if (data.data.length > 0) {
+          recieveQuestions.value = new List(data.data)
+            .OrderBy((d) => d.isReaded)
+            .ThenByDescending((d) => d.sendAt)
+            .ToArray()
+        }
         message.success('共收取 ' + data.data.length + ' 条提问')
         isRevieveGetted = true
       } else {
@@ -43,6 +59,67 @@ async function GetSendQAInfo() {
       console.error(err)
     })
 }
+async function reply() {
+  isRepling.value = true
+  await QueryPostAPI<QAInfo>(QUESTION_API_URL + 'reply', {
+    Id: currentQuestion.value?.id,
+    Message: replyMessage.value,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        var index = recieveQuestions.value.findIndex((q) => q.id == currentQuestion.value?.id)
+        if (index > -1) {
+          recieveQuestions.value[index] = data.data
+        }
+        message.success('回复成功')
+        currentQuestion.value = undefined
+        replyModalVisiable.value = false
+      } else {
+        message.error('发送失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发送失败')
+    })
+    .finally(() => {
+      isRepling.value = false
+    })
+}
+async function read(question: QAInfo, read: boolean) {
+  await QueryGetAPI(QUESTION_API_URL + 'read', {
+    id: question.id,
+    read: read ? 'true' : 'false',
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        question.isReaded = read
+      } else {
+        message.error('修改失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('修改失败')
+    })
+}
+async function favorite(question: QAInfo, fav: boolean) {
+  await QueryGetAPI(QUESTION_API_URL + 'read', {
+    id: question.id,
+    read: fav ? 'true' : 'false',
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        question.isFavorite = fav
+      } else {
+        message.error('修改失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('修改失败')
+    })
+}
 let isRevieveGetted = false
 let isSendGetted = false
 async function onTabChange(value: string) {
@@ -54,6 +131,11 @@ async function onTabChange(value: string) {
     isSendGetted = true
   }
 }
+function onOpenModal(question: QAInfo) {
+  currentQuestion.value = question
+  replyMessage.value = question.answer?.message
+  replyModalVisiable.value = true
+}
 
 onMounted(() => {
   GetRecieveQAInfo()
@@ -65,33 +147,107 @@ onMounted(() => {
   <NDivider style="margin: 10px 0 10px 0" />
   <NTabs animated @update:value="onTabChange" v-model:value="selectedTabItem">
     <NTabPane tab="我收到的" name="0">
+      只显示收藏 <NSwitch v-model:value="onlyFavorite" />
       <NList>
-        <NListItem v-for="item in recieveQuestions" :key="item.id">
-          <NCard>
+        <NListItem v-for="item in recieveQuestionsFiltered" :key="item.id">
+          <NCard :embedded="!item.isReaded" hoverable size="small">
             <template #header>
-              匿名用户
-              <NTag v-if="item.isSenderRegisted" size="small"> 已注册 </NTag>
+              <NSpace :size="0" align="center">
+                <template v-if="!item.isReaded">
+                  <NTag type="warning" size="tiny"> 未读 </NTag>
+                  <NDivider vertical />
+                </template>
+                <NText :depth="item.sender?.name ? 1 : 3" style="margin-top: 3px">
+                  {{ item.sender?.name ?? '匿名用户' }}
+                </NText>
+                <NTag v-if="item.isSenderRegisted" size="small" type="info" :bordered="false" style="margin-left: 5px"> 已注册 </NTag>
+                <NDivider vertical />
+                <NText depth="3" style="font-size: small">
+                  <NTooltip>
+                    <template #trigger>
+                      <NTime :time="item.sendAt" :to="Date.now()" type="relative" />
+                    </template>
+                    <NTime />
+                  </NTooltip>
+                </NText>
+              </NSpace>
             </template>
             <template #footer>
-              <NButton>
-                <template #icon>
-                  <NIcon :component="HeartOutline"/>
-                </template>
-                收藏
-              </NButton>
-              <NButton>
-                举报
-              </NButton>
-              <NButton>
-                拉黑
-              </NButton>
+              <NSpace>
+                <NButton size="small" @click="favorite(item, !item.isFavorite)">
+                  <template #icon>
+                    <NIcon :component="item.isFavorite ? Heart : HeartOutline" :color="item.isFavorite ? '#dd484f' : ''"/>
+                  </template>
+                  收藏
+                </NButton>
+                <NButton size="small"> 举报 </NButton>
+                <NButton size="small"> 拉黑 </NButton>
+              </NSpace>
             </template>
-            <NImage v-if="item.question.image" :src="item.question.image" />
-            {{ item.question.message }}
+            <template #header-extra>
+              <NButton @click="onOpenModal(item)" :type="item.isReaded ? 'default' : 'primary'" :secondary="item.isReaded"> {{ item.answer ? '查看回复' : '回复' }} </NButton>
+            </template>
+            <template v-if="item.question?.image">
+              <NImage v-if="item.question?.image" :src="item.question.image" height="100" lazy />
+              <br />
+            </template>
+            <NButton text @click="onOpenModal(item)">
+              {{ item.question?.message }}
+            </NButton>
+          </NCard>
+        </NListItem>
+      </NList>
+    </NTabPane>
+    <NTabPane tab="我发送的" name="1">
+      <NList>
+        <NListItem v-for="item in sendQuestions" :key="item.id">
+          <NCard hoverable size="small">
+            <template #header>
+              <NSpace :size="0" align="center">
+                发给
+                <NDivider vertical />
+                <NButton text type="info" @click="router.push('/user/' + item.target.id)">
+                  {{ item.target.name }}
+                </NButton>
+                <NDivider vertical />
+                <NText depth="3" style="font-size: small">
+                  <NTooltip>
+                    <template #trigger>
+                      <NTime :time="item.sendAt" :to="Date.now()" type="relative" />
+                    </template>
+                    <NTime />
+                  </NTooltip>
+                </NText>
+              </NSpace>
+            </template>
+            <template v-if="item.answer" #footer>
+              <NDivider style="margin: 0" />
+              <NCard :bordered="false" size="small">
+                <template #header>
+                  <NSpace align="center">
+                    <NTag size="small" type="warning" :bordered="false">
+                      {{ item.target.name }}
+                    </NTag>
+                    回复
+                  </NSpace>
+                </template>
+                {{ item.answer.message }}
+              </NCard>
+            </template>
+            <template v-if="item.question?.image">
+              <NImage :src="item.question.image" height="100" lazy />
+              <br />
+            </template>
+            {{ item.question?.message }}
           </NCard>
         </NListItem>
       </NList>
     </NTabPane>
-    <NTabPane tab="我发送的" name="1"> </NTabPane>
   </NTabs>
+  <NModal preset="card" v-model:show="replyModalVisiable" style="max-width: 600px">
+    <template #header> 回复 </template>
+    <NInput placeholder="请输入回复" type="textarea" v-model:value="replyMessage" maxlength="1000" show-count clearable />
+    <NDivider style="margin: 10px 0 10px 0" />
+    <NButton :loading="isRepling" @click="reply" type="primary"> 发送 </NButton>
+  </NModal>
 </template>
diff --git a/src/views/view/QuestionBoxView.vue b/src/views/view/QuestionBoxView.vue
index 6635085..796568c 100644
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { NAlert, NButton, NCard, NCheckbox, NDivider, NInput, NSpace, NTab, NTabPane, NTabs, NText, useMessage } from 'naive-ui'
+import { NAlert, NButton, NCard, NCheckbox, NDivider, NInput, NSpace, NTab, NTabPane, NTabs, NText, NUpload, UploadFileInfo, useMessage } from 'naive-ui'
 import GraphemeSplitter from 'grapheme-splitter'
 import { computed, onMounted, ref } from 'vue'
 import { useAccount } from '@/api/account'
 import { useUser } from '@/api/user'
 import { QAInfo, UserInfo } from '@/api/api-models'
-import { QueryPostAPI } from '@/api/query'
+import { QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
 import { QUESTION_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import VueTurnstile from 'vue-turnstile'
 
@@ -22,6 +22,7 @@ const isSelf = computed(() => {
 })
 
 const questionMessage = ref('')
+const fileList = ref<UploadFileInfo[]>([])
 
 const isAnonymous = ref(true)
 const isSending = ref(false)
@@ -41,13 +42,14 @@ async function SendQuestion() {
       Target: userInfo.value?.id,
       IsAnonymous: !accountInfo.value || isAnonymous.value,
       Message: questionMessage.value,
-      Image: '',
+      ImageBase64: fileList.value?.length > 0 ? await getBase64(fileList.value[0].file) : undefined,
     },
     [['Turnstile', token.value]]
   )
     .then((data) => {
       if (data.code == 200) {
         message.success('成功发送棉花糖')
+        questionMessage.value = ''
       } else {
         message.error(data.message)
       }
@@ -61,6 +63,24 @@ async function SendQuestion() {
       turnstile.value?.reset()
     })
 }
+function getBase64(file: File | undefined | null) {
+  if (!file) return null
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result?.toString().split(',')[1])
+    reader.onerror = (error) => reject(error)
+  })
+}
+function OnFileListChange(files: UploadFileInfo[]) {
+  if (files.length == 1) {
+    var file = files[0]
+    if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
+      message.error('文件大小不能超过10MB')
+      fileList.value = []
+    }
+  }
+}
 
 onMounted(async () => {
   userInfo.value = await useUser()
@@ -72,6 +92,20 @@ onMounted(async () => {
     <NSpace vertical>
       <NInput :disabled="isSelf" show-count maxlength="1000" type="textarea" :count-graphemes="countGraphemes" v-model:value="questionMessage"> </NInput>
       <NDivider style="margin: 10px 0 10px 0" />
+      <NSpace align="center">
+        <NUpload
+          :max="1"
+          accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
+          list-type="image-card"
+          :disabled="!accountInfo || isSelf"
+          :default-upload="false"
+          v-model:file-list="fileList"
+          @update:file-list="OnFileListChange"
+        >
+          + 上传图片
+        </NUpload>
+        <NAlert v-if="!accountInfo && !isSelf" type="warning"> 只有注册用户才能够上传图片 </NAlert>
+      </NSpace>
       <NSpace vertical>
         <NCheckbox v-if="accountInfo" :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
       </NSpace>
diff --git a/src/views/view/SongListView.vue b/src/views/view/SongListView.vue
index a12fc50..a5f715b 100644
--- a/src/views/view/SongListView.vue
+++ b/src/views/view/SongListView.vue
@@ -6,18 +6,24 @@ import { SONG_API_URL, USER_API_URL } from '@/data/constants'
 import { onMounted, ref } from 'vue'
 import { useRouteParams } from '@vueuse/router'
 import { useAccount } from '@/api/account'
+import { NAlert } from 'naive-ui'
 
 const accountInfo = useAccount()
 const songs = ref<SongsInfo[]>()
 const uId = useRouteParams('id', '-1', { transform: Number })
 
+const errMessage = ref('')
+
 async function getSongs() {
   await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
-    uId: uId.value,
+    id: uId.value,
   }).then((data) => {
     if (data.code == 200) {
       songs.value = data.data
     }
+    else {
+      errMessage.value = data.message
+    }
   })
 }
 
@@ -27,6 +33,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  歌单
-  <SongList :songs="songs ?? []" />
+  <SongList v-if="songs" :songs="songs ?? []" />
+  <NAlert v-else-if="errMessage" type="error">
+    {{ errMessage }}
+  </NAlert>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 03af63d..1070bbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1933,6 +1933,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linqts@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/linqts/-/linqts-1.15.0.tgz#99195db380da7c039961c00e637e6ae57d5dee5e"
+  integrity sha512-DYRi1eGy8R0/dPzTTE0q3gQKvAj960CumYNikVGaUBc8TJCs/zeIbEmHb9lGx7Y9ALvTKle2cuBpkKgIeCSRTg==
+
 lint-staged@^11.1.2:
   version "11.2.6"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-11.2.6.tgz#f477b1af0294db054e5937f171679df63baa4c43"