add public option

src/views/AboutView.vue

@@ -33,6 +33,7 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
           </NSpace>
           <NDivider title-placement="left"> 更新日志 </NDivider>
           <NTimeline>
+            <NTimelineItem type="info" title="功能更新" content="提问箱新增公开选项" time="2023-10-26" />
             <NTimelineItem type="success" title="功能添加" content="提问箱分享卡片" time="2023-10-25" />
             <NTimelineItem type="success" title="功能添加" content="舰长及SC记录" time="2023-10-24" line-type="dashed" />
             <NTimelineItem type="info" content="开始运行" time="2023-10-23" />

src/views/IndexView.vue

@@ -33,6 +33,11 @@ const functions = [
     desc: '从动态评论区抽取评论或者转发的用户',
     icon: Lottery24Filled,
   },
+  {
+    name: '视频征集',
+    desc: '创建用来收集视频链接的页面, 可以从动态爬取, 也可以提前对视频进行筛选 (开发中)',
+    icon: Lottery24Filled,
+  },
   {
     name: '数据跟踪',
     desc: '绑定账号后查看粉丝 舰长 观看数 等数据的历史记录',
@@ -65,17 +70,18 @@ const iconColor = 'white'
           >
             VTSURU.LIVE
           </NGradientText>
-          <NText style="font-size: 1.5em; font-weight: 500"> 一个给主播提供便利功能的网站 😊 </NText>
+          <NText style="font-size: 1.5em; font-weight: 500; color: white"> 一个给主播提供便利功能的网站 😊 </NText>
           <span></span>
           <NSpace justify="center">
             <NButton type="primary" size="large" @click="$router.push({ name: 'manage-index' })"> 开始使用 </NButton>
-            <NButton type="info"  size="large" @click="$router.push({ name: 'about' })"> 关于 </NButton>
+            <NButton size="large" @click="$router.push('/user/Megghy')"> 展示 </NButton>
+            <NButton type="info" size="large" @click="$router.push({ name: 'about' })"> 关于 </NButton>
           </NSpace>
         </NSpace>
       </NSpace>
 
       <NDivider style="width: 90vw" />
-      <NGrid cols="2 600:3 800:4" x-gap="50" y-gap="50" style="max-width: 80vw">
+      <NGrid cols="1 s:2 m:3 l:4 xl:5 2xl:5" x-gap="50" y-gap="50" style="max-width: 80vw" responsive="screen">
         <NGridItem v-for="item in functions" :key="item.name">
           <NSpace align="end">
             <NIcon :component="item.icon" :color="iconColor" size="20" />
@@ -88,11 +94,7 @@ const iconColor = 'white'
     <NSpace style="position: absolute; bottom: 0; margin: 0 auto; width: 100vw" justify="center">
       <span style="color: white">
         BY
-        <NButton tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style="color: rgb(161, 236, 199)"> Megghy </NButton>
-      </span>
-      <NDivider vertical />
-      <span>
-        <NButton @click="$router.push('/about')" text> 关于 </NButton>
+        <NButton tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style="color: rgb(215, 245, 230)"> Megghy </NButton>
       </span>
     </NSpace>
   </div>
@@ -107,13 +109,14 @@ body
     background: #8360c3;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    overflow: auto
 
 .index-background .header
   font-size: 1.3rem;
   font-weight: 700;
-  font-color: #b1b1b1;
+  color: white;
 .index-background .content
   max-width: 300px;
   font-size: 17px;
-  font-color: #b1b1b1;
+  color: white;
 </style>

src/views/ViewerLayout.vue

@@ -142,7 +142,7 @@ onMounted(async () => {
               </template>
             </NSwitch>
             <template v-if="accountInfo">
-              <NButton style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'manage-index' })"> 个人中心 </NButton>
+              <NButton style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'manage-index' })" size="small"> 个人中心 </NButton>
             </template>
             <template v-else>
               <NButton style="right: 0px; position: relative" type="primary" @click="registerAndLoginModalVisiable = true"> 注册 / 登陆 </NButton>

src/views/manage/QuestionBoxManageView.vue

@@ -6,6 +6,7 @@ import { Heart, HeartOutline } from '@vicons/ionicons5'
 import {
   NButton,
   NCard,
+  NCheckbox,
   NDivider,
   NGradientText,
   NIcon,
@@ -34,20 +35,26 @@ import QrcodeVue from 'qrcode.vue'
 import { useAccount } from '@/api/account'
 import { saveAs } from 'file-saver'
 import { copyToClipboard } from '@/Utils'
+import { useRoute } from 'vue-router'
 
 const accountInfo = useAccount()
+const route = useRoute()
 
 const recieveQuestions = ref<QAInfo[]>([])
 const recieveQuestionsFiltered = computed(() => {
-  return onlyFavorite.value ? recieveQuestions.value.filter((d) => d.isFavorite) : recieveQuestions.value
+  return recieveQuestions.value.filter((q) => {
+    return (q.isFavorite || !onlyFavorite.value) && (q.isPublic || !onlyPublic.value)
+  })
 })
 const sendQuestions = ref<QAInfo[]>([])
 const message = useMessage()
 
-const selectedTabItem = ref('0')
+const selectedTabItem = ref(route.query.send ? '1' : '0')
 const isRepling = ref(false)
 const onlyFavorite = ref(false)
+const onlyPublic = ref(false)
 const isLoading = ref(true)
+const isChangingPublic = ref(false)
 
 const replyModalVisiable = ref(false)
 const shareModalVisiable = ref(false)
@@ -84,6 +91,7 @@ async function GetRecieveQAInfo() {
     })
 }
 async function GetSendQAInfo() {
+  isLoading.value = true
   await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-send')
     .then((data) => {
       if (data.code == 200) {
@@ -97,6 +105,9 @@ async function GetSendQAInfo() {
       message.error('发生错误')
       console.error(err)
     })
+    .finally(() => {
+      isLoading.value = false
+    })
 }
 async function reply() {
   isRepling.value = true
@@ -159,6 +170,28 @@ async function favorite(question: QAInfo, fav: boolean) {
       message.error('修改失败')
     })
 }
+async function setPublic(pub: boolean) {
+  isChangingPublic.value = true
+  await QueryGetAPI(QUESTION_API_URL + 'public', {
+    id: currentQuestion.value?.id,
+    public: pub,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        if (currentQuestion.value) currentQuestion.value.isPublic = pub
+        message.success('已修改公开状态')
+      } else {
+        message.error('修改失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('修改失败')
+    })
+    .finally(() => {
+      isChangingPublic.value = false
+    })
+}
 async function blacklist(question: QAInfo) {
   await QueryGetAPI(ACCOUNT_API_URL + 'black-list/add', {
     id: question.sender.id,
@@ -212,7 +245,7 @@ function saveShareImage() {
   html2canvas(shareCardRef.value, {
     width: shareCardRef.value.clientWidth, //dom 原始宽度
     height: shareCardRef.value.clientHeight,
-    backgroundColor:null,
+    backgroundColor: null,
     scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
     scrollX: 0,
     useCORS: true, //支持跨域，但好像没什么用
@@ -231,7 +264,11 @@ function saveShareImage() {
 }
 
 onMounted(() => {
-  GetRecieveQAInfo()
+  if (selectedTabItem.value == '0') {
+    GetRecieveQAInfo()
+  } else {
+    GetSendQAInfo()
+  }
 })
 </script>
 
@@ -244,7 +281,7 @@ onMounted(() => {
   <NSpin v-if="isLoading" show />
   <NTabs v-else animated @update:value="onTabChange" v-model:value="selectedTabItem">
     <NTabPane tab="我收到的" name="0">
-      只显示收藏 <NSwitch v-model:value="onlyFavorite" />
+      只显示收藏 <NSwitch v-model:value="onlyFavorite" /> 只显示公开 <NSwitch v-model:value="onlyPublic" />
       <NList :bordered="false">
         <NListItem v-for="item in recieveQuestionsFiltered" :key="item.id">
           <NCard :embedded="!item.isReaded" hoverable size="small">
@@ -258,6 +295,7 @@ onMounted(() => {
                   {{ item.sender?.name ?? '匿名用户' }}
                 </NText>
                 <NTag v-if="item.isSenderRegisted" size="small" type="info" :bordered="false" style="margin-left: 5px"> 已注册 </NTag>
+                <NTag v-if="item.isPublic" size="small" type="success" :bordered="false" style="margin-left: 5px"> 公开 </NTag>
                 <NDivider vertical />
                 <NText depth="3" style="font-size: small">
                   <NTooltip>
@@ -341,11 +379,16 @@ onMounted(() => {
       </NList>
     </NTabPane>
   </NTabs>
-  <NModal preset="card" v-model:show="replyModalVisiable" style="max-width: 600px">
+  <NModal preset="card" v-model:show="replyModalVisiable" style="max-width: 90vw; width: 500px">
     <template #header> 回复 </template>
-    <NInput placeholder="请输入回复" type="textarea" v-model:value="replyMessage" maxlength="1000" show-count clearable />
+    <NSpace vertical>
+      <NInput placeholder="请输入回复" type="textarea" v-model:value="replyMessage" maxlength="1000" show-count clearable />
+      <NSpin :show="isChangingPublic">
+        <NCheckbox @update:checked="(v) => setPublic(v)" :default-checked="currentQuestion?.isPublic"> 公开可见 </NCheckbox>
+      </NSpin>
+    </NSpace>
     <NDivider style="margin: 10px 0 10px 0" />
-    <NButton :loading="isRepling" @click="reply" type="primary"> 发送 </NButton>
+    <NButton :loading="isRepling" @click="reply" type="primary" :secondary="currentQuestion?.answer ? true : false"> {{ currentQuestion?.answer ? '修改' : '发送' }} </NButton>
   </NModal>
   <NModal v-model:show="shareModalVisiable" preset="card" title="分享" style="width: 600px">
     <div ref="shareCardRef" class="share-card container">

src/views/view/QuestionBoxView.vue

@@ -1,10 +1,32 @@
 <script setup lang="ts">
-import { NAlert, NButton, NCard, NCheckbox, NDivider, NInput, NSpace, NTab, NTabPane, NTabs, NText, NUpload, UploadFileInfo, useMessage } from 'naive-ui'
+import {
+  NAlert,
+  NAvatar,
+  NButton,
+  NCard,
+  NCheckbox,
+  NDivider,
+  NEmpty,
+  NImage,
+  NInput,
+  NList,
+  NListItem,
+  NSpace,
+  NTab,
+  NTabPane,
+  NTabs,
+  NText,
+  NTime,
+  NTooltip,
+  NUpload,
+  UploadFileInfo,
+  useMessage,
+} from 'naive-ui'
 import GraphemeSplitter from 'grapheme-splitter'
-import { computed, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useAccount } from '@/api/account'
 import { QAInfo, UserInfo } from '@/api/api-models'
-import { QueryPostAPI } from '@/api/query'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import { QUESTION_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import VueTurnstile from 'vue-turnstile'
 
@@ -27,9 +49,11 @@ const isSelf = computed(() => {
 
 const questionMessage = ref('')
 const fileList = ref<UploadFileInfo[]>([])
+const publicQuestions = ref<QAInfo[]>([])
 
 const isAnonymous = ref(true)
 const isSending = ref(false)
+const isGetting = ref(true)
 
 function countGraphemes(value: string) {
   return splitter.countGraphemes(value)
@@ -86,6 +110,30 @@ function OnFileListChange(files: UploadFileInfo[]) {
     }
   }
 }
+function getPublicQuestions() {
+  isGetting.value = true
+  QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-public', {
+    id: userInfo?.id,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        publicQuestions.value = data.data
+      } else {
+        message.error('获取公开提问失败:' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('获取公开提问失败')
+      console.error(err)
+    })
+    .finally(() => {
+      isGetting.value = false
+    })
+}
+
+onMounted(() => {
+  getPublicQuestions()
+})
 
 onUnmounted(() => {
   turnstile.value?.remove()
@@ -93,33 +141,74 @@ onUnmounted(() => {
 </script>
 
 <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 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>
+  <div style="max-width: 700px; margin: 0 auto" title="提问">
+    <NCard embedded>
       <NSpace vertical>
-        <NCheckbox v-if="accountInfo" :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
+        <NSpace align="center" justify="center">
+          <NInput :disabled="isSelf" show-count maxlength="1000" type="textarea" :count-graphemes="countGraphemes" v-model:value="questionMessage" style="width: 300px" />
+          <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>
+        </NSpace>
+        <NDivider style="margin: 10px 0 10px 0" />
+        <NSpace align="center">
+          <NAlert v-if="!accountInfo && !isSelf" type="warning"> 只有注册用户才能够上传图片 </NAlert>
+        </NSpace>
+        <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>
+          <NButton v-if="accountInfo" :disabled="isSelf" type="info" @click="$router.push({ name: 'manage-questionBox', query: { send: '1' } })"> 我发送的 </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>
-      <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>
+    </NCard>
+    <NDivider> 公开回复 </NDivider>
+    <NList v-if="publicQuestions.length > 0">
+      <NListItem v-for="item in publicQuestions" :key="item.id">
+        <NCard :embedded="!item.isReaded" hoverable size="small">
+          <template #header>
+            <NSpace :size="0" align="center">
+              <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>
+          <NCard style="text-align: center">
+            {{ item.question.message }}
+            <br />
+            <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">
+              <NAvatar :src="biliInfo.face + '@64w'" circle :size="45" :img-props="{ referrerpolicy: 'no-referrer' }" />
+              <NDivider vertical />
+              <NText style="font-size: 16px">
+                {{ item.answer?.message }}
+              </NText>
+            </NSpace>
+          </template>
+        </NCard>
+      </NListItem>
+    </NList>
+    <NEmpty v-else />
+
+    <NDivider />
+  </div>
 </template>