From 77b381b8d0c5a79bf81b489e479094012e64f86c Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sat, 17 Oct 2026 21:24:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE=E8=82=A4?=
 =?UTF-8?q?=E7=AB=99=E8=B5=84=E6=BA=90=E4=B8=8B=E8=BD=BD=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- API 层补充下载列表、数量与分类接口。
- SkinSiteDownloadsView：按分类筛选下载项，展示文件名、描述、
  上传者与状态标签，点击后用系统浏览器打开下载地址。
- 主页导航卡的「下载」改为打开该视图，其余入口仍走浏览器。
---
 .../ui/skin-site/SkinSiteDownloadsView.vue    | 198 ++++++++++++++++++
 .../components/ui/skin-site/SkinSiteHome.vue  |   6 +-
 .../ui/skin-site/SkinSiteNavCards.vue         |  12 +-
 .../app-frontend/src/helpers/skin-site-api.ts |  52 +++++
 4 files changed, 263 insertions(+), 5 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
new file mode 100644
index 0000000..7c22e2f
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref } from 'vue'
+
+import {
+	skinSiteDownloadCategories,
+	type SkinSiteDownloadCategory,
+	type SkinSiteDownloadItem,
+	skinSiteDownloadList,
+	type SkinSiteDownloadStatus,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.downloads.title', defaultMessage: 'Downloads' },
+	subtitle: {
+		id: 'app.skin-site.downloads.subtitle',
+		defaultMessage: 'Files shared by the server. Pick a category to narrow the list.',
+	},
+	back: { id: 'app.skin-site.downloads.back', defaultMessage: 'Back to home' },
+	all: { id: 'app.skin-site.downloads.all', defaultMessage: 'All' },
+	empty: { id: 'app.skin-site.downloads.empty', defaultMessage: 'Nothing to download yet.' },
+	loading: { id: 'app.skin-site.downloads.loading', defaultMessage: 'Loading…' },
+	failed: { id: 'app.skin-site.downloads.failed', defaultMessage: 'Could not load downloads.' },
+	goDownload: { id: 'app.skin-site.downloads.go', defaultMessage: 'Download' },
+	uploader: { id: 'app.skin-site.downloads.uploader', defaultMessage: 'by {name}' },
+	statusOk: { id: 'app.skin-site.downloads.status.ok', defaultMessage: 'OK' },
+	statusNew: { id: 'app.skin-site.downloads.status.new', defaultMessage: 'New' },
+	statusLegacy: { id: 'app.skin-site.downloads.status.legacy', defaultMessage: 'Legacy' },
+	statusOutdated: { id: 'app.skin-site.downloads.status.outdated', defaultMessage: 'Outdated' },
+	statusRemoval: { id: 'app.skin-site.downloads.status.removal', defaultMessage: 'Removal' },
+})
+
+const emit = defineEmits<{ (e: 'back'): void }>()
+
+const items = ref<SkinSiteDownloadItem[]>([])
+const categories = ref<SkinSiteDownloadCategory[]>([])
+const selectedCategory = ref<string | null>(null)
+const loading = ref(true)
+const failed = ref(false)
+
+const filtered = computed(() =>
+	selectedCategory.value
+		? items.value.filter((item) => item.category.includes(selectedCategory.value!))
+		: items.value,
+)
+
+function statusLabel(status: SkinSiteDownloadStatus): string {
+	switch (status) {
+		case 'NEW':
+			return formatMessage(messages.statusNew)
+		case 'LEGACY':
+			return formatMessage(messages.statusLegacy)
+		case 'OUTDATED':
+			return formatMessage(messages.statusOutdated)
+		case 'REMOVAL':
+			return formatMessage(messages.statusRemoval)
+		default:
+			return formatMessage(messages.statusOk)
+	}
+}
+
+async function openUrl(url: string) {
+	const { openUrl: open } = await import('@tauri-apps/plugin-opener')
+	await open(url)
+}
+
+function download(item: SkinSiteDownloadItem) {
+	const route = item.routes?.[0]
+	void openUrl(route?.url ?? item.url)
+}
+
+async function load() {
+	loading.value = true
+	failed.value = false
+	try {
+		const [listResult, categoryResult] = await Promise.all([
+			skinSiteDownloadList(),
+			skinSiteDownloadCategories(),
+		])
+		if (!listResult.success) throw new Error(listResult.errorMessage)
+		items.value = listResult.payload ?? []
+		if (categoryResult.success) categories.value = categoryResult.payload ?? []
+	} catch (error) {
+		failed.value = true
+		handleError(error)
+	} finally {
+		loading.value = false
+	}
+}
+
+onMounted(load)
+</script>
+<template>
+	<div class="flex flex-col gap-4">
+		<button
+			type="button"
+			class="flex w-fit items-center gap-1 rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+			@click="emit('back')"
+		>
+			← {{ formatMessage(messages.back) }}
+		</button>
+
+		<header class="flex flex-col gap-1">
+			<h1 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h1>
+			<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.subtitle) }}</p>
+		</header>
+
+		<div v-if="categories.length" class="flex flex-wrap gap-2">
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold transition-colors"
+				:class="
+					selectedCategory === null
+						? 'bg-brand text-contrast'
+						: 'bg-button-bg text-secondary hover:brightness-110'
+				"
+				@click="selectedCategory = null"
+			>
+				{{ formatMessage(messages.all) }}
+			</button>
+			<button
+				v-for="category in categories"
+				:key="category.id"
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold transition-colors"
+				:class="
+					selectedCategory === category.name
+						? 'bg-brand text-contrast'
+						: 'bg-button-bg text-secondary hover:brightness-110'
+				"
+				@click="selectedCategory = category.name"
+			>
+				{{ category.name }}
+			</button>
+		</div>
+
+		<div v-if="loading" class="flex items-center gap-2 text-sm text-secondary">
+			<SpinnerIcon class="size-4 animate-spin" />
+			{{ formatMessage(messages.loading) }}
+		</div>
+		<p v-else-if="failed" class="m-0 text-sm text-secondary">
+			{{ formatMessage(messages.failed) }}
+		</p>
+		<p v-else-if="!filtered.length" class="m-0 text-sm text-secondary">
+			{{ formatMessage(messages.empty) }}
+		</p>
+		<div v-else class="flex flex-col gap-2">
+			<div
+				v-for="item in filtered"
+				:key="item.id"
+				class="flex flex-wrap items-center gap-3 rounded-xl border border-solid border-surface-5 bg-bg-raised p-3"
+			>
+				<div class="flex min-w-0 flex-1 flex-col gap-1">
+					<div class="flex flex-wrap items-center gap-2">
+						<span class="min-w-0 truncate text-sm font-semibold text-contrast">
+							{{ item.filename }}
+						</span>
+						<span
+							v-for="status in item.status"
+							:key="status"
+							class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold"
+							:class="{
+								'bg-green text-contrast': status === 'NEW',
+								'bg-yellow text-contrast': status === 'LEGACY',
+								'bg-red text-contrast': status === 'OUTDATED' || status === 'REMOVAL',
+								'bg-button-bg text-secondary':
+									status !== 'NEW' &&
+									status !== 'LEGACY' &&
+									status !== 'OUTDATED' &&
+									status !== 'REMOVAL',
+							}"
+						>
+							{{ statusLabel(status) }}
+						</span>
+					</div>
+					<span v-if="item.description" class="truncate text-xs text-secondary">
+						{{ item.description }}
+					</span>
+					<span v-if="item.uploader" class="text-xs text-secondary">
+						{{ formatMessage(messages.uploader, { name: item.uploader }) }}
+					</span>
+				</div>
+				<button
+					type="button"
+					class="flex shrink-0 items-center gap-1 rounded-full bg-brand px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+					@click="download(item)"
+				>
+					<DownloadIcon class="size-3.5" />
+					{{ formatMessage(messages.goDownload) }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteHome.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteHome.vue
index 1f5e473..88196dd 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteHome.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteHome.vue
@@ -6,6 +6,7 @@ import { ref } from 'vue'
 import SkinSiteAccountCard from './SkinSiteAccountCard.vue'
 import SkinSiteAnnouncements from './SkinSiteAnnouncements.vue'
 import SkinSiteDonationCard from './SkinSiteDonationCard.vue'
+import SkinSiteDownloadsView from './SkinSiteDownloadsView.vue'
 import SkinSiteLoginModal from './SkinSiteLoginModal.vue'
 import SkinSiteNavCards from './SkinSiteNavCards.vue'
 import SkinSiteProfileModal from './SkinSiteProfileModal.vue'
@@ -27,7 +28,7 @@ const messages = defineMessages({
 const YGGDRASIL_URL = 'https://skin.starlight.cool/yggdrasil'
 const loginModal = ref<InstanceType<typeof SkinSiteLoginModal>>()
 const profileModal = ref<InstanceType<typeof SkinSiteProfileModal>>()
-const view = ref<'home' | 'players'>('home')
+const view = ref<'home' | 'players' | 'downloads' | 'review' | 'bugs'>('home')
 
 async function copyAddress() {
 	try {
@@ -43,6 +44,7 @@ async function copyAddress() {
 	<div class="flex h-full min-h-0 w-full flex-col overflow-y-auto">
 		<div class="mx-auto flex w-full max-w-5xl flex-col gap-6 p-6">
 			<SkinSiteProfileView v-if="view === 'players'" @back="view = 'home'" />
+			<SkinSiteDownloadsView v-else-if="view === 'downloads'" @back="view = 'home'" />
 
 			<template v-else>
 				<header class="flex flex-col items-center gap-1 text-center">
@@ -57,7 +59,7 @@ async function copyAddress() {
 				/>
 
 				<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-					<SkinSiteNavCards />
+					<SkinSiteNavCards @navigate="(v) => (view = v)" />
 					<SkinSiteAnnouncements />
 				</div>
 
diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteNavCards.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteNavCards.vue
index 2f63a2c..e1c36d5 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteNavCards.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteNavCards.vue
@@ -12,6 +12,8 @@ import type { Component } from 'vue'
 
 const { formatMessage } = useVIntl()
 
+const emit = defineEmits<{ (e: 'navigate', view: 'downloads' | 'review' | 'bugs'): void }>()
+
 const messages = defineMessages({
 	title: { id: 'app.skin-site.home.nav.title', defaultMessage: 'Skin site' },
 	download: { id: 'app.skin-site.home.nav.download', defaultMessage: 'Downloads' },
@@ -101,8 +103,12 @@ const items: NavItem[] = [
 	},
 ]
 
-function open(href: string) {
-	void import('@tauri-apps/plugin-opener').then(({ openUrl }) => openUrl(href))
+function open(item: NavItem) {
+	if (item.id === 'download' || item.id === 'review' || item.id === 'bugs') {
+		emit('navigate', item.id === 'download' ? 'downloads' : item.id)
+		return
+	}
+	void import('@tauri-apps/plugin-opener').then(({ openUrl }) => openUrl(item.href))
 }
 </script>
 
@@ -115,7 +121,7 @@ function open(href: string) {
 				:key="item.id"
 				type="button"
 				class="flex flex-col items-start gap-1 rounded-xl border border-solid border-surface-5 bg-bg-raised p-3 text-left transition-colors hover:bg-button-bg"
-				@click="open(item.href)"
+				@click="open(item)"
 			>
 				<component :is="item.icon" class="size-5 text-brand" />
 				<span class="text-sm font-semibold text-contrast">{{ item.title }}</span>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 0879bc7..71bfb36 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -480,3 +480,55 @@ export async function skinSiteUploadAvatar(blob: Blob): Promise<SkinSiteResponse
 	}
 	return processResponse<string>(response)
 }
+// ---------------------------------------------------------------------------
+// Downloads
+// ---------------------------------------------------------------------------
+
+export type SkinSiteDownloadStatus = 'OK' | 'NEW' | 'LEGACY' | 'OUTDATED' | 'REMOVAL'
+
+export interface SkinSiteDownloadRoute {
+	name?: string | null
+	url: string
+}
+
+export interface SkinSiteDownloadItem {
+	id: number
+	uploader: string
+	url: string
+	routes: SkinSiteDownloadRoute[]
+	filename: string
+	description: string
+	status: SkinSiteDownloadStatus[]
+	category: string[]
+}
+
+export interface SkinSiteDownloadCategory {
+	id: number
+	name: string
+}
+
+export function skinSiteDownloadList(options?: {
+	limit?: number
+	offset?: number
+	category?: string
+}): Promise<SkinSiteResponse<SkinSiteDownloadItem[]>> {
+	const query = new URLSearchParams({
+		limit: String(options?.limit ?? 200),
+		offset: String(options?.offset ?? 0),
+	})
+	if (options?.category) query.set('category', options.category)
+	return skinSiteRequest<SkinSiteDownloadItem[]>(`download/list?${query.toString()}`, {
+		auth: false,
+	})
+}
+
+export function skinSiteDownloadCount(category?: string): Promise<SkinSiteResponse<number>> {
+	const suffix = category ? `?category=${encodeURIComponent(category)}` : ''
+	return skinSiteRequest<number>(`download/count${suffix}`, { auth: false })
+}
+
+export function skinSiteDownloadCategories(): Promise<
+	SkinSiteResponse<SkinSiteDownloadCategory[]>
+> {
+	return skinSiteRequest<SkinSiteDownloadCategory[]>('download/category/list', { auth: false })
+}