From 89f9cad9a7da6fc9427b1a0a793798391980f240 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Mon, 21 Apr 2025 01:57:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E9=97=AE=E7=AD=94?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=92=8C=E9=97=AE=E9=A2=98=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 QAInfo 接口中为答案添加了创建时间字段。
- 在 QuestionItem 组件中增加了得分颜色计算函数，优化了得分显示逻辑。
- 更新了问题管理视图，增强了问题的筛选和显示功能，支持更灵活的用户交互。
- 改进了分享卡片的样式和功能，提升了用户体验。
- 增强了 OBS 组件的预览功能，提供了更直观的展示效果。
---
 src/api/api-models.ts                      |    2 +-
 src/components/QuestionItem.vue            |   42 +-
 src/store/useQuestionBox.ts                |   29 +-
 src/store/useWebFetcher.ts                 |   20 +-
 src/views/manage/AnalyzeView.vue           |    2 +-
 src/views/manage/QuestionBoxManageView.vue | 1815 ++++++++++++--------
 6 files changed, 1141 insertions(+), 769 deletions(-)

diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 1289d71..21a0e4d 100644
--- a/src/api/api-models.ts
+++ b/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
diff --git a/src/components/QuestionItem.vue b/src/components/QuestionItem.vue
index bdf0086..6a1d9b2 100644
--- a/src/components/QuestionItem.vue
+++ b/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' }">
-      <NButton
-        v-if="isViolation"
-        size="small"
-        text
-        @click="showContent = !showContent"
-      >
-        {{ item.question?.message }}
-      </NButton>
-      <template v-else>
-        {{ item.question?.message }}
-      </template>
+    <NText
+      :style="{
+        filter: isViolation && !showContent ? 'blur(3.7px)' : '',
+        cursor: isViolation && !showContent ? 'pointer' : '',
+        whiteSpace: 'pre-wrap'
+      }"
+      @click="isViolation ? (showContent = !showContent) : null"
+    >
+      {{ item.question?.message }}
     </NText>
 
     <template v-if="item.answer">
diff --git a/src/store/useQuestionBox.ts b/src/store/useQuestionBox.ts
index b9e7c8f..1215aff 100644
--- a/src/store/useQuestionBox.ts
+++ b/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
   }
diff --git a/src/store/useWebFetcher.ts b/src/store/useWebFetcher.ts
index ae71cff..28cdebf 100644
--- a/src/store/useWebFetcher.ts
+++ b/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;
diff --git a/src/views/manage/AnalyzeView.vue b/src/views/manage/AnalyzeView.vue
index 69f0963..0411213 100644
--- a/src/views/manage/AnalyzeView.vue
+++ b/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;
diff --git a/src/views/manage/QuestionBoxManageView.vue b/src/views/manage/QuestionBoxManageView.vue
index 314cfb6..c5380ce 100644
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { copyToClipboard, downloadImage } from '@/Utils'
-import { DisableFunction, EnableFunction, SaveSetting, useAccount } from '@/api/account'
+import { DisableFunction, EnableFunction, SaveAccountSettings, SaveSetting, useAccount } from '@/api/account'
 import { FunctionTypes, QAInfo, Setting_QuestionDisplay } from '@/api/api-models'
 import { CN_HOST, CURRENT_HOST } from '@/data/constants'
 import router from '@/router'
-import { Heart, HeartOutline, TrashBin } from '@vicons/ionicons5'
 import QuestionItem from '@/components/QuestionItem.vue'
 import QuestionItems from '@/components/QuestionItems.vue'
+import QuestionDisplayCard from './QuestionDisplayCard.vue'
 import { useQuestionBox } from '@/store/useQuestionBox'
 import { Delete24Filled, Delete24Regular, Eye24Filled, EyeOff24Filled, Info24Filled } from '@vicons/fluent'
-import { useAsyncQueue, useStorage } from '@vueuse/core'
+import { Heart, HeartOutline, TrashBin } from '@vicons/ionicons5'
+import { useStorage } from '@vueuse/core'
 // @ts-ignore
 import { saveAs } from 'file-saver'
 import html2canvas from 'html2canvas'
@@ -45,78 +46,75 @@ import {
   useMessage
 } from 'naive-ui'
 import QrcodeVue from 'qrcode.vue'
-import { computed, h, onMounted, ref } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import QuestionDisplayCard from './QuestionDisplayCard.vue'
 
-const accountInfo = useAccount()
-const route = useRoute()
-const message = useMessage()
+// --- 响应式状态和全局实例 ---
+const accountInfo = useAccount() // 获取账户信息
+const route = useRoute() // 获取路由信息
+const message = useMessage() // NaiveUI 消息提示
+const useQB = useQuestionBox() // 问题箱状态管理
 
-const useQB = useQuestionBox()
+// --- 组件内部状态 ---
+const selectedTabItem = ref(route.query.send ? '1' : '0') // 当前选中的标签页, 默认为'我收到的', 如果路由带send参数则为'我发送的'
+const replyModalVisiable = ref(false) // 回复模态框可见性
+const shareModalVisiable = ref(false) // 分享模态框可见性
+const showOBSModal = ref(false) // OBS预览模态框可见性
+const replyMessage = ref('') // 回复输入框内容
+const addTagName = ref('') // 添加标签输入框内容
+const useCNUrl = useStorage('Settings.UseCNUrl', false) // 是否使用国内镜像URL (持久化存储)
+const shareCardRef = ref<HTMLElement | null>(null) // 分享卡片DOM引用
+const ps = ref(20) // 分页大小 (每页条数)
+const pn = ref(1) // 当前页码
+const savedCardSize = useStorage<{ width: number; height: number }>('Settings.QuestionDisplay.CardSize', { // 问题展示卡片尺寸 (持久化存储)
+  width: 400,
+  height: 400,
+})
+const tempSaftyLevel = ref(0) // 临时存储安全等级滑块值, 用于延迟更新
 
-const selectedTabItem = ref(route.query.send ? '1' : '0')
-
-const replyModalVisiable = ref(false)
-const shareModalVisiable = ref(false)
-const replyMessage = ref()
-const addTagName = ref('')
-
-const useCNUrl = useStorage('Settings.UseCNUrl', false)
-
-const showSettingCard = ref(true)
-const showOBSModal = ref(false)
-const defaultSettings = {} as Setting_QuestionDisplay
+// --- 计算属性 ---
+// 问题展示设置, 提供默认值
 const setting = computed({
-  get: () => {
-    if (accountInfo.value && accountInfo.value.settings) {
-      return accountInfo.value.settings.questionDisplay
-    }
-    return defaultSettings
+  get: (): Setting_QuestionDisplay => {
+    return accountInfo.value?.settings?.questionDisplay ?? {} as Setting_QuestionDisplay
   },
   set: (value) => {
-    if (accountInfo.value) {
+    if (accountInfo.value?.settings) { // 安全设置, 确保 accountInfo 存在
       accountInfo.value.settings.questionDisplay = value
     }
   },
 })
 
-const shareCardRef = ref()
-const shareUrl = computed(() => `${CURRENT_HOST}@` + accountInfo.value?.name + '/question-box')
-const shareUrlCN = computed(() => CN_HOST + accountInfo.value?.name + '/question-box')
+// 分享链接 (当前域名)
+const shareUrl = computed(() => `${CURRENT_HOST}@${accountInfo.value?.name}/question-box`)
+// 分享链接 (国内镜像)
+const shareUrlCN = computed(() => `${CN_HOST}@${accountInfo.value?.name}/question-box`)
 
-const ps = ref(20)
-const pn = ref(1)
+// 分页后的问题列表 (仅限收到的问题)
 const pagedQuestions = computed(() =>
   useQB.recieveQuestionsFiltered.slice((pn.value - 1) * ps.value, pn.value * ps.value),
 )
-const savedCardSize = useStorage<{ width: number; height: number }>('Settings.QuestionDisplay.CardSize', {
-  width: 400,
-  height: 400,
-})
 
-let isRevieveGetted = false
-let isSendGetted = false
-
-const tempSaftyLevel = ref(accountInfo.value?.settings?.questionBox?.saftyLevel)
+// 安全等级标记渲染函数
 const remarkLevel = {
   0: () => h(NFlex, { align: 'center', justify: 'center', size: 3 }, () => [
-    '无',
+    '无', // 等级0: 无审查
     h(NTooltip, null, { trigger: () => h(NIcon, { component: Info24Filled, color: '#c2e77f' }), default: () => '完全关闭内容审查机制，用户可自由提问，系统不会进行任何内容过滤' }),
   ]),
   1: () => h(NFlex, { align: 'center', justify: 'center', size: 3 }, () => [
-    '宽松',
+    '宽松', // 等级1: 宽松审查
     h(NTooltip, null, { trigger: () => h(NIcon, { component: Info24Filled, color: '#e1d776' }), default: () => '基础内容审查，仅过滤极端攻击性、暴力或违法内容，保留大部分用户提问 (得分 > 30)' }),
   ]),
   2: () => h(NFlex, { align: 'center', justify: 'center', size: 3 }, () => [
-    '一般',
-    h(NTooltip, null, { trigger: () => h(NIcon, { component: Info24Filled, color: '#ef956d' }), default: () => '适度内容审查，就比较一般 (得分 > 60)' }),
+    '一般', // 等级2: 一般审查
+    h(NTooltip, null, { trigger: () => h(NIcon, { component: Info24Filled, color: '#ef956d' }), default: () => '适度内容审查，过滤更广泛的潜在冒犯性内容 (得分 > 60)' }),
   ]),
   3: () => h(NFlex, { align: 'center', justify: 'center', size: 3, wrap: false }, () => [
-    '严格',
-    h(NTooltip, null, { trigger: () => h(NIcon, { component: Info24Filled, color: '#ea6262' }), default: () => '最高级别内容审查，禁止任何嘴臭 (得分 > 90)' }),
+    '严格', // 等级3: 严格审查
+    h(NTooltip, null, { trigger: () => h(NIcon, { component: Info24Filled, color: '#ea6262' }), default: () => '最高级别内容审查，过滤所有可能令人不适或冒犯的内容 (得分 > 90)' }),
   ]),
 }
+// 安全等级文本映射
 const remarkLevelString: { [key: number]: string } = {
   0: '无',
   1: '宽松',
@@ -124,691 +122,935 @@ const remarkLevelString: { [key: number]: string } = {
   3: '严格',
 }
 
-async function onTabChange(value: string) {
-  return
-
-  if (value == '0' && !isRevieveGetted) {
-    await useQB.GetRecieveQAInfo()
-    isRevieveGetted = true
-  } else if (value == '1' && !isSendGetted) {
-    await useQB.GetSendQAInfo()
-    isSendGetted = true
-  }
-}
+// --- 方法 ---
+// 打开回复模态框
 function onOpenModal(question: QAInfo) {
-  useQB.currentQuestion = question
-  replyMessage.value = question.answer?.message
-  replyModalVisiable.value = true
+  useQB.currentQuestion = question // 设置当前操作的问题
+  replyMessage.value = question.answer?.message ?? '' // 初始化回复内容 (如果是已有回复则加载)
+  replyModalVisiable.value = true // 显示模态框
 }
-function refresh() {
-  isSendGetted = false
-  isRevieveGetted = false
+
+// 刷新数据
+async function refresh() {
+  // 重置页码为第一页
+  pn.value = 1;
+  // 根据当前标签页重新获取数据
   if (selectedTabItem.value == '0') {
-    useQB.GetRecieveQAInfo()
+    await useQB.GetRecieveQAInfo()
   } else if (selectedTabItem.value == '1') {
-    useQB.GetSendQAInfo()
+    await useQB.GetSendQAInfo()
   }
+  // 如果在垃圾站或设置页, 额外刷新收到的问题列表 (可能需要更新状态)
+  if (selectedTabItem.value === '2' || selectedTabItem.value === '3') {
+     await useQB.GetRecieveQAInfo()
+     // 如果需要，也可以刷新发送的列表
+     // await useQB.GetSendQAInfo()
+  }
+  message.success('已刷新')
 }
+
+// 保存分享卡片图片
 function saveShareImage() {
+  if (!shareCardRef.value || !accountInfo.value?.name) return // 防御式编程
+
   html2canvas(shareCardRef.value, {
-    width: shareCardRef.value.clientWidth, //dom 原始宽度
-    height: shareCardRef.value.clientHeight,
-    backgroundColor: null,
-    scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
+    width: shareCardRef.value.clientWidth, // 使用DOM原始宽度
+    height: shareCardRef.value.clientHeight, // 使用DOM原始高度
+    backgroundColor: null, // 透明背景
+    scrollY: 0,
     scrollX: 0,
-    useCORS: true, //支持跨域，但好像没什么用
-    allowTaint: true, //允许跨域（默认false）
-    scale: 1,
+    useCORS: true, // 尝试使用CORS
+    scale: window.devicePixelRatio * 2, // 提高截图分辨率以获得更清晰的图像 (2倍)
   }).then((canvas) => {
-    // 生成的ba64图片
     canvas.toBlob(
-      (data) => {
-        saveAs(data!, `vtsuru-提问箱-${accountInfo.value?.name}.png`)
+      (blob) => {
+        if (blob) {
+          saveAs(blob, `vtsuru-提问箱-${accountInfo.value?.name}.png`) // 保存Blob对象
+        } else {
+          message.error('无法生成图片 Blob')
+        }
       },
-      'image/png',
-      1,
+      'image/png', // 指定图片格式
+      1, // 图片质量 (无损)
     )
+  }).catch(err => {
+    message.error('生成分享卡片失败: ' + err)
+    console.error("html2canvas error:", err);
   })
 }
+
+// 保存二维码图片
 function saveQRCode() {
-  downloadImage(`https://api.qrserver.com/v1/create-qr-code/?data=${shareUrl.value}`, 'vtsuru-提问箱二维码.png')
+  if (!shareUrl.value || !accountInfo.value?.name) return
+  // 使用 QR Server API 生成并下载二维码
+  downloadImage(`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl.value)}`, `vtsuru-提问箱二维码-${accountInfo.value.name}.png`)
+  message.success('二维码已开始下载')
 }
-async function saveSettings() {
-  //useQB.isLoading = true
-  await SaveSetting('QuestionBox', accountInfo.value.settings.questionBox)
-    .then((msg) => {
-      if (msg) {
-        message.success('已保存')
-        return true
+
+// 保存问题箱核心设置 (如允许匿名提问, 安全等级)
+async function saveQuestionBoxSettings() {
+  if (!accountInfo.value?.settings?.questionBox) return // 防御
+
+  try {
+    const success = await SaveSetting('QuestionBox', accountInfo.value.settings.questionBox)
+    if (success) {
+      message.success('设置已保存')
+    } else {
+      message.error('保存设置失败') // API 返回 false
+    }
+  } catch (err) {
+    message.error('保存设置时出错: ' + err)
+    console.error("SaveSetting error:", err);
+  }
+}
+
+// 保存通知相关的账户设置
+async function saveNotificationSetting() {
+    if (!accountInfo.value?.settings?.sendEmail) return; // 防御
+
+    try {
+      const response = await SaveAccountSettings(); // API 应只保存账户相关的设置
+      if (response.code === 200) {
+        message.success('通知设置已保存');
       } else {
-        message.error('保存失败: ' + msg)
+        message.error('修改通知设置失败: ' + response.message); // 使用后端返回的消息
       }
-    })
-    .finally(() => {
-      //useQB.isLoading = false
-    })
-}
-
-const parentRef = ref<HTMLElement | null>(null)
+    } catch (err) {
+      message.error('修改通知设置失败: ' + err);
+      console.error("SaveAccountSettings error:", err);
+    }
+  }
 
+// 启用或禁用提问箱功能
 async function setFunctionEnable(enable: boolean) {
   let success = false
-  if (enable) {
-    success = await EnableFunction(FunctionTypes.QuestionBox)
-  } else {
-    success = await DisableFunction(FunctionTypes.QuestionBox)
-  }
-  if (success) {
-    message.success('已' + (enable ? '启用' : '禁用'))
-  } else {
-    message.error('无法' + (enable ? '启用' : '禁用'))
+  try {
+    if (enable) {
+      success = await EnableFunction(FunctionTypes.QuestionBox) // 调用启用API
+    } else {
+      success = await DisableFunction(FunctionTypes.QuestionBox) // 调用禁用API
+    }
+    if (success) {
+      message.success(`提问箱功能已${enable ? '启用' : '禁用'}`)
+      // 成功后可能需要更新 accountInfo 中的 enableFunctions 状态, useAccount 可能需要提供更新方法或自动刷新
+      // 假设 useAccount() 会自动更新或有刷新机制
+      if (accountInfo.value?.settings?.enableFunctions) {
+         if (enable && !accountInfo.value.settings.enableFunctions.includes(FunctionTypes.QuestionBox)) {
+            accountInfo.value.settings.enableFunctions.push(FunctionTypes.QuestionBox)
+         } else if (!enable) {
+             const index = accountInfo.value.settings.enableFunctions.indexOf(FunctionTypes.QuestionBox);
+             if (index > -1) {
+                 accountInfo.value.settings.enableFunctions.splice(index, 1);
+             }
+         }
+      }
+
+    } else {
+      message.error(`无法${enable ? '启用' : '禁用'}提问箱功能`)
+    }
+  } catch (err) {
+     message.error(`操作失败: ${err}`)
+     console.error("Enable/Disable Function error:", err);
+     // 操作失败时可能需要恢复 Switch 的状态,防止UI与实际状态不一致
+     // 这需要更复杂的逻辑,暂时不加
   }
 }
 
+// --- 生命周期钩子 ---
 onMounted(() => {
-  useQB.GetTags()
-  useQB.GetRecieveQAInfo()
-  useQB.GetSendQAInfo()
+  // 组件挂载时获取初始数据
+  useQB.GetTags() // 获取标签列表
+  useQB.GetRecieveQAInfo() // 获取收到的问题
+  useQB.GetSendQAInfo() // 获取发送的问题
 
+  // 初始化展示问题 (如果设置中存在)
   useQB.displayQuestion = useQB.recieveQuestions.find(
-    (s) => s.id == accountInfo.value?.settings.questionDisplay.currentQuestion,
+    (s) => s.id == accountInfo.value?.settings?.questionDisplay?.currentQuestion,
   )
-})
+
+  // 初始化安全等级滑块的临时值
+  if (accountInfo.value?.settings?.questionBox?.saftyLevel !== undefined) {
+      tempSaftyLevel.value = accountInfo.value.settings.questionBox.saftyLevel;
+  }
+});
+
+// 监听 accountInfo 变化, 以确保 tempSaftyLevel 能在 accountInfo 加载后正确初始化
+watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) => {
+    if (newLevel !== undefined) {
+        tempSaftyLevel.value = newLevel;
+    }
+}, { immediate: true }); // 立即执行一次以设置初始值
+
 </script>
 
 <template>
-  <NSpace align="center">
-    <NAlert
-      :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.QuestionBox) ? 'success' : 'warning'"
-      style="max-width: 200px"
-    >
-      启用提问箱
-      <NDivider vertical />
-      <NSwitch
-        :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.QuestionBox)"
-        @update:value="setFunctionEnable"
-      />
-    </NAlert>
-    <NButton
-      type="primary"
-      @click="refresh"
-    >
-      刷新
-    </NButton>
-    <NButton
-      type="primary"
-      secondary
-      @click="shareModalVisiable = true"
-    >
-      分享
-    </NButton>
-    <NButton
-      type="primary"
-      secondary
-      @click="$router.push({ name: 'user-questionBox', params: { id: accountInfo.name } })"
-    >
-      前往提问页
-    </NButton>
-    <NButton
-      type="primary"
-      secondary
-      @click="showOBSModal = true"
-    >
-      预览OBS组件
-    </NButton>
-    <NAlert
-      type="success"
-      style="max-width: 550px;"
-      closable
-    >
-      2025.3.1 本站已支持内容审查, 可前往提问箱设置页进行开启
-      <NTooltip>
-        <template #trigger>
-          <NIcon :component="Info24Filled" />
-        </template>
-        新功能还不稳定, 如果启用后遇到任何问题请向我反馈
-      </NTooltip>
-    </NAlert>
-  </NSpace>
-  <NDivider
-    style="margin: 16px 0 16px 0"
-    title-placement="left"
-  >
-    提问页链接
-  </NDivider>
-  <NFlex align="center">
-    <NInputGroup style="max-width: 400px;">
-      <NInput
-        :value="`${useCNUrl ? CN_HOST : CURRENT_HOST}@${accountInfo.name}/question-box`"
-        readonly
-      />
-      <NButton
-        secondary
-        @click="copyToClipboard(`${useCNUrl ? CN_HOST : CURRENT_HOST}@${accountInfo.name}/question-box`)"
+  <NSpin :show="!accountInfo">
+    <template v-if="accountInfo">
+      <!-- 顶部操作区域 -->
+      <NSpace
+        align="center"
+        wrap
+        item-style="margin-bottom: 8px;"
       >
-        复制
-      </NButton>
-    </NInputGroup>
-    <NCheckbox v-model:checked="useCNUrl">
-      使用国内镜像(访问更快)
-    </NCheckbox>
-  </NFlex>
-  <NDivider style="margin: 10px 0 10px 0" />
-  <template v-if="useQB.reviewing > 0">
-    <NAlert
-      type="warning"
-      title="有提问正在审核中"
-    >
-      还剩余 {{ useQB.reviewing }} 条
-    </NAlert>
-    <NDivider style="margin: 10px 0 10px 0" />
-  </template>
-  <NSpin
-    v-if="useQB.isLoading"
-    show
-  />
-  <NTabs
-    v-else
-    v-model:value="selectedTabItem"
-    animated
-    @update:value="onTabChange"
-  >
-    <NTabPane
-      tab="我收到的"
-      name="0"
-      display-directive="show:lazy"
-    >
-      <NFlex align="center">
+        <!-- 提问箱启用开关 -->
+        <NAlert
+          :type="accountInfo.settings?.enableFunctions?.includes(FunctionTypes.QuestionBox) ? 'success' : 'warning'"
+          style="padding: 5px 10px;"
+          :show-icon="false"
+        >
+          <NFlex align="center">
+            启用提问箱
+            <NSwitch
+              :value="accountInfo.settings?.enableFunctions?.includes(FunctionTypes.QuestionBox)"
+              :disabled="useQB.isLoading"
+              @update:value="setFunctionEnable"
+            />
+          </NFlex>
+        </NAlert>
+
+        <!-- 操作按钮 -->
         <NButton
           type="primary"
-          @click="$router.push({ name: 'question-display' })"
+          :loading="useQB.isLoading"
+          @click="refresh"
         >
-          打开展示页
+          刷新
         </NButton>
-        <NSelect
-          v-model:value="useQB.displayTag"
-          placeholder="选择当前话题"
-          filterable
-          clearable
-          :options="useQB.tags.map((s) => ({ label: s.name, value: s.name }))"
-          style="width: 200px"
+        <NButton
+          type="primary"
+          secondary
+          @click="shareModalVisiable = true"
         >
-          <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>
-      </NFlex>
-      <NDivider style="margin: 10px 0 10px 0" />
-      <NEmpty
-        v-if="useQB.recieveQuestionsFiltered.length == 0"
-        description="暂无收到的提问"
-      />
-      <div v-else>
-        <NPagination
-          v-model:page="pn"
-          v-model:page-size="ps"
-          :item-count="useQB.recieveQuestionsFiltered.length"
-          show-quick-jumper
-          show-size-picker
-          :page-sizes="[20, 50, 100]"
-        />
-        <NDivider style="margin: 10px 0 10px 0" />
-        <QuestionItems :questions="pagedQuestions">
-          <template #footer="{ item }">
-            <NSpace>
-              <NButton
-                v-if="!item.isReaded"
-                size="small"
-                type="info"
-                @click="useQB.read(item, true)"
-              >
-                设为已读
-              </NButton>
-              <NButton
-                v-else
-                size="small"
-                type="warning"
-                @click="useQB.read(item, false)"
-              >
-                重设为未读
-              </NButton>
-              <NButton
-                size="small"
-                @click="useQB.favorite(item, !item.isFavorite)"
-              >
-                <template #icon>
-                  <NIcon
-                    :component="item.isFavorite ? Heart : HeartOutline"
-                    :color="item.isFavorite ? '#dd484f' : ''"
-                  />
-                </template>
-                收藏
-              </NButton>
-              <NPopconfirm @positive-click="useQB.DelQA(item.id)">
-                <template #trigger>
-                  <NButton
-                    size="small"
-                    type="error"
-                  >
-                    <template #icon>
-                      <NIcon :component="Delete24Filled" />
-                    </template>
-                    删除
-                  </NButton>
-                </template>
-                确认删除这条提问？ 删除后无法恢复
-              </NPopconfirm>
-              <!-- <NTooltip>
-                        <template #trigger>
-                          <NButton size="small"> 举报 </NButton>
-                        </template>
-                        暂时还没写
-                      </NTooltip> -->
-              <NButton
-                size="small"
-                type="warning"
-                @click="useQB.blacklist(item)"
-              >
-                拉黑
-              </NButton>
-            </NSpace>
-          </template>
-          <template #header-extra="{ item }">
-            <NButton
-              :type="item.isReaded ? 'default' : 'info'"
-              :secondary="item.isReaded"
-              @click="onOpenModal(item)"
-            >
-              {{ item.answer ? '查看回复' : '回复' }}
-            </NButton>
-          </template>
-        </QuestionItems>
-        <NDivider style="margin: 10px 0 10px 0" />
-        <NPagination
-          v-model:page="pn"
-          v-model:page-size="ps"
-          :item-count="useQB.recieveQuestionsFiltered.length"
-          show-quick-jumper
-          show-size-picker
-          :page-sizes="[20, 50, 100]"
-        />
-      </div>
-    </NTabPane>
-    <NTabPane
-      ref="parentRef"
-      tab="我发送的"
-      name="1"
-      display-directive="show:lazy"
-    >
-      <NEmpty
-        v-if="useQB.sendQuestions.length == 0"
-        description="暂无发送的提问"
-      />
-      <NList v-else>
-        <NListItem
-          v-for="item in useQB.sendQuestions"
-          :key="item.id"
+          分享
+        </NButton>
+        <NButton
+          type="primary"
+          secondary
+          @click="$router.push({ name: 'user-questionBox', params: { id: accountInfo.name } })"
         >
-          <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">
-                    <NText depth="3">
-                      回复
-                    </NText>
-                  </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="2"
-      display-directive="show:lazy"
-    >
-      <template #prefix>
-        <NIcon :component="TrashBin" />
-      </template>
-      <NEmpty
-        v-if="useQB.trashQuestions.length == 0"
-        description="暂无被过滤的提问"
-      />
-      <NList v-else>
-        <NListItem
-          v-for="question in useQB.trashQuestions"
-          :key="question.id"
+          前往提问页
+        </NButton>
+        <NButton
+          type="primary"
+          secondary
+          @click="showOBSModal = true"
         >
-          <QuestionItem :item="question">
-            <template #footer="{ item }">
-              <NSpace>
-                <NPopconfirm @positive-click="useQB.DelQA(item.id)">
-                  <template #trigger>
-                    <NButton
-                      size="small"
-                      type="error"
-                    >
-                      <template #icon>
-                        <NIcon :component="Delete24Filled" />
-                      </template>
-                      删除
-                    </NButton>
-                  </template>
-                  确认删除这条提问？ 删除后无法恢复
-                </NPopconfirm>
-                <!-- <NTooltip>
-                        <template #trigger>
-                          <NButton size="small"> 举报 </NButton>
-                        </template>
-                        暂时还没写
-                      </NTooltip> -->
-                <NButton
-                  size="small"
-                  type="warning"
-                  @click="useQB.blacklist(item)"
-                >
-                  拉黑
-                </NButton>
-                <NButton
-                  size="small"
-                  type="primary"
-                  @click="useQB.blacklist(item)"
-                >
-                  标记为正常
-                </NButton>
-              </NSpace>
-            </template>
-            <template #header-extra="{ item }">
-              <NButton
-                :type="item.isReaded ? 'default' : 'info'"
-                :secondary="item.isReaded"
-                @click="onOpenModal(item)"
-              >
-                {{ item.answer ? '查看回复' : '回复' }}
-              </NButton>
-            </template>
-          </QuestionItem>
-        </NListItem>
-      </NList>
-    </NTabPane>
-    <NTabPane
-      tab="设置"
-      name="3"
-      display-directive="show:lazy"
-    >
-      <NDivider> 设定 </NDivider>
-      <NSpin :show="useQB.isLoading">
-        <NCheckbox
-          v-model:checked="accountInfo.settings.questionBox.allowUnregistedUser"
-          @update:checked="saveSettings"
+          预览OBS组件
+        </NButton>
+
+        <!-- 功能提示 -->
+        <NAlert
+          type="success"
+          closable
+          style="max-width: 550px;"
         >
-          允许未注册用户进行提问
-        </NCheckbox>
-        <NDivider>
-          内容审查
-          <NDivider vertical />
-          <NTag
-            type="success"
-            :bordered="false"
-            size="tiny"
-          >
-            新
-          </NTag>
-        </NDivider>
-        <NSlider
-          v-model:value="tempSaftyLevel"
-          :marks="remarkLevel"
-          step="mark"
-          :max="3"
-          style="max-width: 80%; margin: 0 auto"
-          :format-tooltip="(v) => remarkLevelString[v]"
-          @dragend="() => { accountInfo.settings.questionBox.saftyLevel = tempSaftyLevel; saveSettings() }"
-        />
-        <NDivider>
-          标签
+          2025.3.1 本站已支持内容审查, 可前往提问箱设置页进行开启
           <NTooltip>
             <template #trigger>
               <NIcon :component="Info24Filled" />
             </template>
-            类似于话题, 可以在投稿时选择
+            新功能还不稳定, 如果启用后遇到任何问题请向我反馈
           </NTooltip>
-        </NDivider>
-        <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)"
+        </NAlert>
+      </NSpace>
+
+      <!-- 提问页链接 -->
+      <NDivider
+        title-placement="left"
+        style="margin: 16px 0;"
+      >
+        提问页链接
+      </NDivider>
+      <NFlex align="center">
+        <NInputGroup style="max-width: 400px;">
+          <NInput
+            :value="`${useCNUrl ? shareUrlCN : shareUrl}`"
+            readonly
+          />
+          <NButton
+            secondary
+            @click="copyToClipboard(`${useCNUrl ? shareUrlCN : shareUrl}`)"
+          >
+            复制
+          </NButton>
+        </NInputGroup>
+        <NCheckbox v-model:checked="useCNUrl">
+          使用国内镜像(访问更快)
+        </NCheckbox>
+      </NFlex>
+
+      <!-- 审核中提示 -->
+      <template v-if="useQB.reviewing > 0">
+        <NDivider style="margin: 10px 0" />
+        <NAlert
+          type="warning"
+          title="有提问正在审核中"
+        >
+          当前有 {{ useQB.reviewing }} 条提问正在等待审核。
+        </NAlert>
+      </template>
+
+      <NDivider style="margin: 16px 0;" />
+
+      <!-- 主要内容区域: 标签页 -->
+      <NSpin :show="useQB.isLoading">
+        <NTabs
+          v-model:value="selectedTabItem"
+          animated
+          type="line"
+        >
+          <!-- 我收到的 -->
+          <NTabPane
+            tab="我收到的"
+            name="0"
+            display-directive="show:lazy"
+          >
+            <NFlex
+              align="center"
+              justify="space-between"
+              wrap
+              item-style="margin-bottom: 8px;"
             >
-              添加
-            </NButton>
-          </NInputGroup>
-        </NFlex>
-        <br>
-        <NEmpty
-          v-if="useQB.tags.length == 0"
-          description="暂无标签"
-        />
-        <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">
-                <NTag
-                  :bordered="false"
-                  size="small"
-                  :type="item.visiable ? 'success' : 'error'"
+              <!-- 左侧操作 -->
+              <NSpace>
+                <NButton
+                  type="primary"
+                  @click="$router.push({ name: 'question-display' })"
                 >
-                  {{ item.name }}
-                </NTag>
-                <NTooltip>
-                  <template #trigger>
-                    <NPopconfirm @positive-click="useQB.updateTagVisiable(item.name, !item.visiable)">
-                      <template #trigger>
-                        <NButton
-                          :type="item.visiable ? 'success' : 'error'"
-                          text
-                        >
-                          <template #icon>
-                            <NIcon
-                              v-if="item.visiable"
-                              :component="Eye24Filled"
-                            />
-                            <NIcon
-                              v-else
-                              :component="EyeOff24Filled"
-                            />
-                          </template>
-                        </NButton>
-                      </template>
-                      确定要{{ item.visiable ? '隐藏' : '显示' }}这个标签吗?
-                    </NPopconfirm>
+                  打开展示页
+                </NButton>
+                <NSelect
+                  v-model:value="useQB.displayTag"
+                  placeholder="筛选话题"
+                  filterable
+                  clearable
+                  :options="useQB.tags.map((s) => ({ label: s.name, value: s.name }))"
+                  style="min-width: 150px;"
+                >
+                  <template #header>
+                    <NText
+                      strong
+                      depth="3"
+                      style="padding: 4px 8px; display: block;"
+                    >
+                      在设置选项卡中管理话题
+                    </NText>
                   </template>
-                  {{ item.visiable ? '隐藏' : '显示' }}
-                </NTooltip>
-                <NPopconfirm @positive-click="useQB.delTag(item.name)">
-                  <template #trigger>
+                </NSelect>
+              </NSpace>
+              <!-- 右侧筛选 -->
+              <NSpace>
+                <NCheckbox v-model:checked="useQB.onlyFavorite">
+                  只看收藏
+                </NCheckbox>
+                <NCheckbox v-model:checked="useQB.onlyPublic">
+                  只看公开
+                </NCheckbox>
+                <NCheckbox v-model:checked="useQB.onlyUnread">
+                  只看未读
+                </NCheckbox>
+              </NSpace>
+            </NFlex>
+
+            <NDivider style="margin: 10px 0;" />
+
+            <NEmpty
+              v-if="useQB.recieveQuestionsFiltered.length === 0"
+              description="暂无收到的提问"
+            />
+            <div v-else>
+              <!-- 顶部页码 -->
+              <NPagination
+                v-if="useQB.recieveQuestionsFiltered.length > ps"
+                v-model:page="pn"
+                v-model:page-size="ps"
+                :item-count="useQB.recieveQuestionsFiltered.length"
+                show-quick-jumper
+                show-size-picker
+                :page-sizes="[20, 50, 100]"
+                style="margin-bottom: 10px;"
+              />
+              <!-- 问题列表 -->
+              <QuestionItems :questions="pagedQuestions">
+                <template #footer="{ item }">
+                  <NSpace>
+                    <!-- 读/未读 按钮 -->
                     <NButton
-                      type="error"
-                      text
+                      size="small"
+                      :type="item.isReaded ? 'warning' : 'info'"
+                      ghost
+                      @click="useQB.read(item, !item.isReaded)"
+                    >
+                      {{ item.isReaded ? '设为未读' : '设为已读' }}
+                    </NButton>
+                    <!-- 收藏按钮 -->
+                    <NButton
+                      size="small"
+                      @click="useQB.favorite(item, !item.isFavorite)"
                     >
                       <template #icon>
-                        <NIcon :component="Delete24Regular" />
+                        <NIcon
+                          :component="item.isFavorite ? Heart : HeartOutline"
+                          :color="item.isFavorite ? '#dd484f' : undefined"
+                        />
                       </template>
+                      {{ item.isFavorite ? '取消收藏' : '收藏' }}
                     </NButton>
+                    <!-- 拉黑按钮 -->
+                    <NButton
+                      size="small"
+                      type="warning"
+                      ghost
+                      @click="useQB.blacklist(item)"
+                    >
+                      拉黑提问者
+                    </NButton>
+                    <!-- 删除按钮 -->
+                    <NPopconfirm @positive-click="useQB.DelQA(item.id)">
+                      <template #trigger>
+                        <NButton
+                          size="small"
+                          type="error"
+                          ghost
+                        >
+                          <template #icon>
+                            <NIcon :component="Delete24Filled" />
+                          </template>
+                          删除
+                        </NButton>
+                      </template>
+                      确认删除这条提问？ 删除后无法恢复。
+                    </NPopconfirm>
+                  </NSpace>
+                </template>
+                <template #header-extra="{ item }">
+                  <!-- 回复/查看回复 按钮 -->
+                  <NButton
+                    :type="item.answer ? 'primary' : 'info'"
+                    :tertiary="item.isReaded"
+                    :secondary="!item.isReaded && !item.answer"
+                    :ghost="!!item.answer"
+                    @click="onOpenModal(item)"
+                  >
+                    {{ item.answer ? '查看/修改回复' : '回复' }}
+                  </NButton>
+                </template>
+              </QuestionItems>
+
+              <!-- 底部页码 -->
+              <NDivider
+                v-if="useQB.recieveQuestionsFiltered.length > ps"
+                style="margin: 10px 0;"
+              />
+              <NPagination
+                v-if="useQB.recieveQuestionsFiltered.length > ps"
+                v-model:page="pn"
+                v-model:page-size="ps"
+                :item-count="useQB.recieveQuestionsFiltered.length"
+                show-quick-jumper
+                show-size-picker
+                :page-sizes="[20, 50, 100]"
+              />
+            </div>
+          </NTabPane>
+
+          <!-- 我发送的 -->
+          <NTabPane
+            tab="我发送的"
+            name="1"
+            display-directive="show:lazy"
+          >
+            <NEmpty
+              v-if="useQB.sendQuestions.length === 0"
+              description="暂无发送的提问"
+            />
+            <NList
+              v-else
+              hoverable
+              clickable
+              style="background-color: transparent;"
+            >
+              <NListItem
+                v-for="item in useQB.sendQuestions"
+                :key="item.id"
+              >
+                <NCard
+                  size="small"
+                  :bordered="false"
+                  style="background-color: var(--n-color);"
+                >
+                  <!-- 发送目标和时间 -->
+                  <template #header>
+                    <NFlex
+                      align="center"
+                      justify="space-between"
+                    >
+                      <NSpace
+                        :size="4"
+                        align="center"
+                      >
+                        <NText>发给</NText>
+                        <NButton
+                          text
+                          type="info"
+                          @click="router.push('/user/' + item.target.id)"
+                        >
+                          {{ item.target.name }}
+                        </NButton>
+                      </NSpace>
+                      <NText
+                        depth="3"
+                        style="font-size: small;"
+                      >
+                        <NTooltip placement="top-end">
+                          <template #trigger>
+                            <NTime
+                              :time="item.sendAt"
+                              :to="Date.now()"
+                              type="relative"
+                            />
+                          </template>
+                          <NTime
+                            :time="item.sendAt"
+                            format="yyyy-MM-dd HH:mm:ss"
+                          />
+                        </NTooltip>
+                      </NText>
+                    </NFlex>
                   </template>
-                  确定要删除这个标签吗?
-                </NPopconfirm>
+                  <!-- 问题内容 -->
+                  <template v-if="item.question?.image">
+                    <NImage
+                      :src="item.question.image"
+                      width="100"
+                      object-fit="cover"
+                      lazy
+                      style="border-radius: 4px; margin-bottom: 5px;"
+                    />
+                    <br>
+                  </template>
+                  <NText>{{ item.question?.message }}</NText>
+
+                  <!-- 回复内容 -->
+                  <template
+                    v-if="item.answer"
+                    #footer
+                  >
+                    <NDivider style="margin-top: 8px; margin-bottom: 8px;" />
+                    <NCard
+                      size="small"
+                      :bordered="false"
+                      style="background-color: var(--n-action-color);"
+                    >
+                      <template #header>
+                        <NText depth="2">
+                          对方的回复
+                        </NText>
+                      </template>
+                      <NText>{{ item.answer.message }}</NText>
+                      <template #header-extra>
+                        <NText
+                          depth="3"
+                          style="font-size: small;"
+                        >
+                          <NTooltip
+                            v-if="item.answer.createdAt"
+                            placement="top-end"
+                          >
+                            <template #trigger>
+                              <NTime
+                                :time="item.answer.createdAt"
+                                :to="Date.now()"
+                                type="relative"
+                              />
+                            </template>
+                            <NTime
+                              :time="item.answer.createdAt"
+                              format="yyyy-MM-dd HH:mm:ss"
+                            />
+                          </NTooltip>
+                        </NText>
+                      </template>
+                    </NCard>
+                  </template>
+                </NCard>
+              </NListItem>
+            </NList>
+          </NTabPane>
+
+          <!-- 垃圾站 -->
+          <NTabPane
+            tab="垃圾站"
+            name="2"
+            display-directive="show:lazy"
+          >
+            <template #tab>
+              <NFlex align="center">
+                <NIcon :component="TrashBin" />
+                垃圾站
               </NFlex>
-            </NListItem>
-          </NList>
-        </NFlex>
-        <NDivider> 通知 </NDivider>
-        <NCheckbox
-          v-model:checked="accountInfo.settings.sendEmail.recieveQA"
-          @update:checked="saveSettings"
-        >
-          收到新提问时发送邮件
-        </NCheckbox>
-        <NCheckbox
-          v-model:checked="accountInfo.settings.sendEmail.recieveQAReply"
-          @update:checked="saveSettings"
-        >
-          提问后收到回复时发送邮件
-        </NCheckbox>
+            </template>
+            <NAlert
+              type="info"
+              title="关于垃圾站"
+              closable
+              style="margin-bottom: 10px;"
+            >
+              这里存放的是被内容审查机制自动过滤的提问。您可以查看、删除或将其标记为正常提问。标记为正常后，提问将移至“我收到的”列表。
+            </NAlert>
+            <NEmpty
+              v-if="useQB.trashQuestions.length === 0"
+              description="暂无被过滤的提问"
+            />
+            <NList
+              v-else
+              hoverable
+              style="background-color: transparent;"
+            >
+              <NListItem
+                v-for="question in useQB.trashQuestions"
+                :key="question.id"
+              >
+                <QuestionItem
+                  :item="question"
+                  is-trash
+                >
+                  <template #footer="{ item }">
+                    <NSpace justify="end">
+                      <!-- 标记为正常 -->
+                      <NButton
+                        size="small"
+                        type="primary"
+                        ghost
+                        @click="() => {
+                          useQB.markAsNormal(item);
+                        }"
+                      >
+                        标记为正常
+                      </NButton>
+                      <!-- 拉黑 -->
+                      <NButton
+                        size="small"
+                        type="warning"
+                        ghost
+                        @click="useQB.blacklist(item)"
+                      >
+                        拉黑提问者
+                      </NButton>
+                      <!-- 删除 -->
+                      <NPopconfirm @positive-click="useQB.DelQA(item.id)">
+                        <!-- 增加isTrash参数 -->
+                        <template #trigger>
+                          <NButton
+                            size="small"
+                            type="error"
+                            ghost
+                          >
+                            <template #icon>
+                              <NIcon :component="Delete24Filled" />
+                            </template>
+                            彻底删除
+                          </NButton>
+                        </template>
+                        确认彻底删除这条提问？ 删除后无法恢复。
+                      </NPopconfirm>
+                    </NSpace>
+                  </template>
+                  <template #header-extra>
+                    <!-- 此处垃圾站问题不可回复, 不显示按钮 -->
+                  </template>
+                </QuestionItem>
+              </NListItem>
+            </NList>
+          </NTabPane>
+
+          <!-- 设置 -->
+          <NTabPane
+            tab="设置"
+            name="3"
+            display-directive="show:lazy"
+          >
+            <NSpace vertical>
+              <!-- 基础设定 -->
+              <NDivider title-placement="left">
+                基础设定
+              </NDivider>
+              <NCheckbox
+                v-model:checked="accountInfo.settings.questionBox.allowUnregistedUser"
+                :disabled="useQB.isLoading"
+                @update:checked="saveQuestionBoxSettings"
+              >
+                允许未注册/匿名用户进行提问
+              </NCheckbox>
+
+              <!-- 内容审查 -->
+              <NDivider title-placement="left">
+                内容审查等级
+                <NTag
+                  type="success"
+                  :bordered="false"
+                  size="tiny"
+                  style="margin-left: 5px;"
+                >
+                  新
+                </NTag>
+              </NDivider>
+              <NSlider
+                v-model:value="tempSaftyLevel"
+                :marks="remarkLevel"
+                step="mark"
+                :max="3"
+                style="max-width: 90%; margin: 10px auto;"
+                :format-tooltip="(v) => remarkLevelString[v]"
+                :disabled="useQB.isLoading"
+                @dragend="() => { if (accountInfo?.settings?.questionBox) { accountInfo.settings.questionBox.saftyLevel = tempSaftyLevel; saveQuestionBoxSettings();} }"
+              />
+
+              <!-- 标签/话题管理 -->
+              <NDivider title-placement="left">
+                标签/话题管理
+                <NTooltip placement="right">
+                  <template #trigger>
+                    <NIcon
+                      :component="Info24Filled"
+                      style="margin-left: 5px; cursor: help; vertical-align: middle;"
+                    />
+                  </template>
+                  用于对收到的提问进行分类，或让提问者选择相关话题。
+                </NTooltip>
+              </NDivider>
+              <NFlex align="center">
+                <NInputGroup style="max-width: 400px">
+                  <NInputGroupLabel> 新标签 </NInputGroupLabel>
+                  <NInput
+                    v-model:value="addTagName"
+                    placeholder="输入标签名称"
+                    maxlength="30"
+                    show-count
+                    clearable
+                  />
+                  <NButton
+                    type="primary"
+                    :disabled="!addTagName.trim()"
+                    @click="useQB.addTag(addTagName); addTagName = ''"
+                  >
+                    添加
+                  </NButton>
+                </NInputGroup>
+              </NFlex>
+              <br>
+              <NEmpty
+                v-if="useQB.tags.length === 0"
+                description="暂无标签"
+              />
+              <NList
+                v-else
+                bordered
+                hoverable
+                style="max-width: 500px; background-color: var(--n-color);"
+              >
+                <NListItem
+                  v-for="item in useQB.tags.sort((a, b) => b.createAt - a.createAt)"
+                  :key="item.name"
+                >
+                  <NFlex
+                    align="center"
+                    justify="space-between"
+                  >
+                    <!-- 标签名和状态 -->
+                    <NTag
+                      :bordered="false"
+                      :type="item.visiable ? 'success' : 'default'"
+                      :style="!item.visiable ? { textDecoration: 'line-through', color: 'grey' } : {}"
+                    >
+                      {{ item.name }}
+                    </NTag>
+                    <!-- 操作按钮 -->
+                    <NSpace>
+                      <!-- 显示/隐藏 -->
+                      <NTooltip placement="top">
+                        <template #trigger>
+                          <NPopconfirm @positive-click="useQB.updateTagVisiable(item.name, !item.visiable)">
+                            <template #trigger>
+                              <NButton
+                                :type="item.visiable ? 'success' : 'warning'"
+                                text
+                                style="font-size: 18px;"
+                              >
+                                <template #icon>
+                                  <NIcon :component="item.visiable ? Eye24Filled : EyeOff24Filled" />
+                                </template>
+                              </NButton>
+                            </template>
+                            确定要{{ item.visiable ? '隐藏' : '显示' }}这个标签吗? (隐藏后提问者无法选择)
+                          </NPopconfirm>
+                        </template>
+                        {{ item.visiable ? '隐藏标签' : '显示标签' }}
+                      </NTooltip>
+                      <!-- 删除 -->
+                      <NTooltip placement="top">
+                        <template #trigger>
+                          <NPopconfirm @positive-click="useQB.delTag(item.name)">
+                            <template #trigger>
+                              <NButton
+                                type="error"
+                                text
+                                style="font-size: 18px;"
+                              >
+                                <template #icon>
+                                  <NIcon :component="Delete24Regular" />
+                                </template>
+                              </NButton>
+                            </template>
+                            确定要删除这个标签吗? 删除后不可恢复。
+                          </NPopconfirm>
+                        </template>
+                        删除标签
+                      </NTooltip>
+                    </NSpace>
+                  </NFlex>
+                </NListItem>
+              </NList>
+
+              <!-- 通知设置 -->
+              <NDivider title-placement="left">
+                通知设置
+              </NDivider>
+              <NCheckbox
+                v-model:checked="accountInfo.settings.sendEmail.recieveQA"
+                :disabled="useQB.isLoading"
+                @update:checked="saveNotificationSetting"
+              >
+                收到新提问时发送邮件通知
+              </NCheckbox>
+              <NCheckbox
+                v-model:checked="accountInfo.settings.sendEmail.recieveQAReply"
+                :disabled="useQB.isLoading"
+                @update:checked="saveNotificationSetting"
+              >
+                我发送的提问收到回复时发送邮件通知
+              </NCheckbox>
+            </NSpace>
+            <NDivider />
+          </NTabPane>
+        </NTabs>
       </NSpin>
-    </NTabPane>
-  </NTabs>
-  <NDivider />
+
+      <!-- 全局加载遮罩 (如果需要覆盖整个页面) -->
+      <!-- <NSpin :show="useQB.isLoading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); z-index: 9999;"></NSpin> -->
+    </template>
+    <template #description>
+      正在加载账户信息...
+    </template>
+  </NSpin>
+
+  <!-- 回复模态框 -->
   <NModal
     v-model:show="replyModalVisiable"
     preset="card"
     style="max-width: 90vw; width: 500px"
+    title="回复提问"
+    :mask-closable="false"
   >
-    <template #header>
-      回复
-    </template>
-    <NSpace vertical>
-      <NInput
-        v-model:value="replyMessage"
-        placeholder="请输入回复"
-        type="textarea"
-        maxlength="1000"
-        show-count
-        clearable
-      />
-      <NSpin :show="useQB.isChangingPublic">
-        <NCheckbox
-          :default-checked="useQB.currentQuestion?.isPublic"
-          @update:checked="(v) => useQB.setPublic(v)"
+    <template v-if="useQB.currentQuestion">
+      <NText>正在回复给: {{ useQB.currentQuestion.sender?.name || '匿名用户' }}</NText>
+      <NCard
+        size="small"
+        :bordered="false"
+        style="margin-top: 5px; background-color: var(--n-action-color);"
+      >
+        {{ useQB.currentQuestion.question?.message }}
+      </NCard>
+      <NDivider style="margin: 15px 0;" />
+      <NSpace vertical>
+        <NInput
+          v-model:value="replyMessage"
+          placeholder="请输入回复内容..."
+          type="textarea"
+          maxlength="1000"
+          show-count
+          clearable
+          :autosize="{ minRows: 3, maxRows: 8 }"
+        />
+        <NSpin :show="useQB.isChangingPublic">
+          <NCheckbox
+            :checked="useQB.currentQuestion?.isPublic"
+            @update:checked="(v) => useQB.setPublic(v)"
+          >
+            公开这条提问和我的回复 (其他人可在你的提问页看到)
+          </NCheckbox>
+        </NSpin>
+      </NSpace>
+      <NDivider style="margin: 15px 0;" />
+      <NFlex justify="end">
+        <NButton @click="replyModalVisiable = false">
+          取消
+        </NButton>
+        <NButton
+          :loading="useQB.isRepling"
+          type="primary"
+          @click="async () => { await useQB.reply(useQB.currentQuestion?.id ?? -1, replyMessage); replyModalVisiable = false; }"
         >
-          公开可见
-        </NCheckbox>
-      </NSpin>
-    </NSpace>
-    <NDivider style="margin: 10px 0 10px 0" />
-    <NButton
-      :loading="useQB.isRepling"
-      type="primary"
-      :secondary="useQB.currentQuestion?.answer ? true : false"
-      @click="useQB.reply(useQB.currentQuestion?.id ?? -1, replyMessage)"
-    >
-      {{ useQB.currentQuestion?.answer ? '修改' : '发送' }}
-    </NButton>
+          {{ useQB.currentQuestion?.answer ? '修改回复' : '发送回复' }}
+        </NButton>
+      </NFlex>
+    </template>
   </NModal>
+
+  <!-- 分享模态框 -->
   <NModal
     v-model:show="shareModalVisiable"
     preset="card"
-    title="分享"
-    style="width: 600px"
+    title="分享我的提问箱"
+    style="max-width: 95vw; width: 600px;"
   >
+    <!-- 分享卡片预览 -->
     <div
       ref="shareCardRef"
-      class="share-card container"
+      class="share-card-container"
     >
-      <NText class="share-card title">
-        向我提问
-      </NText>
-      <NText class="share-card type">
-        提 问 箱
-      </NText>
-      <NText class="share-card name">
-        {{ accountInfo?.name }}
-      </NText>
-      <NDivider class="share-card divider-1" />
-      <NText class="share-card site">
-        VTSURU.LIVE
-      </NText>
-      <QrcodeVue
-        class="share-card qrcode"
-        :value="shareUrl"
-        level="Q"
-        :size="100"
-        background="#00000000"
-        foreground="#ffffff"
-        :margin="1"
-      />
+      <!-- 背景 -->
+      <div class="share-card-background" />
+      <!-- 内容 -->
+      <div class="share-card-content">
+        <div class="share-card-main">
+          <div class="share-card-text">
+            <div class="share-card-title">
+              向我提问
+            </div>
+            <div class="share-card-name">
+              {{ accountInfo?.name }}
+            </div>
+          </div>
+          <div class="share-card-divider" />
+          <div class="share-card-meta">
+            <div class="share-card-type">
+              提问箱
+            </div>
+            <div class="share-card-site">
+              VTSURU.LIVE
+            </div>
+          </div>
+        </div>
+        <div class="share-card-qr">
+          <QrcodeVue
+            :value="shareUrl"
+            level="Q"
+            :size="90"
+            background="#FFFFFF"
+            foreground="#000000"
+            :margin="1"
+            render-as="svg"
+          />
+        </div>
+      </div>
     </div>
-    <NDivider style="margin: 10px" />
+
+    <NDivider style="margin-top: 20px; margin-bottom: 10px;">
+      分享链接
+    </NDivider>
     <NInputGroup>
+      <NInputGroupLabel> 默认 </NInputGroupLabel>
       <NInput
         :value="shareUrl"
         readonly
@@ -820,10 +1062,8 @@ onMounted(() => {
         复制
       </NButton>
     </NInputGroup>
-    <NDivider style="margin: 10px">
-      国内镜像 (访问更快)
-    </NDivider>
-    <NInputGroup>
+    <NInputGroup style="margin-top: 5px;">
+      <NInputGroupLabel> 国内 </NInputGroupLabel>
       <NInput
         :value="shareUrlCN"
         readonly
@@ -835,16 +1075,18 @@ onMounted(() => {
         复制
       </NButton>
     </NInputGroup>
-    <br><br>
+
+    <NDivider style="margin-top: 20px; margin-bottom: 15px;" />
     <NSpace justify="center">
       <NButton
         type="primary"
         @click="saveShareImage"
       >
-        保存卡片
+        保存分享图
       </NButton>
       <NButton
         type="primary"
+        secondary
         @click="saveQRCode"
       >
         保存二维码
@@ -852,28 +1094,38 @@ onMounted(() => {
     </NSpace>
   </NModal>
 
+  <!-- OBS预览模态框 -->
   <NModal
     v-model:show="showOBSModal"
     preset="card"
     closable
-    style="max-width: 90vw; width: auto"
-    title="OBS组件"
-    content-style="display: flex; align-items: center; justify-content: center; flex-direction: column"
+    style="max-width: 90vw; width: auto;"
+    title="OBS 组件预览与链接"
+    content-style="display: flex; align-items: center; justify-content: center; flex-direction: column;"
   >
-    <NAlert type="info">
-      操作显示的内容请前往
+    <NAlert
+      type="info"
+      :show-icon="false"
+      style="margin-bottom: 15px;"
+    >
+      👇下方是实时预览效果。管理展示内容请前往
       <NButton
         text
-        @click="$router.push({ name: 'question-display' })"
+        type="primary"
+        @click="showOBSModal = false; $router.push({ name: 'question-display' })"
       >
         展示管理页
       </NButton>
     </NAlert>
-    <br>
+
+    <!-- OBS组件预览区域 -->
     <div
       :style="{
         width: savedCardSize.width + 'px',
         height: savedCardSize.height + 'px',
+        border: '1px dashed #ccc',
+        overflow: 'hidden', // 确保内容不溢出预览框
+        position: 'relative' // 用于定位内部组件
       }"
     >
       <QuestionDisplayCard
@@ -881,15 +1133,30 @@ onMounted(() => {
         :setting="setting"
       />
     </div>
-    <NDivider />
-    <NInput
-      readonly
-      :value="CURRENT_HOST + 'obs/question-display?token=' + accountInfo?.token"
-    />
-    <NDivider />
+
+    <NDivider
+      title-placement="left"
+      style="margin-top: 20px; margin-bottom: 10px;"
+    >
+      OBS 浏览器源链接
+    </NDivider>
+    <NInputGroup>
+      <NInput
+        readonly
+        :value="`${CURRENT_HOST}obs/question-display?token=${accountInfo?.token}`"
+      />
+      <NButton
+        secondary
+        @click="copyToClipboard(`${CURRENT_HOST}obs/question-display?token=${accountInfo?.token}`)"
+      >
+        复制
+      </NButton>
+    </NInputGroup>
+
+    <NDivider style="margin-top: 20px; margin-bottom: 15px;" />
     <NButton
       type="primary"
-      @click="$router.push({ name: 'question-display' })"
+      @click="showOBSModal = false; $router.push({ name: 'question-display' })"
     >
       前往展示管理页
     </NButton>
@@ -897,78 +1164,154 @@ onMounted(() => {
 </template>
 
 <style>
+/* 全局列表背景透明 (如果需要主题背景色) */
 .n-list {
   background-color: transparent;
 }
 
-.share-card.container {
-  position: relative;
-  height: 200px;
-  width: 550px;
-  border-radius: 10px;
-  background: linear-gradient(to right, #66bea3, #9179be);
+/* --- 新版分享卡片样式 --- */
+.share-card-container {
+    position: relative;
+    height: 200px; /* 固定高度 */
+    width: 100%;   /* 宽度自适应父容器 */
+    border-radius: 12px; /* 更圆润的边角 */
+    overflow: hidden; /* 隐藏溢出内容 */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 使用更现代的字体 */
 }
 
-.share-card.qrcode {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  border-radius: 4px;
-  background: linear-gradient(to right, #3d554e, #503e74);
+/* 背景渐变层 */
+.share-card-background {
+    position: absolute;
+    inset: 0; /* 覆盖整个容器 */
+    background: linear-gradient(135deg, #66bea3 0%, #9179be 100%); /* 平滑渐变 */
+    z-index: 1;
 }
 
-.share-card.title {
-  position: absolute;
-  font-size: 80px;
-  bottom: -17px;
-  left: 5px;
-  color: #e6e6e662;
-  font-weight: 550;
+/* 内容层 */
+.share-card-content {
+    position: relative; /* 使z-index生效 */
+    z-index: 2;
+    display: flex;
+    justify-content: space-between; /* 主内容和二维码分开 */
+    align-items: stretch; /* 让子项高度一致 */
+    height: 100%;
+    padding: 20px;
+    color: #ffffff; /* 默认文字颜色 */
 }
 
-/* .share-card.type {
-  position: absolute;
-  font-size: 20px;
-  transform:rotate(90deg);
-  left: 300px;
-  bottom: 20px;
-  color: #e6e6e6b6;
-} */
-.share-card.type {
-  position: absolute;
-  font-size: 20px;
-  left: 332px;
-  bottom: 55px;
-  font-weight: 550;
-  color: #e6e6e662;
+/* 主要内容区域 (左侧) */
+.share-card-main {
+    display: flex;
+    flex-direction: column; /* 垂直排列 */
+    justify-content: space-between; /* 上下分布 */
+    flex-grow: 1; /* 占据剩余空间 */
+    padding-right: 20px; /* 与二维码的间距 */
 }
 
-.share-card.name {
-  position: absolute;
-  font-size: 30px;
-  left: 10px;
-  bottom: 95px;
-  max-width: 300px;
-  word-wrap: break-word;
-  line-height: 1.3;
-  color: #e6e6e6;
-  font-weight: 550;
+.share-card-text {
+    /* 包含标题和名字 */
 }
 
-.share-card.site {
-  position: absolute;
-  font-size: 12px;
-  right: 20px;
-  top: 110px;
-  color: #e6e6e6a4;
-  font-weight: 550;
+.share-card-title {
+    font-size: 28px; /* 调整大小 */
+    font-weight: bold; /* 加粗 */
+    line-height: 1.2;
+    margin-bottom: 8px;
+    opacity: 0.9; /* 轻微透明 */
 }
 
-.share-card.divider-1 {
-  position: absolute;
-  width: 400px;
-  left: 5px;
-  bottom: 66px;
-  background-color: #c0c0c057;
+.share-card-name {
+    font-size: 42px; /* 增大名字 */
+    font-weight: 500; /* 中等粗细 */
+    line-height: 1.1;
+    max-width: 350px; /* 限制最大宽度 */
+    word-wrap: break-word; /* 自动换行 */
+    overflow: hidden; /* 隐藏溢出 */
+    text-overflow: ellipsis; /* 显示省略号 */
+    max-height: 90px; /* 限制最大高度，约两行 */
 }
-</style>
+
+.share-card-divider {
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.3); /* 半透明分割线 */
+    margin: 10px 0;
+    width: 80%; /* 分割线宽度 */
+}
+
+.share-card-meta {
+    display: flex;
+    justify-content: space-between; /* 类型和站点分开 */
+    align-items: center;
+}
+
+.share-card-type {
+    font-size: 16px;
+    font-weight: 500;
+    opacity: 0.8;
+}
+
+.share-card-site {
+    font-size: 12px;
+    font-weight: 500;
+    opacity: 0.7;
+}
+
+/* 二维码区域 (右侧) */
+.share-card-qr {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0; /* 防止二维码被压缩 */
+    background-color: rgba(255, 255, 255, 0.9); /* 二维码背景色，轻微透明 */
+    padding: 8px; /* 内边距 */
+    border-radius: 8px; /* 圆角 */
+    height: 108px; /* 容器高度 */
+    width: 108px; /* 容器宽度 */
+    align-self: center; /* 垂直居中 */
+}
+
+/* 二维码SVG样式 */
+.share-card-qr svg {
+    display: block; /* 移除底部空白 */
+    width: 100%;
+    height: 100%;
+}
+
+/* 响应式调整 (可选) */
+@media (max-width: 500px) {
+    .share-card-content {
+        flex-direction: column; /* 小屏幕时垂直排列 */
+        align-items: center;
+        text-align: center;
+        padding: 15px;
+    }
+    .share-card-main {
+        padding-right: 0;
+        margin-bottom: 15px;
+        align-items: center; /* 内部元素居中 */
+    }
+    .share-card-qr {
+        align-self: center; /* 确保二维码居中 */
+        width: 100px; /* 略微减小二维码尺寸 */
+        height: 100px;
+    }
+     .share-card-name {
+         font-size: 36px;
+     }
+     .share-card-divider {
+        width: 100%; /* 分割线占满 */
+     }
+     .share-card-meta {
+        width: 100%; /* 占满宽度方便对齐 */
+     }
+}
+
+/* --- 其他样式微调 --- */
+.n-list-item {
+    margin-bottom: 10px; /* 列表项间距 */
+}
+.n-card {
+    border-radius: 6px; /* 统一卡片圆角 */
+}
+</style>
\ No newline at end of file