screenshots,
description: result.description || null,
translatedDescription: null,
- va: result.va || [],
- vntags: [],
+ va,
+ tags,
+ relations,
+ extlinks,
play_hours,
length_minute,
length_votes,
length_color,
book_length,
rating: result.rating || undefined,
+ average: result.average || undefined,
votecount: result.votecount || undefined,
released: result.released || undefined,
developers: developers.length > 0 ? developers : undefined,
platforms: result.platforms || undefined,
+ languages: result.languages || undefined,
+ olang: result.olang || undefined,
+ devstatus: result.devstatus,
}
// 检查代理并替换 URL
diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
new file mode 100644
index 0000000..db38c3b
--- /dev/null
+++ b/src/components/ImageViewer.vue
@@ -0,0 +1,817 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 图片加载失败
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
-
![]()
-
+
@@ -181,10 +180,53 @@
v-text-scroll
class="text-base font-bold text-gray-800 dark:text-white"
>
- {{ searchStore.vndbInfo.developers.join(', ') }}
+ {{ searchStore.vndbInfo.developers.map(d => d.name).join(', ') }}
+
+
+
+
+
+
+
+
开发状态
+
+ {{ formatDevStatus(searchStore.vndbInfo.devstatus) }}
+
+
+
+
+
+
+
+
原始语言
+
+ {{ formatLanguage(searchStore.vndbInfo.olang) }}
+
+
+
+
+
+
支持语言
+
+
+
+ {{ formatLanguage(lang) }}
+
+
+
+
+
+
标签
+ (按相关性排序)
+
+
+
+
+
+
+
+
+
+
+
+ {{ getTagDisplayName(tag) }}
+
+
+
+ 分类:
+
+ 内容
+
+
+ 技术
+
+
+ 色情
+
+
+
+
+
+
声优
+ ({{ searchStore.vndbInfo.va.length }})
+
+
+
+ 还有 {{ searchStore.vndbInfo.va.length - 10 }} 位声优...
+
+
+
+
+
相关作品
+
+
+
+ 还有 {{ searchStore.vndbInfo.relations.length - 8 }} 个相关作品...
+
+
@@ -269,13 +459,11 @@
游戏截图
-
![]()
-
+
@@ -301,6 +489,7 @@ import { useUIStore } from '@/stores/ui'
import { translateText } from '@/api/search'
import { playClick, playSuccess, playError, playToggle, playTransitionUp, playTransitionDown, playSwipe } from '@/composables/useSound'
import { animate } from '@/composables/useAnime'
+import { useImageViewer } from '@/composables/useImageViewer'
import {
BookOpen,
ChevronLeft,
@@ -321,10 +510,19 @@ import {
Maximize2,
Minimize2,
X,
+ Tag,
+ Mic,
+ Link2,
+ GitBranch,
+ Globe,
+ Gamepad2,
} from 'lucide-vue-next'
import { useWindowManager, type ResizeDirection } from '@/composables/useWindowManager'
import WindowResizeHandles from '@/components/WindowResizeHandles.vue'
+// 图片预览
+const imageViewer = useImageViewer()
+
// 进入/离开动画
function onEnter(el: Element, done: () => void) {
animate(el as HTMLElement, {
@@ -355,6 +553,12 @@ const translatedDescription = ref(null)
const showOriginal = ref(false)
const translateError = ref(false)
+// 标签翻译状态
+const isTranslatingTags = ref(false)
+const translatedTags = ref>(new Map())
+const showOriginalTags = ref(false)
+const translateTagsError = ref(false)
+
// 窗口管理
const modalRef = ref(null)
const { isFullscreen, windowStyle, startDrag, startResize, toggleFullscreen, reset } = useWindowManager({
@@ -395,6 +599,11 @@ watch(() => searchStore.vndbInfo, () => {
showOriginal.value = false
isTranslating.value = false
translateError.value = false
+ // 重置标签翻译状态
+ translatedTags.value = new Map()
+ showOriginalTags.value = false
+ isTranslatingTags.value = false
+ translateTagsError.value = false
})
// 监听打开状态
@@ -434,6 +643,64 @@ async function handleTranslate() {
}
}
+// 翻译标签
+async function handleTranslateTags() {
+ if (!searchStore.vndbInfo?.tags || searchStore.vndbInfo.tags.length === 0 || isTranslatingTags.value) {
+ return
+ }
+
+ playClick()
+ isTranslatingTags.value = true
+ translateTagsError.value = false
+
+ try {
+ // 收集所有标签名称，用换行符分隔
+ const tagNames = searchStore.vndbInfo.tags.map(tag => tag.name)
+ const textToTranslate = tagNames.join('\n')
+
+ const translated = await translateText(textToTranslate)
+ if (translated) {
+ // 解析翻译结果，按换行符分割
+ const translatedNames = translated.split('\n').map(s => s.trim()).filter(s => s)
+
+ // 创建映射
+ const newMap = new Map()
+ tagNames.forEach((original, index) => {
+ if (translatedNames[index]) {
+ newMap.set(original, translatedNames[index])
+ }
+ })
+
+ translatedTags.value = newMap
+ showOriginalTags.value = false
+ translateTagsError.value = false
+ playSuccess()
+ } else {
+ translateTagsError.value = true
+ playError()
+ }
+ } catch {
+ translateTagsError.value = true
+ playError()
+ } finally {
+ isTranslatingTags.value = false
+ }
+}
+
+// 切换显示原始/翻译标签
+function toggleTagsLanguage() {
+ playToggle()
+ showOriginalTags.value = !showOriginalTags.value
+}
+
+// 获取标签显示名称
+function getTagDisplayName(tag: { name: string }): string {
+ if (showOriginalTags.value || translatedTags.value.size === 0) {
+ return tag.name
+ }
+ return translatedTags.value.get(tag.name) || tag.name
+}
+
function closePanel() {
playTransitionDown()
// 关闭面板
@@ -446,6 +713,37 @@ function handleImageError(event: Event) {
img.style.display = 'none'
}
+// 打开图片画廊
+function openGallery(startIndex: number) {
+ if (!searchStore.vndbInfo) {
+ return
+ }
+
+ const images = []
+
+ // 添加封面
+ if (searchStore.vndbInfo.mainImageUrl) {
+ images.push({
+ src: searchStore.vndbInfo.mainImageUrl,
+ caption: `${searchStore.vndbInfo.mainName} - 游戏封面`,
+ })
+ }
+
+ // 添加截图
+ if (searchStore.vndbInfo.screenshots) {
+ searchStore.vndbInfo.screenshots.forEach((screenshot, index) => {
+ images.push({
+ src: screenshot,
+ caption: `${searchStore.vndbInfo!.mainName} - 截图 ${index + 1}`,
+ })
+ })
+ }
+
+ if (images.length > 0) {
+ imageViewer.open(images, startIndex)
+ }
+}
+
// 格式化日期
function formatDate(dateString: string): string {
if (!dateString) {return '未知'}
@@ -497,6 +795,93 @@ function formatPlatform(platform: string): string {
return platformMap[platform] || platform.toUpperCase()
}
+
+// 格式化语言名称
+function formatLanguage(lang: string): string {
+ const langMap: Record = {
+ 'ja': '日语',
+ 'en': '英语',
+ 'zh-Hans': '简体中文',
+ 'zh-Hant': '繁体中文',
+ 'zh': '中文',
+ 'ko': '韩语',
+ 'ru': '俄语',
+ 'de': '德语',
+ 'fr': '法语',
+ 'es': '西班牙语',
+ 'it': '意大利语',
+ 'pt-br': '葡萄牙语(巴西)',
+ 'pt-pt': '葡萄牙语',
+ 'vi': '越南语',
+ 'th': '泰语',
+ 'id': '印尼语',
+ 'pl': '波兰语',
+ 'tr': '土耳其语',
+ 'uk': '乌克兰语',
+ 'cs': '捷克语',
+ 'hu': '匈牙利语',
+ 'ar': '阿拉伯语',
+ }
+
+ return langMap[lang] || lang.toUpperCase()
+}
+
+// 格式化开发状态
+function formatDevStatus(status: number): string {
+ const statusMap: Record = {
+ 0: '已完成',
+ 1: '开发中',
+ 2: '已取消',
+ }
+ return statusMap[status] || '未知'
+}
+
+// 获取开发状态颜色
+function getDevStatusColor(status: number): string {
+ const colorMap: Record = {
+ 0: 'text-emerald-600 dark:text-emerald-400',
+ 1: 'text-amber-600 dark:text-amber-400',
+ 2: 'text-red-600 dark:text-red-400',
+ }
+ return colorMap[status] || 'text-gray-600 dark:text-gray-400'
+}
+
+// 获取标签分类样式
+function getTagCategoryClass(category: string): string {
+ const categoryMap: Record = {
+ 'cont': 'bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-400',
+ 'tech': 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
+ 'ero': 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400',
+ }
+ return categoryMap[category] || 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-400'
+}
+
+// 格式化标签分类名称
+function formatTagCategory(category: string): string {
+ const categoryMap: Record = {
+ 'cont': '内容',
+ 'tech': '技术',
+ 'ero': '色情',
+ }
+ return categoryMap[category] || category
+}
+
+// 格式化关系类型
+function formatRelation(relation: string): string {
+ const relationMap: Record = {
+ 'seq': '续作',
+ 'preq': '前作',
+ 'set': '同一设定',
+ 'alt': '替代版本',
+ 'char': '角色共享',
+ 'side': '外传',
+ 'par': '父作品',
+ 'fan': '同人作品',
+ 'orig': '原作',
+ 'ser': '同系列',
+ }
+ return relationMap[relation] || relation
+}