1007

src/views/ViewerLayout.vue

@@ -3,8 +3,8 @@
 import { NAvatar, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NEmpty, NResult, NPageHeader, NSwitch, useOsTheme } 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, useUserWithUId } from '@/api/user'
-import { useRoute } from 'vue-router'
+import { GetInfo, useUser, useUserWithUId } from '@/api/user'
+import { RouterLink, useRoute } from 'vue-router'
 import { UserInfo } from '@/api/api-models'
 import { FETCH_API } from '@/data/constants'
 import { useAccount } from '@/api/account'
@@ -24,13 +24,45 @@ function renderIcon(icon: unknown) {
 }
 const menuOptions = [
   {
-    label: '歌单',
-    key: 'song-list',
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'user-index',
+          },
+        },
+        { default: () => '主页' }
+      ),
+    key: 'user-index',
     icon: renderIcon(BookIcon),
   },
   {
-    label: '棉花糖(匿名提问',
-    key: 'question-box',
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'user-songList',
+          },
+        },
+        { default: () => '歌单' }
+      ),
+    key: 'user-songList',
+    icon: renderIcon(BookIcon),
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'user-questionBox',
+          },
+        },
+        { default: () => '棉花糖 (提问箱' }
+      ),
+    key: 'user-questionBox',
     icon: renderIcon(BookIcon),
   },
 ]
@@ -50,8 +82,7 @@ async function RequestBiliUserData() {
 }
 
 onMounted(async () => {
-  console.log(route.params)
-  userInfo.value = await useUserWithUId(uId.value)
+  userInfo.value = await useUser()
   await RequestBiliUserData()
 })
 </script>
@@ -81,16 +112,16 @@ onMounted(async () => {
     <NLayout has-sider style="height: calc(100vh - 50px)">
       <NLayoutSider show-trigger collapse-mode="width" :collapsed-width="64" :width="180" :native-scrollbar="false">
         <Transition>
-          <div v-if="biliUserInfo">
+          <div v-if="biliUserInfo" style="margin-top: 15px;">
             <NSpace vertical justify="center" align="center">
               <NAvatar :src="biliUserInfo.face" :img-props="{ referrerpolicy: 'no-referrer' }" />
-              <NText>
-                {{ biliUserInfo.uname }}
+              <NText strong>
+                {{ biliUserInfo.name }}
               </NText>
             </NSpace>
           </div>
         </Transition>
-        <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 class="viewer-page-content">

src/views/manage/QuestionBoxManageView.vue

@@ -1,18 +1,97 @@
 <script setup lang="ts">
-import { QAInfo } from '@/api/api-models';
-import { onMounted, ref } from 'vue';
+import { QAInfo } from '@/api/api-models'
+import { QueryGetAPI } 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'
 
-const questions = ref([] as QAInfo[]);
+const recieveQuestions = ref<QAInfo[]>([])
+const sendQuestions = ref<QAInfo[]>([])
+const message = useMessage()
 
-function GetQAInfo() {
-  
+const selectedTabItem = ref('0')
+
+async function GetRecieveQAInfo() {
+  await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-recieve')
+    .then((data) => {
+      if (data.code == 200) {
+        recieveQuestions.value = data.data
+        message.success('共收取 ' + data.data.length + ' 条提问')
+        isRevieveGetted = true
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('发生错误')
+      console.error(err)
+    })
+}
+async function GetSendQAInfo() {
+  await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-send')
+    .then((data) => {
+      if (data.code == 200) {
+        sendQuestions.value = data.data
+        message.success('共发送 ' + data.data.length + ' 条提问')
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('发生错误')
+      console.error(err)
+    })
+}
+let isRevieveGetted = false
+let isSendGetted = false
+async function onTabChange(value: string) {
+  if (value == '0' && !isRevieveGetted) {
+    await GetRecieveQAInfo()
+    isRevieveGetted = true
+  } else if (value == '1' && !isSendGetted) {
+    await GetSendQAInfo()
+    isSendGetted = true
+  }
 }
 
 onMounted(() => {
-
-});
+  GetRecieveQAInfo()
+})
 </script>
 
 <template>
-  1
-</template>
+  <NButton type="primary"> 刷新 </NButton>
+  <NDivider style="margin: 10px 0 10px 0" />
+  <NTabs animated @update:value="onTabChange" v-model:value="selectedTabItem">
+    <NTabPane tab="我收到的" name="0">
+      <NList>
+        <NListItem v-for="item in recieveQuestions" :key="item.id">
+          <NCard>
+            <template #header>
+              匿名用户
+              <NTag v-if="item.isSenderRegisted" size="small"> 已注册 </NTag>
+            </template>
+            <template #footer>
+              <NButton>
+                <template #icon>
+                  <NIcon :component="HeartOutline"/>
+                </template>
+                收藏
+              </NButton>
+              <NButton>
+                举报
+              </NButton>
+              <NButton>
+                拉黑
+              </NButton>
+            </template>
+            <NImage v-if="item.question.image" :src="item.question.image" />
+            {{ item.question.message }}
+          </NCard>
+        </NListItem>
+      </NList>
+    </NTabPane>
+    <NTabPane tab="我发送的" name="1"> </NTabPane>
+  </NTabs>
+</template>

src/views/view/QuestionBoxView.vue

@@ -1,7 +1,86 @@
 <script setup lang="ts">
+import { NAlert, NButton, NCard, NCheckbox, NDivider, NInput, NSpace, NTab, NTabPane, NTabs, NText, 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 { QUESTION_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import VueTurnstile from 'vue-turnstile'
 
+const splitter = new GraphemeSplitter()
+
+const message = useMessage()
+const accountInfo = useAccount()
+const userInfo = ref<UserInfo>()
+const token = ref('')
+const turnstile = ref()
+
+const isSelf = computed(() => {
+  return userInfo.value?.id == accountInfo.value?.id
+})
+
+const questionMessage = ref('')
+
+const isAnonymous = ref(true)
+const isSending = ref(false)
+
+function countGraphemes(value: string) {
+  return splitter.countGraphemes(value)
+}
+async function SendQuestion() {
+  if (countGraphemes(questionMessage.value) < 10) {
+    message.error('内容最少需要10个字')
+    return
+  }
+  isSending.value = true
+  await QueryPostAPI<QAInfo>(
+    QUESTION_API_URL + 'send',
+    {
+      Target: userInfo.value?.id,
+      IsAnonymous: !accountInfo.value || isAnonymous.value,
+      Message: questionMessage.value,
+      Image: '',
+    },
+    [['Turnstile', token.value]]
+  )
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('成功发送棉花糖')
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('发送失败')
+      console.error(err)
+    })
+    .finally(() => {
+      isSending.value = false
+      turnstile.value?.reset()
+    })
+}
+
+onMounted(async () => {
+  userInfo.value = await useUser()
+})
 </script>
 
 <template>
-1
-</template>
+  <NCard embedded style="max-width: 700px; margin: 0 auto" title="提问">
+    <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 vertical>
+        <NCheckbox v-if="accountInfo" :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
+      </NSpace>
+      <NDivider style="margin: 10px 0 10px 0" />
+      <NSpace justify="center">
+        <NButton :disabled="isSelf" type="primary" :loading="isSending || !token" @click="SendQuestion"> 发送 </NButton>
+      </NSpace>
+      <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
+      <NAlert v-if="isSelf" type="warning"> 不能给自己提问 </NAlert>
+    </NSpace>
+  </NCard>
+</template>