From 2a2895802f4cf6e758ba8d56a3a2cebb28dcb34c Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Mon, 1 Apr 2024 15:07:09 +0800
Subject: [PATCH] improve question tag and card display

---
 src/App.vue                                |  21 +++
 src/views/manage/QuestionBoxManageView.vue |  27 ++-
 src/views/manage/QuestionDisplayCard.vue   | 198 ++++++++++++++++++---
 src/views/single/QuestionDisplay.vue       |  12 +-
 src/views/view/QuestionBoxView.vue         |  28 ++-
 5 files changed, 253 insertions(+), 33 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ec1738c..529b238 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -178,4 +178,25 @@ const themeOverrides = {
   position: absolute;
   left: 0;
 }
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.5s ease-out;
+}
+.slide-up-enter-to {
+  position: absolute;
+  top: 0;
+}
+.slide-up-enter-from {
+  position: absolute;
+  top: -100%;
+}
+.slide-up-leave-to {
+  position: absolute;
+  bottom : -100%;
+}
+.slide-up-leave-from {
+  position: absolute;
+  bottom : 0;
+}
 </style>
diff --git a/src/views/manage/QuestionBoxManageView.vue b/src/views/manage/QuestionBoxManageView.vue
index b0e2497..5fa14bd 100644
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -173,6 +173,13 @@ onMounted(() => {
     </NAlert>
     <NButton type="primary" @click="refresh"> 刷新 </NButton>
     <NButton type="primary" @click="shareModalVisiable = true" secondary> 分享 </NButton>
+    <NButton
+      type="primary"
+      @click="$router.push({ name: 'user-questionBox', params: { id: accountInfo.name } })"
+      secondary
+    >
+      前往提问页
+    </NButton>
   </NSpace>
   <NDivider style="margin: 10px 0 10px 0" />
   <NSpin v-if="useQB.isLoading" show />
@@ -188,7 +195,9 @@ onMounted(() => {
           clearable
           :options="useQB.tags.map((s) => ({ label: s.name, value: s.name }))"
           style="width: 200px"
-        />
+        >
+          <template #header> <NText strong depth="3"> 在设置选项卡中添加或删除话题 </NText> </template>
+        </NSelect>
         <NCheckbox v-model:checked="useQB.onlyFavorite"> 只显示收藏 </NCheckbox>
         <NCheckbox v-model:checked="useQB.onlyPublic"> 只显示公开 </NCheckbox>
         <NCheckbox v-model:checked="useQB.onlyUnread"> 只显示未读 </NCheckbox>
@@ -285,14 +294,16 @@ onMounted(() => {
             类似于话题, 可以在投稿时选择
           </NTooltip>
         </NDivider>
-        <NInputGroup>
-          <NInputGroupLabel> 标签名称 </NInputGroupLabel>
-          <NInput v-model:value="addTagName" placeholder="就是名称" maxlength="30" show-count clearable />
-          <NButton type="primary" @click="useQB.addTag(addTagName)"> 添加 </NButton>
-        </NInputGroup>
-        <NDivider style="margin: 15px 0 15px 0" />
+        <NFlex>
+          <NInputGroup style="max-width: 400px">
+            <NInputGroupLabel> 标签名称 </NInputGroupLabel>
+            <NInput v-model:value="addTagName" placeholder="就是名称" maxlength="30" show-count clearable />
+            <NButton type="primary" @click="useQB.addTag(addTagName)"> 添加 </NButton>
+          </NInputGroup>
+        </NFlex>
+        <br />
         <NEmpty v-if="useQB.tags.length == 0" description="暂无标签" />
-        <NFlex v-else justify="center">
+        <NFlex v-else>
           <NList bordered>
             <NListItem v-for="item in useQB.tags.sort((a, b) => b.createAt - a.createAt)" :key="item.name">
               <NFlex align="center">
diff --git a/src/views/manage/QuestionDisplayCard.vue b/src/views/manage/QuestionDisplayCard.vue
index b9eca2b..5b21ea2 100644
--- a/src/views/manage/QuestionDisplayCard.vue
+++ b/src/views/manage/QuestionDisplayCard.vue
@@ -56,18 +56,20 @@ onUnmounted(() => {
     }"
     :display="question ? 1 : 0"
   >
-    <div
-      v-if="setting.showUserName && question"
-      class="question-display-user-name"
-      :style="{
-        color: '#' + setting.nameFontColor,
-        fontSize: setting.nameFontSize + 'px',
-        fontWeight: setting.nameFontWeight ? setting.nameFontWeight : undefined,
-        fontFamily: setting.nameFont,
-      }"
-    >
-      {{ question?.sender?.name ?? '匿名用户' }}
-    </div>
+    <Transition name="scale" mode="out-in">
+      <div
+        v-if="setting.showUserName && question"
+        class="question-display-user-name"
+        :style="{
+          color: '#' + setting.nameFontColor,
+          fontSize: setting.nameFontSize + 'px',
+          fontWeight: setting.nameFontWeight ? setting.nameFontWeight : undefined,
+          fontFamily: setting.nameFont,
+        }"
+      >
+        {{ question?.sender?.name ?? '匿名用户' }}
+      </div>
+    </Transition>
     <div
       class="question-display-content"
       :style="{
@@ -78,15 +80,28 @@ onUnmounted(() => {
         textAlign: align,
         fontFamily: setting.font,
       }"
+      :is-empty="question ? 0 : 1"
     >
-      <div class="question-display-text" :is-empty="question ? 0 : 1">
-        {{ question?.question.message }}
-      </div>
-      <img
-        class="question-display-image"
-        v-if="setting.showImage && question?.question.image"
-        :src="question?.question.image"
-      />
+      <Transition name="fade" mode="out-in">
+        <template v-if="question">
+          <div>
+            <div class="question-display-text">
+              {{ question?.question.message }}
+            </div>
+            <img
+              class="question-display-image"
+              v-if="setting.showImage && question?.question.image"
+              :src="question?.question.image"
+            />
+          </div>
+        </template>
+        <div v-else class="question-display-loading loading" :style="{ color: '#' + setting.fontColor }">
+          <div :style="{ color: '#' + setting.fontColor }"></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -99,9 +114,9 @@ onUnmounted(() => {
   border: 2 solid rgb(255, 255, 255);
   display: flex;
   flex-direction: column;
-  transition: all 0.3s ease;
   border-style: solid;
   box-sizing: border-box;
+  transition: all 0.3s ease;
 }
 .question-display-content {
   border-radius: 10px;
@@ -110,19 +125,156 @@ onUnmounted(() => {
   height: 100%;
   justify-content: space-evenly;
   padding: 24px;
+  overflow: auto;
 }
 .question-display-user-name {
   text-align: center;
   margin: 5px;
-  transition: all 0.3s ease;
+  height: 32px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .question-display-text {
   min-height: 50px;
-  transition: all 0.3s ease;
 }
 .question-display-image {
   max-width: 40%;
   max-height: 40%;
   margin: 0 auto;
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsla(0, 0%, 51%, 0.377);
+
+  -webkit-box-shadow: none;
+
+  border-radius: 10px;
+
+  -webkit-box-shadow: none;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+
+  background: #cccccc4b;
+
+  -webkit-box-shadow: none;
+
+  -webkit-box-shadow: none;
+}
+</style>
+
+<style scoped>
+.loading,
+.loading > div {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.loading {
+  display: block;
+  margin: 0 auto;
+  font-size: 0;
+}
+
+.loading.la-dark {
+  color: #333;
+}
+
+.loading > div {
+  display: inline-block;
+  float: none;
+  background-color: currentColor;
+  border: 0 solid currentColor;
+}
+
+.loading {
+  width: 40px;
+  height: 10px;
+}
+
+.loading > div {
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+}
+
+.loading > div:first-child {
+  transform: translateX(0%);
+  animation: ball-newton-cradle-left 1.5s 0s ease-out infinite;
+}
+
+.loading > div:last-child {
+  transform: translateX(0%);
+  animation: ball-newton-cradle-right 1.5s 0s ease-out infinite;
+}
+
+.loading.la-sm {
+  width: 20px;
+  height: 4px;
+}
+
+.loading.la-sm > div {
+  width: 4px;
+  height: 4px;
+}
+
+.loading.la-2x {
+  width: 80px;
+  height: 20px;
+}
+
+.loading.la-2x > div {
+  width: 20px;
+  height: 20px;
+}
+
+.loading.la-3x {
+  width: 120px;
+  height: 30px;
+}
+
+.loading.la-3x > div {
+  width: 30px;
+  height: 30px;
+}
+
+@keyframes ball-newton-cradle-left {
+  25% {
+    transform: translateX(-200%);
+    animation-timing-function: ease-in;
+  }
+
+  50% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes ball-newton-cradle-right {
+  50% {
+    transform: translateX(0%);
+  }
+
+  75% {
+    transform: translateX(200%);
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+.loading > div:first-child {
+  animation: ball-newton-cradle-left 1.5s 0s ease-in-out infinite;
+}
+
+.loading > div:last-child {
+  animation: ball-newton-cradle-right 1.5s 0s ease-in-out infinite;
+}
 </style>
diff --git a/src/views/single/QuestionDisplay.vue b/src/views/single/QuestionDisplay.vue
index 592e672..95c345a 100644
--- a/src/views/single/QuestionDisplay.vue
+++ b/src/views/single/QuestionDisplay.vue
@@ -72,7 +72,7 @@ watch([cardSize.width, cardSize.height], () => {
 
 const setting = computed({
   get: () => {
-    if (accountInfo.value) {
+    if (accountInfo.value && accountInfo.value.settings) {
       return accountInfo.value.settings.questionDisplay
     }
     return defaultSettings
@@ -161,6 +161,16 @@ onMounted(() => {
       <template v-if="useQB.displayQuestion">
         <NDivider style="margin: 10px 0 10px 0" />
         <NCard size="small" title="当前展示" embedded>
+          <template #header-extra>
+            <NFlex>
+              <NButton @click="useQB.setCurrentQuestion(useQB.displayQuestion)" size="small" secondary type="info">
+                取消展示
+              </NButton>
+              <NButton @click="useQB.read(useQB.displayQuestion, true)" size="small" secondary type="success">
+                已读
+              </NButton>
+            </NFlex>
+          </template>
           <QuestionItem :item="useQB.displayQuestion" />
         </NCard>
         <NDivider style="margin: 10px 0 10px 0" />
diff --git a/src/views/view/QuestionBoxView.vue b/src/views/view/QuestionBoxView.vue
index 2701cc9..df56dc6 100644
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -18,6 +18,7 @@ import {
   NListItem,
   NSelect,
   NSpace,
+  NTag,
   NText,
   NTime,
   NTooltip,
@@ -136,7 +137,11 @@ function getTags() {
   })
     .then((data) => {
       if (data.code == 200) {
-        tags.value = data.data
+        if (userInfo?.id == accountInfo.value.id) {
+          tags.value = data.data.map((tag) => JSON.parse(JSON.stringify(tag)).name)
+        } else {
+          tags.value = data.data
+        }
       } else {
         message.error('获取标签失败:' + data.message)
       }
@@ -148,6 +153,13 @@ function getTags() {
       isGetting.value = false
     })
 }
+function onSelectTag(tag: string) {
+  if (selectedTag.value == tag) {
+    selectedTag.value = null
+    return
+  }
+  selectedTag.value = tag
+}
 
 onMounted(() => {
   getPublicQuestions()
@@ -163,6 +175,20 @@ onUnmounted(() => {
   <div style="max-width: 700px; margin: 0 auto" title="提问">
     <NCard embedded>
       <NSpace vertical>
+        <NCard title="投稿话题 (可选)" size="small">
+          <NSpace v-if="tags.length > 0">
+            <NTag
+              v-for="tag in tags"
+              :key="tag"
+              @click="onSelectTag(tag)"
+              style="cursor: pointer"
+              :bordered="false"
+              :type="selectedTag == tag ? 'primary' : 'default'"
+            >
+              {{ tag }}
+            </NTag>
+          </NSpace>
+        </NCard>
         <NSpace align="center" justify="center">
           <NSelect
             v-model:value="selectedTag"