1011

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">

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>

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>

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>

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>

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>