feat: 更新问答信息和问题管理组件

- 在 QAInfo 接口中为答案添加了创建时间字段。
- 在 QuestionItem 组件中增加了得分颜色计算函数，优化了得分显示逻辑。
- 更新了问题管理视图，增强了问题的筛选和显示功能，支持更灵活的用户交互。
- 改进了分享卡片的样式和功能，提升了用户体验。
- 增强了 OBS 组件的预览功能，提供了更直观的展示效果。

src/api/api-models.ts

@@ -358,7 +358,7 @@ export interface QAInfo {
   sender: UserBasicInfo
   target: UserBasicInfo
   question: { message: string; image?: string }
-  answer?: { message: string; image?: string }
+  answer?: { message: string; image?: string, createdAt: number }
   isReaded?: boolean
   isSenderRegisted: boolean
   isPublic: boolean

src/components/QuestionItem.vue

@@ -11,6 +11,21 @@ const useQA = useQuestionBox()
 
 const isViolation = props.item.reviewResult?.isApproved == false
 const showContent = ref(!isViolation)
+
+// 计算得分颜色的函数
+function getScoreColor(score: number | undefined): string {
+  if (score === undefined) {
+    return 'grey'; // 如果没有分数，返回灰色
+  }
+  // 将分数限制在 0 到 100 之间
+  const clampedScore = Math.max(0, Math.min(100, score));
+  // 插值计算色相: 0 (红色) for score 0, 120 (绿色) for score 100
+  const hue = 120 * (clampedScore / 100); // 反转插值逻辑
+  // 固定饱和度和亮度 (可根据需要调整)
+  const saturation = 50;
+  const lightness = 45; // 稍暗以提高与白色文本的对比度
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
 </script>
 
 <template>
@@ -101,18 +116,18 @@ const showContent = ref(!isViolation)
             </NTag>
           </NFlex>
         </template>
-        <template v-if="item.reviewResult && item.reviewResult.saftyScore">
+        <template v-if="item.reviewResult && item.reviewResult.saftyScore !== undefined">
           <NDivider vertical />
           <NTooltip>
             <template #trigger>
               <NTag
                 size="small"
-                :color="{ color: '#af2525', textColor: 'white', borderColor: 'white' }"
+                :style="{ backgroundColor: getScoreColor(item.reviewResult.saftyScore), color: 'white', borderColor: 'transparent' }"
               >
                 得分: {{ item.reviewResult.saftyScore }}
               </NTag>
             </template>
-            审查得分, 满分100, 越低代表消息越8行
+            审查得分, 满分100, 越低代表消息越安全, 越高越危险
           </NTooltip>
         </template>
       </NFlex>
@@ -139,18 +154,15 @@ const showContent = ref(!isViolation)
       <br>
     </template>
 
-    <NText :style="{ filter: showContent ? '' : 'blur(3.7px)', cursor: showContent ? '' : 'pointer', whiteSpace: 'pre-wrap' }">
+    <NText
-      <NButton
+      :style="{
-        v-if="isViolation"
+        filter: isViolation && !showContent ? 'blur(3.7px)' : '',
-        size="small"
+        cursor: isViolation && !showContent ? 'pointer' : '',
-        text
+        whiteSpace: 'pre-wrap'
-        @click="showContent = !showContent"
+      }"
+      @click="isViolation ? (showContent = !showContent) : null"
     >
       {{ item.question?.message }}
-      </NButton>
-      <template v-else>
-        {{ item.question?.message }}
-      </template>
     </NText>
 
     <template v-if="item.answer">

src/store/useQuestionBox.ts

@@ -23,7 +23,11 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
 
   const recieveQuestions = ref<QAInfo[]>([])
   const sendQuestions = ref<QAInfo[]>([])
-  const trashQuestions = ref<QAInfo[]>([])
+  const trashQuestions = computed(() => {
+    return recieveQuestions.value.filter(
+      (q) => q.reviewResult && q.reviewResult.isApproved == false
+    )
+  })
   const tags = ref<QATagInfo[]>([])
   const reviewing = ref(0)
 
@@ -37,6 +41,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
         return false
       }*/
       return (
+        (!q.reviewResult || q.reviewResult.isApproved == true) &&
         (q.isFavorite || !onlyFavorite.value) &&
         (q.isPublic || !onlyPublic.value) &&
         (!q.isReaded || !onlyUnread.value) &&
@@ -66,16 +71,9 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
           if (data.data.questions.length > 0) {
             recieveQuestions.value = new List(data.data.questions)
               .OrderBy((d) => d.isReaded)
-              //.ThenByDescending(d => d.isFavorite)
-              .Where(
-                (d) => !d.reviewResult || d.reviewResult.isApproved == true
-              ) //只显示审核通过的
               .ThenByDescending((d) => d.sendAt)
               .ToArray()
             reviewing.value = data.data.reviewCount
-            trashQuestions.value = data.data.questions.filter(
-              (d) => d.reviewResult && d.reviewResult.isApproved == false
-            )
 
             const displayId =
               accountInfo.value?.settings.questionDisplay.currentQuestion
@@ -378,6 +376,20 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
         message.error('拉黑失败: ' + err)
       })
   }
+  async function markAsNormal(question: QAInfo) {
+    await QueryGetAPI(QUESTION_API_URL + 'mark-as-normal', {
+      id: question.id
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          message.success('已标记为正常')
+          question.reviewResult!.isApproved = true
+        }
+      })
+      .catch((err) => {
+        message.error('标记失败: ' + err)
+      })
+  }
   async function setCurrentQuestion(item: QAInfo | undefined) {
     const isCurrent = displayQuestion.value?.id == item?.id
     if (!isCurrent) {
@@ -433,6 +445,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
     favorite,
     setPublic,
     blacklist,
+    markAsNormal,
     setCurrentQuestion,
     getViolationString
   }

src/store/useWebFetcher.ts

@@ -224,7 +224,11 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
         skipNegotiation: true,
         transport: signalR.HttpTransportType.WebSockets
       })
-      .withAutomaticReconnect([0, 2000, 10000, 30000]) // 自动重连策略
+      .withAutomaticReconnect({
+        nextRetryDelayInMilliseconds: retryContext => {
+          return retryContext.elapsedMilliseconds < 60 * 1000 ? 10 * 1000 : 30 * 1000;
+        }
+      }) // 自动重连策略
       .withHubProtocol(new msgpack.MessagePackHubProtocol()) // 使用 MessagePack 协议
       .build();
 
@@ -249,7 +253,7 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
         console.error(prefix.value + `与服务器连接关闭: ${error?.message || '未知原因'}. 自动重连将处理.`);
         state.value = 'connecting'; // 标记为连接中，等待自动重连
         signalRConnectionId.value = undefined;
-        // withAutomaticReconnect 会处理重连，这里不需要手动调用 reconnect
+        await connection.start();
       } else if (disconnectedByServer) {
         console.log(prefix.value + `连接已被服务器关闭.`);
         //Stop(); // 服务器要求断开，则彻底停止
@@ -369,12 +373,6 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
    * 定期将队列中的事件发送到服务器
    */
   async function sendEvents() {
-    if (updateCount % 60 == 0) {
-      // 每60秒更新一次连接信息
-      if (signalRClient.value) {
-        await sendSelfInfo(signalRClient.value);
-      }
-    }
     updateCount++;
     // 确保 SignalR 已连接
     if (!signalRClient.value || signalRClient.value.state !== signalR.HubConnectionState.Connected) {
@@ -384,6 +382,12 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
     if (events.length === 0) {
       return;
     }
+    if (updateCount % 60 == 0) {
+      // 每60秒更新一次连接信息
+      if (signalRClient.value) {
+        await sendSelfInfo(signalRClient.value);
+      }
+    }
 
     // 批量处理事件，每次最多发送20条
     const batchSize = 30;

src/views/manage/AnalyzeView.vue

@@ -645,7 +645,7 @@ const fetchAnalyzeData = async () => {
       message.error(`获取数据失败: ${data.message}`);
     }
   } catch (error) {
-    message.error('请求失败，请检查网络连接');
+    message.error('获取数据出错:' + (error as Error).message);
     console.error('获取数据出错:', error);
   } finally {
     loading.value = false;