From 33811051b7fd2d9f9d0cffba8aec89cae3f31f76 Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sun, 28 Dec 2025 08:07:10 +0800
Subject: [PATCH] Remove unused configuration files and improve TypeScript
 settings

- Deleted eslint.config.mjs and tailwind.config.ts as they are no longer needed.
- Updated tsconfig.json to include additional TypeScript files for better project structure.
- Refactored various components to enhance modal management and improve code clarity.
- Changed console.log statements to console.info for consistent logging practices across the application.
---
 eslint.config.mjs => eslint.config.js    |   1 -
 scripts/sw-version-plugin.ts             |  12 +-
 src/App.vue                              |  23 +-
 src/api/search.ts                        |  23 +-
 src/components/CommentsModal.vue         |   4 +-
 src/components/FloatingButtons.vue       |  24 +-
 src/components/LazyRender.vue            |  15 +-
 src/components/SearchHeader.vue          |   6 +-
 src/components/SearchResults.vue         |  11 +-
 src/components/SettingsModal.vue         |   8 +-
 src/components/TopToolbar.vue            |   5 +-
 src/components/VndbPanel.vue             | 889 +++++++++++++----------
 src/composables/useKeyboardShortcuts.ts  |  20 +-
 src/composables/useSound.ts              |  40 +-
 src/composables/useTextScroll.ts         |   6 +-
 src/config/env.ts                        |   2 +-
 src/config/index.ts                      |   6 +-
 src/main.ts                              |  20 +-
 src/stores/plugins.ts                    |   7 +-
 src/stores/search.ts                     |   2 +-
 src/stores/stats.ts                      |   6 +-
 src/stores/ui.ts                         |  93 ++-
 src/utils/icons.ts                       |   1 +
 src/utils/imageDB.ts                     |   3 +
 src/utils/persistence.ts                 |   2 +-
 src/utils/theme.ts                       |   7 +-
 src/utils/urlParams.ts                   |   8 +-
 tailwind.config.ts => tailwind.config.js |   5 +-
 tsconfig.json                            |   2 +-
 29 files changed, 726 insertions(+), 525 deletions(-)
 rename eslint.config.mjs => eslint.config.js (99%)
 rename tailwind.config.ts => tailwind.config.js (98%)

diff --git a/eslint.config.mjs b/eslint.config.js
similarity index 99%
rename from eslint.config.mjs
rename to eslint.config.js
index ff8cfb2..51778b4 100644
--- a/eslint.config.mjs
+++ b/eslint.config.js
@@ -11,7 +11,6 @@ export default tseslint.config(
       '**/.pnpm-store/**',
       '**/public/**',
       '**/*.config.js',
-      '**/*.config.mjs',
       '**/*.config.ts',
       '**/.history/**', // 忽略编辑器历史文件
       '**/.vscode/**',
diff --git a/scripts/sw-version-plugin.ts b/scripts/sw-version-plugin.ts
index 8f0287e..48ac502 100644
--- a/scripts/sw-version-plugin.ts
+++ b/scripts/sw-version-plugin.ts
@@ -81,13 +81,13 @@ export function swVersionPlugin(options: SwVersionPluginOptions = {}): Plugin {
       version = generateVersion(includeGitHash, prefix)
       const buildInfo = getBuildInfo()
       
-      console.log('\n📦 SW Version Plugin')
-      console.log(`   Version: ${version}`)
-      console.log(`   Build Time: ${buildInfo.buildTime}`)
+      console.info('\n📦 SW Version Plugin')
+      console.info(`   Version: ${version}`)
+      console.info(`   Build Time: ${buildInfo.buildTime}`)
       if (buildInfo.gitCommit) {
-        console.log(`   Git: ${buildInfo.gitBranch}@${buildInfo.gitCommit}`)
+        console.info(`   Git: ${buildInfo.gitBranch}@${buildInfo.gitCommit}`)
       }
-      console.log('')
+      console.info('')
     },
     
     // 构建完成后注入版本到 sw.js
@@ -116,7 +116,7 @@ export function swVersionPlugin(options: SwVersionPluginOptions = {}): Plugin {
       
       writeFileSync(swFilePath, content)
       
-      console.log(`✅ SW version injected: ${version}`)
+      console.info(`✅ SW version injected: ${version}`)
     },
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 597fddd..5c30cf8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -105,9 +105,9 @@ const uiStore = useUIStore()
 const settingsStore = useSettingsStore()
 const searchHeaderRef = ref<InstanceType<typeof SearchHeader> | null>(null)
 
-// 切换设置面板
+// 切换设置面板（互斥）
 function openSettings() {
-  uiStore.isSettingsModalOpen = !uiStore.isSettingsModalOpen
+  uiStore.toggleSettingsModal()
 }
 
 // 处理历史记录选择
@@ -342,6 +342,7 @@ function cleanupBlobUrls(currentUrl: string) {
   
   // 创建新 Map，保留当前使用的 URL
   const newBlobUrls = new Map<string, string>()
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   newBlobUrls.set(currentUrl, blobUrls.get(currentUrl)!)
   
   // 保留最近添加的 URL（Map 保持插入顺序）
@@ -408,12 +409,12 @@ async function displayNextImage() {
     }
     preloadImg.onerror = () => {
       // 加载失败，尝试下一张
-      displayNextImage()
+      void displayNextImage()
     }
     preloadImg.src = blobUrl || nextImageUrl
-  } catch (error) {
+  } catch {
     // 加载失败，尝试下一张
-    displayNextImage()
+    void displayNextImage()
   }
 }
 
@@ -424,10 +425,10 @@ function startFetchInterval() {
   }
   
   // 立即获取第一张
-  fetchAndCacheImage()
+  void fetchAndCacheImage()
   
   fetchInterval = window.setInterval(() => {
-    fetchAndCacheImage()
+    void fetchAndCacheImage()
   }, FETCH_INTERVAL)
 }
 
@@ -438,10 +439,10 @@ function startDisplayInterval() {
   }
   
   // 立即显示第一张
-  displayNextImage()
+  void displayNextImage()
   
   displayInterval = window.setInterval(() => {
-    displayNextImage()
+    void displayNextImage()
   }, DISPLAY_INTERVAL)
 }
 
@@ -466,8 +467,8 @@ onMounted(async () => {
   // URL hash 优先级最高 - 覆盖会话状态
   const hash = window.location.hash
   if (hash.startsWith('#atk-comment-')) {
-    // 评论链接：打开评论面板
-    uiStore.isCommentsModalOpen = true
+    // 评论链接：打开评论面板（互斥）
+    uiStore.openCommentsModal()
   }
 
   // 恢复保存的搜索状态
diff --git a/src/api/search.ts b/src/api/search.ts
index e980416..1e13dde 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -455,7 +455,7 @@ export async function fetchVndbData(gameName: string): Promise<VndbInfo | null>
 
     // 获取封面图片 - 优先选择安全级别的图片
     let mainImageUrl: string | null = null
-    if (result.image && result.image.url) {
+    if (result.image?.url) {
       // 只使用 sexual <= 1 且 violence === 0 的图片
       if ((result.image.sexual === 0 || result.image.sexual === 1) && result.image.violence === 0) {
         mainImageUrl = result.image.url
@@ -650,7 +650,7 @@ export async function fetchVndbCharacters(vnId: string): Promise<VndbCharacter[]
         age?: number
       }) => {
         let imageUrl: string | undefined
-        if (c.image && c.image.url && c.image.sexual <= 1 && c.image.violence === 0) {
+        if (c.image?.url && c.image.sexual <= 1 && c.image.violence === 0) {
           imageUrl = c.image.url
         }
 
@@ -669,7 +669,7 @@ export async function fetchVndbCharacters(vnId: string): Promise<VndbCharacter[]
     // 使用代理替换 URL
     if (ENABLE_VNDB_IMAGE_PROXY && isProxyAvailable) {
       characters.forEach((char) => {
-        if (char.image && char.image.startsWith('https://t.vndb.org/')) {
+        if (char.image?.startsWith('https://t.vndb.org/')) {
           char.image = proxyUrl(char.image)
         }
       })
@@ -735,11 +735,10 @@ export type TranslateMode = 'description' | 'tags' | 'quotes'
 const DESCRIPTION_PROMPT = `你是一名专业的视觉小说（Galgame/AVG）本地化专家。请将游戏简介精准翻译为简体中文。
 
 【翻译规范】
-1. 格式净化：清除所有 HTML、Markdown、BBCode 等标记，仅保留纯文本
-2. 结构保留：保持原文段落划分，段落间用换行分隔
-3. 术语处理：使用视觉小说领域通用的中文术语
-4. 人名处理：优先使用中文圈广泛接受的译名，无通用译名时保留原名
-5. 内容控制：禁止添加剧透、解释性文字或主观评价
+1. 结构保留：保持原文段落划分，段落间用换行分隔
+2. 术语处理：使用视觉小说领域通用的中文术语
+3. 人名处理：优先使用中文圈广泛接受的译名，无通用译名时保留原名
+4. 内容控制：禁止添加剧透、解释性文字或主观评价
 
 【输出要求】
 仅输出翻译后的纯文本，无需任何说明`
@@ -811,7 +810,7 @@ const COMBINED_PROMPT = `你是一名专业的视觉小说（Galgame/AVG）本
 export async function translateText(
   text: string, 
   mode: TranslateMode = 'description',
-  maxRetries: number = 2,
+  maxRetries = 2,
 ): Promise<string | null> {
   if (!text || text.trim().length === 0) {
     return null
@@ -913,7 +912,7 @@ export async function translateAllContent(
   description: string | null,
   tags: string[] | null,
   quotes: string[] | null,
-  maxRetries: number = 2,
+  maxRetries = 2,
 ): Promise<TranslateAllResult> {
   const result: TranslateAllResult = {
     description: null,
@@ -1032,12 +1031,12 @@ function replaceVndbUrls(vndbInfo: VndbInfo) {
   }
 
   // 替换封面图片 URL
-  if (vndbInfo.mainImageUrl && vndbInfo.mainImageUrl.startsWith('https://t.vndb.org/')) {
+  if (vndbInfo.mainImageUrl?.startsWith('https://t.vndb.org/')) {
     vndbInfo.mainImageUrl = proxyUrl(vndbInfo.mainImageUrl)
   }
 
   // 替换主截图 URL
-  if (vndbInfo.screenshotUrl && vndbInfo.screenshotUrl.startsWith('https://t.vndb.org/')) {
+  if (vndbInfo.screenshotUrl?.startsWith('https://t.vndb.org/')) {
     vndbInfo.screenshotUrl = proxyUrl(vndbInfo.screenshotUrl)
   }
 
diff --git a/src/components/CommentsModal.vue b/src/components/CommentsModal.vue
index 82bf69b..0fe301b 100644
--- a/src/components/CommentsModal.vue
+++ b/src/components/CommentsModal.vue
@@ -10,7 +10,7 @@
       leave-to-class="opacity-0 scale-[0.98] translate-y-10"
     >
       <div
-        v-if="uiStore.isCommentsModalOpen"
+        v-show="uiStore.isCommentsModalOpen"
         class="comments-modal fixed z-[100] flex flex-col shadow-2xl shadow-black/20 inset-0 md:inset-6 md:m-auto md:w-[900px] md:max-w-[calc(100%-3rem)] md:h-[760px] md:max-h-[calc(100%-3rem)] md:rounded-3xl"
       >
         <!-- 顶部导航栏 -->
@@ -140,7 +140,7 @@ function initArtalk() {
     }
   }
 
-  nextTick(() => {
+  void nextTick(() => {
     const commentsEl = document.getElementById('Comments')
     if (commentsEl) {
       try {
diff --git a/src/components/FloatingButtons.vue b/src/components/FloatingButtons.vue
index 2ff5217..dffd54e 100644
--- a/src/components/FloatingButtons.vue
+++ b/src/components/FloatingButtons.vue
@@ -195,15 +195,15 @@ function scrollToTop() {
 }
 
 function toggleComments() {
-  uiStore.isCommentsModalOpen = !uiStore.isCommentsModalOpen
+  uiStore.toggleCommentsModal()
 }
 
 function toggleVndbPanel() {
-  uiStore.isVndbPanelOpen = !uiStore.isVndbPanelOpen
+  uiStore.toggleVndbPanel()
 }
 
 function toggleHistory() {
-  uiStore.isHistoryModalOpen = !uiStore.isHistoryModalOpen
+  uiStore.toggleHistoryModal()
 }
 
 function togglePlatformNav(withSound = false) {
@@ -257,15 +257,19 @@ function handleScrollToPlatform(platformName: string) {
 }
 
 function scrollToPlatform(platformName: string) {
-  const platformElements = document.querySelectorAll('[data-platform]')
-  const targetElement = Array.from(platformElements).find(
-    el => el.getAttribute('data-platform') === platformName,
-  ) as HTMLElement
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const targetElement = document.querySelector(`[data-platform="${platformName}"]`)!
 
   if (targetElement) {
-    const yOffset = -80
-    const y = targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset
-    window.scrollTo({ top: y, behavior: 'smooth' })
+    // 先瞬间滚动到目标位置附近，触发途中的 LazyRender 渲染
+    targetElement.scrollIntoView({ behavior: 'instant', block: 'start' })
+    
+    // 等待渲染完成后，再平滑滚动到精确位置
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }, 50)
+    })
     
     // 滚动后关闭导航
     playTransitionDown()
diff --git a/src/components/LazyRender.vue b/src/components/LazyRender.vue
index 6d0f5e3..6d2ac33 100644
--- a/src/components/LazyRender.vue
+++ b/src/components/LazyRender.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, useAttrs } from 'vue'
+
+// 禁用自动继承属性，手动绑定到容器
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
 
 const props = defineProps<{
   /** 距离可视区多少像素时开始渲染 */
@@ -51,7 +58,11 @@ onUnmounted(() => {
 <template>
   <div 
     ref="containerRef" 
-    :style="{ minHeight: !isVisible ? (minHeight || '60px') : undefined }"
+    v-bind="attrs"
+    :style="{ 
+      minHeight: !isVisible ? (minHeight || '60px') : undefined,
+      scrollMarginTop: '80px'
+    }"
   >
     <slot v-if="isVisible" />
     <!-- 占位符 -->
diff --git a/src/components/SearchHeader.vue b/src/components/SearchHeader.vue
index f19fbbf..e64f392 100644
--- a/src/components/SearchHeader.vue
+++ b/src/components/SearchHeader.vue
@@ -465,7 +465,7 @@ import { useStatsStore } from '@/stores/stats'
 import { useCacheStore } from '@/stores/cache'
 import { useHistoryStore } from '@/stores/history'
 import { searchGameStream, fetchVndbData } from '@/api/search'
-import { playSwipe, playToggle, playCelebration, playCaution, playType } from '@/composables/useSound'
+import { playSwipe, playSelect, playCelebration, playCaution, playType } from '@/composables/useSound'
 import { useDebouncedClick } from '@/composables/useDebounce'
 import {
   Search,
@@ -733,7 +733,7 @@ function handleTyping() {
 // 搜索模式切换（带音效）
 function setSearchMode(mode: 'game' | 'patch') {
   if (searchMode.value !== mode) {
-    playToggle()
+    playSelect()
     searchMode.value = mode
   }
 }
@@ -844,7 +844,7 @@ function getErrorCodeInfo(error: string): ErrorCodeInfo {
   const errorLower = error.toLowerCase()
   
   // 尝试提取 HTTP 状态码
-  const statusMatch = error.match(/\b(4\d{2}|5\d{2})\b/)
+  const statusMatch = /\b(4\d{2}|5\d{2})\b/.exec(error)
   if (statusMatch) {
     const status = parseInt(statusMatch[1])
     const statusDescriptions: Record<number, string> = {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 80be64b..954a7e0 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -2,6 +2,7 @@
   <div v-if="searchStore.hasResults" class="w-full sm:px-4 md:px-6 py-4 sm:py-6 md:py-8 animate-fade-in">
     <div id="results" class="sm:max-w-5xl sm:mx-auto space-y-4 sm:space-y-6">
       <!-- 使用 v-memo 优化平台卡片渲染 + LazyRender 懒渲染 -->
+      <!-- data-platform 放在 LazyRender 容器上，确保即使内容未渲染也能被站点导航找到 -->
       <LazyRender
         v-for="[platformName, platformData] in searchStore.platformResults"
         :key="platformName"
@@ -9,9 +10,9 @@
         :once="true"
         min-height="200px"
         root-margin="400px 0px"
+        :data-platform="platformName"
       >
         <div
-          :data-platform="platformName"
           class="result-card rounded-none sm:rounded-2xl animate-fade-in-up border-2 content-auto"
           :class="getBorderClass(platformData.color)"
         >
@@ -234,8 +235,8 @@ function getCountBadgeClass(color: string) {
 }
 
 // 获取平台图标组件
-function getPlatformIconComponent(color: string): typeof Star | typeof Circle | typeof DollarSign | typeof XCircle {
-  const icons: Record<string, typeof Star | typeof Circle | typeof DollarSign | typeof XCircle> = {
+function getPlatformIconComponent(color: string): typeof Star       {
+  const icons: Record<string, typeof Star      > = {
     lime: Star,
     white: Circle,
     gold: DollarSign,
@@ -245,8 +246,8 @@ function getPlatformIconComponent(color: string): typeof Star | typeof Circle |
 }
 
 // 获取标签图标组件
-function getTagIconComponent(tag: string): typeof CheckCircle | typeof User | typeof Coins | typeof MessageCircle | typeof Reply | typeof Server | typeof Rocket | typeof Turtle | typeof Layers | typeof Magnet | typeof Wand2 | typeof TagIcon {
-  const icons: Record<string, typeof CheckCircle | typeof User | typeof Coins | typeof MessageCircle | typeof Reply | typeof Server | typeof Rocket | typeof Turtle | typeof Layers | typeof Magnet | typeof Wand2 | typeof TagIcon> = {
+function getTagIconComponent(tag: string): typeof CheckCircle                       {
+  const icons: Record<string, typeof CheckCircle                      > = {
     'NoReq': CheckCircle,
     'Login': User,
     'LoginPay': Coins,
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 5d10582..9dc7978 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -10,7 +10,7 @@
       leave-to-class="opacity-0 scale-[0.98] translate-y-10"
     >
       <div
-        v-if="isOpen"
+        v-show="isOpen"
         class="fixed z-[100] flex flex-col settings-page shadow-2xl shadow-black/20 inset-0 md:inset-6 md:m-auto md:w-[800px] md:max-w-[calc(100%-3rem)] md:h-[700px] md:max-h-[calc(100%-3rem)] md:rounded-3xl"
       >
         <!-- 顶部导航栏 -->
@@ -460,7 +460,7 @@
 
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import { playTap, playCelebration, playToggle, playType } from '@/composables/useSound'
+import { playTap, playCelebration, playSelect, playType } from '@/composables/useSound'
 
 // Prism Editor
 import { PrismEditor } from 'vue-prism-editor'
@@ -541,7 +541,7 @@ const themeOptions = [
 ]
 
 function handleThemeChange(mode: ThemeMode) {
-  playToggle()
+  playSelect()
   uiStore.setThemeMode(mode)
 }
 
@@ -630,7 +630,7 @@ const localCustomApi = computed(() => {
 
 // 选择 API 选项
 function selectApiOption(option: string) {
-  playToggle()
+  playSelect()
   selectedApiOption.value = option
   if (option !== 'custom') {
     customApiInput.value = ''
diff --git a/src/components/TopToolbar.vue b/src/components/TopToolbar.vue
index bd7d8db..a689b90 100644
--- a/src/components/TopToolbar.vue
+++ b/src/components/TopToolbar.vue
@@ -108,6 +108,7 @@ async function shareSearch() {
     textarea.select()
     
     try {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       document.execCommand('copy')
       showCopiedTip.value = true
       
@@ -125,7 +126,7 @@ async function shareSearch() {
 // 切换键盘快捷键帮助
 function toggleKeyboardHelp() {
   playTap()
-  uiStore.isKeyboardHelpOpen = !uiStore.isKeyboardHelpOpen
+  uiStore.toggleKeyboardHelp()
 }
 
 // 打开设置
@@ -153,7 +154,7 @@ async function saveBackgroundImage() {
       const parts = pathname.split('/')
       const lastPart = parts[parts.length - 1]
       
-      if (lastPart && lastPart.includes('.')) {
+      if (lastPart?.includes('.')) {
         // 有文件名和扩展名
         const nameParts = lastPart.split('.')
         extension = nameParts.pop() || 'jpg'
diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index 9c4b280..4adec05 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <Teleport to="body">
     <!-- VNDB 信息面板 - 模态框 -->
@@ -10,7 +11,7 @@
       leave-to-class="opacity-0 scale-[0.98] translate-y-10"
     >
       <div
-        v-if="uiStore.isVndbPanelOpen && searchStore.vndbInfo"
+        v-show="uiStore.isVndbPanelOpen && searchStore.vndbInfo"
         ref="modalRef"
         class="fixed z-50 flex flex-col vndb-page shadow-2xl shadow-black/20 inset-0 md:inset-6 md:m-auto md:w-[900px] md:max-w-[calc(100%-3rem)] md:h-[800px] md:max-h-[calc(100%-3rem)] md:rounded-3xl"
       >
@@ -83,293 +84,325 @@
 
         <!-- 内容区域 -->
         <div class="flex-1 overflow-y-auto custom-scrollbar">
-          <div class="max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8 space-y-6">
-            <!-- 封面和标题卡片 -->
-            <div class="vndb-card">
-              <!-- 封面图 -->
-              <div v-if="searchStore.vndbInfo.mainImageUrl" class="mb-4">
-                <button
-                  class="block w-full max-w-sm mx-auto"
-                  @click="openGallery(0)"
-                >
-                  <img
-                    :src="searchStore.vndbInfo.mainImageUrl"
-                    :alt="searchStore.vndbInfo.mainName"
-                    class="w-full h-auto rounded-2xl shadow-lg cursor-pointer hover:opacity-90 hover:scale-[1.02] transition-all"
-                    loading="lazy"
-                    @error="handleImageError"
-                  />
-                </button>
-              </div>
-
-              <!-- 标题 -->
-              <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-2">
-                {{ searchStore.vndbInfo.mainName }}
-              </h2>
-
-              <!-- 原名 -->
-              <p v-if="searchStore.vndbInfo.originalTitle" class="text-sm text-gray-500 dark:text-slate-400 text-center mb-1">
-                {{ searchStore.vndbInfo.originalTitle }}
-              </p>
-              
-              <!-- 罗马音 -->
-              <p v-if="searchStore.vndbInfo.alttitle && searchStore.vndbInfo.alttitle !== searchStore.vndbInfo.originalTitle" class="text-xs text-gray-400 dark:text-slate-500 text-center mb-4 italic">
-                {{ searchStore.vndbInfo.alttitle }}
-              </p>
-              <div v-else class="mb-3" />
-
-              <!-- 别名标签 -->
-              <div v-if="searchStore.vndbInfo.names.length > 1" class="flex flex-wrap justify-center gap-2">
-                <span
-                  v-for="(name, index) in (expandedSections.names ? searchStore.vndbInfo.names : searchStore.vndbInfo.names.slice(0, 5))"
-                  :key="index"
-                  class="px-3 py-1 bg-pink-100 dark:bg-pink-900/30 text-[#ff1493] dark:text-[#ff69b4] text-xs rounded-full"
-                >
-                  {{ name }}
-                </span>
-                <button
-                  v-if="searchStore.vndbInfo.names.length > 5"
-                  class="px-3 py-1 bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300 text-xs rounded-full hover:bg-gray-200 dark:hover:bg-slate-600 transition-colors"
-                  @click="toggleSection('names')"
-                >
-                  {{ expandedSections.names ? '收起' : `+${searchStore.vndbInfo.names.length - 5}` }}
-                </button>
-              </div>
-            </div>
-
-            <!-- 信息卡片网格 -->
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <!-- 评分 -->
-              <div v-if="searchStore.vndbInfo.rating" class="vndb-card flex items-center gap-4">
-                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center shadow-lg shadow-yellow-500/30">
-                  <Star :size="24" class="text-white" />
-                </div>
-                <div>
-                  <p class="text-xs text-gray-500 dark:text-slate-400">VNDB 评分</p>
-                  <p class="text-xl font-bold text-gray-800 dark:text-white">
-                    {{ (searchStore.vndbInfo.rating / 10).toFixed(1) }}
-                    <span class="text-sm font-normal text-gray-500 dark:text-slate-400">/ 10</span>
-                  </p>
-                  <p class="text-xs text-gray-400 dark:text-slate-500">{{ searchStore.vndbInfo.votecount }} 票</p>
-                </div>
-              </div>
-
-              <!-- 游戏时长 -->
-              <div v-if="searchStore.vndbInfo.play_hours" class="vndb-card flex items-center gap-4">
-                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-lg shadow-purple-500/30">
-                  <Clock :size="24" class="text-white" />
-                </div>
-                <div>
-                  <p class="text-xs text-gray-500 dark:text-slate-400">游戏时长</p>
-                  <p class="text-xl font-bold text-gray-800 dark:text-white">
-                    {{ searchStore.vndbInfo.play_hours }}
-                    <span class="text-sm font-normal text-gray-500 dark:text-slate-400">小时</span>
-                  </p>
-                  <p class="text-xs text-gray-400 dark:text-slate-500">{{ searchStore.vndbInfo.book_length }}</p>
-                </div>
-              </div>
-
-              <!-- 发行日期 -->
-              <div v-if="searchStore.vndbInfo.released" class="vndb-card flex items-center gap-4">
-                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-blue-500/30">
-                  <Calendar :size="24" class="text-white" />
-                </div>
-                <div>
-                  <p class="text-xs text-gray-500 dark:text-slate-400">发行日期</p>
-                  <p class="text-lg font-bold text-gray-800 dark:text-white">
-                    {{ formatDate(searchStore.vndbInfo.released) }}
-                  </p>
-                </div>
-              </div>
-
-              <!-- 开发商 -->
-              <div v-if="searchStore.vndbInfo.developers && searchStore.vndbInfo.developers.length > 0" class="vndb-card flex items-center gap-4">
-                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-lg shadow-indigo-500/30">
-                  <Building :size="24" class="text-white" />
-                </div>
-                <div class="flex-1 min-w-0">
-                  <p class="text-xs text-gray-500 dark:text-slate-400">开发商</p>
-                  <p 
-                    v-text-scroll 
-                    class="text-base font-bold text-gray-800 dark:text-white"
+          <div class="max-w-4xl mx-auto px-4 sm:px-6 py-6 sm:py-8 space-y-5">
+            <!-- 顶部：封面和基本信息（横向排列） -->
+            <div class="vndb-card !p-4">
+              <div class="flex flex-col sm:flex-row gap-4">
+                <!-- 封面图 -->
+                <div v-if="searchStore.vndbInfo.mainImageUrl" class="sm:w-40 md:w-48 flex-shrink-0">
+                  <button
+                    class="block w-full"
+                    @click="openGallery(0)"
                   >
-                    {{ searchStore.vndbInfo.developers.map(d => d.name).join(', ') }}
-                  </p>
+                    <img
+                      :src="searchStore.vndbInfo.mainImageUrl"
+                      :alt="searchStore.vndbInfo.mainName"
+                      class="w-full h-auto rounded-xl shadow-lg cursor-pointer hover:opacity-90 hover:scale-[1.01] transition-all"
+                      loading="lazy"
+                      @error="handleImageError"
+                    />
+                  </button>
                 </div>
-              </div>
 
-              <!-- 开发状态 -->
-              <div v-if="searchStore.vndbInfo.devstatus !== undefined" class="vndb-card flex items-center gap-4">
-                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-lg shadow-emerald-500/30">
-                  <Gamepad2 :size="24" class="text-white" />
-                </div>
-                <div>
-                  <p class="text-xs text-gray-500 dark:text-slate-400">开发状态</p>
-                  <p class="text-base font-bold" :class="getDevStatusColor(searchStore.vndbInfo.devstatus)">
-                    {{ formatDevStatus(searchStore.vndbInfo.devstatus) }}
+                <!-- 标题和基本信息 -->
+                <div class="flex-1 min-w-0">
+                  <!-- 标题 -->
+                  <h2 class="text-xl font-bold text-gray-800 dark:text-white leading-tight mb-1">
+                    {{ searchStore.vndbInfo.mainName }}
+                  </h2>
+                  <p v-if="searchStore.vndbInfo.originalTitle" class="text-sm text-gray-500 dark:text-slate-400 mb-0.5">
+                    {{ searchStore.vndbInfo.originalTitle }}
                   </p>
-                </div>
-              </div>
+                  <p v-if="searchStore.vndbInfo.alttitle && searchStore.vndbInfo.alttitle !== searchStore.vndbInfo.originalTitle" class="text-xs text-gray-400 dark:text-slate-500 italic mb-3">
+                    {{ searchStore.vndbInfo.alttitle }}
+                  </p>
+                  
+                  <!-- 别名标签 -->
+                  <div v-if="searchStore.vndbInfo.names.length > 1" class="flex flex-wrap gap-1.5 mb-4">
+                    <span
+                      v-for="(name, index) in (expandedSections.names ? searchStore.vndbInfo.names : searchStore.vndbInfo.names.slice(0, 4))"
+                      :key="index"
+                      class="px-2 py-0.5 bg-pink-100 dark:bg-pink-900/30 text-[#ff1493] dark:text-[#ff69b4] text-xs rounded-full"
+                    >
+                      {{ name }}
+                    </span>
+                    <button
+                      v-if="searchStore.vndbInfo.names.length > 4"
+                      class="px-2 py-0.5 bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300 text-xs rounded-full hover:bg-gray-200 dark:hover:bg-slate-600 transition-colors"
+                      @click="toggleSection('names')"
+                    >
+                      {{ expandedSections.names ? '收起' : `+${searchStore.vndbInfo.names.length - 4}` }}
+                    </button>
+                  </div>
 
-              <!-- 原始语言 -->
-              <div v-if="searchStore.vndbInfo.olang" class="vndb-card flex items-center gap-4">
-                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-rose-500 to-pink-500 flex items-center justify-center shadow-lg shadow-rose-500/30">
-                  <Globe :size="24" class="text-white" />
-                </div>
-                <div>
-                  <p class="text-xs text-gray-500 dark:text-slate-400">原始语言</p>
-                  <p class="text-base font-bold text-gray-800 dark:text-white">
-                    {{ formatLanguage(searchStore.vndbInfo.olang) }}
-                  </p>
+                  <!-- 基本信息网格 -->
+                  <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                    <!-- 评分 -->
+                    <div v-if="searchStore.vndbInfo.rating" class="flex items-center gap-2">
+                      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center shadow-sm">
+                        <Star :size="14" class="text-white" />
+                      </div>
+                      <div>
+                        <p class="text-[10px] text-gray-500 dark:text-slate-400">评分</p>
+                        <p class="text-sm font-bold text-gray-800 dark:text-white">
+                          {{ (searchStore.vndbInfo.rating / 10).toFixed(1) }}
+                          <span class="text-[10px] font-normal text-gray-400">({{ searchStore.vndbInfo.votecount }})</span>
+                        </p>
+                      </div>
+                    </div>
+
+                    <!-- 游戏时长 -->
+                    <div v-if="searchStore.vndbInfo.play_hours" class="flex items-center gap-2">
+                      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-sm">
+                        <Clock :size="14" class="text-white" />
+                      </div>
+                      <div>
+                        <p class="text-[10px] text-gray-500 dark:text-slate-400">时长</p>
+                        <p class="text-sm font-bold text-gray-800 dark:text-white">{{ searchStore.vndbInfo.play_hours }}h</p>
+                      </div>
+                    </div>
+
+                    <!-- 发行日期 -->
+                    <div v-if="searchStore.vndbInfo.released" class="flex items-center gap-2">
+                      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-sm">
+                        <Calendar :size="14" class="text-white" />
+                      </div>
+                      <div>
+                        <p class="text-[10px] text-gray-500 dark:text-slate-400">发行</p>
+                        <p class="text-sm font-bold text-gray-800 dark:text-white">{{ formatDate(searchStore.vndbInfo.released) }}</p>
+                      </div>
+                    </div>
+
+                    <!-- 开发商 -->
+                    <div v-if="searchStore.vndbInfo.developers && searchStore.vndbInfo.developers.length > 0" class="flex items-center gap-2 col-span-2 sm:col-span-1">
+                      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-sm">
+                        <Building :size="14" class="text-white" />
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <p class="text-[10px] text-gray-500 dark:text-slate-400">开发商</p>
+                        <p v-text-scroll class="text-sm font-bold text-gray-800 dark:text-white">
+                          {{ searchStore.vndbInfo.developers.map(d => d.name).join(', ') }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <!-- 开发状态 -->
+                    <div v-if="searchStore.vndbInfo.devstatus !== undefined" class="flex items-center gap-2">
+                      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-sm">
+                        <Gamepad2 :size="14" class="text-white" />
+                      </div>
+                      <div>
+                        <p class="text-[10px] text-gray-500 dark:text-slate-400">状态</p>
+                        <p class="text-sm font-bold" :class="getDevStatusColor(searchStore.vndbInfo.devstatus)">
+                          {{ formatDevStatus(searchStore.vndbInfo.devstatus) }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <!-- 原始语言 -->
+                    <div v-if="searchStore.vndbInfo.olang" class="flex items-center gap-2">
+                      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-rose-500 to-pink-500 flex items-center justify-center shadow-sm">
+                        <Globe :size="14" class="text-white" />
+                      </div>
+                      <div>
+                        <p class="text-[10px] text-gray-500 dark:text-slate-400">语言</p>
+                        <p class="text-sm font-bold text-gray-800 dark:text-white">{{ formatLanguage(searchStore.vndbInfo.olang) }}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 标签 -->
+                  <div v-if="searchStore.vndbInfo.tags && searchStore.vndbInfo.tags.length > 0" class="mt-4 pt-3 border-t border-gray-200/50 dark:border-slate-700/50">
+                    <div class="flex items-center justify-between mb-2">
+                      <div class="flex items-center gap-2">
+                        <Tag :size="14" class="text-violet-500" />
+                        <span class="text-xs font-bold text-gray-800 dark:text-white">标签</span>
+                        <Loader v-if="isTranslatingTags" :size="10" class="animate-spin text-violet-500" />
+                        <!-- AI 译文标签 -->
+                        <div 
+                          v-if="translatedTags.size > 0 && !showOriginalTags" 
+                          class="inline-flex items-center gap-1 px-1.5 py-0.5 bg-gradient-to-r from-violet-500 to-purple-500 text-white text-[9px] rounded-full"
+                        >
+                          <Bot :size="8" />
+                          <span>AI</span>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-1.5 text-[9px] text-gray-400 dark:text-slate-500">
+                        <span class="flex items-center gap-0.5"><span class="w-1.5 h-1.5 rounded-full bg-violet-500" />内容</span>
+                        <span class="flex items-center gap-0.5"><span class="w-1.5 h-1.5 rounded-full bg-blue-500" />技术</span>
+                        <span class="flex items-center gap-0.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-500" />色情</span>
+                      </div>
+                    </div>
+                    <div class="flex flex-wrap gap-1">
+                      <span
+                        v-for="(tag, index) in searchStore.vndbInfo.tags"
+                        :key="index"
+                        class="px-1.5 py-0.5 text-[10px] font-medium rounded transition-colors cursor-default"
+                        :class="getTagCategoryClass(tag.category || '')"
+                        :title="`${tag.name}${translatedTags.get(tag.name) ? ' → ' + translatedTags.get(tag.name) : ''} | 相关性: ${Math.round((tag.rating || 0) * 10) / 10}`"
+                      >
+                        {{ getTagDisplayName(tag) }}
+                      </span>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <!-- 支持语言 -->
-            <div v-if="searchStore.vndbInfo.languages && searchStore.vndbInfo.languages.length > 0" class="vndb-card">
-              <div class="flex items-center gap-2 mb-3">
-                <Languages :size="18" class="text-rose-500" />
-                <h3 class="font-bold text-gray-800 dark:text-white">支持语言</h3>
-              </div>
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="(lang, index) in searchStore.vndbInfo.languages"
-                  :key="index"
-                  class="px-3 py-1.5 bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-400 text-sm font-medium rounded-xl"
-                >
-                  {{ formatLanguage(lang) }}
-                </span>
-              </div>
-            </div>
-
-            <!-- 平台 -->
-            <div v-if="searchStore.vndbInfo.platforms && searchStore.vndbInfo.platforms.length > 0" class="vndb-card">
-              <div class="flex items-center gap-2 mb-3">
-                <Monitor :size="18" class="text-green-500" />
-                <h3 class="font-bold text-gray-800 dark:text-white">支持平台</h3>
-              </div>
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="(platform, index) in searchStore.vndbInfo.platforms"
-                  :key="index"
-                  class="px-3 py-1.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-sm font-medium rounded-xl"
-                >
-                  {{ formatPlatform(platform) }}
-                </span>
-              </div>
-            </div>
-
-            <!-- 标签 -->
-            <div v-if="searchStore.vndbInfo.tags && searchStore.vndbInfo.tags.length > 0" class="vndb-card">
+            <!-- 详细内容 -->
+            <!-- 简介（优先展示） -->
+            <div v-if="searchStore.vndbInfo.description" class="vndb-card !p-4">
               <div class="flex items-center justify-between mb-3">
                 <div class="flex items-center gap-2">
-                  <Tag :size="18" class="text-violet-500" />
-                  <h3 class="font-bold text-gray-800 dark:text-white">标签</h3>
-                  <span class="text-xs text-gray-400 dark:text-slate-500">(按相关性排序)</span>
+                  <AlignLeft :size="16" class="text-[#ff1493]" />
+                  <h3 class="text-sm font-bold text-gray-800 dark:text-white">简介</h3>
+                  <Loader v-if="isTranslating" :size="12" class="animate-spin text-[#ff1493]" />
                 </div>
-                <!-- 翻译中指示器 -->
-                <Loader v-if="isTranslatingTags" :size="14" class="animate-spin text-violet-500" />
-              </div>
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="(tag, index) in searchStore.vndbInfo.tags"
-                  :key="index"
-                  class="px-2.5 py-1 text-xs font-medium rounded-lg transition-colors cursor-default"
-                  :class="getTagCategoryClass(tag.category || '')"
-                  :title="`${tag.name}${translatedTags.get(tag.name) ? ' → ' + translatedTags.get(tag.name) : ''} | 相关性: ${Math.round((tag.rating || 0) * 10) / 10} | 分类: ${formatTagCategory(tag.category || '')}`"
+                <!-- AI 译文标签 - 右上角 -->
+                <div 
+                  v-if="translatedDescription && !showOriginal" 
+                  class="inline-flex items-center gap-1 px-2 py-0.5 bg-gradient-to-r from-[#ff1493] to-[#d946ef] text-white text-[10px] rounded-full"
                 >
-                  {{ getTagDisplayName(tag) }}
-                </span>
+                  <Bot :size="10" />
+                  <span>AI 译文</span>
+                </div>
               </div>
-              <div class="flex flex-wrap items-center gap-3 mt-3 pt-3 border-t border-gray-200/50 dark:border-slate-700/50">
-                <span class="text-xs text-gray-400 dark:text-slate-500">分类:</span>
-                <span class="flex items-center gap-1 text-xs text-gray-500 dark:text-slate-400">
-                  <span class="w-2 h-2 rounded-full bg-violet-500" />内容
-                </span>
-                <span class="flex items-center gap-1 text-xs text-gray-500 dark:text-slate-400">
-                  <span class="w-2 h-2 rounded-full bg-blue-500" />技术
-                </span>
-                <span class="flex items-center gap-1 text-xs text-gray-500 dark:text-slate-400">
-                  <span class="w-2 h-2 rounded-full bg-amber-500" />色情
-                </span>
+              <div 
+                class="text-sm text-gray-700 dark:text-slate-300 leading-relaxed prose-description"
+                v-html="renderedDescription"
+              />
+            </div>
+
+            <!-- 语言和平台（合并为一行） -->
+            <div 
+              v-if="(searchStore.vndbInfo.languages && searchStore.vndbInfo.languages.length > 0) || (searchStore.vndbInfo.platforms && searchStore.vndbInfo.platforms.length > 0)" 
+              class="vndb-card !p-4"
+            >
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <!-- 支持语言 -->
+                <div v-if="searchStore.vndbInfo.languages && searchStore.vndbInfo.languages.length > 0">
+                  <div class="flex items-center gap-2 mb-2">
+                    <Languages :size="16" class="text-rose-500" />
+                    <h4 class="text-sm font-bold text-gray-800 dark:text-white">支持语言</h4>
+                  </div>
+                  <div class="flex flex-wrap gap-1.5">
+                    <span
+                      v-for="(lang, index) in searchStore.vndbInfo.languages"
+                      :key="index"
+                      class="px-2 py-1 bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-400 text-xs font-medium rounded-lg"
+                    >
+                      {{ formatLanguage(lang) }}
+                    </span>
+                  </div>
+                </div>
+                <!-- 支持平台 -->
+                <div v-if="searchStore.vndbInfo.platforms && searchStore.vndbInfo.platforms.length > 0">
+                  <div class="flex items-center gap-2 mb-2">
+                    <Monitor :size="16" class="text-green-500" />
+                    <h4 class="text-sm font-bold text-gray-800 dark:text-white">支持平台</h4>
+                  </div>
+                  <div class="flex flex-wrap gap-1.5">
+                    <span
+                      v-for="(platform, index) in searchStore.vndbInfo.platforms"
+                      :key="index"
+                      class="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-medium rounded-lg"
+                    >
+                      {{ formatPlatform(platform) }}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
 
-            <!-- 相关作品 -->
-            <div v-if="searchStore.vndbInfo.relations && searchStore.vndbInfo.relations.length > 0" class="vndb-card">
-              <div class="flex items-center gap-2 mb-3">
-                <GitBranch :size="18" class="text-amber-500" />
-                <h3 class="font-bold text-gray-800 dark:text-white">相关作品</h3>
-              </div>
-              <div class="space-y-2">
-                <a
-                  v-for="(relation, index) in (expandedSections.relations ? searchStore.vndbInfo.relations : searchStore.vndbInfo.relations.slice(0, 8))"
-                  :key="index"
-                  :href="`https://vndb.org/${relation.id}`"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="flex items-center gap-3 p-2 rounded-xl bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors group"
-                >
-                  <span class="px-2 py-0.5 text-xs font-medium rounded-md bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 flex-shrink-0">
-                    {{ formatRelation(relation.relation) }}
-                  </span>
-                  <span class="text-sm text-gray-700 dark:text-slate-300 truncate group-hover:underline flex-1">
-                    {{ relation.title }}
-                  </span>
-                  <ExternalLink :size="12" class="text-amber-400 dark:text-amber-600 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
-                </a>
-              </div>
-              <button
-                v-if="searchStore.vndbInfo.relations.length > 8"
-                class="w-full mt-2 py-1.5 text-xs font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 rounded-lg transition-colors"
-                @click="toggleSection('relations')"
-              >
-                {{ expandedSections.relations ? '收起' : `显示全部 ${searchStore.vndbInfo.relations.length} 个相关作品` }}
-              </button>
-            </div>
+            <!-- 相关作品和外部链接 -->
+            <div 
+              v-if="(searchStore.vndbInfo.relations && searchStore.vndbInfo.relations.length > 0) || (searchStore.vndbInfo.extlinks && searchStore.vndbInfo.extlinks.length > 0)" 
+              class="vndb-card !p-4"
+            >
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <!-- 相关作品 -->
+                <div v-if="searchStore.vndbInfo.relations && searchStore.vndbInfo.relations.length > 0">
+                  <div class="flex items-center gap-2 mb-2">
+                    <GitBranch :size="16" class="text-amber-500" />
+                    <h4 class="text-sm font-bold text-gray-800 dark:text-white">相关作品</h4>
+                    <span class="text-xs text-gray-400">({{ searchStore.vndbInfo.relations.length }})</span>
+                  </div>
+                  <div class="space-y-1.5 max-h-48 overflow-y-auto custom-scrollbar pr-1">
+                    <a
+                      v-for="(relation, index) in (expandedSections.relations ? searchStore.vndbInfo.relations : searchStore.vndbInfo.relations.slice(0, 5))"
+                      :key="index"
+                      :href="`https://vndb.org/${relation.id}`"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="flex items-center gap-2 p-1.5 rounded-lg bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors group"
+                    >
+                      <span class="px-1.5 py-0.5 text-[10px] font-medium rounded bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 flex-shrink-0">
+                        {{ formatRelation(relation.relation) }}
+                      </span>
+                      <span class="text-xs text-gray-700 dark:text-slate-300 truncate group-hover:underline flex-1">
+                        {{ relation.title }}
+                      </span>
+                    </a>
+                  </div>
+                  <button
+                    v-if="searchStore.vndbInfo.relations.length > 5"
+                    class="w-full mt-1.5 py-1 text-[10px] font-medium text-amber-600 dark:text-amber-400 hover:underline"
+                    @click="toggleSection('relations')"
+                  >
+                    {{ expandedSections.relations ? '收起' : `+${searchStore.vndbInfo.relations.length - 5} 更多` }}
+                  </button>
+                </div>
 
-            <!-- 外部链接 -->
-            <div v-if="searchStore.vndbInfo.extlinks && searchStore.vndbInfo.extlinks.length > 0" class="vndb-card">
-              <div class="flex items-center gap-2 mb-3">
-                <Link2 :size="18" class="text-sky-500" />
-                <h3 class="font-bold text-gray-800 dark:text-white">外部链接</h3>
-              </div>
-              <div class="flex flex-wrap gap-2">
-                <a
-                  v-for="(link, index) in searchStore.vndbInfo.extlinks"
-                  :key="index"
-                  :href="link.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xl bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-400 hover:bg-sky-200 dark:hover:bg-sky-900/50 transition-colors"
-                >
-                  <span>{{ link.label || link.name }}</span>
-                  <ExternalLink :size="12" />
-                </a>
+                <!-- 外部链接 -->
+                <div v-if="searchStore.vndbInfo.extlinks && searchStore.vndbInfo.extlinks.length > 0">
+                  <div class="flex items-center gap-2 mb-2">
+                    <Link2 :size="16" class="text-sky-500" />
+                    <h4 class="text-sm font-bold text-gray-800 dark:text-white">外部链接</h4>
+                  </div>
+                  <div class="flex flex-wrap gap-1.5">
+                    <a
+                      v-for="(link, index) in searchStore.vndbInfo.extlinks"
+                      :key="index"
+                      :href="link.url"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-lg bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-400 hover:bg-sky-200 dark:hover:bg-sky-900/50 transition-colors"
+                    >
+                      <span>{{ link.label || link.name }}</span>
+                      <ExternalLink :size="10" />
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
 
             <!-- 角色 -->
-            <div v-if="characters.length > 0" class="vndb-card">
-              <div class="flex items-center gap-2 mb-3">
-                <Users :size="18" class="text-rose-500" />
-                <h3 class="font-bold text-gray-800 dark:text-white">角色</h3>
-                <span class="text-xs text-gray-400 dark:text-slate-500">({{ characters.length }})</span>
+            <div v-if="characters.length > 0" class="vndb-card !p-4">
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center gap-2">
+                  <Users :size="16" class="text-rose-500" />
+                  <h3 class="text-sm font-bold text-gray-800 dark:text-white">角色</h3>
+                  <span class="text-xs text-gray-400 dark:text-slate-500">({{ characters.length }})</span>
+                </div>
+                <button
+                  v-if="characters.length > 8"
+                  class="text-[10px] font-medium text-rose-600 dark:text-rose-400 hover:underline"
+                  @click="toggleSection('characters')"
+                >
+                  {{ expandedSections.characters ? '收起' : `全部` }}
+                </button>
               </div>
-              <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
+              <div class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 gap-2">
                 <a
-                  v-for="(char, index) in (expandedSections.characters ? characters : characters.slice(0, 10))"
+                  v-for="(char, index) in (expandedSections.characters ? characters : characters.slice(0, 8))"
                   :key="index"
                   :href="`https://vndb.org/${char.id}`"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="relative rounded-xl overflow-hidden shadow-md hover:shadow-lg hover:scale-105 transition-all group"
+                  class="relative rounded-lg overflow-hidden shadow-sm hover:shadow-md hover:scale-105 transition-all group"
                 >
-                  <!-- 图片区域 -->
                   <div class="w-full relative">
-                    <!-- 占位 (padding-bottom: 133.33% = 3:4 比例) -->
                     <div class="w-full pb-[133.33%]" />
-                    <!-- 有图片时：骨架屏 + 图片 -->
                     <template v-if="char.image">
                       <div class="absolute inset-0 skeleton bg-rose-100 dark:bg-rose-900/30" />
                       <img 
@@ -380,29 +413,17 @@
                         @load="($event.target as HTMLElement).parentElement?.querySelector('.skeleton')?.classList.add('hidden')"
                       />
                     </template>
-                    <!-- 无图片时：占位符 -->
                     <div v-else class="absolute inset-0 flex items-center justify-center bg-rose-50 dark:bg-rose-900/30">
-                      <Users :size="24" class="text-rose-400 dark:text-rose-600" />
+                      <Users :size="16" class="text-rose-400 dark:text-rose-600" />
                     </div>
                   </div>
-                  <!-- 文字覆盖层 -->
-                  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/50 to-transparent p-2 pt-6">
-                    <p class="text-xs font-medium text-white text-center truncate group-hover:underline">
+                  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-1.5 pt-4">
+                    <p class="text-[10px] font-medium text-white text-center truncate group-hover:underline">
                       {{ char.original || char.name }}
                     </p>
-                    <p v-if="char.sex" class="text-[10px] text-white/70 text-center">
-                      {{ formatSex(char.sex) }}{{ char.age ? ` · ${char.age}岁` : '' }}
-                    </p>
                   </div>
                 </a>
               </div>
-              <button
-                v-if="characters.length > 10"
-                class="w-full mt-2 py-1.5 text-xs font-medium text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-900/20 hover:bg-rose-100 dark:hover:bg-rose-900/30 rounded-lg transition-colors"
-                @click="toggleSection('characters')"
-              >
-                {{ expandedSections.characters ? '收起' : `显示全部 ${characters.length} 个角色` }}
-              </button>
             </div>
             <div v-else-if="isLoadingCharacters" class="vndb-card">
               <div class="flex items-center gap-2">
@@ -412,131 +433,115 @@
             </div>
 
             <!-- 名言 -->
-            <div v-if="quotes.length > 0" class="vndb-card">
-              <div class="flex items-center justify-between mb-3">
+            <div v-if="quotes.length > 0" class="vndb-card !p-4">
+              <div class="flex items-center justify-between mb-2">
                 <div class="flex items-center gap-2">
-                  <Quote :size="18" class="text-indigo-500" />
-                  <h3 class="font-bold text-gray-800 dark:text-white">名言</h3>
-                  <span class="text-xs text-gray-400 dark:text-slate-500">({{ quotes.length }})</span>
+                  <Quote :size="16" class="text-indigo-500" />
+                  <h3 class="text-sm font-bold text-gray-800 dark:text-white">名言</h3>
+                  <span class="text-xs text-gray-400">({{ quotes.length }})</span>
+                  <Loader v-if="isTranslatingQuotes" :size="12" class="animate-spin text-indigo-500" />
+                </div>
+                <div class="flex items-center gap-2">
+                  <!-- AI 译文标签 - 右上角 -->
+                  <div 
+                    v-if="translatedQuotes.size > 0 && !showOriginalQuotes" 
+                    class="inline-flex items-center gap-1 px-2 py-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 text-white text-[10px] rounded-full"
+                  >
+                    <Bot :size="10" />
+                    <span>AI 译文</span>
+                  </div>
+                  <button
+                    v-if="quotes.length > 3"
+                    class="text-[10px] font-medium text-indigo-600 dark:text-indigo-400 hover:underline"
+                    @click="toggleSection('quotes')"
+                  >
+                    {{ expandedSections.quotes ? '收起' : `全部` }}
+                  </button>
                 </div>
-                <!-- 翻译中指示器 -->
-                <Loader v-if="isTranslatingQuotes" :size="14" class="animate-spin text-indigo-500" />
               </div>
-              <div class="space-y-3">
+              <div class="space-y-2">
                 <div
-                  v-for="(q, index) in (expandedSections.quotes ? quotes : quotes.slice(0, 10))"
+                  v-for="(q, index) in (expandedSections.quotes ? quotes : quotes.slice(0, 3))"
                   :key="index"
-                  class="relative pl-4 border-l-2 border-indigo-300 dark:border-indigo-600"
+                  class="relative pl-3 border-l-2 border-indigo-300 dark:border-indigo-600 py-1"
                 >
-                  <p class="text-sm text-gray-700 dark:text-gray-300 italic leading-relaxed">
+                  <p class="text-xs text-gray-700 dark:text-gray-300 italic leading-relaxed">
                     "{{ getQuoteDisplayText(q.quote) }}"
                   </p>
-                  <p v-if="q.character" class="text-xs text-indigo-500 dark:text-indigo-400 mt-1 font-medium">
+                  <p v-if="q.character" class="text-[10px] text-indigo-500 dark:text-indigo-400 mt-0.5 font-medium">
                     — {{ q.character.original || q.character.name }}
                   </p>
                 </div>
               </div>
-              <button
-                v-if="quotes.length > 10"
-                class="w-full mt-2 py-1.5 text-xs font-medium text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/20 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 rounded-lg transition-colors"
-                @click="toggleSection('quotes')"
-              >
-                {{ expandedSections.quotes ? '收起' : `显示全部 ${quotes.length} 条名言` }}
-              </button>
             </div>
-            <div v-else-if="isLoadingQuotes" class="vndb-card">
+            <div v-else-if="isLoadingQuotes" class="vndb-card !p-4">
               <div class="flex items-center gap-2">
-                <Loader :size="18" class="animate-spin text-indigo-500" />
-                <span class="text-sm text-gray-500 dark:text-slate-400">加载名言中...</span>
+                <Loader :size="14" class="animate-spin text-indigo-500" />
+                <span class="text-xs text-gray-500 dark:text-slate-400">加载名言中...</span>
               </div>
             </div>
 
-            <!-- 简介 -->
-            <div v-if="searchStore.vndbInfo.description" class="vndb-card">
-              <div class="flex items-center justify-between mb-3">
-                <div class="flex items-center gap-2">
-                  <AlignLeft :size="18" class="text-[#ff1493]" />
-                  <h3 class="font-bold text-gray-800 dark:text-white">简介</h3>
-                </div>
-                <!-- 翻译中指示器 -->
-                <Loader v-if="isTranslating" :size="14" class="animate-spin text-[#ff1493]" />
-              </div>
-
-              <!-- 显示内容 -->
-              <div class="text-sm text-gray-700 dark:text-slate-300 leading-relaxed whitespace-pre-line">
-                <template v-if="showOriginal || !translatedDescription">
-                  {{ searchStore.vndbInfo.description }}
-                </template>
-                <template v-else>
-                  <div class="inline-flex items-center gap-1 px-2 py-0.5 mb-2 bg-gradient-to-r from-[#ff1493] to-[#d946ef] text-white text-xs rounded-full">
-                    <Bot :size="12" />
-                    <span>AI 译文</span>
-                  </div>
-                  <div>{{ translatedDescription }}</div>
-                </template>
-              </div>
-            </div>
-
-            <!-- PV 鉴赏 -->
-            <div v-if="pvVideoUrl" class="vndb-card">
-              <div class="flex items-center gap-2 mb-4">
-                <Play :size="18" class="text-rose-500" />
-                <h3 class="font-bold text-gray-800 dark:text-white">PV 鉴赏</h3>
-              </div>
-              <div class="relative rounded-xl overflow-hidden bg-black">
-                <video
-                  ref="pvVideoRef"
-                  :src="pvVideoUrl"
-                  controls
-                  playsinline
-                  preload="auto"
-                  class="w-full h-auto max-h-[400px] object-contain"
-                  @loadeddata="handleVideoLoaded"
-                >
-                  您的浏览器不支持视频播放
-                </video>
-              </div>
-              <p class="text-xs text-gray-500 dark:text-slate-400 mt-2 text-center">
-                视频来源：TouchGal
-              </p>
-            </div>
-
-            <!-- PV 加载中 -->
-            <div v-else-if="isPvLoading" class="vndb-card">
-              <div class="flex items-center gap-2 mb-4">
-                <Play :size="18" class="text-rose-500" />
-                <h3 class="font-bold text-gray-800 dark:text-white">PV 鉴赏</h3>
-              </div>
-              <div class="flex items-center justify-center py-8 text-gray-400">
-                <Loader :size="20" class="animate-spin mr-2" />
-                <span class="text-sm">正在获取视频...</span>
-              </div>
-            </div>
-
-            <!-- 游戏截图 -->
+            <!-- PV 视频和游戏截图 -->
             <div 
-              v-if="searchStore.vndbInfo.screenshots && searchStore.vndbInfo.screenshots.length > 0" 
-              class="vndb-card"
+              v-if="pvVideoUrl || isPvLoading || (searchStore.vndbInfo.screenshots && searchStore.vndbInfo.screenshots.length > 0)" 
+              class="vndb-card !p-4"
             >
-              <div class="flex items-center gap-2 mb-4">
-                <Image :size="18" class="text-[#d946ef]" />
-                <h3 class="font-bold text-gray-800 dark:text-white">游戏截图</h3>
+              <!-- PV 视频 -->
+              <div v-if="pvVideoUrl" class="mb-4">
+                <div class="flex items-center gap-2 mb-2">
+                  <Play :size="16" class="text-rose-500" />
+                  <h4 class="text-sm font-bold text-gray-800 dark:text-white">PV</h4>
+                  <a 
+                    href="https://www.touchgal.us/" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    class="text-[10px] text-gray-400 hover:text-rose-500 transition-colors"
+                  >TouchGal ↗</a>
+                </div>
+                <div class="relative rounded-lg overflow-hidden bg-black">
+                  <video
+                    ref="pvVideoRef"
+                    :src="pvVideoUrl"
+                    controls
+                    playsinline
+                    preload="metadata"
+                    class="w-full h-auto"
+                    @loadeddata="handleVideoLoaded"
+                  >
+                    您的浏览器不支持视频播放
+                  </video>
+                </div>
               </div>
-              <div class="grid grid-cols-2 gap-3">
-                <button
-                  v-for="(screenshot, index) in searchStore.vndbInfo.screenshots"
-                  :key="index"
-                  class="group block overflow-hidden rounded-xl hover:scale-[1.02] transition-transform bg-gray-100 dark:bg-slate-700"
-                  @click="openGallery(index + 1)"
-                >
-                  <img
-                    :src="screenshot"
-                    :alt="`${searchStore.vndbInfo.mainName} 截图 ${index + 1}`"
-                    class="w-full h-auto cursor-pointer group-hover:scale-105 transition-transform duration-300"
-                    loading="lazy"
-                    @error="handleImageError"
-                  />
-                </button>
+              <div v-else-if="isPvLoading" class="mb-4">
+                <div class="flex items-center gap-2">
+                  <Loader :size="14" class="animate-spin text-rose-500" />
+                  <span class="text-xs text-gray-500">获取 PV 中...</span>
+                </div>
+              </div>
+
+              <!-- 游戏截图 -->
+              <div v-if="searchStore.vndbInfo.screenshots && searchStore.vndbInfo.screenshots.length > 0">
+                <div class="flex items-center gap-2 mb-2">
+                  <Image :size="16" class="text-[#d946ef]" />
+                  <h4 class="text-sm font-bold text-gray-800 dark:text-white">截图</h4>
+                  <span class="text-xs text-gray-400">({{ searchStore.vndbInfo.screenshots.length }})</span>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                  <button
+                    v-for="(screenshot, index) in searchStore.vndbInfo.screenshots"
+                    :key="index"
+                    class="group block overflow-hidden rounded-lg hover:scale-[1.02] transition-transform bg-gray-100 dark:bg-slate-700"
+                    @click="openGallery(index + 1)"
+                  >
+                    <img
+                      :src="screenshot"
+                      :alt="`截图 ${index + 1}`"
+                      class="w-full h-auto cursor-pointer group-hover:scale-105 transition-transform duration-300"
+                      loading="lazy"
+                      @error="handleImageError"
+                    />
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -551,7 +556,7 @@ import { ref, watch, computed } from 'vue'
 import { useSearchStore, type VndbCharacter, type VndbQuote } from '@/stores/search'
 import { useUIStore } from '@/stores/ui'
 import { translateAllContent, fetchVndbCharacters, fetchVndbQuotes, fetchGameVideoUrl } from '@/api/search'
-import { playClick, playSuccess, playError, playToggle, playTransitionUp, playTransitionDown } from '@/composables/useSound'
+import { playTap, playCelebration, playCaution, playToggleOn, playToggleOff, playTransitionUp, playTransitionDown } from '@/composables/useSound'
 import { useImageViewer } from '@/composables/useImageViewer'
 import {
   BookOpen,
@@ -620,7 +625,7 @@ const hasAnyTranslation = computed(() =>
 // PV 视频状态
 const pvVideoUrl = ref<string | null>(null)
 const isPvLoading = ref(false)
-// eslint-disable-next-line no-undef
+ 
 const pvVideoRef = ref<HTMLVideoElement | null>(null)
 
 // 视频加载完成后暂停在第一帧
@@ -643,7 +648,7 @@ const expandedSections = ref({
 })
 
 function toggleSection(section: keyof typeof expandedSections.value) {
-  playClick()
+  playTap()
   expandedSections.value[section] = !expandedSections.value[section]
 }
 
@@ -699,11 +704,11 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
   
   // 如果有游戏 ID，加载角色和名言，然后自动翻译
   if (vnIdAtStart) {
-    loadCharactersAndQuotes(vnIdAtStart).then(() => {
+    void loadCharactersAndQuotes(vnIdAtStart).then(() => {
       // 检查是否仍是同一个游戏（防止切换游戏时数据错乱）
       if (currentVnId.value === vnIdAtStart) {
         // 自动触发 AI 翻译（静默模式，不播放音效）
-        handleTranslateAllSilent()
+        void handleTranslateAllSilent()
       }
     })
   }
@@ -752,7 +757,7 @@ async function translateAllInternal(silent = false) {
   }
   
   if (!silent) {
-    playClick()
+    playTap()
   }
   
   isTranslatingAllRef.value = true
@@ -797,7 +802,9 @@ async function translateAllInternal(silent = false) {
     if (result.tags && tagNames) {
       const newMap = new Map<string, string>()
       tagNames.forEach((original, index) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         if (result.tags![index]) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           newMap.set(original, result.tags![index])
         }
       })
@@ -811,7 +818,9 @@ async function translateAllInternal(silent = false) {
     if (result.quotes && quoteTexts) {
       const newMap = new Map<string, string>()
       quoteTexts.forEach((original, index) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         if (result.quotes![index]) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           newMap.set(original, result.quotes![index])
         }
       })
@@ -823,15 +832,15 @@ async function translateAllInternal(silent = false) {
     }
     
     if (!silent && hasSuccess) {
-      playSuccess()
+      playCelebration()
     } else if (!silent && !hasSuccess) {
       translateError.value = true
-      playError()
+      playCaution()
     }
   } catch {
     if (!silent) {
       translateError.value = true
-      playError()
+      playCaution()
     }
   } finally {
     isTranslatingAllRef.value = false
@@ -850,8 +859,13 @@ async function handleTranslateAllSilent() {
 
 // 切换所有翻译的显示状态
 function toggleAllTranslations() {
-  playToggle()
   const newState = !showOriginal.value
+  // 切换到原文时播放 off，切换到译文时播放 on
+  if (newState) {
+    playToggleOff()
+  } else {
+    playToggleOn()
+  }
   showOriginal.value = newState
   showOriginalTags.value = newState
   showOriginalQuotes.value = newState
@@ -898,6 +912,7 @@ function openGallery(startIndex: number) {
     searchStore.vndbInfo.screenshots.forEach((screenshot, index) => {
       images.push({
         src: screenshot,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         caption: `${searchStore.vndbInfo!.mainName} - 截图 ${index + 1}`,
       })
     })
@@ -908,8 +923,8 @@ function openGallery(startIndex: number) {
   }
 }
 
-// 格式化性别
-function formatSex(sex: string): string {
+// 格式化性别（保留备用）
+function _formatSex(sex: string): string {
   const sexMap: Record<string, string> = {
     'm': '男性',
     'f': '女性',
@@ -1001,6 +1016,51 @@ function formatLanguage(lang: string): string {
   return langMap[lang] || lang.toUpperCase()
 }
 
+// BBCode 渲染函数（VNDB 格式）
+function renderDescription(text: string): string {
+  if (!text) {
+    return ''
+  }
+  
+  const html = text
+    // 转义 HTML 特殊字符（防止 XSS）
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    // 链接 [url=链接]文字[/url]
+    .replace(/\[url=([^\]]+)\](.+?)\[\/url\]/gi, '<a href="$1" target="_blank" rel="noopener noreferrer" class="text-[#ff1493] hover:underline">$2</a>')
+    // 链接 [url]链接[/url]
+    .replace(/\[url\](.+?)\[\/url\]/gi, '<a href="$1" target="_blank" rel="noopener noreferrer" class="text-[#ff1493] hover:underline">$1</a>')
+    // 粗体 [b]文字[/b]
+    .replace(/\[b\](.+?)\[\/b\]/gi, '<strong>$1</strong>')
+    // 斜体 [i]文字[/i]
+    .replace(/\[i\](.+?)\[\/i\]/gi, '<em>$1</em>')
+    // 下划线 [u]文字[/u]
+    .replace(/\[u\](.+?)\[\/u\]/gi, '<u>$1</u>')
+    // 删除线 [s]文字[/s]
+    .replace(/\[s\](.+?)\[\/s\]/gi, '<del>$1</del>')
+    // 剧透 [spoiler]文字[/spoiler]
+    .replace(/\[spoiler\](.+?)\[\/spoiler\]/gi, '<span class="spoiler-text">$1</span>')
+    // 引用 [quote]文字[/quote]
+    .replace(/\[quote\](.+?)\[\/quote\]/gis, '<blockquote class="border-l-2 border-[#ff1493] pl-3 my-2 text-gray-600 dark:text-slate-400 italic">$1</blockquote>')
+    // 代码 [code]文字[/code]
+    .replace(/\[code\](.+?)\[\/code\]/gis, '<code class="bg-gray-100 dark:bg-slate-700 px-1 py-0.5 rounded text-sm">$1</code>')
+    // 原始文本 [raw]文字[/raw]
+    .replace(/\[raw\](.+?)\[\/raw\]/gis, '$1')
+    // 换行保持
+    .replace(/\n/g, '<br>')
+  
+  return html
+}
+
+// 计算渲染后的描述
+const renderedDescription = computed(() => {
+  const text = showOriginal.value || !translatedDescription.value 
+    ? searchStore.vndbInfo?.description 
+    : translatedDescription.value
+  return renderDescription(text || '')
+})
+
 // 格式化开发状态
 function formatDevStatus(status: number): string {
   const statusMap: Record<number, string> = {
@@ -1031,8 +1091,8 @@ function getTagCategoryClass(category: string): string {
   return categoryMap[category] || 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-400'
 }
 
-// 格式化标签分类名称
-function formatTagCategory(category: string): string {
+// 格式化标签分类名称（保留备用）
+function _formatTagCategory(category: string): string {
   const categoryMap: Record<string, string> = {
     'cont': '内容',
     'tech': '技术',
@@ -1115,4 +1175,51 @@ function formatRelation(relation: string): string {
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(180deg, #c71585, #c026d3);
 }
+
+/* 描述文本 Markdown 样式 */
+.prose-description :deep(strong) {
+  font-weight: 600;
+  color: inherit;
+}
+
+.prose-description :deep(em) {
+  font-style: italic;
+}
+
+.prose-description :deep(a) {
+  color: #ff1493;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.prose-description :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.dark .prose-description :deep(a) {
+  color: #ff69b4;
+}
+
+/* 剧透文字 - 模糊效果，悬停显示 */
+.prose-description :deep(.spoiler-text) {
+  background: rgba(0, 0, 0, 0.8);
+  color: transparent;
+  border-radius: 2px;
+  padding: 0 2px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.prose-description :deep(.spoiler-text:hover) {
+  background: rgba(255, 20, 147, 0.1);
+  color: inherit;
+}
+
+.dark .prose-description :deep(.spoiler-text) {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.dark .prose-description :deep(.spoiler-text:hover) {
+  background: rgba(255, 105, 180, 0.2);
+}
 </style>
diff --git a/src/composables/useKeyboardShortcuts.ts b/src/composables/useKeyboardShortcuts.ts
index 421302b..2e2e5ea 100644
--- a/src/composables/useKeyboardShortcuts.ts
+++ b/src/composables/useKeyboardShortcuts.ts
@@ -60,7 +60,8 @@ export function useKeyboardShortcuts() {
 
   // 聚焦搜索框
   function focusSearch() {
-    const searchInput = document.querySelector('input[type="search"], input[placeholder*="搜索"]') as HTMLInputElement
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const searchInput = document.querySelector('input[type="search"], input[placeholder*="搜索"]')!
     if (searchInput) {
       searchInput.focus()
       searchInput.select()
@@ -74,7 +75,7 @@ export function useKeyboardShortcuts() {
 
   // 获取平台列表
   function getPlatformElements(): HTMLElement[] {
-    return Array.from(document.querySelectorAll('[data-platform]')) as HTMLElement[]
+    return Array.from(document.querySelectorAll('[data-platform]'))
   }
 
   // 跳转到指定平台
@@ -122,7 +123,8 @@ export function useKeyboardShortcuts() {
   // 切换站点导航
   function toggleNav() {
     // 模拟点击站点导航按钮
-    const navBtn = document.querySelector('.nav-btn') as HTMLButtonElement
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const navBtn = document.querySelector('.nav-btn')!
     if (navBtn) {
       navBtn.click()
     }
@@ -142,20 +144,20 @@ export function useKeyboardShortcuts() {
     uiStore.closeAllModals()
   }
 
-  // 切换面板
+  // 切换面板（使用 store 中的互斥方法）
   function togglePanel(panel: 'settings' | 'comments' | 'vndb' | 'history') {
     switch (panel) {
       case 'settings':
-        uiStore.isSettingsModalOpen = !uiStore.isSettingsModalOpen
+        uiStore.toggleSettingsModal()
         break
       case 'comments':
-        uiStore.isCommentsModalOpen = !uiStore.isCommentsModalOpen
+        uiStore.toggleCommentsModal()
         break
       case 'vndb':
-        uiStore.isVndbPanelOpen = !uiStore.isVndbPanelOpen
+        uiStore.toggleVndbPanel()
         break
       case 'history':
-        uiStore.isHistoryModalOpen = !uiStore.isHistoryModalOpen
+        uiStore.toggleHistoryModal()
         break
     }
   }
@@ -269,7 +271,7 @@ export function useKeyboardShortcuts() {
         // 显示/隐藏快捷键帮助
         event.preventDefault()
         playButton()
-        uiStore.isKeyboardHelpOpen = !uiStore.isKeyboardHelpOpen
+        uiStore.toggleKeyboardHelp()
         break
     }
   }
diff --git a/src/composables/useSound.ts b/src/composables/useSound.ts
index 1aa3d56..ae5f3a9 100644
--- a/src/composables/useSound.ts
+++ b/src/composables/useSound.ts
@@ -122,27 +122,29 @@ const soundMap: Record<SoundType, keyof typeof Snd.SOUNDS> = {
   ringtone_loop: 'RINGTONE_LOOP',
 }
 
-// 播放音效
-async function playSound(type: SoundType): Promise<void> {
+// 播放音效（fire-and-forget，不返回 Promise）
+function playSound(type: SoundType): void {
   if (!soundEnabled.value) {
     return
   }
   
-  try {
-    const snd = await getSnd()
-    if (!snd) {
-      return
+  void (async () => {
+    try {
+      const snd = await getSnd()
+      if (!snd) {
+        return
+      }
+      
+      const soundKey = soundMap[type]
+      const sound = Snd.SOUNDS[soundKey]
+      
+      if (sound) {
+        snd.play(sound)
+      }
+    } catch {
+      // 静默处理错误
     }
-    
-    const soundKey = soundMap[type]
-    const sound = Snd.SOUNDS[soundKey]
-    
-    if (sound) {
-      snd.play(sound)
-    }
-  } catch {
-    // 静默处理错误
-  }
+  })()
 }
 
 // ========================================
@@ -192,10 +194,10 @@ const legacyMap: Record<LegacySoundType, SoundType> = {
   close: 'transition_down',
 }
 
-// 兼容旧 API 的播放方法
-async function playLegacySound(type: LegacySoundType): Promise<void> {
+// 兼容旧 API 的播放方法（fire-and-forget）
+function playLegacySound(type: LegacySoundType): void {
   const mappedType = legacyMap[type]
-  return playSound(mappedType)
+  playSound(mappedType)
 }
 
 // ========================================
diff --git a/src/composables/useTextScroll.ts b/src/composables/useTextScroll.ts
index b0760d6..870a8e0 100644
--- a/src/composables/useTextScroll.ts
+++ b/src/composables/useTextScroll.ts
@@ -82,7 +82,8 @@ export const vTextScroll = {
     
     // 检查溢出
     const checkOverflow = () => {
-      const inner = el.querySelector('.text-scroll-inner') as HTMLElement
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const inner = el.querySelector('.text-scroll-inner')!
       if (!inner) { return }
       
       const isOver = inner.scrollWidth > el.clientWidth
@@ -126,7 +127,8 @@ export const vTextScroll = {
     // 检查内容是否变化
     requestAnimationFrame(() => {
       // 获取当前实际文本内容（排除克隆的内容）
-      const inner = el.querySelector('.text-scroll-inner') as HTMLElement
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const inner = el.querySelector('.text-scroll-inner')!
       let currentContent = ''
       
       if (inner) {
diff --git a/src/config/env.ts b/src/config/env.ts
index a06036f..483d888 100644
--- a/src/config/env.ts
+++ b/src/config/env.ts
@@ -100,6 +100,6 @@ export type AppConfig = typeof CONFIG
 
 // 开发环境下打印配置（方便调试）
 if (DEV_CONFIG.isDev && FEATURE_FLAGS.enableDevLogs) {
-  console.log('📦 Application Config:', CONFIG)
+  console.info('📦 Application Config:', CONFIG)
 }
 
diff --git a/src/config/index.ts b/src/config/index.ts
index 5f8eb62..d91333c 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -194,7 +194,7 @@ export const mode = import.meta.env.MODE
  */
 export function devLog(...args: unknown[]) {
   if (config.dev.debug && isDev) {
-    console.log('[Dev]', ...args)
+    console.info('[Dev]', ...args)
   }
 }
 
@@ -218,6 +218,6 @@ export function devError(...args: unknown[]) {
 
 // 开发环境打印配置信息
 if (isDev && config.dev.debug) {
-  console.log('🔧 Application Config:', config)
-  console.log('🌍 Environment:', mode)
+  console.info('🔧 Application Config:', config)
+  console.info('🌍 Environment:', mode)
 }
diff --git a/src/main.ts b/src/main.ts
index a0ee679..222bf70 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -158,10 +158,11 @@ function showUpdateToast(onUpdate: () => void) {
 }
 
 if ('serviceWorker' in navigator) {
-  window.addEventListener('load', async () => {
-    try {
-      const reg = await navigator.serviceWorker.register('/sw.js')
-      console.log('[SW] Registered')
+  window.addEventListener('load', () => {
+    void (async () => {
+      try {
+        const reg = await navigator.serviceWorker.register('/sw.js')
+        console.info('[SW] Registered')
 
       // 新版本检测
       reg.addEventListener('updatefound', () => {
@@ -173,10 +174,10 @@ if ('serviceWorker' in navigator) {
         worker.addEventListener('statechange', () => {
           // 新 SW 安装完成且有旧 SW 控制页面 = 有更新
           if (worker.state === 'installed' && navigator.serviceWorker.controller) {
-            console.log('[SW] Update available')
+            console.info('[SW] Update available')
             // 显示更新提示，5 秒后自动更新
             showUpdateToast(() => {
-              console.log('[SW] Activating update...')
+              console.info('[SW] Activating update...')
               worker.postMessage({ type: 'SKIP_WAITING' })
             })
           }
@@ -190,21 +191,22 @@ if ('serviceWorker' in navigator) {
           return
         }
         refreshing = true
-        console.log('[SW] New version activated, reloading...')
+        console.info('[SW] New version activated, reloading...')
         window.location.reload()
       })
 
       // 定期检查更新（5 分钟）
-      setInterval(() => reg.update().catch(() => {}), 5 * 60 * 1000)
+      setInterval(() => { void reg.update().catch(() => { /* 静默处理 */ }) }, 5 * 60 * 1000)
 
       // 页面可见时检查更新
       document.addEventListener('visibilitychange', () => {
         if (document.visibilityState === 'visible') {
-          reg.update().catch(() => {})
+          void reg.update().catch(() => { /* 静默处理 */ })
         }
       })
     } catch {
       // 静默处理
     }
+    })()
   })
 }
diff --git a/src/stores/plugins.ts b/src/stores/plugins.ts
index 7a98451..6f3fd86 100644
--- a/src/stores/plugins.ts
+++ b/src/stores/plugins.ts
@@ -160,11 +160,11 @@ export function piniaLogger(context: PiniaPluginContext) {
   store.$onAction(({ name, args, after, onError }) => {
     const startTime = Date.now()
     
-    console.log(`🚀 [${store.$id}] Action "${name}" called with:`, args)
+    console.info(`🚀 [${store.$id}] Action "${name}" called with:`, args)
     
     after((result) => {
       const duration = Date.now() - startTime
-      console.log(`✅ [${store.$id}] Action "${name}" completed in ${duration}ms`, result)
+      console.info(`✅ [${store.$id}] Action "${name}" completed in ${duration}ms`, result)
     })
     
     onError((error) => {
@@ -175,7 +175,7 @@ export function piniaLogger(context: PiniaPluginContext) {
   
   // 监听状态变化
   store.$subscribe((mutation, state) => {
-    console.log(`📝 [${store.$id}] State changed:`, {
+    console.info(`📝 [${store.$id}] State changed:`, {
       type: mutation.type,
       storeId: mutation.storeId,
       events: mutation.events,
@@ -210,6 +210,7 @@ export function piniaPerformance(context: PiniaPluginContext) {
       if (!stats.actionDurations.has(name)) {
         stats.actionDurations.set(name, [])
       }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       stats.actionDurations.get(name)!.push(duration)
     })
   })
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 7ec5bbe..e920ee7 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -220,7 +220,7 @@ export const useSearchStore = defineStore('search', () => {
     clearResults()
   }
   
-  function endSearch(success: boolean = true) {
+  function endSearch(success = true) {
     isSearching.value = false
     lastSearchTime.value = Date.now()
     
diff --git a/src/stores/stats.ts b/src/stores/stats.ts
index 0ced8b6..a1c4c5c 100644
--- a/src/stores/stats.ts
+++ b/src/stores/stats.ts
@@ -146,7 +146,7 @@ export const useStatsStore = defineStore('stats', () => {
   // 检查单个服务状态
   async function checkServiceStatus(serviceKey: string) {
     const service = serviceStatuses.value.get(serviceKey)
-    if (!service || !service.url) {return}
+    if (!service?.url) {return}
     
     // 设置为检测中
     serviceStatuses.value.set(serviceKey, {
@@ -196,14 +196,14 @@ export const useStatsStore = defineStore('stats', () => {
   // 开始定期检测
   function startStatusCheck(intervalMs = 30000) {
     // 立即检测一次
-    checkAllServices()
+    void checkAllServices()
     
     // 设置定期检测
     if (statusCheckInterval) {
       clearInterval(statusCheckInterval)
     }
     statusCheckInterval = window.setInterval(() => {
-      checkAllServices()
+      void checkAllServices()
     }, intervalMs)
   }
   
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index 41e7ba8..1fc5142 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -87,12 +87,12 @@ export const useUIStore = defineStore('ui', () => {
   const scrollPosition = ref(0)
   
   // Toast 通知
-  const toasts = ref<Array<{
+  const toasts = ref<{
     id: string
     type: 'success' | 'error' | 'info' | 'warning'
     message: string
     duration: number
-  }>>([])
+  }[]>([])
   
   // 计算属性
   const hasOpenModal = computed(() => 
@@ -175,19 +175,9 @@ export const useUIStore = defineStore('ui', () => {
     customCSS.value = css
   }
   
-  // 方法 - 模态框
-  function toggleCommentsModal() {
-    isCommentsModalOpen.value = !isCommentsModalOpen.value
-  }
-  
-  function toggleVndbPanel() {
-    isVndbPanelOpen.value = !isVndbPanelOpen.value
-  }
-  
-  function toggleSettingsModal() {
-    isSettingsModalOpen.value = !isSettingsModalOpen.value
-  }
+  // 方法 - 模态框（互斥：打开一个会关闭其他）
   
+  // 关闭所有模态框（内部使用，不触发互斥逻辑）
   function closeAllModals() {
     isCommentsModalOpen.value = false
     isVndbPanelOpen.value = false
@@ -196,8 +186,74 @@ export const useUIStore = defineStore('ui', () => {
     isKeyboardHelpOpen.value = false
   }
   
+  // 打开评论模态框（互斥）
+  function openCommentsModal() {
+    closeAllModals()
+    isCommentsModalOpen.value = true
+  }
+  
+  function toggleCommentsModal() {
+    if (isCommentsModalOpen.value) {
+      isCommentsModalOpen.value = false
+    } else {
+      openCommentsModal()
+    }
+  }
+  
+  // 打开 VNDB 面板（互斥）
+  function openVndbPanel() {
+    closeAllModals()
+    isVndbPanelOpen.value = true
+  }
+  
+  function toggleVndbPanel() {
+    if (isVndbPanelOpen.value) {
+      isVndbPanelOpen.value = false
+    } else {
+      openVndbPanel()
+    }
+  }
+  
+  // 打开设置模态框（互斥）
+  function openSettingsModal() {
+    closeAllModals()
+    isSettingsModalOpen.value = true
+  }
+  
+  function toggleSettingsModal() {
+    if (isSettingsModalOpen.value) {
+      isSettingsModalOpen.value = false
+    } else {
+      openSettingsModal()
+    }
+  }
+  
+  // 打开历史记录模态框（互斥）
+  function openHistoryModal() {
+    closeAllModals()
+    isHistoryModalOpen.value = true
+  }
+  
   function toggleHistoryModal() {
-    isHistoryModalOpen.value = !isHistoryModalOpen.value
+    if (isHistoryModalOpen.value) {
+      isHistoryModalOpen.value = false
+    } else {
+      openHistoryModal()
+    }
+  }
+  
+  // 打开键盘帮助面板（互斥）
+  function openKeyboardHelp() {
+    closeAllModals()
+    isKeyboardHelpOpen.value = true
+  }
+  
+  function toggleKeyboardHelp() {
+    if (isKeyboardHelpOpen.value) {
+      isKeyboardHelpOpen.value = false
+    } else {
+      openKeyboardHelp()
+    }
   }
   
   // 方法 - 浮动按钮
@@ -451,10 +507,17 @@ export const useUIStore = defineStore('ui', () => {
     toggleDarkMode,
     setDarkMode,
     setCustomCSS,
+    // 模态框方法
+    openCommentsModal,
     toggleCommentsModal,
+    openVndbPanel,
     toggleVndbPanel,
+    openSettingsModal,
     toggleSettingsModal,
+    openHistoryModal,
     toggleHistoryModal,
+    openKeyboardHelp,
+    toggleKeyboardHelp,
     closeAllModals,
     setShowScrollToTop,
     togglePlatformNav,
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index f4d81a9..669a7f1 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -71,6 +71,7 @@ export {
   Heart,
   Star,
   Crown,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   Github,
   Quote,
   Reply,
diff --git a/src/utils/imageDB.ts b/src/utils/imageDB.ts
index e2b4f07..7812670 100644
--- a/src/utils/imageDB.ts
+++ b/src/utils/imageDB.ts
@@ -3,6 +3,9 @@
  * 用于存储随机背景图片
  */
 
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+// IndexedDB 事务回调中 result 在 onsuccess 时必定存在
+
 const DB_NAME = 'RandomImageCache'
 const DB_VERSION = 1
 const STORE_NAME = 'images'
diff --git a/src/utils/persistence.ts b/src/utils/persistence.ts
index 010ea7e..3d2bcac 100644
--- a/src/utils/persistence.ts
+++ b/src/utils/persistence.ts
@@ -15,7 +15,7 @@ export interface SearchState {
   searchQuery: string
   searchMode: 'game' | 'patch'
   customApi: string
-  platformResults: Array<[string, PlatformData]>
+  platformResults: [string, PlatformData][]
   vndbInfo: VndbInfo | null
   // 输入状态
   inputQuery?: string
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index f4f5bf6..a45f4f7 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -43,8 +43,10 @@ export function watchSystemTheme(callback: (theme: 'light' | 'dark') => void): (
     mediaQuery.addEventListener('change', handler)
     return () => mediaQuery.removeEventListener('change', handler)
   } else {
-    // 降级到旧的 API
+    // 降级到旧的 API（兼容旧浏览器）
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     mediaQuery.addListener(handler)
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     return () => mediaQuery.removeListener(handler)
   }
 }
@@ -104,7 +106,8 @@ export function applyCustomJS(js: string): void {
   // 如果有新的JS，执行脚本
   if (js.trim()) {
     try {
-      // 使用 Function 构造器创建并执行脚本
+      // 使用 Function 构造器创建并执行脚本（用户自定义脚本功能）
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
       const script = new Function(js)
       script()
     } catch (error) {
diff --git a/src/utils/urlParams.ts b/src/utils/urlParams.ts
index 8c93821..b1e9c8e 100644
--- a/src/utils/urlParams.ts
+++ b/src/utils/urlParams.ts
@@ -51,7 +51,7 @@ export function updateURLParams(params: SearchParams): void {
   searchParams.delete('api')
   
   // 设置新参数
-  if (params.s && params.s.trim()) {
+  if (params.s?.trim()) {
     searchParams.set('s', encodeURIComponent(params.s.trim()))
   }
   
@@ -60,7 +60,7 @@ export function updateURLParams(params: SearchParams): void {
     searchParams.set('mode', params.mode)
   }
   
-  if (params.api && params.api.trim()) {
+  if (params.api?.trim()) {
     searchParams.set('api', encodeURIComponent(params.api.trim()))
   }
   
@@ -86,7 +86,7 @@ export function generateShareURL(params: SearchParams): string {
   const url = new URL(window.location.origin)
   const searchParams = url.searchParams
   
-  if (params.s && params.s.trim()) {
+  if (params.s?.trim()) {
     searchParams.set('s', encodeURIComponent(params.s.trim()))
   }
   
@@ -94,7 +94,7 @@ export function generateShareURL(params: SearchParams): string {
     searchParams.set('mode', params.mode)
   }
   
-  if (params.api && params.api.trim()) {
+  if (params.api?.trim()) {
     searchParams.set('api', encodeURIComponent(params.api.trim()))
   }
   
diff --git a/tailwind.config.ts b/tailwind.config.js
similarity index 98%
rename from tailwind.config.ts
rename to tailwind.config.js
index 800202e..499792b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
-import type { Config } from 'tailwindcss'
-
+/** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./index.html",
@@ -124,5 +123,5 @@ export default {
     },
   },
   plugins: [],
-} satisfies Config
+}
 
diff --git a/tsconfig.json b/tsconfig.json
index c86691d..58a793f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,7 +28,7 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts", "env.d.ts", "scripts/**/*.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }