From 47c4a3973d84dda43cdb8f52c83b30fc143d4f77 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 07:37:15 +0800
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/skin-site/SkinSiteAdminView.vue        |   2 +
 .../ui/skin-site/admin/AdminDownloadsPage.vue | 576 ++++++++++++++++++
 .../app-frontend/src/helpers/skin-site-api.ts | 101 +++
 .../app-frontend/src/locales/en-US/index.json |  34 +-
 .../app-frontend/src/locales/zh-CN/index.json |  34 +-
 scripts/axolotl/i18n-check.mjs                |   1 +
 6 files changed, 746 insertions(+), 2 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/AdminDownloadsPage.vue

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
index bff6268..498c808 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
@@ -5,6 +5,7 @@ import { computed, ref } from 'vue'
 import { skinSiteUser } from '@/composables/skin-site-session'
 
 import AdminBroadcastPage from './admin/AdminBroadcastPage.vue'
+import AdminDownloadsPage from './admin/AdminDownloadsPage.vue'
 import AdminLauncherPage from './admin/AdminLauncherPage.vue'
 import AdminPlayersPage from './admin/AdminPlayersPage.vue'
 import AdminReviewPage from './admin/AdminReviewPage.vue'
@@ -164,6 +165,7 @@ const current = ref<AdminKey>('summary')
 				<AdminPlayersPage v-else-if="current === 'players'" />
 				<AdminReviewPage v-else-if="current === 'review'" />
 				<AdminLauncherPage v-else-if="current === 'launcher'" />
+				<AdminDownloadsPage v-else-if="current === 'downloads'" />
 				<p v-else class="m-0 text-sm text-secondary">{{ current }}</p>
 			</section>
 		</div>
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminDownloadsPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminDownloadsPage.vue
new file mode 100644
index 0000000..1511e4a
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminDownloadsPage.vue
@@ -0,0 +1,576 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref } from 'vue'
+
+import {
+	skinSiteAddDownloadCategory,
+	skinSiteAddDownloadItem,
+	skinSiteBindDownloadCategory,
+	skinSiteDeleteDownloadCategory,
+	skinSiteDeleteDownloadItem,
+	skinSiteDownloadCategories,
+	type SkinSiteDownloadCategory,
+	type SkinSiteDownloadItem,
+	skinSiteDownloadItemCount,
+	skinSiteDownloadItems,
+	type SkinSiteDownloadRoute,
+	type SkinSiteDownloadStatus,
+	skinSiteUnbindDownloadCategory,
+	skinSiteUpdateDownloadItem,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.admin.downloads.title', defaultMessage: 'Downloads' },
+	loading: { id: 'app.skin-site.admin.downloads.loading', defaultMessage: 'Loading…' },
+	failed: {
+		id: 'app.skin-site.admin.downloads.failed',
+		defaultMessage: 'Could not load downloads.',
+	},
+	empty: { id: 'app.skin-site.admin.downloads.empty', defaultMessage: 'No download items.' },
+	categories: { id: 'app.skin-site.admin.downloads.categories', defaultMessage: 'Categories' },
+	all: { id: 'app.skin-site.admin.downloads.all', defaultMessage: 'All items' },
+	addCategory: { id: 'app.skin-site.admin.downloads.add-category', defaultMessage: 'Add' },
+	categoryName: {
+		id: 'app.skin-site.admin.downloads.category-name',
+		defaultMessage: 'Category name',
+	},
+	removeCategory: {
+		id: 'app.skin-site.admin.downloads.remove-category',
+		defaultMessage: 'Remove',
+	},
+	total: { id: 'app.skin-site.admin.downloads.total', defaultMessage: '{count} items' },
+	addItem: { id: 'app.skin-site.admin.downloads.add-item', defaultMessage: 'New item' },
+	save: { id: 'app.skin-site.admin.downloads.save', defaultMessage: 'Save' },
+	cancel: { id: 'app.skin-site.admin.downloads.cancel', defaultMessage: 'Cancel' },
+	edit: { id: 'app.skin-site.admin.downloads.edit', defaultMessage: 'Edit' },
+	remove: { id: 'app.skin-site.admin.downloads.remove', defaultMessage: 'Delete' },
+	filename: { id: 'app.skin-site.admin.downloads.filename', defaultMessage: 'File name' },
+	description: {
+		id: 'app.skin-site.admin.downloads.description',
+		defaultMessage: 'Description',
+	},
+	routes: { id: 'app.skin-site.admin.downloads.routes', defaultMessage: 'Download routes' },
+	routeName: { id: 'app.skin-site.admin.downloads.route-name', defaultMessage: 'Name' },
+	routeUrl: { id: 'app.skin-site.admin.downloads.route-url', defaultMessage: 'URL' },
+	addRoute: { id: 'app.skin-site.admin.downloads.add-route', defaultMessage: 'Add route' },
+	removeRoute: { id: 'app.skin-site.admin.downloads.remove-route', defaultMessage: 'Remove' },
+	statuses: { id: 'app.skin-site.admin.downloads.statuses', defaultMessage: 'Statuses' },
+	bindCategory: {
+		id: 'app.skin-site.admin.downloads.bind-category',
+		defaultMessage: 'Categories',
+	},
+	uploader: { id: 'app.skin-site.admin.downloads.uploader', defaultMessage: 'by {name}' },
+	created: { id: 'app.skin-site.admin.downloads.created', defaultMessage: 'Item created.' },
+	updated: { id: 'app.skin-site.admin.downloads.updated', defaultMessage: 'Item updated.' },
+	deleted: { id: 'app.skin-site.admin.downloads.deleted', defaultMessage: 'Item deleted.' },
+	categoryAdded: {
+		id: 'app.skin-site.admin.downloads.category-added',
+		defaultMessage: 'Category added.',
+	},
+	categoryDeleted: {
+		id: 'app.skin-site.admin.downloads.category-deleted',
+		defaultMessage: 'Category deleted.',
+	},
+	confirmDeleteItem: {
+		id: 'app.skin-site.admin.downloads.confirm-delete-item',
+		defaultMessage: 'Delete “{name}”? This cannot be undone.',
+	},
+	confirmDeleteCategory: {
+		id: 'app.skin-site.admin.downloads.confirm-delete-category',
+		defaultMessage: 'Delete category “{name}”?',
+	},
+})
+
+const STATUS_OPTIONS: SkinSiteDownloadStatus[] = ['OK', 'NEW', 'LEGACY', 'OUTDATED', 'REMOVAL']
+
+const items = ref<SkinSiteDownloadItem[]>([])
+const categories = ref<SkinSiteDownloadCategory[]>([])
+const total = ref(0)
+const loading = ref(true)
+const failed = ref(false)
+const activeCategory = ref<string>('')
+
+const newCategoryName = ref('')
+const categoryWorking = ref(false)
+
+const editorOpen = ref(false)
+const editingId = ref<number | null>(null)
+const saving = ref(false)
+const deletingId = ref<number | null>(null)
+
+const form = ref({
+	filename: '',
+	description: '',
+	status: [] as SkinSiteDownloadStatus[],
+	routes: [{ name: '', url: '' }] as Array<{ name: string; url: string }>,
+	selectedCategories: [] as number[],
+})
+
+const canSave = computed(
+	() =>
+		form.value.filename.trim().length > 0 &&
+		form.value.routes.some((r) => r.url.trim().length > 0) &&
+		!saving.value,
+)
+
+function resetForm() {
+	form.value = {
+		filename: '',
+		description: '',
+		status: [],
+		routes: [{ name: '', url: '' }],
+		selectedCategories: [],
+	}
+	editingId.value = null
+}
+
+function openCreate() {
+	resetForm()
+	editorOpen.value = true
+}
+
+function openEdit(item: SkinSiteDownloadItem) {
+	form.value = {
+		filename: item.filename,
+		description: item.description,
+		status: [...item.status],
+		routes: item.routes.length
+			? item.routes.map((r) => ({ name: r.name ?? '', url: r.url }))
+			: [{ name: '', url: '' }],
+		selectedCategories: categories.value
+			.filter((c) => item.category.includes(c.name))
+			.map((c) => c.id),
+	}
+	editingId.value = item.id
+	editorOpen.value = true
+}
+
+function closeEditor() {
+	editorOpen.value = false
+	resetForm()
+}
+
+function addRouteRow() {
+	form.value.routes.push({ name: '', url: '' })
+}
+
+function removeRouteRow(index: number) {
+	if (form.value.routes.length <= 1) return
+	form.value.routes.splice(index, 1)
+}
+
+function toggleStatus(status: SkinSiteDownloadStatus) {
+	const i = form.value.status.indexOf(status)
+	if (i >= 0) form.value.status.splice(i, 1)
+	else form.value.status.push(status)
+}
+
+async function loadCategories() {
+	try {
+		const result = await skinSiteDownloadCategories()
+		if (result.success) categories.value = result.payload ?? []
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function loadItems() {
+	loading.value = true
+	failed.value = false
+	try {
+		const listResult = await skinSiteDownloadItems({
+			limit: 200,
+			offset: 0,
+			category: activeCategory.value || undefined,
+		})
+		if (!listResult.success) throw new Error(listResult.errorMessage)
+		items.value = listResult.payload ?? []
+		const countResult = await skinSiteDownloadItemCount(activeCategory.value || undefined)
+		if (countResult.success && typeof countResult.payload === 'number') {
+			total.value = countResult.payload
+		}
+	} catch (error) {
+		failed.value = true
+		handleError(error)
+	} finally {
+		loading.value = false
+	}
+}
+
+async function selectCategory(name: string) {
+	activeCategory.value = name
+	await loadItems()
+}
+
+async function addCategory() {
+	const name = newCategoryName.value.trim()
+	if (!name || categoryWorking.value) return
+	categoryWorking.value = true
+	try {
+		const result = await skinSiteAddDownloadCategory(name)
+		if (!result.success) throw new Error(result.errorMessage)
+		newCategoryName.value = ''
+		addNotification({ type: 'success', title: formatMessage(messages.categoryAdded) })
+		await loadCategories()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		categoryWorking.value = false
+	}
+}
+
+async function removeCategory(category: SkinSiteDownloadCategory) {
+	if (categoryWorking.value) return
+	if (!window.confirm(formatMessage(messages.confirmDeleteCategory, { name: category.name })))
+		return
+	categoryWorking.value = true
+	try {
+		const result = await skinSiteDeleteDownloadCategory(category.id)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.categoryDeleted) })
+		if (activeCategory.value === category.name) activeCategory.value = ''
+		await loadCategories()
+		await loadItems()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		categoryWorking.value = false
+	}
+}
+
+async function save() {
+	if (!canSave.value) return
+	saving.value = true
+	try {
+		const routes: SkinSiteDownloadRoute[] = form.value.routes
+			.filter((r) => r.url.trim())
+			.map((r) => ({ name: r.name.trim() || null, url: r.url.trim() }))
+		const payload = {
+			routes,
+			filename: form.value.filename.trim(),
+			description: form.value.description,
+			status: form.value.status,
+		}
+		const result =
+			editingId.value === null
+				? await skinSiteAddDownloadItem(payload)
+				: await skinSiteUpdateDownloadItem(editingId.value, payload)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({
+			type: 'success',
+			title: formatMessage(editingId.value === null ? messages.created : messages.updated),
+		})
+		closeEditor()
+		await loadItems()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		saving.value = false
+	}
+}
+
+async function remove(item: SkinSiteDownloadItem) {
+	if (deletingId.value !== null) return
+	if (!window.confirm(formatMessage(messages.confirmDeleteItem, { name: item.filename }))) return
+	deletingId.value = item.id
+	try {
+		const result = await skinSiteDeleteDownloadItem(item.id)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.deleted) })
+		await loadItems()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		deletingId.value = null
+	}
+}
+
+async function toggleItemCategory(item: SkinSiteDownloadItem, category: SkinSiteDownloadCategory) {
+	try {
+		const bound = item.category.includes(category.name)
+		const result = bound
+			? await skinSiteUnbindDownloadCategory(item.id, category.id)
+			: await skinSiteBindDownloadCategory(item.id, category.id)
+		if (!result.success) throw new Error(result.errorMessage)
+		await loadItems()
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+onMounted(async () => {
+	await loadCategories()
+	await loadItems()
+})
+</script>
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-2">
+			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+			<span class="text-xs text-secondary">
+				{{ formatMessage(messages.total, { count: total }) }}
+			</span>
+			<button
+				type="button"
+				class="ml-auto rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+				@click="openCreate"
+			>
+				{{ formatMessage(messages.addItem) }}
+			</button>
+		</div>
+
+		<div class="flex min-h-0 gap-4">
+			<aside class="flex w-56 shrink-0 flex-col gap-2">
+				<span class="text-xs font-bold tracking-wide text-secondary uppercase">
+					{{ formatMessage(messages.categories) }}
+				</span>
+				<button
+					type="button"
+					class="rounded-lg px-2 py-1.5 text-left text-xs font-semibold"
+					:class="
+						activeCategory === ''
+							? 'bg-brand text-contrast'
+							: 'text-secondary hover:bg-button-bg hover:text-contrast'
+					"
+					@click="selectCategory('')"
+				>
+					{{ formatMessage(messages.all) }}
+				</button>
+				<div v-for="category in categories" :key="category.id" class="flex items-center gap-1">
+					<button
+						type="button"
+						class="min-w-0 flex-1 truncate rounded-lg px-2 py-1.5 text-left text-xs font-semibold"
+						:class="
+							activeCategory === category.name
+								? 'bg-brand text-contrast'
+								: 'text-secondary hover:bg-button-bg hover:text-contrast'
+						"
+						@click="selectCategory(category.name)"
+					>
+						{{ category.name }}
+					</button>
+					<button
+						type="button"
+						class="shrink-0 rounded px-1 text-[10px] text-secondary hover:text-red"
+						:disabled="categoryWorking"
+						@click="removeCategory(category)"
+					>
+						×
+					</button>
+				</div>
+				<div class="flex items-center gap-1 pt-1">
+					<input
+						v-model="newCategoryName"
+						type="text"
+						:placeholder="formatMessage(messages.categoryName)"
+						class="min-w-0 flex-1 rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+						@keyup.enter="addCategory"
+					/>
+					<button
+						type="button"
+						class="shrink-0 rounded-full bg-button-bg px-2 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="categoryWorking || !newCategoryName.trim()"
+						@click="addCategory"
+					>
+						{{ formatMessage(messages.addCategory) }}
+					</button>
+				</div>
+			</aside>
+
+			<div class="flex min-w-0 flex-1 flex-col gap-2">
+				<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="!items.length" class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+					{{ formatMessage(messages.empty) }}
+				</p>
+				<div v-else class="flex flex-col gap-2">
+					<div
+						v-for="item in items"
+						:key="item.id"
+						class="flex flex-col gap-2 rounded-xl bg-bg-raised p-3"
+					>
+						<div class="flex flex-wrap items-center gap-2">
+							<span class="shrink-0 text-xs text-secondary">#{{ item.id }}</span>
+							<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">
+								{{ item.filename }}
+							</span>
+							<span
+								v-for="s in item.status"
+								:key="s"
+								class="shrink-0 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+							>
+								{{ s }}
+							</span>
+							<span class="shrink-0 text-xs text-secondary">
+								{{ formatMessage(messages.uploader, { name: item.uploader }) }}
+							</span>
+						</div>
+						<div v-if="item.description" class="text-xs text-secondary">
+							{{ item.description }}
+						</div>
+						<div class="flex flex-wrap gap-1">
+							<span
+								v-for="route in item.routes"
+								:key="route.url"
+								class="rounded bg-bg px-2 py-0.5 font-mono text-[10px] text-secondary"
+							>
+								{{ route.name ? route.name + ': ' : '' }}{{ route.url }}
+							</span>
+						</div>
+						<div class="flex flex-wrap items-center gap-2">
+							<span class="text-xs text-secondary">
+								{{ formatMessage(messages.bindCategory) }}:
+							</span>
+							<button
+								v-for="category in categories"
+								:key="category.id"
+								type="button"
+								class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+								:class="
+									item.category.includes(category.name)
+										? 'bg-brand text-contrast'
+										: 'bg-button-bg text-secondary hover:text-contrast'
+								"
+								@click="toggleItemCategory(item, category)"
+							>
+								{{ category.name }}
+							</button>
+						</div>
+						<div class="flex flex-wrap gap-2">
+							<button
+								type="button"
+								class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+								@click="openEdit(item)"
+							>
+								{{ formatMessage(messages.edit) }}
+							</button>
+							<button
+								type="button"
+								class="rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+								:disabled="deletingId !== null"
+								@click="remove(item)"
+							>
+								{{ formatMessage(messages.remove) }}
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div
+			v-if="editorOpen"
+			class="flex flex-col gap-3 rounded-xl border border-solid border-surface-5 bg-bg-raised p-4"
+		>
+			<label class="flex flex-col gap-1">
+				<span class="text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.filename) }}
+				</span>
+				<input
+					v-model="form.filename"
+					type="text"
+					class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+				/>
+			</label>
+
+			<label class="flex flex-col gap-1">
+				<span class="text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.description) }}
+				</span>
+				<textarea
+					v-model="form.description"
+					rows="3"
+					class="w-full resize-y rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+				/>
+			</label>
+
+			<div class="flex flex-col gap-1">
+				<span class="text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.statuses) }}
+				</span>
+				<div class="flex flex-wrap gap-2">
+					<button
+						v-for="status in STATUS_OPTIONS"
+						:key="status"
+						type="button"
+						class="rounded-full px-3 py-1 text-xs font-semibold"
+						:class="
+							form.status.includes(status)
+								? 'bg-brand text-contrast'
+								: 'bg-button-bg text-secondary'
+						"
+						@click="toggleStatus(status)"
+					>
+						{{ status }}
+					</button>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<span class="text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.routes) }}
+				</span>
+				<div
+					v-for="(route, idx) in form.routes"
+					:key="idx"
+					class="flex flex-wrap items-center gap-2"
+				>
+					<input
+						v-model="route.name"
+						type="text"
+						:placeholder="formatMessage(messages.routeName)"
+						class="w-32 rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+					/>
+					<input
+						v-model="route.url"
+						type="text"
+						:placeholder="formatMessage(messages.routeUrl)"
+						class="min-w-0 flex-1 rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+					/>
+					<button
+						type="button"
+						class="shrink-0 rounded-full bg-button-bg px-2 py-1 text-[10px] font-semibold text-secondary hover:text-red disabled:opacity-50"
+						:disabled="form.routes.length <= 1"
+						@click="removeRouteRow(idx)"
+					>
+						{{ formatMessage(messages.removeRoute) }}
+					</button>
+				</div>
+				<button
+					type="button"
+					class="w-fit rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-secondary hover:brightness-110"
+					@click="addRouteRow"
+				>
+					{{ formatMessage(messages.addRoute) }}
+				</button>
+			</div>
+
+			<div class="flex justify-end gap-2">
+				<button
+					type="button"
+					class="rounded-full bg-button-bg px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+					@click="closeEditor"
+				>
+					{{ formatMessage(messages.cancel) }}
+				</button>
+				<button
+					type="button"
+					class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast disabled:opacity-50"
+					:disabled="!canSave"
+					@click="save"
+				>
+					{{ formatMessage(messages.save) }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 5f322ce..88c2c21 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -1290,3 +1290,104 @@ export async function skinSiteUploadLauncherRelease(
 	}
 	return launcherUploadError('上传超时，请刷新版本列表确认结果。')
 }
+
+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 interface SkinSiteDownloadItemInput {
+	routes: SkinSiteDownloadRoute[]
+	filename: string
+	description: string
+	status: SkinSiteDownloadStatus[]
+}
+
+export function skinSiteDownloadItems(params?: {
+	limit?: number
+	offset?: number
+	category?: string
+}): Promise<SkinSiteResponse<SkinSiteDownloadItem[]>> {
+	const query = new URLSearchParams({
+		limit: String(params?.limit ?? 200),
+		offset: String(params?.offset ?? 0),
+	})
+	if (params?.category?.trim()) query.set('category', params.category.trim())
+	return skinSiteRequest<SkinSiteDownloadItem[]>('download/list?' + query.toString())
+}
+
+export function skinSiteDownloadItemCount(category?: string): Promise<SkinSiteResponse<number>> {
+	const query = new URLSearchParams()
+	if (category?.trim()) query.set('category', category.trim())
+	const suffix = query.toString() ? '?' + query.toString() : ''
+	return skinSiteRequest<number>('download/count' + suffix)
+}
+
+export function skinSiteAddDownloadItem(
+	data: SkinSiteDownloadItemInput,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('download/add', { method: 'POST', body: data })
+}
+
+export function skinSiteUpdateDownloadItem(
+	id: number,
+	data: SkinSiteDownloadItemInput,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('download/update/' + id, { method: 'POST', body: data })
+}
+
+export function skinSiteDeleteDownloadItem(id: number): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('download/' + id, { method: 'DELETE' })
+}
+
+export function skinSiteDownloadCategories(): Promise<
+	SkinSiteResponse<SkinSiteDownloadCategory[]>
+> {
+	return skinSiteRequest<SkinSiteDownloadCategory[]>('download/category/list')
+}
+
+export function skinSiteAddDownloadCategory(name: string): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('download/category/add/' + encodeURIComponent(name), {
+		method: 'POST',
+	})
+}
+
+export function skinSiteDeleteDownloadCategory(id: number): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('download/category/' + id, { method: 'DELETE' })
+}
+
+export function skinSiteBindDownloadCategory(
+	infoId: number,
+	categoryId: number,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('download/category/bind/' + infoId + '/' + categoryId, {
+		method: 'POST',
+	})
+}
+
+export function skinSiteUnbindDownloadCategory(
+	infoId: number,
+	categoryId: number,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('download/category/unbind/' + infoId + '/' + categoryId, {
+		method: 'POST',
+	})
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 065b42c..6fb540e 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -11952,5 +11952,37 @@
   "app.skin-site.admin.launcher.prev": {"message": "Previous"},
   "app.skin-site.admin.launcher.next": {"message": "Next"},
   "app.skin-site.admin.launcher.page": {"message": "Page {page}"},
-  "app.skin-site.admin.launcher.total": {"message": "{count} releases"}
+  "app.skin-site.admin.launcher.total": {"message": "{count} releases"},
+  "app.skin-site.admin.downloads.title": {"message": "Downloads"},
+  "app.skin-site.admin.downloads.loading": {"message": "Loading…"},
+  "app.skin-site.admin.downloads.failed": {"message": "Could not load downloads."},
+  "app.skin-site.admin.downloads.empty": {"message": "No download items."},
+  "app.skin-site.admin.downloads.categories": {"message": "Categories"},
+  "app.skin-site.admin.downloads.all": {"message": "All items"},
+  "app.skin-site.admin.downloads.add-category": {"message": "Add"},
+  "app.skin-site.admin.downloads.category-name": {"message": "Category name"},
+  "app.skin-site.admin.downloads.remove-category": {"message": "Remove"},
+  "app.skin-site.admin.downloads.total": {"message": "{count} items"},
+  "app.skin-site.admin.downloads.add-item": {"message": "New item"},
+  "app.skin-site.admin.downloads.save": {"message": "Save"},
+  "app.skin-site.admin.downloads.cancel": {"message": "Cancel"},
+  "app.skin-site.admin.downloads.edit": {"message": "Edit"},
+  "app.skin-site.admin.downloads.remove": {"message": "Delete"},
+  "app.skin-site.admin.downloads.filename": {"message": "File name"},
+  "app.skin-site.admin.downloads.description": {"message": "Description"},
+  "app.skin-site.admin.downloads.routes": {"message": "Download routes"},
+  "app.skin-site.admin.downloads.route-name": {"message": "Name"},
+  "app.skin-site.admin.downloads.route-url": {"message": "URL"},
+  "app.skin-site.admin.downloads.add-route": {"message": "Add route"},
+  "app.skin-site.admin.downloads.remove-route": {"message": "Remove"},
+  "app.skin-site.admin.downloads.statuses": {"message": "Statuses"},
+  "app.skin-site.admin.downloads.bind-category": {"message": "Categories"},
+  "app.skin-site.admin.downloads.uploader": {"message": "by {name}"},
+  "app.skin-site.admin.downloads.created": {"message": "Item created."},
+  "app.skin-site.admin.downloads.updated": {"message": "Item updated."},
+  "app.skin-site.admin.downloads.deleted": {"message": "Item deleted."},
+  "app.skin-site.admin.downloads.category-added": {"message": "Category added."},
+  "app.skin-site.admin.downloads.category-deleted": {"message": "Category deleted."},
+  "app.skin-site.admin.downloads.confirm-delete-item": {"message": "Delete “{name}”? This cannot be undone."},
+  "app.skin-site.admin.downloads.confirm-delete-category": {"message": "Delete category “{name}”?"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 7026430..9c62c58 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11783,5 +11783,37 @@
   "app.skin-site.admin.launcher.prev": {"message": "上一页"},
   "app.skin-site.admin.launcher.next": {"message": "下一页"},
   "app.skin-site.admin.launcher.page": {"message": "第 {page} 页"},
-  "app.skin-site.admin.launcher.total": {"message": "共 {count} 个版本"}
+  "app.skin-site.admin.launcher.total": {"message": "共 {count} 个版本"},
+  "app.skin-site.admin.downloads.title": {"message": "资源下载"},
+  "app.skin-site.admin.downloads.loading": {"message": "加载中…"},
+  "app.skin-site.admin.downloads.failed": {"message": "无法加载资源列表。"},
+  "app.skin-site.admin.downloads.empty": {"message": "没有下载条目。"},
+  "app.skin-site.admin.downloads.categories": {"message": "分类"},
+  "app.skin-site.admin.downloads.all": {"message": "全部条目"},
+  "app.skin-site.admin.downloads.add-category": {"message": "添加"},
+  "app.skin-site.admin.downloads.category-name": {"message": "分类名称"},
+  "app.skin-site.admin.downloads.remove-category": {"message": "移除"},
+  "app.skin-site.admin.downloads.total": {"message": "共 {count} 个条目"},
+  "app.skin-site.admin.downloads.add-item": {"message": "新建条目"},
+  "app.skin-site.admin.downloads.save": {"message": "保存"},
+  "app.skin-site.admin.downloads.cancel": {"message": "取消"},
+  "app.skin-site.admin.downloads.edit": {"message": "编辑"},
+  "app.skin-site.admin.downloads.remove": {"message": "删除"},
+  "app.skin-site.admin.downloads.filename": {"message": "文件名"},
+  "app.skin-site.admin.downloads.description": {"message": "描述"},
+  "app.skin-site.admin.downloads.routes": {"message": "下载线路"},
+  "app.skin-site.admin.downloads.route-name": {"message": "名称"},
+  "app.skin-site.admin.downloads.route-url": {"message": "URL"},
+  "app.skin-site.admin.downloads.add-route": {"message": "添加线路"},
+  "app.skin-site.admin.downloads.remove-route": {"message": "移除"},
+  "app.skin-site.admin.downloads.statuses": {"message": "状态"},
+  "app.skin-site.admin.downloads.bind-category": {"message": "所属分类"},
+  "app.skin-site.admin.downloads.uploader": {"message": "由 {name} 上传"},
+  "app.skin-site.admin.downloads.created": {"message": "条目已创建。"},
+  "app.skin-site.admin.downloads.updated": {"message": "条目已更新。"},
+  "app.skin-site.admin.downloads.deleted": {"message": "条目已删除。"},
+  "app.skin-site.admin.downloads.category-added": {"message": "分类已添加。"},
+  "app.skin-site.admin.downloads.category-deleted": {"message": "分类已删除。"},
+  "app.skin-site.admin.downloads.confirm-delete-item": {"message": "确定删除「{name}」吗？此操作不可撤销。"},
+  "app.skin-site.admin.downloads.confirm-delete-category": {"message": "确定删除分类「{name}」吗？"}
 }
diff --git a/scripts/axolotl/i18n-check.mjs b/scripts/axolotl/i18n-check.mjs
index d3255ff..b277c6f 100644
--- a/scripts/axolotl/i18n-check.mjs
+++ b/scripts/axolotl/i18n-check.mjs
@@ -33,6 +33,7 @@ const allowedUntranslatedMessages = new Set([
 	'UUID',
 	'QQ',
 	'IP',
+	'URL',
 	'LogShare AI',
 	'NeoForge',
 	'OptiFine',

From ac9373ddae04a940a59f026682d3be6fecff9ba2 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 07:43:37 +0800
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E4=B8=8E=E5=AE=A1=E8=AE=A1=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/skin-site/SkinSiteAdminView.vue        |   4 +
 .../skin-site/admin/AdminAccessAuditPage.vue  | 273 ++++++++++++++++++
 .../ui/skin-site/admin/AdminServersPage.vue   | 188 ++++++++++++
 .../app-frontend/src/helpers/skin-site-api.ts |  61 ++++
 .../app-frontend/src/locales/en-US/index.json |  41 ++-
 .../app-frontend/src/locales/zh-CN/index.json |  41 ++-
 6 files changed, 606 insertions(+), 2 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/AdminAccessAuditPage.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/AdminServersPage.vue

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
index 498c808..0b03ac2 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
@@ -4,11 +4,13 @@ import { computed, ref } from 'vue'
 
 import { skinSiteUser } from '@/composables/skin-site-session'
 
+import AdminAccessAuditPage from './admin/AdminAccessAuditPage.vue'
 import AdminBroadcastPage from './admin/AdminBroadcastPage.vue'
 import AdminDownloadsPage from './admin/AdminDownloadsPage.vue'
 import AdminLauncherPage from './admin/AdminLauncherPage.vue'
 import AdminPlayersPage from './admin/AdminPlayersPage.vue'
 import AdminReviewPage from './admin/AdminReviewPage.vue'
+import AdminServersPage from './admin/AdminServersPage.vue'
 import AdminSummaryPage from './admin/AdminSummaryPage.vue'
 import AdminUsersPage from './admin/AdminUsersPage.vue'
 
@@ -160,6 +162,8 @@ const current = ref<AdminKey>('summary')
 				class="min-w-0 flex-1 overflow-y-auto rounded-xl border border-solid border-surface-5 bg-bg-raised p-4"
 			>
 				<AdminSummaryPage v-if="current === 'summary'" />
+				<AdminServersPage v-else-if="current === 'servers'" />
+				<AdminAccessAuditPage v-else-if="current === 'access-audit'" />
 				<AdminBroadcastPage v-else-if="current === 'broadcast'" />
 				<AdminUsersPage v-else-if="current === 'users'" />
 				<AdminPlayersPage v-else-if="current === 'players'" />
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminAccessAuditPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminAccessAuditPage.vue
new file mode 100644
index 0000000..b09a2e9
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminAccessAuditPage.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { onMounted, ref } from 'vue'
+
+import {
+	skinSiteAccessAudit,
+	type SkinSiteAccessAuditEntry,
+	skinSiteUpdateAccessAuditSettings,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.admin.audit.title', defaultMessage: 'Access audit' },
+	loading: { id: 'app.skin-site.admin.audit.loading', defaultMessage: 'Loading…' },
+	failed: { id: 'app.skin-site.admin.audit.failed', defaultMessage: 'Could not load audit log.' },
+	empty: { id: 'app.skin-site.admin.audit.empty', defaultMessage: 'No audit entries.' },
+	subject: { id: 'app.skin-site.admin.audit.subject', defaultMessage: 'Subject' },
+	action: { id: 'app.skin-site.admin.audit.action', defaultMessage: 'Action' },
+	sourceIp: { id: 'app.skin-site.admin.audit.source-ip', defaultMessage: 'Source IP' },
+	reportedIp: {
+		id: 'app.skin-site.admin.audit.reported-ip',
+		defaultMessage: 'Reported player IP',
+	},
+	count: { id: 'app.skin-site.admin.audit.count', defaultMessage: 'Count' },
+	firstAt: { id: 'app.skin-site.admin.audit.first-at', defaultMessage: 'First seen' },
+	lastAt: { id: 'app.skin-site.admin.audit.last-at', defaultMessage: 'Last seen' },
+	proxy: { id: 'app.skin-site.admin.audit.proxy', defaultMessage: 'Proxy' },
+	internal: { id: 'app.skin-site.admin.audit.internal', defaultMessage: 'Internal' },
+	searchSubject: {
+		id: 'app.skin-site.admin.audit.search-subject',
+		defaultMessage: 'Subject',
+	},
+	searchIp: { id: 'app.skin-site.admin.audit.search-ip', defaultMessage: 'IP' },
+	searchAction: { id: 'app.skin-site.admin.audit.search-action', defaultMessage: 'Action' },
+	search: { id: 'app.skin-site.admin.audit.search', defaultMessage: 'Search' },
+	clear: { id: 'app.skin-site.admin.audit.clear', defaultMessage: 'Clear' },
+	loadMore: { id: 'app.skin-site.admin.audit.load-more', defaultMessage: 'Load more' },
+	retention: {
+		id: 'app.skin-site.admin.audit.retention',
+		defaultMessage: 'Retention (days)',
+	},
+	recordLimit: { id: 'app.skin-site.admin.audit.record-limit', defaultMessage: 'Record limit' },
+	saveRetention: {
+		id: 'app.skin-site.admin.audit.save-retention',
+		defaultMessage: 'Save',
+	},
+	retentionSaved: {
+		id: 'app.skin-site.admin.audit.retention-saved',
+		defaultMessage: 'Retention updated.',
+	},
+})
+
+const items = ref<SkinSiteAccessAuditEntry[]>([])
+const nextCursor = ref<number | null>(null)
+const retentionDays = ref(0)
+const recordLimit = ref(0)
+const loading = ref(true)
+const loadingMore = ref(false)
+const failed = ref(false)
+
+const subjectFilter = ref('')
+const ipFilter = ref('')
+const actionFilter = ref('')
+
+const retentionDraft = ref(0)
+const savingRetention = ref(false)
+
+function formatDateTime(ts: number): string {
+	try {
+		return new Date(ts).toLocaleString()
+	} catch {
+		return ''
+	}
+}
+
+async function load(reset = true) {
+	if (reset) {
+		loading.value = true
+		items.value = []
+		nextCursor.value = null
+	} else {
+		loadingMore.value = true
+	}
+	failed.value = false
+	try {
+		const result = await skinSiteAccessAudit({
+			before: reset ? undefined : (nextCursor.value ?? undefined),
+			subject: subjectFilter.value.trim() || undefined,
+			ip: ipFilter.value.trim() || undefined,
+			action: actionFilter.value.trim() || undefined,
+		})
+		if (!result.success) throw new Error(result.errorMessage)
+		const page = result.payload
+		items.value = reset ? page.items : [...items.value, ...page.items]
+		nextCursor.value = page.nextCursor
+		retentionDays.value = page.retentionDays
+		recordLimit.value = page.recordLimit
+		retentionDraft.value = page.retentionDays
+	} catch (error) {
+		failed.value = true
+		handleError(error)
+	} finally {
+		loading.value = false
+		loadingMore.value = false
+	}
+}
+
+function clearFilters() {
+	subjectFilter.value = ''
+	ipFilter.value = ''
+	actionFilter.value = ''
+	void load(true)
+}
+
+async function saveRetention() {
+	if (savingRetention.value) return
+	savingRetention.value = true
+	try {
+		const result = await skinSiteUpdateAccessAuditSettings(Number(retentionDraft.value) || 0)
+		if (!result.success) throw new Error(result.errorMessage)
+		retentionDays.value = result.payload.retentionDays
+		retentionDraft.value = result.payload.retentionDays
+		addNotification({ type: 'success', title: formatMessage(messages.retentionSaved) })
+	} catch (error) {
+		handleError(error)
+	} finally {
+		savingRetention.value = false
+	}
+}
+
+onMounted(() => void load(true))
+</script>
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-2">
+			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+			<span class="text-xs text-secondary">
+				{{ formatMessage(messages.recordLimit) }}: {{ recordLimit }}
+			</span>
+		</div>
+
+		<div class="flex flex-wrap items-end gap-2">
+			<label class="flex flex-col gap-1">
+				<span class="text-xs text-secondary">{{ formatMessage(messages.searchSubject) }}</span>
+				<input
+					v-model="subjectFilter"
+					type="text"
+					class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+					@keyup.enter="load(true)"
+				/>
+			</label>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs text-secondary">{{ formatMessage(messages.searchIp) }}</span>
+				<input
+					v-model="ipFilter"
+					type="text"
+					class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+					@keyup.enter="load(true)"
+				/>
+			</label>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs text-secondary">{{ formatMessage(messages.searchAction) }}</span>
+				<input
+					v-model="actionFilter"
+					type="text"
+					class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+					@keyup.enter="load(true)"
+				/>
+			</label>
+			<button
+				type="button"
+				class="rounded-full bg-brand px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+				@click="load(true)"
+			>
+				{{ formatMessage(messages.search) }}
+			</button>
+			<button
+				type="button"
+				class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-secondary hover:brightness-110"
+				@click="clearFilters"
+			>
+				{{ formatMessage(messages.clear) }}
+			</button>
+		</div>
+
+		<div class="flex flex-wrap items-end gap-2 rounded-xl bg-bg-raised p-3">
+			<label class="flex flex-col gap-1">
+				<span class="text-xs text-secondary">{{ formatMessage(messages.retention) }}</span>
+				<input
+					v-model.number="retentionDraft"
+					type="number"
+					min="1"
+					class="w-24 rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+				/>
+			</label>
+			<button
+				type="button"
+				class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+				:disabled="savingRetention"
+				@click="saveRetention"
+			>
+				{{ formatMessage(messages.saveRetention) }}
+			</button>
+			<span class="text-xs text-secondary">
+				{{ formatMessage(messages.retention) }}: {{ retentionDays }}
+			</span>
+		</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="!items.length" class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+			{{ formatMessage(messages.empty) }}
+		</p>
+		<div v-else class="flex flex-col gap-2">
+			<div
+				v-for="entry in items"
+				:key="entry.id"
+				class="flex flex-col gap-1.5 rounded-xl bg-bg-raised p-3"
+			>
+				<div class="flex flex-wrap items-center gap-2">
+					<span class="shrink-0 text-xs text-secondary">#{{ entry.id }}</span>
+					<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">
+						{{ entry.subject }}
+					</span>
+					<span
+						class="shrink-0 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+					>
+						{{ entry.action }}
+					</span>
+					<span class="shrink-0 text-xs text-secondary">×{{ entry.count }}</span>
+					<span
+						v-if="entry.proxy"
+						class="shrink-0 rounded-full bg-orange px-2 py-0.5 text-[10px] font-semibold text-contrast"
+					>
+						{{ formatMessage(messages.proxy) }}
+					</span>
+					<span
+						v-if="entry.internalServer"
+						class="shrink-0 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+					>
+						{{ formatMessage(messages.internal) }}
+					</span>
+				</div>
+				<div class="flex flex-wrap items-center gap-3 text-xs text-secondary">
+					<span>{{ formatMessage(messages.sourceIp) }}: {{ entry.sourceIp }}</span>
+					<span v-if="entry.reportedPlayerIp">
+						{{ formatMessage(messages.reportedIp) }}: {{ entry.reportedPlayerIp }}
+					</span>
+					<span>{{ formatMessage(messages.firstAt) }}: {{ formatDateTime(entry.firstAt) }}</span>
+					<span>{{ formatMessage(messages.lastAt) }}: {{ formatDateTime(entry.lastAt) }}</span>
+				</div>
+			</div>
+
+			<button
+				v-if="nextCursor !== null"
+				type="button"
+				class="w-fit self-center rounded-full bg-button-bg px-4 py-2 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+				:disabled="loadingMore"
+				@click="load(false)"
+			>
+				{{ formatMessage(messages.loadMore) }}
+			</button>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminServersPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminServersPage.vue
new file mode 100644
index 0000000..d48eb38
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminServersPage.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { onMounted, ref } from 'vue'
+
+import {
+	type SkinSiteMapServer,
+	skinSiteMapServers,
+	skinSiteSaveMapServers,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.admin.servers.title', defaultMessage: 'Map servers' },
+	loading: { id: 'app.skin-site.admin.servers.loading', defaultMessage: 'Loading…' },
+	failed: { id: 'app.skin-site.admin.servers.failed', defaultMessage: 'Could not load servers.' },
+	empty: { id: 'app.skin-site.admin.servers.empty', defaultMessage: 'No map servers configured.' },
+	serverName: { id: 'app.skin-site.admin.servers.server-name', defaultMessage: 'Server name' },
+	internal: { id: 'app.skin-site.admin.servers.internal', defaultMessage: 'Internal' },
+	maps: { id: 'app.skin-site.admin.servers.maps', defaultMessage: 'Maps' },
+	mapName: { id: 'app.skin-site.admin.servers.map-name', defaultMessage: 'Map name' },
+	mapUrl: { id: 'app.skin-site.admin.servers.map-url', defaultMessage: 'Map URL' },
+	addMap: { id: 'app.skin-site.admin.servers.add-map', defaultMessage: 'Add map' },
+	removeMap: { id: 'app.skin-site.admin.servers.remove-map', defaultMessage: 'Remove' },
+	addServer: { id: 'app.skin-site.admin.servers.add-server', defaultMessage: 'Add server' },
+	removeServer: {
+		id: 'app.skin-site.admin.servers.remove-server',
+		defaultMessage: 'Remove server',
+	},
+	save: { id: 'app.skin-site.admin.servers.save', defaultMessage: 'Save changes' },
+	saving: { id: 'app.skin-site.admin.servers.saving', defaultMessage: 'Saving…' },
+	saved: { id: 'app.skin-site.admin.servers.saved', defaultMessage: 'Map servers saved.' },
+})
+
+const servers = ref<SkinSiteMapServer[]>([])
+const loading = ref(true)
+const failed = ref(false)
+const saving = ref(false)
+
+async function load() {
+	loading.value = true
+	failed.value = false
+	try {
+		const result = await skinSiteMapServers()
+		if (!result.success) throw new Error(result.errorMessage)
+		servers.value = result.payload ?? []
+	} catch (error) {
+		failed.value = true
+		handleError(error)
+	} finally {
+		loading.value = false
+	}
+}
+
+function addServer() {
+	servers.value.push({ name: '', internal: false, maps: [{ name: '', url: '' }] })
+}
+
+function removeServer(index: number) {
+	servers.value.splice(index, 1)
+}
+
+function addMap(server: SkinSiteMapServer) {
+	server.maps.push({ name: '', url: '' })
+}
+
+function removeMap(server: SkinSiteMapServer, index: number) {
+	server.maps.splice(index, 1)
+}
+
+async function save() {
+	if (saving.value) return
+	saving.value = true
+	try {
+		const cleaned = servers.value.map((s) => ({
+			name: s.name.trim(),
+			internal: s.internal,
+			maps: s.maps
+				.filter((m) => m.name.trim() || m.url.trim())
+				.map((m) => ({ name: m.name.trim(), url: m.url.trim() })),
+		}))
+		const result = await skinSiteSaveMapServers(cleaned)
+		if (!result.success) throw new Error(result.errorMessage)
+		servers.value = result.payload ?? cleaned
+		addNotification({ type: 'success', title: formatMessage(messages.saved) })
+	} catch (error) {
+		handleError(error)
+	} finally {
+		saving.value = false
+	}
+}
+
+onMounted(() => void load())
+</script>
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-2">
+			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+			<button
+				type="button"
+				class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+				@click="addServer"
+			>
+				{{ formatMessage(messages.addServer) }}
+			</button>
+			<button
+				type="button"
+				class="ml-auto rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+				:disabled="saving"
+				@click="save"
+			>
+				{{ saving ? formatMessage(messages.saving) : formatMessage(messages.save) }}
+			</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="!servers.length" class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+			{{ formatMessage(messages.empty) }}
+		</p>
+		<div v-else class="flex flex-col gap-3">
+			<div
+				v-for="(server, si) in servers"
+				:key="si"
+				class="flex flex-col gap-2 rounded-xl bg-bg-raised p-3"
+			>
+				<div class="flex flex-wrap items-center gap-2">
+					<input
+						v-model="server.name"
+						type="text"
+						:placeholder="formatMessage(messages.serverName)"
+						class="min-w-0 flex-1 rounded-lg border border-solid border-surface-5 bg-bg px-3 py-1.5 text-sm text-contrast outline-none focus:border-brand"
+					/>
+					<label class="flex shrink-0 items-center gap-1.5 text-xs text-contrast">
+						<input v-model="server.internal" type="checkbox" />
+						{{ formatMessage(messages.internal) }}
+					</label>
+					<button
+						type="button"
+						class="shrink-0 rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="removeServer(si)"
+					>
+						{{ formatMessage(messages.removeServer) }}
+					</button>
+				</div>
+
+				<span class="text-xs font-semibold text-secondary">
+					{{ formatMessage(messages.maps) }}
+				</span>
+				<div v-for="(map, mi) in server.maps" :key="mi" class="flex flex-wrap items-center gap-2">
+					<input
+						v-model="map.name"
+						type="text"
+						:placeholder="formatMessage(messages.mapName)"
+						class="w-40 rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+					/>
+					<input
+						v-model="map.url"
+						type="text"
+						:placeholder="formatMessage(messages.mapUrl)"
+						class="min-w-0 flex-1 rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+					/>
+					<button
+						type="button"
+						class="shrink-0 rounded-full bg-button-bg px-2 py-1 text-[10px] font-semibold text-secondary hover:text-red"
+						@click="removeMap(server, mi)"
+					>
+						{{ formatMessage(messages.removeMap) }}
+					</button>
+				</div>
+				<button
+					type="button"
+					class="w-fit rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-secondary hover:brightness-110"
+					@click="addMap(server)"
+				>
+					{{ formatMessage(messages.addMap) }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 88c2c21..47f97b5 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -1391,3 +1391,64 @@ export function skinSiteUnbindDownloadCategory(
 		method: 'POST',
 	})
 }
+
+export interface SkinSiteMapServer {
+	name: string
+	internal: boolean
+	maps: Array<{ name: string; url: string }>
+}
+
+export function skinSiteMapServers(): Promise<SkinSiteResponse<SkinSiteMapServer[]>> {
+	return skinSiteRequest<SkinSiteMapServer[]>('maps')
+}
+
+export function skinSiteSaveMapServers(
+	servers: SkinSiteMapServer[],
+): Promise<SkinSiteResponse<SkinSiteMapServer[]>> {
+	return skinSiteRequest<SkinSiteMapServer[]>('maps', { method: 'PUT', body: servers })
+}
+
+export interface SkinSiteAccessAuditEntry {
+	id: number
+	subject: string
+	action: string
+	sourceIp: string
+	proxy: boolean
+	reportedPlayerIp: string | null
+	internalServer: boolean
+	count: number
+	firstAt: number
+	lastAt: number
+}
+
+export interface SkinSiteAccessAuditPage {
+	items: SkinSiteAccessAuditEntry[]
+	nextCursor: number | null
+	retentionDays: number
+	recordLimit: number
+}
+
+export function skinSiteAccessAudit(params?: {
+	before?: number
+	subject?: string
+	ip?: string
+	action?: string
+}): Promise<SkinSiteResponse<SkinSiteAccessAuditPage>> {
+	const query = new URLSearchParams()
+	if (params) {
+		for (const [key, value] of Object.entries(params)) {
+			if (value !== undefined && value !== '') query.set(key, String(value))
+		}
+	}
+	const suffix = query.toString() ? '?' + query.toString() : ''
+	return skinSiteRequest<SkinSiteAccessAuditPage>('admin/access-audit' + suffix)
+}
+
+export function skinSiteUpdateAccessAuditSettings(
+	retentionDays: number,
+): Promise<SkinSiteResponse<{ retentionDays: number }>> {
+	return skinSiteRequest<{ retentionDays: number }>('admin/access-audit/settings', {
+		method: 'PUT',
+		body: { retentionDays },
+	})
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 6fb540e..db1b46e 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -11984,5 +11984,44 @@
   "app.skin-site.admin.downloads.category-added": {"message": "Category added."},
   "app.skin-site.admin.downloads.category-deleted": {"message": "Category deleted."},
   "app.skin-site.admin.downloads.confirm-delete-item": {"message": "Delete “{name}”? This cannot be undone."},
-  "app.skin-site.admin.downloads.confirm-delete-category": {"message": "Delete category “{name}”?"}
+  "app.skin-site.admin.downloads.confirm-delete-category": {"message": "Delete category “{name}”?"},
+  "app.skin-site.admin.servers.title": {"message": "Map servers"},
+  "app.skin-site.admin.servers.loading": {"message": "Loading…"},
+  "app.skin-site.admin.servers.failed": {"message": "Could not load servers."},
+  "app.skin-site.admin.servers.empty": {"message": "No map servers configured."},
+  "app.skin-site.admin.servers.server-name": {"message": "Server name"},
+  "app.skin-site.admin.servers.internal": {"message": "Internal"},
+  "app.skin-site.admin.servers.maps": {"message": "Maps"},
+  "app.skin-site.admin.servers.map-name": {"message": "Map name"},
+  "app.skin-site.admin.servers.map-url": {"message": "Map URL"},
+  "app.skin-site.admin.servers.add-map": {"message": "Add map"},
+  "app.skin-site.admin.servers.remove-map": {"message": "Remove"},
+  "app.skin-site.admin.servers.add-server": {"message": "Add server"},
+  "app.skin-site.admin.servers.remove-server": {"message": "Remove server"},
+  "app.skin-site.admin.servers.save": {"message": "Save changes"},
+  "app.skin-site.admin.servers.saving": {"message": "Saving…"},
+  "app.skin-site.admin.servers.saved": {"message": "Map servers saved."},
+  "app.skin-site.admin.audit.title": {"message": "Access audit"},
+  "app.skin-site.admin.audit.loading": {"message": "Loading…"},
+  "app.skin-site.admin.audit.failed": {"message": "Could not load audit log."},
+  "app.skin-site.admin.audit.empty": {"message": "No audit entries."},
+  "app.skin-site.admin.audit.subject": {"message": "Subject"},
+  "app.skin-site.admin.audit.action": {"message": "Action"},
+  "app.skin-site.admin.audit.source-ip": {"message": "Source IP"},
+  "app.skin-site.admin.audit.reported-ip": {"message": "Reported player IP"},
+  "app.skin-site.admin.audit.count": {"message": "Count"},
+  "app.skin-site.admin.audit.first-at": {"message": "First seen"},
+  "app.skin-site.admin.audit.last-at": {"message": "Last seen"},
+  "app.skin-site.admin.audit.proxy": {"message": "Proxy"},
+  "app.skin-site.admin.audit.internal": {"message": "Internal"},
+  "app.skin-site.admin.audit.search-subject": {"message": "Subject"},
+  "app.skin-site.admin.audit.search-ip": {"message": "IP"},
+  "app.skin-site.admin.audit.search-action": {"message": "Action"},
+  "app.skin-site.admin.audit.search": {"message": "Search"},
+  "app.skin-site.admin.audit.clear": {"message": "Clear"},
+  "app.skin-site.admin.audit.load-more": {"message": "Load more"},
+  "app.skin-site.admin.audit.retention": {"message": "Retention (days)"},
+  "app.skin-site.admin.audit.record-limit": {"message": "Record limit"},
+  "app.skin-site.admin.audit.save-retention": {"message": "Save"},
+  "app.skin-site.admin.audit.retention-saved": {"message": "Retention updated."}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 9c62c58..f5f3409 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11815,5 +11815,44 @@
   "app.skin-site.admin.downloads.category-added": {"message": "分类已添加。"},
   "app.skin-site.admin.downloads.category-deleted": {"message": "分类已删除。"},
   "app.skin-site.admin.downloads.confirm-delete-item": {"message": "确定删除「{name}」吗？此操作不可撤销。"},
-  "app.skin-site.admin.downloads.confirm-delete-category": {"message": "确定删除分类「{name}」吗？"}
+  "app.skin-site.admin.downloads.confirm-delete-category": {"message": "确定删除分类「{name}」吗？"},
+  "app.skin-site.admin.servers.title": {"message": "地图服务器"},
+  "app.skin-site.admin.servers.loading": {"message": "加载中…"},
+  "app.skin-site.admin.servers.failed": {"message": "无法加载服务器列表。"},
+  "app.skin-site.admin.servers.empty": {"message": "尚未配置地图服务器。"},
+  "app.skin-site.admin.servers.server-name": {"message": "服务器名称"},
+  "app.skin-site.admin.servers.internal": {"message": "内部"},
+  "app.skin-site.admin.servers.maps": {"message": "地图"},
+  "app.skin-site.admin.servers.map-name": {"message": "地图名称"},
+  "app.skin-site.admin.servers.map-url": {"message": "地图地址"},
+  "app.skin-site.admin.servers.add-map": {"message": "添加地图"},
+  "app.skin-site.admin.servers.remove-map": {"message": "移除"},
+  "app.skin-site.admin.servers.add-server": {"message": "添加服务器"},
+  "app.skin-site.admin.servers.remove-server": {"message": "删除服务器"},
+  "app.skin-site.admin.servers.save": {"message": "保存更改"},
+  "app.skin-site.admin.servers.saving": {"message": "保存中…"},
+  "app.skin-site.admin.servers.saved": {"message": "地图服务器已保存。"},
+  "app.skin-site.admin.audit.title": {"message": "登录与认证审计"},
+  "app.skin-site.admin.audit.loading": {"message": "加载中…"},
+  "app.skin-site.admin.audit.failed": {"message": "无法加载审计日志。"},
+  "app.skin-site.admin.audit.empty": {"message": "没有审计记录。"},
+  "app.skin-site.admin.audit.subject": {"message": "主体"},
+  "app.skin-site.admin.audit.action": {"message": "操作"},
+  "app.skin-site.admin.audit.source-ip": {"message": "来源 IP"},
+  "app.skin-site.admin.audit.reported-ip": {"message": "上报玩家 IP"},
+  "app.skin-site.admin.audit.count": {"message": "次数"},
+  "app.skin-site.admin.audit.first-at": {"message": "首次出现"},
+  "app.skin-site.admin.audit.last-at": {"message": "最近出现"},
+  "app.skin-site.admin.audit.proxy": {"message": "代理"},
+  "app.skin-site.admin.audit.internal": {"message": "内部"},
+  "app.skin-site.admin.audit.search-subject": {"message": "主体"},
+  "app.skin-site.admin.audit.search-ip": {"message": "IP"},
+  "app.skin-site.admin.audit.search-action": {"message": "操作"},
+  "app.skin-site.admin.audit.search": {"message": "搜索"},
+  "app.skin-site.admin.audit.clear": {"message": "清空"},
+  "app.skin-site.admin.audit.load-more": {"message": "加载更多"},
+  "app.skin-site.admin.audit.retention": {"message": "保留天数"},
+  "app.skin-site.admin.audit.record-limit": {"message": "记录上限"},
+  "app.skin-site.admin.audit.save-retention": {"message": "保存"},
+  "app.skin-site.admin.audit.retention-saved": {"message": "保留天数已更新。"}
 }

From 57ff974d79f327ae69f917cba361ae82d60797a1 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 07:45:39 +0800
Subject: [PATCH 03/16] =?UTF-8?q?feat:=20=E6=9C=8D=E5=8A=A1=E5=99=A8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E4=BB=85=E5=AF=B9=E7=BD=91=E9=A1=B5?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=91=98=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ui/skin-site/SkinSiteAdminView.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
index 0b03ac2..a640cf5 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
@@ -75,7 +75,9 @@ const navGroups = computed<NavGroup[]>(() => [
 		id: 'security',
 		label: formatMessage(messages.groupSecurity),
 		items: [
-			{ key: 'servers', label: formatMessage(messages.itemServers) },
+			...(hasWebAdmin.value
+				? [{ key: 'servers' as AdminKey, label: formatMessage(messages.itemServers) }]
+				: []),
 			{ key: 'summary', label: formatMessage(messages.itemSummary) },
 			{ key: 'access-audit', label: formatMessage(messages.itemAccessAudit) },
 		],
@@ -115,6 +117,11 @@ const hasAdminAccess = computed(() => {
 	return permissions.includes('WEB_ADMIN') || permissions.includes('SERVER_ADMIN')
 })
 
+const hasWebAdmin = computed(() => {
+	const permissions = skinSiteUser.value?.permissions ?? []
+	return permissions.includes('WEB_ADMIN')
+})
+
 const current = ref<AdminKey>('summary')
 </script>
 <template>
@@ -162,7 +169,7 @@ const current = ref<AdminKey>('summary')
 				class="min-w-0 flex-1 overflow-y-auto rounded-xl border border-solid border-surface-5 bg-bg-raised p-4"
 			>
 				<AdminSummaryPage v-if="current === 'summary'" />
-				<AdminServersPage v-else-if="current === 'servers'" />
+				<AdminServersPage v-else-if="current === 'servers' && hasWebAdmin" />
 				<AdminAccessAuditPage v-else-if="current === 'access-audit'" />
 				<AdminBroadcastPage v-else-if="current === 'broadcast'" />
 				<AdminUsersPage v-else-if="current === 'users'" />

From b0178c046fa578fd4ab2307435bf27ce1a612d44 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 08:01:24 +0800
Subject: [PATCH 04/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=E6=8D=90=E8=B5=A0?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/skin-site/SkinSiteAdminView.vue        |   6 +-
 .../ui/skin-site/admin/AdminDonationsPage.vue | 366 ++++++++++++++++++
 .../app-frontend/src/helpers/skin-site-api.ts |  80 ++++
 .../app-frontend/src/locales/en-US/index.json |  28 +-
 .../app-frontend/src/locales/zh-CN/index.json |  28 +-
 5 files changed, 505 insertions(+), 3 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/AdminDonationsPage.vue

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
index a640cf5..5da5085 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
@@ -6,6 +6,7 @@ import { skinSiteUser } from '@/composables/skin-site-session'
 
 import AdminAccessAuditPage from './admin/AdminAccessAuditPage.vue'
 import AdminBroadcastPage from './admin/AdminBroadcastPage.vue'
+import AdminDonationsPage from './admin/AdminDonationsPage.vue'
 import AdminDownloadsPage from './admin/AdminDownloadsPage.vue'
 import AdminLauncherPage from './admin/AdminLauncherPage.vue'
 import AdminPlayersPage from './admin/AdminPlayersPage.vue'
@@ -98,7 +99,9 @@ const navGroups = computed<NavGroup[]>(() => [
 			{ key: 'broadcast', label: formatMessage(messages.itemBroadcast) },
 			{ key: 'chat', label: formatMessage(messages.itemChat) },
 			{ key: 'wiki', label: formatMessage(messages.itemWiki) },
-			{ key: 'donations', label: formatMessage(messages.itemDonations) },
+			...(hasWebAdmin.value
+				? [{ key: 'donations' as AdminKey, label: formatMessage(messages.itemDonations) }]
+				: []),
 		],
 	},
 	{
@@ -177,6 +180,7 @@ const current = ref<AdminKey>('summary')
 				<AdminReviewPage v-else-if="current === 'review'" />
 				<AdminLauncherPage v-else-if="current === 'launcher'" />
 				<AdminDownloadsPage v-else-if="current === 'downloads'" />
+				<AdminDonationsPage v-else-if="current === 'donations' && hasWebAdmin" />
 				<p v-else class="m-0 text-sm text-secondary">{{ current }}</p>
 			</section>
 		</div>
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminDonationsPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminDonationsPage.vue
new file mode 100644
index 0000000..0b284b0
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminDonationsPage.vue
@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref } from 'vue'
+
+import {
+	skinSiteAdminDonations,
+	skinSiteCreateDonation,
+	skinSiteDeleteDonation,
+	type SkinSiteDonationAdminEntry,
+	type SkinSiteDonationSummary,
+	skinSiteUpdateDonation,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.admin.donations.title', defaultMessage: 'Donations' },
+	loading: { id: 'app.skin-site.admin.donations.loading', defaultMessage: 'Loading…' },
+	failed: {
+		id: 'app.skin-site.admin.donations.failed',
+		defaultMessage: 'Could not load donations.',
+	},
+	empty: { id: 'app.skin-site.admin.donations.empty', defaultMessage: 'No donations yet.' },
+	totalAmount: { id: 'app.skin-site.admin.donations.total-amount', defaultMessage: 'Total' },
+	donorCount: { id: 'app.skin-site.admin.donations.donor-count', defaultMessage: 'Donors' },
+	donor: { id: 'app.skin-site.admin.donations.donor', defaultMessage: 'Donor' },
+	amount: { id: 'app.skin-site.admin.donations.amount', defaultMessage: 'Amount' },
+	updatedAt: { id: 'app.skin-site.admin.donations.updated-at', defaultMessage: 'Updated' },
+	external: { id: 'app.skin-site.admin.donations.external', defaultMessage: 'External' },
+	linked: { id: 'app.skin-site.admin.donations.linked', defaultMessage: 'Linked' },
+	create: { id: 'app.skin-site.admin.donations.create', defaultMessage: 'Add donation' },
+	save: { id: 'app.skin-site.admin.donations.save', defaultMessage: 'Save' },
+	cancel: { id: 'app.skin-site.admin.donations.cancel', defaultMessage: 'Cancel' },
+	edit: { id: 'app.skin-site.admin.donations.edit', defaultMessage: 'Edit' },
+	remove: { id: 'app.skin-site.admin.donations.remove', defaultMessage: 'Delete' },
+	amountField: { id: 'app.skin-site.admin.donations.amount-field', defaultMessage: 'Amount' },
+	displayName: {
+		id: 'app.skin-site.admin.donations.display-name',
+		defaultMessage: 'Display name',
+	},
+	userUuid: { id: 'app.skin-site.admin.donations.user-uuid', defaultMessage: 'User UUID' },
+	qq: { id: 'app.skin-site.admin.donations.qq', defaultMessage: 'QQ' },
+	appendMode: {
+		id: 'app.skin-site.admin.donations.append-mode',
+		defaultMessage: 'Append to existing amount',
+	},
+	created: { id: 'app.skin-site.admin.donations.created', defaultMessage: 'Donation created.' },
+	updated: { id: 'app.skin-site.admin.donations.updated', defaultMessage: 'Donation updated.' },
+	deleted: { id: 'app.skin-site.admin.donations.deleted', defaultMessage: 'Donation deleted.' },
+	confirmDelete: {
+		id: 'app.skin-site.admin.donations.confirm-delete',
+		defaultMessage: 'Delete the donation from “{name}”? This cannot be undone.',
+	},
+	loadMore: { id: 'app.skin-site.admin.donations.load-more', defaultMessage: 'Load more' },
+})
+
+const items = ref<SkinSiteDonationAdminEntry[]>([])
+const summary = ref<SkinSiteDonationSummary | null>(null)
+const hasMore = ref(false)
+const loading = ref(true)
+const loadingMore = ref(false)
+const failed = ref(false)
+const offset = ref(0)
+
+const editorOpen = ref(false)
+const editingId = ref<number | null>(null)
+const editingVersion = ref(0)
+const saving = ref(false)
+const deletingId = ref<number | null>(null)
+
+const form = ref({
+	amount: '',
+	displayName: '',
+	userUuid: '',
+	qq: '',
+	appendMode: false,
+})
+
+const canSave = computed(() => form.value.amount.trim().length > 0 && !saving.value)
+
+function formatDateTime(ts: number): string {
+	try {
+		return new Date(ts).toLocaleString()
+	} catch {
+		return ''
+	}
+}
+
+function resetForm() {
+	form.value = { amount: '', displayName: '', userUuid: '', qq: '', appendMode: false }
+	editingId.value = null
+	editingVersion.value = 0
+}
+
+function openCreate() {
+	resetForm()
+	editorOpen.value = true
+}
+
+function openEdit(entry: SkinSiteDonationAdminEntry) {
+	form.value = {
+		amount: entry.donor.amount,
+		displayName: entry.donor.username,
+		userUuid: entry.userUuid ?? '',
+		qq: entry.qq ?? '',
+		appendMode: false,
+	}
+	editingId.value = entry.donor.id
+	editingVersion.value = entry.version
+	editorOpen.value = true
+}
+
+function closeEditor() {
+	editorOpen.value = false
+	resetForm()
+}
+
+async function load(reset = true) {
+	if (reset) {
+		loading.value = true
+		items.value = []
+		offset.value = 0
+	} else {
+		loadingMore.value = true
+	}
+	failed.value = false
+	try {
+		const result = await skinSiteAdminDonations(offset.value)
+		if (!result.success) throw new Error(result.errorMessage)
+		const page = result.payload
+		items.value = reset ? page.items : [...items.value, ...page.items]
+		summary.value = page.summary
+		hasMore.value = page.hasMore
+	} catch (error) {
+		failed.value = true
+		handleError(error)
+	} finally {
+		loading.value = false
+		loadingMore.value = false
+	}
+}
+
+async function loadMore() {
+	if (!hasMore.value) return
+	offset.value += 20
+	await load(false)
+}
+
+async function save() {
+	if (!canSave.value) return
+	saving.value = true
+	try {
+		if (editingId.value === null) {
+			const payload: Parameters<typeof skinSiteCreateDonation>[0] = {
+				amount: form.value.amount.trim(),
+			}
+			if (form.value.userUuid.trim()) payload.userUuid = form.value.userUuid.trim()
+			if (form.value.qq.trim()) payload.qq = form.value.qq.trim()
+			if (form.value.displayName.trim()) payload.displayName = form.value.displayName.trim()
+			const result = await skinSiteCreateDonation(payload)
+			if (!result.success) throw new Error(result.errorMessage)
+			addNotification({ type: 'success', title: formatMessage(messages.created) })
+		} else {
+			const result = await skinSiteUpdateDonation(editingId.value, {
+				amount: form.value.amount.trim(),
+				version: editingVersion.value,
+				displayName: form.value.displayName.trim() || undefined,
+				mode: form.value.appendMode ? 'APPEND' : 'REPLACE',
+			})
+			if (!result.success) throw new Error(result.errorMessage)
+			addNotification({ type: 'success', title: formatMessage(messages.updated) })
+		}
+		closeEditor()
+		await load(true)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		saving.value = false
+	}
+}
+
+async function remove(entry: SkinSiteDonationAdminEntry) {
+	if (deletingId.value !== null) return
+	if (!window.confirm(formatMessage(messages.confirmDelete, { name: entry.donor.username }))) return
+	deletingId.value = entry.donor.id
+	try {
+		const result = await skinSiteDeleteDonation(entry.donor.id, entry.version)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.deleted) })
+		await load(true)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		deletingId.value = null
+	}
+}
+
+onMounted(() => void load(true))
+</script>
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-2">
+			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+			<button
+				type="button"
+				class="ml-auto rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+				@click="openCreate"
+			>
+				{{ formatMessage(messages.create) }}
+			</button>
+		</div>
+
+		<div v-if="summary" class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+			<div class="flex flex-col gap-1 rounded-xl bg-bg-raised p-4">
+				<span class="text-xs text-secondary">{{ formatMessage(messages.totalAmount) }}</span>
+				<span class="text-xl font-bold text-contrast">{{ summary.totalAmount }}</span>
+			</div>
+			<div class="flex flex-col gap-1 rounded-xl bg-bg-raised p-4">
+				<span class="text-xs text-secondary">{{ formatMessage(messages.donorCount) }}</span>
+				<span class="text-xl font-bold text-contrast">{{ summary.donorCount }}</span>
+			</div>
+		</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="!items.length" class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+			{{ formatMessage(messages.empty) }}
+		</p>
+		<div v-else class="flex flex-col gap-2">
+			<div
+				v-for="entry in items"
+				:key="entry.donor.id"
+				class="flex flex-wrap items-center gap-3 rounded-xl bg-bg-raised p-3"
+			>
+				<span class="shrink-0 text-xs text-secondary">#{{ entry.donor.rank }}</span>
+				<div class="flex min-w-0 flex-1 flex-col">
+					<span class="truncate text-sm font-semibold text-contrast">
+						{{ entry.donor.username }}
+					</span>
+					<span class="truncate text-xs text-secondary">
+						{{ formatMessage(messages.updatedAt) }}:
+						{{ formatDateTime(entry.updatedAt) }}
+					</span>
+				</div>
+				<span class="shrink-0 text-sm font-bold text-contrast">{{ entry.donor.amount }}</span>
+				<span
+					v-if="entry.external"
+					class="shrink-0 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+				>
+					{{ formatMessage(messages.external) }}
+				</span>
+				<span
+					v-else
+					class="shrink-0 rounded-full bg-green px-2 py-0.5 text-[10px] font-semibold text-contrast"
+				>
+					{{ formatMessage(messages.linked) }}
+				</span>
+				<button
+					type="button"
+					class="shrink-0 rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+					@click="openEdit(entry)"
+				>
+					{{ formatMessage(messages.edit) }}
+				</button>
+				<button
+					type="button"
+					class="shrink-0 rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					:disabled="deletingId !== null"
+					@click="remove(entry)"
+				>
+					{{ formatMessage(messages.remove) }}
+				</button>
+			</div>
+
+			<button
+				v-if="hasMore"
+				type="button"
+				class="w-fit self-center rounded-full bg-button-bg px-4 py-2 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+				:disabled="loadingMore"
+				@click="loadMore"
+			>
+				{{ formatMessage(messages.loadMore) }}
+			</button>
+		</div>
+
+		<div
+			v-if="editorOpen"
+			class="flex flex-col gap-3 rounded-xl border border-solid border-surface-5 bg-bg-raised p-4"
+		>
+			<label class="flex flex-col gap-1">
+				<span class="text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.amountField) }}
+				</span>
+				<input
+					v-model="form.amount"
+					type="text"
+					inputmode="decimal"
+					class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+				/>
+			</label>
+
+			<label class="flex flex-col gap-1">
+				<span class="text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.displayName) }}
+				</span>
+				<input
+					v-model="form.displayName"
+					type="text"
+					class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+				/>
+			</label>
+
+			<template v-if="editingId === null">
+				<label class="flex flex-col gap-1">
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.userUuid) }}
+					</span>
+					<input
+						v-model="form.userUuid"
+						type="text"
+						class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+				<label class="flex flex-col gap-1">
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.qq) }}
+					</span>
+					<input
+						v-model="form.qq"
+						type="text"
+						class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+			</template>
+			<label v-else class="flex items-center gap-2">
+				<input v-model="form.appendMode" type="checkbox" />
+				<span class="text-sm text-contrast">{{ formatMessage(messages.appendMode) }}</span>
+			</label>
+
+			<div class="flex justify-end gap-2">
+				<button
+					type="button"
+					class="rounded-full bg-button-bg px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+					@click="closeEditor"
+				>
+					{{ formatMessage(messages.cancel) }}
+				</button>
+				<button
+					type="button"
+					class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast disabled:opacity-50"
+					:disabled="!canSave"
+					@click="save"
+				>
+					{{ formatMessage(messages.save) }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 47f97b5..1bf25b8 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -1452,3 +1452,83 @@ export function skinSiteUpdateAccessAuditSettings(
 		body: { retentionDays },
 	})
 }
+
+export interface SkinSiteDonationEntry {
+	id: number
+	rank: number
+	username: string
+	avatar: string | null
+	amount: string
+}
+
+export interface SkinSiteDonationSummary {
+	totalAmount: string
+	donorCount: number
+}
+
+export interface SkinSiteDonationAdminEntry {
+	donor: SkinSiteDonationEntry
+	userUuid: string | null
+	qq: string | null
+	external: boolean
+	version: number
+	updatedAt: number
+}
+
+export interface SkinSiteDonationAdminPage {
+	items: SkinSiteDonationAdminEntry[]
+	summary: SkinSiteDonationSummary
+	hasMore: boolean
+}
+
+export function skinSiteAdminDonations(
+	offset = 0,
+): Promise<SkinSiteResponse<SkinSiteDonationAdminPage>> {
+	return skinSiteRequest<SkinSiteDonationAdminPage>('donation/admin/list?limit=20&offset=' + offset)
+}
+
+export function skinSiteFindAdminDonations(identity: {
+	userUuid?: string
+	qq?: string
+}): Promise<SkinSiteResponse<SkinSiteDonationAdminEntry[]>> {
+	const query = new URLSearchParams()
+	if (identity.userUuid) query.set('userUuid', identity.userUuid)
+	if (identity.qq) query.set('qq', identity.qq)
+	return skinSiteRequest<SkinSiteDonationAdminEntry[]>('donation/admin/find?' + query.toString())
+}
+
+export interface SkinSiteDonationCreate {
+	amount: string
+	userUuid?: string
+	qq?: string
+	displayName?: string
+}
+
+export function skinSiteCreateDonation(
+	data: SkinSiteDonationCreate,
+): Promise<SkinSiteResponse<number>> {
+	return skinSiteRequest<number>('donation/admin', { method: 'POST', body: data })
+}
+
+export interface SkinSiteDonationUpdate {
+	amount: string
+	version: number
+	displayName?: string
+	mode?: 'REPLACE' | 'APPEND'
+}
+
+export function skinSiteUpdateDonation(
+	id: number,
+	data: SkinSiteDonationUpdate,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('donation/admin/' + id, { method: 'PUT', body: data })
+}
+
+export function skinSiteDeleteDonation(
+	id: number,
+	version: number,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('donation/admin/' + id + '?version=' + version, {
+		method: 'DELETE',
+	})
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index db1b46e..1fd0639 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12023,5 +12023,31 @@
   "app.skin-site.admin.audit.retention": {"message": "Retention (days)"},
   "app.skin-site.admin.audit.record-limit": {"message": "Record limit"},
   "app.skin-site.admin.audit.save-retention": {"message": "Save"},
-  "app.skin-site.admin.audit.retention-saved": {"message": "Retention updated."}
+  "app.skin-site.admin.audit.retention-saved": {"message": "Retention updated."},
+  "app.skin-site.admin.donations.title": {"message": "Donations"},
+  "app.skin-site.admin.donations.loading": {"message": "Loading…"},
+  "app.skin-site.admin.donations.failed": {"message": "Could not load donations."},
+  "app.skin-site.admin.donations.empty": {"message": "No donations yet."},
+  "app.skin-site.admin.donations.total-amount": {"message": "Total"},
+  "app.skin-site.admin.donations.donor-count": {"message": "Donors"},
+  "app.skin-site.admin.donations.donor": {"message": "Donor"},
+  "app.skin-site.admin.donations.amount": {"message": "Amount"},
+  "app.skin-site.admin.donations.updated-at": {"message": "Updated"},
+  "app.skin-site.admin.donations.external": {"message": "External"},
+  "app.skin-site.admin.donations.linked": {"message": "Linked"},
+  "app.skin-site.admin.donations.create": {"message": "Add donation"},
+  "app.skin-site.admin.donations.save": {"message": "Save"},
+  "app.skin-site.admin.donations.cancel": {"message": "Cancel"},
+  "app.skin-site.admin.donations.edit": {"message": "Edit"},
+  "app.skin-site.admin.donations.remove": {"message": "Delete"},
+  "app.skin-site.admin.donations.amount-field": {"message": "Amount"},
+  "app.skin-site.admin.donations.display-name": {"message": "Display name"},
+  "app.skin-site.admin.donations.user-uuid": {"message": "User UUID"},
+  "app.skin-site.admin.donations.qq": {"message": "QQ"},
+  "app.skin-site.admin.donations.append-mode": {"message": "Append to existing amount"},
+  "app.skin-site.admin.donations.created": {"message": "Donation created."},
+  "app.skin-site.admin.donations.updated": {"message": "Donation updated."},
+  "app.skin-site.admin.donations.deleted": {"message": "Donation deleted."},
+  "app.skin-site.admin.donations.confirm-delete": {"message": "Delete the donation from “{name}”? This cannot be undone."},
+  "app.skin-site.admin.donations.load-more": {"message": "Load more"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index f5f3409..d86a373 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11854,5 +11854,31 @@
   "app.skin-site.admin.audit.retention": {"message": "保留天数"},
   "app.skin-site.admin.audit.record-limit": {"message": "记录上限"},
   "app.skin-site.admin.audit.save-retention": {"message": "保存"},
-  "app.skin-site.admin.audit.retention-saved": {"message": "保留天数已更新。"}
+  "app.skin-site.admin.audit.retention-saved": {"message": "保留天数已更新。"},
+  "app.skin-site.admin.donations.title": {"message": "捐赠管理"},
+  "app.skin-site.admin.donations.loading": {"message": "加载中…"},
+  "app.skin-site.admin.donations.failed": {"message": "无法加载捐赠列表。"},
+  "app.skin-site.admin.donations.empty": {"message": "暂无捐赠记录。"},
+  "app.skin-site.admin.donations.total-amount": {"message": "总额"},
+  "app.skin-site.admin.donations.donor-count": {"message": "捐赠人数"},
+  "app.skin-site.admin.donations.donor": {"message": "捐赠者"},
+  "app.skin-site.admin.donations.amount": {"message": "金额"},
+  "app.skin-site.admin.donations.updated-at": {"message": "更新时间"},
+  "app.skin-site.admin.donations.external": {"message": "外部"},
+  "app.skin-site.admin.donations.linked": {"message": "已绑定"},
+  "app.skin-site.admin.donations.create": {"message": "新增捐赠"},
+  "app.skin-site.admin.donations.save": {"message": "保存"},
+  "app.skin-site.admin.donations.cancel": {"message": "取消"},
+  "app.skin-site.admin.donations.edit": {"message": "编辑"},
+  "app.skin-site.admin.donations.remove": {"message": "删除"},
+  "app.skin-site.admin.donations.amount-field": {"message": "金额"},
+  "app.skin-site.admin.donations.display-name": {"message": "显示名称"},
+  "app.skin-site.admin.donations.user-uuid": {"message": "用户 UUID"},
+  "app.skin-site.admin.donations.qq": {"message": "QQ"},
+  "app.skin-site.admin.donations.append-mode": {"message": "在原有金额上累加"},
+  "app.skin-site.admin.donations.created": {"message": "捐赠记录已创建。"},
+  "app.skin-site.admin.donations.updated": {"message": "捐赠记录已更新。"},
+  "app.skin-site.admin.donations.deleted": {"message": "捐赠记录已删除。"},
+  "app.skin-site.admin.donations.confirm-delete": {"message": "确定删除「{name}」的捐赠记录吗？此操作不可撤销。"},
+  "app.skin-site.admin.donations.load-more": {"message": "加载更多"}
 }

From ede28e0062526118628e0ba6ab0db2683078f909 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 08:24:55 +0800
Subject: [PATCH 05/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=20Mod=20=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/skin-site/SkinSiteAdminView.vue        |   2 +
 .../ui/skin-site/admin/AdminModsPage.vue      | 788 ++++++++++++++++++
 .../app-frontend/src/helpers/skin-site-api.ts | 164 ++++
 .../app-frontend/src/locales/en-US/index.json |  49 +-
 .../app-frontend/src/locales/zh-CN/index.json |  49 +-
 scripts/axolotl/i18n-check.mjs                |   1 +
 6 files changed, 1051 insertions(+), 2 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
index 5da5085..66dc0a1 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
@@ -9,6 +9,7 @@ import AdminBroadcastPage from './admin/AdminBroadcastPage.vue'
 import AdminDonationsPage from './admin/AdminDonationsPage.vue'
 import AdminDownloadsPage from './admin/AdminDownloadsPage.vue'
 import AdminLauncherPage from './admin/AdminLauncherPage.vue'
+import AdminModsPage from './admin/AdminModsPage.vue'
 import AdminPlayersPage from './admin/AdminPlayersPage.vue'
 import AdminReviewPage from './admin/AdminReviewPage.vue'
 import AdminServersPage from './admin/AdminServersPage.vue'
@@ -179,6 +180,7 @@ const current = ref<AdminKey>('summary')
 				<AdminPlayersPage v-else-if="current === 'players'" />
 				<AdminReviewPage v-else-if="current === 'review'" />
 				<AdminLauncherPage v-else-if="current === 'launcher'" />
+				<AdminModsPage v-else-if="current === 'mods'" />
 				<AdminDownloadsPage v-else-if="current === 'downloads'" />
 				<AdminDonationsPage v-else-if="current === 'donations' && hasWebAdmin" />
 				<p v-else class="m-0 text-sm text-secondary">{{ current }}</p>
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue
new file mode 100644
index 0000000..5aab3a6
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue
@@ -0,0 +1,788 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref } from 'vue'
+
+import {
+	skinSiteActivateModRuntime,
+	skinSiteCreateModRuleTag,
+	skinSiteDeleteModFile,
+	skinSiteDeleteModRuleTag,
+	skinSiteDeleteModRuntime,
+	skinSiteModCount,
+	type SkinSiteModInfo,
+	skinSiteModList,
+	type SkinSiteModRuleTag,
+	skinSiteModRuleTags,
+	type SkinSiteModRuntimeAdminState,
+	type SkinSiteModRuntimeRelease,
+	skinSiteModRuntimeReleases,
+	skinSiteModSearch,
+	skinSiteUpdateModInfo,
+	skinSiteUpdateModRuleTag,
+	skinSiteUploadModRuntime,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.admin.mods.title', defaultMessage: 'Mods' },
+	tabMods: { id: 'app.skin-site.admin.mods.tab-mods', defaultMessage: 'Mod files' },
+	tabTags: { id: 'app.skin-site.admin.mods.tab-tags', defaultMessage: 'Rule tags' },
+	tabRuntime: { id: 'app.skin-site.admin.mods.tab-runtime', defaultMessage: 'Runtime' },
+	loading: { id: 'app.skin-site.admin.mods.loading', defaultMessage: 'Loading…' },
+	failed: { id: 'app.skin-site.admin.mods.failed', defaultMessage: 'Could not load mods.' },
+	empty: { id: 'app.skin-site.admin.mods.empty', defaultMessage: 'No mods found.' },
+	total: { id: 'app.skin-site.admin.mods.total', defaultMessage: '{count} mods' },
+	search: { id: 'app.skin-site.admin.mods.search', defaultMessage: 'Search by name' },
+	filterAll: { id: 'app.skin-site.admin.mods.filter-all', defaultMessage: 'All tags' },
+	prev: { id: 'app.skin-site.admin.mods.prev', defaultMessage: 'Previous' },
+	next: { id: 'app.skin-site.admin.mods.next', defaultMessage: 'Next' },
+	page: { id: 'app.skin-site.admin.mods.page', defaultMessage: 'Page {page}' },
+	name: { id: 'app.skin-site.admin.mods.name', defaultMessage: 'Name' },
+	version: { id: 'app.skin-site.admin.mods.version', defaultMessage: 'Version' },
+	modId: { id: 'app.skin-site.admin.mods.mod-id', defaultMessage: 'Mod ID' },
+	size: { id: 'app.skin-site.admin.mods.size', defaultMessage: 'Size' },
+	loaders: { id: 'app.skin-site.admin.mods.loaders', defaultMessage: 'Loaders' },
+	domainRules: { id: 'app.skin-site.admin.mods.domain-rules', defaultMessage: 'Domain rules' },
+	edit: { id: 'app.skin-site.admin.mods.edit', defaultMessage: 'Edit' },
+	save: { id: 'app.skin-site.admin.mods.save', defaultMessage: 'Save' },
+	cancel: { id: 'app.skin-site.admin.mods.cancel', defaultMessage: 'Cancel' },
+	remove: { id: 'app.skin-site.admin.mods.remove', defaultMessage: 'Delete' },
+	updated: { id: 'app.skin-site.admin.mods.updated', defaultMessage: 'Mod updated.' },
+	deleted: { id: 'app.skin-site.admin.mods.deleted', defaultMessage: 'Mod deleted.' },
+	confirmDelete: {
+		id: 'app.skin-site.admin.mods.confirm-delete',
+		defaultMessage: 'Delete mod “{name}”? This cannot be undone.',
+	},
+	ruleTags: { id: 'app.skin-site.admin.mods.rule-tags', defaultMessage: 'Rule tags' },
+	tagName: { id: 'app.skin-site.admin.mods.tag-name', defaultMessage: 'Tag name' },
+	tagRules: { id: 'app.skin-site.admin.mods.tag-rules', defaultMessage: 'Rules' },
+	tagRulesHint: {
+		id: 'app.skin-site.admin.mods.tag-rules-hint',
+		defaultMessage: 'One rule per line.',
+	},
+	newTag: { id: 'app.skin-site.admin.mods.new-tag', defaultMessage: 'New tag' },
+	tagCreated: { id: 'app.skin-site.admin.mods.tag-created', defaultMessage: 'Tag created.' },
+	tagUpdated: { id: 'app.skin-site.admin.mods.tag-updated', defaultMessage: 'Tag updated.' },
+	tagDeleted: { id: 'app.skin-site.admin.mods.tag-deleted', defaultMessage: 'Tag deleted.' },
+	confirmDeleteTag: {
+		id: 'app.skin-site.admin.mods.confirm-delete-tag',
+		defaultMessage: 'Delete tag “{name}”?',
+	},
+	runtime: { id: 'app.skin-site.admin.mods.runtime', defaultMessage: 'Runtime releases' },
+	manifestUrl: { id: 'app.skin-site.admin.mods.manifest-url', defaultMessage: 'Manifest URL' },
+	uploadRuntime: {
+		id: 'app.skin-site.admin.mods.upload-runtime',
+		defaultMessage: 'Upload runtime',
+	},
+	runtimeVersion: {
+		id: 'app.skin-site.admin.mods.runtime-version',
+		defaultMessage: 'Version',
+	},
+	uploading: { id: 'app.skin-site.admin.mods.uploading', defaultMessage: 'Uploading…' },
+	runtimeUploaded: {
+		id: 'app.skin-site.admin.mods.runtime-uploaded',
+		defaultMessage: 'Runtime uploaded.',
+	},
+	activate: { id: 'app.skin-site.admin.mods.activate', defaultMessage: 'Activate' },
+	activated: { id: 'app.skin-site.admin.mods.activated', defaultMessage: 'Runtime activated.' },
+	available: { id: 'app.skin-site.admin.mods.available', defaultMessage: 'Available' },
+	unavailable: { id: 'app.skin-site.admin.mods.unavailable', defaultMessage: 'Unavailable' },
+	active: { id: 'app.skin-site.admin.mods.active', defaultMessage: 'Active' },
+	uploader: { id: 'app.skin-site.admin.mods.uploader', defaultMessage: 'by {name}' },
+})
+
+type Tab = 'mods' | 'tags' | 'runtime'
+const tab = ref<Tab>('mods')
+
+const PAGE_SIZE = 20
+
+const mods = ref<SkinSiteModInfo[]>([])
+const modTotal = ref(0)
+const modOffset = ref(0)
+const modLoading = ref(true)
+const modFailed = ref(false)
+const searchKeyword = ref('')
+const tagFilter = ref<number | null>(null)
+
+const editingHash = ref<string | null>(null)
+const editForm = ref({ name: '', modId: '', version: '', domainRules: '' })
+const savingMod = ref(false)
+const deletingHash = ref<string | null>(null)
+
+const tags = ref<SkinSiteModRuleTag[]>([])
+const tagsLoading = ref(false)
+const tagEditorOpen = ref(false)
+const editingTagId = ref<number | null>(null)
+const tagForm = ref({ name: '', rules: '' })
+const savingTag = ref(false)
+
+const runtimeState = ref<SkinSiteModRuntimeAdminState | null>(null)
+const runtimeLoading = ref(false)
+const runtimeVersion = ref('')
+const runtimeFile = ref<HTMLInputElement | null>(null)
+const runtimeUploading = ref(false)
+const activatingRuntimeId = ref<number | null>(null)
+const deletingRuntimeId = ref<number | null>(null)
+
+const modPage = computed(() => Math.floor(modOffset.value / PAGE_SIZE) + 1)
+const modPageCount = computed(() => Math.max(1, Math.ceil(modTotal.value / PAGE_SIZE)))
+const hasPrev = computed(() => modOffset.value > 0)
+const hasNext = computed(() => modOffset.value + PAGE_SIZE < modTotal.value)
+
+function formatSize(bytes: number): string {
+	if (!Number.isFinite(bytes) || bytes < 0) return '—'
+	const units = ['B', 'KB', 'MB', 'GB']
+	let v = bytes
+	let i = 0
+	while (v >= 1024 && i < units.length - 1) {
+		v /= 1024
+		i++
+	}
+	return v.toFixed(i === 0 ? 0 : 2) + ' ' + units[i]
+}
+
+function formatDateTime(ts?: number | null): string {
+	if (!ts) return '—'
+	try {
+		return new Date(ts).toLocaleString()
+	} catch {
+		return '—'
+	}
+}
+
+async function loadMods(reset = true) {
+	if (reset) {
+		modLoading.value = true
+		mods.value = []
+		modOffset.value = 0
+	}
+	modFailed.value = false
+	try {
+		const kw = searchKeyword.value.trim()
+		if (kw) {
+			const result = await skinSiteModSearch(kw, tagFilter.value)
+			if (!result.success) throw new Error(result.errorMessage)
+			mods.value = result.payload ?? []
+			modTotal.value = mods.value.length
+		} else {
+			const [listResult, countResult] = await Promise.all([
+				skinSiteModList({
+					limit: PAGE_SIZE,
+					offset: modOffset.value,
+					ruleTagId: tagFilter.value,
+				}),
+				skinSiteModCount({ ruleTagId: tagFilter.value }),
+			])
+			if (!listResult.success) throw new Error(listResult.errorMessage)
+			mods.value = listResult.payload ?? []
+			if (countResult.success && typeof countResult.payload === 'number') {
+				modTotal.value = countResult.payload
+			}
+		}
+	} catch (error) {
+		modFailed.value = true
+		handleError(error)
+	} finally {
+		modLoading.value = false
+	}
+}
+
+function prevPage() {
+	if (hasPrev.value) {
+		modOffset.value = Math.max(0, modOffset.value - PAGE_SIZE)
+		void loadMods(false)
+	}
+}
+function nextPage() {
+	if (hasNext.value) {
+		modOffset.value += PAGE_SIZE
+		void loadMods(false)
+	}
+}
+
+async function loadTags() {
+	tagsLoading.value = true
+	try {
+		const result = await skinSiteModRuleTags()
+		if (result.success) tags.value = result.payload ?? []
+	} catch (error) {
+		handleError(error)
+	} finally {
+		tagsLoading.value = false
+	}
+}
+
+async function loadRuntime() {
+	runtimeLoading.value = true
+	try {
+		const result = await skinSiteModRuntimeReleases()
+		if (result.success) runtimeState.value = result.payload
+	} catch (error) {
+		handleError(error)
+	} finally {
+		runtimeLoading.value = false
+	}
+}
+
+async function switchTab(next: Tab) {
+	tab.value = next
+	if (next === 'tags' && !tags.value.length) await loadTags()
+	if (next === 'runtime' && !runtimeState.value) await loadRuntime()
+}
+
+function startEdit(mod: SkinSiteModInfo) {
+	editingHash.value = mod.hash
+	editForm.value = {
+		name: mod.metadata.name ?? mod.name,
+		modId: mod.metadata.modId ?? '',
+		version: mod.metadata.version ?? '',
+		domainRules: mod.domainRules.join(', '),
+	}
+}
+
+function cancelEdit() {
+	editingHash.value = null
+}
+
+async function saveMod(mod: SkinSiteModInfo) {
+	if (savingMod.value) return
+	savingMod.value = true
+	try {
+		const payload: SkinSiteModInfo = {
+			...mod,
+			name: editForm.value.name.trim() || mod.name,
+			domainRules: editForm.value.domainRules
+				.split(',')
+				.map((r) => r.trim())
+				.filter(Boolean),
+			metadata: {
+				...mod.metadata,
+				name: editForm.value.name.trim() || undefined,
+				modId: editForm.value.modId.trim() || undefined,
+				version: editForm.value.version.trim() || undefined,
+			},
+		}
+		const result = await skinSiteUpdateModInfo(payload)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.updated) })
+		cancelEdit()
+		await loadMods(false)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		savingMod.value = false
+	}
+}
+
+async function removeMod(mod: SkinSiteModInfo) {
+	if (deletingHash.value !== null) return
+	if (!window.confirm(formatMessage(messages.confirmDelete, { name: mod.name }))) return
+	deletingHash.value = mod.hash
+	try {
+		const result = await skinSiteDeleteModFile(mod.hash)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.deleted) })
+		await loadMods(false)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		deletingHash.value = null
+	}
+}
+
+function openNewTag() {
+	editingTagId.value = null
+	tagForm.value = { name: '', rules: '' }
+	tagEditorOpen.value = true
+}
+
+function openEditTag(tag: SkinSiteModRuleTag) {
+	editingTagId.value = tag.id
+	tagForm.value = { name: tag.name, rules: tag.rules.join('\n') }
+	tagEditorOpen.value = true
+}
+
+function closeTagEditor() {
+	tagEditorOpen.value = false
+	tagForm.value = { name: '', rules: '' }
+	editingTagId.value = null
+}
+
+async function saveTag() {
+	const name = tagForm.value.name.trim()
+	if (!name || savingTag.value) return
+	savingTag.value = true
+	try {
+		const rules = tagForm.value.rules
+			.split('\n')
+			.map((r) => r.trim())
+			.filter(Boolean)
+		const result =
+			editingTagId.value === null
+				? await skinSiteCreateModRuleTag(name, rules)
+				: await skinSiteUpdateModRuleTag(editingTagId.value, name, rules)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({
+			type: 'success',
+			title: formatMessage(editingTagId.value === null ? messages.tagCreated : messages.tagUpdated),
+		})
+		closeTagEditor()
+		await loadTags()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		savingTag.value = false
+	}
+}
+
+async function removeTag(tag: SkinSiteModRuleTag) {
+	if (!window.confirm(formatMessage(messages.confirmDeleteTag, { name: tag.name }))) return
+	try {
+		const result = await skinSiteDeleteModRuleTag(tag.id)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.tagDeleted) })
+		if (tagFilter.value === tag.id) tagFilter.value = null
+		await loadTags()
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+function pickRuntimeFile() {
+	runtimeFile.value?.click()
+}
+
+async function onRuntimeFile(event: Event) {
+	const input = event.target as HTMLInputElement
+	const file = input.files?.[0]
+	input.value = ''
+	const version = runtimeVersion.value.trim()
+	if (!file || !version || runtimeUploading.value) return
+	runtimeUploading.value = true
+	try {
+		const result = await skinSiteUploadModRuntime(version, file)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.runtimeUploaded) })
+		runtimeVersion.value = ''
+		await loadRuntime()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		runtimeUploading.value = false
+	}
+}
+
+async function activateRuntime(release: SkinSiteModRuntimeRelease) {
+	if (activatingRuntimeId.value !== null) return
+	activatingRuntimeId.value = release.id
+	try {
+		const result = await skinSiteActivateModRuntime(release.id)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.activated) })
+		await loadRuntime()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		activatingRuntimeId.value = null
+	}
+}
+
+async function removeRuntime(release: SkinSiteModRuntimeRelease) {
+	if (deletingRuntimeId.value !== null) return
+	deletingRuntimeId.value = release.id
+	try {
+		const result = await skinSiteDeleteModRuntime(release.id)
+		if (!result.success) throw new Error(result.errorMessage)
+		await loadRuntime()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		deletingRuntimeId.value = null
+	}
+}
+
+onMounted(async () => {
+	await loadTags()
+	await loadMods(true)
+})
+</script>
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-2">
+			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold"
+				:class="tab === 'mods' ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+				@click="switchTab('mods')"
+			>
+				{{ formatMessage(messages.tabMods) }}
+			</button>
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold"
+				:class="tab === 'tags' ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+				@click="switchTab('tags')"
+			>
+				{{ formatMessage(messages.tabTags) }}
+			</button>
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold"
+				:class="tab === 'runtime' ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+				@click="switchTab('runtime')"
+			>
+				{{ formatMessage(messages.tabRuntime) }}
+			</button>
+		</div>
+
+		<template v-if="tab === 'mods'">
+			<div class="flex flex-wrap items-center gap-2">
+				<input
+					v-model="searchKeyword"
+					type="text"
+					:placeholder="formatMessage(messages.search)"
+					class="min-w-0 flex-1 rounded-full border border-solid border-surface-5 bg-bg px-3 py-1 text-xs text-contrast outline-none focus:border-brand"
+					@keyup.enter="loadMods(true)"
+				/>
+				<select
+					v-model="tagFilter"
+					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast"
+					@change="loadMods(true)"
+				>
+					<option :value="null">{{ formatMessage(messages.filterAll) }}</option>
+					<option v-for="tag in tags" :key="tag.id" :value="tag.id">{{ tag.name }}</option>
+				</select>
+				<span class="text-xs text-secondary">
+					{{ formatMessage(messages.total, { count: modTotal }) }}
+				</span>
+			</div>
+
+			<div v-if="modLoading" class="flex items-center gap-2 text-sm text-secondary">
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<p v-else-if="modFailed" class="m-0 text-sm text-secondary">
+				{{ formatMessage(messages.failed) }}
+			</p>
+			<p v-else-if="!mods.length" class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+				{{ formatMessage(messages.empty) }}
+			</p>
+			<div v-else class="flex flex-col gap-2">
+				<div
+					v-for="mod in mods"
+					:key="mod.hash"
+					class="flex flex-col gap-2 rounded-xl bg-bg-raised p-3"
+				>
+					<div class="flex flex-wrap items-center gap-2">
+						<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">
+							{{ mod.metadata.name || mod.name }}
+						</span>
+						<span class="shrink-0 text-xs text-secondary">{{ formatSize(mod.size) }}</span>
+						<span
+							v-for="loader in mod.metadata.loaderType"
+							:key="loader"
+							class="shrink-0 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+						>
+							{{ loader }}
+						</span>
+					</div>
+					<span class="truncate font-mono text-[10px] text-secondary">{{ mod.hash }}</span>
+
+					<div v-if="editingHash === mod.hash" class="grid grid-cols-1 gap-2 sm:grid-cols-3">
+						<label class="flex flex-col gap-1">
+							<span class="text-xs text-secondary">{{ formatMessage(messages.name) }}</span>
+							<input
+								v-model="editForm.name"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+						<label class="flex flex-col gap-1">
+							<span class="text-xs text-secondary">{{ formatMessage(messages.modId) }}</span>
+							<input
+								v-model="editForm.modId"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+						<label class="flex flex-col gap-1">
+							<span class="text-xs text-secondary">{{ formatMessage(messages.version) }}</span>
+							<input
+								v-model="editForm.version"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+						<label class="flex flex-col gap-1 sm:col-span-3">
+							<span class="text-xs text-secondary">{{ formatMessage(messages.domainRules) }}</span>
+							<input
+								v-model="editForm.domainRules"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+					</div>
+
+					<div class="flex flex-wrap gap-2">
+						<template v-if="editingHash === mod.hash">
+							<button
+								type="button"
+								class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+								@click="cancelEdit"
+							>
+								{{ formatMessage(messages.cancel) }}
+							</button>
+							<button
+								type="button"
+								class="rounded-full bg-brand px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+								:disabled="savingMod"
+								@click="saveMod(mod)"
+							>
+								{{ formatMessage(messages.save) }}
+							</button>
+						</template>
+						<template v-else>
+							<span
+								v-for="rule in mod.domainRules"
+								:key="rule"
+								class="rounded bg-bg px-2 py-0.5 font-mono text-[10px] text-secondary"
+							>
+								{{ rule }}
+							</span>
+							<button
+								type="button"
+								class="ml-auto rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+								@click="startEdit(mod)"
+							>
+								{{ formatMessage(messages.edit) }}
+							</button>
+							<button
+								type="button"
+								class="rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+								:disabled="deletingHash !== null"
+								@click="removeMod(mod)"
+							>
+								{{ formatMessage(messages.remove) }}
+							</button>
+						</template>
+					</div>
+				</div>
+
+				<div class="flex items-center justify-center gap-3 pt-2">
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="!hasPrev"
+						@click="prevPage"
+					>
+						{{ formatMessage(messages.prev) }}
+					</button>
+					<span class="text-xs text-secondary">
+						{{ formatMessage(messages.page, { page: modPage }) }} / {{ modPageCount }}
+					</span>
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="!hasNext"
+						@click="nextPage"
+					>
+						{{ formatMessage(messages.next) }}
+					</button>
+				</div>
+			</div>
+		</template>
+		<template v-else-if="tab === 'tags'">
+			<div class="flex items-center gap-2">
+				<button
+					type="button"
+					class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+					@click="openNewTag"
+				>
+					{{ formatMessage(messages.newTag) }}
+				</button>
+			</div>
+
+			<div v-if="tagsLoading" class="flex items-center gap-2 text-sm text-secondary">
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<div v-else-if="!tags.length" class="rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+				{{ formatMessage(messages.empty) }}
+			</div>
+			<div v-else class="flex flex-col gap-2">
+				<div
+					v-for="tag in tags"
+					:key="tag.id"
+					class="flex flex-wrap items-center gap-2 rounded-xl bg-bg-raised p-3"
+				>
+					<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">
+						{{ tag.name }}
+					</span>
+					<span class="text-xs text-secondary">×{{ tag.rules.length }}</span>
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="openEditTag(tag)"
+					>
+						{{ formatMessage(messages.edit) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="removeTag(tag)"
+					>
+						{{ formatMessage(messages.remove) }}
+					</button>
+				</div>
+			</div>
+
+			<div
+				v-if="tagEditorOpen"
+				class="flex flex-col gap-2 rounded-xl border border-solid border-surface-5 bg-bg-raised p-4"
+			>
+				<label class="flex flex-col gap-1">
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.tagName) }}
+					</span>
+					<input
+						v-model="tagForm.name"
+						type="text"
+						class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+				<label class="flex flex-col gap-1">
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.tagRules) }}
+					</span>
+					<textarea
+						v-model="tagForm.rules"
+						rows="5"
+						:placeholder="formatMessage(messages.tagRulesHint)"
+						class="w-full resize-y rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 font-mono text-xs text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+				<div class="flex justify-end gap-2">
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+						@click="closeTagEditor"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast disabled:opacity-50"
+						:disabled="savingTag || !tagForm.name.trim()"
+						@click="saveTag"
+					>
+						{{ formatMessage(messages.save) }}
+					</button>
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<div class="flex flex-wrap items-center gap-2">
+				<input ref="runtimeFile" type="file" class="hidden" @change="onRuntimeFile" />
+				<input
+					v-model="runtimeVersion"
+					type="text"
+					:placeholder="formatMessage(messages.runtimeVersion)"
+					class="w-40 rounded-lg border border-solid border-surface-5 bg-bg px-3 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+				/>
+				<button
+					type="button"
+					class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					:disabled="runtimeUploading || !runtimeVersion.trim()"
+					@click="pickRuntimeFile"
+				>
+					{{
+						runtimeUploading
+							? formatMessage(messages.uploading)
+							: formatMessage(messages.uploadRuntime)
+					}}
+				</button>
+			</div>
+
+			<div
+				v-if="runtimeState && runtimeState.manifestUrl"
+				class="flex flex-wrap items-center gap-2 rounded-xl bg-bg-raised p-3"
+			>
+				<span class="text-xs font-semibold text-contrast">
+					{{ formatMessage(messages.manifestUrl) }}
+				</span>
+				<code class="min-w-0 flex-1 truncate text-xs text-secondary">
+					{{ runtimeState.manifestUrl }}
+				</code>
+			</div>
+
+			<div v-if="runtimeLoading" class="flex items-center gap-2 text-sm text-secondary">
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<p
+				v-else-if="!runtimeState || !runtimeState.releases.length"
+				class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary"
+			>
+				{{ formatMessage(messages.empty) }}
+			</p>
+			<div v-else class="flex flex-col gap-2">
+				<div
+					v-for="release in runtimeState.releases"
+					:key="release.id"
+					class="flex flex-wrap items-center gap-3 rounded-xl bg-bg-raised p-3"
+				>
+					<div class="flex min-w-0 flex-1 flex-col">
+						<span class="truncate text-sm font-semibold text-contrast">
+							{{ release.version }}
+							<span class="text-xs font-normal text-secondary">#{{ release.id }}</span>
+						</span>
+						<span class="truncate text-xs text-secondary">
+							{{ formatMessage(messages.uploader, { name: release.uploadedBy }) }} ·
+							{{ formatDateTime(release.uploadedAt) }}
+						</span>
+					</div>
+					<span class="shrink-0 text-xs text-secondary">
+						{{ formatSize(release.fileSize) }}
+					</span>
+					<span
+						v-if="release.active"
+						class="shrink-0 rounded-full bg-green px-2 py-0.5 text-[10px] font-semibold text-contrast"
+					>
+						{{ formatMessage(messages.active) }}
+					</span>
+					<span
+						class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold"
+						:class="release.available ? 'bg-button-bg text-secondary' : 'bg-orange text-contrast'"
+					>
+						{{
+							release.available
+								? formatMessage(messages.available)
+								: formatMessage(messages.unavailable)
+						}}
+					</span>
+					<button
+						v-if="!release.active"
+						type="button"
+						class="shrink-0 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="activatingRuntimeId !== null"
+						@click="activateRuntime(release)"
+					>
+						{{ formatMessage(messages.activate) }}
+					</button>
+					<button
+						type="button"
+						class="shrink-0 rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="deletingRuntimeId !== null || release.active"
+						@click="removeRuntime(release)"
+					>
+						{{ formatMessage(messages.remove) }}
+					</button>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 1bf25b8..a9f1b9e 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -1532,3 +1532,167 @@ export function skinSiteDeleteDonation(
 		method: 'DELETE',
 	})
 }
+
+export type SkinSiteModLoaderType = 'FABRIC' | 'FORGE'
+
+export interface SkinSiteModMetadata {
+	modId?: string
+	name?: string
+	version?: string
+	iconBytes?: string
+	loaderType: SkinSiteModLoaderType[]
+}
+
+export interface SkinSiteModInfo {
+	domainRules: string[]
+	hash: string
+	name: string
+	size: number
+	metadata: SkinSiteModMetadata
+}
+
+export interface SkinSiteModRuleTag {
+	id: number
+	name: string
+	rules: string[]
+}
+
+export function skinSiteModCount(params?: {
+	serverAddr?: string
+	ruleTagId?: number | null
+}): Promise<SkinSiteResponse<number>> {
+	const query = new URLSearchParams()
+	const addr = params?.serverAddr?.trim()
+	if (addr) query.set('server_addr', addr)
+	if (params?.ruleTagId != null) query.set('rule_tag_id', String(params.ruleTagId))
+	const suffix = query.toString() ? '?' + query.toString() : ''
+	return skinSiteRequest<number>('query/mod/number' + suffix, { type: 'mod' })
+}
+
+export function skinSiteModList(params: {
+	limit: number
+	offset: number
+	serverAddr?: string
+	ruleTagId?: number | null
+}): Promise<SkinSiteResponse<SkinSiteModInfo[]>> {
+	return skinSiteRequest<SkinSiteModInfo[]>('query/mod/list', {
+		method: 'POST',
+		type: 'mod',
+		body: {
+			offset: params.offset || 0,
+			limit: params.limit || 0,
+			serverAddr: params.serverAddr?.trim() || undefined,
+			ruleTagId: params.ruleTagId ?? undefined,
+		},
+	})
+}
+
+export function skinSiteModSearch(
+	name: string,
+	ruleTagId?: number | null,
+): Promise<SkinSiteResponse<SkinSiteModInfo[]>> {
+	const query = new URLSearchParams()
+	if (ruleTagId != null) query.set('rule_tag_id', String(ruleTagId))
+	const suffix = query.toString() ? '?' + query.toString() : ''
+	return skinSiteRequest<SkinSiteModInfo[]>(
+		'query/mod/search/' + encodeURIComponent(name) + suffix,
+		{ type: 'mod' },
+	)
+}
+
+export function skinSiteUpdateModInfo(info: SkinSiteModInfo): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('update/info', { method: 'POST', type: 'mod', body: info })
+}
+
+export function skinSiteDeleteModFile(hash: string): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>(hash, { method: 'DELETE', type: 'mod' })
+}
+
+export function skinSiteDeleteMultiModFile(hashes: string[]): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('delete/multimod', {
+		method: 'POST',
+		type: 'mod',
+		body: { modHashes: hashes },
+	})
+}
+
+export function skinSiteModRuleTags(): Promise<SkinSiteResponse<SkinSiteModRuleTag[]>> {
+	return skinSiteRequest<SkinSiteModRuleTag[]>('rule-tags', { type: 'mod' })
+}
+
+export function skinSiteCreateModRuleTag(
+	name: string,
+	rules: string[],
+): Promise<SkinSiteResponse<SkinSiteModRuleTag>> {
+	return skinSiteRequest<SkinSiteModRuleTag>('rule-tags', {
+		method: 'POST',
+		type: 'mod',
+		body: { name, rules },
+	})
+}
+
+export function skinSiteUpdateModRuleTag(
+	id: number,
+	name: string,
+	rules: string[],
+): Promise<SkinSiteResponse<SkinSiteModRuleTag>> {
+	return skinSiteRequest<SkinSiteModRuleTag>('rule-tags/' + id, {
+		method: 'POST',
+		type: 'mod',
+		body: { name, rules },
+	})
+}
+
+export function skinSiteDeleteModRuleTag(id: number): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('rule-tags/' + id, { method: 'DELETE', type: 'mod' })
+}
+
+export interface SkinSiteModRuntimeRelease {
+	id: number
+	version: string
+	fileName: string
+	sha256: string
+	fileSize: number
+	uploadedBy: string
+	uploadedAt: number
+	publishedAt: number | null
+	active: boolean
+	available: boolean
+	downloadUrl: string
+}
+
+export interface SkinSiteModRuntimeAdminState {
+	manifestUrl: string
+	releases: SkinSiteModRuntimeRelease[]
+}
+
+export function skinSiteModRuntimeReleases(): Promise<
+	SkinSiteResponse<SkinSiteModRuntimeAdminState>
+> {
+	return skinSiteRequest<SkinSiteModRuntimeAdminState>('runtime/admin', { type: 'mod' })
+}
+
+export function skinSiteUploadModRuntime(
+	version: string,
+	file: File,
+): Promise<SkinSiteResponse<SkinSiteModRuntimeRelease>> {
+	const form = new FormData()
+	form.append('runtime', file, file.name)
+	return skinSiteRequest<SkinSiteModRuntimeRelease>(
+		'runtime/admin/upload?version=' + encodeURIComponent(version),
+		{ method: 'POST', type: 'mod', form },
+	)
+}
+
+export function skinSiteActivateModRuntime(
+	id: number,
+): Promise<SkinSiteResponse<SkinSiteModRuntimeRelease>> {
+	return skinSiteRequest<SkinSiteModRuntimeRelease>('runtime/admin/' + id + '/activate', {
+		method: 'POST',
+		type: 'mod',
+	})
+}
+
+export function skinSiteDeleteModRuntime(id: number): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('runtime/admin/' + id, { method: 'DELETE', type: 'mod' })
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 1fd0639..517a390 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12049,5 +12049,52 @@
   "app.skin-site.admin.donations.updated": {"message": "Donation updated."},
   "app.skin-site.admin.donations.deleted": {"message": "Donation deleted."},
   "app.skin-site.admin.donations.confirm-delete": {"message": "Delete the donation from “{name}”? This cannot be undone."},
-  "app.skin-site.admin.donations.load-more": {"message": "Load more"}
+  "app.skin-site.admin.donations.load-more": {"message": "Load more"},
+  "app.skin-site.admin.mods.title": {"message": "Mods"},
+  "app.skin-site.admin.mods.tab-mods": {"message": "Mod files"},
+  "app.skin-site.admin.mods.tab-tags": {"message": "Rule tags"},
+  "app.skin-site.admin.mods.tab-runtime": {"message": "Runtime"},
+  "app.skin-site.admin.mods.loading": {"message": "Loading…"},
+  "app.skin-site.admin.mods.failed": {"message": "Could not load mods."},
+  "app.skin-site.admin.mods.empty": {"message": "No mods found."},
+  "app.skin-site.admin.mods.total": {"message": "{count} mods"},
+  "app.skin-site.admin.mods.search": {"message": "Search by name"},
+  "app.skin-site.admin.mods.filter-all": {"message": "All tags"},
+  "app.skin-site.admin.mods.prev": {"message": "Previous"},
+  "app.skin-site.admin.mods.next": {"message": "Next"},
+  "app.skin-site.admin.mods.page": {"message": "Page {page}"},
+  "app.skin-site.admin.mods.name": {"message": "Name"},
+  "app.skin-site.admin.mods.version": {"message": "Version"},
+  "app.skin-site.admin.mods.mod-id": {"message": "Mod ID"},
+  "app.skin-site.admin.mods.size": {"message": "Size"},
+  "app.skin-site.admin.mods.loaders": {"message": "Loaders"},
+  "app.skin-site.admin.mods.domain-rules": {"message": "Domain rules"},
+  "app.skin-site.admin.mods.edit": {"message": "Edit"},
+  "app.skin-site.admin.mods.save": {"message": "Save"},
+  "app.skin-site.admin.mods.cancel": {"message": "Cancel"},
+  "app.skin-site.admin.mods.remove": {"message": "Delete"},
+  "app.skin-site.admin.mods.updated": {"message": "Mod updated."},
+  "app.skin-site.admin.mods.deleted": {"message": "Mod deleted."},
+  "app.skin-site.admin.mods.confirm-delete": {"message": "Delete mod “{name}”? This cannot be undone."},
+  "app.skin-site.admin.mods.rule-tags": {"message": "Rule tags"},
+  "app.skin-site.admin.mods.tag-name": {"message": "Tag name"},
+  "app.skin-site.admin.mods.tag-rules": {"message": "Rules"},
+  "app.skin-site.admin.mods.tag-rules-hint": {"message": "One rule per line."},
+  "app.skin-site.admin.mods.new-tag": {"message": "New tag"},
+  "app.skin-site.admin.mods.tag-created": {"message": "Tag created."},
+  "app.skin-site.admin.mods.tag-updated": {"message": "Tag updated."},
+  "app.skin-site.admin.mods.tag-deleted": {"message": "Tag deleted."},
+  "app.skin-site.admin.mods.confirm-delete-tag": {"message": "Delete tag “{name}”?"},
+  "app.skin-site.admin.mods.runtime": {"message": "Runtime releases"},
+  "app.skin-site.admin.mods.manifest-url": {"message": "Manifest URL"},
+  "app.skin-site.admin.mods.upload-runtime": {"message": "Upload runtime"},
+  "app.skin-site.admin.mods.runtime-version": {"message": "Version"},
+  "app.skin-site.admin.mods.uploading": {"message": "Uploading…"},
+  "app.skin-site.admin.mods.runtime-uploaded": {"message": "Runtime uploaded."},
+  "app.skin-site.admin.mods.activate": {"message": "Activate"},
+  "app.skin-site.admin.mods.activated": {"message": "Runtime activated."},
+  "app.skin-site.admin.mods.available": {"message": "Available"},
+  "app.skin-site.admin.mods.unavailable": {"message": "Unavailable"},
+  "app.skin-site.admin.mods.active": {"message": "Active"},
+  "app.skin-site.admin.mods.uploader": {"message": "by {name}"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index d86a373..acaa206 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11880,5 +11880,52 @@
   "app.skin-site.admin.donations.updated": {"message": "捐赠记录已更新。"},
   "app.skin-site.admin.donations.deleted": {"message": "捐赠记录已删除。"},
   "app.skin-site.admin.donations.confirm-delete": {"message": "确定删除「{name}」的捐赠记录吗？此操作不可撤销。"},
-  "app.skin-site.admin.donations.load-more": {"message": "加载更多"}
+  "app.skin-site.admin.donations.load-more": {"message": "加载更多"},
+  "app.skin-site.admin.mods.title": {"message": "Mod 管理"},
+  "app.skin-site.admin.mods.tab-mods": {"message": "Mod 文件"},
+  "app.skin-site.admin.mods.tab-tags": {"message": "规则标签"},
+  "app.skin-site.admin.mods.tab-runtime": {"message": "运行时"},
+  "app.skin-site.admin.mods.loading": {"message": "加载中…"},
+  "app.skin-site.admin.mods.failed": {"message": "无法加载 Mod 列表。"},
+  "app.skin-site.admin.mods.empty": {"message": "没有找到 Mod。"},
+  "app.skin-site.admin.mods.total": {"message": "共 {count} 个 Mod"},
+  "app.skin-site.admin.mods.search": {"message": "按名称搜索"},
+  "app.skin-site.admin.mods.filter-all": {"message": "全部标签"},
+  "app.skin-site.admin.mods.prev": {"message": "上一页"},
+  "app.skin-site.admin.mods.next": {"message": "下一页"},
+  "app.skin-site.admin.mods.page": {"message": "第 {page} 页"},
+  "app.skin-site.admin.mods.name": {"message": "名称"},
+  "app.skin-site.admin.mods.version": {"message": "版本"},
+  "app.skin-site.admin.mods.mod-id": {"message": "Mod ID"},
+  "app.skin-site.admin.mods.size": {"message": "大小"},
+  "app.skin-site.admin.mods.loaders": {"message": "加载器"},
+  "app.skin-site.admin.mods.domain-rules": {"message": "域名规则"},
+  "app.skin-site.admin.mods.edit": {"message": "编辑"},
+  "app.skin-site.admin.mods.save": {"message": "保存"},
+  "app.skin-site.admin.mods.cancel": {"message": "取消"},
+  "app.skin-site.admin.mods.remove": {"message": "删除"},
+  "app.skin-site.admin.mods.updated": {"message": "Mod 已更新。"},
+  "app.skin-site.admin.mods.deleted": {"message": "Mod 已删除。"},
+  "app.skin-site.admin.mods.confirm-delete": {"message": "确定删除 Mod「{name}」吗？此操作不可撤销。"},
+  "app.skin-site.admin.mods.rule-tags": {"message": "规则标签"},
+  "app.skin-site.admin.mods.tag-name": {"message": "标签名称"},
+  "app.skin-site.admin.mods.tag-rules": {"message": "规则"},
+  "app.skin-site.admin.mods.tag-rules-hint": {"message": "每行一条规则。"},
+  "app.skin-site.admin.mods.new-tag": {"message": "新建标签"},
+  "app.skin-site.admin.mods.tag-created": {"message": "标签已创建。"},
+  "app.skin-site.admin.mods.tag-updated": {"message": "标签已更新。"},
+  "app.skin-site.admin.mods.tag-deleted": {"message": "标签已删除。"},
+  "app.skin-site.admin.mods.confirm-delete-tag": {"message": "确定删除标签「{name}」吗？"},
+  "app.skin-site.admin.mods.runtime": {"message": "运行时版本"},
+  "app.skin-site.admin.mods.manifest-url": {"message": "清单地址"},
+  "app.skin-site.admin.mods.upload-runtime": {"message": "上传运行时"},
+  "app.skin-site.admin.mods.runtime-version": {"message": "版本"},
+  "app.skin-site.admin.mods.uploading": {"message": "上传中…"},
+  "app.skin-site.admin.mods.runtime-uploaded": {"message": "运行时已上传。"},
+  "app.skin-site.admin.mods.activate": {"message": "设为当前"},
+  "app.skin-site.admin.mods.activated": {"message": "运行时已启用。"},
+  "app.skin-site.admin.mods.available": {"message": "可用"},
+  "app.skin-site.admin.mods.unavailable": {"message": "不可用"},
+  "app.skin-site.admin.mods.active": {"message": "当前版本"},
+  "app.skin-site.admin.mods.uploader": {"message": "由 {name} 上传"}
 }
diff --git a/scripts/axolotl/i18n-check.mjs b/scripts/axolotl/i18n-check.mjs
index b277c6f..1482e1e 100644
--- a/scripts/axolotl/i18n-check.mjs
+++ b/scripts/axolotl/i18n-check.mjs
@@ -34,6 +34,7 @@ const allowedUntranslatedMessages = new Set([
 	'QQ',
 	'IP',
 	'URL',
+	'Mod ID',
 	'LogShare AI',
 	'NeoForge',
 	'OptiFine',

From 64f2f85607aedfb4299ead30982a83c097e8ee95 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 08:38:14 +0800
Subject: [PATCH 06/16] =?UTF-8?q?fix:=20=E9=87=8D=E5=91=BD=E5=90=8D?=
 =?UTF-8?q?=E5=85=AC=E5=BC=80=E4=B8=8B=E8=BD=BD=E4=B8=8E=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E9=81=BF=E5=85=8D=E5=AF=BC=E5=87=BA=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/skin-site/SkinSiteDonationCard.vue     |  9 ++-
 .../ui/skin-site/SkinSiteDownloadsView.vue    | 22 ++++----
 .../ui/skin-site/SkinSiteMapView.vue          |  6 +-
 .../app-frontend/src/helpers/skin-site-api.ts | 55 ++++++++++---------
 4 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteDonationCard.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDonationCard.vue
index 95a4460..137f397 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteDonationCard.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDonationCard.vue
@@ -3,7 +3,10 @@ import { HeartIcon, SpinnerIcon } from '@modrinth/assets'
 import { defineMessages, useVIntl } from '@modrinth/ui'
 import { onMounted, ref } from 'vue'
 
-import { type SkinSiteDonationSummary, skinSiteDonationSummary } from '@/helpers/skin-site-api'
+import {
+	type SkinSitePublicDonationSummary,
+	skinSitePublicDonationSummary,
+} from '@/helpers/skin-site-api'
 
 const { formatMessage } = useVIntl()
 
@@ -18,13 +21,13 @@ const messages = defineMessages({
 	loading: { id: 'app.skin-site.home.donation.loading', defaultMessage: 'Loading…' },
 })
 
-const summary = ref<SkinSiteDonationSummary | null>(null)
+const summary = ref<SkinSitePublicDonationSummary | null>(null)
 const loading = ref(true)
 const failed = ref(false)
 
 onMounted(async () => {
 	try {
-		const result = await skinSiteDonationSummary()
+		const result = await skinSitePublicDonationSummary()
 		if (result.success) summary.value = result.payload
 		else failed.value = true
 	} catch {
diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
index 7c22e2f..3e65ff9 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
@@ -4,11 +4,11 @@ import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/u
 import { computed, onMounted, ref } from 'vue'
 
 import {
-	skinSiteDownloadCategories,
-	type SkinSiteDownloadCategory,
-	type SkinSiteDownloadItem,
-	skinSiteDownloadList,
-	type SkinSiteDownloadStatus,
+	skinSitePublicDownloadCategories,
+	type SkinSitePublicDownloadCategory,
+	type SkinSitePublicDownloadItem,
+	skinSitePublicDownloadList,
+	type SkinSitePublicDownloadStatus,
 } from '@/helpers/skin-site-api'
 
 const { formatMessage } = useVIntl()
@@ -36,8 +36,8 @@ const messages = defineMessages({
 
 const emit = defineEmits<{ (e: 'back'): void }>()
 
-const items = ref<SkinSiteDownloadItem[]>([])
-const categories = ref<SkinSiteDownloadCategory[]>([])
+const items = ref<SkinSitePublicDownloadItem[]>([])
+const categories = ref<SkinSitePublicDownloadCategory[]>([])
 const selectedCategory = ref<string | null>(null)
 const loading = ref(true)
 const failed = ref(false)
@@ -48,7 +48,7 @@ const filtered = computed(() =>
 		: items.value,
 )
 
-function statusLabel(status: SkinSiteDownloadStatus): string {
+function statusLabel(status: SkinSitePublicDownloadStatus): string {
 	switch (status) {
 		case 'NEW':
 			return formatMessage(messages.statusNew)
@@ -68,7 +68,7 @@ async function openUrl(url: string) {
 	await open(url)
 }
 
-function download(item: SkinSiteDownloadItem) {
+function download(item: SkinSitePublicDownloadItem) {
 	const route = item.routes?.[0]
 	void openUrl(route?.url ?? item.url)
 }
@@ -78,8 +78,8 @@ async function load() {
 	failed.value = false
 	try {
 		const [listResult, categoryResult] = await Promise.all([
-			skinSiteDownloadList(),
-			skinSiteDownloadCategories(),
+			skinSitePublicDownloadList(),
+			skinSitePublicDownloadCategories(),
 		])
 		if (!listResult.success) throw new Error(listResult.errorMessage)
 		items.value = listResult.payload ?? []
diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteMapView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteMapView.vue
index 77fe917..5e1fd17 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteMapView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteMapView.vue
@@ -3,7 +3,7 @@ import { ExternalIcon, SpinnerIcon } from '@modrinth/assets'
 import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import { type SkinSiteMapServer, skinSiteMapServers } from '@/helpers/skin-site-api'
+import { type SkinSitePublicMapServer, skinSitePublicMapServers } from '@/helpers/skin-site-api'
 
 const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()
@@ -23,7 +23,7 @@ const messages = defineMessages({
 
 const emit = defineEmits<{ (e: 'back'): void }>()
 
-const servers = ref<SkinSiteMapServer[]>([])
+const servers = ref<SkinSitePublicMapServer[]>([])
 const internal = ref(false)
 const serverIndex = ref(0)
 const mapIndex = ref(0)
@@ -52,7 +52,7 @@ async function load() {
 	loading.value = true
 	failed.value = false
 	try {
-		const result = await skinSiteMapServers()
+		const result = await skinSitePublicMapServers()
 		if (!result.success) throw new Error(result.errorMessage)
 		servers.value = result.payload ?? []
 		if (!servers.value.some((s) => !s.internal)) internal.value = true
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index a9f1b9e..21fd358 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -389,12 +389,12 @@ export function skinSitePasswordReset(payload: {
 // Donations & announcements
 // ---------------------------------------------------------------------------
 
-export interface SkinSiteDonationSummary {
+export interface SkinSitePublicDonationSummary {
 	totalAmount: string
 	donorCount: number
 }
 
-export interface SkinSiteDonationEntry {
+export interface SkinSitePublicDonationEntry {
 	id: number
 	rank: number
 	username: string
@@ -402,14 +402,16 @@ export interface SkinSiteDonationEntry {
 	amount: string
 }
 
-export interface SkinSiteDonationPage {
-	items: SkinSiteDonationEntry[]
-	summary: SkinSiteDonationSummary
+export interface SkinSitePublicDonationPage {
+	items: SkinSitePublicDonationEntry[]
+	summary: SkinSitePublicDonationSummary
 	hasMore: boolean
 }
 
-export function skinSiteDonationSummary(): Promise<SkinSiteResponse<SkinSiteDonationSummary>> {
-	return skinSiteRequest<SkinSiteDonationSummary>('donation/summary', { auth: false })
+export function skinSitePublicDonationSummary(): Promise<
+	SkinSiteResponse<SkinSitePublicDonationSummary>
+> {
+	return skinSiteRequest<SkinSitePublicDonationSummary>('donation/summary', { auth: false })
 }
 
 export function skinSiteDonationList(offset = 0): Promise<SkinSiteResponse<SkinSiteDonationPage>> {
@@ -487,71 +489,73 @@ export async function skinSiteUploadAvatar(blob: Blob): Promise<SkinSiteResponse
 // Downloads
 // ---------------------------------------------------------------------------
 
-export type SkinSiteDownloadStatus = 'OK' | 'NEW' | 'LEGACY' | 'OUTDATED' | 'REMOVAL'
+export type SkinSitePublicDownloadStatus = 'OK' | 'NEW' | 'LEGACY' | 'OUTDATED' | 'REMOVAL'
 
-export interface SkinSiteDownloadRoute {
+export interface SkinSitePublicDownloadRoute {
 	name?: string | null
 	url: string
 }
 
-export interface SkinSiteDownloadItem {
+export interface SkinSitePublicDownloadItem {
 	id: number
 	uploader: string
 	url: string
-	routes: SkinSiteDownloadRoute[]
+	routes: SkinSitePublicDownloadRoute[]
 	filename: string
 	description: string
-	status: SkinSiteDownloadStatus[]
+	status: SkinSitePublicDownloadStatus[]
 	category: string[]
 }
 
-export interface SkinSiteDownloadCategory {
+export interface SkinSitePublicDownloadCategory {
 	id: number
 	name: string
 }
 
-export function skinSiteDownloadList(options?: {
+export function skinSitePublicDownloadList(options?: {
 	limit?: number
 	offset?: number
 	category?: string
-}): Promise<SkinSiteResponse<SkinSiteDownloadItem[]>> {
+}): Promise<SkinSiteResponse<SkinSitePublicDownloadItem[]>> {
 	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()}`, {
+	return skinSiteRequest<SkinSitePublicDownloadItem[]>(`download/list?${query.toString()}`, {
 		auth: false,
 	})
 }
 
-export function skinSiteDownloadCount(category?: string): Promise<SkinSiteResponse<number>> {
+export function skinSitePublicDownloadCount(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[]>
+export function skinSitePublicDownloadCategories(): Promise<
+	SkinSiteResponse<SkinSitePublicDownloadCategory[]>
 > {
-	return skinSiteRequest<SkinSiteDownloadCategory[]>('download/category/list', { auth: false })
+	return skinSiteRequest<SkinSitePublicDownloadCategory[]>('download/category/list', {
+		auth: false,
+	})
 }
 // ---------------------------------------------------------------------------
 // Maps
 // ---------------------------------------------------------------------------
 
-export interface SkinSiteMapEntry {
+export interface SkinSitePublicMapEntry {
 	name: string
 	url: string
 }
 
-export interface SkinSiteMapServer {
+export interface SkinSitePublicMapServer {
 	name: string
 	internal: boolean
-	maps: SkinSiteMapEntry[]
+	maps: SkinSitePublicMapEntry[]
 }
 
-export function skinSiteMapServers(): Promise<SkinSiteResponse<SkinSiteMapServer[]>> {
-	return skinSiteRequest<SkinSiteMapServer[]>('maps', { auth: false })
+export function skinSitePublicMapServers(): Promise<SkinSiteResponse<SkinSitePublicMapServer[]>> {
+	return skinSiteRequest<SkinSitePublicMapServer[]>('maps', { auth: false })
 }
 // ---------------------------------------------------------------------------
 // Player review (public side)
@@ -1033,7 +1037,6 @@ export function skinSiteAdminUserFrequencyLimit(
 	)
 }
 
-export type SkinSiteReviewResult = 'PENDING' | 'PASSED' | 'REJECTED'
 export type SkinSiteReviewMode = 'AUTO' | 'MANUAL'
 
 export interface SkinSiteReviewAnswer {

From 4a3b4268b96460fe1fcea5eb7f621695eba3484d Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 09:01:43 +0800
Subject: [PATCH 07/16] =?UTF-8?q?fix:=20=E8=A1=A5=E9=BD=90=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E4=B8=BB=E9=A1=B5=E5=AF=BC=E8=88=AA=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E7=9A=84=E4=B8=AD=E8=8B=B1=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/app-frontend/src/locales/en-US/index.json | 15 ++++++++++++++-
 apps/app-frontend/src/locales/zh-CN/index.json | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 517a390..382d7f2 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12096,5 +12096,18 @@
   "app.skin-site.admin.mods.available": {"message": "Available"},
   "app.skin-site.admin.mods.unavailable": {"message": "Unavailable"},
   "app.skin-site.admin.mods.active": {"message": "Active"},
-  "app.skin-site.admin.mods.uploader": {"message": "by {name}"}
+  "app.skin-site.admin.mods.uploader": {"message": "by {name}"},
+  "app.skin-site.home.nav.title": {"message": "Skin site"},
+  "app.skin-site.home.nav.download": {"message": "Downloads"},
+  "app.skin-site.home.nav.download-desc": {"message": "Browse files shared by the server."},
+  "app.skin-site.home.nav.review": {"message": "Player review"},
+  "app.skin-site.home.nav.review-desc": {"message": "Submit and review player applications."},
+  "app.skin-site.home.nav.wiki": {"message": "Server wiki"},
+  "app.skin-site.home.nav.wiki-desc": {"message": "Guides and documentation for the server."},
+  "app.skin-site.home.nav.bugs": {"message": "Bug tracker"},
+  "app.skin-site.home.nav.bugs-desc": {"message": "Report issues and follow their progress."},
+  "app.skin-site.home.nav.map": {"message": "Server map"},
+  "app.skin-site.home.nav.map-desc": {"message": "Explore the live world map."},
+  "app.skin-site.home.nav.profile": {"message": "Profile"},
+  "app.skin-site.home.nav.profile-desc": {"message": "Manage your account and textures."}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index acaa206..5c5adbf 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11927,5 +11927,18 @@
   "app.skin-site.admin.mods.available": {"message": "可用"},
   "app.skin-site.admin.mods.unavailable": {"message": "不可用"},
   "app.skin-site.admin.mods.active": {"message": "当前版本"},
-  "app.skin-site.admin.mods.uploader": {"message": "由 {name} 上传"}
+  "app.skin-site.admin.mods.uploader": {"message": "由 {name} 上传"},
+  "app.skin-site.home.nav.title": {"message": "皮肤站"},
+  "app.skin-site.home.nav.download": {"message": "资源下载"},
+  "app.skin-site.home.nav.download-desc": {"message": "浏览服务器分享的文件。"},
+  "app.skin-site.home.nav.review": {"message": "玩家审核"},
+  "app.skin-site.home.nav.review-desc": {"message": "提交并审核玩家申请。"},
+  "app.skin-site.home.nav.wiki": {"message": "服务器维基"},
+  "app.skin-site.home.nav.wiki-desc": {"message": "服务器的指南与文档。"},
+  "app.skin-site.home.nav.bugs": {"message": "问题追踪"},
+  "app.skin-site.home.nav.bugs-desc": {"message": "反馈问题并跟踪处理进度。"},
+  "app.skin-site.home.nav.map": {"message": "服务器地图"},
+  "app.skin-site.home.nav.map-desc": {"message": "探索实时世界地图。"},
+  "app.skin-site.home.nav.profile": {"message": "个人资料"},
+  "app.skin-site.home.nav.profile-desc": {"message": "管理你的账号与皮肤。"}
 }

From 8d73689356f82556c3f1061de6c25f89443b07a0 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 09:11:58 +0800
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=E7=BB=B4=E5=9F=BA?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/skin-site/SkinSiteAdminView.vue        |   2 +
 .../ui/skin-site/admin/AdminWikiPage.vue      | 512 ++++++++++++++++++
 .../app-frontend/src/helpers/skin-site-api.ts |  90 +++
 .../app-frontend/src/locales/en-US/index.json |  34 +-
 .../app-frontend/src/locales/zh-CN/index.json |  34 +-
 5 files changed, 670 insertions(+), 2 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
index 66dc0a1..382374a 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
@@ -15,6 +15,7 @@ import AdminReviewPage from './admin/AdminReviewPage.vue'
 import AdminServersPage from './admin/AdminServersPage.vue'
 import AdminSummaryPage from './admin/AdminSummaryPage.vue'
 import AdminUsersPage from './admin/AdminUsersPage.vue'
+import AdminWikiPage from './admin/AdminWikiPage.vue'
 
 const emit = defineEmits<{ (e: 'back'): void }>()
 
@@ -181,6 +182,7 @@ const current = ref<AdminKey>('summary')
 				<AdminReviewPage v-else-if="current === 'review'" />
 				<AdminLauncherPage v-else-if="current === 'launcher'" />
 				<AdminModsPage v-else-if="current === 'mods'" />
+				<AdminWikiPage v-else-if="current === 'wiki'" />
 				<AdminDownloadsPage v-else-if="current === 'downloads'" />
 				<AdminDonationsPage v-else-if="current === 'donations' && hasWebAdmin" />
 				<p v-else class="m-0 text-sm text-secondary">{{ current }}</p>
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue
new file mode 100644
index 0000000..6e1abe7
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue
@@ -0,0 +1,512 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { onMounted, ref } from 'vue'
+
+import {
+	skinSiteWikiAudit,
+	type SkinSiteWikiAuditInfo,
+	type SkinSiteWikiEditPolicy,
+	skinSiteWikiPage,
+	type SkinSiteWikiPageDetail,
+	skinSiteWikiProtectPage,
+	type SkinSiteWikiReadPolicy,
+	skinSiteWikiSetHomePage,
+	skinSiteWikiSetPageDeleted,
+	type SkinSiteWikiSettings,
+	skinSiteWikiSettings,
+	skinSiteWikiUpdateSettings,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.admin.wiki.title', defaultMessage: 'Wiki' },
+	tabPage: { id: 'app.skin-site.admin.wiki.tab-page', defaultMessage: 'Page' },
+	tabAudit: { id: 'app.skin-site.admin.wiki.tab-audit', defaultMessage: 'Audit log' },
+	tabSettings: { id: 'app.skin-site.admin.wiki.tab-settings', defaultMessage: 'Settings' },
+	loading: { id: 'app.skin-site.admin.wiki.loading', defaultMessage: 'Loading…' },
+	pagePath: { id: 'app.skin-site.admin.wiki.page-path', defaultMessage: 'Page path' },
+	loadPage: { id: 'app.skin-site.admin.wiki.load-page', defaultMessage: 'Load page' },
+	pageNotFound: {
+		id: 'app.skin-site.admin.wiki.page-not-found',
+		defaultMessage: 'Page not found.',
+	},
+	revision: { id: 'app.skin-site.admin.wiki.revision', defaultMessage: 'Revision' },
+	author: { id: 'app.skin-site.admin.wiki.author', defaultMessage: 'Author' },
+	updatedAt: { id: 'app.skin-site.admin.wiki.updated-at', defaultMessage: 'Updated' },
+	categories: { id: 'app.skin-site.admin.wiki.categories', defaultMessage: 'Categories' },
+	readPolicy: { id: 'app.skin-site.admin.wiki.read-policy', defaultMessage: 'Read policy' },
+	editPolicy: { id: 'app.skin-site.admin.wiki.edit-policy', defaultMessage: 'Edit policy' },
+	saveProtect: { id: 'app.skin-site.admin.wiki.save-protect', defaultMessage: 'Save policies' },
+	protectSaved: {
+		id: 'app.skin-site.admin.wiki.protect-saved',
+		defaultMessage: 'Page policies updated.',
+	},
+	setHome: { id: 'app.skin-site.admin.wiki.set-home', defaultMessage: 'Set as home page' },
+	homeSet: { id: 'app.skin-site.admin.wiki.home-set', defaultMessage: 'Home page updated.' },
+	setDeleted: { id: 'app.skin-site.admin.wiki.set-deleted', defaultMessage: 'Mark as deleted' },
+	setRestored: { id: 'app.skin-site.admin.wiki.set-restored', defaultMessage: 'Restore page' },
+	deletedUpdated: {
+		id: 'app.skin-site.admin.wiki.deleted-updated',
+		defaultMessage: 'Page deletion state updated.',
+	},
+	auditEmpty: { id: 'app.skin-site.admin.wiki.audit-empty', defaultMessage: 'No audit entries.' },
+	auditTarget: { id: 'app.skin-site.admin.wiki.audit-target', defaultMessage: 'Target' },
+	loadMore: { id: 'app.skin-site.admin.wiki.load-more', defaultMessage: 'Load more' },
+	settingsHint: {
+		id: 'app.skin-site.admin.wiki.settings-hint',
+		defaultMessage: 'Comma separated domains.',
+	},
+	domains: { id: 'app.skin-site.admin.wiki.domains', defaultMessage: 'Domains' },
+	homePage: { id: 'app.skin-site.admin.wiki.home-page', defaultMessage: 'Home page' },
+	defaultSkin: { id: 'app.skin-site.admin.wiki.default-skin', defaultMessage: 'Default skin' },
+	maxPageBytes: {
+		id: 'app.skin-site.admin.wiki.max-page-bytes',
+		defaultMessage: 'Max page bytes',
+	},
+	maxAttachmentBytes: {
+		id: 'app.skin-site.admin.wiki.max-attachment-bytes',
+		defaultMessage: 'Max attachment bytes',
+	},
+	saveSettings: { id: 'app.skin-site.admin.wiki.save-settings', defaultMessage: 'Save settings' },
+	settingsSaved: {
+		id: 'app.skin-site.admin.wiki.settings-saved',
+		defaultMessage: 'Settings saved.',
+	},
+})
+
+type Tab = 'page' | 'audit' | 'settings'
+const tab = ref<Tab>('page')
+
+const pagePath = ref('')
+const page = ref<SkinSiteWikiPageDetail | null>(null)
+const pageLoading = ref(false)
+const pageError = ref(false)
+const protectRead = ref<SkinSiteWikiReadPolicy>('PUBLIC')
+const protectEdit = ref<SkinSiteWikiEditPolicy>('MEMBER')
+const savingProtect = ref(false)
+
+const auditItems = ref<SkinSiteWikiAuditInfo[]>([])
+const auditNext = ref<number | null>(null)
+const auditLoading = ref(false)
+const auditLoadingMore = ref(false)
+
+const settings = ref<SkinSiteWikiSettings | null>(null)
+const settingsLoading = ref(false)
+const settingsSaving = ref(false)
+const settingsForm = ref({
+	domains: '',
+	homePage: '',
+	defaultSkin: '',
+	maxPageUtf8Bytes: 0,
+	maxAttachmentBytes: 0,
+})
+
+function formatDateTime(ts: number): string {
+	try {
+		return new Date(ts).toLocaleString()
+	} catch {
+		return ''
+	}
+}
+
+async function loadPage() {
+	const path = pagePath.value.trim()
+	if (!path) return
+	pageLoading.value = true
+	pageError.value = false
+	page.value = null
+	try {
+		const result = await skinSiteWikiPage(path)
+		if (!result.success) throw new Error(result.errorMessage)
+		page.value = result.payload
+		protectRead.value = result.payload.readPolicy
+		protectEdit.value = result.payload.editPolicy
+	} catch (error) {
+		pageError.value = true
+		handleError(error)
+	} finally {
+		pageLoading.value = false
+	}
+}
+
+async function saveProtect() {
+	if (!page.value || savingProtect.value) return
+	savingProtect.value = true
+	try {
+		const result = await skinSiteWikiProtectPage(
+			pagePath.value.trim(),
+			protectRead.value,
+			protectEdit.value,
+		)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.protectSaved) })
+		await loadPage()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		savingProtect.value = false
+	}
+}
+
+async function setHome() {
+	if (!page.value) return
+	try {
+		const result = await skinSiteWikiSetHomePage(pagePath.value.trim())
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.homeSet) })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function toggleDeleted() {
+	if (!page.value) return
+	try {
+		const result = await skinSiteWikiSetPageDeleted(pagePath.value.trim(), !page.value.canEdit)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.deletedUpdated) })
+		await loadPage()
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function loadAudit(reset = true) {
+	if (reset) {
+		auditLoading.value = true
+		auditItems.value = []
+		auditNext.value = null
+	} else {
+		auditLoadingMore.value = true
+	}
+	try {
+		const result = await skinSiteWikiAudit(reset ? undefined : (auditNext.value ?? undefined))
+		if (!result.success) throw new Error(result.errorMessage)
+		const data = result.payload
+		auditItems.value = reset ? data.items : [...auditItems.value, ...data.items]
+		auditNext.value = data.nextCursor ?? null
+	} catch (error) {
+		handleError(error)
+	} finally {
+		auditLoading.value = false
+		auditLoadingMore.value = false
+	}
+}
+
+async function loadSettings() {
+	settingsLoading.value = true
+	try {
+		const result = await skinSiteWikiSettings()
+		if (!result.success) throw new Error(result.errorMessage)
+		settings.value = result.payload
+		settingsForm.value = {
+			domains: result.payload.domains.join(', '),
+			homePage: result.payload.homePage,
+			defaultSkin: result.payload.defaultSkin,
+			maxPageUtf8Bytes: result.payload.maxPageUtf8Bytes,
+			maxAttachmentBytes: result.payload.maxAttachmentBytes,
+		}
+	} catch (error) {
+		handleError(error)
+	} finally {
+		settingsLoading.value = false
+	}
+}
+
+async function saveSettings() {
+	if (settingsSaving.value) return
+	settingsSaving.value = true
+	try {
+		const result = await skinSiteWikiUpdateSettings({
+			domains: settingsForm.value.domains
+				.split(',')
+				.map((d) => d.trim())
+				.filter(Boolean),
+			homePage: settingsForm.value.homePage.trim(),
+			defaultSkin: settingsForm.value.defaultSkin.trim(),
+			maxPageUtf8Bytes: Number(settingsForm.value.maxPageUtf8Bytes) || 0,
+			maxAttachmentBytes: Number(settingsForm.value.maxAttachmentBytes) || 0,
+		})
+		if (!result.success) throw new Error(result.errorMessage)
+		settings.value = result.payload
+		addNotification({ type: 'success', title: formatMessage(messages.settingsSaved) })
+	} catch (error) {
+		handleError(error)
+	} finally {
+		settingsSaving.value = false
+	}
+}
+
+async function switchTab(next: Tab) {
+	tab.value = next
+	if (next === 'audit' && !auditItems.value.length) await loadAudit(true)
+	if (next === 'settings' && !settings.value) await loadSettings()
+}
+
+onMounted(() => void loadSettings())
+</script>
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-2">
+			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold"
+				:class="tab === 'page' ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+				@click="switchTab('page')"
+			>
+				{{ formatMessage(messages.tabPage) }}
+			</button>
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold"
+				:class="tab === 'audit' ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+				@click="switchTab('audit')"
+			>
+				{{ formatMessage(messages.tabAudit) }}
+			</button>
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold"
+				:class="tab === 'settings' ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+				@click="switchTab('settings')"
+			>
+				{{ formatMessage(messages.tabSettings) }}
+			</button>
+		</div>
+
+		<template v-if="tab === 'page'">
+			<div class="flex flex-wrap items-center gap-2">
+				<input
+					v-model="pagePath"
+					type="text"
+					:placeholder="formatMessage(messages.pagePath)"
+					class="min-w-0 flex-1 rounded-full border border-solid border-surface-5 bg-bg px-3 py-1 text-xs text-contrast outline-none focus:border-brand"
+					@keyup.enter="loadPage"
+				/>
+				<button
+					type="button"
+					class="rounded-full bg-brand px-4 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					:disabled="pageLoading || !pagePath.trim()"
+					@click="loadPage"
+				>
+					{{ formatMessage(messages.loadPage) }}
+				</button>
+			</div>
+
+			<div v-if="pageLoading" class="flex items-center gap-2 text-sm text-secondary">
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<p v-else-if="pageError" class="m-0 text-sm text-secondary">
+				{{ formatMessage(messages.pageNotFound) }}
+			</p>
+			<template v-else-if="page">
+				<div class="flex flex-col gap-2 rounded-xl bg-bg-raised p-4">
+					<div class="flex flex-wrap items-center gap-2">
+						<span class="min-w-0 flex-1 truncate text-lg font-bold text-contrast">
+							{{ page.title }}
+						</span>
+						<span class="shrink-0 text-xs text-secondary">
+							{{ formatMessage(messages.revision) }} #{{ page.revisionId }}
+						</span>
+					</div>
+					<div class="flex flex-wrap items-center gap-3 text-xs text-secondary">
+						<span>{{ formatMessage(messages.author) }}: {{ page.authorName }}</span>
+						<span>
+							{{ formatMessage(messages.updatedAt) }}:
+							{{ formatDateTime(page.updatedAt) }}
+						</span>
+					</div>
+					<div v-if="page.categories.length" class="flex flex-wrap items-center gap-1">
+						<span class="text-xs text-secondary"> {{ formatMessage(messages.categories) }}: </span>
+						<span
+							v-for="c in page.categories"
+							:key="c"
+							class="rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+						>
+							{{ c }}
+						</span>
+					</div>
+					<p
+						v-if="page.summary"
+						class="m-0 rounded-lg bg-bg p-2 text-xs whitespace-pre-wrap break-words text-secondary"
+					>
+						{{ page.summary }}
+					</p>
+				</div>
+
+				<div class="flex flex-wrap items-end gap-3 rounded-xl bg-bg-raised p-4">
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.readPolicy) }}
+						</span>
+						<select
+							v-model="protectRead"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast"
+						>
+							<option value="PUBLIC">PUBLIC</option>
+							<option value="MEMBER">MEMBER</option>
+						</select>
+					</label>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.editPolicy) }}
+						</span>
+						<select
+							v-model="protectEdit"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast"
+						>
+							<option value="MEMBER">MEMBER</option>
+							<option value="WEB_ADMIN">WEB_ADMIN</option>
+						</select>
+					</label>
+					<button
+						type="button"
+						class="rounded-full bg-brand px-4 py-1.5 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="savingProtect"
+						@click="saveProtect"
+					>
+						{{ formatMessage(messages.saveProtect) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-4 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="setHome"
+					>
+						{{ formatMessage(messages.setHome) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-full bg-red px-4 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="toggleDeleted"
+					>
+						{{
+							page.canEdit
+								? formatMessage(messages.setDeleted)
+								: formatMessage(messages.setRestored)
+						}}
+					</button>
+				</div>
+			</template>
+		</template>
+		<template v-else-if="tab === 'audit'">
+			<div v-if="auditLoading" class="flex items-center gap-2 text-sm text-secondary">
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<p
+				v-else-if="!auditItems.length"
+				class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary"
+			>
+				{{ formatMessage(messages.auditEmpty) }}
+			</p>
+			<div v-else class="flex flex-col gap-2">
+				<div
+					v-for="entry in auditItems"
+					:key="entry.id"
+					class="flex flex-col gap-1 rounded-xl bg-bg-raised p-3"
+				>
+					<div class="flex flex-wrap items-center gap-2">
+						<span class="shrink-0 text-xs text-secondary">#{{ entry.id }}</span>
+						<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">
+							{{ entry.action }}
+						</span>
+						<span class="shrink-0 text-xs text-secondary">{{ entry.actorName }}</span>
+						<span class="shrink-0 text-xs text-secondary">
+							{{ formatDateTime(entry.createdAt) }}
+						</span>
+					</div>
+					<span v-if="entry.target" class="truncate text-xs text-secondary">
+						{{ formatMessage(messages.auditTarget) }}: {{ entry.target }}
+					</span>
+					<span v-if="entry.detail" class="truncate text-xs text-secondary">
+						{{ entry.detail }}
+					</span>
+				</div>
+
+				<button
+					v-if="auditNext !== null"
+					type="button"
+					class="w-fit self-center rounded-full bg-button-bg px-4 py-2 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					:disabled="auditLoadingMore"
+					@click="loadAudit(false)"
+				>
+					{{ formatMessage(messages.loadMore) }}
+				</button>
+			</div>
+		</template>
+		<template v-else>
+			<div v-if="settingsLoading" class="flex items-center gap-2 text-sm text-secondary">
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<template v-else-if="settings">
+				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+					<label class="flex flex-col gap-1 sm:col-span-2">
+						<span class="text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.domains) }}
+						</span>
+						<input
+							v-model="settingsForm.domains"
+							type="text"
+							:placeholder="formatMessage(messages.settingsHint)"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+					</label>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.homePage) }}
+						</span>
+						<input
+							v-model="settingsForm.homePage"
+							type="text"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+					</label>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.defaultSkin) }}
+						</span>
+						<input
+							v-model="settingsForm.defaultSkin"
+							type="text"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+					</label>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.maxPageBytes) }}
+						</span>
+						<input
+							v-model.number="settingsForm.maxPageUtf8Bytes"
+							type="number"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+					</label>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.maxAttachmentBytes) }}
+						</span>
+						<input
+							v-model.number="settingsForm.maxAttachmentBytes"
+							type="number"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+					</label>
+				</div>
+				<button
+					type="button"
+					class="w-fit rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					:disabled="settingsSaving"
+					@click="saveSettings"
+				>
+					{{ formatMessage(messages.saveSettings) }}
+				</button>
+			</template>
+		</template>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 21fd358..4bc126b 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -1699,3 +1699,93 @@ export function skinSiteActivateModRuntime(
 export function skinSiteDeleteModRuntime(id: number): Promise<SkinSiteResponse<string>> {
 	return skinSiteRequest<string>('runtime/admin/' + id, { method: 'DELETE', type: 'mod' })
 }
+
+export type SkinSiteWikiReadPolicy = 'PUBLIC' | 'MEMBER'
+export type SkinSiteWikiEditPolicy = 'MEMBER' | 'WEB_ADMIN'
+
+export interface SkinSiteWikiPageDetail {
+	title: string
+	revisionId: number
+	source: string
+	nodes: unknown[]
+	categories: string[]
+	updatedAt: number
+	authorName: string
+	summary: string
+	readPolicy: SkinSiteWikiReadPolicy
+	editPolicy: SkinSiteWikiEditPolicy
+	redirectTarget?: string | null
+	canEdit: boolean
+	watched: boolean
+}
+
+export interface SkinSiteWikiSettings {
+	domains: string[]
+	homePage: string
+	defaultSkin: string
+	maxPageUtf8Bytes: number
+	maxAttachmentBytes: number
+}
+
+export interface SkinSiteWikiAuditInfo {
+	id: number
+	actorName: string
+	action: string
+	target?: string | null
+	detail?: string | null
+	createdAt: number
+}
+
+export interface SkinSiteWikiAuditPage {
+	items: SkinSiteWikiAuditInfo[]
+	nextCursor?: number | null
+}
+
+export function skinSiteWikiPage(path: string): Promise<SkinSiteResponse<SkinSiteWikiPageDetail>> {
+	return skinSiteRequest<SkinSiteWikiPageDetail>('wiki/page?path=' + encodeURIComponent(path))
+}
+
+export function skinSiteWikiProtectPage(
+	path: string,
+	readPolicy: SkinSiteWikiReadPolicy,
+	editPolicy: SkinSiteWikiEditPolicy,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('wiki/admin/protect', {
+		method: 'POST',
+		body: { path, readPolicy, editPolicy },
+	})
+}
+
+export function skinSiteWikiSetHomePage(path: string): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('wiki/admin/homepage', { method: 'POST', body: { path } })
+}
+
+export function skinSiteWikiSetPageDeleted(
+	path: string,
+	deleted: boolean,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('wiki/admin/delete', {
+		method: 'POST',
+		body: { path, deleted },
+	})
+}
+
+export function skinSiteWikiAudit(
+	before?: number,
+): Promise<SkinSiteResponse<SkinSiteWikiAuditPage>> {
+	const suffix = before ? '?before=' + before : ''
+	return skinSiteRequest<SkinSiteWikiAuditPage>('wiki/admin/audit' + suffix)
+}
+
+export function skinSiteWikiSettings(): Promise<SkinSiteResponse<SkinSiteWikiSettings>> {
+	return skinSiteRequest<SkinSiteWikiSettings>('wiki/settings')
+}
+
+export function skinSiteWikiUpdateSettings(
+	settings: Partial<SkinSiteWikiSettings>,
+): Promise<SkinSiteResponse<SkinSiteWikiSettings>> {
+	return skinSiteRequest<SkinSiteWikiSettings>('wiki/admin/settings', {
+		method: 'POST',
+		body: settings,
+	})
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 382d7f2..9e29657 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12109,5 +12109,37 @@
   "app.skin-site.home.nav.map": {"message": "Server map"},
   "app.skin-site.home.nav.map-desc": {"message": "Explore the live world map."},
   "app.skin-site.home.nav.profile": {"message": "Profile"},
-  "app.skin-site.home.nav.profile-desc": {"message": "Manage your account and textures."}
+  "app.skin-site.home.nav.profile-desc": {"message": "Manage your account and textures."},
+  "app.skin-site.admin.wiki.title": {"message": "Wiki"},
+  "app.skin-site.admin.wiki.tab-page": {"message": "Page"},
+  "app.skin-site.admin.wiki.tab-audit": {"message": "Audit log"},
+  "app.skin-site.admin.wiki.tab-settings": {"message": "Settings"},
+  "app.skin-site.admin.wiki.loading": {"message": "Loading…"},
+  "app.skin-site.admin.wiki.page-path": {"message": "Page path"},
+  "app.skin-site.admin.wiki.load-page": {"message": "Load page"},
+  "app.skin-site.admin.wiki.page-not-found": {"message": "Page not found."},
+  "app.skin-site.admin.wiki.revision": {"message": "Revision"},
+  "app.skin-site.admin.wiki.author": {"message": "Author"},
+  "app.skin-site.admin.wiki.updated-at": {"message": "Updated"},
+  "app.skin-site.admin.wiki.categories": {"message": "Categories"},
+  "app.skin-site.admin.wiki.read-policy": {"message": "Read policy"},
+  "app.skin-site.admin.wiki.edit-policy": {"message": "Edit policy"},
+  "app.skin-site.admin.wiki.save-protect": {"message": "Save policies"},
+  "app.skin-site.admin.wiki.protect-saved": {"message": "Page policies updated."},
+  "app.skin-site.admin.wiki.set-home": {"message": "Set as home page"},
+  "app.skin-site.admin.wiki.home-set": {"message": "Home page updated."},
+  "app.skin-site.admin.wiki.set-deleted": {"message": "Mark as deleted"},
+  "app.skin-site.admin.wiki.set-restored": {"message": "Restore page"},
+  "app.skin-site.admin.wiki.deleted-updated": {"message": "Page deletion state updated."},
+  "app.skin-site.admin.wiki.audit-empty": {"message": "No audit entries."},
+  "app.skin-site.admin.wiki.audit-target": {"message": "Target"},
+  "app.skin-site.admin.wiki.load-more": {"message": "Load more"},
+  "app.skin-site.admin.wiki.settings-hint": {"message": "Comma separated domains."},
+  "app.skin-site.admin.wiki.domains": {"message": "Domains"},
+  "app.skin-site.admin.wiki.home-page": {"message": "Home page"},
+  "app.skin-site.admin.wiki.default-skin": {"message": "Default skin"},
+  "app.skin-site.admin.wiki.max-page-bytes": {"message": "Max page bytes"},
+  "app.skin-site.admin.wiki.max-attachment-bytes": {"message": "Max attachment bytes"},
+  "app.skin-site.admin.wiki.save-settings": {"message": "Save settings"},
+  "app.skin-site.admin.wiki.settings-saved": {"message": "Settings saved."}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 5c5adbf..2dac68e 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11940,5 +11940,37 @@
   "app.skin-site.home.nav.map": {"message": "服务器地图"},
   "app.skin-site.home.nav.map-desc": {"message": "探索实时世界地图。"},
   "app.skin-site.home.nav.profile": {"message": "个人资料"},
-  "app.skin-site.home.nav.profile-desc": {"message": "管理你的账号与皮肤。"}
+  "app.skin-site.home.nav.profile-desc": {"message": "管理你的账号与皮肤。"},
+  "app.skin-site.admin.wiki.title": {"message": "维基管理"},
+  "app.skin-site.admin.wiki.tab-page": {"message": "页面"},
+  "app.skin-site.admin.wiki.tab-audit": {"message": "审计日志"},
+  "app.skin-site.admin.wiki.tab-settings": {"message": "设置"},
+  "app.skin-site.admin.wiki.loading": {"message": "加载中…"},
+  "app.skin-site.admin.wiki.page-path": {"message": "页面路径"},
+  "app.skin-site.admin.wiki.load-page": {"message": "加载页面"},
+  "app.skin-site.admin.wiki.page-not-found": {"message": "未找到该页面。"},
+  "app.skin-site.admin.wiki.revision": {"message": "版本"},
+  "app.skin-site.admin.wiki.author": {"message": "作者"},
+  "app.skin-site.admin.wiki.updated-at": {"message": "更新时间"},
+  "app.skin-site.admin.wiki.categories": {"message": "分类"},
+  "app.skin-site.admin.wiki.read-policy": {"message": "阅读权限"},
+  "app.skin-site.admin.wiki.edit-policy": {"message": "编辑权限"},
+  "app.skin-site.admin.wiki.save-protect": {"message": "保存权限"},
+  "app.skin-site.admin.wiki.protect-saved": {"message": "页面权限已更新。"},
+  "app.skin-site.admin.wiki.set-home": {"message": "设为首页"},
+  "app.skin-site.admin.wiki.home-set": {"message": "首页已更新。"},
+  "app.skin-site.admin.wiki.set-deleted": {"message": "标记为已删除"},
+  "app.skin-site.admin.wiki.set-restored": {"message": "恢复页面"},
+  "app.skin-site.admin.wiki.deleted-updated": {"message": "页面删除状态已更新。"},
+  "app.skin-site.admin.wiki.audit-empty": {"message": "没有审计记录。"},
+  "app.skin-site.admin.wiki.audit-target": {"message": "目标"},
+  "app.skin-site.admin.wiki.load-more": {"message": "加载更多"},
+  "app.skin-site.admin.wiki.settings-hint": {"message": "以逗号分隔域名。"},
+  "app.skin-site.admin.wiki.domains": {"message": "域名"},
+  "app.skin-site.admin.wiki.home-page": {"message": "首页"},
+  "app.skin-site.admin.wiki.default-skin": {"message": "默认皮肤"},
+  "app.skin-site.admin.wiki.max-page-bytes": {"message": "页面最大字节数"},
+  "app.skin-site.admin.wiki.max-attachment-bytes": {"message": "附件最大字节数"},
+  "app.skin-site.admin.wiki.save-settings": {"message": "保存设置"},
+  "app.skin-site.admin.wiki.settings-saved": {"message": "设置已保存。"}
 }

From 7b3a5212e6d899a9c601aa2424be479bc11f4183 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 10:25:48 +0800
Subject: [PATCH 09/16] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=8E=A9?=
 =?UTF-8?q?=E5=AE=B6=E5=AE=A1=E6=A0=B8=E8=AF=95=E5=8D=B7=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增试卷管理 Tab：列表展示、启用状态、题数/总分/通过分、目标权限标签、复制直链
- 新增试卷编辑弹窗：标题、描述、阅卷模式、通过分数、启用开关
- 目标权限多选、前置身份开关 + 判断方式（ANY/ALL）+ 权限多选
- 题目编辑：五种题型、上下移、删除、信息题、选答题、生死题、自动批复
- 选择题选项增删改、默认选项、正确选项、多选计分模式、选项得分/扣分
- 填空/简答作答字数上限与标准答案
- 查重开关与通过邮件配置（标题/正文/补充说明/附带邀请码）
- 保存前校验：标题、题目、权限、通过分、邮件必填项
- 公开端审核类型改名 Public 前缀，避免与后台同名冲突
- 补充中英文 locale 共 37 个键
---
 .../ui/skin-site/SkinSiteReviewView.vue       |   14 +-
 .../ui/skin-site/admin/AdminReviewPage.vue    | 1518 +++++++++++++++--
 .../app-frontend/src/helpers/skin-site-api.ts |  125 +-
 .../app-frontend/src/locales/en-US/index.json |   39 +-
 .../app-frontend/src/locales/zh-CN/index.json |   39 +-
 5 files changed, 1534 insertions(+), 201 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteReviewView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteReviewView.vue
index 558757f..759e041 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteReviewView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteReviewView.vue
@@ -5,8 +5,8 @@ import { computed, onMounted, ref } from 'vue'
 
 import {
 	skinSiteReviewCatalog,
-	type SkinSiteReviewPaper,
-	type SkinSiteReviewQuestion,
+	type SkinSiteReviewPublicPaper,
+	type SkinSiteReviewPublicQuestion,
 	type SkinSiteReviewReceipt,
 	skinSiteSubmitReview,
 } from '@/helpers/skin-site-api'
@@ -46,10 +46,10 @@ const messages = defineMessages({
 
 const emit = defineEmits<{ (e: 'back'): void }>()
 
-const papers = ref<SkinSiteReviewPaper[]>([])
+const papers = ref<SkinSiteReviewPublicPaper[]>([])
 const loading = ref(true)
 const failed = ref(false)
-const activePaper = ref<SkinSiteReviewPaper | null>(null)
+const activePaper = ref<SkinSiteReviewPublicPaper | null>(null)
 const email = ref('')
 const inviteCode = ref('')
 const answers = ref<Record<string, string | string[]>>({})
@@ -70,7 +70,7 @@ const requiredAnswered = computed(() => {
 
 const canSubmit = computed(() => emailValid.value && requiredAnswered.value && !submitting.value)
 
-function defaultAnswer(q: SkinSiteReviewQuestion): string | string[] {
+function defaultAnswer(q: SkinSiteReviewPublicQuestion): string | string[] {
 	if (q.type === 'MULTIPLE' || q.type === 'SINGLE') {
 		const preset = (q.options ?? []).filter((o) => o.defaultSelected).map((o) => o.id)
 		return q.type === 'MULTIPLE' ? preset : (preset[0] ?? '')
@@ -78,7 +78,7 @@ function defaultAnswer(q: SkinSiteReviewQuestion): string | string[] {
 	return ''
 }
 
-function openPaper(paper: SkinSiteReviewPaper) {
+function openPaper(paper: SkinSiteReviewPublicPaper) {
 	activePaper.value = paper
 	answers.value = {}
 	for (const q of paper.questions) answers.value[q.id] = defaultAnswer(q)
@@ -93,7 +93,7 @@ function closePaper() {
 	receipt.value = null
 }
 
-function toggleMultiple(q: SkinSiteReviewQuestion, optionId: string, checked: boolean) {
+function toggleMultiple(q: SkinSiteReviewPublicQuestion, optionId: string, checked: boolean) {
 	const current = Array.isArray(answers.value[q.id]) ? (answers.value[q.id] as string[]) : []
 	answers.value[q.id] = checked
 		? [...current.filter((id) => id !== optionId), optionId]
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminReviewPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminReviewPage.vue
index 3d17779..4829457 100644
--- a/apps/app-frontend/src/components/ui/skin-site/admin/AdminReviewPage.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminReviewPage.vue
@@ -8,8 +8,17 @@ import {
 	skinSiteRegenerateReviewInvite,
 	type SkinSiteReviewResult,
 	type SkinSiteReviewSubmission,
+	skinSiteReviewPaperAdmin,
+	skinSiteReviewPaperList,
 	skinSiteReviewSubmissionCount,
 	skinSiteReviewSubmissions,
+	skinSiteCreateReviewPaperAdmin,
+	skinSiteUpdateReviewPaperAdmin,
+	type SkinSiteReviewAnswer,
+	type SkinSiteReviewConfigData,
+	type SkinSiteReviewQuestion,
+	type SkinSiteReviewMailConfig,
+	type SkinSiteReviewPaperSummary,
 } from '@/helpers/skin-site-api'
 
 const { formatMessage } = useVIntl()
@@ -40,6 +49,10 @@ const messages = defineMessages({
 	details: { id: 'app.skin-site.admin.review.details', defaultMessage: 'Details' },
 	hide: { id: 'app.skin-site.admin.review.hide', defaultMessage: 'Hide' },
 	answers: { id: 'app.skin-site.admin.review.answers', defaultMessage: 'Answers' },
+	questionNo: {
+		id: 'app.skin-site.admin.review.question-no',
+		defaultMessage: 'Question {n}',
+	},
 	noAnswers: { id: 'app.skin-site.admin.review.no-answers', defaultMessage: 'No answers.' },
 	autoChecks: { id: 'app.skin-site.admin.review.auto-checks', defaultMessage: 'Automatic checks' },
 	context: { id: 'app.skin-site.admin.review.context', defaultMessage: 'Submission context' },
@@ -83,8 +96,118 @@ const messages = defineMessages({
 	prev: { id: 'app.skin-site.admin.review.prev', defaultMessage: 'Previous' },
 	next: { id: 'app.skin-site.admin.review.next', defaultMessage: 'Next' },
 	page: { id: 'app.skin-site.admin.review.page', defaultMessage: 'Page {page}' },
+	tabList: { id: 'app.skin-site.admin.review.tab-list', defaultMessage: 'Submissions' },
+	tabPapers: { id: 'app.skin-site.admin.review.tab-papers', defaultMessage: 'Papers' },
+	papersEmpty: {
+		id: 'app.skin-site.admin.review.papers-empty',
+		defaultMessage: 'No review papers yet.',
+	},
+	newPaper: { id: 'app.skin-site.admin.review.new-paper', defaultMessage: 'New paper' },
+	editPaper: { id: 'app.skin-site.admin.review.edit-paper', defaultMessage: 'Edit' },
+	paperTitle: { id: 'app.skin-site.admin.review.paper-title', defaultMessage: 'Title' },
+	paperAnnotation: {
+		id: 'app.skin-site.admin.review.paper-annotation',
+		defaultMessage: 'Description',
+	},
+	paperEnabled: { id: 'app.skin-site.admin.review.paper-enabled', defaultMessage: 'Enabled' },
+	paperMode: { id: 'app.skin-site.admin.review.paper-mode', defaultMessage: 'Mode' },
+	paperPassScore: {
+		id: 'app.skin-site.admin.review.paper-pass-score',
+		defaultMessage: 'Pass score',
+	},
+	paperTargetPermissions: {
+		id: 'app.skin-site.admin.review.paper-target-permissions',
+		defaultMessage: 'Target permissions',
+	},
+	paperQuestions: {
+		id: 'app.skin-site.admin.review.paper-questions',
+		defaultMessage: 'Questions',
+	},
+	addQuestion: { id: 'app.skin-site.admin.review.add-question', defaultMessage: 'Add question' },
+	questionTitle: {
+		id: 'app.skin-site.admin.review.question-title',
+		defaultMessage: 'Question title',
+	},
+	questionType: { id: 'app.skin-site.admin.review.question-type', defaultMessage: 'Type' },
+	questionScore: { id: 'app.skin-site.admin.review.question-score', defaultMessage: 'Score' },
+	questionAnnotation: {
+		id: 'app.skin-site.admin.review.question-annotation',
+		defaultMessage: 'Annotation',
+	},
+	addOption: { id: 'app.skin-site.admin.review.add-option', defaultMessage: 'Add option' },
+	optionDescription: {
+		id: 'app.skin-site.admin.review.option-description',
+		defaultMessage: 'Option text',
+	},
+	optionCorrect: {
+		id: 'app.skin-site.admin.review.option-correct',
+		defaultMessage: 'Correct',
+	},
+	removeQuestion: {
+		id: 'app.skin-site.admin.review.remove-question',
+		defaultMessage: 'Remove',
+	},
+	paperCreated: {
+		id: 'app.skin-site.admin.review.paper-created',
+		defaultMessage: 'Paper created.',
+	},
+	paperSaved: { id: 'app.skin-site.admin.review.paper-saved', defaultMessage: 'Paper saved.' },
+	mailTitle: { id: 'app.skin-site.admin.review.mail-title', defaultMessage: 'Pass mail' },
+	mailEnabled: { id: 'app.skin-site.admin.review.mail-enabled', defaultMessage: 'Send mail on pass' },
+	mailSubject: { id: 'app.skin-site.admin.review.mail-subject', defaultMessage: 'Subject' },
+	mailMessage: { id: 'app.skin-site.admin.review.mail-message', defaultMessage: 'Body' },
+	mailExtra: { id: 'app.skin-site.admin.review.mail-extra', defaultMessage: 'Extra text' },
+	mailIncludeInvite: {
+		id: 'app.skin-site.admin.review.mail-include-invite',
+		defaultMessage: 'Include invite code',
+	},
+	preventDuplicate: {
+		id: 'app.skin-site.admin.review.prevent-duplicate',
+		defaultMessage: 'Reject duplicate submissions',
+	},
+	copyLink: { id: 'app.skin-site.admin.review.copy-link', defaultMessage: 'Copy link' },
+	linkCopied: { id: 'app.skin-site.admin.review.link-copied', defaultMessage: 'Link copied.' },
+	moveUp: { id: 'app.skin-site.admin.review.move-up', defaultMessage: 'Move up' },
+	moveDown: { id: 'app.skin-site.admin.review.move-down', defaultMessage: 'Move down' },
+	mailSubjectRequired: {
+		id: 'app.skin-site.admin.review.mail-subject-required',
+		defaultMessage: 'Subject is required when mail is enabled.',
+	},
+	mailMessageRequired: {
+		id: 'app.skin-site.admin.review.mail-message-required',
+		defaultMessage: 'Body is required when mail is enabled.',
+	},
 })
 
+const availablePermissions: Array<{ value: string; label: string }> = [
+	{ value: 'EXTERNAL_MEMBER', label: 'Mod服玩家' },
+	{ value: 'INTERNAL_MEMBER', label: '原版服玩家' },
+	{ value: 'SERVER_ADMIN', label: '服务器管理' },
+	{ value: 'WEB_ADMIN', label: 'Web管理' },
+	{ value: 'SPONSOR', label: '捐赠者' },
+	{ value: 'DEVELOPER', label: '开发者' },
+	{ value: 'SENIOR_MEMBER', label: '老资历' },
+]
+
+const prerequisitePermissionOptions: Array<{ value: string; label: string }> = [
+	{ value: 'GUEST', label: '游客' },
+	...availablePermissions,
+]
+
+const questionTypeOptions: Array<{ value: SkinSiteReviewQuestionType; label: string }> = [
+	{ value: 'SINGLE', label: '单选题' },
+	{ value: 'MULTIPLE', label: '多选题' },
+	{ value: 'TRUE_FALSE', label: '判断题' },
+	{ value: 'FILL', label: '填空题' },
+	{ value: 'ESSAY', label: '简答题' },
+]
+
+const multipleScoreModeOptions: Array<{ value: 'EXACT' | 'PARTIAL' | 'PARTIAL_WITH_PENALTY'; label: string }> = [
+	{ value: 'EXACT', label: '多选少选均不给分' },
+	{ value: 'PARTIAL', label: '少选部分得分' },
+	{ value: 'PARTIAL_WITH_PENALTY', label: '多选部分扣分' },
+]
+
 const PAGE_SIZE = 20
 
 const items = ref<SkinSiteReviewSubmission[]>([])
@@ -143,6 +266,16 @@ function formatDuration(ms?: number | null): string {
 	return m > 0 ? m + 'm ' + s + 's' : s + 's'
 }
 
+function questionFor(submission: SkinSiteReviewSubmission, questionId: string) {
+	return submission.paper?.questions?.find((q) => q.id === questionId)
+}
+
+function answerText(answer: SkinSiteReviewAnswer): string {
+	if (answer.text) return answer.text
+	if (Array.isArray(answer.values) && answer.values.length) return answer.values.join(', ')
+	return '—'
+}
+
 function decisionFor(id: number) {
 	if (!decisions.value[id]) decisions.value[id] = { reason: '', working: false }
 	return decisions.value[id]
@@ -190,9 +323,6 @@ async function nextPage() {
 	await load()
 }
 
-function toggleDetails(id: number) {
-	expandedId.value = expandedId.value === id ? null : id
-}
 
 async function decide(submission: SkinSiteReviewSubmission, accepted: boolean) {
 	const state = decisionFor(submission.id)
@@ -234,216 +364,461 @@ async function regenerateInvite(submission: SkinSiteReviewSubmission) {
 	}
 }
 
+const detailOpen = ref(false)
+const detailSubmission = ref<SkinSiteReviewSubmission | null>(null)
+
+function openDetail(submission: SkinSiteReviewSubmission) {
+	detailSubmission.value = submission
+	decisionFor(submission.id)
+	detailOpen.value = true
+}
+
+function closeDetail() {
+	detailOpen.value = false
+	detailSubmission.value = null
+}
+
+const tab = ref<'list' | 'papers'>('list')
+
+const papers = ref<SkinSiteReviewPaperSummary[]>([])
+const papersLoading = ref(false)
+const paperEditorOpen = ref(false)
+const editingPaperId = ref<string | null>(null)
+const paperSaving = ref(false)
+const paperForm = ref<SkinSiteReviewConfigData>({
+	id: '',
+	enabled: true,
+	title: '',
+	annotation: '',
+	mode: 'MANUAL',
+	passScore: 0,
+	targetPermissions: [],
+	version: 0,
+	questions: [],
+	updatedAt: 0,
+	prerequisiteMode: 'ANY',
+	prerequisitePermissions: [],
+	mail: defaultMailConfig(),
+})
+
+function newPaper() {
+	editingPaperId.value = null
+	paperForm.value = {
+		id: crypto.randomUUID(),
+		enabled: true,
+		title: '',
+		annotation: '',
+		mode: 'MANUAL',
+		passScore: 0,
+		targetPermissions: [],
+		version: 0,
+		questions: [],
+		updatedAt: Date.now(),
+		prerequisiteMode: 'ANY',
+		prerequisitePermissions: [],
+		mail: defaultMailConfig(),
+	}
+	paperEditorOpen.value = true
+}
+
+async function loadPapers() {
+	papersLoading.value = true
+	try {
+		const result = await skinSiteReviewPaperList()
+		if (result.success) papers.value = result.payload ?? []
+	} catch (error) {
+		handleError(error)
+	} finally {
+		papersLoading.value = false
+	}
+}
+
+async function editPaper(paper: SkinSiteReviewPaperSummary) {
+	try {
+		const result = await skinSiteReviewPaperAdmin(paper.id)
+		if (!result.success) throw new Error(result.errorMessage)
+		paperForm.value = { ...result.payload, mail: result.payload.mail ?? defaultMailConfig() }
+		editingPaperId.value = paper.id
+		paperEditorOpen.value = true
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+function removeQuestion(index: number) {
+	paperForm.value.questions.splice(index, 1)
+}
+
+function addOption(question: SkinSiteReviewQuestion) {
+	question.options = question.options ?? []
+	question.options.push({
+		id: crypto.randomUUID(),
+		description: '',
+		correct: false,
+		defaultSelected: false,
+		score: 0,
+	})
+}
+
+function removeOption(question: SkinSiteReviewQuestion, index: number) {
+	question.options?.splice(index, 1)
+}
+
+function defaultMailConfig(): SkinSiteReviewMailConfig {
+	return { enabled: false, subject: '', message: '', includeInviteCode: false, extraText: '' }
+}
+
+async function copyPaperLink(paperId: string) {
+	try {
+		await navigator.clipboard.writeText('https://skin.starlight.cool/review?paper=' + encodeURIComponent(paperId))
+		addNotification({ type: 'success', title: formatMessage(messages.linkCopied) })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+function moveQuestion(index: number, direction: number) {
+	const target = index + direction
+	if (target < 0 || target >= paperForm.value.questions.length) return
+	const [question] = paperForm.value.questions.splice(index, 1)
+	paperForm.value.questions.splice(target, 0, question)
+}
+
+function permissionLabel(value: string): string {
+	return (
+		availablePermissions.find((item) => item.value === value)?.label ??
+		prerequisitePermissionOptions.find((item) => item.value === value)?.label ??
+		value
+	)
+}
+
+function isChoice(question: SkinSiteReviewQuestion): boolean {
+	return ['SINGLE', 'MULTIPLE', 'TRUE_FALSE'].includes(question.type)
+}
+
+function supportsAutoReview(question: SkinSiteReviewQuestion): boolean {
+	return ['SINGLE', 'MULTIPLE', 'TRUE_FALSE', 'ESSAY'].includes(question.type)
+}
+
+function supportsFatal(question: SkinSiteReviewQuestion): boolean {
+	return paperForm.value.mode === 'AUTO'
+		? question.type !== 'ESSAY'
+		: supportsAutoReview(question)
+}
+
+function isAutomaticallyReviewed(question: SkinSiteReviewQuestion): boolean {
+	return paperForm.value.mode === 'AUTO' || question.autoReview
+}
+
+function showOptionScore(question: SkinSiteReviewQuestion): boolean {
+	if (
+		question.type !== 'MULTIPLE' ||
+		!isAutomaticallyReviewed(question) ||
+		question.multipleScoreMode === 'EXACT'
+	) {
+		return false
+	}
+	return true
+}
+
+function setCorrectOption(question: SkinSiteReviewQuestion, optionId: string) {
+	question.options?.forEach((option) => {
+		option.correct = option.id === optionId
+	})
+}
+
+function setDefaultOption(question: SkinSiteReviewQuestion, optionId: string) {
+	if (
+		question.type === 'MULTIPLE' ||
+		!question.options?.find((option) => option.id === optionId)?.defaultSelected
+	)
+		return
+	question.options?.forEach((option) => {
+		if (option.id !== optionId) option.defaultSelected = false
+	})
+}
+
+function moveOption(question: SkinSiteReviewQuestion, index: number, direction: number) {
+	if (!question.options) return
+	const target = index + direction
+	if (target < 0 || target >= question.options.length) return
+	const [option] = question.options.splice(index, 1)
+	question.options.splice(target, 0, option)
+}
+
+function setOptionalQuestion(question: SkinSiteReviewQuestion) {
+	if (!question.optional) return
+	question.fatal = false
+	question.autoReview = false
+}
+
+function setFatalQuestion(question: SkinSiteReviewQuestion) {
+	if (!question.fatal) return
+	question.optional = false
+	if (paperForm.value.mode === 'MANUAL') question.autoReview = true
+}
+
+function addQuestionOfType(type: SkinSiteReviewQuestionType) {
+	if (paperForm.value.mode === 'AUTO' && type === 'ESSAY') return
+	if (paperForm.value.questions.length >= 50) return
+	const isChoiceType = ['SINGLE', 'MULTIPLE', 'TRUE_FALSE'].includes(type)
+	const baseOptions = isChoiceType
+		? type === 'TRUE_FALSE'
+			? [
+					{ id: crypto.randomUUID(), description: '正确', correct: false, defaultSelected: false, score: 0 },
+					{ id: crypto.randomUUID(), description: '错误', correct: false, defaultSelected: false, score: 0 },
+				]
+			: [
+					{ id: crypto.randomUUID(), description: '', correct: false, defaultSelected: false, score: 0 },
+					{ id: crypto.randomUUID(), description: '', correct: false, defaultSelected: false, score: 0 },
+				]
+		: []
+	paperForm.value.questions.push({
+		id: crypto.randomUUID(),
+		type,
+		title: '',
+		annotation: '',
+		score: 1,
+		optional: false,
+		fatal: false,
+		autoReview: false,
+		multipleScoreMode: 'EXACT',
+		options: baseOptions,
+		answer: null,
+		maxLength: type === 'FILL' ? 50 : type === 'ESSAY' ? 300 : null,
+		informationQuestion: false,
+		informationAlias: null,
+	})
+}
+
+function onQuestionTypeSelected(event: Event) {
+	const el = event.target as HTMLSelectElement
+	const value = el.value as SkinSiteReviewQuestionType
+	if (value) addQuestionOfType(value)
+	el.value = ''
+}
+
+function availableQuestionTypes(): SkinSiteReviewQuestionType[] {
+	const all: SkinSiteReviewQuestionType[] = ['SINGLE', 'MULTIPLE', 'TRUE_FALSE', 'FILL', 'ESSAY']
+	return paperForm.value.mode === 'AUTO' ? all.filter((t) => t !== 'ESSAY') : all
+}
+
+const totalScore = computed(() =>
+	paperForm.value.questions.reduce((sum, q) => sum + Number(q.score || 0), 0),
+)
+
+const prerequisiteEnabled = computed({
+	get: () => paperForm.value.prerequisitePermissions.length > 0,
+	set: (enabled: boolean) => {
+		paperForm.value.prerequisitePermissions = enabled ? ['EXTERNAL_MEMBER'] : []
+	},
+})
+
+function validateBeforeSave(): string | null {
+	if (!paperForm.value.title.trim() || !paperForm.value.questions.length)
+		return '请填写试卷标题并至少添加一道题目。'
+	if (!paperForm.value.targetPermissions.length)
+		return '请至少选择一个审核通过后玩家可获得的身份。'
+	if (prerequisiteEnabled.value && !paperForm.value.prerequisitePermissions.length)
+		return '请至少选择一个前置身份。'
+	if (paperForm.value.passScore < 1 || paperForm.value.passScore > totalScore.value)
+		return '通过分数必须在 1 至 ' + totalScore.value + ' 之间。'
+	for (const [index, q] of paperForm.value.questions.entries()) {
+		if (!q.title.trim() || !Number.isInteger(q.score) || q.score < 0)
+			return '请完整填写第 ' + (index + 1) + ' 题的题目与整数分数。'
+	}
+	const mail = paperForm.value.mail
+	if (mail?.enabled) {
+		if (!mail.subject.trim()) return formatMessage(messages.mailSubjectRequired)
+		if (!mail.message.trim()) return formatMessage(messages.mailMessageRequired)
+		if (mail.subject.length > 200) return '邮件标题不能超过 200 字。'
+		if (mail.message.length > 5000) return '邮件正文不能超过 5000 字。'
+		if (mail.extraText.length > 3000) return '邮件补充说明不能超过 3000 字。'
+	}
+	return null
+}
+
+async function savePaper() {
+	if (paperSaving.value) return
+	const validationError = validateBeforeSave()
+	if (validationError) {
+		addNotification({ type: 'error', title: validationError })
+		return
+	}
+	paperSaving.value = true
+	try {
+		const data: SkinSiteReviewConfigData = {
+			...paperForm.value,
+			targetPermissions: paperForm.value.targetPermissions.filter(Boolean),
+			prerequisitePermissions: paperForm.value.prerequisitePermissions.filter(Boolean),
+			updatedAt: Date.now(),
+		}
+		const result =
+			editingPaperId.value === null
+				? await skinSiteCreateReviewPaperAdmin(data)
+				: await skinSiteUpdateReviewPaperAdmin(editingPaperId.value, data)
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({
+			type: 'success',
+			title: formatMessage(
+				editingPaperId.value === null ? messages.paperCreated : messages.paperSaved,
+			),
+		})
+		paperEditorOpen.value = false
+		await loadPapers()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		paperSaving.value = false
+	}
+}
+
+async function switchTab(next: 'list' | 'papers') {
+	tab.value = next
+	if (next === 'papers' && !papers.value.length) await loadPapers()
+}
+
 onMounted(() => void load())
 </script>
 <template>
-	<div class="flex flex-col gap-4">
-		<div class="flex flex-wrap items-center gap-2">
-			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
-			<span class="text-xs text-secondary">
-				{{ formatMessage(messages.total, { count: total }) }}
-			</span>
-		</div>
-
-		<div class="flex flex-wrap items-center gap-2">
+	<div class="flex w-full flex-col gap-4">
+		<div class="flex flex-wrap gap-2 border-b border-solid border-surface-5 pb-2">
 			<button
-				v-for="f in FILTERS"
-				:key="f.key || 'all'"
 				type="button"
-				class="rounded-full px-3 py-1 text-xs font-semibold transition-colors"
+				class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors"
 				:class="
-					filter === f.key
+					tab === 'list'
 						? 'bg-brand text-contrast'
 						: 'bg-button-bg text-secondary hover:text-contrast'
 				"
-				@click="setFilter(f.key)"
+				@click="switchTab('list')"
 			>
-				{{ f.label() }}
+				{{ formatMessage(messages.tabList) }}
+			</button>
+			<button
+				type="button"
+				class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors"
+				:class="
+					tab === 'papers'
+						? 'bg-brand text-contrast'
+						: 'bg-button-bg text-secondary hover:text-contrast'
+				"
+				@click="switchTab('papers')"
+			>
+				{{ formatMessage(messages.tabPapers) }}
 			</button>
 		</div>
 
-		<div v-if="loading" class="flex items-center gap-2 text-sm text-secondary">
+		<template v-if="tab === 'list'">
+		<div class="flex flex-wrap items-end justify-between gap-3">
+			<div>
+				<h2 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+				<p class="m-0 mt-1 text-sm text-secondary">
+					{{ formatMessage(messages.total, { count: total }) }}
+				</p>
+			</div>
+			<div class="flex flex-wrap items-center gap-2">
+				<button
+					v-for="f in FILTERS"
+					:key="f.key || 'all'"
+					type="button"
+					class="rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors"
+					:class="
+						filter === f.key
+							? 'bg-brand text-contrast'
+							: 'bg-button-bg text-secondary hover:text-contrast'
+					"
+					@click="setFilter(f.key)"
+				>
+					{{ f.label() }}
+				</button>
+			</div>
+		</div>
+
+		<div
+			v-if="loading"
+			class="flex min-h-48 items-center justify-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">
+		<p
+			v-else-if="failed"
+			class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
 			{{ formatMessage(messages.failed) }}
 		</p>
-		<p v-else-if="!items.length" class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+		<p
+			v-else-if="!items.length"
+			class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
 			{{ formatMessage(messages.empty) }}
 		</p>
-		<div v-else class="flex flex-col gap-2">
-			<div
-				v-for="submission in items"
-				:key="submission.id"
-				class="flex flex-col gap-2 rounded-xl bg-bg-raised p-3"
-			>
-				<div class="flex flex-wrap items-center gap-2">
-					<span class="shrink-0 text-xs text-secondary">#{{ submission.id }}</span>
-					<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">
-						{{ submission.applicantName }}
-					</span>
-					<span
-						class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold"
-						:class="resultClass(submission.result)"
-					>
-						{{ resultLabel(submission.result) }}
-					</span>
-					<span
-						class="shrink-0 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
-					>
-						{{ modeLabel(submission.mode) }}
-					</span>
-					<span
-						v-if="submission.score !== null && submission.score !== undefined"
-						class="shrink-0 text-xs font-semibold text-contrast"
-					>
-						{{ submission.score }}
-					</span>
-					<span class="shrink-0 text-xs text-secondary">
-						{{ formatDateTime(submission.createdAt) }}
-					</span>
-					<button
-						type="button"
-						class="shrink-0 rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
-						@click="toggleDetails(submission.id)"
-					>
-						{{
-							expandedId === submission.id
-								? formatMessage(messages.hide)
-								: formatMessage(messages.details)
-						}}
-					</button>
-				</div>
 
-				<div
-					v-if="expandedId === submission.id"
-					class="flex flex-col gap-3 border-t border-solid border-surface-5 pt-3"
-				>
-					<div
-						v-if="submission.context"
-						class="flex flex-col gap-1 rounded-lg bg-bg p-3 text-xs text-secondary"
-					>
-						<span class="font-semibold text-contrast">
-							{{ formatMessage(messages.context) }}
-						</span>
-						<span>{{ formatMessage(messages.ip) }}: {{ submission.context.ip ?? '—' }}</span>
-						<span class="break-all">
-							{{ formatMessage(messages.userAgent) }}: {{ submission.context.userAgent }}
-						</span>
-						<span v-if="submission.context.activity">
-							{{ formatMessage(messages.duration) }}:
-							{{ formatDuration(submission.context.activity.durationMs) }} ·
-							{{ formatMessage(messages.hiddenTime) }}:
-							{{ formatDuration(submission.context.activity.hiddenMs) }} ·
-							{{ formatMessage(messages.screenSwitches) }}:
-							{{ submission.context.activity.screenSwitches }}
-						</span>
-					</div>
-
-					<div class="flex flex-col gap-1">
-						<span class="text-xs font-semibold text-contrast">
-							{{ formatMessage(messages.answers) }}
-						</span>
-						<p
-							v-if="!submission.answers || !submission.answers.length"
-							class="m-0 text-xs text-secondary"
+		<template v-else>
+			<div class="overflow-hidden rounded-lg border border-solid border-surface-5">
+				<table class="w-full border-collapse text-left text-sm">
+					<thead class="bg-bg-raised">
+						<tr class="text-xs text-secondary">
+							<th class="px-3 py-2 font-semibold">#</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.applicant) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.resultPending) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.score) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.submittedAt) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.details) }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="submission in items"
+							:key="submission.id"
+							class="border-t border-solid border-surface-5 hover:bg-bg-raised"
 						>
-							{{ formatMessage(messages.noAnswers) }}
-						</p>
-						<div v-else class="flex flex-col gap-1.5">
-							<div
-								v-for="(answer, idx) in submission.answers"
-								:key="answer.id || idx"
-								class="rounded-lg bg-bg p-2 text-xs text-secondary"
-							>
-								<span class="text-contrast">
-									{{ answer.text ?? (answer.values ? answer.values.join(', ') : '—') }}
+							<td class="px-3 py-2 text-xs text-secondary">{{ submission.id }}</td>
+							<td class="px-3 py-2">
+								<span class="font-semibold text-contrast">{{ submission.applicantName }}</span>
+								<span
+									class="ml-2 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+								>
+									{{ modeLabel(submission.mode) }}
 								</span>
-								<span v-if="answer.score !== null && answer.score !== undefined">
-									· {{ formatMessage(messages.score) }}: {{ answer.score }}
+							</td>
+							<td class="px-3 py-2">
+								<span
+									class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+									:class="resultClass(submission.result)"
+								>
+									{{ resultLabel(submission.result) }}
 								</span>
-							</div>
-						</div>
-					</div>
-
-					<div
-						v-if="Object.keys(submission.automaticResults || {}).length"
-						class="flex flex-col gap-1"
-					>
-						<span class="text-xs font-semibold text-contrast">
-							{{ formatMessage(messages.autoChecks) }}
-						</span>
-						<div class="flex flex-wrap gap-2">
-							<span
-								v-for="(passed, key) in submission.automaticResults"
-								:key="key"
-								class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
-								:class="passed ? 'bg-green text-contrast' : 'bg-red text-contrast'"
-							>
-								{{ key }}: {{ passed ? '✓' : '✗' }}
-							</span>
-						</div>
-					</div>
-
-					<div
-						v-if="submission.decisionHistory && submission.decisionHistory.length"
-						class="flex flex-col gap-1"
-					>
-						<span class="text-xs font-semibold text-contrast">
-							{{ formatMessage(messages.history) }}
-						</span>
-						<div
-							v-for="(h, idx) in submission.decisionHistory"
-							:key="idx"
-							class="rounded-lg bg-bg p-2 text-xs text-secondary"
-						>
-							{{ h.reviewer }} · {{ resultLabel(h.result) }} ·
-							{{ formatDateTime(h.at) }}
-							<span v-if="h.reason"> · {{ h.reason }}</span>
-						</div>
-					</div>
-
-					<div class="flex flex-col gap-2">
-						<input
-							v-model="decisionFor(submission.id).reason"
-							type="text"
-							:placeholder="formatMessage(messages.reason)"
-							class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-1.5 text-sm text-contrast outline-none focus:border-brand"
-						/>
-						<div class="flex flex-wrap gap-2">
-							<button
-								type="button"
-								class="rounded-full bg-green px-4 py-1.5 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
-								:disabled="decisionFor(submission.id).working || submission.result === 'PASSED'"
-								@click="decide(submission, true)"
-							>
-								{{ formatMessage(messages.accept) }}
-							</button>
-							<button
-								type="button"
-								class="rounded-full bg-red px-4 py-1.5 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
-								:disabled="decisionFor(submission.id).working || submission.result === 'REJECTED'"
-								@click="decide(submission, false)"
-							>
-								{{ formatMessage(messages.reject) }}
-							</button>
-							<button
-								type="button"
-								class="rounded-full bg-button-bg px-4 py-1.5 text-xs font-semibold text-secondary hover:brightness-110"
-								@click="regenerateInvite(submission)"
-							>
-								{{ formatMessage(messages.regenInvite) }}
-							</button>
-						</div>
-					</div>
-				</div>
+							</td>
+							<td class="px-3 py-2 text-xs text-contrast">
+								{{
+									submission.score !== null && submission.score !== undefined
+										? submission.score
+										: '—'
+								}}
+							</td>
+							<td class="px-3 py-2 text-xs text-secondary">
+								{{ formatDateTime(submission.createdAt) }}
+							</td>
+							<td class="px-3 py-2">
+								<button
+									type="button"
+									class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+									@click="openDetail(submission)"
+								>
+									{{ formatMessage(messages.details) }}
+								</button>
+							</td>
+						</tr>
+					</tbody>
+				</table>
 			</div>
 
-			<div class="flex items-center justify-center gap-3 pt-2">
+			<div class="flex items-center justify-center gap-3 pt-1">
 				<button
 					type="button"
-					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
 					:disabled="!hasPrev"
 					@click="prevPage"
 				>
@@ -454,13 +829,784 @@ onMounted(() => void load())
 				</span>
 				<button
 					type="button"
-					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
 					:disabled="!hasNext"
 					@click="nextPage"
 				>
 					{{ formatMessage(messages.next) }}
 				</button>
 			</div>
+		</template>
+		</template>
+
+		<template v-else>
+			<div class="flex flex-wrap items-center justify-between gap-3">
+				<p class="m-0 text-sm text-secondary">
+					{{ formatMessage(messages.tabPapers) }}
+				</p>
+				<button
+					type="button"
+					class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+					@click="newPaper"
+				>
+					{{ formatMessage(messages.newPaper) }}
+				</button>
+			</div>
+
+			<div
+				v-if="papersLoading"
+				class="flex min-h-32 items-center justify-center gap-2 text-sm text-secondary"
+			>
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<p
+				v-else-if="!papers.length"
+				class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+			>
+				{{ formatMessage(messages.papersEmpty) }}
+			</p>
+			<div v-else class="grid gap-4 lg:grid-cols-2">
+				<article
+					v-for="paper in papers"
+					:key="paper.id"
+					class="flex flex-col gap-3 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4"
+				>
+					<div class="flex items-start justify-between gap-3">
+						<div class="min-w-0">
+							<div class="flex flex-wrap items-center gap-2">
+								<h3 class="m-0 truncate text-base font-bold text-contrast">
+									{{ paper.title }}
+								</h3>
+								<span
+									class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+									:class="paper.enabled ? 'bg-green text-contrast' : 'bg-button-bg text-secondary'"
+								>
+									{{ paper.enabled ? '✓' : '—' }}
+								</span>
+							</div>
+							<p
+								v-if="paper.annotation"
+								class="m-0 mt-1 line-clamp-2 text-xs whitespace-pre-wrap text-secondary"
+							>
+								{{ paper.annotation }}
+							</p>
+						</div>
+						<div class="flex shrink-0 gap-1">
+							<button
+								type="button"
+								class="rounded-lg bg-button-bg px-2 py-1 text-xs font-semibold text-secondary hover:brightness-110"
+								@click="copyPaperLink(paper.id)"
+							>
+								{{ formatMessage(messages.copyLink) }}
+							</button>
+							<button
+								type="button"
+								class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+								@click="editPaper(paper)"
+							>
+								{{ formatMessage(messages.editPaper) }}
+							</button>
+						</div>
+					</div>
+					<div class="flex flex-wrap gap-2 text-[11px] text-secondary">
+						<span class="rounded-full bg-bg px-2 py-0.5">
+							{{ paper.mode === 'AUTO' ? formatMessage(messages.modeAuto) : formatMessage(messages.modeManual) }}
+						</span>
+						<span class="rounded-full bg-bg px-2 py-0.5">{{ paper.questionCount }} 题</span>
+						<span class="rounded-full bg-bg px-2 py-0.5">总分 {{ paper.totalScore }}</span>
+						<span class="rounded-full bg-bg px-2 py-0.5">通过分 {{ paper.passScore }}</span>
+						<span
+							v-for="perm in paper.targetPermissions"
+							:key="perm"
+							class="rounded-full bg-brand/20 px-2 py-0.5 text-contrast"
+						>
+							{{ permissionLabel(perm) }}
+						</span>
+					</div>
+					<div class="text-[11px] text-secondary">
+						{{ formatDateTime(paper.updatedAt) }}
+					</div>
+				</article>
+			</div>
+		</template>
+
+		<div
+			v-if="detailOpen && detailSubmission"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeDetail"
+		>
+			<div
+				class="flex max-h-[85vh] w-full max-w-3xl flex-col gap-4 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<div class="flex items-start justify-between gap-3">
+					<div class="min-w-0">
+						<h3 class="m-0 text-lg font-bold text-contrast">
+							{{ formatMessage(messages.details) }} · #{{ detailSubmission.id }}
+						</h3>
+						<p class="m-0 mt-1 text-sm text-secondary">
+							{{ detailSubmission.applicantName }}
+						</p>
+					</div>
+					<button
+						type="button"
+						class="shrink-0 rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="closeDetail"
+					>
+						✕
+					</button>
+				</div>
+
+				<div class="flex flex-wrap items-center gap-2">
+					<span
+						class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+						:class="resultClass(detailSubmission.result)"
+					>
+						{{ resultLabel(detailSubmission.result) }}
+					</span>
+					<span
+						class="rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
+					>
+						{{ modeLabel(detailSubmission.mode) }}
+					</span>
+					<span
+						v-if="detailSubmission.score !== null && detailSubmission.score !== undefined"
+						class="text-xs text-contrast"
+					>
+						{{ formatMessage(messages.score) }}: {{ detailSubmission.score }}
+					</span>
+				</div>
+
+				<div
+					v-if="detailSubmission.context"
+					class="flex flex-col gap-1 rounded-lg bg-bg-raised p-3 text-xs text-secondary"
+				>
+					<span class="font-semibold text-contrast">
+						{{ formatMessage(messages.context) }}
+					</span>
+					<span> {{ formatMessage(messages.ip) }}: {{ detailSubmission.context.ip ?? '—' }} </span>
+					<span class="break-all">
+						{{ formatMessage(messages.userAgent) }}:
+						{{ detailSubmission.context.userAgent }}
+					</span>
+					<span v-if="detailSubmission.context.activity">
+						{{ formatMessage(messages.duration) }}:
+						{{ formatDuration(detailSubmission.context.activity.durationMs) }} ·
+						{{ formatMessage(messages.hiddenTime) }}:
+						{{ formatDuration(detailSubmission.context.activity.hiddenMs) }} ·
+						{{ formatMessage(messages.screenSwitches) }}:
+						{{ detailSubmission.context.activity.screenSwitches }}
+					</span>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.answers) }}
+					</span>
+					<p
+						v-if="!detailSubmission.answers || !detailSubmission.answers.length"
+						class="m-0 text-xs text-secondary"
+					>
+						{{ formatMessage(messages.noAnswers) }}
+					</p>
+					<div v-else class="flex flex-col gap-2">
+						<div
+							v-for="(answer, idx) in detailSubmission.answers"
+							:key="answer.questionId || idx"
+							class="flex flex-col gap-1 rounded-lg border border-solid border-surface-5 bg-bg-raised p-3"
+						>
+							<div class="flex flex-wrap items-center gap-2">
+								<span class="text-sm font-semibold text-contrast">
+									{{ idx + 1 }}.
+									{{
+										questionFor(detailSubmission, answer.questionId)?.title ||
+										formatMessage(messages.questionNo, { n: idx + 1 })
+									}}
+								</span>
+								<span
+									v-if="questionFor(detailSubmission, answer.questionId)?.informationQuestion"
+									class="rounded-full bg-brand px-2 py-0.5 text-[10px] font-semibold text-contrast"
+								>
+									{{ questionFor(detailSubmission, answer.questionId)?.informationAlias || 'info' }}
+								</span>
+								<span
+									v-if="questionFor(detailSubmission, answer.questionId)?.score !== undefined"
+									class="text-xs text-secondary"
+								>
+									({{ formatMessage(messages.score) }}:
+									{{ questionFor(detailSubmission, answer.questionId)?.score }})
+								</span>
+							</div>
+							<span
+								v-if="questionFor(detailSubmission, answer.questionId)?.annotation"
+								class="text-[11px] whitespace-pre-wrap break-words text-secondary"
+							>
+								{{ questionFor(detailSubmission, answer.questionId)?.annotation }}
+							</span>
+							<span
+								class="mt-1 rounded-lg bg-bg px-3 py-2 text-sm break-words whitespace-pre-wrap text-contrast"
+							>
+								{{ answerText(answer) }}
+							</span>
+							<span
+								v-if="answer.awardedScore !== null && answer.awardedScore !== undefined"
+								class="text-xs text-secondary"
+							>
+								{{ formatMessage(messages.score) }}: {{ answer.awardedScore }}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<div
+					v-if="Object.keys(detailSubmission.automaticResults || {}).length"
+					class="flex flex-col gap-1"
+				>
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.autoChecks) }}
+					</span>
+					<div class="flex flex-wrap gap-2">
+						<span
+							v-for="(passed, key) in detailSubmission.automaticResults"
+							:key="key"
+							class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+							:class="passed ? 'bg-green text-contrast' : 'bg-red text-contrast'"
+						>
+							{{ key }}: {{ passed ? '✓' : '✗' }}
+						</span>
+					</div>
+				</div>
+
+				<div
+					v-if="detailSubmission.decisionHistory && detailSubmission.decisionHistory.length"
+					class="flex flex-col gap-1"
+				>
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.history) }}
+					</span>
+					<div
+						v-for="(h, idx) in detailSubmission.decisionHistory"
+						:key="idx"
+						class="rounded-lg bg-bg-raised p-2 text-xs text-secondary"
+					>
+						{{ h.reviewer }} · {{ resultLabel(h.result) }} ·
+						{{ formatDateTime(h.at) }}
+						<span v-if="h.reason"> · {{ h.reason }}</span>
+					</div>
+				</div>
+
+				<div class="flex flex-col gap-2 border-t border-solid border-surface-5 pt-3">
+					<input
+						v-model="decisionFor(detailSubmission.id).reason"
+						type="text"
+						:placeholder="formatMessage(messages.reason)"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+					<div class="flex flex-wrap gap-2">
+						<button
+							type="button"
+							class="rounded-lg bg-green px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+							:disabled="
+								decisionFor(detailSubmission.id).working || detailSubmission.result === 'PASSED'
+							"
+							@click="decide(detailSubmission, true)"
+						>
+							{{ formatMessage(messages.accept) }}
+						</button>
+						<button
+							type="button"
+							class="rounded-lg bg-red px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+							:disabled="
+								decisionFor(detailSubmission.id).working || detailSubmission.result === 'REJECTED'
+							"
+							@click="decide(detailSubmission, false)"
+						>
+							{{ formatMessage(messages.reject) }}
+						</button>
+						<button
+							type="button"
+							class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+							@click="regenerateInvite(detailSubmission)"
+						>
+							{{ formatMessage(messages.regenInvite) }}
+						</button>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
+
+		<div
+			v-if="paperEditorOpen"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="paperEditorOpen = false"
+		>
+			<div
+				class="flex max-h-[90vh] w-full max-w-4xl flex-col gap-4 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<div class="flex items-start justify-between gap-3">
+					<h3 class="m-0 text-lg font-bold text-contrast">
+						{{ editingPaperId ? formatMessage(messages.editPaper) : formatMessage(messages.newPaper) }}
+					</h3>
+					<button
+						type="button"
+						class="shrink-0 rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="paperEditorOpen = false"
+					>
+						✕
+					</button>
+				</div>
+
+				<div class="grid gap-4 lg:grid-cols-2">
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.paperTitle) }}
+						</span>
+						<input
+							v-model="paperForm.title"
+							type="text"
+							class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+					</label>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.paperAnnotation) }}
+						</span>
+						<textarea
+							v-model="paperForm.annotation"
+							rows="2"
+							class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						></textarea>
+					</label>
+				</div>
+
+				<div class="grid gap-4 sm:grid-cols-3">
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.paperMode) }}
+						</span>
+						<select
+							v-model="paperForm.mode"
+							class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						>
+							<option value="AUTO">{{ formatMessage(messages.modeAuto) }}</option>
+							<option value="MANUAL">{{ formatMessage(messages.modeManual) }}</option>
+						</select>
+					</label>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.paperPassScore) }}
+						</span>
+						<input
+							v-model.number="paperForm.passScore"
+							type="number"
+							min="1"
+							:max="totalScore || undefined"
+							class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+						<span class="text-[11px] text-secondary">当前总分 {{ totalScore }}</span>
+					</label>
+					<label class="flex items-center gap-2 pt-5">
+						<input v-model="paperForm.enabled" type="checkbox" class="size-4" />
+						<span class="text-sm text-contrast">{{ formatMessage(messages.paperEnabled) }}</span>
+					</label>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.paperTargetPermissions) }}
+					</span>
+					<div
+						class="flex flex-wrap items-center gap-3 rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2"
+					>
+						<label
+							v-for="perm in availablePermissions"
+							:key="'t-' + perm.value"
+							class="flex cursor-pointer items-center gap-1.5 text-xs text-contrast"
+						>
+							<input v-model="paperForm.targetPermissions" type="checkbox" :value="perm.value" class="size-3.5" />
+							{{ perm.label }}
+						</label>
+					</div>
+				</div>
+
+				<div class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 p-3">
+					<label class="flex cursor-pointer items-center gap-2">
+						<input v-model="prerequisiteEnabled" type="checkbox" class="size-4" />
+						<span class="text-sm font-semibold text-contrast">设置前置身份</span>
+					</label>
+					<div v-if="prerequisiteEnabled" class="flex flex-col gap-2 pt-1">
+						<div class="flex flex-wrap items-end gap-3">
+							<label class="flex flex-col gap-1">
+								<span class="text-[11px] text-secondary">判断方式</span>
+								<select
+									v-model="paperForm.prerequisiteMode"
+									class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+								>
+									<option value="ANY">满足任一</option>
+									<option value="ALL">满足全部</option>
+								</select>
+							</label>
+							<div
+								class="flex flex-1 flex-wrap items-center gap-3 rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2"
+							>
+								<label
+									v-for="perm in prerequisitePermissionOptions"
+									:key="'p-' + perm.value"
+									class="flex cursor-pointer items-center gap-1.5 text-xs text-contrast"
+								>
+									<input
+										v-model="paperForm.prerequisitePermissions"
+										type="checkbox"
+										:value="perm.value"
+										class="size-3.5"
+									/>
+									{{ perm.label }}
+								</label>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<label class="flex cursor-pointer items-center gap-2 rounded-lg border border-solid border-surface-5 p-3">
+					<input v-model="paperForm.preventDuplicate" type="checkbox" class="size-4" />
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.preventDuplicate) }}
+					</span>
+				</label>
+
+				<div class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 p-3">
+					<label class="flex cursor-pointer items-center gap-2">
+						<input v-model="paperForm.mail!.enabled" type="checkbox" class="size-4" />
+						<span class="text-sm font-semibold text-contrast">
+							{{ formatMessage(messages.mailEnabled) }}
+						</span>
+					</label>
+					<div v-if="paperForm.mail!.enabled" class="flex flex-col gap-3 pt-1">
+						<label class="flex flex-col gap-1">
+							<span class="text-[11px] text-secondary">
+								{{ formatMessage(messages.mailSubject) }}
+							</span>
+							<input
+								v-model="paperForm.mail!.subject"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-1.5 text-sm text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+						<label class="flex flex-col gap-1">
+							<span class="text-[11px] text-secondary">
+								{{ formatMessage(messages.mailMessage) }}
+							</span>
+							<textarea
+								v-model="paperForm.mail!.message"
+								rows="4"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-1.5 text-sm text-contrast outline-none focus:border-brand"
+							></textarea>
+						</label>
+						<label class="flex flex-col gap-1">
+							<span class="text-[11px] text-secondary">
+								{{ formatMessage(messages.mailExtra) }}
+							</span>
+							<textarea
+								v-model="paperForm.mail!.extraText"
+								rows="2"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+							></textarea>
+						</label>
+						<label class="flex cursor-pointer items-center gap-2 text-xs text-contrast">
+							<input v-model="paperForm.mail!.includeInviteCode" type="checkbox" class="size-3.5" />
+							{{ formatMessage(messages.mailIncludeInvite) }}
+						</label>
+					</div>
+				</div>
+
+				<div class="flex flex-wrap items-center justify-between gap-2 border-t border-solid border-surface-5 pt-3">
+					<span class="text-sm font-semibold text-contrast">
+						{{ formatMessage(messages.paperQuestions) }} ({{ paperForm.questions.length }})
+					</span>
+					<select
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-2 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+						@change="onQuestionTypeSelected"
+					>
+						<option value="">{{ formatMessage(messages.addQuestion) }}…</option>
+						<option v-for="t in availableQuestionTypes()" :key="t" :value="t">
+							{{ questionTypeOptions.find((q) => q.value === t)?.label }}
+						</option>
+					</select>
+				</div>
+
+				<p
+					v-if="!paperForm.questions.length"
+					class="m-0 rounded-lg bg-bg-raised p-3 text-xs text-secondary"
+				>
+					还没有题目，请从上方下拉框添加。
+				</p>
+
+				<article
+					v-for="(question, qIndex) in paperForm.questions"
+					:key="question.id"
+					class="flex flex-col gap-3 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4"
+				>
+					<div class="flex flex-wrap items-center justify-between gap-2">
+						<div class="flex flex-wrap items-center gap-2">
+							<span class="rounded-full bg-brand px-2 py-0.5 text-[10px] font-semibold text-contrast">
+								{{ qIndex + 1 }}
+							</span>
+							<span class="text-xs font-semibold text-contrast">
+								{{ questionTypeOptions.find((q) => q.value === question.type)?.label }}
+							</span>
+							<span v-if="question.optional" class="rounded-full bg-button-bg px-2 py-0.5 text-[10px] text-secondary">
+								选答
+							</span>
+							<span v-if="question.fatal" class="rounded-full bg-red px-2 py-0.5 text-[10px] text-contrast">
+								生死题
+							</span>
+						</div>
+						<div class="flex gap-1">
+							<button
+								type="button"
+								class="rounded bg-button-bg px-2 py-1 text-[11px] text-secondary disabled:opacity-40"
+								:disabled="qIndex === 0"
+								@click="moveQuestion(qIndex, -1)"
+							>
+								↑
+							</button>
+							<button
+								type="button"
+								class="rounded bg-button-bg px-2 py-1 text-[11px] text-secondary disabled:opacity-40"
+								:disabled="qIndex === paperForm.questions.length - 1"
+								@click="moveQuestion(qIndex, 1)"
+							>
+								↓
+							</button>
+						<button
+							type="button"
+							class="rounded-lg bg-red/20 px-2 py-1 text-[11px] font-semibold text-red hover:brightness-110"
+							@click="removeQuestion(qIndex)"
+						>
+							{{ formatMessage(messages.removeQuestion) }}
+						</button>
+						</div>
+					</div>
+
+					<div class="grid gap-3 lg:grid-cols-[1fr_7rem]">
+						<label class="flex flex-col gap-1">
+							<span class="text-[11px] text-secondary">{{ formatMessage(messages.questionTitle) }}</span>
+							<textarea
+								v-model="question.title"
+								rows="2"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+							></textarea>
+						</label>
+						<label class="flex flex-col gap-1">
+							<span class="text-[11px] text-secondary">{{ formatMessage(messages.questionScore) }}</span>
+							<input
+								v-model.number="question.score"
+								type="number"
+								min="0"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+					</div>
+
+					<label class="flex flex-col gap-1">
+						<span class="text-[11px] text-secondary">{{ formatMessage(messages.questionAnnotation) }}</span>
+						<textarea
+							v-model="question.annotation"
+							rows="1"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-3 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+						></textarea>
+					</label>
+
+					<div class="flex flex-wrap items-center gap-4">
+						<label class="flex cursor-pointer items-center gap-1.5 text-xs text-contrast">
+							<input v-model="question.informationQuestion" type="checkbox" class="size-3.5" />
+							信息题
+						</label>
+						<input
+							v-if="question.informationQuestion"
+							v-model="question.informationAlias"
+							type="text"
+							placeholder="信息代称，如 QQ 号"
+							class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+						/>
+						<label
+							v-if="paperForm.mode === 'MANUAL'"
+							class="flex cursor-pointer items-center gap-1.5 text-xs text-contrast"
+						>
+							<input v-model="question.optional" type="checkbox" class="size-3.5" @change="setOptionalQuestion(question)" />
+							选答题
+						</label>
+						<label v-if="supportsFatal(question)" class="flex cursor-pointer items-center gap-1.5 text-xs text-contrast">
+							<input v-model="question.fatal" type="checkbox" class="size-3.5" @change="setFatalQuestion(question)" />
+							生死题
+						</label>
+						<label
+							v-if="paperForm.mode === 'MANUAL' && !question.optional && supportsAutoReview(question)"
+							class="flex cursor-pointer items-center gap-1.5 text-xs text-contrast"
+						>
+							<input v-model="question.autoReview" type="checkbox" class="size-3.5" :disabled="question.fatal" />
+							自动批复
+						</label>
+					</div>
+
+					<div v-if="isChoice(question)" class="flex flex-col gap-2">
+						<div class="flex items-center justify-between">
+							<span class="text-xs font-semibold text-contrast">选项</span>
+							<button
+								v-if="question.type !== 'TRUE_FALSE'"
+								type="button"
+								class="rounded-lg bg-button-bg px-2 py-1 text-[11px] font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+								:disabled="(question.options?.length ?? 0) >= 10"
+								@click="addOption(question)"
+							>
+								{{ formatMessage(messages.addOption) }}
+							</button>
+						</div>
+						<label
+							v-if="question.type === 'MULTIPLE' && isAutomaticallyReviewed(question)"
+							class="flex flex-col gap-1"
+						>
+							<span class="text-[11px] text-secondary">多选题计分模式</span>
+							<select
+								v-model="question.multipleScoreMode"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							>
+								<option v-for="m in multipleScoreModeOptions" :key="m.value" :value="m.value">
+									{{ m.label }}
+								</option>
+							</select>
+						</label>
+						<div
+							v-for="(option, optionIndex) in question.options"
+							:key="option.id"
+							class="grid items-center gap-2 sm:grid-cols-[auto_1fr_auto]"
+						>
+							<div class="flex flex-col gap-1">
+								<label class="flex items-center gap-1 text-[11px] text-contrast">
+									<input
+										v-model="option.defaultSelected"
+										type="checkbox"
+										class="size-3"
+										@change="setDefaultOption(question, option.id)"
+									/>
+									默认
+								</label>
+								<label
+									v-if="paperForm.mode === 'AUTO' || question.autoReview"
+									class="flex items-center gap-1 text-[11px] text-contrast"
+								>
+									<input
+										v-if="question.type === 'MULTIPLE'"
+										v-model="option.correct"
+										type="checkbox"
+										class="size-3"
+									/>
+									<input
+										v-else
+										type="radio"
+										class="size-3"
+										:name="'correct-' + question.id"
+										:checked="option.correct"
+										@change="setCorrectOption(question, option.id)"
+									/>
+									正确
+								</label>
+								<label
+									v-if="showOptionScore(question)"
+									class="flex items-center gap-1 text-[11px] text-contrast"
+								>
+									<span class="shrink-0">{{ option.correct ? '得分' : '扣分' }}</span>
+									<input
+										v-model.number="option.score"
+										type="number"
+										min="0"
+										:max="question.score"
+										step="0.1"
+										class="w-16 rounded-lg border border-solid border-surface-5 bg-bg px-1.5 py-0.5 text-xs text-contrast"
+									/>
+								</label>
+							</div>
+							<input
+								v-model="option.description"
+								type="text"
+								:placeholder="'选项 ' + (optionIndex + 1)"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							/>
+							<div class="flex gap-1">
+								<button
+									type="button"
+									class="rounded bg-button-bg px-1.5 py-0.5 text-[10px] text-secondary disabled:opacity-40"
+									:disabled="optionIndex === 0"
+									@click="moveOption(question, optionIndex, -1)"
+								>
+									↑
+								</button>
+								<button
+									type="button"
+									class="rounded bg-button-bg px-1.5 py-0.5 text-[10px] text-secondary disabled:opacity-40"
+									:disabled="optionIndex === (question.options?.length ?? 0) - 1"
+									@click="moveOption(question, optionIndex, 1)"
+								>
+									↓
+								</button>
+								<button
+									v-if="question.type !== 'TRUE_FALSE'"
+									type="button"
+									class="rounded bg-red/20 px-1.5 py-0.5 text-[10px] text-red disabled:opacity-40"
+									:disabled="(question.options?.length ?? 0) <= 2"
+									@click="removeOption(question, optionIndex)"
+								>
+									✕
+								</button>
+							</div>
+						</div>
+					</div>
+
+					<div
+						v-if="question.type === 'FILL' || question.type === 'ESSAY'"
+						class="grid gap-3 sm:grid-cols-[8rem_1fr]"
+					>
+						<label class="flex flex-col gap-1">
+							<span class="text-[11px] text-secondary">作答字数上限</span>
+							<input
+								v-model.number="question.maxLength"
+								type="number"
+								min="1"
+								:max="question.type === 'FILL' ? 150 : 300"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast"
+							/>
+						</label>
+						<label v-if="paperForm.mode === 'AUTO' || question.autoReview" class="flex flex-col gap-1">
+							<span class="text-[11px] text-secondary">标准答案（完全一致才判正确）</span>
+							<input
+								v-model="question.answer"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+					</div>
+				</article>
+
+				<div class="flex justify-end gap-2 border-t border-solid border-surface-5 pt-3">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="paperEditorOpen = false"
+					>
+						取消
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="paperSaving"
+						@click="savePaper"
+					>
+						{{ paperSaving ? formatMessage(messages.loading) : '保存' }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+
 </template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 4bc126b..313fa7c 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -564,32 +564,32 @@ export function skinSitePublicMapServers(): Promise<SkinSiteResponse<SkinSitePub
 export type SkinSiteReviewQuestionType = 'SINGLE' | 'MULTIPLE' | 'TRUE_FALSE' | 'FILL' | 'ESSAY'
 export type SkinSiteReviewResult = 'PENDING' | 'PASSED' | 'REJECTED'
 
-export interface SkinSiteReviewOption {
+export interface SkinSiteReviewPublicOption {
 	id: string
 	description: string
 	correct?: boolean
 	defaultSelected?: boolean
 }
 
-export interface SkinSiteReviewQuestion {
+export interface SkinSiteReviewPublicQuestion {
 	id: string
-	type: SkinSiteReviewQuestionType
+	type: SkinSiteReviewPublicQuestionType
 	title: string
 	annotation?: string | null
 	score?: number
 	optional?: boolean
 	fatal?: boolean
-	options?: SkinSiteReviewOption[]
+	options?: SkinSiteReviewPublicOption[]
 	answer?: string | null
 	maxLength?: number | null
 	informationQuestion?: boolean
 }
 
-export interface SkinSiteReviewPaper {
+export interface SkinSiteReviewPublicPaper {
 	id: string
 	title: string
 	description?: string
-	questions: SkinSiteReviewQuestion[]
+	questions: SkinSiteReviewPublicQuestion[]
 	[key: string]: unknown
 }
 
@@ -1039,6 +1039,42 @@ export function skinSiteAdminUserFrequencyLimit(
 
 export type SkinSiteReviewMode = 'AUTO' | 'MANUAL'
 
+export type SkinSiteReviewQuestionType = 'SINGLE' | 'MULTIPLE' | 'TRUE_FALSE' | 'FILL' | 'ESSAY'
+
+export interface SkinSiteReviewOption {
+	id: string
+	description: string
+	correct: boolean
+	defaultSelected: boolean
+	score: number
+}
+
+export interface SkinSiteReviewQuestion {
+	id: string
+	type: SkinSiteReviewQuestionType
+	title: string
+	annotation?: string | null
+	score: number
+	optional: boolean
+	fatal: boolean
+	autoReview: boolean
+	options: SkinSiteReviewOption[]
+	answer?: string | null
+	maxLength?: number | null
+	informationQuestion?: boolean
+	informationAlias?: string | null
+}
+
+export interface SkinSiteReviewPaper {
+	id: string
+	title: string
+	annotation?: string | null
+	mode: SkinSiteReviewMode
+	passScore: number
+	version: number
+	questions: SkinSiteReviewQuestion[]
+}
+
 export interface SkinSiteReviewAnswer {
 	id: string
 	questionId?: string
@@ -1069,6 +1105,7 @@ export interface SkinSiteReviewSubmission {
 	createdAt: number
 	reviewedAt?: number | null
 	answers: SkinSiteReviewAnswer[]
+	paper: SkinSiteReviewPaper
 	decisionHistory?: Array<{
 		previousResult: SkinSiteReviewResult
 		result: SkinSiteReviewResult
@@ -1789,3 +1826,79 @@ export function skinSiteWikiUpdateSettings(
 		body: settings,
 	})
 }
+
+
+export interface SkinSiteReviewPaperSummary {
+	id: string
+	enabled: boolean
+	title: string
+	annotation?: string | null
+	mode: SkinSiteReviewMode
+	passScore: number
+	targetPermissions: string[]
+	version: number
+	questionCount: number
+	totalScore: number
+	updatedAt: number
+	prerequisiteMode: 'ANY' | 'ALL'
+	prerequisitePermissions: string[]
+	eligible: boolean
+}
+
+export interface SkinSiteReviewMailConfig {
+	enabled: boolean
+	subject: string
+	message: string
+	includeInviteCode: boolean
+	extraText: string
+}
+
+export interface SkinSiteReviewConfigData {
+	preventDuplicate?: boolean
+	mail?: SkinSiteReviewMailConfig
+	id: string
+	enabled: boolean
+	title: string
+	annotation?: string | null
+	mode: SkinSiteReviewMode
+	passScore: number
+	targetPermissions: string[]
+	version: number
+	questions: SkinSiteReviewQuestion[]
+	updatedAt: number
+	prerequisiteMode: 'ANY' | 'ALL'
+	prerequisitePermissions: string[]
+}
+
+export function skinSiteReviewPaperList(): Promise<
+	SkinSiteResponse<SkinSiteReviewPaperSummary[]>
+> {
+	return skinSiteRequest<SkinSiteReviewPaperSummary[]>('review/admin/papers')
+}
+
+export function skinSiteReviewPaperAdmin(
+	paperId: string,
+): Promise<SkinSiteResponse<SkinSiteReviewConfigData>> {
+	return skinSiteRequest<SkinSiteReviewConfigData>(
+		'review/admin/papers/' + encodeURIComponent(paperId),
+	)
+}
+
+export function skinSiteCreateReviewPaperAdmin(
+	data: SkinSiteReviewConfigData,
+): Promise<SkinSiteResponse<SkinSiteReviewConfigData>> {
+	return skinSiteRequest<SkinSiteReviewConfigData>('review/admin/papers', {
+		method: 'POST',
+		body: data,
+	})
+}
+
+export function skinSiteUpdateReviewPaperAdmin(
+	paperId: string,
+	data: SkinSiteReviewConfigData,
+): Promise<SkinSiteResponse<SkinSiteReviewConfigData>> {
+	return skinSiteRequest<SkinSiteReviewConfigData>(
+		'review/admin/papers/' + encodeURIComponent(paperId),
+		{ method: 'PUT', body: data },
+	)
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 9e29657..ddfee71 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12141,5 +12141,42 @@
   "app.skin-site.admin.wiki.max-page-bytes": {"message": "Max page bytes"},
   "app.skin-site.admin.wiki.max-attachment-bytes": {"message": "Max attachment bytes"},
   "app.skin-site.admin.wiki.save-settings": {"message": "Save settings"},
-  "app.skin-site.admin.wiki.settings-saved": {"message": "Settings saved."}
+  "app.skin-site.admin.wiki.settings-saved": {"message": "Settings saved."},
+  "app.skin-site.admin.review.tab-list": {"message": "Submissions"},
+  "app.skin-site.admin.review.tab-papers": {"message": "Papers"},
+  "app.skin-site.admin.review.papers-empty": {"message": "No review papers yet."},
+  "app.skin-site.admin.review.new-paper": {"message": "New paper"},
+  "app.skin-site.admin.review.edit-paper": {"message": "Edit"},
+  "app.skin-site.admin.review.paper-title": {"message": "Title"},
+  "app.skin-site.admin.review.paper-annotation": {"message": "Description"},
+  "app.skin-site.admin.review.paper-enabled": {"message": "Enabled"},
+  "app.skin-site.admin.review.paper-mode": {"message": "Mode"},
+  "app.skin-site.admin.review.paper-pass-score": {"message": "Pass score"},
+  "app.skin-site.admin.review.paper-target-permissions": {"message": "Target permissions"},
+  "app.skin-site.admin.review.paper-questions": {"message": "Questions"},
+  "app.skin-site.admin.review.add-question": {"message": "Add question"},
+  "app.skin-site.admin.review.question-title": {"message": "Question title"},
+  "app.skin-site.admin.review.question-type": {"message": "Type"},
+  "app.skin-site.admin.review.question-score": {"message": "Score"},
+  "app.skin-site.admin.review.question-annotation": {"message": "Annotation"},
+  "app.skin-site.admin.review.add-option": {"message": "Add option"},
+  "app.skin-site.admin.review.option-description": {"message": "Option text"},
+  "app.skin-site.admin.review.option-correct": {"message": "Correct"},
+  "app.skin-site.admin.review.remove-question": {"message": "Remove"},
+  "app.skin-site.admin.review.question-no": {"message": "Question {n}"},
+  "app.skin-site.admin.review.paper-created": {"message": "Paper created."},
+  "app.skin-site.admin.review.paper-saved": {"message": "Paper saved."},
+  "app.skin-site.admin.review.mail-title": {"message": "Pass mail"},
+  "app.skin-site.admin.review.mail-enabled": {"message": "Send mail on pass"},
+  "app.skin-site.admin.review.mail-subject": {"message": "Subject"},
+  "app.skin-site.admin.review.mail-message": {"message": "Body"},
+  "app.skin-site.admin.review.mail-extra": {"message": "Extra text"},
+  "app.skin-site.admin.review.mail-include-invite": {"message": "Include invite code"},
+  "app.skin-site.admin.review.prevent-duplicate": {"message": "Reject duplicate submissions"},
+  "app.skin-site.admin.review.copy-link": {"message": "Copy link"},
+  "app.skin-site.admin.review.link-copied": {"message": "Link copied."},
+  "app.skin-site.admin.review.move-up": {"message": "Move up"},
+  "app.skin-site.admin.review.move-down": {"message": "Move down"},
+  "app.skin-site.admin.review.mail-subject-required": {"message": "Subject is required when mail is enabled."},
+  "app.skin-site.admin.review.mail-message-required": {"message": "Body is required when mail is enabled."}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 2dac68e..3cc6a7b 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11972,5 +11972,42 @@
   "app.skin-site.admin.wiki.max-page-bytes": {"message": "页面最大字节数"},
   "app.skin-site.admin.wiki.max-attachment-bytes": {"message": "附件最大字节数"},
   "app.skin-site.admin.wiki.save-settings": {"message": "保存设置"},
-  "app.skin-site.admin.wiki.settings-saved": {"message": "设置已保存。"}
+  "app.skin-site.admin.wiki.settings-saved": {"message": "设置已保存。"},
+  "app.skin-site.admin.review.tab-list": {"message": "申请列表"},
+  "app.skin-site.admin.review.tab-papers": {"message": "试卷管理"},
+  "app.skin-site.admin.review.papers-empty": {"message": "还没有审核试卷。"},
+  "app.skin-site.admin.review.new-paper": {"message": "新建试卷"},
+  "app.skin-site.admin.review.edit-paper": {"message": "编辑"},
+  "app.skin-site.admin.review.paper-title": {"message": "试卷标题"},
+  "app.skin-site.admin.review.paper-annotation": {"message": "描述"},
+  "app.skin-site.admin.review.paper-enabled": {"message": "启用"},
+  "app.skin-site.admin.review.paper-mode": {"message": "阅卷模式"},
+  "app.skin-site.admin.review.paper-pass-score": {"message": "通过分数"},
+  "app.skin-site.admin.review.paper-target-permissions": {"message": "通过后获得的身份"},
+  "app.skin-site.admin.review.paper-questions": {"message": "题目"},
+  "app.skin-site.admin.review.add-question": {"message": "添加题目"},
+  "app.skin-site.admin.review.question-title": {"message": "题目"},
+  "app.skin-site.admin.review.question-type": {"message": "题型"},
+  "app.skin-site.admin.review.question-score": {"message": "分数"},
+  "app.skin-site.admin.review.question-annotation": {"message": "题目注解"},
+  "app.skin-site.admin.review.add-option": {"message": "添加选项"},
+  "app.skin-site.admin.review.option-description": {"message": "选项文本"},
+  "app.skin-site.admin.review.option-correct": {"message": "正确"},
+  "app.skin-site.admin.review.remove-question": {"message": "删除"},
+  "app.skin-site.admin.review.question-no": {"message": "第 {n} 题"},
+  "app.skin-site.admin.review.paper-created": {"message": "试卷已创建。"},
+  "app.skin-site.admin.review.paper-saved": {"message": "试卷已保存。"},
+  "app.skin-site.admin.review.mail-title": {"message": "通过邮件"},
+  "app.skin-site.admin.review.mail-enabled": {"message": "审核通过后发送邮件"},
+  "app.skin-site.admin.review.mail-subject": {"message": "邮件标题"},
+  "app.skin-site.admin.review.mail-message": {"message": "邮件正文"},
+  "app.skin-site.admin.review.mail-extra": {"message": "邮件补充说明"},
+  "app.skin-site.admin.review.mail-include-invite": {"message": "附带邀请码"},
+  "app.skin-site.admin.review.prevent-duplicate": {"message": "禁止重复作答"},
+  "app.skin-site.admin.review.copy-link": {"message": "复制直链"},
+  "app.skin-site.admin.review.link-copied": {"message": "直链已复制。"},
+  "app.skin-site.admin.review.move-up": {"message": "上移"},
+  "app.skin-site.admin.review.move-down": {"message": "下移"},
+  "app.skin-site.admin.review.mail-subject-required": {"message": "开启邮件后必须填写邮件标题。"},
+  "app.skin-site.admin.review.mail-message-required": {"message": "开启邮件后必须填写邮件正文。"}
 }

From fbcbb803acfc56a601b928594832fba425b04ce6 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 11:18:55 +0800
Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=A8=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 用户列表：搜索（用户名/邮箱/UUID）、分页、封禁状态、注册时间
- 编辑用户：用户名、邮箱、QQ、密码、权限组、封禁状态
- 绑定玩家：展示 Mojang / StarLight 来源与旧内服适配标记
- Bot 管理：查看状态、修改机器人用户名、使 Token 失效、封禁/解封 Bot 创建
- 频率限制：滑块与数字输入设置丢包频率，支持保存与取消
- 管理审计：按用户或全局查看，游标分页加载更早记录
- 邀请码：按邮箱生成邀请码并复制
- 补充对应 API 与类型定义，中英文各补 39 个文案
---
 .../ui/skin-site/admin/AdminUsersPage.vue     | 1305 ++++++++++++++---
 .../app-frontend/src/helpers/skin-site-api.ts |  113 ++
 .../app-frontend/src/locales/en-US/index.json |   41 +-
 .../app-frontend/src/locales/zh-CN/index.json |   41 +-
 4 files changed, 1257 insertions(+), 243 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminUsersPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminUsersPage.vue
index 3cf833a..bf28e4e 100644
--- a/apps/app-frontend/src/components/ui/skin-site/admin/AdminUsersPage.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminUsersPage.vue
@@ -4,11 +4,22 @@ import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/u
 import { computed, onMounted, ref } from 'vue'
 
 import {
-	skinSiteAdminDeleteUser,
 	type SkinSiteAdminPlayer,
-	skinSiteAdminUpdateUser,
 	type SkinSiteAdminUser,
+	type SkinSiteBotInfo,
+	type SkinSiteUserAdminAuditInfo,
+	type SkinSiteUserFrequencyLimit,
+	skinSiteAdminBotInfo,
+	skinSiteAdminDeleteUser,
+	skinSiteAdminInvalidateBotToken,
+	skinSiteAdminInviteUser,
+	skinSiteAdminRenameBot,
+	skinSiteAdminSetBotCreationBanned,
+	skinSiteAdminUpdateUser,
+	skinSiteAdminUpdateUserFrequencyLimit,
+	skinSiteAdminUserAudit,
 	skinSiteAdminUserCount,
+	skinSiteAdminUserFrequencyLimit,
 	skinSiteAdminUserList,
 	skinSiteAdminUserPlayers,
 } from '@/helpers/skin-site-api'
@@ -36,10 +47,6 @@ const messages = defineMessages({
 	players: { id: 'app.skin-site.admin.users.players', defaultMessage: 'Players' },
 	updated: { id: 'app.skin-site.admin.users.updated', defaultMessage: 'User updated.' },
 	deleted: { id: 'app.skin-site.admin.users.deleted', defaultMessage: 'User deleted.' },
-	confirmDelete: {
-		id: 'app.skin-site.admin.users.confirm-delete',
-		defaultMessage: 'Delete user “{name}”? This cannot be undone.',
-	},
 	username: { id: 'app.skin-site.admin.users.username', defaultMessage: 'Username' },
 	email: { id: 'app.skin-site.admin.users.email', defaultMessage: 'Email' },
 	qq: { id: 'app.skin-site.admin.users.qq', defaultMessage: 'QQ' },
@@ -56,6 +63,108 @@ const messages = defineMessages({
 	},
 	noPlayers: { id: 'app.skin-site.admin.users.no-players', defaultMessage: 'No linked players.' },
 	registered: { id: 'app.skin-site.admin.users.registered', defaultMessage: 'Registered' },
+	bot: { id: 'app.skin-site.admin.users.bot', defaultMessage: 'Bot' },
+	botTitle: { id: 'app.skin-site.admin.users.bot-title', defaultMessage: 'Bot management' },
+	botExists: { id: 'app.skin-site.admin.users.bot-exists', defaultMessage: 'Bot created' },
+	botNotExists: { id: 'app.skin-site.admin.users.bot-not-exists', defaultMessage: 'No bot yet' },
+	botActive: { id: 'app.skin-site.admin.users.bot-active', defaultMessage: 'Token valid' },
+	botInactive: {
+		id: 'app.skin-site.admin.users.bot-inactive',
+		defaultMessage: 'Token invalidated',
+	},
+	botCreationBanned: {
+		id: 'app.skin-site.admin.users.bot-creation-banned',
+		defaultMessage: 'Token creation banned',
+	},
+	botUsername: {
+		id: 'app.skin-site.admin.users.bot-username',
+		defaultMessage: 'Bot username',
+	},
+	botSaveUsername: {
+		id: 'app.skin-site.admin.users.bot-save-username',
+		defaultMessage: 'Save bot username',
+	},
+	botTokenHint: {
+		id: 'app.skin-site.admin.users.bot-token-hint',
+		defaultMessage: 'Token hint',
+	},
+	botInvalidate: {
+		id: 'app.skin-site.admin.users.bot-invalidate',
+		defaultMessage: 'Invalidate token',
+	},
+	botBan: { id: 'app.skin-site.admin.users.bot-ban', defaultMessage: 'Ban bot creation' },
+	botUnban: { id: 'app.skin-site.admin.users.bot-unban', defaultMessage: 'Unban bot creation' },
+	frequency: { id: 'app.skin-site.admin.users.frequency', defaultMessage: 'Rate limit' },
+	frequencyTitle: {
+		id: 'app.skin-site.admin.users.frequency-title',
+		defaultMessage: 'Rate limit',
+	},
+	frequencyHint: {
+		id: 'app.skin-site.admin.users.frequency-hint',
+		defaultMessage: 'Packets from this user will be dropped at the given rate.',
+	},
+	frequencyNone: {
+		id: 'app.skin-site.admin.users.frequency-none',
+		defaultMessage: 'Not enabled',
+	},
+	frequencyCurrent: {
+		id: 'app.skin-site.admin.users.frequency-current',
+		defaultMessage: 'Currently {percent}%',
+	},
+	frequencyRange: {
+		id: 'app.skin-site.admin.users.frequency-range',
+		defaultMessage: 'Only integer values from 10% to 100% are allowed.',
+	},
+	frequencySave: {
+		id: 'app.skin-site.admin.users.frequency-save',
+		defaultMessage: 'Save limit',
+	},
+	frequencyClear: {
+		id: 'app.skin-site.admin.users.frequency-clear',
+		defaultMessage: 'Clear limit',
+	},
+	audit: { id: 'app.skin-site.admin.users.audit', defaultMessage: 'Audit' },
+	auditTitle: {
+		id: 'app.skin-site.admin.users.audit-title',
+		defaultMessage: 'User management audit',
+	},
+	auditEmpty: {
+		id: 'app.skin-site.admin.users.audit-empty',
+		defaultMessage: 'No audit records yet.',
+	},
+	auditMore: { id: 'app.skin-site.admin.users.audit-more', defaultMessage: 'Load earlier' },
+	invite: { id: 'app.skin-site.admin.users.invite', defaultMessage: 'Invite user' },
+	inviteTitle: { id: 'app.skin-site.admin.users.invite-title', defaultMessage: 'Invite user' },
+	inviteEmail: { id: 'app.skin-site.admin.users.invite-email', defaultMessage: 'Email' },
+	inviteGenerate: {
+		id: 'app.skin-site.admin.users.invite-generate',
+		defaultMessage: 'Generate invite code',
+	},
+	inviteCopy: { id: 'app.skin-site.admin.users.invite-copy', defaultMessage: 'Copy' },
+	inviteCopied: {
+		id: 'app.skin-site.admin.users.invite-copied',
+		defaultMessage: 'Invite code copied.',
+	},
+	inviteEmailInvalid: {
+		id: 'app.skin-site.admin.users.invite-email-invalid',
+		defaultMessage: 'Enter a valid email address.',
+	},
+	boundPlayersTitle: {
+		id: 'app.skin-site.admin.users.bound-players-title',
+		defaultMessage: 'Linked players',
+	},
+	legacyAdapted: {
+		id: 'app.skin-site.admin.users.legacy-adapted',
+		defaultMessage: 'Legacy internal adapted',
+	},
+	registeredAt: {
+		id: 'app.skin-site.admin.users.registered-at',
+		defaultMessage: 'Registered at',
+	},
+	status: { id: 'app.skin-site.admin.users.status', defaultMessage: 'Status' },
+	statusNormal: { id: 'app.skin-site.admin.users.status-normal', defaultMessage: 'Normal' },
+	statusBanned: { id: 'app.skin-site.admin.users.status-banned', defaultMessage: 'Banned' },
+	actions: { id: 'app.skin-site.admin.users.actions', defaultMessage: 'Actions' },
 })
 
 const PAGE_SIZE = 20
@@ -83,26 +192,283 @@ const deletingUuid = ref<string | null>(null)
 
 const playersFor = ref<SkinSiteAdminPlayer[] | null>(null)
 const playersLoading = ref(false)
-const playersUuid = ref<string | null>(null)
+const playersTarget = ref<SkinSiteAdminUser | null>(null)
 
 const page = computed(() => Math.floor(offset.value / PAGE_SIZE) + 1)
 const pageCount = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)))
 const hasPrev = computed(() => offset.value > 0)
 const hasNext = computed(() => offset.value + PAGE_SIZE < total.value)
 
-const SEARCH_FIELDS: Array<'username' | 'email' | 'uuid'> = ['username', 'email', 'uuid']
+// ---------- bot ----------
+const botTarget = ref<SkinSiteAdminUser | null>(null)
+const botInfo = ref<SkinSiteBotInfo | null>(null)
+const botLoading = ref(false)
+const botBusy = ref(false)
+const botUsername = ref('')
+const validBotUsername = computed(() => {
+	const name = botUsername.value.trim()
+	return name.length >= 2 && name.length <= 32
+})
 
-function searchFieldLabel(field: string): string {
-	if (field === 'email') return formatMessage(messages.searchEmail)
-	if (field === 'uuid') return formatMessage(messages.searchUuid)
-	return formatMessage(messages.searchName)
+function openBot(user: SkinSiteAdminUser) {
+	botTarget.value = user
+	botInfo.value = null
+	botUsername.value = ''
+	botLoading.value = true
+	skinSiteAdminBotInfo(user.uuid)
+		.then((res) => {
+			if (!res.success) throw new Error(res.errorMessage)
+			botInfo.value = res.payload
+			botUsername.value = res.payload.username ?? ''
+		})
+		.catch(handleError)
+		.finally(() => {
+			botLoading.value = false
+		})
 }
 
-function formatDate(ts: number): string {
+function closeBot() {
+	botTarget.value = null
+	botInfo.value = null
+}
+
+async function saveBotUsername() {
+	if (!botTarget.value || !validBotUsername.value) return
+	botBusy.value = true
 	try {
-		return new Date(ts).toLocaleDateString()
+		const res = await skinSiteAdminRenameBot(botTarget.value.uuid, botUsername.value.trim())
+		if (!res.success) throw new Error(res.errorMessage)
+		botInfo.value = res.payload
+		botUsername.value = res.payload.username ?? ''
+	} catch (error) {
+		handleError(error)
+	} finally {
+		botBusy.value = false
+	}
+}
+
+async function invalidateBot() {
+	if (!botTarget.value) return
+	botBusy.value = true
+	try {
+		const res = await skinSiteAdminInvalidateBotToken(botTarget.value.uuid)
+		if (!res.success) throw new Error(res.errorMessage)
+		botInfo.value = res.payload
+	} catch (error) {
+		handleError(error)
+	} finally {
+		botBusy.value = false
+	}
+}
+
+async function toggleBotCreationBan() {
+	if (!botTarget.value || !botInfo.value) return
+	botBusy.value = true
+	try {
+		const res = await skinSiteAdminSetBotCreationBanned(
+			botTarget.value.uuid,
+			!botInfo.value.creationBanned,
+		)
+		if (!res.success) throw new Error(res.errorMessage)
+		botInfo.value = res.payload
+	} catch (error) {
+		handleError(error)
+	} finally {
+		botBusy.value = false
+	}
+}
+
+// ---------- frequency ----------
+const frequencyTarget = ref<SkinSiteAdminUser | null>(null)
+const frequencyLoading = ref(false)
+const frequencyBusy = ref(false)
+const frequencyCurrent = ref<SkinSiteUserFrequencyLimit | null>(null)
+const frequencyPercent = ref(50)
+
+const validFrequency = computed(
+	() =>
+		Number.isInteger(frequencyPercent.value) &&
+		frequencyPercent.value >= 10 &&
+		frequencyPercent.value <= 100,
+)
+const currentFrequencyLimit = computed(() => frequencyCurrent.value?.dropPercent ?? null)
+
+function openFrequency(user: SkinSiteAdminUser) {
+	frequencyTarget.value = user
+	frequencyCurrent.value = null
+	frequencyPercent.value = 50
+	frequencyLoading.value = true
+	skinSiteAdminUserFrequencyLimit(user.uuid)
+		.then((res) => {
+			if (!res.success) throw new Error(res.errorMessage)
+			frequencyCurrent.value = res.payload
+			frequencyPercent.value = res.payload.dropPercent ?? 50
+		})
+		.catch(handleError)
+		.finally(() => {
+			frequencyLoading.value = false
+		})
+}
+
+function closeFrequency() {
+	frequencyTarget.value = null
+	frequencyCurrent.value = null
+}
+
+async function saveFrequency() {
+	if (!frequencyTarget.value || !validFrequency.value) return
+	frequencyBusy.value = true
+	try {
+		const res = await skinSiteAdminUpdateUserFrequencyLimit(
+			frequencyTarget.value.uuid,
+			frequencyPercent.value,
+		)
+		if (!res.success) throw new Error(res.errorMessage)
+		frequencyCurrent.value = res.payload
+	} catch (error) {
+		handleError(error)
+	} finally {
+		frequencyBusy.value = false
+	}
+}
+
+async function clearFrequency() {
+	if (!frequencyTarget.value) return
+	frequencyBusy.value = true
+	try {
+		const res = await skinSiteAdminUpdateUserFrequencyLimit(frequencyTarget.value.uuid, null)
+		if (!res.success) throw new Error(res.errorMessage)
+		frequencyCurrent.value = res.payload
+	} catch (error) {
+		handleError(error)
+	} finally {
+		frequencyBusy.value = false
+	}
+}
+
+// ---------- audit ----------
+const auditTarget = ref<SkinSiteAdminUser | null>(null)
+const auditItems = ref<SkinSiteUserAdminAuditInfo[]>([])
+const auditLoading = ref(false)
+const auditNextCursor = ref<number | null>(null)
+
+const AUDIT_ACTION_LABELS: Record<string, string> = {
+	USER_UPDATED: 'user-updated',
+	USER_DELETED: 'user-deleted',
+	RATE_LIMIT_UPDATED: 'rate-limit-updated',
+	BOT_USERNAME_UPDATED: 'bot-username-updated',
+	BOT_TOKEN_INVALIDATED: 'bot-token-invalidated',
+	BOT_CREATION_BANNED: 'bot-creation-banned',
+	BOT_CREATION_UNBANNED: 'bot-creation-unbanned',
+}
+
+function auditActionLabel(action: string) {
+	return formatMessage({
+		id: 'app.skin-site.admin.users.audit-action.' + (AUDIT_ACTION_LABELS[action] ?? 'unknown'),
+		defaultMessage: action,
+	})
+}
+
+function auditFieldLabel(field: string) {
+	return formatMessage({
+		id: 'app.skin-site.admin.users.audit-field.' + field,
+		defaultMessage: field,
+	})
+}
+
+function auditValue(value?: string | null) {
+	if (value === null || value === undefined || value === '') return '—'
+	return value
+}
+
+async function loadAudit(reset = false) {
+	auditLoading.value = true
+	if (reset) {
+		auditItems.value = []
+		auditNextCursor.value = null
+	}
+	try {
+		const res = await skinSiteAdminUserAudit({
+			targetUuid: auditTarget.value?.uuid,
+			before: auditNextCursor.value ?? undefined,
+		})
+		if (!res.success) throw new Error(res.errorMessage)
+		auditItems.value = reset ? res.payload.items : [...auditItems.value, ...res.payload.items]
+		auditNextCursor.value = res.payload.nextCursor ?? null
+	} catch (error) {
+		handleError(error)
+	} finally {
+		auditLoading.value = false
+	}
+}
+
+function openAudit(user?: SkinSiteAdminUser) {
+	auditTarget.value = user ?? null
+	void loadAudit(true)
+}
+
+function closeAudit() {
+	auditTarget.value = null
+	auditItems.value = []
+	auditNextCursor.value = null
+}
+
+function loadMoreAudit() {
+	if (auditLoading.value) return
+	void loadAudit(false)
+}
+
+// ---------- invite ----------
+const inviteOpen = ref(false)
+const inviteEmail = ref('')
+const inviteCode = ref('')
+const inviteBusy = ref(false)
+const inviteEmailValid = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inviteEmail.value))
+
+function openInvite() {
+	inviteOpen.value = true
+	inviteEmail.value = ''
+	inviteCode.value = ''
+}
+
+function closeInvite() {
+	inviteOpen.value = false
+}
+
+async function generateInvite() {
+	if (!inviteEmailValid.value) {
+		addNotification({ type: 'error', title: formatMessage(messages.inviteEmailInvalid) })
+		return
+	}
+	inviteBusy.value = true
+	try {
+		const res = await skinSiteAdminInviteUser(inviteEmail.value.trim())
+		if (!res.success) throw new Error(res.errorMessage)
+		inviteCode.value = res.payload.code
+	} catch (error) {
+		handleError(error)
+	} finally {
+		inviteBusy.value = false
+	}
+}
+
+async function copyInvite() {
+	if (!inviteCode.value) return
+	try {
+		await navigator.clipboard.writeText(inviteCode.value)
+		addNotification({ type: 'success', title: formatMessage(messages.inviteCopied) })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+// ---------- list ----------
+function formatDateTime(ts?: number | null): string {
+	if (!ts) return '—'
+	try {
+		return new Date(ts).toLocaleString()
 	} catch {
-		return ''
+		return '—'
 	}
 }
 
@@ -111,21 +477,19 @@ async function load(reset = false) {
 	loading.value = true
 	failed.value = false
 	try {
-		const kw = keyword.value.trim()
-		const listResult = await skinSiteAdminUserList({
+		const listRes = await skinSiteAdminUserList({
+			keyword: keyword.value.trim() || undefined,
+			searchField: searchField.value,
 			limit: PAGE_SIZE,
 			offset: offset.value,
-			searchField: kw ? searchField.value : undefined,
-			keyword: kw || undefined,
 		})
-		if (!listResult.success) throw new Error(listResult.errorMessage)
-		items.value = listResult.payload ?? []
-		const countResult = await skinSiteAdminUserCount(
-			kw ? { searchField: searchField.value, keyword: kw } : undefined,
-		)
-		if (countResult.success && typeof countResult.payload === 'number') {
-			total.value = countResult.payload
-		}
+		if (!listRes.success) throw new Error(listRes.errorMessage)
+		items.value = listRes.payload ?? []
+		const countRes = await skinSiteAdminUserCount({
+			keyword: keyword.value.trim() || undefined,
+			searchField: searchField.value,
+		})
+		if (countRes.success && typeof countRes.payload === 'number') total.value = countRes.payload
 	} catch (error) {
 		failed.value = true
 		handleError(error)
@@ -134,6 +498,10 @@ async function load(reset = false) {
 	}
 }
 
+function search() {
+	void load(true)
+}
+
 async function prevPage() {
 	if (!hasPrev.value) return
 	offset.value = Math.max(0, offset.value - PAGE_SIZE)
@@ -151,46 +519,38 @@ function startEdit(user: SkinSiteAdminUser) {
 	editForm.value = {
 		username: user.username,
 		email: user.email,
-		qq: user.qq === undefined || user.qq === null ? '' : String(user.qq),
+		qq: user.qq !== null && user.qq !== undefined ? String(user.qq) : '',
 		password: '',
 		banned: user.banned,
-		permissions: user.permissions.join(', '),
+		permissions: (user.permissions ?? []).join(', '),
 	}
 }
 
 function cancelEdit() {
 	editingUuid.value = null
-	editForm.value = {
-		username: '',
-		email: '',
-		qq: '',
-		password: '',
-		banned: false,
-		permissions: '',
-	}
 }
 
 async function saveEdit() {
 	if (!editingUuid.value || saving.value) return
 	saving.value = true
 	try {
-		const qqText = editForm.value.qq.trim()
-		const permissions = editForm.value.permissions
-			.split(',')
-			.map((p) => p.trim())
-			.filter(Boolean)
-		const result = await skinSiteAdminUpdateUser({
-			uuid: editingUuid.value,
+		const target = items.value.find((u) => u.uuid === editingUuid.value)
+		if (!target) throw new Error('user not found')
+		const res = await skinSiteAdminUpdateUser({
+			uuid: target.uuid,
 			username: editForm.value.username.trim(),
 			email: editForm.value.email.trim(),
-			qq: qqText ? Number(qqText) : undefined,
-			password: editForm.value.password ? editForm.value.password : undefined,
+			password: editForm.value.password.trim() || undefined,
+			qq: editForm.value.qq.trim() ? Number(editForm.value.qq.trim()) : undefined,
 			banned: editForm.value.banned,
-			permissions,
+			permissions: editForm.value.permissions
+				.split(',')
+				.map((p) => p.trim())
+				.filter(Boolean),
 		})
-		if (!result.success) throw new Error(result.errorMessage)
+		if (!res.success) throw new Error(res.errorMessage)
 		addNotification({ type: 'success', title: formatMessage(messages.updated) })
-		cancelEdit()
+		editingUuid.value = null
 		await load()
 	} catch (error) {
 		handleError(error)
@@ -199,13 +559,13 @@ async function saveEdit() {
 	}
 }
 
-async function remove(user: SkinSiteAdminUser) {
-	if (deletingUuid.value !== null) return
+async function removeUser(user: SkinSiteAdminUser) {
+	if (deletingUuid.value) return
 	if (!window.confirm(formatMessage(messages.confirmDelete, { name: user.username }))) return
 	deletingUuid.value = user.uuid
 	try {
-		const result = await skinSiteAdminDeleteUser(user.uuid)
-		if (!result.success) throw new Error(result.errorMessage)
+		const res = await skinSiteAdminDeleteUser(user.uuid)
+		if (!res.success) throw new Error(res.errorMessage)
 		addNotification({ type: 'success', title: formatMessage(messages.deleted) })
 		await load()
 	} catch (error) {
@@ -215,237 +575,194 @@ async function remove(user: SkinSiteAdminUser) {
 	}
 }
 
-async function togglePlayers(user: SkinSiteAdminUser) {
-	if (playersUuid.value === user.uuid) {
-		playersUuid.value = null
-		playersFor.value = null
-		return
-	}
-	playersUuid.value = user.uuid
-	playersLoading.value = true
+async function openPlayers(user: SkinSiteAdminUser) {
+	playersTarget.value = user
 	playersFor.value = null
+	playersLoading.value = true
 	try {
-		const result = await skinSiteAdminUserPlayers(user.uuid)
-		if (result.success) {
-			playersFor.value = result.payload ?? []
-		} else {
-			playersFor.value = []
-		}
+		const res = await skinSiteAdminUserPlayers(user.uuid)
+		if (!res.success) throw new Error(res.errorMessage)
+		playersFor.value = res.payload ?? []
 	} catch (error) {
-		playersFor.value = []
 		handleError(error)
 	} finally {
 		playersLoading.value = false
 	}
 }
 
+function closePlayers() {
+	playersTarget.value = null
+	playersFor.value = null
+}
+
 onMounted(() => void load())
 </script>
+
 <template>
-	<div class="flex flex-col gap-4">
-		<div class="flex flex-wrap items-center gap-2">
-			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
-			<span class="text-xs text-secondary">
-				{{ formatMessage(messages.total, { count: total }) }}
-			</span>
+	<div class="flex w-full flex-col gap-4">
+		<div class="flex flex-wrap items-end justify-between gap-3">
+			<div>
+				<h2 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+				<p class="m-0 mt-1 text-sm text-secondary">
+					{{ formatMessage(messages.total, { count: total }) }}
+				</p>
+			</div>
+			<div class="flex flex-wrap items-center gap-2">
+				<button
+					type="button"
+					class="rounded-lg bg-brand px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+					@click="openInvite"
+				>
+					{{ formatMessage(messages.invite) }}
+				</button>
+				<button
+					type="button"
+					class="rounded-lg bg-button-bg px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+					@click="openAudit()"
+				>
+					{{ formatMessage(messages.audit) }}
+				</button>
+			</div>
 		</div>
 
 		<div class="flex flex-wrap items-center gap-2">
 			<select
 				v-model="searchField"
-				class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast"
+				class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-2 py-1.5 text-xs text-contrast outline-none focus:border-brand"
 			>
-				<option v-for="f in SEARCH_FIELDS" :key="f" :value="f">
-					{{ searchFieldLabel(f) }}
-				</option>
+				<option value="username">{{ formatMessage(messages.searchName) }}</option>
+				<option value="email">{{ formatMessage(messages.searchEmail) }}</option>
+				<option value="uuid">{{ formatMessage(messages.searchUuid) }}</option>
 			</select>
 			<input
 				v-model="keyword"
 				type="text"
 				:placeholder="formatMessage(messages.search)"
-				class="min-w-0 flex-1 rounded-full border border-solid border-surface-5 bg-bg px-3 py-1 text-xs text-contrast outline-none focus:border-brand"
-				@keyup.enter="load(true)"
+				class="min-w-48 flex-1 rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+				@keyup.enter="search"
 			/>
 			<button
 				type="button"
-				class="rounded-full bg-brand px-4 py-1 text-xs font-semibold text-contrast hover:brightness-110"
-				@click="load(true)"
+				class="rounded-lg bg-brand px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+				@click="search"
 			>
 				{{ formatMessage(messages.search) }}
 			</button>
 		</div>
 
-		<div v-if="loading" class="flex items-center gap-2 text-sm text-secondary">
+		<div v-if="loading" class="flex min-h-48 items-center justify-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">
+		<p
+			v-else-if="failed"
+			class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
 			{{ formatMessage(messages.failed) }}
 		</p>
-		<p v-else-if="!items.length" class="m-0 rounded-xl bg-bg-raised p-4 text-sm text-secondary">
+		<p
+			v-else-if="!items.length"
+			class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
 			{{ formatMessage(messages.empty) }}
 		</p>
-		<div v-else class="flex flex-col gap-2">
-			<div
-				v-for="user in items"
-				:key="user.uuid"
-				class="flex flex-col gap-2 rounded-xl bg-bg-raised p-3"
-			>
-				<div class="flex flex-wrap items-center gap-3">
-					<div class="flex min-w-0 flex-1 flex-col">
-						<span class="truncate text-sm font-semibold text-contrast">
-							{{ user.username }}
-							<span class="text-xs font-normal text-secondary">#{{ user.id }}</span>
-						</span>
-						<span class="truncate text-xs text-secondary">{{ user.email }}</span>
-						<span class="truncate font-mono text-[10px] text-secondary">{{ user.uuid }}</span>
-					</div>
-					<span
-						v-if="user.banned"
-						class="shrink-0 rounded-full bg-red px-2 py-0.5 text-[10px] font-semibold text-contrast"
-					>
-						{{ formatMessage(messages.banned) }}
-					</span>
-					<span
-						v-for="perm in user.permissions"
-						:key="perm"
-						class="shrink-0 rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-secondary"
-					>
-						{{ perm }}
-					</span>
-					<span class="shrink-0 text-xs text-secondary">
-						{{ formatDate(user.registerTime) }}
-					</span>
-				</div>
 
-				<template v-if="editingUuid === user.uuid">
-					<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-						<label class="flex flex-col gap-1">
-							<span class="text-xs font-semibold text-contrast">
-								{{ formatMessage(messages.username) }}
-							</span>
-							<input
-								v-model="editForm.username"
-								type="text"
-								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-sm text-contrast outline-none focus:border-brand"
-							/>
-						</label>
-						<label class="flex flex-col gap-1">
-							<span class="text-xs font-semibold text-contrast">
-								{{ formatMessage(messages.email) }}
-							</span>
-							<input
-								v-model="editForm.email"
-								type="email"
-								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-sm text-contrast outline-none focus:border-brand"
-							/>
-						</label>
-						<label class="flex flex-col gap-1">
-							<span class="text-xs font-semibold text-contrast">
-								{{ formatMessage(messages.qq) }}
-							</span>
-							<input
-								v-model="editForm.qq"
-								type="text"
-								inputmode="numeric"
-								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-sm text-contrast outline-none focus:border-brand"
-							/>
-						</label>
-						<label class="flex flex-col gap-1">
-							<span class="text-xs font-semibold text-contrast">
-								{{ formatMessage(messages.password) }}
-							</span>
-							<input
-								v-model="editForm.password"
-								type="password"
-								:placeholder="formatMessage(messages.passwordHint)"
-								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-sm text-contrast outline-none focus:border-brand"
-							/>
-						</label>
-						<label class="flex flex-col gap-1 sm:col-span-2">
-							<span class="text-xs font-semibold text-contrast">
-								{{ formatMessage(messages.permissions) }}
-							</span>
-							<input
-								v-model="editForm.permissions"
-								type="text"
-								:placeholder="formatMessage(messages.permissionsHint)"
-								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-sm text-contrast outline-none focus:border-brand"
-							/>
-						</label>
-						<label class="flex items-center gap-2">
-							<input v-model="editForm.banned" type="checkbox" />
-							<span class="text-sm text-contrast">{{ formatMessage(messages.banned) }}</span>
-						</label>
-					</div>
-					<div class="flex justify-end gap-2">
-						<button
-							type="button"
-							class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
-							@click="cancelEdit"
+		<template v-else>
+			<div class="overflow-hidden rounded-lg border border-solid border-surface-5">
+				<table class="w-full border-collapse text-left text-sm">
+					<thead class="bg-bg-raised">
+						<tr class="text-xs text-secondary">
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.username) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.email) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.qq) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.status) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.registeredAt) }}</th>
+							<th class="px-3 py-2 font-semibold">{{ formatMessage(messages.actions) }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="user in items"
+							:key="user.uuid"
+							class="border-t border-solid border-surface-5 hover:bg-bg-raised"
 						>
-							{{ formatMessage(messages.cancel) }}
-						</button>
-						<button
-							type="button"
-							class="rounded-full bg-brand px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
-							:disabled="saving"
-							@click="saveEdit"
-						>
-							{{ formatMessage(messages.save) }}
-						</button>
-					</div>
-				</template>
-
-				<template v-else>
-					<div class="flex flex-wrap items-center gap-2">
-						<button
-							type="button"
-							class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
-							@click="startEdit(user)"
-						>
-							{{ formatMessage(messages.edit) }}
-						</button>
-						<button
-							type="button"
-							class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
-							@click="togglePlayers(user)"
-						>
-							{{ formatMessage(messages.players) }}
-						</button>
-						<button
-							type="button"
-							class="rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
-							:disabled="deletingUuid !== null"
-							@click="remove(user)"
-						>
-							{{ formatMessage(messages.remove) }}
-						</button>
-					</div>
-
-					<div v-if="playersUuid === user.uuid" class="flex flex-wrap gap-2 pt-1">
-						<div v-if="playersLoading" class="flex items-center gap-2 text-xs text-secondary">
-							<SpinnerIcon class="size-3 animate-spin" />
-							{{ formatMessage(messages.loading) }}
-						</div>
-						<span v-else-if="!playersFor || !playersFor.length" class="text-xs text-secondary">
-							{{ formatMessage(messages.noPlayers) }}
-						</span>
-						<span
-							v-for="p in playersFor ?? []"
-							:key="p.uuid"
-							class="rounded-full bg-button-bg px-2 py-0.5 text-[10px] font-semibold text-contrast"
-						>
-							{{ p.name }}
-						</span>
-					</div>
-				</template>
+							<td class="px-3 py-2">
+								<div class="font-semibold text-contrast">{{ user.username }}</div>
+								<div class="text-[10px] break-all text-secondary">{{ user.uuid }}</div>
+							</td>
+							<td class="px-3 py-2 text-xs break-all text-secondary">{{ user.email }}</td>
+							<td class="px-3 py-2 text-xs text-secondary">{{ user.qq ?? '—' }}</td>
+							<td class="px-3 py-2">
+								<span
+									class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+									:class="user.banned ? 'bg-red text-contrast' : 'bg-green text-contrast'"
+								>
+									{{
+										user.banned
+											? formatMessage(messages.statusBanned)
+											: formatMessage(messages.statusNormal)
+									}}
+								</span>
+							</td>
+							<td class="px-3 py-2 text-xs text-secondary">
+								{{ formatDateTime(user.registerTime) }}
+							</td>
+							<td class="px-3 py-2">
+								<div class="flex flex-wrap gap-1">
+									<button
+										type="button"
+										class="rounded bg-button-bg px-2 py-0.5 text-[11px] font-semibold text-contrast hover:brightness-110"
+										@click="openPlayers(user)"
+									>
+										{{ formatMessage(messages.players) }}
+									</button>
+									<button
+										type="button"
+										class="rounded bg-button-bg px-2 py-0.5 text-[11px] font-semibold text-contrast hover:brightness-110"
+										@click="openBot(user)"
+									>
+										{{ formatMessage(messages.bot) }}
+									</button>
+									<button
+										type="button"
+										class="rounded bg-button-bg px-2 py-0.5 text-[11px] font-semibold text-contrast hover:brightness-110"
+										@click="openFrequency(user)"
+									>
+										{{ formatMessage(messages.frequency) }}
+									</button>
+									<button
+										type="button"
+										class="rounded bg-button-bg px-2 py-0.5 text-[11px] font-semibold text-contrast hover:brightness-110"
+										@click="openAudit(user)"
+									>
+										{{ formatMessage(messages.audit) }}
+									</button>
+									<button
+										type="button"
+										class="rounded bg-brand px-2 py-0.5 text-[11px] font-semibold text-contrast hover:brightness-110"
+										@click="startEdit(user)"
+									>
+										{{ formatMessage(messages.edit) }}
+									</button>
+									<button
+										type="button"
+										class="rounded bg-red/20 px-2 py-0.5 text-[11px] font-semibold text-red hover:brightness-110 disabled:opacity-50"
+										:disabled="deletingUuid === user.uuid"
+										@click="removeUser(user)"
+									>
+										{{ formatMessage(messages.remove) }}
+									</button>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
 			</div>
 
-			<div class="flex items-center justify-center gap-3 pt-2">
+			<div class="flex items-center justify-center gap-3 pt-1">
 				<button
 					type="button"
-					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
 					:disabled="!hasPrev"
 					@click="prevPage"
 				>
@@ -456,13 +773,519 @@ onMounted(() => void load())
 				</span>
 				<button
 					type="button"
-					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
 					:disabled="!hasNext"
 					@click="nextPage"
 				>
 					{{ formatMessage(messages.next) }}
 				</button>
 			</div>
+		</template>
+
+		<!-- 编辑 -->
+		<div
+			v-if="editingUuid"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="cancelEdit"
+		>
+			<div
+				class="flex max-h-[85vh] w-full max-w-lg flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.edit) }}</h3>
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.username) }}
+					</span>
+					<input
+						v-model="editForm.username"
+						type="text"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.email) }}
+					</span>
+					<input
+						v-model="editForm.email"
+						type="email"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">{{ formatMessage(messages.qq) }}</span>
+					<input
+						v-model="editForm.qq"
+						type="text"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.password) }}
+					</span>
+					<input
+						v-model="editForm.password"
+						type="password"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+					<span class="text-[11px] text-secondary">{{ formatMessage(messages.passwordHint) }}</span>
+				</label>
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.permissions) }}
+					</span>
+					<input
+						v-model="editForm.permissions"
+						type="text"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+					<span class="text-[11px] text-secondary">
+						{{ formatMessage(messages.permissionsHint) }}
+					</span>
+				</label>
+				<label class="flex cursor-pointer items-center gap-2 text-sm text-contrast">
+					<input v-model="editForm.banned" type="checkbox" class="size-4" />
+					{{ formatMessage(messages.banned) }}
+				</label>
+				<div class="flex justify-end gap-2 pt-2">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="cancelEdit"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="saving"
+						@click="saveEdit"
+					>
+						{{ formatMessage(messages.save) }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- 绑定玩家 -->
+		<div
+			v-if="playersTarget"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closePlayers"
+		>
+			<div
+				class="flex max-h-[85vh] w-full max-w-md flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.boundPlayersTitle) }} · {{ playersTarget.username }}
+				</h3>
+				<div
+					v-if="playersLoading"
+					class="flex min-h-32 items-center justify-center gap-2 text-sm text-secondary"
+				>
+					<SpinnerIcon class="size-4 animate-spin" />
+					{{ formatMessage(messages.loading) }}
+				</div>
+				<p
+					v-else-if="!playersFor || !playersFor.length"
+					class="m-0 rounded-lg bg-bg-raised p-3 text-xs text-secondary"
+				>
+					{{ formatMessage(messages.noPlayers) }}
+				</p>
+				<div v-else class="flex flex-col gap-2">
+					<div
+						v-for="player in playersFor"
+						:key="player.uuid"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2"
+					>
+						<div class="flex items-center justify-between gap-2">
+							<span class="font-semibold text-contrast">{{ player.name }}</span>
+							<span
+								class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+								:class="player.isMojang ? 'bg-yellow text-contrast' : 'bg-brand text-contrast'"
+							>
+								{{ player.isMojang ? 'Mojang' : 'StarLight' }}
+							</span>
+						</div>
+						<p class="m-0 mt-1 text-[10px] break-all text-secondary">{{ player.uuid }}</p>
+						<p v-if="player.legacyInternalAdapted" class="m-0 mt-1 text-[10px] text-red">
+							{{ formatMessage(messages.legacyAdapted) }}
+						</p>
+					</div>
+				</div>
+				<div class="flex justify-end pt-2">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closePlayers"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Bot 管理 -->
+		<div
+			v-if="botTarget"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeBot"
+		>
+			<div
+				class="flex max-h-[85vh] w-full max-w-md flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.botTitle) }} · {{ botTarget.username }}
+				</h3>
+				<div class="rounded-lg bg-bg-raised px-3 py-2 text-xs text-secondary">
+					<p class="m-0 font-semibold text-contrast">{{ botTarget.username }}</p>
+					<p class="m-0 mt-1 break-all">{{ botTarget.uuid }}</p>
+				</div>
+				<div
+					v-if="botLoading"
+					class="flex min-h-32 items-center justify-center gap-2 text-sm text-secondary"
+				>
+					<SpinnerIcon class="size-4 animate-spin" />
+					{{ formatMessage(messages.loading) }}
+				</div>
+				<template v-else-if="botInfo">
+					<div class="flex flex-wrap gap-2">
+						<span
+							class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+							:class="botInfo.exists ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+						>
+							{{
+								botInfo.exists
+									? formatMessage(messages.botExists)
+									: formatMessage(messages.botNotExists)
+							}}
+						</span>
+						<span
+							v-if="botInfo.exists"
+							class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+							:class="botInfo.active ? 'bg-green text-contrast' : 'bg-yellow text-contrast'"
+						>
+							{{
+								botInfo.active
+									? formatMessage(messages.botActive)
+									: formatMessage(messages.botInactive)
+							}}
+						</span>
+						<span
+							v-if="botInfo.creationBanned"
+							class="rounded-full bg-red px-2 py-0.5 text-[10px] font-semibold text-contrast"
+						>
+							{{ formatMessage(messages.botCreationBanned) }}
+						</span>
+					</div>
+
+					<form
+						v-if="botInfo.exists"
+						class="flex flex-col gap-2"
+						@submit.prevent="saveBotUsername"
+					>
+						<label class="flex flex-col gap-1">
+							<span class="text-xs font-semibold text-secondary">
+								{{ formatMessage(messages.botUsername) }}
+							</span>
+							<input
+								v-model="botUsername"
+								type="text"
+								minlength="2"
+								maxlength="32"
+								:disabled="botBusy"
+								class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand disabled:opacity-50"
+							/>
+						</label>
+						<p class="m-0 text-[11px] text-secondary">
+							{{ formatMessage(messages.botTokenHint) }}:
+							{{ botInfo.tokenHint ? '••••••••' + botInfo.tokenHint : '—' }}
+						</p>
+						<button
+							type="submit"
+							class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+							:disabled="botBusy || !validBotUsername || botUsername === botInfo.username"
+						>
+							{{ formatMessage(messages.botSaveUsername) }}
+						</button>
+					</form>
+
+					<div class="grid gap-2 sm:grid-cols-2">
+						<button
+							type="button"
+							class="rounded-lg bg-yellow/20 px-3 py-2 text-xs font-semibold text-yellow hover:brightness-110 disabled:opacity-50"
+							:disabled="botBusy || !botInfo.active"
+							@click="invalidateBot"
+						>
+							{{ formatMessage(messages.botInvalidate) }}
+						</button>
+						<button
+							type="button"
+							class="rounded-lg px-3 py-2 text-xs font-semibold hover:brightness-110 disabled:opacity-50"
+							:class="
+								botInfo.creationBanned
+									? 'bg-green/20 text-green'
+									: 'bg-red/20 text-red'
+							"
+							:disabled="botBusy"
+							@click="toggleBotCreationBan"
+						>
+							{{
+								botInfo.creationBanned
+									? formatMessage(messages.botUnban)
+									: formatMessage(messages.botBan)
+							}}
+						</button>
+					</div>
+				</template>
+				<div class="flex justify-end pt-2">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closeBot"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- 频率限制 -->
+		<div
+			v-if="frequencyTarget"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeFrequency"
+		>
+			<div
+				class="flex max-h-[85vh] w-full max-w-md flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.frequencyTitle) }} · {{ frequencyTarget.username }}
+				</h3>
+				<div class="rounded-lg bg-bg-raised px-3 py-2 text-xs text-secondary">
+					<p class="m-0 font-semibold text-contrast">{{ frequencyTarget.username }}</p>
+					<p class="m-0 mt-1 break-all">{{ frequencyTarget.uuid }}</p>
+				</div>
+				<p class="m-0 text-xs text-secondary">{{ formatMessage(messages.frequencyHint) }}</p>
+				<div
+					v-if="frequencyLoading"
+					class="flex min-h-32 items-center justify-center gap-2 text-sm text-secondary"
+				>
+					<SpinnerIcon class="size-4 animate-spin" />
+					{{ formatMessage(messages.loading) }}
+				</div>
+				<template v-else>
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-semibold text-contrast">
+							{{ formatMessage(messages.frequency) }}
+						</span>
+						<span
+							class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+							:class="
+								currentFrequencyLimit === null
+									? 'bg-button-bg text-secondary'
+									: 'bg-yellow text-contrast'
+							"
+						>
+							{{
+								currentFrequencyLimit === null
+									? formatMessage(messages.frequencyNone)
+									: formatMessage(messages.frequencyCurrent, { percent: currentFrequencyLimit })
+							}}
+						</span>
+					</div>
+					<input
+						v-model.number="frequencyPercent"
+						type="range"
+						min="10"
+						max="100"
+						step="1"
+						:disabled="frequencyBusy"
+						class="w-full accent-yellow"
+					/>
+					<input
+						v-model.number="frequencyPercent"
+						type="number"
+						min="10"
+						max="100"
+						step="1"
+						:disabled="frequencyBusy"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand disabled:opacity-50"
+					/>
+					<p class="m-0 text-[11px] text-secondary">
+						{{ formatMessage(messages.frequencyRange) }}
+					</p>
+					<div class="grid gap-2 sm:grid-cols-2">
+						<button
+							type="button"
+							class="rounded-lg bg-yellow/20 px-3 py-2 text-xs font-semibold text-yellow hover:brightness-110 disabled:opacity-50"
+							:disabled="frequencyBusy || !validFrequency"
+							@click="saveFrequency"
+						>
+							{{ formatMessage(messages.frequencySave) }}
+						</button>
+						<button
+							type="button"
+							class="rounded-lg bg-button-bg px-3 py-2 text-xs font-semibold text-secondary hover:brightness-110 disabled:opacity-50"
+							:disabled="frequencyBusy || currentFrequencyLimit === null"
+							@click="clearFrequency"
+						>
+							{{ formatMessage(messages.frequencyClear) }}
+						</button>
+					</div>
+				</template>
+				<div class="flex justify-end pt-2">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closeFrequency"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- 审计 -->
+		<div
+			v-if="auditTarget !== null || auditItems.length || auditLoading"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeAudit"
+		>
+			<div
+				class="flex max-h-[85vh] w-full max-w-2xl flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.auditTitle) }}
+					<span v-if="auditTarget" class="text-sm font-normal text-secondary">
+						· {{ auditTarget.username }}
+					</span>
+				</h3>
+				<div
+					v-if="auditLoading && !auditItems.length"
+					class="flex min-h-32 items-center justify-center gap-2 text-sm text-secondary"
+				>
+					<SpinnerIcon class="size-4 animate-spin" />
+					{{ formatMessage(messages.loading) }}
+				</div>
+				<p
+					v-else-if="!auditItems.length"
+					class="m-0 rounded-lg bg-bg-raised p-3 text-xs text-secondary"
+				>
+					{{ formatMessage(messages.auditEmpty) }}
+				</p>
+				<div v-else class="flex flex-col gap-2">
+					<article
+						v-for="entry in auditItems"
+						:key="entry.id"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised p-3"
+					>
+						<div class="flex flex-wrap items-start justify-between gap-2">
+							<div>
+								<p class="m-0 text-sm font-semibold text-contrast">
+									{{ auditActionLabel(entry.action) }}
+								</p>
+								<p class="m-0 mt-1 text-xs text-secondary">
+									{{ entry.actorName }} → {{ entry.targetName }}
+								</p>
+							</div>
+							<span class="text-[10px] text-secondary">
+								{{ formatDateTime(entry.createdAt) }}
+							</span>
+						</div>
+						<div v-if="entry.changes.length" class="mt-2 flex flex-col gap-1">
+							<div
+								v-for="(change, i) in entry.changes"
+								:key="entry.id + '-' + change.field + '-' + i"
+								class="grid gap-1 rounded bg-bg px-2 py-1 text-[11px] sm:grid-cols-[8rem_1fr]"
+							>
+								<span class="font-semibold text-contrast">{{ auditFieldLabel(change.field) }}</span>
+								<span class="break-all text-secondary">
+									{{ auditValue(change.before) }}
+									<span class="px-1">→</span>
+									{{ auditValue(change.after) }}
+								</span>
+							</div>
+						</div>
+					</article>
+					<button
+						v-if="auditNextCursor"
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="auditLoading"
+						@click="loadMoreAudit"
+					>
+						{{ formatMessage(messages.auditMore) }}
+					</button>
+				</div>
+				<div class="flex justify-end pt-2">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closeAudit"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</div>
+			</div>
+		</div>
+		<!-- 邀请码 -->
+		<div
+			v-if="inviteOpen"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeInvite"
+		>
+			<div class="flex w-full max-w-md flex-col gap-3 rounded-xl bg-bg p-6">
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.inviteTitle) }}
+				</h3>
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.inviteEmail) }}
+					</span>
+					<input
+						v-model="inviteEmail"
+						type="email"
+						placeholder="example@domain.com"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						@keyup.enter="generateInvite"
+					/>
+				</label>
+				<div class="flex gap-2">
+					<input
+						:value="inviteCode"
+						type="text"
+						readonly
+						class="flex-1 rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 font-mono text-sm text-contrast outline-none"
+					/>
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-3 py-2 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="!inviteCode"
+						@click="copyInvite"
+					>
+						{{ formatMessage(messages.inviteCopy) }}
+					</button>
+				</div>
+				<div class="flex justify-end gap-2 pt-2">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closeInvite"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="inviteBusy || !inviteEmailValid"
+						@click="generateInvite"
+					>
+						{{ formatMessage(messages.inviteGenerate) }}
+					</button>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 313fa7c..eb2e9f5 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -1902,3 +1902,116 @@ export function skinSiteUpdateReviewPaperAdmin(
 		{ method: 'PUT', body: data },
 	)
 }
+
+export interface SkinSiteBotInfo {
+	exists: boolean
+	username?: string | null
+	active: boolean
+	creationBanned: boolean
+	tokenHint?: string | null
+	createdAt?: number | null
+	updatedAt?: number | null
+}
+
+export interface SkinSiteUserFrequencyLimit {
+	dropPercent?: number | null
+}
+
+export type SkinSiteUserAdminAuditAction =
+	| 'USER_UPDATED'
+	| 'USER_DELETED'
+	| 'RATE_LIMIT_UPDATED'
+	| 'BOT_USERNAME_UPDATED'
+	| 'BOT_TOKEN_INVALIDATED'
+	| 'BOT_CREATION_BANNED'
+	| 'BOT_CREATION_UNBANNED'
+
+export interface SkinSiteUserAdminAuditChange {
+	field: string
+	before?: string | null
+	after?: string | null
+}
+
+export interface SkinSiteUserAdminAuditInfo {
+	id: number
+	actorUuid: string
+	actorName: string
+	targetUuid: string
+	targetName: string
+	action: SkinSiteUserAdminAuditAction
+	changes: SkinSiteUserAdminAuditChange[]
+	createdAt: number
+}
+
+export interface SkinSiteUserAdminAuditPage {
+	items: SkinSiteUserAdminAuditInfo[]
+	nextCursor?: number | null
+}
+
+export interface SkinSiteInviteCode {
+	email: string
+	code: string
+}
+
+export function skinSiteAdminBotInfo(
+	userUuid: string,
+): Promise<SkinSiteResponse<SkinSiteBotInfo>> {
+	return skinSiteRequest<SkinSiteBotInfo>('admin/users/' + encodeURIComponent(userUuid) + '/bot')
+}
+
+export function skinSiteAdminRenameBot(
+	userUuid: string,
+	username: string,
+): Promise<SkinSiteResponse<SkinSiteBotInfo>> {
+	return skinSiteRequest<SkinSiteBotInfo>(
+		'admin/users/' + encodeURIComponent(userUuid) + '/bot/username',
+		{ method: 'POST', body: { username } },
+	)
+}
+
+export function skinSiteAdminInvalidateBotToken(
+	userUuid: string,
+): Promise<SkinSiteResponse<SkinSiteBotInfo>> {
+	return skinSiteRequest<SkinSiteBotInfo>(
+		'admin/users/' + encodeURIComponent(userUuid) + '/bot/invalidate',
+		{ method: 'POST' },
+	)
+}
+
+export function skinSiteAdminSetBotCreationBanned(
+	userUuid: string,
+	banned: boolean,
+): Promise<SkinSiteResponse<SkinSiteBotInfo>> {
+	return skinSiteRequest<SkinSiteBotInfo>(
+		'admin/users/' + encodeURIComponent(userUuid) + '/bot/ban',
+		{ method: 'POST', body: { banned } },
+	)
+}
+
+export function skinSiteAdminUpdateUserFrequencyLimit(
+	userUuid: string,
+	dropPercent: number | null,
+): Promise<SkinSiteResponse<SkinSiteUserFrequencyLimit>> {
+	return skinSiteRequest<SkinSiteUserFrequencyLimit>(
+		'admin/users/' + encodeURIComponent(userUuid) + '/frequency-limit',
+		{ method: 'POST', body: { dropPercent } },
+	)
+}
+
+export function skinSiteAdminUserAudit(params?: {
+	targetUuid?: string
+	before?: number
+}): Promise<SkinSiteResponse<SkinSiteUserAdminAuditPage>> {
+	const query = new URLSearchParams()
+	if (params?.targetUuid) query.set('targetUuid', params.targetUuid)
+	if (params?.before) query.set('before', String(params.before))
+	const suffix = query.size > 0 ? '?' + query.toString() : ''
+	return skinSiteRequest<SkinSiteUserAdminAuditPage>('admin/users/audit' + suffix)
+}
+
+export function skinSiteAdminInviteUser(email: string): Promise<SkinSiteResponse<SkinSiteInviteCode>> {
+	return skinSiteRequest<SkinSiteInviteCode>('admin/inviteCode', {
+		method: 'POST',
+		body: { email },
+	})
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index ddfee71..4d34b60 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12178,5 +12178,44 @@
   "app.skin-site.admin.review.move-up": {"message": "Move up"},
   "app.skin-site.admin.review.move-down": {"message": "Move down"},
   "app.skin-site.admin.review.mail-subject-required": {"message": "Subject is required when mail is enabled."},
-  "app.skin-site.admin.review.mail-message-required": {"message": "Body is required when mail is enabled."}
+  "app.skin-site.admin.review.mail-message-required": {"message": "Body is required when mail is enabled."},
+  "app.skin-site.admin.users.actions": {"message": "Actions"},
+  "app.skin-site.admin.users.audit": {"message": "Audit"},
+  "app.skin-site.admin.users.audit-empty": {"message": "No audit records yet."},
+  "app.skin-site.admin.users.audit-more": {"message": "Load earlier"},
+  "app.skin-site.admin.users.audit-title": {"message": "User management audit"},
+  "app.skin-site.admin.users.bot": {"message": "Bot"},
+  "app.skin-site.admin.users.bot-active": {"message": "Token valid"},
+  "app.skin-site.admin.users.bot-ban": {"message": "Ban bot creation"},
+  "app.skin-site.admin.users.bot-creation-banned": {"message": "Token creation banned"},
+  "app.skin-site.admin.users.bot-exists": {"message": "Bot created"},
+  "app.skin-site.admin.users.bot-inactive": {"message": "Token invalidated"},
+  "app.skin-site.admin.users.bot-invalidate": {"message": "Invalidate token"},
+  "app.skin-site.admin.users.bot-not-exists": {"message": "No bot yet"},
+  "app.skin-site.admin.users.bot-save-username": {"message": "Save bot username"},
+  "app.skin-site.admin.users.bot-title": {"message": "Bot management"},
+  "app.skin-site.admin.users.bot-token-hint": {"message": "Token hint"},
+  "app.skin-site.admin.users.bot-unban": {"message": "Unban bot creation"},
+  "app.skin-site.admin.users.bot-username": {"message": "Bot username"},
+  "app.skin-site.admin.users.bound-players-title": {"message": "Linked players"},
+  "app.skin-site.admin.users.frequency": {"message": "Rate limit"},
+  "app.skin-site.admin.users.frequency-clear": {"message": "Clear limit"},
+  "app.skin-site.admin.users.frequency-current": {"message": "Currently {percent}%"},
+  "app.skin-site.admin.users.frequency-hint": {"message": "Packets from this user will be dropped at the given rate."},
+  "app.skin-site.admin.users.frequency-none": {"message": "Not enabled"},
+  "app.skin-site.admin.users.frequency-range": {"message": "Only integer values from 10% to 100% are allowed."},
+  "app.skin-site.admin.users.frequency-save": {"message": "Save limit"},
+  "app.skin-site.admin.users.frequency-title": {"message": "Rate limit"},
+  "app.skin-site.admin.users.invite": {"message": "Invite user"},
+  "app.skin-site.admin.users.invite-copied": {"message": "Invite code copied."},
+  "app.skin-site.admin.users.invite-copy": {"message": "Copy"},
+  "app.skin-site.admin.users.invite-email": {"message": "Email"},
+  "app.skin-site.admin.users.invite-email-invalid": {"message": "Enter a valid email address."},
+  "app.skin-site.admin.users.invite-generate": {"message": "Generate invite code"},
+  "app.skin-site.admin.users.invite-title": {"message": "Invite user"},
+  "app.skin-site.admin.users.legacy-adapted": {"message": "Legacy internal adapted"},
+  "app.skin-site.admin.users.registered-at": {"message": "Registered at"},
+  "app.skin-site.admin.users.status": {"message": "Status"},
+  "app.skin-site.admin.users.status-banned": {"message": "Banned"},
+  "app.skin-site.admin.users.status-normal": {"message": "Normal"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 3cc6a7b..56b811a 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -12009,5 +12009,44 @@
   "app.skin-site.admin.review.move-up": {"message": "上移"},
   "app.skin-site.admin.review.move-down": {"message": "下移"},
   "app.skin-site.admin.review.mail-subject-required": {"message": "开启邮件后必须填写邮件标题。"},
-  "app.skin-site.admin.review.mail-message-required": {"message": "开启邮件后必须填写邮件正文。"}
+  "app.skin-site.admin.review.mail-message-required": {"message": "开启邮件后必须填写邮件正文。"},
+  "app.skin-site.admin.users.actions": {"message": "操作"},
+  "app.skin-site.admin.users.audit": {"message": "审计"},
+  "app.skin-site.admin.users.audit-empty": {"message": "暂无管理审计记录。"},
+  "app.skin-site.admin.users.audit-more": {"message": "加载更早记录"},
+  "app.skin-site.admin.users.audit-title": {"message": "用户管理审计"},
+  "app.skin-site.admin.users.bot": {"message": "机器人"},
+  "app.skin-site.admin.users.bot-active": {"message": "Token 有效"},
+  "app.skin-site.admin.users.bot-ban": {"message": "封禁 Bot 创建"},
+  "app.skin-site.admin.users.bot-creation-banned": {"message": "禁止创建 Token"},
+  "app.skin-site.admin.users.bot-exists": {"message": "已创建 Bot"},
+  "app.skin-site.admin.users.bot-inactive": {"message": "Token 已失效"},
+  "app.skin-site.admin.users.bot-invalidate": {"message": "使 Token 失效"},
+  "app.skin-site.admin.users.bot-not-exists": {"message": "尚未创建 Bot"},
+  "app.skin-site.admin.users.bot-save-username": {"message": "保存机器人用户名"},
+  "app.skin-site.admin.users.bot-title": {"message": "Bot 管理"},
+  "app.skin-site.admin.users.bot-token-hint": {"message": "Token 标识"},
+  "app.skin-site.admin.users.bot-unban": {"message": "解除 Bot 封禁"},
+  "app.skin-site.admin.users.bot-username": {"message": "机器人用户名"},
+  "app.skin-site.admin.users.bound-players-title": {"message": "绑定玩家"},
+  "app.skin-site.admin.users.frequency": {"message": "频率限制"},
+  "app.skin-site.admin.users.frequency-clear": {"message": "取消限制"},
+  "app.skin-site.admin.users.frequency-current": {"message": "当前 {percent}%"},
+  "app.skin-site.admin.users.frequency-hint": {"message": "以下列频率对指定用户进行丢包处理，限制其进入服务器的频率。"},
+  "app.skin-site.admin.users.frequency-none": {"message": "当前未启用"},
+  "app.skin-site.admin.users.frequency-range": {"message": "仅允许设置 10% 至 100% 的整数。"},
+  "app.skin-site.admin.users.frequency-save": {"message": "保存限制"},
+  "app.skin-site.admin.users.frequency-title": {"message": "频率限制"},
+  "app.skin-site.admin.users.invite": {"message": "邀请用户"},
+  "app.skin-site.admin.users.invite-copied": {"message": "邀请码已复制。"},
+  "app.skin-site.admin.users.invite-copy": {"message": "复制"},
+  "app.skin-site.admin.users.invite-email": {"message": "邮箱"},
+  "app.skin-site.admin.users.invite-email-invalid": {"message": "请输入正确格式的邮箱。"},
+  "app.skin-site.admin.users.invite-generate": {"message": "生成邀请码"},
+  "app.skin-site.admin.users.invite-title": {"message": "邀请用户"},
+  "app.skin-site.admin.users.legacy-adapted": {"message": "已适配旧内服"},
+  "app.skin-site.admin.users.registered-at": {"message": "注册时间"},
+  "app.skin-site.admin.users.status": {"message": "状态"},
+  "app.skin-site.admin.users.status-banned": {"message": "已封禁"},
+  "app.skin-site.admin.users.status-normal": {"message": "正常"}
 }

From 87de3062452fb2a111364889a11349c617c56853 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 12:02:39 +0800
Subject: [PATCH 11/16] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=A8=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=20Mod=20=E9=A1=B5?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E4=B8=8E=E6=89=B9=E9=87=8F=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 Mod 上传弹窗：拖拽或选择 .jar、多文件、大小限制、规则标签附加
- 上传流程：xxHash64 查重、同名检测、名称冲突确认（覆盖/跳过）、429 限流退避重试、HashDiff 重传
- Mod 列表支持多选模式：全选本页、取消选择、批量删除
- 新增服务器地址过滤，配合名称搜索与标签筛选
- 补充 Mod 相关 API：文件哈希、按哈希/名称查重、上传、批量更新
- 引入 xxhash-wasm 依赖
- 中英文各补 32 个文案
---
 apps/app-frontend/package.json                |   3 +-
 .../ui/skin-site/admin/AdminModsPage.vue      | 196 +++++++-
 .../ui/skin-site/admin/ModUploadModal.vue     | 440 ++++++++++++++++++
 .../app-frontend/src/helpers/skin-site-api.ts |  56 +++
 .../app-frontend/src/locales/en-US/index.json |  34 +-
 .../app-frontend/src/locales/zh-CN/index.json |  34 +-
 pnpm-lock.yaml                                |   8 +
 7 files changed, 767 insertions(+), 4 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/ModUploadModal.vue

diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index f10352a..b24ed39 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -50,7 +50,8 @@
 		"vue": "^3.5.13",
 		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
-		"vuedraggable": "^4.1.0"
+		"vuedraggable": "^4.1.0",
+		"xxhash-wasm": "1.1.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.1.1",
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue
index 5aab3a6..f902f81 100644
--- a/apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminModsPage.vue
@@ -9,6 +9,7 @@ import {
 	skinSiteDeleteModFile,
 	skinSiteDeleteModRuleTag,
 	skinSiteDeleteModRuntime,
+	skinSiteDeleteMultiModFile,
 	skinSiteModCount,
 	type SkinSiteModInfo,
 	skinSiteModList,
@@ -20,9 +21,12 @@ import {
 	skinSiteModSearch,
 	skinSiteUpdateModInfo,
 	skinSiteUpdateModRuleTag,
+	skinSiteUpdateMultiModInfo,
 	skinSiteUploadModRuntime,
 } from '@/helpers/skin-site-api'
 
+import ModUploadModal from './ModUploadModal.vue'
+
 const { formatMessage } = useVIntl()
 const { handleError, addNotification } = injectNotificationManager()
 
@@ -92,6 +96,46 @@ const messages = defineMessages({
 	unavailable: { id: 'app.skin-site.admin.mods.unavailable', defaultMessage: 'Unavailable' },
 	active: { id: 'app.skin-site.admin.mods.active', defaultMessage: 'Active' },
 	uploader: { id: 'app.skin-site.admin.mods.uploader', defaultMessage: 'by {name}' },
+	upload: { id: 'app.skin-site.admin.mods.upload', defaultMessage: 'Upload' },
+	selectMode: {
+		id: 'app.skin-site.admin.mods.select-mode',
+		defaultMessage: 'Select multiple',
+	},
+	exitSelect: {
+		id: 'app.skin-site.admin.mods.exit-select',
+		defaultMessage: 'Done selecting',
+	},
+	selectAll: { id: 'app.skin-site.admin.mods.select-all', defaultMessage: 'Select all' },
+	clearSelection: {
+		id: 'app.skin-site.admin.mods.clear-selection',
+		defaultMessage: 'Clear selection',
+	},
+	selectedCount: {
+		id: 'app.skin-site.admin.mods.selected-count',
+		defaultMessage: '{count} selected',
+	},
+	deleteSelected: {
+		id: 'app.skin-site.admin.mods.delete-selected',
+		defaultMessage: 'Delete selected',
+	},
+	confirmDeleteMulti: {
+		id: 'app.skin-site.admin.mods.confirm-delete-multi',
+		defaultMessage: 'Delete {count} selected mods? This cannot be undone.',
+	},
+	deletedMulti: {
+		id: 'app.skin-site.admin.mods.deleted-multi',
+		defaultMessage: 'Selected mods deleted.',
+	},
+	serverAddress: {
+		id: 'app.skin-site.admin.mods.server-address',
+		defaultMessage: 'Server address',
+	},
+	serverAddressHint: {
+		id: 'app.skin-site.admin.mods.server-address-hint',
+		defaultMessage: 'Filter by server address',
+	},
+	apply: { id: 'app.skin-site.admin.mods.apply', defaultMessage: 'Apply' },
+	clear: { id: 'app.skin-site.admin.mods.clear', defaultMessage: 'Clear' },
 })
 
 type Tab = 'mods' | 'tags' | 'runtime'
@@ -112,6 +156,13 @@ const editForm = ref({ name: '', modId: '', version: '', domainRules: '' })
 const savingMod = ref(false)
 const deletingHash = ref<string | null>(null)
 
+const selectedHashes = ref<Set<string>>(new Set())
+const selectionMode = ref(false)
+const deletingMulti = ref(false)
+const serverAddressInput = ref('')
+const serverAddressFilter = ref('')
+const uploadOpen = ref(false)
+
 const tags = ref<SkinSiteModRuleTag[]>([])
 const tagsLoading = ref(false)
 const tagEditorOpen = ref(false)
@@ -173,8 +224,12 @@ async function loadMods(reset = true) {
 					limit: PAGE_SIZE,
 					offset: modOffset.value,
 					ruleTagId: tagFilter.value,
+					serverAddr: serverAddressFilter.value || undefined,
+				}),
+				skinSiteModCount({
+					ruleTagId: tagFilter.value,
+					serverAddr: serverAddressFilter.value || undefined,
 				}),
-				skinSiteModCount({ ruleTagId: tagFilter.value }),
 			])
 			if (!listResult.success) throw new Error(listResult.errorMessage)
 			mods.value = listResult.payload ?? []
@@ -293,6 +348,56 @@ async function removeMod(mod: SkinSiteModInfo) {
 	}
 }
 
+function toggleSelect(hash: string) {
+	const next = new Set(selectedHashes.value)
+	if (next.has(hash)) next.delete(hash)
+	else next.add(hash)
+	selectedHashes.value = next
+}
+
+function selectAllVisible() {
+	selectedHashes.value = new Set(mods.value.map((m) => m.hash))
+}
+
+function clearSelection() {
+	selectedHashes.value = new Set()
+}
+
+function exitSelectionMode() {
+	selectionMode.value = false
+	clearSelection()
+}
+
+async function deleteSelected() {
+	if (deletingMulti.value || !selectedHashes.value.size) return
+	const count = selectedHashes.value.size
+	if (!window.confirm(formatMessage(messages.confirmDeleteMulti, { count }))) return
+	deletingMulti.value = true
+	try {
+		const result = await skinSiteDeleteMultiModFile(Array.from(selectedHashes.value))
+		if (!result.success) throw new Error(result.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.deletedMulti) })
+		clearSelection()
+		selectionMode.value = false
+		await loadMods(false)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		deletingMulti.value = false
+	}
+}
+
+function applyServerAddress() {
+	serverAddressFilter.value = serverAddressInput.value.trim()
+	void loadMods(true)
+}
+
+function clearServerAddress() {
+	serverAddressInput.value = ''
+	serverAddressFilter.value = ''
+	void loadMods(true)
+}
+
 function openNewTag() {
 	editingTagId.value = null
 	tagForm.value = { name: '', rules: '' }
@@ -456,9 +561,84 @@ onMounted(async () => {
 					<option :value="null">{{ formatMessage(messages.filterAll) }}</option>
 					<option v-for="tag in tags" :key="tag.id" :value="tag.id">{{ tag.name }}</option>
 				</select>
+				<button
+					type="button"
+					class="rounded-full bg-brand px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+					@click="uploadOpen = true"
+				>
+					{{ formatMessage(messages.upload) }}
+				</button>
+				<button
+					v-if="!selectionMode"
+					type="button"
+					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+					@click="selectionMode = true"
+				>
+					{{ formatMessage(messages.selectMode) }}
+				</button>
+				<template v-else>
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="selectAllVisible"
+					>
+						{{ formatMessage(messages.selectAll) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="!selectedHashes.size"
+						@click="clearSelection"
+					>
+						{{ formatMessage(messages.clearSelection) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-full bg-red px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="!selectedHashes.size || deletingMulti"
+						@click="deleteSelected"
+					>
+						{{ formatMessage(messages.deleteSelected) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="exitSelectionMode"
+					>
+						{{ formatMessage(messages.exitSelect) }}
+					</button>
+				</template>
 				<span class="text-xs text-secondary">
 					{{ formatMessage(messages.total, { count: modTotal }) }}
 				</span>
+				<span v-if="selectionMode && selectedHashes.size" class="text-xs font-semibold text-contrast">
+					{{ formatMessage(messages.selectedCount, { count: selectedHashes.size }) }}
+				</span>
+			</div>
+
+			<div class="flex flex-wrap items-center gap-2">
+				<input
+					v-model="serverAddressInput"
+					type="text"
+					:placeholder="formatMessage(messages.serverAddressHint)"
+					class="min-w-0 flex-1 rounded-full border border-solid border-surface-5 bg-bg px-3 py-1 text-xs text-contrast outline-none focus:border-brand"
+					@keyup.enter="applyServerAddress"
+				/>
+				<button
+					type="button"
+					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+					@click="applyServerAddress"
+				>
+					{{ formatMessage(messages.apply) }}
+				</button>
+				<button
+					type="button"
+					class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					:disabled="!serverAddressFilter"
+					@click="clearServerAddress"
+				>
+					{{ formatMessage(messages.clear) }}
+				</button>
 			</div>
 
 			<div v-if="modLoading" class="flex items-center gap-2 text-sm text-secondary">
@@ -476,8 +656,16 @@ onMounted(async () => {
 					v-for="mod in mods"
 					:key="mod.hash"
 					class="flex flex-col gap-2 rounded-xl bg-bg-raised p-3"
+					:class="selectionMode && selectedHashes.has(mod.hash) ? 'ring-2 ring-brand' : ''"
 				>
 					<div class="flex flex-wrap items-center gap-2">
+						<input
+							v-if="selectionMode"
+							type="checkbox"
+							class="size-3.5 shrink-0"
+							:checked="selectedHashes.has(mod.hash)"
+							@change="toggleSelect(mod.hash)"
+						/>
 						<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">
 							{{ mod.metadata.name || mod.name }}
 						</span>
@@ -784,5 +972,11 @@ onMounted(async () => {
 				</div>
 			</div>
 		</template>
+
+		<ModUploadModal
+			v-if="uploadOpen"
+			:rule-tags="tags"
+			@finished="uploadOpen = false"
+		/>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/ModUploadModal.vue b/apps/app-frontend/src/components/ui/skin-site/admin/ModUploadModal.vue
new file mode 100644
index 0000000..a8485e2
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/ModUploadModal.vue
@@ -0,0 +1,440 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import {
+	type SkinSiteModRuleTag,
+	skinSiteModExistsByHash,
+	skinSiteModExistsByName,
+	skinSiteModHashFromFile,
+	skinSiteUploadMod,
+} from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+defineProps<{ ruleTags: SkinSiteModRuleTag[] }>()
+const emit = defineEmits<{ (e: 'finished'): void }>()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.admin.mods.upload-title', defaultMessage: 'Upload mods' },
+	dropHint: {
+		id: 'app.skin-site.admin.mods.upload-drop',
+		defaultMessage: 'Drag .jar files here, or click to choose',
+	},
+	dropSub: {
+		id: 'app.skin-site.admin.mods.upload-sub',
+		defaultMessage: 'Multiple files supported, up to {size} MB each',
+	},
+	tagsLabel: {
+		id: 'app.skin-site.admin.mods.upload-tags',
+		defaultMessage: 'Attach rule tags',
+	},
+	queue: { id: 'app.skin-site.admin.mods.upload-queue', defaultMessage: 'Files' },
+	statusPending: {
+		id: 'app.skin-site.admin.mods.upload-pending',
+		defaultMessage: 'Pending',
+	},
+	statusChecking: {
+		id: 'app.skin-site.admin.mods.upload-checking',
+		defaultMessage: 'Checking…',
+	},
+	statusUploading: {
+		id: 'app.skin-site.admin.mods.upload-uploading',
+		defaultMessage: 'Uploading…',
+	},
+	statusConflict: {
+		id: 'app.skin-site.admin.mods.upload-conflict',
+		defaultMessage: 'Name exists',
+	},
+	statusSuccess: {
+		id: 'app.skin-site.admin.mods.upload-success',
+		defaultMessage: 'Done',
+	},
+	statusError: {
+		id: 'app.skin-site.admin.mods.upload-error',
+		defaultMessage: 'Failed',
+	},
+	existsAlready: {
+		id: 'app.skin-site.admin.mods.upload-exists',
+		defaultMessage: 'This file already exists on the server.',
+	},
+	nameConflictTitle: {
+		id: 'app.skin-site.admin.mods.upload-name-conflict',
+		defaultMessage: 'A mod with the same file name already exists',
+	},
+	nameConflictHint: {
+		id: 'app.skin-site.admin.mods.upload-name-conflict-hint',
+		defaultMessage: 'Overwrite the existing mod, or skip this file.',
+	},
+	overwrite: { id: 'app.skin-site.admin.mods.upload-overwrite', defaultMessage: 'Overwrite' },
+	skip: { id: 'app.skin-site.admin.mods.upload-skip', defaultMessage: 'Skip' },
+	close: { id: 'app.skin-site.admin.mods.upload-close', defaultMessage: 'Close' },
+	allDone: {
+		id: 'app.skin-site.admin.mods.upload-all-done',
+		defaultMessage: 'All files processed.',
+	},
+	tooLarge: {
+		id: 'app.skin-site.admin.mods.upload-too-large',
+		defaultMessage: 'File too large: {name}',
+	},
+})
+
+const MAX_MOD_SIZE_MB = 200
+const MAX_RETRIES = 3
+
+type TaskStatus = 'pending' | 'checking' | 'uploading' | 'conflict' | 'success' | 'error'
+
+interface Task {
+	file: File
+	status: TaskStatus
+	message?: string
+	attempts: number
+}
+
+const queue = ref<Task[]>([])
+const selectedTagIds = ref<Set<number>>(new Set())
+const fileInput = ref<HTMLInputElement | null>(null)
+const busy = ref(false)
+const conflictTask = ref<Task | null>(null)
+
+const finishedCount = computed(
+	() => queue.value.filter((t) => t.status === 'success' || t.status === 'error').length,
+)
+const allDone = computed(() => queue.value.length > 0 && finishedCount.value === queue.value.length)
+const hasWork = computed(() => queue.value.length > 0)
+
+function toggleTag(id: number) {
+	const next = new Set(selectedTagIds.value)
+	if (next.has(id)) next.delete(id)
+	else next.add(id)
+	selectedTagIds.value = next
+}
+
+function pickFiles() {
+	if (busy.value) return
+	fileInput.value?.click()
+}
+
+function onFileChange(event: Event) {
+	const input = event.target as HTMLInputElement
+	const files = Array.from(input.files ?? [])
+	input.value = ''
+	enqueue(files)
+}
+
+function onDrop(event: DragEvent) {
+	event.preventDefault()
+	if (busy.value) return
+	enqueue(Array.from(event.dataTransfer?.files ?? []))
+}
+
+function enqueue(files: File[]) {
+	const jars = files.filter((f) => f.name.toLowerCase().endsWith('.jar'))
+	if (!jars.length) return
+	const accepted: Task[] = []
+	for (const file of jars) {
+		if (file.size > MAX_MOD_SIZE_MB * 1024 * 1024) {
+			addNotification({
+				type: 'error',
+				title: formatMessage(messages.tooLarge, { name: file.name }),
+			})
+			continue
+		}
+		accepted.push({ file, status: 'pending', attempts: 0 })
+	}
+	if (!accepted.length) return
+	queue.value = [...queue.value, ...accepted]
+	void runQueue()
+}
+
+async function runQueue() {
+	if (busy.value) return
+	busy.value = true
+	try {
+		for (;;) {
+			const task = queue.value.find((t) => t.status === 'pending')
+			if (!task) break
+			await processTask(task)
+			if (task.status === 'conflict') break
+		}
+	} finally {
+		busy.value = false
+	}
+	if (allDone.value) {
+		addNotification({ type: 'success', title: formatMessage(messages.allDone) })
+		emit('finished')
+	}
+}
+
+async function processTask(task: Task) {
+	task.status = 'checking'
+	task.message = undefined
+	try {
+		const hash = await skinSiteModHashFromFile(task.file)
+		const exists = await skinSiteModExistsByHash(hash)
+		if (exists.success) {
+			task.status = 'error'
+			task.message = formatMessage(messages.existsAlready)
+			return
+		}
+		const nameExists = await skinSiteModExistsByName(task.file.name)
+		if (nameExists.success) {
+			task.status = 'conflict'
+			conflictTask.value = task
+			return
+		}
+		await upload(task, false)
+	} catch (error) {
+		task.status = 'error'
+		task.message = error instanceof Error ? error.message : String(error)
+		handleError(error)
+	}
+}
+
+async function upload(task: Task, overwrite: boolean) {
+	task.status = 'uploading'
+	try {
+		const res = await skinSiteUploadMod(task.file, Array.from(selectedTagIds.value), overwrite)
+		if (res.success) {
+			task.status = 'success'
+			return
+		}
+		if (res.errorCode === 429) {
+			task.attempts++
+			if (task.attempts < MAX_RETRIES) {
+				task.status = 'pending'
+				task.message = 'rate limited, retrying'
+				setTimeout(() => void runQueue(), 1500 * task.attempts)
+			} else {
+				task.status = 'error'
+				task.message = res.errorMessage
+			}
+			return
+		}
+		if (res.errorType === 'HashDiff') {
+			task.attempts++
+			if (task.attempts < MAX_RETRIES) {
+				task.status = 'pending'
+				task.message = 'hash mismatch, retrying'
+				setTimeout(() => void runQueue(), 800)
+			} else {
+				task.status = 'error'
+				task.message = res.errorMessage
+			}
+			return
+		}
+		if (res.errorType === 'ModNameConflict') {
+			task.status = 'conflict'
+			conflictTask.value = task
+			return
+		}
+		task.status = 'error'
+		task.message = res.errorMessage
+	} catch (error) {
+		task.status = 'error'
+		task.message = error instanceof Error ? error.message : String(error)
+	}
+}
+
+async function resolveConflict(overwrite: boolean) {
+	const task = conflictTask.value
+	conflictTask.value = null
+	if (!task) return
+	if (overwrite) {
+		busy.value = true
+		try {
+			await upload(task, true)
+		} finally {
+			busy.value = false
+		}
+	} else {
+		task.status = 'error'
+		task.message = formatMessage(messages.skip)
+	}
+	void runQueue()
+}
+
+function close() {
+	if (busy.value) return
+	queue.value = []
+	conflictTask.value = null
+	emit('finished')
+}
+
+function statusLabel(status: TaskStatus): string {
+	switch (status) {
+		case 'pending':
+			return formatMessage(messages.statusPending)
+		case 'checking':
+			return formatMessage(messages.statusChecking)
+		case 'uploading':
+			return formatMessage(messages.statusUploading)
+		case 'conflict':
+			return formatMessage(messages.statusConflict)
+		case 'success':
+			return formatMessage(messages.statusSuccess)
+		default:
+			return formatMessage(messages.statusError)
+	}
+}
+
+function statusClass(status: TaskStatus): string {
+	switch (status) {
+		case 'success':
+			return 'bg-green text-contrast'
+		case 'error':
+			return 'bg-red text-contrast'
+		case 'conflict':
+			return 'bg-yellow text-contrast'
+		default:
+			return 'bg-button-bg text-secondary'
+	}
+}
+</script>
+
+<template>
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" @click.self="close">
+		<div class="flex max-h-[88vh] w-full max-w-2xl flex-col gap-4 overflow-y-auto rounded-xl bg-bg p-6">
+			<div class="flex items-start justify-between gap-3">
+				<h3 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h3>
+				<button
+					type="button"
+					class="shrink-0 rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+					:disabled="busy"
+					@click="close"
+				>
+					✕
+				</button>
+			</div>
+
+			<div
+				class="flex min-h-40 cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-surface-5 p-6 text-center transition-colors hover:bg-bg-raised"
+				:class="busy ? 'cursor-not-allowed opacity-60' : ''"
+				@dragover.prevent
+				@dragenter.prevent
+				@drop.prevent="onDrop"
+				@click="pickFiles"
+			>
+				<input
+					ref="fileInput"
+					type="file"
+					class="hidden"
+					multiple
+					accept=".jar"
+					@change="onFileChange"
+				/>
+				<span class="text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.dropHint) }}
+				</span>
+				<span class="text-xs text-secondary">
+					{{ formatMessage(messages.dropSub, { size: MAX_MOD_SIZE_MB }) }}
+				</span>
+			</div>
+
+			<div v-if="ruleTags.length" class="flex flex-col gap-2">
+				<span class="text-xs font-semibold text-secondary">
+					{{ formatMessage(messages.tagsLabel) }}
+				</span>
+				<div class="flex flex-wrap gap-2">
+					<button
+						v-for="tag in ruleTags"
+						:key="tag.id"
+						type="button"
+						class="rounded-full px-3 py-1 text-xs font-semibold transition-colors"
+						:class="
+							selectedTagIds.has(tag.id)
+								? 'bg-brand text-contrast'
+								: 'bg-button-bg text-secondary hover:text-contrast'
+						"
+						@click="toggleTag(tag.id)"
+					>
+						{{ tag.name }}
+					</button>
+				</div>
+			</div>
+
+			<div v-if="hasWork" class="flex flex-col gap-2">
+				<span class="text-xs font-semibold text-secondary">
+					{{ formatMessage(messages.queue) }} ({{ finishedCount }}/{{ queue.length }})
+				</span>
+				<div class="flex max-h-64 flex-col gap-1.5 overflow-y-auto">
+					<div
+						v-for="(task, index) in queue"
+						:key="task.file.name + index"
+						class="flex flex-wrap items-center gap-2 rounded-lg bg-bg-raised px-3 py-2"
+					>
+						<span class="min-w-0 flex-1 truncate text-xs text-contrast">
+							{{ task.file.name }}
+						</span>
+						<span class="shrink-0 text-[10px] text-secondary">
+							{{ (task.file.size / 1024 / 1024).toFixed(2) }} MB
+						</span>
+						<span
+							class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold"
+							:class="statusClass(task.status)"
+						>
+							{{ statusLabel(task.status) }}
+						</span>
+						<span
+							v-if="task.message"
+							class="w-full truncate text-[10px] text-secondary"
+							:title="task.message"
+						>
+							{{ task.message }}
+						</span>
+					</div>
+				</div>
+			</div>
+
+			<div
+				v-if="busy"
+				class="flex items-center gap-2 text-xs text-secondary"
+			>
+				<SpinnerIcon class="size-3.5 animate-spin" />
+				{{ formatMessage(messages.statusUploading) }}
+			</div>
+
+			<div class="flex justify-end gap-2 border-t border-solid border-surface-5 pt-3">
+				<button
+					type="button"
+					class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110 disabled:opacity-50"
+					:disabled="busy"
+					@click="close"
+				>
+					{{ formatMessage(messages.close) }}
+				</button>
+			</div>
+		</div>
+
+		<div
+			v-if="conflictTask"
+			class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 p-4"
+		>
+			<div class="flex w-full max-w-md flex-col gap-3 rounded-xl bg-bg p-6">
+				<h4 class="m-0 text-base font-bold text-contrast">
+					{{ formatMessage(messages.nameConflictTitle) }}
+				</h4>
+				<p class="m-0 text-xs break-all text-secondary">{{ conflictTask.file.name }}</p>
+				<p class="m-0 text-xs text-secondary">{{ formatMessage(messages.nameConflictHint) }}</p>
+				<div class="flex justify-end gap-2 pt-2">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="resolveConflict(false)"
+					>
+						{{ formatMessage(messages.skip) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+						@click="resolveConflict(true)"
+					>
+						{{ formatMessage(messages.overwrite) }}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index eb2e9f5..4f3e1ae 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -2015,3 +2015,59 @@ export function skinSiteAdminInviteUser(email: string): Promise<SkinSiteResponse
 		body: { email },
 	})
 }
+
+export function skinSiteModHashFromFile(file: File): Promise<string> {
+	return import('xxhash-wasm').then(async ({ default: xxhash }) => {
+		const { create64 } = await xxhash()
+		const hasher = create64()
+		const reader = file.stream().getReader()
+		for (;;) {
+			const { done, value } = await reader.read()
+			if (done) break
+			hasher.update(value)
+		}
+		const raw: bigint = hasher.digest()
+		const mask = (1n << 64n) - 1n
+		const v = raw & mask
+		const signed = v >= 1n << 63n ? v - (1n << 64n) : v
+		return signed.toString()
+	})
+}
+
+export function skinSiteModExistsByHash(hash: string): Promise<SkinSiteResponse<unknown>> {
+	return skinSiteRequest<unknown>('query/hash/' + encodeURIComponent(hash), { type: 'mod' })
+}
+
+export function skinSiteModExistsByName(modName: string): Promise<SkinSiteResponse<unknown>> {
+	const q = new URLSearchParams({ mod_name: modName })
+	return skinSiteRequest<unknown>('query/name?' + q.toString(), { type: 'mod' })
+}
+
+export async function skinSiteUploadMod(
+	file: File,
+	ruleTagIds: number[] = [],
+	overwrite = false,
+): Promise<SkinSiteResponse<string>> {
+	const hash = await skinSiteModHashFromFile(file)
+	const form = new FormData()
+	form.append('mods', file, file.name)
+	const query = new URLSearchParams()
+	if (ruleTagIds.length) query.set('rule_tag_ids', ruleTagIds.join(','))
+	if (overwrite) query.set('overwrite', 'true')
+	const suffix = query.size ? '?' + query.toString() : ''
+	return skinSiteRequest<string>('upload/' + hash + suffix, {
+		method: 'POST',
+		type: 'mod',
+		form,
+	})
+}
+
+export function skinSiteUpdateMultiModInfo(
+	mods: SkinSiteModInfo[],
+): Promise<SkinSiteResponse<SkinSiteModInfo[]>> {
+	return skinSiteRequest<SkinSiteModInfo[]>('update/info/multi', {
+		method: 'POST',
+		type: 'mod',
+		body: mods,
+	})
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 4d34b60..cc17884 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12217,5 +12217,37 @@
   "app.skin-site.admin.users.registered-at": {"message": "Registered at"},
   "app.skin-site.admin.users.status": {"message": "Status"},
   "app.skin-site.admin.users.status-banned": {"message": "Banned"},
-  "app.skin-site.admin.users.status-normal": {"message": "Normal"}
+  "app.skin-site.admin.users.status-normal": {"message": "Normal"},
+  "app.skin-site.admin.mods.upload": {"message": "Upload"},
+  "app.skin-site.admin.mods.select-mode": {"message": "Select multiple"},
+  "app.skin-site.admin.mods.exit-select": {"message": "Done selecting"},
+  "app.skin-site.admin.mods.select-all": {"message": "Select all"},
+  "app.skin-site.admin.mods.clear-selection": {"message": "Clear selection"},
+  "app.skin-site.admin.mods.selected-count": {"message": "{count} selected"},
+  "app.skin-site.admin.mods.delete-selected": {"message": "Delete selected"},
+  "app.skin-site.admin.mods.confirm-delete-multi": {"message": "Delete {count} selected mods? This cannot be undone."},
+  "app.skin-site.admin.mods.deleted-multi": {"message": "Selected mods deleted."},
+  "app.skin-site.admin.mods.server-address": {"message": "Server address"},
+  "app.skin-site.admin.mods.server-address-hint": {"message": "Filter by server address"},
+  "app.skin-site.admin.mods.apply": {"message": "Apply"},
+  "app.skin-site.admin.mods.clear": {"message": "Clear"},
+  "app.skin-site.admin.mods.upload-title": {"message": "Upload mods"},
+  "app.skin-site.admin.mods.upload-drop": {"message": "Drag .jar files here, or click to choose"},
+  "app.skin-site.admin.mods.upload-sub": {"message": "Multiple files supported, up to {size} MB each"},
+  "app.skin-site.admin.mods.upload-tags": {"message": "Attach rule tags"},
+  "app.skin-site.admin.mods.upload-queue": {"message": "Files"},
+  "app.skin-site.admin.mods.upload-pending": {"message": "Pending"},
+  "app.skin-site.admin.mods.upload-checking": {"message": "Checking…"},
+  "app.skin-site.admin.mods.upload-uploading": {"message": "Uploading…"},
+  "app.skin-site.admin.mods.upload-conflict": {"message": "Name exists"},
+  "app.skin-site.admin.mods.upload-success": {"message": "Done"},
+  "app.skin-site.admin.mods.upload-error": {"message": "Failed"},
+  "app.skin-site.admin.mods.upload-exists": {"message": "This file already exists on the server."},
+  "app.skin-site.admin.mods.upload-name-conflict": {"message": "A mod with the same file name already exists"},
+  "app.skin-site.admin.mods.upload-name-conflict-hint": {"message": "Overwrite the existing mod, or skip this file."},
+  "app.skin-site.admin.mods.upload-overwrite": {"message": "Overwrite"},
+  "app.skin-site.admin.mods.upload-skip": {"message": "Skip"},
+  "app.skin-site.admin.mods.upload-close": {"message": "Close"},
+  "app.skin-site.admin.mods.upload-all-done": {"message": "All files processed."},
+  "app.skin-site.admin.mods.upload-too-large": {"message": "File too large: {name}"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 56b811a..13b7baa 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -12048,5 +12048,37 @@
   "app.skin-site.admin.users.registered-at": {"message": "注册时间"},
   "app.skin-site.admin.users.status": {"message": "状态"},
   "app.skin-site.admin.users.status-banned": {"message": "已封禁"},
-  "app.skin-site.admin.users.status-normal": {"message": "正常"}
+  "app.skin-site.admin.users.status-normal": {"message": "正常"},
+  "app.skin-site.admin.mods.upload": {"message": "上传"},
+  "app.skin-site.admin.mods.select-mode": {"message": "选择多个"},
+  "app.skin-site.admin.mods.exit-select": {"message": "完成选择"},
+  "app.skin-site.admin.mods.select-all": {"message": "全选本页"},
+  "app.skin-site.admin.mods.clear-selection": {"message": "取消全选"},
+  "app.skin-site.admin.mods.selected-count": {"message": "已选择 {count} 项"},
+  "app.skin-site.admin.mods.delete-selected": {"message": "删除所选"},
+  "app.skin-site.admin.mods.confirm-delete-multi": {"message": "确定删除选中的 {count} 个 Mod？此操作不可撤销。"},
+  "app.skin-site.admin.mods.deleted-multi": {"message": "已删除所选 Mod。"},
+  "app.skin-site.admin.mods.server-address": {"message": "服务器地址"},
+  "app.skin-site.admin.mods.server-address-hint": {"message": "按服务器地址过滤"},
+  "app.skin-site.admin.mods.apply": {"message": "应用"},
+  "app.skin-site.admin.mods.clear": {"message": "清除"},
+  "app.skin-site.admin.mods.upload-title": {"message": "上传 Mod"},
+  "app.skin-site.admin.mods.upload-drop": {"message": "拖拽 .jar 文件到此处，或点击选择"},
+  "app.skin-site.admin.mods.upload-sub": {"message": "支持多文件，单个不超过 {size} MB"},
+  "app.skin-site.admin.mods.upload-tags": {"message": "附加规则标签"},
+  "app.skin-site.admin.mods.upload-queue": {"message": "文件列表"},
+  "app.skin-site.admin.mods.upload-pending": {"message": "等待中"},
+  "app.skin-site.admin.mods.upload-checking": {"message": "检查中…"},
+  "app.skin-site.admin.mods.upload-uploading": {"message": "上传中…"},
+  "app.skin-site.admin.mods.upload-conflict": {"message": "名称已存在"},
+  "app.skin-site.admin.mods.upload-success": {"message": "完成"},
+  "app.skin-site.admin.mods.upload-error": {"message": "失败"},
+  "app.skin-site.admin.mods.upload-exists": {"message": "该文件已存在于服务器。"},
+  "app.skin-site.admin.mods.upload-name-conflict": {"message": "已存在同名 Mod"},
+  "app.skin-site.admin.mods.upload-name-conflict-hint": {"message": "覆盖已有 Mod，或跳过此文件。"},
+  "app.skin-site.admin.mods.upload-overwrite": {"message": "覆盖"},
+  "app.skin-site.admin.mods.upload-skip": {"message": "跳过"},
+  "app.skin-site.admin.mods.upload-close": {"message": "关闭"},
+  "app.skin-site.admin.mods.upload-all-done": {"message": "全部文件处理完成。"},
+  "app.skin-site.admin.mods.upload-too-large": {"message": "文件过大：{name}"}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6c8ba0..ec019e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -188,6 +188,9 @@ importers:
       vuedraggable:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.27(typescript@5.9.3))
+      xxhash-wasm:
+        specifier: 1.1.0
+        version: 1.1.0
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
@@ -7103,6 +7106,9 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  xxhash-wasm@1.1.0:
+    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -14160,6 +14166,8 @@ snapshots:
 
   xtend@4.0.2: {}
 
+  xxhash-wasm@1.1.0: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}

From ef1435bd31ba43294b8e410236a83ab6091e2b6c Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 12:13:34 +0800
Subject: [PATCH 12/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=AE=A1=E7=90=86=E5=8F=B0=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E5=AE=A4=E6=88=BF=E9=97=B4=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 房间列表：头像、名称、可见性、类型、语音标记、前置权限、创建时间
- 创建/编辑房间：名称、简介、公开或私有、普通或聚落、前置条件判定与所需权限
- 房间头像：上传、更换、移除，支持 PNG/JPEG/WebP，5 MB 限制
- 删除房间带二次确认
- 新增 RoomAvatar 与 RoomAvatarEditor 组件，头像按附件 id 缓存 Blob URL
- 补充聊天室相关 API：房间列表、创建、更新、删除、头像更新、附件上传、头像获取
- 管理台导航接入聊天室入口
- 中英文各补 37 个文案
---
 .../components/ui/skin-site/RoomAvatar.vue    |  63 +++
 .../ui/skin-site/RoomAvatarEditor.vue         | 161 ++++++
 .../ui/skin-site/SkinSiteAdminView.vue        |   2 +
 .../ui/skin-site/admin/AdminChatPage.vue      | 514 ++++++++++++++++++
 .../ui/skin-site/room-avatar-cache.ts         |  30 +
 .../app-frontend/src/helpers/skin-site-api.ts | 122 +++++
 .../app-frontend/src/locales/en-US/index.json |  39 +-
 .../app-frontend/src/locales/zh-CN/index.json |  39 +-
 8 files changed, 968 insertions(+), 2 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/RoomAvatar.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/RoomAvatarEditor.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/room-avatar-cache.ts

diff --git a/apps/app-frontend/src/components/ui/skin-site/RoomAvatar.vue b/apps/app-frontend/src/components/ui/skin-site/RoomAvatar.vue
new file mode 100644
index 0000000..c991d57
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/RoomAvatar.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { loadCachedRoomAvatar } from './room-avatar-cache'
+
+const props = withDefaults(
+	defineProps<{
+		roomId: number
+		avatarAttachmentId?: number | null
+		name: string
+		size?: 'sm' | 'md' | 'lg' | 'xl'
+	}>(),
+	{ avatarAttachmentId: null, size: 'md' },
+)
+
+const avatarUrl = ref<string | null>(null)
+const loading = ref(false)
+
+const sizeClass = computed(
+	() =>
+		({
+			sm: 'size-9 rounded-lg text-lg',
+			md: 'size-10 rounded-lg text-xl',
+			lg: 'size-12 rounded-lg text-2xl',
+			xl: 'size-20 rounded-xl text-3xl',
+		})[props.size],
+)
+
+watch(
+	() => [props.roomId, props.avatarAttachmentId] as const,
+	async ([roomId, attachmentId]) => {
+		avatarUrl.value = null
+		if (!attachmentId) {
+			loading.value = false
+			return
+		}
+		loading.value = true
+		const url = await loadCachedRoomAvatar(roomId, attachmentId)
+		if (props.roomId === roomId && props.avatarAttachmentId === attachmentId) {
+			avatarUrl.value = url
+		}
+		loading.value = false
+	},
+	{ immediate: true },
+)
+</script>
+
+<template>
+	<div
+		class="grid shrink-0 place-items-center overflow-hidden border border-solid border-surface-5 bg-brand/10 font-bold text-brand"
+		:class="sizeClass"
+	>
+		<img
+			v-if="avatarUrl"
+			:src="avatarUrl"
+			:alt="name"
+			class="h-full w-full object-cover"
+			decoding="async"
+		/>
+		<span v-else-if="loading" class="text-[10px] text-secondary">…</span>
+		<span v-else class="select-none">#</span>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/RoomAvatarEditor.vue b/apps/app-frontend/src/components/ui/skin-site/RoomAvatarEditor.vue
new file mode 100644
index 0000000..9652dbe
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/RoomAvatarEditor.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+import { skinSiteChatAttachmentUpload } from '@/helpers/skin-site-api'
+
+import RoomAvatar from './RoomAvatar.vue'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const props = withDefaults(
+	defineProps<{
+		roomId?: number
+		avatarAttachmentId?: number | null
+		name: string
+		token?: string | null
+		remove?: boolean
+	}>(),
+	{ roomId: 0, avatarAttachmentId: null, token: null, remove: false },
+)
+
+const emit = defineEmits<{
+	(e: 'update:token', value: string | null): void
+	(e: 'update:remove', value: boolean): void
+	(e: 'update:uploading', value: boolean): void
+}>()
+
+const messages = defineMessages({
+	label: { id: 'app.skin-site.chat.avatar.label', defaultMessage: 'Room avatar' },
+	upload: { id: 'app.skin-site.chat.avatar.upload', defaultMessage: 'Upload avatar' },
+	replace: { id: 'app.skin-site.chat.avatar.replace', defaultMessage: 'Replace avatar' },
+	remove: { id: 'app.skin-site.chat.avatar.remove', defaultMessage: 'Remove avatar' },
+	hint: {
+		id: 'app.skin-site.chat.avatar.hint',
+		defaultMessage: 'PNG, JPEG or WebP, up to 8192 px per side and 5 MB.',
+	},
+	badFormat: {
+		id: 'app.skin-site.chat.avatar.bad-format',
+		defaultMessage: 'Only PNG, JPEG and WebP are supported.',
+	},
+	tooLarge: {
+		id: 'app.skin-site.chat.avatar.too-large',
+		defaultMessage: 'Avatar must not exceed 5 MB.',
+	},
+	notImage: {
+		id: 'app.skin-site.chat.avatar.not-image',
+		defaultMessage: 'Avatar must be an image.',
+	},
+})
+
+const MAX_BYTES = 5 * 1024 * 1024
+const ALLOWED = ['png', 'jpg', 'jpeg', 'webp']
+
+const uploading = ref(false)
+const previewUrl = ref<string | null>(null)
+
+watch(
+	() => props.token,
+	(token) => {
+		if (!token) revokePreview()
+	},
+)
+
+function revokePreview() {
+	if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
+	previewUrl.value = null
+}
+
+async function selectAvatar(event: Event) {
+	const input = event.target as HTMLInputElement
+	const file = input.files?.[0]
+	input.value = ''
+	if (!file) return
+
+	const ext = file.name.split('.').pop()?.toLowerCase()
+	if (!ext || !ALLOWED.includes(ext)) {
+		addNotification({ type: 'error', title: formatMessage(messages.badFormat) })
+		return
+	}
+	if (file.size > MAX_BYTES) {
+		addNotification({ type: 'error', title: formatMessage(messages.tooLarge) })
+		return
+	}
+
+	uploading.value = true
+	emit('update:uploading', true)
+	try {
+		const res = await skinSiteChatAttachmentUpload(file)
+		if (!res.success) throw new Error(res.errorMessage)
+		if (res.payload.attachment.kind !== 'IMAGE') {
+			addNotification({ type: 'error', title: formatMessage(messages.notImage) })
+			return
+		}
+		revokePreview()
+		previewUrl.value = URL.createObjectURL(file)
+		emit('update:token', res.payload.token)
+		emit('update:remove', false)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		uploading.value = false
+		emit('update:uploading', false)
+	}
+}
+
+function removeAvatar() {
+	revokePreview()
+	emit('update:token', null)
+	emit('update:remove', true)
+}
+
+onBeforeUnmount(revokePreview)
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<span class="text-xs font-semibold text-secondary">
+			{{ formatMessage(messages.label) }}
+		</span>
+		<div class="flex flex-wrap items-center gap-3">
+			<div
+				v-if="previewUrl"
+				class="size-20 overflow-hidden rounded-xl border border-solid border-surface-5 bg-bg-raised"
+			>
+				<img :src="previewUrl" alt="" class="h-full w-full object-cover" />
+			</div>
+			<RoomAvatar
+				v-else
+				:room-id="roomId"
+				:avatar-attachment-id="remove ? null : avatarAttachmentId"
+				:name="name || 'Room'"
+				size="xl"
+			/>
+			<div class="flex flex-wrap gap-2">
+				<label
+					class="cursor-pointer rounded-lg bg-button-bg px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+					:class="uploading ? 'pointer-events-none opacity-50' : ''"
+				>
+					{{ uploading ? '…' : (avatarAttachmentId || previewUrl ? formatMessage(messages.replace) : formatMessage(messages.upload)) }}
+					<input
+						type="file"
+						class="hidden"
+						accept=".png,.jpg,.jpeg,.webp"
+						@change="selectAvatar"
+					/>
+				</label>
+				<button
+					v-if="previewUrl || (avatarAttachmentId && !remove)"
+					type="button"
+					class="rounded-lg bg-red/20 px-3 py-1.5 text-xs font-semibold text-red hover:brightness-110 disabled:opacity-50"
+					:disabled="uploading"
+					@click="removeAvatar"
+				>
+					{{ formatMessage(messages.remove) }}
+				</button>
+			</div>
+		</div>
+		<p class="m-0 text-[11px] text-secondary">{{ formatMessage(messages.hint) }}</p>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
index 382374a..76162e3 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteAdminView.vue
@@ -6,6 +6,7 @@ import { skinSiteUser } from '@/composables/skin-site-session'
 
 import AdminAccessAuditPage from './admin/AdminAccessAuditPage.vue'
 import AdminBroadcastPage from './admin/AdminBroadcastPage.vue'
+import AdminChatPage from './admin/AdminChatPage.vue'
 import AdminDonationsPage from './admin/AdminDonationsPage.vue'
 import AdminDownloadsPage from './admin/AdminDownloadsPage.vue'
 import AdminLauncherPage from './admin/AdminLauncherPage.vue'
@@ -177,6 +178,7 @@ const current = ref<AdminKey>('summary')
 				<AdminServersPage v-else-if="current === 'servers' && hasWebAdmin" />
 				<AdminAccessAuditPage v-else-if="current === 'access-audit'" />
 				<AdminBroadcastPage v-else-if="current === 'broadcast'" />
+				<AdminChatPage v-else-if="current === 'chat'" />
 				<AdminUsersPage v-else-if="current === 'users'" />
 				<AdminPlayersPage v-else-if="current === 'players'" />
 				<AdminReviewPage v-else-if="current === 'review'" />
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
new file mode 100644
index 0000000..2ba8467
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref } from 'vue'
+
+import {
+	type SkinSiteChatPrerequisiteMode,
+	type SkinSiteChatRoomInfo,
+	type SkinSiteChatRoomVisibility,
+	skinSiteChatRoomAvatarUpdate,
+	skinSiteChatRoomCreate,
+	skinSiteChatRoomDelete,
+	skinSiteChatRoomList,
+	skinSiteChatRoomUpdate,
+} from '@/helpers/skin-site-api'
+
+import RoomAvatar from '../RoomAvatar.vue'
+import RoomAvatarEditor from '../RoomAvatarEditor.vue'
+
+const { formatMessage } = useVIntl()
+const { handleError, addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.chat.admin.title', defaultMessage: 'Chat rooms' },
+	subtitle: {
+		id: 'app.skin-site.chat.admin.subtitle',
+		defaultMessage: 'Create public or private rooms and hand daily moderation to trusted members.',
+	},
+	createRoom: {
+		id: 'app.skin-site.chat.admin.create-room',
+		defaultMessage: 'Create room',
+	},
+	loading: { id: 'app.skin-site.chat.admin.loading', defaultMessage: 'Loading…' },
+	failed: { id: 'app.skin-site.chat.admin.failed', defaultMessage: 'Could not load rooms.' },
+	empty: { id: 'app.skin-site.chat.admin.empty', defaultMessage: 'No chat rooms yet.' },
+	edit: { id: 'app.skin-site.chat.admin.edit', defaultMessage: 'Edit' },
+	remove: { id: 'app.skin-site.chat.admin.remove', defaultMessage: 'Delete' },
+	save: { id: 'app.skin-site.chat.admin.save', defaultMessage: 'Save' },
+	cancel: { id: 'app.skin-site.chat.admin.cancel', defaultMessage: 'Cancel' },
+	name: { id: 'app.skin-site.chat.admin.name', defaultMessage: 'Name' },
+	description: {
+		id: 'app.skin-site.chat.admin.description',
+		defaultMessage: 'Description',
+	},
+	visibility: {
+		id: 'app.skin-site.chat.admin.visibility',
+		defaultMessage: 'Visibility',
+	},
+	visibilityPublic: {
+		id: 'app.skin-site.chat.admin.visibility-public',
+		defaultMessage: 'Public',
+	},
+	visibilityPrivate: {
+		id: 'app.skin-site.chat.admin.visibility-private',
+		defaultMessage: 'Private',
+	},
+	kind: { id: 'app.skin-site.chat.admin.kind', defaultMessage: 'Kind' },
+	kindStandard: {
+		id: 'app.skin-site.chat.admin.kind-standard',
+		defaultMessage: 'Standard',
+	},
+	kindSettlement: {
+		id: 'app.skin-site.chat.admin.kind-settlement',
+		defaultMessage: 'Settlement',
+	},
+	prerequisiteMode: {
+		id: 'app.skin-site.chat.admin.prerequisite-mode',
+		defaultMessage: 'Prerequisite mode',
+	},
+	prerequisiteAny: {
+		id: 'app.skin-site.chat.admin.prerequisite-any',
+		defaultMessage: 'Any',
+	},
+	prerequisiteAll: {
+		id: 'app.skin-site.chat.admin.prerequisite-all',
+		defaultMessage: 'All',
+	},
+	prerequisitePermissions: {
+		id: 'app.skin-site.chat.admin.prerequisite-permissions',
+		defaultMessage: 'Required permissions',
+	},
+	prerequisiteHint: {
+		id: 'app.skin-site.chat.admin.prerequisite-hint',
+		defaultMessage: 'Comma separated. Leave empty for no restriction.',
+	},
+	created: { id: 'app.skin-site.chat.admin.created', defaultMessage: 'Room created.' },
+	updated: { id: 'app.skin-site.chat.admin.updated', defaultMessage: 'Room updated.' },
+	deleted: { id: 'app.skin-site.chat.admin.deleted', defaultMessage: 'Room deleted.' },
+	confirmDelete: {
+		id: 'app.skin-site.chat.admin.confirm-delete',
+		defaultMessage: 'Permanently delete room “{name}” and all its messages?',
+	},
+	managerBadge: {
+		id: 'app.skin-site.chat.admin.manager-badge',
+		defaultMessage: 'Manager',
+	},
+	voiceBadge: {
+		id: 'app.skin-site.chat.admin.voice-badge',
+		defaultMessage: 'Voice',
+	},
+})
+
+type FormState = {
+	name: string
+	description: string
+	visibility: SkinSiteChatRoomVisibility
+	kind: 'STANDARD' | 'SETTLEMENT'
+	prerequisiteMode: SkinSiteChatPrerequisiteMode
+	prerequisitePermissions: string
+}
+
+function emptyForm(): FormState {
+	return {
+		name: '',
+		description: '',
+		visibility: 'PUBLIC',
+		kind: 'STANDARD',
+		prerequisiteMode: 'ANY',
+		prerequisitePermissions: '',
+	}
+}
+
+const rooms = ref<SkinSiteChatRoomInfo[]>([])
+const loading = ref(true)
+const failed = ref(false)
+
+const editorOpen = ref(false)
+const editingRoom = ref<SkinSiteChatRoomInfo | null>(null)
+const form = ref<FormState>(emptyForm())
+const saving = ref(false)
+
+const avatarToken = ref<string | null>(null)
+const avatarRemove = ref(false)
+const avatarUploading = ref(false)
+
+const deletingId = ref<number | null>(null)
+
+const editorTitle = computed(() =>
+	editingRoom.value
+		? formatMessage(messages.edit)
+		: formatMessage(messages.createRoom),
+)
+
+function permissionsToText(list: string[]): string {
+	return list.join(', ')
+}
+
+function textToPermissions(text: string): string[] {
+	return text
+		.split(',')
+		.map((s) => s.trim())
+		.filter(Boolean)
+}
+
+function resetAvatarDraft() {
+	avatarToken.value = null
+	avatarRemove.value = false
+	avatarUploading.value = false
+}
+
+async function loadRooms() {
+	loading.value = true
+	failed.value = false
+	try {
+		const res = await skinSiteChatRoomList()
+		if (!res.success) throw new Error(res.errorMessage)
+		rooms.value = res.payload ?? []
+	} catch (error) {
+		failed.value = true
+		handleError(error)
+	} finally {
+		loading.value = false
+	}
+}
+
+function openCreate() {
+	editingRoom.value = null
+	form.value = emptyForm()
+	resetAvatarDraft()
+	editorOpen.value = true
+}
+
+function openEdit(room: SkinSiteChatRoomInfo) {
+	editingRoom.value = room
+	form.value = {
+		name: room.name,
+		description: room.description ?? '',
+		visibility: room.visibility,
+		kind: room.kind,
+		prerequisiteMode: room.prerequisiteMode,
+		prerequisitePermissions: permissionsToText(room.prerequisitePermissions ?? []),
+	}
+	resetAvatarDraft()
+	editorOpen.value = true
+}
+
+function closeEditor() {
+	editorOpen.value = false
+	editingRoom.value = null
+	resetAvatarDraft()
+}
+
+async function submit() {
+	if (saving.value) return
+	if (!form.value.name.trim()) return
+	saving.value = true
+	const creating = editingRoom.value === null
+	try {
+		const payload = {
+			name: form.value.name.trim(),
+			description: form.value.description.trim(),
+			visibility: form.value.visibility,
+			prerequisiteMode: form.value.prerequisiteMode,
+			prerequisitePermissions: textToPermissions(form.value.prerequisitePermissions),
+		}
+		const res = creating
+			? await skinSiteChatRoomCreate({ ...payload, kind: form.value.kind })
+			: await skinSiteChatRoomUpdate(editingRoom.value!.id, payload)
+		if (!res.success) throw new Error(res.errorMessage)
+
+		if (avatarToken.value || avatarRemove.value) {
+			const avatarRes = await skinSiteChatRoomAvatarUpdate(res.payload.id, {
+				imageToken: avatarToken.value ?? undefined,
+				removeImage: avatarRemove.value,
+			})
+			if (!avatarRes.success) {
+				addNotification({ type: 'error', title: avatarRes.errorMessage })
+				await loadRooms()
+				return
+			}
+		}
+
+		addNotification({
+			type: 'success',
+			title: formatMessage(creating ? messages.created : messages.updated),
+		})
+		closeEditor()
+		await loadRooms()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		saving.value = false
+	}
+}
+
+async function removeRoom(room: SkinSiteChatRoomInfo) {
+	if (deletingId.value !== null) return
+	if (!window.confirm(formatMessage(messages.confirmDelete, { name: room.name }))) return
+	deletingId.value = room.id
+	try {
+		const res = await skinSiteChatRoomDelete(room.id)
+		if (!res.success) throw new Error(res.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.deleted) })
+		await loadRooms()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		deletingId.value = null
+	}
+}
+
+function formatDateTime(ts?: number | null): string {
+	if (!ts) return '—'
+	try {
+		return new Date(ts).toLocaleString()
+	} catch {
+		return '—'
+	}
+}
+
+onMounted(() => void loadRooms())
+</script>
+
+<template>
+	<div class="flex w-full flex-col gap-4">
+		<div class="flex flex-wrap items-end justify-between gap-3">
+			<div>
+				<h2 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+				<p class="m-0 mt-1 max-w-xl text-sm text-secondary">
+					{{ formatMessage(messages.subtitle) }}
+				</p>
+			</div>
+			<button
+				type="button"
+				class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
+				@click="openCreate"
+			>
+				{{ formatMessage(messages.createRoom) }}
+			</button>
+		</div>
+
+		<div
+			v-if="loading"
+			class="flex min-h-48 items-center justify-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 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
+			{{ formatMessage(messages.failed) }}
+		</p>
+		<p
+			v-else-if="!rooms.length"
+			class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
+			{{ formatMessage(messages.empty) }}
+		</p>
+		<div v-else class="grid gap-3 lg:grid-cols-2">
+			<article
+				v-for="room in rooms"
+				:key="room.id"
+				class="flex flex-col gap-3 rounded-xl border border-solid border-surface-5 bg-bg-raised p-4"
+			>
+				<div class="flex items-start gap-3">
+					<RoomAvatar
+						:room-id="room.id"
+						:avatar-attachment-id="room.avatarAttachmentId"
+						:name="room.name"
+						size="lg"
+					/>
+					<div class="min-w-0 flex-1">
+						<div class="flex flex-wrap items-center gap-2">
+							<h3 class="m-0 truncate text-base font-bold text-contrast">{{ room.name }}</h3>
+							<span
+								class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+								:class="
+									room.visibility === 'PUBLIC'
+										? 'bg-brand text-contrast'
+										: 'bg-button-bg text-secondary'
+								"
+							>
+								{{
+									room.visibility === 'PUBLIC'
+										? formatMessage(messages.visibilityPublic)
+										: formatMessage(messages.visibilityPrivate)
+								}}
+							</span>
+							<span
+								v-if="room.kind === 'SETTLEMENT'"
+								class="rounded-full bg-yellow/20 px-2 py-0.5 text-[10px] font-semibold text-yellow"
+							>
+								{{ formatMessage(messages.kindSettlement) }}
+							</span>
+							<span
+								v-if="room.voiceEnabled"
+								class="rounded-full bg-green/20 px-2 py-0.5 text-[10px] font-semibold text-green"
+							>
+								{{ formatMessage(messages.voiceBadge) }}
+							</span>
+						</div>
+						<p
+							v-if="room.description"
+							class="m-0 mt-1 line-clamp-2 text-xs whitespace-pre-wrap text-secondary"
+						>
+							{{ room.description }}
+						</p>
+						<p class="m-0 mt-1 text-[11px] text-secondary">
+							{{ formatDateTime(room.createdAt) }}
+						</p>
+					</div>
+				</div>
+
+				<div class="flex flex-wrap items-center gap-2">
+					<span
+						v-for="perm in room.prerequisitePermissions"
+						:key="perm"
+						class="rounded bg-bg px-2 py-0.5 font-mono text-[10px] text-secondary"
+					>
+						{{ perm }}
+					</span>
+					<button
+						type="button"
+						class="ml-auto rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="openEdit(room)"
+					>
+						{{ formatMessage(messages.edit) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-red/20 px-3 py-1 text-xs font-semibold text-red hover:brightness-110 disabled:opacity-50"
+						:disabled="deletingId === room.id"
+						@click="removeRoom(room)"
+					>
+						{{ formatMessage(messages.remove) }}
+					</button>
+				</div>
+			</article>
+		</div>
+
+		<div
+			v-if="editorOpen"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeEditor"
+		>
+			<div
+				class="flex max-h-[88vh] w-full max-w-lg flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">{{ editorTitle }}</h3>
+
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.name) }}
+					</span>
+					<input
+						v-model="form.name"
+						type="text"
+						maxlength="80"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					/>
+				</label>
+
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-secondary">
+						{{ formatMessage(messages.description) }}
+					</span>
+					<textarea
+						v-model="form.description"
+						rows="3"
+						maxlength="500"
+						class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+					></textarea>
+				</label>
+
+				<div class="grid gap-3 sm:grid-cols-2">
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.visibility) }}
+						</span>
+						<select
+							v-model="form.visibility"
+							class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						>
+							<option value="PUBLIC">{{ formatMessage(messages.visibilityPublic) }}</option>
+							<option value="PRIVATE">{{ formatMessage(messages.visibilityPrivate) }}</option>
+						</select>
+					</label>
+					<label v-if="!editingRoom" class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.kind) }}
+						</span>
+						<select
+							v-model="form.kind"
+							class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						>
+							<option value="STANDARD">{{ formatMessage(messages.kindStandard) }}</option>
+							<option value="SETTLEMENT">{{ formatMessage(messages.kindSettlement) }}</option>
+						</select>
+					</label>
+				</div>
+
+				<RoomAvatarEditor
+					v-model:token="avatarToken"
+					v-model:remove="avatarRemove"
+					v-model:uploading="avatarUploading"
+					:room-id="editingRoom?.id ?? 0"
+					:avatar-attachment-id="editingRoom?.avatarAttachmentId ?? null"
+					:name="form.name"
+				/>
+
+				<div class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 p-3">
+					<div class="flex flex-wrap items-end gap-3">
+						<label class="flex flex-col gap-1">
+							<span class="text-xs font-semibold text-secondary">
+								{{ formatMessage(messages.prerequisiteMode) }}
+							</span>
+							<select
+								v-model="form.prerequisiteMode"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							>
+								<option value="ANY">{{ formatMessage(messages.prerequisiteAny) }}</option>
+								<option value="ALL">{{ formatMessage(messages.prerequisiteAll) }}</option>
+							</select>
+						</label>
+						<label class="flex flex-1 flex-col gap-1">
+							<span class="text-xs font-semibold text-secondary">
+								{{ formatMessage(messages.prerequisitePermissions) }}
+							</span>
+							<input
+								v-model="form.prerequisitePermissions"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+					</div>
+					<p class="m-0 text-[11px] text-secondary">
+						{{ formatMessage(messages.prerequisiteHint) }}
+					</p>
+				</div>
+
+				<div class="flex justify-end gap-2 border-t border-solid border-surface-5 pt-3">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110 disabled:opacity-50"
+						:disabled="saving"
+						@click="closeEditor"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="saving || !form.name.trim() || avatarUploading"
+						@click="submit"
+					>
+						{{ formatMessage(messages.save) }}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/room-avatar-cache.ts b/apps/app-frontend/src/components/ui/skin-site/room-avatar-cache.ts
new file mode 100644
index 0000000..4e0a88c
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/room-avatar-cache.ts
@@ -0,0 +1,30 @@
+import { skinSiteChatRoomAvatarFetch } from '@/helpers/skin-site-api'
+
+const avatarUrls = new Map<number, string>()
+const pending = new Map<number, Promise<string | null>>()
+
+export function loadCachedRoomAvatar(
+	roomId: number,
+	attachmentId: number,
+): Promise<string | null> {
+	const cached = avatarUrls.get(attachmentId)
+	if (cached) return Promise.resolve(cached)
+	const running = pending.get(attachmentId)
+	if (running) return running
+
+	const request = skinSiteChatRoomAvatarFetch(roomId).then((blob) => {
+		pending.delete(attachmentId)
+		if (!blob) return null
+		const url = URL.createObjectURL(blob)
+		avatarUrls.set(attachmentId, url)
+		return url
+	})
+	pending.set(attachmentId, request)
+	return request
+}
+
+export function forgetRoomAvatar(attachmentId: number) {
+	const url = avatarUrls.get(attachmentId)
+	if (url) URL.revokeObjectURL(url)
+	avatarUrls.delete(attachmentId)
+}
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 4f3e1ae..b25843e 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -2071,3 +2071,125 @@ export function skinSiteUpdateMultiModInfo(
 		body: mods,
 	})
 }
+
+// ---------------------------------------------------------------------------
+// Chat
+// ---------------------------------------------------------------------------
+
+export type SkinSiteChatRoomVisibility = 'PUBLIC' | 'PRIVATE'
+export type SkinSiteChatRoomKind = 'STANDARD' | 'SETTLEMENT'
+export type SkinSiteChatPrerequisiteMode = 'ANY' | 'ALL'
+
+export interface SkinSiteChatRoomInfo {
+	id: number
+	name: string
+	description: string
+	visibility: SkinSiteChatRoomVisibility
+	joined: boolean
+	invited: boolean
+	manager: boolean
+	createdAt: number
+	kind: SkinSiteChatRoomKind
+	avatarAttachmentId?: number | null
+	voiceEnabled: boolean
+	voiceAvailable: boolean
+	voiceParticipantCount: number
+	voicePublisherCount: number
+	voicePublisherLimit: number
+	voiceParticipantLimit: number
+	voiceListenerLimit: number
+	prerequisiteMode: SkinSiteChatPrerequisiteMode
+	prerequisitePermissions: string[]
+	prerequisiteEligible: boolean
+}
+
+export interface SkinSiteChatUploadInfo {
+	token: string
+	attachment: {
+		id: number
+		kind: 'IMAGE' | 'FILE'
+		name: string
+		size: number
+	}
+}
+
+export interface SkinSiteChatRoomCreateInput {
+	name: string
+	description: string
+	visibility: SkinSiteChatRoomVisibility
+	kind?: SkinSiteChatRoomKind
+	prerequisiteMode: SkinSiteChatPrerequisiteMode
+	prerequisitePermissions: string[]
+}
+
+export interface SkinSiteChatRoomUpdateInput {
+	name: string
+	description: string
+	visibility: SkinSiteChatRoomVisibility
+	prerequisiteMode: SkinSiteChatPrerequisiteMode
+	prerequisitePermissions: string[]
+}
+
+export function skinSiteChatRoomList(): Promise<SkinSiteResponse<SkinSiteChatRoomInfo[]>> {
+	return skinSiteRequest<SkinSiteChatRoomInfo[]>('chat/admin/rooms')
+}
+
+export function skinSiteChatRoomCreate(
+	data: SkinSiteChatRoomCreateInput,
+): Promise<SkinSiteResponse<SkinSiteChatRoomInfo>> {
+	return skinSiteRequest<SkinSiteChatRoomInfo>('chat/admin/rooms', {
+		method: 'POST',
+		body: data,
+	})
+}
+
+export function skinSiteChatRoomUpdate(
+	id: number,
+	data: SkinSiteChatRoomUpdateInput,
+): Promise<SkinSiteResponse<SkinSiteChatRoomInfo>> {
+	return skinSiteRequest<SkinSiteChatRoomInfo>('chat/rooms/' + id, {
+		method: 'PUT',
+		body: data,
+	})
+}
+
+export function skinSiteChatRoomDelete(id: number): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('chat/admin/rooms/' + id, { method: 'DELETE' })
+}
+
+export function skinSiteChatRoomAvatarUpdate(
+	roomId: number,
+	data: { imageToken?: string; removeImage?: boolean },
+): Promise<SkinSiteResponse<SkinSiteChatRoomInfo>> {
+	return skinSiteRequest<SkinSiteChatRoomInfo>('chat/rooms/' + roomId + '/avatar', {
+		method: 'PUT',
+		body: data,
+	})
+}
+
+export function skinSiteChatAttachmentUpload(
+	file: File,
+): Promise<SkinSiteResponse<SkinSiteChatUploadInfo>> {
+	const form = new FormData()
+	form.append('file', file, file.name)
+	return skinSiteRequest<SkinSiteChatUploadInfo>('chat/attachments', {
+		method: 'POST',
+		form,
+	})
+}
+
+export async function skinSiteChatRoomAvatarFetch(roomId: number): Promise<Blob | null> {
+	const url = `${SKIN_SITE_ORIGIN}${REQUEST_TYPE_PATH.starlight}/chat/rooms/${roomId}/avatar`
+	const headers: Record<string, string> = { Accept: 'image/*' }
+	const token = getSkinSiteToken()
+	if (token) headers['Authorization'] = `Bearer ${token}`
+	try {
+		const response = await tauriFetch(url, { method: 'GET', headers })
+		if (!response.ok) return null
+		const type = response.headers.get('content-type') ?? ''
+		if (type.includes('application/json') || type.includes('text/')) return null
+		return await response.blob()
+	} catch {
+		return null
+	}
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index cc17884..93a09ab 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12249,5 +12249,42 @@
   "app.skin-site.admin.mods.upload-skip": {"message": "Skip"},
   "app.skin-site.admin.mods.upload-close": {"message": "Close"},
   "app.skin-site.admin.mods.upload-all-done": {"message": "All files processed."},
-  "app.skin-site.admin.mods.upload-too-large": {"message": "File too large: {name}"}
+  "app.skin-site.admin.mods.upload-too-large": {"message": "File too large: {name}"},
+  "app.skin-site.chat.avatar.label": {"message": "Room avatar"},
+  "app.skin-site.chat.avatar.upload": {"message": "Upload avatar"},
+  "app.skin-site.chat.avatar.replace": {"message": "Replace avatar"},
+  "app.skin-site.chat.avatar.remove": {"message": "Remove avatar"},
+  "app.skin-site.chat.avatar.hint": {"message": "PNG, JPEG or WebP, up to 8192 px per side and 5 MB."},
+  "app.skin-site.chat.avatar.bad-format": {"message": "Only PNG, JPEG and WebP are supported."},
+  "app.skin-site.chat.avatar.too-large": {"message": "Avatar must not exceed 5 MB."},
+  "app.skin-site.chat.avatar.not-image": {"message": "Avatar must be an image."},
+  "app.skin-site.chat.admin.title": {"message": "Chat rooms"},
+  "app.skin-site.chat.admin.subtitle": {"message": "Create public or private rooms and hand daily moderation to trusted members."},
+  "app.skin-site.chat.admin.create-room": {"message": "Create room"},
+  "app.skin-site.chat.admin.loading": {"message": "Loading…"},
+  "app.skin-site.chat.admin.failed": {"message": "Could not load rooms."},
+  "app.skin-site.chat.admin.empty": {"message": "No chat rooms yet."},
+  "app.skin-site.chat.admin.edit": {"message": "Edit"},
+  "app.skin-site.chat.admin.remove": {"message": "Delete"},
+  "app.skin-site.chat.admin.save": {"message": "Save"},
+  "app.skin-site.chat.admin.cancel": {"message": "Cancel"},
+  "app.skin-site.chat.admin.name": {"message": "Name"},
+  "app.skin-site.chat.admin.description": {"message": "Description"},
+  "app.skin-site.chat.admin.visibility": {"message": "Visibility"},
+  "app.skin-site.chat.admin.visibility-public": {"message": "Public"},
+  "app.skin-site.chat.admin.visibility-private": {"message": "Private"},
+  "app.skin-site.chat.admin.kind": {"message": "Kind"},
+  "app.skin-site.chat.admin.kind-standard": {"message": "Standard"},
+  "app.skin-site.chat.admin.kind-settlement": {"message": "Settlement"},
+  "app.skin-site.chat.admin.prerequisite-mode": {"message": "Prerequisite mode"},
+  "app.skin-site.chat.admin.prerequisite-any": {"message": "Any"},
+  "app.skin-site.chat.admin.prerequisite-all": {"message": "All"},
+  "app.skin-site.chat.admin.prerequisite-permissions": {"message": "Required permissions"},
+  "app.skin-site.chat.admin.prerequisite-hint": {"message": "Comma separated. Leave empty for no restriction."},
+  "app.skin-site.chat.admin.created": {"message": "Room created."},
+  "app.skin-site.chat.admin.updated": {"message": "Room updated."},
+  "app.skin-site.chat.admin.deleted": {"message": "Room deleted."},
+  "app.skin-site.chat.admin.confirm-delete": {"message": "Permanently delete room “{name}” and all its messages?"},
+  "app.skin-site.chat.admin.manager-badge": {"message": "Manager"},
+  "app.skin-site.chat.admin.voice-badge": {"message": "Voice"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 13b7baa..60caae6 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -12080,5 +12080,42 @@
   "app.skin-site.admin.mods.upload-skip": {"message": "跳过"},
   "app.skin-site.admin.mods.upload-close": {"message": "关闭"},
   "app.skin-site.admin.mods.upload-all-done": {"message": "全部文件处理完成。"},
-  "app.skin-site.admin.mods.upload-too-large": {"message": "文件过大：{name}"}
+  "app.skin-site.admin.mods.upload-too-large": {"message": "文件过大：{name}"},
+  "app.skin-site.chat.avatar.label": {"message": "房间头像"},
+  "app.skin-site.chat.avatar.upload": {"message": "上传头像"},
+  "app.skin-site.chat.avatar.replace": {"message": "更换头像"},
+  "app.skin-site.chat.avatar.remove": {"message": "移除头像"},
+  "app.skin-site.chat.avatar.hint": {"message": "支持 PNG、JPEG、WebP，单边不超过 8192 像素，文件不超过 5 MB。"},
+  "app.skin-site.chat.avatar.bad-format": {"message": "房间头像仅支持 PNG、JPEG 和 WebP 格式。"},
+  "app.skin-site.chat.avatar.too-large": {"message": "房间头像大小不能超过 5 MB。"},
+  "app.skin-site.chat.avatar.not-image": {"message": "房间头像必须是图片。"},
+  "app.skin-site.chat.admin.title": {"message": "聊天室管理"},
+  "app.skin-site.chat.admin.subtitle": {"message": "创建公开或私有房间，并将日常管理权限交给合适的成员。"},
+  "app.skin-site.chat.admin.create-room": {"message": "创建房间"},
+  "app.skin-site.chat.admin.loading": {"message": "加载中…"},
+  "app.skin-site.chat.admin.failed": {"message": "无法加载房间列表。"},
+  "app.skin-site.chat.admin.empty": {"message": "还没有聊天室。"},
+  "app.skin-site.chat.admin.edit": {"message": "编辑"},
+  "app.skin-site.chat.admin.remove": {"message": "删除"},
+  "app.skin-site.chat.admin.save": {"message": "保存"},
+  "app.skin-site.chat.admin.cancel": {"message": "取消"},
+  "app.skin-site.chat.admin.name": {"message": "房间名称"},
+  "app.skin-site.chat.admin.description": {"message": "房间简介"},
+  "app.skin-site.chat.admin.visibility": {"message": "可见性"},
+  "app.skin-site.chat.admin.visibility-public": {"message": "公开"},
+  "app.skin-site.chat.admin.visibility-private": {"message": "私有"},
+  "app.skin-site.chat.admin.kind": {"message": "房间类型"},
+  "app.skin-site.chat.admin.kind-standard": {"message": "普通房间"},
+  "app.skin-site.chat.admin.kind-settlement": {"message": "聚落房间"},
+  "app.skin-site.chat.admin.prerequisite-mode": {"message": "前置条件判定"},
+  "app.skin-site.chat.admin.prerequisite-any": {"message": "满足任一"},
+  "app.skin-site.chat.admin.prerequisite-all": {"message": "满足全部"},
+  "app.skin-site.chat.admin.prerequisite-permissions": {"message": "所需权限"},
+  "app.skin-site.chat.admin.prerequisite-hint": {"message": "以逗号分隔；留空表示无限制。"},
+  "app.skin-site.chat.admin.created": {"message": "房间已创建。"},
+  "app.skin-site.chat.admin.updated": {"message": "房间资料已更新。"},
+  "app.skin-site.chat.admin.deleted": {"message": "房间已删除。"},
+  "app.skin-site.chat.admin.confirm-delete": {"message": "确认永久删除房间“{name}”及其中全部消息吗？"},
+  "app.skin-site.chat.admin.manager-badge": {"message": "管理"},
+  "app.skin-site.chat.admin.voice-badge": {"message": "语音"}
 }

From ac38c98203635f3412c021c295f5924f4065f3d3 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 12:20:45 +0800
Subject: [PATCH 13/16] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E5=AE=A4?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E8=A1=A5=E6=88=BF=E7=AE=A1=E4=BB=BB=E5=91=BD?=
 =?UTF-8?q?=E3=80=81=E8=81=9A=E8=90=BD=E4=B8=BB=E4=B8=8E=E5=AE=A1=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 ChatUserPicker 用户选择器：支持按用户名/邮箱/账号 ID 或玩家名称搜索，封禁与游客不可选，支持排除与白名单
- 房管任命与撤销
- 聚落房间可任命聚落主，展示当前聚落主
- 房间审计记录查看，操作类型本地化映射
- 补充对应 API 与类型定义
- i18n 白名单加入 ID 缩写
- 中英文各补 31 个文案
---
 .../ui/skin-site/ChatUserPicker.vue           | 290 ++++++++++++++
 .../ui/skin-site/admin/AdminChatPage.vue      | 358 ++++++++++++++++++
 .../app-frontend/src/helpers/skin-site-api.ts |  59 +++
 .../app-frontend/src/locales/en-US/index.json |  33 +-
 .../app-frontend/src/locales/zh-CN/index.json |  33 +-
 scripts/axolotl/i18n-check.mjs                |   1 +
 6 files changed, 772 insertions(+), 2 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/ChatUserPicker.vue

diff --git a/apps/app-frontend/src/components/ui/skin-site/ChatUserPicker.vue b/apps/app-frontend/src/components/ui/skin-site/ChatUserPicker.vue
new file mode 100644
index 0000000..ad24d06
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/ChatUserPicker.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import { type SkinSiteChatUserInfo, skinSiteChatUserSearch } from '@/helpers/skin-site-api'
+
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+
+const props = withDefaults(
+	defineProps<{
+		roomId?: number
+		label?: string
+		placeholder?: string
+		excludeUuids?: string[]
+		allowedUuids?: string[]
+		allowedHint?: string
+	}>(),
+	{
+		roomId: undefined,
+		label: undefined,
+		placeholder: undefined,
+		excludeUuids: () => [],
+		allowedUuids: undefined,
+		allowedHint: undefined,
+	},
+)
+
+const model = defineModel<SkinSiteChatUserInfo | null>({ required: true })
+
+const messages = defineMessages({
+	label: { id: 'app.skin-site.chat.user-picker.label', defaultMessage: 'Pick a user' },
+	placeholder: {
+		id: 'app.skin-site.chat.user-picker.placeholder',
+		defaultMessage: 'Search username, email or account ID',
+	},
+	byUser: { id: 'app.skin-site.chat.user-picker.by-user', defaultMessage: 'By user' },
+	byPlayer: { id: 'app.skin-site.chat.user-picker.by-player', defaultMessage: 'By player' },
+	hint: {
+		id: 'app.skin-site.chat.user-picker.hint',
+		defaultMessage: 'Fuzzy search on username and email, or search by account ID.',
+	},
+	playerHint: {
+		id: 'app.skin-site.chat.user-picker.player-hint',
+		defaultMessage: 'Enter a player name to find the bound user.',
+	},
+	empty: {
+		id: 'app.skin-site.chat.user-picker.empty',
+		defaultMessage: 'No matching user.',
+	},
+	banned: {
+		id: 'app.skin-site.chat.user-picker.banned',
+		defaultMessage: 'This account is banned.',
+	},
+	guest: {
+		id: 'app.skin-site.chat.user-picker.guest',
+		defaultMessage: 'Guests cannot become a manager or settlement owner.',
+	},
+	alreadyIn: {
+		id: 'app.skin-site.chat.user-picker.already-in',
+		defaultMessage: 'This user is already in the room.',
+	},
+	notAllowed: {
+		id: 'app.skin-site.chat.user-picker.not-allowed',
+		defaultMessage: 'This user is outside the allowed range.',
+	},
+	select: { id: 'app.skin-site.chat.user-picker.select', defaultMessage: 'Select' },
+	selected: {
+		id: 'app.skin-site.chat.user-picker.selected',
+		defaultMessage: 'Selected',
+	},
+	idLabel: { id: 'app.skin-site.chat.user-picker.id', defaultMessage: 'ID' },
+})
+
+const keyword = ref('')
+const searchMode = ref<'user' | 'player'>('user')
+const results = ref<SkinSiteChatUserInfo[]>([])
+const preview = ref<SkinSiteChatUserInfo | null>(null)
+const loading = ref(false)
+
+let timer: ReturnType<typeof setTimeout> | undefined
+let requestId = 0
+
+const currentLabel = computed(() => props.label ?? formatMessage(messages.label))
+const currentPlaceholder = computed(
+	() => props.placeholder ?? formatMessage(messages.placeholder),
+)
+
+watch([keyword, searchMode], () => {
+	clearTimeout(timer)
+	const query = keyword.value.trim()
+	if (!query) {
+		results.value = []
+		preview.value = null
+		loading.value = false
+		return
+	}
+	timer = setTimeout(() => void search(query), 300)
+})
+
+watch(model, (value) => {
+	if (value) return
+	keyword.value = ''
+	preview.value = null
+	results.value = []
+})
+
+watch(
+	() => props.roomId,
+	() => {
+		model.value = null
+	},
+)
+
+onBeforeUnmount(() => clearTimeout(timer))
+
+async function search(query: string) {
+	const current = ++requestId
+	loading.value = true
+	try {
+		const res = await skinSiteChatUserSearch(query, props.roomId, searchMode.value)
+		if (current !== requestId) return
+		if (!res.success) throw new Error(res.errorMessage)
+		results.value = res.payload ?? []
+		preview.value = results.value.length === 1 ? results.value[0] : null
+	} catch (error) {
+		if (current === requestId) {
+			results.value = []
+			handleError(error)
+		}
+	} finally {
+		if (current === requestId) loading.value = false
+	}
+}
+
+function unavailableReason(user: SkinSiteChatUserInfo): string | null {
+	if (user.banned) return formatMessage(messages.banned)
+	if (user.permissions.includes('GUEST')) return formatMessage(messages.guest)
+	if (props.excludeUuids.includes(user.uuid)) return formatMessage(messages.alreadyIn)
+	if (props.allowedUuids && !props.allowedUuids.includes(user.uuid)) {
+		return props.allowedHint ?? formatMessage(messages.notAllowed)
+	}
+	return null
+}
+
+function selectPreview() {
+	if (preview.value && !unavailableReason(preview.value)) {
+		model.value = preview.value
+	}
+}
+
+function formatTime(ts: number): string {
+	try {
+		return new Date(ts).toLocaleString()
+	} catch {
+		return '—'
+	}
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-3">
+		<div class="flex flex-col gap-1.5">
+			<span class="text-xs font-semibold text-secondary">{{ currentLabel }}</span>
+			<div class="flex gap-2">
+				<select
+					v-model="searchMode"
+					class="shrink-0 rounded-lg border border-solid border-surface-5 bg-bg-raised px-2 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+				>
+					<option value="user">{{ formatMessage(messages.byUser) }}</option>
+					<option value="player">{{ formatMessage(messages.byPlayer) }}</option>
+				</select>
+				<input
+					v-model.trim="keyword"
+					type="text"
+					maxlength="100"
+					:placeholder="searchMode === 'player' ? formatMessage(messages.playerHint) : currentPlaceholder"
+					class="min-w-0 flex-1 rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+					autocomplete="off"
+				/>
+			</div>
+			<span class="text-[11px] text-secondary">
+				{{ searchMode === 'player' ? formatMessage(messages.playerHint) : formatMessage(messages.hint) }}
+			</span>
+		</div>
+
+		<div
+			v-if="keyword && !loading"
+			class="flex max-h-56 flex-col gap-1.5 overflow-y-auto rounded-lg border border-solid border-surface-5 bg-bg-raised p-2"
+		>
+			<button
+				v-for="user in results"
+				:key="user.uuid"
+				type="button"
+				class="flex w-full items-center justify-between gap-3 rounded-lg border border-solid p-2 text-left transition-colors"
+				:class="
+					preview?.uuid === user.uuid
+						? 'border-brand bg-brand/10'
+						: 'border-transparent bg-bg hover:border-surface-5'
+				"
+				@click="preview = user"
+			>
+				<span class="flex min-w-0 items-center gap-2">
+					<span class="grid size-8 shrink-0 place-items-center rounded-lg bg-brand/15 text-xs font-bold text-brand">
+						{{ user.username.slice(0, 1).toUpperCase() }}
+					</span>
+					<span class="min-w-0">
+						<strong class="block truncate text-xs text-contrast">{{ user.username }}</strong>
+						<span class="block truncate text-[10px] text-secondary">
+							{{ formatMessage(messages.idLabel) }} {{ user.id }} · {{ user.email }}
+						</span>
+					</span>
+				</span>
+				<span
+					v-if="unavailableReason(user)"
+					class="shrink-0 rounded-full bg-red/20 px-2 py-0.5 text-[10px] font-semibold text-red"
+				>
+					{{ unavailableReason(user) }}
+				</span>
+				<span
+					v-else-if="model?.uuid === user.uuid"
+					class="shrink-0 rounded-full bg-brand px-2 py-0.5 text-[10px] font-semibold text-contrast"
+				>
+					{{ formatMessage(messages.selected) }}
+				</span>
+			</button>
+			<p v-if="!results.length" class="m-0 py-4 text-center text-xs text-secondary">
+				{{ formatMessage(messages.empty) }}
+			</p>
+		</div>
+
+		<section
+			v-if="preview"
+			class="flex flex-col gap-3 rounded-lg border border-solid border-surface-5 bg-bg-raised p-3"
+		>
+			<div class="flex items-start justify-between gap-3">
+				<div>
+					<h3 class="m-0 text-sm font-bold text-contrast">{{ preview.username }}</h3>
+					<p class="m-0 text-[11px] text-secondary">
+						{{ formatMessage(messages.idLabel) }} {{ preview.id }}
+					</p>
+				</div>
+				<span
+					class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+					:class="preview.banned ? 'bg-red text-contrast' : 'bg-green text-contrast'"
+				>
+					{{ preview.banned ? 'Banned' : 'OK' }}
+				</span>
+			</div>
+			<div class="grid gap-2 text-[11px] sm:grid-cols-2">
+				<div class="min-w-0">
+					<span class="block text-secondary">UUID</span>
+					<span class="block break-all font-mono text-contrast">{{ preview.uuid }}</span>
+				</div>
+				<div>
+					<span class="block text-secondary">Email</span>
+					<span class="block break-all text-contrast">{{ preview.email }}</span>
+				</div>
+				<div>
+					<span class="block text-secondary">QQ</span>
+					<span class="block text-contrast">{{ preview.qq ?? '—' }}</span>
+				</div>
+				<div>
+					<span class="block text-secondary">Registered</span>
+					<span class="block text-contrast">{{ formatTime(preview.registerTime) }}</span>
+				</div>
+			</div>
+			<div class="flex flex-wrap gap-1.5">
+				<span
+					v-for="perm in preview.permissions"
+					:key="perm"
+					class="rounded bg-bg px-2 py-0.5 font-mono text-[10px] text-secondary"
+				>
+					{{ perm }}
+				</span>
+			</div>
+			<p v-if="unavailableReason(preview)" class="m-0 text-[11px] text-red">
+				{{ unavailableReason(preview) }}
+			</p>
+			<button
+				type="button"
+				class="w-full rounded-lg bg-brand px-3 py-2 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+				:disabled="Boolean(unavailableReason(preview))"
+				@click="selectPreview"
+			>
+				{{ model?.uuid === preview.uuid ? formatMessage(messages.selected) : formatMessage(messages.select) }}
+			</button>
+		</section>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
index 2ba8467..3293c2e 100644
--- a/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
@@ -12,8 +12,15 @@ import {
 	skinSiteChatRoomDelete,
 	skinSiteChatRoomList,
 	skinSiteChatRoomUpdate,
+	skinSiteChatAuditList,
+	skinSiteChatManagerSet,
+	skinSiteChatSettlementOwnerAssign,
+	type SkinSiteChatAuditInfo,
+	type SkinSiteChatUserInfo,
 } from '@/helpers/skin-site-api'
 
+import ChatUserPicker from '../ChatUserPicker.vue'
+
 import RoomAvatar from '../RoomAvatar.vue'
 import RoomAvatarEditor from '../RoomAvatarEditor.vue'
 
@@ -98,6 +105,59 @@ const messages = defineMessages({
 		id: 'app.skin-site.chat.admin.voice-badge',
 		defaultMessage: 'Voice',
 	},
+	managers: { id: 'app.skin-site.chat.admin.managers', defaultMessage: 'Managers' },
+	managerTitle: {
+		id: 'app.skin-site.chat.admin.manager-title',
+		defaultMessage: 'Room manager',
+	},
+	managerHint: {
+		id: 'app.skin-site.chat.admin.manager-hint',
+		defaultMessage: 'Managers can moderate members, messages and files in this room.',
+	},
+	grant: { id: 'app.skin-site.chat.admin.grant', defaultMessage: 'Grant' },
+	revoke: { id: 'app.skin-site.chat.admin.revoke', defaultMessage: 'Revoke' },
+	managerGranted: {
+		id: 'app.skin-site.chat.admin.manager-granted',
+		defaultMessage: 'Manager granted.',
+	},
+	managerRevoked: {
+		id: 'app.skin-site.chat.admin.manager-revoked',
+		defaultMessage: 'Manager revoked.',
+	},
+	ownerTitle: {
+		id: 'app.skin-site.chat.admin.owner-title',
+		defaultMessage: 'Settlement owner',
+	},
+	ownerHint: {
+		id: 'app.skin-site.chat.admin.owner-hint',
+		defaultMessage: 'Assign the first settlement owner for this room.',
+	},
+	ownerAssigned: {
+		id: 'app.skin-site.chat.admin.owner-assigned',
+		defaultMessage: 'Settlement owner assigned.',
+	},
+	ownerCurrent: {
+		id: 'app.skin-site.chat.admin.owner-current',
+		defaultMessage: 'Current owner: {name}',
+	},
+	ownerNone: {
+		id: 'app.skin-site.chat.admin.owner-none',
+		defaultMessage: 'No settlement owner yet.',
+	},
+	audit: { id: 'app.skin-site.chat.admin.audit', defaultMessage: 'Audit' },
+	auditTitle: {
+		id: 'app.skin-site.chat.admin.audit-title',
+		defaultMessage: 'Room audit',
+	},
+	auditEmpty: {
+		id: 'app.skin-site.chat.admin.audit-empty',
+		defaultMessage: 'No audit records yet.',
+	},
+	auditTarget: {
+		id: 'app.skin-site.chat.admin.audit-target',
+		defaultMessage: 'Target: {name}',
+	},
+	close: { id: 'app.skin-site.chat.admin.close', defaultMessage: 'Close' },
 })
 
 type FormState = {
@@ -268,6 +328,138 @@ function formatDateTime(ts?: number | null): string {
 	}
 }
 
+const managerRoom = ref<SkinSiteChatRoomInfo | null>(null)
+const managerUser = ref<SkinSiteChatUserInfo | null>(null)
+const managerGranting = ref(false)
+
+const ownerRoom = ref<SkinSiteChatRoomInfo | null>(null)
+const ownerUser = ref<SkinSiteChatUserInfo | null>(null)
+const ownerSaving = ref(false)
+
+const auditRoom = ref<SkinSiteChatRoomInfo | null>(null)
+const auditItems = ref<SkinSiteChatAuditInfo[]>([])
+const auditLoading = ref(false)
+
+const AUDIT_LABELS: Record<string, string> = {
+	ROOM_CREATED: '创建房间',
+	ROOM_UPDATED: '修改房间资料',
+	ROOM_AVATAR_UPDATED: '更新房间头像',
+	ROOM_AVATAR_CLEARED: '移除房间头像',
+	MEMBER_JOINED: '成员加入房间',
+	MEMBER_LEFT: '成员退出房间',
+	MEMBER_INVITED: '邀请成员',
+	MEMBER_REMOVED: '踢出成员',
+	MEMBER_BANNED: '踢出并拉黑',
+	MEMBER_UNBANNED: '解除成员封禁',
+	MEMBER_MUTED: '禁言成员',
+	MEMBER_UNMUTED: '解除成员禁言',
+	MANAGER_ADDED: '任命房间管理',
+	MANAGER_REMOVED: '撤销房间管理',
+	BOT_ADDED: '添加机器人',
+	BOT_REMOVED: '移除机器人',
+	MESSAGE_DELETED: '撤回消息',
+	MESSAGE_RECALLED: '撤回消息',
+	MESSAGE_PINNED: '设为精华',
+	MESSAGE_UNPINNED: '取消精华',
+	ANNOUNCEMENT_UPDATED: '更新房间公告',
+	ANNOUNCEMENT_CLEARED: '清空房间公告',
+	FILE_DELETED: '删除房间文件',
+	VOICE_ROOM_UPDATED: '修改房间语音设置',
+	VOICE_CAPACITY_UPDATED: '修改房间语音容量',
+	VOICE_MEMBER_KICKED: '断开成员语音',
+	VOICE_MEMBER_BANNED: '临时封禁成员语音',
+	VOICE_MEMBER_UNBANNED: '解除成员语音封禁',
+	VOICE_SPEAKER_REVOKED: '关闭成员麦克风',
+	VOICE_OBSERVER_JOINED: 'Web管理开始旁听语音',
+	VOICE_OBSERVER_LEFT: 'Web管理结束旁听语音',
+	SETTLEMENT_OWNER_ASSIGNED: '任命聚落主',
+	SETTLEMENT_OWNER_TRANSFERRED: '转让聚落',
+	SETTLEMENT_MANAGER_ADDED: '任命聚落管理',
+	SETTLEMENT_MANAGER_REMOVED: '撤销聚落管理',
+}
+
+function auditLabel(action: string): string {
+	return AUDIT_LABELS[action] ?? action
+}
+
+function auditActor(name?: string): string {
+	return name?.trim() || '已删除用户'
+}
+
+function openManager(room: SkinSiteChatRoomInfo) {
+	managerRoom.value = room
+	managerUser.value = null
+}
+
+function closeManager() {
+	managerRoom.value = null
+	managerUser.value = null
+}
+
+async function grantManager(manager: boolean) {
+	if (!managerRoom.value || !managerUser.value || managerGranting.value) return
+	managerGranting.value = true
+	try {
+		const res = await skinSiteChatManagerSet(managerRoom.value.id, managerUser.value.uuid, manager)
+		if (!res.success) throw new Error(res.errorMessage)
+		addNotification({
+			type: 'success',
+			title: formatMessage(manager ? messages.managerGranted : messages.managerRevoked),
+		})
+		closeManager()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		managerGranting.value = false
+	}
+}
+
+function openOwner(room: SkinSiteChatRoomInfo) {
+	ownerRoom.value = room
+	ownerUser.value = null
+}
+
+function closeOwner() {
+	ownerRoom.value = null
+	ownerUser.value = null
+}
+
+async function assignOwner() {
+	if (!ownerRoom.value || !ownerUser.value || ownerSaving.value) return
+	ownerSaving.value = true
+	try {
+		const res = await skinSiteChatSettlementOwnerAssign(ownerRoom.value.id, ownerUser.value.uuid)
+		if (!res.success) throw new Error(res.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.ownerAssigned) })
+		closeOwner()
+		await loadRooms()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		ownerSaving.value = false
+	}
+}
+
+async function openAudit(room: SkinSiteChatRoomInfo) {
+	auditRoom.value = room
+	auditItems.value = []
+	auditLoading.value = true
+	try {
+		const res = await skinSiteChatAuditList(room.id)
+		if (!res.success) throw new Error(res.errorMessage)
+		auditItems.value = res.payload ?? []
+	} catch (error) {
+		handleError(error)
+	} finally {
+		auditLoading.value = false
+	}
+}
+
+function closeAudit() {
+	auditRoom.value = null
+	auditItems.value = []
+}
+
 onMounted(() => void loadRooms())
 </script>
 
@@ -371,6 +563,28 @@ onMounted(() => void loadRooms())
 					>
 						{{ perm }}
 					</span>
+					<button
+						v-if="room.kind === 'SETTLEMENT'"
+						type="button"
+						class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="openOwner(room)"
+					>
+						{{ formatMessage(messages.ownerTitle) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="openManager(room)"
+					>
+						{{ formatMessage(messages.managers) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="openAudit(room)"
+					>
+						{{ formatMessage(messages.audit) }}
+					</button>
 					<button
 						type="button"
 						class="ml-auto rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
@@ -510,5 +724,149 @@ onMounted(() => void loadRooms())
 				</div>
 			</div>
 		</div>
+
+		<div
+			v-if="managerRoom"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeManager"
+		>
+			<div
+				class="flex max-h-[88vh] w-full max-w-lg flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.managerTitle) }} · {{ managerRoom.name }}
+				</h3>
+				<p class="m-0 text-xs text-secondary">{{ formatMessage(messages.managerHint) }}</p>
+				<ChatUserPicker
+					v-model="managerUser"
+					:room-id="managerRoom.id"
+					:label="formatMessage(messages.managerTitle)"
+				/>
+				<div class="flex justify-end gap-2 border-t border-solid border-surface-5 pt-3">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closeManager"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-red/20 px-4 py-2 text-sm font-semibold text-red hover:brightness-110 disabled:opacity-50"
+						:disabled="!managerUser || managerGranting"
+						@click="grantManager(false)"
+					>
+						{{ formatMessage(messages.revoke) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="!managerUser || managerGranting"
+						@click="grantManager(true)"
+					>
+						{{ formatMessage(messages.grant) }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<div
+			v-if="ownerRoom"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeOwner"
+		>
+			<div
+				class="flex max-h-[88vh] w-full max-w-lg flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.ownerTitle) }} · {{ ownerRoom.name }}
+				</h3>
+				<p class="m-0 text-xs text-secondary">{{ formatMessage(messages.ownerHint) }}</p>
+				<p class="m-0 text-xs text-secondary">
+					{{
+						ownerRoom.settlementOwnerName
+							? formatMessage(messages.ownerCurrent, { name: ownerRoom.settlementOwnerName })
+							: formatMessage(messages.ownerNone)
+					}}
+				</p>
+				<ChatUserPicker
+					v-model="ownerUser"
+					:room-id="ownerRoom.id"
+					:label="formatMessage(messages.ownerTitle)"
+				/>
+				<div class="flex justify-end gap-2 border-t border-solid border-surface-5 pt-3">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closeOwner"
+					>
+						{{ formatMessage(messages.cancel) }}
+					</button>
+					<button
+						type="button"
+						class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+						:disabled="!ownerUser || ownerSaving"
+						@click="assignOwner"
+					>
+						{{ formatMessage(messages.save) }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<div
+			v-if="auditRoom"
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+			@click.self="closeAudit"
+		>
+			<div
+				class="flex max-h-[88vh] w-full max-w-2xl flex-col gap-3 overflow-y-auto rounded-xl bg-bg p-6"
+			>
+				<h3 class="m-0 text-lg font-bold text-contrast">
+					{{ formatMessage(messages.auditTitle) }} · {{ auditRoom.name }}
+				</h3>
+				<div
+					v-if="auditLoading"
+					class="flex min-h-32 items-center justify-center gap-2 text-sm text-secondary"
+				>
+					<SpinnerIcon class="size-4 animate-spin" />
+					{{ formatMessage(messages.loading) }}
+				</div>
+				<p
+					v-else-if="!auditItems.length"
+					class="m-0 rounded-lg bg-bg-raised p-3 text-xs text-secondary"
+				>
+					{{ formatMessage(messages.auditEmpty) }}
+				</p>
+				<div v-else class="flex flex-col gap-1.5">
+					<div
+						v-for="entry in auditItems"
+						:key="entry.id"
+						class="flex flex-wrap items-center gap-2 rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2"
+					>
+						<span class="text-xs font-semibold text-contrast">{{ auditLabel(entry.action) }}</span>
+						<span class="text-[11px] text-secondary">{{ auditActor(entry.actorName) }}</span>
+						<span
+							v-if="entry.target"
+							class="text-[11px] text-secondary"
+						>
+							{{ formatMessage(messages.auditTarget, { name: entry.target }) }}
+						</span>
+						<span class="ml-auto text-[10px] text-secondary">
+							{{ formatDateTime(entry.createdAt) }}
+						</span>
+					</div>
+				</div>
+				<div class="flex justify-end border-t border-solid border-surface-5 pt-3">
+					<button
+						type="button"
+						class="rounded-lg bg-button-bg px-4 py-2 text-sm font-semibold text-secondary hover:brightness-110"
+						@click="closeAudit"
+					>
+						{{ formatMessage(messages.close) }}
+					</button>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index b25843e..0464a58 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -2193,3 +2193,62 @@ export async function skinSiteChatRoomAvatarFetch(roomId: number): Promise<Blob
 		return null
 	}
 }
+
+export interface SkinSiteChatUserInfo {
+	uuid: string
+	id: number
+	username: string
+	avatar?: string | null
+	email: string
+	qq?: number | null
+	permissions: string[]
+	banned: boolean
+	registerTime: number
+}
+
+export interface SkinSiteChatAuditInfo {
+	id: number
+	actorUuid: string
+	actorName?: string
+	action: string
+	target?: string | null
+	createdAt: number
+}
+
+export function skinSiteChatUserSearch(
+	keyword: string,
+	roomId?: number,
+	searchBy: 'user' | 'player' = 'user',
+): Promise<SkinSiteResponse<SkinSiteChatUserInfo[]>> {
+	const query = new URLSearchParams({ keyword })
+	if (roomId !== undefined) query.set('room_id', String(roomId))
+	if (searchBy === 'player') query.set('search_by', 'player')
+	return skinSiteRequest<SkinSiteChatUserInfo[]>('chat/users/search?' + query.toString())
+}
+
+export function skinSiteChatManagerSet(
+	roomId: number,
+	userUuid: string,
+	manager: boolean,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('chat/admin/rooms/' + roomId + '/manager', {
+		method: 'POST',
+		body: { userUuid, manager },
+	})
+}
+
+export function skinSiteChatSettlementOwnerAssign(
+	roomId: number,
+	userUuid: string,
+): Promise<SkinSiteResponse<string>> {
+	return skinSiteRequest<string>('chat/settlements/' + roomId + '/owner', {
+		method: 'POST',
+		body: { userUuid },
+	})
+}
+
+export function skinSiteChatAuditList(
+	roomId: number,
+): Promise<SkinSiteResponse<SkinSiteChatAuditInfo[]>> {
+	return skinSiteRequest<SkinSiteChatAuditInfo[]>('chat/rooms/' + roomId + '/audit')
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 93a09ab..a485699 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12286,5 +12286,36 @@
   "app.skin-site.chat.admin.deleted": {"message": "Room deleted."},
   "app.skin-site.chat.admin.confirm-delete": {"message": "Permanently delete room “{name}” and all its messages?"},
   "app.skin-site.chat.admin.manager-badge": {"message": "Manager"},
-  "app.skin-site.chat.admin.voice-badge": {"message": "Voice"}
+  "app.skin-site.chat.admin.voice-badge": {"message": "Voice"},
+  "app.skin-site.chat.user-picker.label": {"message": "Pick a user"},
+  "app.skin-site.chat.user-picker.placeholder": {"message": "Search username, email or account ID"},
+  "app.skin-site.chat.user-picker.by-user": {"message": "By user"},
+  "app.skin-site.chat.user-picker.by-player": {"message": "By player"},
+  "app.skin-site.chat.user-picker.hint": {"message": "Fuzzy search on username and email, or search by account ID."},
+  "app.skin-site.chat.user-picker.player-hint": {"message": "Enter a player name to find the bound user."},
+  "app.skin-site.chat.user-picker.empty": {"message": "No matching user."},
+  "app.skin-site.chat.user-picker.banned": {"message": "This account is banned."},
+  "app.skin-site.chat.user-picker.guest": {"message": "Guests cannot become a manager or settlement owner."},
+  "app.skin-site.chat.user-picker.already-in": {"message": "This user is already in the room."},
+  "app.skin-site.chat.user-picker.not-allowed": {"message": "This user is outside the allowed range."},
+  "app.skin-site.chat.user-picker.select": {"message": "Select"},
+  "app.skin-site.chat.user-picker.selected": {"message": "Selected"},
+  "app.skin-site.chat.user-picker.id": {"message": "ID"},
+  "app.skin-site.chat.admin.managers": {"message": "Managers"},
+  "app.skin-site.chat.admin.manager-title": {"message": "Room manager"},
+  "app.skin-site.chat.admin.manager-hint": {"message": "Managers can moderate members, messages and files in this room."},
+  "app.skin-site.chat.admin.grant": {"message": "Grant"},
+  "app.skin-site.chat.admin.revoke": {"message": "Revoke"},
+  "app.skin-site.chat.admin.manager-granted": {"message": "Manager granted."},
+  "app.skin-site.chat.admin.manager-revoked": {"message": "Manager revoked."},
+  "app.skin-site.chat.admin.owner-title": {"message": "Settlement owner"},
+  "app.skin-site.chat.admin.owner-hint": {"message": "Assign the first settlement owner for this room."},
+  "app.skin-site.chat.admin.owner-assigned": {"message": "Settlement owner assigned."},
+  "app.skin-site.chat.admin.owner-current": {"message": "Current owner: {name}"},
+  "app.skin-site.chat.admin.owner-none": {"message": "No settlement owner yet."},
+  "app.skin-site.chat.admin.audit": {"message": "Audit"},
+  "app.skin-site.chat.admin.audit-title": {"message": "Room audit"},
+  "app.skin-site.chat.admin.audit-empty": {"message": "No audit records yet."},
+  "app.skin-site.chat.admin.audit-target": {"message": "Target: {name}"},
+  "app.skin-site.chat.admin.close": {"message": "Close"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 60caae6..4af0739 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -12117,5 +12117,36 @@
   "app.skin-site.chat.admin.deleted": {"message": "房间已删除。"},
   "app.skin-site.chat.admin.confirm-delete": {"message": "确认永久删除房间“{name}”及其中全部消息吗？"},
   "app.skin-site.chat.admin.manager-badge": {"message": "管理"},
-  "app.skin-site.chat.admin.voice-badge": {"message": "语音"}
+  "app.skin-site.chat.admin.voice-badge": {"message": "语音"},
+  "app.skin-site.chat.user-picker.label": {"message": "选择用户"},
+  "app.skin-site.chat.user-picker.placeholder": {"message": "搜索用户名、邮箱或账号 ID"},
+  "app.skin-site.chat.user-picker.by-user": {"message": "按用户信息"},
+  "app.skin-site.chat.user-picker.by-player": {"message": "按玩家 ID"},
+  "app.skin-site.chat.user-picker.hint": {"message": "支持按用户名、邮箱模糊搜索，也可输入账号 ID 搜索。"},
+  "app.skin-site.chat.user-picker.player-hint": {"message": "输入玩家名称，查找绑定该玩家 ID 的用户。"},
+  "app.skin-site.chat.user-picker.empty": {"message": "没有找到匹配的用户"},
+  "app.skin-site.chat.user-picker.banned": {"message": "该账号已被封禁，不能执行此操作。"},
+  "app.skin-site.chat.user-picker.guest": {"message": "游客不能成为房管、聚落主或聚落成员。"},
+  "app.skin-site.chat.user-picker.already-in": {"message": "该用户已经在当前房间中。"},
+  "app.skin-site.chat.user-picker.not-allowed": {"message": "该用户不在当前允许选择的范围内"},
+  "app.skin-site.chat.user-picker.select": {"message": "选择此用户"},
+  "app.skin-site.chat.user-picker.selected": {"message": "已选择此用户"},
+  "app.skin-site.chat.user-picker.id": {"message": "ID"},
+  "app.skin-site.chat.admin.managers": {"message": "房管"},
+  "app.skin-site.chat.admin.manager-title": {"message": "任命房管"},
+  "app.skin-site.chat.admin.manager-hint": {"message": "房管可以管理该房间的成员、消息与文件。"},
+  "app.skin-site.chat.admin.grant": {"message": "任命"},
+  "app.skin-site.chat.admin.revoke": {"message": "撤销"},
+  "app.skin-site.chat.admin.manager-granted": {"message": "已任命房管。"},
+  "app.skin-site.chat.admin.manager-revoked": {"message": "已撤销房管。"},
+  "app.skin-site.chat.admin.owner-title": {"message": "聚落主"},
+  "app.skin-site.chat.admin.owner-hint": {"message": "为该房间任命首任聚落主。"},
+  "app.skin-site.chat.admin.owner-assigned": {"message": "已任命聚落主。"},
+  "app.skin-site.chat.admin.owner-current": {"message": "当前聚落主：{name}"},
+  "app.skin-site.chat.admin.owner-none": {"message": "尚未设置聚落主。"},
+  "app.skin-site.chat.admin.audit": {"message": "审计"},
+  "app.skin-site.chat.admin.audit-title": {"message": "房间审计"},
+  "app.skin-site.chat.admin.audit-empty": {"message": "暂无审计记录。"},
+  "app.skin-site.chat.admin.audit-target": {"message": "对象：{name}"},
+  "app.skin-site.chat.admin.close": {"message": "关闭"}
 }
diff --git a/scripts/axolotl/i18n-check.mjs b/scripts/axolotl/i18n-check.mjs
index 1482e1e..1f52425 100644
--- a/scripts/axolotl/i18n-check.mjs
+++ b/scripts/axolotl/i18n-check.mjs
@@ -31,6 +31,7 @@ const allowedUntranslatedMessages = new Set([
 	'LiteLoader',
 	'LogShare.CN',
 	'UUID',
+	'ID',
 	'QQ',
 	'IP',
 	'URL',

From 667c1a09001539e87a8b20fdb6f2ecc46992719e Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 12:29:45 +0800
Subject: [PATCH 14/16] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E5=AE=A4?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=8E=A5=E5=85=A5=E5=AE=9E=E6=97=B6=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3=E5=AD=90=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶部展示语音运行时状态：状态标签、LiveKit 版本、下载进度，未就绪时每 5 秒轮询
- 部署失败或不支持平台时提供重新部署入口
- 语音库配置弹窗：启用开关、目录、镜像地址、公网地址、监听地址、信令与媒体端口、启动超时、外部 IP 与节点 IP
- 语音日志弹窗：增量拉取、自动刷新开关、手动刷新、最多保留 2000 条
- 房间语音容量设置：参与人数与旁听人数上限
- 补充语音相关 API 与类型定义
- 中英文各补 26 个文案
---
 .../ui/skin-site/admin/AdminChatPage.vue      | 384 +++++++++++++++++-
 .../app-frontend/src/helpers/skin-site-api.ts | 115 ++++++
 .../app-frontend/src/locales/en-US/index.json |  54 ++-
 .../app-frontend/src/locales/zh-CN/index.json |  54 ++-
 4 files changed, 603 insertions(+), 4 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
index 3293c2e..07ca04b 100644
--- a/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminChatPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SpinnerIcon } from '@modrinth/assets'
 import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 
 import {
 	type SkinSiteChatPrerequisiteMode,
@@ -17,6 +17,15 @@ import {
 	skinSiteChatSettlementOwnerAssign,
 	type SkinSiteChatAuditInfo,
 	type SkinSiteChatUserInfo,
+	skinSiteChatVoiceCapacityUpdate,
+	skinSiteChatVoiceConfig,
+	skinSiteChatVoiceConfigUpdate,
+	skinSiteChatVoiceLogs,
+	skinSiteChatVoiceRuntime,
+	skinSiteChatVoiceRuntimeRetry,
+	type SkinSiteChatVoiceGlobalConfig,
+	type SkinSiteChatVoiceLogEntry,
+	type SkinSiteChatVoiceRuntimeInfo,
 } from '@/helpers/skin-site-api'
 
 import ChatUserPicker from '../ChatUserPicker.vue'
@@ -158,6 +167,110 @@ const messages = defineMessages({
 		defaultMessage: 'Target: {name}',
 	},
 	close: { id: 'app.skin-site.chat.admin.close', defaultMessage: 'Close' },
+	voiceRuntimeTitle: {
+		id: 'app.skin-site.chat.admin.voice-runtime-title',
+		defaultMessage: 'Realtime voice runtime',
+	},
+	voiceLogs: {
+		id: 'app.skin-site.chat.admin.voice-logs',
+		defaultMessage: 'View logs',
+	},
+	voiceConfig: {
+		id: 'app.skin-site.chat.admin.voice-config',
+		defaultMessage: 'Configure runtime',
+	},
+	voiceRetry: {
+		id: 'app.skin-site.chat.admin.voice-retry',
+		defaultMessage: 'Retry deployment',
+	},
+	voiceConfigTitle: {
+		id: 'app.skin-site.chat.admin.voice-config-title',
+		defaultMessage: 'Voice runtime configuration',
+	},
+	voiceLogsTitle: {
+		id: 'app.skin-site.chat.admin.voice-logs-title',
+		defaultMessage: 'LiveKit logs',
+	},
+	voiceCapacityTitle: {
+		id: 'app.skin-site.chat.admin.voice-capacity-title',
+		defaultMessage: 'Voice capacity',
+	},
+	voiceCapacity: {
+		id: 'app.skin-site.chat.admin.voice-capacity',
+		defaultMessage: 'Voice capacity',
+	},
+	participantLimit: {
+		id: 'app.skin-site.chat.admin.participant-limit',
+		defaultMessage: 'Participant limit',
+	},
+	listenerLimit: {
+		id: 'app.skin-site.chat.admin.listener-limit',
+		defaultMessage: 'Listener limit',
+	},
+	voiceCapacityUpdated: {
+		id: 'app.skin-site.chat.admin.voice-capacity-updated',
+		defaultMessage: 'Voice capacity updated.',
+	},
+	voiceEnabled: {
+		id: 'app.skin-site.chat.admin.voice-enabled',
+		defaultMessage: 'Enable realtime voice',
+	},
+	voiceRuntimePath: {
+		id: 'app.skin-site.chat.admin.voice-runtime-path',
+		defaultMessage: 'Runtime directory',
+	},
+	voiceMirror: {
+		id: 'app.skin-site.chat.admin.voice-mirror',
+		defaultMessage: 'Mirror base URL',
+	},
+	voicePublicUrl: {
+		id: 'app.skin-site.chat.admin.voice-public-url',
+		defaultMessage: 'Public URL',
+	},
+	voiceBind: {
+		id: 'app.skin-site.chat.admin.voice-bind',
+		defaultMessage: 'Bind address',
+	},
+	voiceSignalPort: {
+		id: 'app.skin-site.chat.admin.voice-signal-port',
+		defaultMessage: 'Signal port',
+	},
+	voiceRtcTcpPort: {
+		id: 'app.skin-site.chat.admin.voice-rtc-tcp-port',
+		defaultMessage: 'Media TCP port',
+	},
+	voiceRtcUdpPort: {
+		id: 'app.skin-site.chat.admin.voice-rtc-udp-port',
+		defaultMessage: 'Media UDP port',
+	},
+	voiceStartupTimeout: {
+		id: 'app.skin-site.chat.admin.voice-startup-timeout',
+		defaultMessage: 'Startup timeout (s)',
+	},
+	voiceUseExternalIp: {
+		id: 'app.skin-site.chat.admin.voice-use-external-ip',
+		defaultMessage: 'Use external IP',
+	},
+	voiceNodeIp: {
+		id: 'app.skin-site.chat.admin.voice-node-ip',
+		defaultMessage: 'Node IP',
+	},
+	voiceSaved: {
+		id: 'app.skin-site.chat.admin.voice-saved',
+		defaultMessage: 'Voice configuration saved.',
+	},
+	voiceLogsAutoRefresh: {
+		id: 'app.skin-site.chat.admin.voice-logs-auto-refresh',
+		defaultMessage: 'Auto refresh',
+	},
+	voiceLogsRefresh: {
+		id: 'app.skin-site.chat.admin.voice-logs-refresh',
+		defaultMessage: 'Refresh',
+	},
+	voiceLogsEmpty: {
+		id: 'app.skin-site.chat.admin.voice-logs-empty',
+		defaultMessage: 'No logs yet.',
+	},
 })
 
 type FormState = {
@@ -460,7 +573,217 @@ function closeAudit() {
 	auditItems.value = []
 }
 
-onMounted(() => void loadRooms())
+// ---------- voice runtime ----------
+const voiceRuntime = ref<SkinSiteChatVoiceRuntimeInfo | null>(null)
+const runtimeRetrying = ref(false)
+let runtimePollTimer: number | undefined
+
+const VOICE_STATE_LABELS: Record<string, string> = {
+	DISABLED: '全局未启用',
+	NOT_INSTALLED: '等待部署',
+	DOWNLOADING: '正在下载',
+	VERIFYING: '正在校验',
+	EXTRACTING: '正在解压',
+	STARTING: '正在启动',
+	READY: '运行正常',
+	UNSUPPORTED_PLATFORM: '当前平台不受支持',
+}
+
+const voiceRuntimeLabel = computed(() => {
+	const state = voiceRuntime.value?.state
+	if (!state) return '状态未知'
+	if (state === 'FAILED') return voiceRuntime.value?.message || '部署失败'
+	return VOICE_STATE_LABELS[state] ?? '状态未知'
+})
+
+async function loadVoiceRuntime() {
+	try {
+		const res = await skinSiteChatVoiceRuntime()
+		if (res.success) voiceRuntime.value = res.payload
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function retryVoiceRuntime() {
+	if (runtimeRetrying.value) return
+	runtimeRetrying.value = true
+	try {
+		const res = await skinSiteChatVoiceRuntimeRetry()
+		if (!res.success) throw new Error(res.errorMessage)
+		voiceRuntime.value = res.payload
+		addNotification({ type: 'success', title: formatMessage(messages.voiceRetry) })
+	} catch (error) {
+		handleError(error)
+	} finally {
+		runtimeRetrying.value = false
+	}
+}
+
+// ---------- voice config ----------
+const voiceConfigOpen = ref(false)
+const voiceConfigLoading = ref(false)
+const voiceConfigSaving = ref(false)
+const voiceConfigOriginal = ref<SkinSiteChatVoiceGlobalConfig | null>(null)
+const voiceConfigForm = reactive<SkinSiteChatVoiceGlobalConfig>({
+	enabled: true,
+	runtimePath: './data/voice-runtime',
+	mirrorBaseUrl: '',
+	publicUrl: '',
+	bindAddress: '127.0.0.1',
+	signalPort: 7880,
+	rtcTcpPort: 7881,
+	rtcUdpPort: 7882,
+	startupTimeoutSeconds: 120,
+	useExternalIp: true,
+	nodeIp: '',
+})
+
+async function openVoiceConfig() {
+	voiceConfigLoading.value = true
+	try {
+		const res = await skinSiteChatVoiceConfig()
+		if (!res.success) throw new Error(res.errorMessage)
+		voiceConfigOriginal.value = { ...res.payload }
+		Object.assign(voiceConfigForm, res.payload)
+		voiceConfigOpen.value = true
+	} catch (error) {
+		handleError(error)
+	} finally {
+		voiceConfigLoading.value = false
+	}
+}
+
+function closeVoiceConfig() {
+	voiceConfigOpen.value = false
+}
+
+async function saveVoiceConfig() {
+	if (voiceConfigSaving.value) return
+	voiceConfigSaving.value = true
+	try {
+		const res = await skinSiteChatVoiceConfigUpdate({ ...voiceConfigForm })
+		if (!res.success) throw new Error(res.errorMessage)
+		voiceConfigOriginal.value = { ...res.payload.config }
+		Object.assign(voiceConfigForm, res.payload.config)
+		voiceRuntime.value = res.payload.runtime
+		addNotification({ type: 'success', title: formatMessage(messages.voiceSaved) })
+		closeVoiceConfig()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		voiceConfigSaving.value = false
+	}
+}
+
+// ---------- voice logs ----------
+const voiceLogsOpen = ref(false)
+const voiceLogs = ref<SkinSiteChatVoiceLogEntry[]>([])
+const voiceLogLoading = ref(false)
+const voiceLogError = ref('')
+const voiceLogAutoRefresh = ref(true)
+const voiceLogLatestId = ref(0)
+let voiceLogPollTimer: number | undefined
+
+async function openVoiceLogs() {
+	voiceLogs.value = []
+	voiceLogLatestId.value = 0
+	voiceLogError.value = ''
+	voiceLogsOpen.value = true
+	await loadVoiceLogs(true)
+	stopVoiceLogPolling()
+	voiceLogPollTimer = window.setInterval(() => {
+		if (voiceLogAutoRefresh.value && voiceLogsOpen.value) void loadVoiceLogs(false)
+	}, 2000)
+}
+
+function closeVoiceLogs() {
+	voiceLogsOpen.value = false
+	stopVoiceLogPolling()
+}
+
+function stopVoiceLogPolling() {
+	if (voiceLogPollTimer) {
+		window.clearInterval(voiceLogPollTimer)
+		voiceLogPollTimer = undefined
+	}
+}
+
+async function loadVoiceLogs(manual: boolean) {
+	if (voiceLogLoading.value) return
+	voiceLogLoading.value = true
+	try {
+		const res = await skinSiteChatVoiceLogs(
+			voiceLogs.value.length ? voiceLogLatestId.value : undefined,
+			voiceLogs.value.length ? 500 : 300,
+		)
+		if (!res.success) throw new Error(res.errorMessage)
+		voiceLogError.value = ''
+		if (res.payload.entries.length) {
+			voiceLogs.value.push(...res.payload.entries)
+			if (voiceLogs.value.length > 2000) {
+				voiceLogs.value.splice(0, voiceLogs.value.length - 2000)
+			}
+		}
+		voiceLogLatestId.value = res.payload.latestId
+	} catch (error) {
+		voiceLogError.value = error instanceof Error ? error.message : String(error)
+	} finally {
+		voiceLogLoading.value = false
+		void manual
+	}
+}
+
+// ---------- voice capacity ----------
+const capacityRoom = ref<SkinSiteChatRoomInfo | null>(null)
+const capacitySaving = ref(false)
+const capacityForm = reactive({ participantLimit: 0, listenerLimit: 0 })
+
+function openCapacity(room: SkinSiteChatRoomInfo) {
+	capacityRoom.value = room
+	capacityForm.participantLimit = room.voiceParticipantLimit
+	capacityForm.listenerLimit = room.voiceListenerLimit
+}
+
+function closeCapacity() {
+	capacityRoom.value = null
+}
+
+async function saveCapacity() {
+	if (!capacityRoom.value || capacitySaving.value) return
+	capacitySaving.value = true
+	try {
+		const res = await skinSiteChatVoiceCapacityUpdate(capacityRoom.value.id, {
+			participantLimit: capacityForm.participantLimit,
+			listenerLimit: capacityForm.listenerLimit,
+		})
+		if (!res.success) throw new Error(res.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.voiceCapacityUpdated) })
+		closeCapacity()
+		await loadRooms()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		capacitySaving.value = false
+	}
+}
+
+onMounted(() => {
+	void loadRooms()
+	void loadVoiceRuntime()
+	runtimePollTimer = window.setInterval(() => {
+		const state = voiceRuntime.value?.state
+		if (state && !['READY', 'DISABLED', 'UNSUPPORTED_PLATFORM'].includes(state)) {
+			void loadVoiceRuntime()
+		}
+	}, 5000)
+})
+
+onBeforeUnmount(() => {
+	if (runtimePollTimer) window.clearInterval(runtimePollTimer)
+	stopVoiceLogPolling()
+})
+
 </script>
 
 <template>
@@ -481,6 +804,55 @@ onMounted(() => void loadRooms())
 			</button>
 		</div>
 
+		<div
+			v-if="voiceRuntime"
+			class="flex flex-wrap items-center gap-3 rounded-xl border border-solid border-surface-5 bg-bg-raised px-4 py-3"
+		>
+			<span
+				class="size-2.5 shrink-0 rounded-full"
+				:class="
+					voiceRuntime.state === 'READY'
+						? 'bg-green'
+						: voiceRuntime.state === 'FAILED'
+							? 'bg-red'
+							: 'bg-yellow'
+				"
+			></span>
+			<div class="min-w-0 flex-1">
+				<p class="m-0 text-sm font-semibold text-contrast">
+					{{ formatMessage(messages.voiceRuntimeTitle) }}
+				</p>
+				<p class="m-0 truncate text-xs text-secondary">
+					{{ voiceRuntimeLabel }} · LiveKit {{ voiceRuntime.version }}
+					<span v-if="voiceRuntime.progress != null"> · {{ voiceRuntime.progress }}%</span>
+				</p>
+			</div>
+			<button
+				type="button"
+				class="rounded-lg bg-button-bg px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+				@click="openVoiceLogs"
+			>
+				{{ formatMessage(messages.voiceLogs) }}
+			</button>
+			<button
+				type="button"
+				class="rounded-lg bg-button-bg px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+				:disabled="voiceConfigLoading"
+				@click="openVoiceConfig"
+			>
+				{{ formatMessage(messages.voiceConfig) }}
+			</button>
+			<button
+				v-if="voiceRuntime.state === 'FAILED' || voiceRuntime.state === 'UNSUPPORTED_PLATFORM'"
+				type="button"
+				class="rounded-lg bg-yellow/20 px-3 py-1.5 text-xs font-semibold text-yellow hover:brightness-110 disabled:opacity-50"
+				:disabled="runtimeRetrying || voiceRuntime.state === 'UNSUPPORTED_PLATFORM'"
+				@click="retryVoiceRuntime"
+			>
+				{{ formatMessage(messages.voiceRetry) }}
+			</button>
+		</div>
+
 		<div
 			v-if="loading"
 			class="flex min-h-48 items-center justify-center gap-2 text-sm text-secondary"
@@ -585,6 +957,14 @@ onMounted(() => void loadRooms())
 					>
 						{{ formatMessage(messages.audit) }}
 					</button>
+					<button
+						v-if="room.voiceEnabled"
+						type="button"
+						class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
+						@click="openCapacity(room)"
+					>
+						{{ formatMessage(messages.voiceCapacity) }}
+					</button>
 					<button
 						type="button"
 						class="ml-auto rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 0464a58..9fb7d0d 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -2252,3 +2252,118 @@ export function skinSiteChatAuditList(
 ): Promise<SkinSiteResponse<SkinSiteChatAuditInfo[]>> {
 	return skinSiteRequest<SkinSiteChatAuditInfo[]>('chat/rooms/' + roomId + '/audit')
 }
+
+export type SkinSiteChatVoiceRuntimeState =
+	| 'DISABLED'
+	| 'NOT_INSTALLED'
+	| 'DOWNLOADING'
+	| 'VERIFYING'
+	| 'EXTRACTING'
+	| 'STARTING'
+	| 'READY'
+	| 'FAILED'
+	| 'UNSUPPORTED_PLATFORM'
+
+export interface SkinSiteChatVoiceRuntimeInfo {
+	state: SkinSiteChatVoiceRuntimeState
+	version: string
+	progress?: number | null
+	message?: string | null
+	retryCount: number
+	publicUrl?: string | null
+}
+
+export interface SkinSiteChatVoiceGlobalConfig {
+	enabled: boolean
+	runtimePath: string
+	mirrorBaseUrl: string
+	publicUrl: string
+	bindAddress: string
+	signalPort: number
+	rtcTcpPort: number
+	rtcUdpPort: number
+	startupTimeoutSeconds: number
+	useExternalIp: boolean
+	nodeIp: string
+}
+
+export interface SkinSiteChatVoiceGlobalConfigUpdateResult {
+	config: SkinSiteChatVoiceGlobalConfig
+	runtime: SkinSiteChatVoiceRuntimeInfo
+	restarted: boolean
+}
+
+export interface SkinSiteChatVoiceLogEntry {
+	id: number
+	timestamp: number
+	message: string
+}
+
+export interface SkinSiteChatVoiceLogPage {
+	entries: SkinSiteChatVoiceLogEntry[]
+	latestId: number
+}
+
+export interface SkinSiteChatVoiceRoomInfo {
+	roomId: number
+	enabled: boolean
+	available: boolean
+	publisherLimit: number
+	participantLimit: number
+	listenerLimit: number
+	participantCount: number
+	publisherCount: number
+	listenerCount: number
+	joined: boolean
+	observer: boolean
+	muted: boolean
+	bannedUntil?: number | null
+}
+
+export function skinSiteChatVoiceRuntime(): Promise<
+	SkinSiteResponse<SkinSiteChatVoiceRuntimeInfo>
+> {
+	return skinSiteRequest<SkinSiteChatVoiceRuntimeInfo>('chat/voice/admin/runtime')
+}
+
+export function skinSiteChatVoiceRuntimeRetry(): Promise<
+	SkinSiteResponse<SkinSiteChatVoiceRuntimeInfo>
+> {
+	return skinSiteRequest<SkinSiteChatVoiceRuntimeInfo>('chat/voice/admin/runtime/retry', {
+		method: 'POST',
+	})
+}
+
+export function skinSiteChatVoiceConfig(): Promise<
+	SkinSiteResponse<SkinSiteChatVoiceGlobalConfig>
+> {
+	return skinSiteRequest<SkinSiteChatVoiceGlobalConfig>('chat/voice/admin/config')
+}
+
+export function skinSiteChatVoiceConfigUpdate(
+	data: SkinSiteChatVoiceGlobalConfig,
+): Promise<SkinSiteResponse<SkinSiteChatVoiceGlobalConfigUpdateResult>> {
+	return skinSiteRequest<SkinSiteChatVoiceGlobalConfigUpdateResult>(
+		'chat/voice/admin/config',
+		{ method: 'PUT', body: data },
+	)
+}
+
+export function skinSiteChatVoiceLogs(
+	after?: number,
+	limit = 300,
+): Promise<SkinSiteResponse<SkinSiteChatVoiceLogPage>> {
+	const query = new URLSearchParams({ limit: String(limit) })
+	if (after !== undefined) query.set('after', String(after))
+	return skinSiteRequest<SkinSiteChatVoiceLogPage>('chat/voice/admin/logs?' + query.toString())
+}
+
+export function skinSiteChatVoiceCapacityUpdate(
+	roomId: number,
+	data: { participantLimit: number; listenerLimit: number },
+): Promise<SkinSiteResponse<SkinSiteChatVoiceRoomInfo>> {
+	return skinSiteRequest<SkinSiteChatVoiceRoomInfo>(
+		'chat/admin/rooms/' + roomId + '/voice/capacity',
+		{ method: 'PUT', body: data },
+	)
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index a485699..3ace0fa 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12317,5 +12317,57 @@
   "app.skin-site.chat.admin.audit-title": {"message": "Room audit"},
   "app.skin-site.chat.admin.audit-empty": {"message": "No audit records yet."},
   "app.skin-site.chat.admin.audit-target": {"message": "Target: {name}"},
-  "app.skin-site.chat.admin.close": {"message": "Close"}
+  "app.skin-site.chat.admin.close": {"message": "Close"},
+  "app.skin-site.chat.voice-runtime-title": {"message": "Realtime voice runtime"},
+  "app.skin-site.chat.voice-logs": {"message": "View logs"},
+  "app.skin-site.chat.voice-config": {"message": "Configure runtime"},
+  "app.skin-site.chat.voice-retry": {"message": "Retry deployment"},
+  "app.skin-site.chat.voice-config-title": {"message": "Voice runtime configuration"},
+  "app.skin-site.chat.voice-logs-title": {"message": "LiveKit logs"},
+  "app.skin-site.chat.voice-capacity-title": {"message": "Voice capacity"},
+  "app.skin-site.chat.voice-capacity": {"message": "Voice capacity"},
+  "app.skin-site.chat.participant-limit": {"message": "Participant limit"},
+  "app.skin-site.chat.listener-limit": {"message": "Listener limit"},
+  "app.skin-site.chat.voice-capacity-updated": {"message": "Voice capacity updated."},
+  "app.skin-site.chat.voice-enabled": {"message": "Enable realtime voice"},
+  "app.skin-site.chat.voice-runtime-path": {"message": "Runtime directory"},
+  "app.skin-site.chat.voice-mirror": {"message": "Mirror base URL"},
+  "app.skin-site.chat.voice-public-url": {"message": "Public URL"},
+  "app.skin-site.chat.voice-bind": {"message": "Bind address"},
+  "app.skin-site.chat.voice-signal-port": {"message": "Signal port"},
+  "app.skin-site.chat.voice-rtc-tcp-port": {"message": "Media TCP port"},
+  "app.skin-site.chat.voice-rtc-udp-port": {"message": "Media UDP port"},
+  "app.skin-site.chat.voice-startup-timeout": {"message": "Startup timeout (s)"},
+  "app.skin-site.chat.voice-use-external-ip": {"message": "Use external IP"},
+  "app.skin-site.chat.voice-node-ip": {"message": "Node IP"},
+  "app.skin-site.chat.voice-saved": {"message": "Voice configuration saved."},
+  "app.skin-site.chat.voice-logs-auto-refresh": {"message": "Auto refresh"},
+  "app.skin-site.chat.voice-logs-refresh": {"message": "Refresh"},
+  "app.skin-site.chat.voice-logs-empty": {"message": "No logs yet."},
+  "app.skin-site.chat.admin.voice-runtime-title": {"message": "Realtime voice runtime"},
+  "app.skin-site.chat.admin.voice-logs": {"message": "View logs"},
+  "app.skin-site.chat.admin.voice-config": {"message": "Configure runtime"},
+  "app.skin-site.chat.admin.voice-retry": {"message": "Retry deployment"},
+  "app.skin-site.chat.admin.voice-config-title": {"message": "Voice runtime configuration"},
+  "app.skin-site.chat.admin.voice-logs-title": {"message": "LiveKit logs"},
+  "app.skin-site.chat.admin.voice-capacity-title": {"message": "Voice capacity"},
+  "app.skin-site.chat.admin.voice-capacity": {"message": "Voice capacity"},
+  "app.skin-site.chat.admin.participant-limit": {"message": "Participant limit"},
+  "app.skin-site.chat.admin.listener-limit": {"message": "Listener limit"},
+  "app.skin-site.chat.admin.voice-capacity-updated": {"message": "Voice capacity updated."},
+  "app.skin-site.chat.admin.voice-enabled": {"message": "Enable realtime voice"},
+  "app.skin-site.chat.admin.voice-runtime-path": {"message": "Runtime directory"},
+  "app.skin-site.chat.admin.voice-mirror": {"message": "Mirror base URL"},
+  "app.skin-site.chat.admin.voice-public-url": {"message": "Public URL"},
+  "app.skin-site.chat.admin.voice-bind": {"message": "Bind address"},
+  "app.skin-site.chat.admin.voice-signal-port": {"message": "Signal port"},
+  "app.skin-site.chat.admin.voice-rtc-tcp-port": {"message": "Media TCP port"},
+  "app.skin-site.chat.admin.voice-rtc-udp-port": {"message": "Media UDP port"},
+  "app.skin-site.chat.admin.voice-startup-timeout": {"message": "Startup timeout (s)"},
+  "app.skin-site.chat.admin.voice-use-external-ip": {"message": "Use external IP"},
+  "app.skin-site.chat.admin.voice-node-ip": {"message": "Node IP"},
+  "app.skin-site.chat.admin.voice-saved": {"message": "Voice configuration saved."},
+  "app.skin-site.chat.admin.voice-logs-auto-refresh": {"message": "Auto refresh"},
+  "app.skin-site.chat.admin.voice-logs-refresh": {"message": "Refresh"},
+  "app.skin-site.chat.admin.voice-logs-empty": {"message": "No logs yet."}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 4af0739..202bffb 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -12148,5 +12148,57 @@
   "app.skin-site.chat.admin.audit-title": {"message": "房间审计"},
   "app.skin-site.chat.admin.audit-empty": {"message": "暂无审计记录。"},
   "app.skin-site.chat.admin.audit-target": {"message": "对象：{name}"},
-  "app.skin-site.chat.admin.close": {"message": "关闭"}
+  "app.skin-site.chat.admin.close": {"message": "关闭"},
+  "app.skin-site.chat.voice-runtime-title": {"message": "实时语音库"},
+  "app.skin-site.chat.voice-logs": {"message": "查看日志"},
+  "app.skin-site.chat.voice-config": {"message": "配置语音库"},
+  "app.skin-site.chat.voice-retry": {"message": "重新部署"},
+  "app.skin-site.chat.voice-config-title": {"message": "语音库配置"},
+  "app.skin-site.chat.voice-logs-title": {"message": "LiveKit 日志"},
+  "app.skin-site.chat.voice-capacity-title": {"message": "语音容量"},
+  "app.skin-site.chat.voice-capacity": {"message": "语音容量"},
+  "app.skin-site.chat.participant-limit": {"message": "参与人数上限"},
+  "app.skin-site.chat.listener-limit": {"message": "旁听人数上限"},
+  "app.skin-site.chat.voice-capacity-updated": {"message": "语音容量已更新。"},
+  "app.skin-site.chat.voice-enabled": {"message": "启用实时语音"},
+  "app.skin-site.chat.voice-runtime-path": {"message": "语音库目录"},
+  "app.skin-site.chat.voice-mirror": {"message": "镜像基础地址"},
+  "app.skin-site.chat.voice-public-url": {"message": "公网访问地址"},
+  "app.skin-site.chat.voice-bind": {"message": "监听地址"},
+  "app.skin-site.chat.voice-signal-port": {"message": "信令端口"},
+  "app.skin-site.chat.voice-rtc-tcp-port": {"message": "媒体 TCP 端口"},
+  "app.skin-site.chat.voice-rtc-udp-port": {"message": "媒体 UDP 端口"},
+  "app.skin-site.chat.voice-startup-timeout": {"message": "启动等待时间（秒）"},
+  "app.skin-site.chat.voice-use-external-ip": {"message": "使用外部 IP"},
+  "app.skin-site.chat.voice-node-ip": {"message": "节点 IP"},
+  "app.skin-site.chat.voice-saved": {"message": "语音库配置已保存。"},
+  "app.skin-site.chat.voice-logs-auto-refresh": {"message": "自动刷新"},
+  "app.skin-site.chat.voice-logs-refresh": {"message": "刷新"},
+  "app.skin-site.chat.voice-logs-empty": {"message": "暂无日志。"},
+  "app.skin-site.chat.admin.voice-runtime-title": {"message": "实时语音库"},
+  "app.skin-site.chat.admin.voice-logs": {"message": "查看日志"},
+  "app.skin-site.chat.admin.voice-config": {"message": "配置语音库"},
+  "app.skin-site.chat.admin.voice-retry": {"message": "重新部署"},
+  "app.skin-site.chat.admin.voice-config-title": {"message": "语音库配置"},
+  "app.skin-site.chat.admin.voice-logs-title": {"message": "LiveKit 日志"},
+  "app.skin-site.chat.admin.voice-capacity-title": {"message": "语音容量"},
+  "app.skin-site.chat.admin.voice-capacity": {"message": "语音容量"},
+  "app.skin-site.chat.admin.participant-limit": {"message": "参与人数上限"},
+  "app.skin-site.chat.admin.listener-limit": {"message": "旁听人数上限"},
+  "app.skin-site.chat.admin.voice-capacity-updated": {"message": "语音容量已更新。"},
+  "app.skin-site.chat.admin.voice-enabled": {"message": "启用实时语音"},
+  "app.skin-site.chat.admin.voice-runtime-path": {"message": "语音库目录"},
+  "app.skin-site.chat.admin.voice-mirror": {"message": "镜像基础地址"},
+  "app.skin-site.chat.admin.voice-public-url": {"message": "公网访问地址"},
+  "app.skin-site.chat.admin.voice-bind": {"message": "监听地址"},
+  "app.skin-site.chat.admin.voice-signal-port": {"message": "信令端口"},
+  "app.skin-site.chat.admin.voice-rtc-tcp-port": {"message": "媒体 TCP 端口"},
+  "app.skin-site.chat.admin.voice-rtc-udp-port": {"message": "媒体 UDP 端口"},
+  "app.skin-site.chat.admin.voice-startup-timeout": {"message": "启动等待时间（秒）"},
+  "app.skin-site.chat.admin.voice-use-external-ip": {"message": "使用外部 IP"},
+  "app.skin-site.chat.admin.voice-node-ip": {"message": "节点 IP"},
+  "app.skin-site.chat.admin.voice-saved": {"message": "语音库配置已保存。"},
+  "app.skin-site.chat.admin.voice-logs-auto-refresh": {"message": "自动刷新"},
+  "app.skin-site.chat.admin.voice-logs-refresh": {"message": "刷新"},
+  "app.skin-site.chat.admin.voice-logs-empty": {"message": "暂无日志。"}
 }

From febbd84ae7704dead27df97ae29241ec0dc8f84d Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 12:57:26 +0800
Subject: [PATCH 15/16] =?UTF-8?q?feat:=20=E7=9A=AE=E8=82=A4=E7=AB=99?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8F=B0=20Wiki=20=E8=A1=A5=20MediaWiki=20?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增迁移中心 Tab
- 自动迁移：填写 api.php 地址，可选 Bot 凭据，支持明确允许内网来源；可配置过时页面筛选规则（未更新天数、维护者统计窗口、维护者人数上限、过时标记）
- XML 导入：上传 MediaWiki 导出文件建立暂存任务
- 迁移任务列表：状态标签、审核进度条、已审核/导入/排除统计、错误信息
- 任务详情：分页加载候选页面，逐条显示更新时间、维护者数量、可疑原因，可设置目标标题与是否覆盖，执行导入或排除
- 整批发布与回滚，失败或已回滚任务可删除记录
- 补充迁移相关 API 与类型定义
- 中英文各补 55 个文案
---
 .../ui/skin-site/admin/AdminWikiPage.vue      | 750 +++++++++++++++++-
 .../app-frontend/src/helpers/skin-site-api.ts | 126 +++
 .../app-frontend/src/locales/en-US/index.json |  57 +-
 .../app-frontend/src/locales/zh-CN/index.json |  57 +-
 4 files changed, 986 insertions(+), 4 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue b/apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue
index 6e1abe7..f0bd173 100644
--- a/apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/admin/AdminWikiPage.vue
@@ -16,6 +16,16 @@ import {
 	type SkinSiteWikiSettings,
 	skinSiteWikiSettings,
 	skinSiteWikiUpdateSettings,
+	skinSiteWikiMigrationCandidates,
+	skinSiteWikiMigrationDecide,
+	skinSiteWikiMigrationDelete,
+	skinSiteWikiMigrationJobs,
+	skinSiteWikiMigrationPublish,
+	skinSiteWikiMigrationRollback,
+	skinSiteWikiMigrationStartAutomatic,
+	skinSiteWikiMigrationStartXml,
+	type SkinSiteWikiMigrationCandidate,
+	type SkinSiteWikiMigrationJobInfo,
 } from '@/helpers/skin-site-api'
 
 const { formatMessage } = useVIntl()
@@ -26,6 +36,198 @@ const messages = defineMessages({
 	tabPage: { id: 'app.skin-site.admin.wiki.tab-page', defaultMessage: 'Page' },
 	tabAudit: { id: 'app.skin-site.admin.wiki.tab-audit', defaultMessage: 'Audit log' },
 	tabSettings: { id: 'app.skin-site.admin.wiki.tab-settings', defaultMessage: 'Settings' },
+	tabMigration: { id: 'app.skin-site.admin.wiki.tab-migration', defaultMessage: 'Migration' },
+	migrationTitle: {
+		id: 'app.skin-site.admin.wiki.migration-title',
+		defaultMessage: 'MediaWiki migration',
+	},
+	migrationHint: {
+		id: 'app.skin-site.admin.wiki.migration-hint',
+		defaultMessage:
+			'Migrated content lands in a hidden staging area and is published in one batch after every page is reviewed.',
+	},
+	autoTitle: {
+		id: 'app.skin-site.admin.wiki.auto-title',
+		defaultMessage: 'Read from MediaWiki API',
+	},
+	apiUrl: { id: 'app.skin-site.admin.wiki.api-url', defaultMessage: 'api.php URL' },
+	botUsername: {
+		id: 'app.skin-site.admin.wiki.bot-username',
+		defaultMessage: 'Bot username (optional)',
+	},
+	botPassword: {
+		id: 'app.skin-site.admin.wiki.bot-password',
+		defaultMessage: 'Bot password (optional)',
+	},
+	credentialsHint: {
+		id: 'app.skin-site.admin.wiki.credentials-hint',
+		defaultMessage: 'Credentials stay in memory for this job only. HTTPS is required when supplied.',
+	},
+	allowPrivate: {
+		id: 'app.skin-site.admin.wiki.allow-private',
+		defaultMessage: 'Allow private network source',
+	},
+	allowPrivateHint: {
+		id: 'app.skin-site.admin.wiki.allow-private-hint',
+		defaultMessage: 'Private sources may reach services inside the server network.',
+	},
+	startAuto: {
+		id: 'app.skin-site.admin.wiki.start-auto',
+		defaultMessage: 'Create automatic migration job',
+	},
+	xmlTitle: {
+		id: 'app.skin-site.admin.wiki.xml-title',
+		defaultMessage: 'Import MediaWiki XML',
+	},
+	xmlFile: { id: 'app.skin-site.admin.wiki.xml-file', defaultMessage: 'Export file' },
+	startXml: {
+		id: 'app.skin-site.admin.wiki.start-xml',
+		defaultMessage: 'Upload and stage',
+	},
+	staleRules: {
+		id: 'app.skin-site.admin.wiki.stale-rules',
+		defaultMessage: 'Stale page detection rules',
+	},
+	staleDays: {
+		id: 'app.skin-site.admin.wiki.stale-days',
+		defaultMessage: 'Days without update',
+	},
+	maintainerWindow: {
+		id: 'app.skin-site.admin.wiki.maintainer-window',
+		defaultMessage: 'Maintainer window (days)',
+	},
+	maxMaintainers: {
+		id: 'app.skin-site.admin.wiki.max-maintainers',
+		defaultMessage: 'Max maintainers',
+	},
+	staleMarkers: {
+		id: 'app.skin-site.admin.wiki.stale-markers',
+		defaultMessage: 'Stale categories, templates or text',
+	},
+	staleMarkersHint: {
+		id: 'app.skin-site.admin.wiki.stale-markers-hint',
+		defaultMessage: 'Comma separated',
+	},
+	jobs: { id: 'app.skin-site.admin.wiki.jobs', defaultMessage: 'Migration jobs' },
+	refreshJobs: {
+		id: 'app.skin-site.admin.wiki.refresh-jobs',
+		defaultMessage: 'Refresh',
+	},
+	jobsEmpty: {
+		id: 'app.skin-site.admin.wiki.jobs-empty',
+		defaultMessage: 'No migration jobs yet.',
+	},
+	reviewedCount: {
+		id: 'app.skin-site.admin.wiki.reviewed-count',
+		defaultMessage: 'Reviewed {reviewed} / {total}',
+	},
+	importedExcluded: {
+		id: 'app.skin-site.admin.wiki.imported-excluded',
+		defaultMessage: 'Imported {imported} · Excluded {excluded}',
+	},
+	viewJob: { id: 'app.skin-site.admin.wiki.view-job', defaultMessage: 'View job' },
+	deleteJob: {
+		id: 'app.skin-site.admin.wiki.delete-job',
+		defaultMessage: 'Delete job record',
+	},
+	confirmDeleteJob: {
+		id: 'app.skin-site.admin.wiki.confirm-delete-job',
+		defaultMessage: 'Delete migration job #{id}? This cannot be undone.',
+	},
+	candidates: {
+		id: 'app.skin-site.admin.wiki.candidates',
+		defaultMessage: 'Candidate pages',
+	},
+	candidatesEmpty: {
+		id: 'app.skin-site.admin.wiki.candidates-empty',
+		defaultMessage: 'Select a job to review its pages.',
+	},
+	loadMore: { id: 'app.skin-site.admin.wiki.load-more', defaultMessage: 'Load more' },
+	lastUpdated: {
+		id: 'app.skin-site.admin.wiki.last-updated',
+		defaultMessage: 'Updated {date}',
+	},
+	maintainerCount: {
+		id: 'app.skin-site.admin.wiki.maintainer-count',
+		defaultMessage: '{count} maintainers',
+	},
+	conflict: {
+		id: 'app.skin-site.admin.wiki.conflict',
+		defaultMessage: 'Title conflict',
+	},
+	targetTitle: {
+		id: 'app.skin-site.admin.wiki.target-title',
+		defaultMessage: 'Target title',
+	},
+	overwrite: {
+		id: 'app.skin-site.admin.wiki.overwrite',
+		defaultMessage: 'Overwrite',
+	},
+	importAction: { id: 'app.skin-site.admin.wiki.import', defaultMessage: 'Import' },
+	excludeAction: { id: 'app.skin-site.admin.wiki.exclude', defaultMessage: 'Exclude' },
+	publish: { id: 'app.skin-site.admin.wiki.publish', defaultMessage: 'Publish batch' },
+	rollback: { id: 'app.skin-site.admin.wiki.rollback', defaultMessage: 'Roll back' },
+	confirmRollback: {
+		id: 'app.skin-site.admin.wiki.confirm-rollback',
+		defaultMessage: 'Roll back this migration batch? Published pages will be reverted.',
+	},
+	stateImporting: {
+		id: 'app.skin-site.admin.wiki.state-importing',
+		defaultMessage: 'Importing',
+	},
+	stateReview: {
+		id: 'app.skin-site.admin.wiki.state-review',
+		defaultMessage: 'Waiting review',
+	},
+	statePublishing: {
+		id: 'app.skin-site.admin.wiki.state-publishing',
+		defaultMessage: 'Publishing',
+	},
+	statePublished: {
+		id: 'app.skin-site.admin.wiki.state-published',
+		defaultMessage: 'Published',
+	},
+	stateFailed: { id: 'app.skin-site.admin.wiki.state-failed', defaultMessage: 'Failed' },
+	stateRolledBack: {
+		id: 'app.skin-site.admin.wiki.state-rolled-back',
+		defaultMessage: 'Rolled back',
+	},
+	decisionPending: {
+		id: 'app.skin-site.admin.wiki.decision-pending',
+		defaultMessage: 'Pending',
+	},
+	decisionImport: {
+		id: 'app.skin-site.admin.wiki.decision-import',
+		defaultMessage: 'Import',
+	},
+	decisionExclude: {
+		id: 'app.skin-site.admin.wiki.decision-exclude',
+		defaultMessage: 'Exclude',
+	},
+	migrationStarted: {
+		id: 'app.skin-site.admin.wiki.migration-started',
+		defaultMessage: 'Migration job created.',
+	},
+	xmlStaged: {
+		id: 'app.skin-site.admin.wiki.xml-staged',
+		defaultMessage: 'XML parsed and staged for review.',
+	},
+	published: {
+		id: 'app.skin-site.admin.wiki.published',
+		defaultMessage: 'Published {imported} pages, overwrote {overwritten}.',
+	},
+	rolledBack: {
+		id: 'app.skin-site.admin.wiki.rolled-back',
+		defaultMessage: 'Migration batch rolled back.',
+	},
+	jobDeleted: {
+		id: 'app.skin-site.admin.wiki.job-deleted',
+		defaultMessage: 'Migration record deleted.',
+	},
+	selectXml: {
+		id: 'app.skin-site.admin.wiki.select-xml',
+		defaultMessage: 'Choose a MediaWiki XML file first.',
+	},
 	loading: { id: 'app.skin-site.admin.wiki.loading', defaultMessage: 'Loading…' },
 	pagePath: { id: 'app.skin-site.admin.wiki.page-path', defaultMessage: 'Page path' },
 	loadPage: { id: 'app.skin-site.admin.wiki.load-page', defaultMessage: 'Load page' },
@@ -77,7 +279,7 @@ const messages = defineMessages({
 	},
 })
 
-type Tab = 'page' | 'audit' | 'settings'
+type Tab = 'page' | 'audit' | 'settings' | 'migration'
 const tab = ref<Tab>('page')
 
 const pagePath = ref('')
@@ -244,6 +446,269 @@ async function switchTab(next: Tab) {
 	tab.value = next
 	if (next === 'audit' && !auditItems.value.length) await loadAudit(true)
 	if (next === 'settings' && !settings.value) await loadSettings()
+	if (next === 'migration' && !migrationJobs.value.length) await loadMigrationJobs()
+}
+
+// ---------- migration ----------
+const migrationJobs = ref<SkinSiteWikiMigrationJobInfo[]>([])
+const jobsLoading = ref(false)
+const startingMigration = ref(false)
+
+const automaticForm = ref({
+	apiUrl: '',
+	username: '',
+	password: '',
+	allowPrivateAddress: false,
+	rules: {
+		staleDays: 365,
+		maintainerWindowDays: 180,
+		maximumMaintainers: 1,
+	},
+})
+const staleMarkersText = ref('')
+const xmlInput = ref<HTMLInputElement | null>(null)
+
+const selectedJob = ref<SkinSiteWikiMigrationJobInfo | null>(null)
+const candidates = ref<SkinSiteWikiMigrationCandidate[]>([])
+const candidatesLoading = ref(false)
+const candidateNextCursor = ref<number | null>(null)
+const candidateTargetTitles = reactive<Record<number, string>>({})
+const candidateOverwrite = reactive<Record<number, boolean>>({})
+
+const publishing = ref(false)
+const rollingBack = ref(false)
+const confirmingRollbackId = ref<number | null>(null)
+const deletingJob = ref(false)
+const confirmingDeleteId = ref<number | null>(null)
+
+const JOB_STATE_LABELS: Record<string, string> = {
+	IMPORTING: '正在读取',
+	REVIEW: '等待审核',
+	PUBLISHING: '正在发布',
+	PUBLISHED: '已发布',
+	FAILED: '失败',
+	ROLLED_BACK: '已回滚',
+}
+
+function jobStateLabel(state: string): string {
+	return JOB_STATE_LABELS[state] ?? state
+}
+
+function jobStateClass(state: string): string {
+	switch (state) {
+		case 'IMPORTING':
+		case 'PUBLISHING':
+			return 'bg-brand text-contrast'
+		case 'REVIEW':
+			return 'bg-yellow text-contrast'
+		case 'PUBLISHED':
+			return 'bg-green text-contrast'
+		case 'FAILED':
+			return 'bg-red text-contrast'
+		default:
+			return 'bg-button-bg text-secondary'
+	}
+}
+
+function decisionLabel(decision: string): string {
+	if (decision === 'IMPORT') return formatMessage(messages.decisionImport)
+	if (decision === 'EXCLUDE') return formatMessage(messages.decisionExclude)
+	return formatMessage(messages.decisionPending)
+}
+
+function decisionClass(decision: string): string {
+	if (decision === 'IMPORT') return 'bg-green text-contrast'
+	if (decision === 'EXCLUDE') return 'bg-red text-contrast'
+	return 'bg-yellow text-contrast'
+}
+
+async function loadMigrationJobs() {
+	jobsLoading.value = true
+	try {
+		const res = await skinSiteWikiMigrationJobs()
+		if (!res.success) throw new Error(res.errorMessage)
+		migrationJobs.value = res.payload ?? []
+		if (selectedJob.value) {
+			selectedJob.value =
+				migrationJobs.value.find((j) => j.id === selectedJob.value!.id) ?? null
+		}
+	} catch (error) {
+		handleError(error)
+	} finally {
+		jobsLoading.value = false
+	}
+}
+
+async function startAutomaticMigration() {
+	if (startingMigration.value) return
+	startingMigration.value = true
+	try {
+		const res = await skinSiteWikiMigrationStartAutomatic({
+			apiUrl: automaticForm.value.apiUrl.trim(),
+			username: automaticForm.value.username.trim() || null,
+			password: automaticForm.value.password || null,
+			allowPrivateAddress: automaticForm.value.allowPrivateAddress,
+			rules: {
+				...automaticForm.value.rules,
+				staleMarkers: staleMarkersText.value
+					.split(/[,，]/)
+					.map((s) => s.trim())
+					.filter(Boolean),
+			},
+		})
+		if (!res.success) throw new Error(res.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.migrationStarted) })
+		await loadMigrationJobs()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		startingMigration.value = false
+	}
+}
+
+async function startXmlMigration() {
+	const file = xmlInput.value?.files?.[0]
+	if (!file) {
+		addNotification({ type: 'error', title: formatMessage(messages.selectXml) })
+		return
+	}
+	if (startingMigration.value) return
+	startingMigration.value = true
+	try {
+		const res = await skinSiteWikiMigrationStartXml(file)
+		if (!res.success) throw new Error(res.errorMessage)
+		addNotification({ type: 'success', title: formatMessage(messages.xmlStaged) })
+		if (xmlInput.value) xmlInput.value.value = ''
+		await loadMigrationJobs()
+		await selectJob(res.payload)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		startingMigration.value = false
+	}
+}
+
+async function selectJob(job: SkinSiteWikiMigrationJobInfo) {
+	confirmingDeleteId.value = null
+	confirmingRollbackId.value = null
+	selectedJob.value = job
+	candidatesLoading.value = true
+	try {
+		const res = await skinSiteWikiMigrationCandidates(job.id)
+		if (selectedJob.value?.id !== job.id) return
+		if (!res.success) throw new Error(res.errorMessage)
+		candidates.value = res.payload.items ?? []
+		candidateNextCursor.value = res.payload.nextCursor ?? null
+		applyCandidateDefaults(candidates.value)
+	} catch (error) {
+		handleError(error)
+	} finally {
+		if (selectedJob.value?.id === job.id) candidatesLoading.value = false
+	}
+}
+
+function applyCandidateDefaults(items: SkinSiteWikiMigrationCandidate[]) {
+	for (const c of items) {
+		if (candidateTargetTitles[c.id] === undefined) candidateTargetTitles[c.id] = c.title
+		if (candidateOverwrite[c.id] === undefined) candidateOverwrite[c.id] = false
+	}
+}
+
+async function loadMoreCandidates() {
+	if (!selectedJob.value || !candidateNextCursor.value || candidatesLoading.value) return
+	const jobId = selectedJob.value.id
+	candidatesLoading.value = true
+	try {
+		const res = await skinSiteWikiMigrationCandidates(jobId, candidateNextCursor.value)
+		if (selectedJob.value?.id !== jobId) return
+		if (!res.success) throw new Error(res.errorMessage)
+		candidates.value.push(...(res.payload.items ?? []))
+		candidateNextCursor.value = res.payload.nextCursor ?? null
+		applyCandidateDefaults(res.payload.items ?? [])
+	} catch (error) {
+		handleError(error)
+	} finally {
+		if (selectedJob.value?.id === jobId) candidatesLoading.value = false
+	}
+}
+
+async function decideCandidate(
+	candidate: SkinSiteWikiMigrationCandidate,
+	decision: 'IMPORT' | 'EXCLUDE',
+) {
+	try {
+		const res = await skinSiteWikiMigrationDecide(candidate.id, {
+			decision,
+			targetTitle:
+				decision === 'IMPORT' ? candidateTargetTitles[candidate.id] || candidate.title : null,
+			overwrite: decision === 'IMPORT' ? Boolean(candidateOverwrite[candidate.id]) : false,
+		})
+		if (!res.success) throw new Error(res.errorMessage)
+		candidate.decision = decision
+		await loadMigrationJobs()
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function publishMigration() {
+	if (!selectedJob.value || publishing.value) return
+	publishing.value = true
+	try {
+		const res = await skinSiteWikiMigrationPublish(selectedJob.value.id)
+		if (!res.success) throw new Error(res.errorMessage)
+		addNotification({
+			type: 'success',
+			title: formatMessage(messages.published, {
+				imported: res.payload.imported,
+				overwritten: res.payload.overwritten,
+			}),
+		})
+		await loadMigrationJobs()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		publishing.value = false
+	}
+}
+
+async function rollbackMigration() {
+	if (!selectedJob.value || rollingBack.value) return
+	rollingBack.value = true
+	try {
+		const res = await skinSiteWikiMigrationRollback(selectedJob.value.id)
+		if (!res.success) throw new Error(res.errorMessage)
+		confirmingRollbackId.value = null
+		addNotification({ type: 'success', title: formatMessage(messages.rolledBack) })
+		await loadMigrationJobs()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		rollingBack.value = false
+	}
+}
+
+async function deleteJob(job: SkinSiteWikiMigrationJobInfo) {
+	if (deletingJob.value || confirmingDeleteId.value !== job.id) return
+	if (job.state !== 'FAILED' && job.state !== 'ROLLED_BACK') return
+	deletingJob.value = true
+	try {
+		const res = await skinSiteWikiMigrationDelete(job.id)
+		if (!res.success) throw new Error(res.errorMessage)
+		migrationJobs.value = migrationJobs.value.filter((j) => j.id !== job.id)
+		if (selectedJob.value?.id === job.id) {
+			selectedJob.value = null
+			candidates.value = []
+			candidateNextCursor.value = null
+		}
+		confirmingDeleteId.value = null
+		addNotification({ type: 'success', title: formatMessage(messages.jobDeleted) })
+		await loadMigrationJobs()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		deletingJob.value = false
+	}
 }
 
 onMounted(() => void loadSettings())
@@ -276,6 +741,14 @@ onMounted(() => void loadSettings())
 			>
 				{{ formatMessage(messages.tabSettings) }}
 			</button>
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-semibold"
+				:class="tab === 'migration' ? 'bg-brand text-contrast' : 'bg-button-bg text-secondary'"
+				@click="switchTab('migration')"
+			>
+				{{ formatMessage(messages.tabMigration) }}
+			</button>
 		</div>
 
 		<template v-if="tab === 'page'">
@@ -439,7 +912,7 @@ onMounted(() => void loadSettings())
 				</button>
 			</div>
 		</template>
-		<template v-else>
+		<template v-else-if="tab === 'settings'">
 			<div v-if="settingsLoading" class="flex items-center gap-2 text-sm text-secondary">
 				<SpinnerIcon class="size-4 animate-spin" />
 				{{ formatMessage(messages.loading) }}
@@ -508,5 +981,278 @@ onMounted(() => void loadSettings())
 				</button>
 			</template>
 		</template>
+		<template v-else>
+			<div class="flex flex-col gap-4">
+				<div class="rounded-xl border border-solid border-surface-5 bg-bg-raised p-4">
+					<h3 class="m-0 text-base font-bold text-contrast">
+						{{ formatMessage(messages.migrationTitle) }}
+					</h3>
+					<p class="m-0 mt-1 text-xs text-secondary">
+						{{ formatMessage(messages.migrationHint) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-3 rounded-xl border border-solid border-surface-5 p-4">
+					<h4 class="m-0 text-sm font-bold text-contrast">
+						{{ formatMessage(messages.autoTitle) }}
+					</h4>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.apiUrl) }}
+						</span>
+						<input
+							v-model.trim="automaticForm.apiUrl"
+							type="url"
+							placeholder="https://example.com/w/api.php"
+							class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+						/>
+					</label>
+					<div class="grid gap-2 sm:grid-cols-2">
+						<label class="flex flex-col gap-1">
+							<span class="text-xs font-semibold text-secondary">
+								{{ formatMessage(messages.botUsername) }}
+							</span>
+							<input
+								v-model.trim="automaticForm.username"
+								type="text"
+								class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+						<label class="flex flex-col gap-1">
+							<span class="text-xs font-semibold text-secondary">
+								{{ formatMessage(messages.botPassword) }}
+							</span>
+							<input
+								v-model="automaticForm.password"
+								type="password"
+								class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
+							/>
+						</label>
+					</div>
+					<p class="m-0 text-[11px] text-secondary">
+						{{ formatMessage(messages.credentialsHint) }}
+					</p>
+					<label class="flex cursor-pointer items-center gap-2 text-xs text-contrast">
+						<input v-model="automaticForm.allowPrivateAddress" type="checkbox" class="size-3.5" />
+						{{ formatMessage(messages.allowPrivate) }}
+					</label>
+					<p v-if="automaticForm.allowPrivateAddress" class="m-0 text-[11px] text-yellow">
+						{{ formatMessage(messages.allowPrivateHint) }}
+					</p>
+					<details class="rounded-lg border border-solid border-surface-5 p-3">
+						<summary class="cursor-pointer text-xs font-semibold text-contrast">
+							{{ formatMessage(messages.staleRules) }}
+						</summary>
+						<div class="mt-3 grid gap-2 sm:grid-cols-3">
+							<label class="flex flex-col gap-1">
+								<span class="text-[11px] text-secondary">{{ formatMessage(messages.staleDays) }}</span>
+								<input v-model.number="automaticForm.rules.staleDays" type="number" min="1" max="36500" class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast" />
+							</label>
+							<label class="flex flex-col gap-1">
+								<span class="text-[11px] text-secondary">{{ formatMessage(messages.maintainerWindow) }}</span>
+								<input v-model.number="automaticForm.rules.maintainerWindowDays" type="number" min="1" max="36500" class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast" />
+							</label>
+							<label class="flex flex-col gap-1">
+								<span class="text-[11px] text-secondary">{{ formatMessage(messages.maxMaintainers) }}</span>
+								<input v-model.number="automaticForm.rules.maximumMaintainers" type="number" min="0" max="100" class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast" />
+							</label>
+							<label class="flex flex-col gap-1 sm:col-span-3">
+								<span class="text-[11px] text-secondary">{{ formatMessage(messages.staleMarkers) }}</span>
+								<input v-model="staleMarkersText" type="text" :placeholder="formatMessage(messages.staleMarkersHint)" class="rounded-lg border border-solid border-surface-5 bg-bg px-2 py-1 text-xs text-contrast" />
+							</label>
+						</div>
+					</details>
+					<button type="button" class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50" :disabled="startingMigration" @click="startAutomaticMigration">
+						{{ formatMessage(messages.startAuto) }}
+					</button>
+				</div>
+
+				<div class="flex flex-col gap-3 rounded-xl border border-solid border-surface-5 p-4">
+					<h4 class="m-0 text-sm font-bold text-contrast">
+						{{ formatMessage(messages.xmlTitle) }}
+					</h4>
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-secondary">
+							{{ formatMessage(messages.xmlFile) }}
+						</span>
+						<input ref="xmlInput" type="file" accept=".xml,text/xml,application/xml" class="text-xs text-contrast" />
+					</label>
+					<button type="button" class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110 disabled:opacity-50" :disabled="startingMigration" @click="startXmlMigration">
+						{{ formatMessage(messages.startXml) }}
+					</button>
+				</div>
+
+				<div class="flex flex-col gap-3 rounded-xl border border-solid border-surface-5 p-4">
+					<div class="flex flex-wrap items-center justify-between gap-2">
+						<h4 class="m-0 text-sm font-bold text-contrast">
+							{{ formatMessage(messages.jobs) }}
+						</h4>
+						<button type="button" class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50" :disabled="jobsLoading" @click="loadMigrationJobs">
+							{{ formatMessage(messages.refreshJobs) }}
+						</button>
+					</div>
+
+					<div v-if="jobsLoading" class="flex min-h-24 items-center justify-center gap-2 text-sm text-secondary">
+						<SpinnerIcon class="size-4 animate-spin" />
+						{{ formatMessage(messages.loading) }}
+					</div>
+					<p v-else-if="!migrationJobs.length" class="m-0 rounded-lg bg-bg-raised p-3 text-xs text-secondary">
+						{{ formatMessage(messages.jobsEmpty) }}
+					</p>
+					<div v-else class="flex flex-col gap-2">
+						<article
+							v-for="job in migrationJobs"
+							:key="job.id"
+							class="rounded-lg border border-solid p-3"
+							:class="selectedJob?.id === job.id ? 'border-brand bg-brand/5' : 'border-surface-5'"
+						>
+							<div class="flex flex-wrap items-center justify-between gap-2">
+								<span class="text-sm font-semibold text-contrast">#{{ job.id }} · {{ job.source }}</span>
+								<span class="rounded-full px-2 py-0.5 text-[10px] font-semibold" :class="jobStateClass(job.state)">
+									{{ jobStateLabel(job.state) }}
+								</span>
+							</div>
+							<div class="mt-2 h-1.5 overflow-hidden rounded-full bg-button-bg">
+								<div class="h-full bg-brand transition-all" :style="{ width: (job.total ? (job.reviewed / job.total) * 100 : 0) + '%' }"></div>
+							</div>
+							<div class="mt-2 flex flex-wrap justify-between gap-2 text-[11px] text-secondary">
+								<span>{{ formatMessage(messages.reviewedCount, { reviewed: job.reviewed, total: job.total }) }}</span>
+								<span>{{ formatMessage(messages.importedExcluded, { imported: job.imported, excluded: job.excluded }) }}</span>
+							</div>
+							<p v-if="job.error" class="m-0 mt-2 text-xs text-red">{{ job.error }}</p>
+							<div class="mt-2 flex flex-wrap justify-end gap-2">
+								<button type="button" class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110" @click="selectJob(job)">
+									{{ formatMessage(messages.viewJob) }}
+								</button>
+								<button
+									v-if="job.state === 'FAILED' || job.state === 'ROLLED_BACK'"
+									type="button"
+									class="rounded-lg bg-red/20 px-3 py-1 text-xs font-semibold text-red hover:brightness-110 disabled:opacity-50"
+									:disabled="deletingJob"
+									@click="confirmingDeleteId = job.id"
+								>
+									{{ formatMessage(messages.deleteJob) }}
+								</button>
+							</div>
+							<div v-if="confirmingDeleteId === job.id" class="mt-2 rounded-lg bg-red/10 p-2">
+								<p class="m-0 text-xs text-red">
+									{{ formatMessage(messages.confirmDeleteJob, { id: job.id }) }}
+								</p>
+								<div class="mt-2 flex justify-end gap-2">
+									<button type="button" class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-secondary" @click="confirmingDeleteId = null">
+										{{ formatMessage(messages.cancel) }}
+									</button>
+									<button type="button" class="rounded-lg bg-red px-3 py-1 text-xs font-semibold text-contrast disabled:opacity-50" :disabled="deletingJob" @click="deleteJob(job)">
+										{{ formatMessage(messages.deleteJob) }}
+									</button>
+								</div>
+							</div>
+						</article>
+					</div>
+				</div>
+
+				<div v-if="selectedJob" class="flex flex-col gap-3 rounded-xl border border-solid border-surface-5 p-4">
+					<div class="flex flex-wrap items-center justify-between gap-2">
+						<h4 class="m-0 text-sm font-bold text-contrast">
+							{{ formatMessage(messages.candidates) }}
+						</h4>
+						<div class="flex flex-wrap gap-2">
+							<button
+								v-if="selectedJob.state === 'REVIEW'"
+								type="button"
+								class="rounded-lg bg-brand px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+								:disabled="publishing"
+								@click="publishMigration"
+							>
+								{{ formatMessage(messages.publish) }}
+							</button>
+							<button
+								v-if="selectedJob.state === 'PUBLISHED'"
+								type="button"
+								class="rounded-lg bg-yellow/20 px-3 py-1 text-xs font-semibold text-yellow hover:brightness-110 disabled:opacity-50"
+								:disabled="rollingBack"
+								@click="confirmingRollbackId = selectedJob.id"
+							>
+								{{ formatMessage(messages.rollback) }}
+							</button>
+						</div>
+					</div>
+					<div v-if="confirmingRollbackId === selectedJob.id" class="rounded-lg bg-yellow/10 p-2">
+						<p class="m-0 text-xs text-yellow">{{ formatMessage(messages.confirmRollback) }}</p>
+						<div class="mt-2 flex justify-end gap-2">
+							<button type="button" class="rounded-lg bg-button-bg px-3 py-1 text-xs font-semibold text-secondary" @click="confirmingRollbackId = null">
+								{{ formatMessage(messages.cancel) }}
+							</button>
+							<button type="button" class="rounded-lg bg-yellow px-3 py-1 text-xs font-semibold text-contrast disabled:opacity-50" :disabled="rollingBack" @click="rollbackMigration">
+								{{ formatMessage(messages.rollback) }}
+							</button>
+						</div>
+					</div>
+
+					<div v-if="candidatesLoading && !candidates.length" class="flex min-h-24 items-center justify-center gap-2 text-sm text-secondary">
+						<SpinnerIcon class="size-4 animate-spin" />
+						{{ formatMessage(messages.loading) }}
+					</div>
+					<p v-else-if="!candidates.length" class="m-0 rounded-lg bg-bg-raised p-3 text-xs text-secondary">
+						{{ formatMessage(messages.candidatesEmpty) }}
+					</p>
+					<div v-else class="flex flex-col gap-2">
+						<div
+							v-for="candidate in candidates"
+							:key="candidate.id"
+							class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 p-3"
+						>
+							<div class="flex flex-wrap items-center gap-2">
+								<span class="min-w-0 flex-1 truncate text-sm font-semibold text-contrast">{{ candidate.title }}</span>
+								<span class="rounded-full px-2 py-0.5 text-[10px] font-semibold" :class="decisionClass(candidate.decision)">
+									{{ decisionLabel(candidate.decision) }}
+								</span>
+								<span v-if="candidate.conflict" class="rounded-full bg-yellow/20 px-2 py-0.5 text-[10px] font-semibold text-yellow">
+									{{ formatMessage(messages.conflict) }}
+								</span>
+							</div>
+							<div class="flex flex-wrap gap-3 text-[11px] text-secondary">
+								<span>{{ formatMessage(messages.lastUpdated, { date: new Date(candidate.lastUpdatedAt).toLocaleDateString() }) }}</span>
+								<span>{{ formatMessage(messages.maintainerCount, { count: candidate.maintainerCount }) }}</span>
+							</div>
+							<div v-if="candidate.suspiciousReasons.length" class="flex flex-wrap gap-1">
+								<span v-for="reason in candidate.suspiciousReasons" :key="reason" class="rounded bg-bg px-1.5 py-0.5 text-[10px] text-secondary">
+									{{ reason }}
+								</span>
+							</div>
+							<div class="flex flex-wrap items-center gap-2">
+								<input
+									v-model="candidateTargetTitles[candidate.id]"
+									type="text"
+									:placeholder="formatMessage(messages.targetTitle)"
+									class="min-w-0 flex-1 rounded-lg border border-solid border-surface-5 bg-bg-raised px-2 py-1 text-xs text-contrast outline-none focus:border-brand"
+								/>
+								<label class="flex cursor-pointer items-center gap-1.5 text-[11px] text-contrast">
+									<input v-model="candidateOverwrite[candidate.id]" type="checkbox" class="size-3" />
+									{{ formatMessage(messages.overwrite) }}
+								</label>
+								<button type="button" class="rounded-lg bg-green/20 px-3 py-1 text-xs font-semibold text-green hover:brightness-110" @click="decideCandidate(candidate, 'IMPORT')">
+									{{ formatMessage(messages.importAction) }}
+								</button>
+								<button type="button" class="rounded-lg bg-red/20 px-3 py-1 text-xs font-semibold text-red hover:brightness-110" @click="decideCandidate(candidate, 'EXCLUDE')">
+									{{ formatMessage(messages.excludeAction) }}
+								</button>
+							</div>
+						</div>
+						<button
+							v-if="candidateNextCursor"
+							type="button"
+							class="rounded-lg bg-button-bg px-4 py-2 text-xs font-semibold text-contrast hover:brightness-110 disabled:opacity-50"
+							:disabled="candidatesLoading"
+							@click="loadMoreCandidates"
+						>
+							{{ formatMessage(messages.loadMore) }}
+						</button>
+					</div>
+				</div>
+			</div>
+
+
+</template>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index 9fb7d0d..c2cf8d8 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -2367,3 +2367,129 @@ export function skinSiteChatVoiceCapacityUpdate(
 		{ method: 'PUT', body: data },
 	)
 }
+
+// ---------------------------------------------------------------------------
+// Wiki migration
+// ---------------------------------------------------------------------------
+
+export type SkinSiteWikiMigrationState =
+	| 'IMPORTING'
+	| 'REVIEW'
+	| 'PUBLISHING'
+	| 'PUBLISHED'
+	| 'FAILED'
+	| 'ROLLED_BACK'
+
+export type SkinSiteWikiMigrationDecision = 'PENDING' | 'IMPORT' | 'EXCLUDE'
+
+export interface SkinSiteWikiMigrationJobInfo {
+	id: number
+	source: string
+	state: SkinSiteWikiMigrationState
+	total: number
+	reviewed: number
+	imported: number
+	excluded: number
+	error?: string | null
+	missingAttachmentCount?: number
+}
+
+export interface SkinSiteWikiMigrationCandidate {
+	id: number
+	title: string
+	lastUpdatedAt: number
+	maintainerCount: number
+	suspiciousReasons: string[]
+	decision: SkinSiteWikiMigrationDecision
+	conflict: boolean
+}
+
+export interface SkinSiteWikiMigrationPage {
+	items: SkinSiteWikiMigrationCandidate[]
+	nextCursor?: number | null
+}
+
+export interface SkinSiteWikiMigrationPublishResult {
+	imported: number
+	overwritten: number
+}
+
+export interface SkinSiteWikiAutomaticMigrationInput {
+	apiUrl: string
+	username?: string | null
+	password?: string | null
+	allowPrivateAddress: boolean
+	rules: {
+		staleDays: number
+		maintainerWindowDays: number
+		maximumMaintainers: number
+		staleMarkers: string[]
+	}
+}
+
+export function skinSiteWikiMigrationJobs(): Promise<
+	SkinSiteResponse<SkinSiteWikiMigrationJobInfo[]>
+> {
+	return skinSiteRequest<SkinSiteWikiMigrationJobInfo[]>('wiki/admin/migration')
+}
+
+export function skinSiteWikiMigrationStartAutomatic(
+	data: SkinSiteWikiAutomaticMigrationInput,
+): Promise<SkinSiteResponse<SkinSiteWikiMigrationJobInfo>> {
+	return skinSiteRequest<SkinSiteWikiMigrationJobInfo>('wiki/admin/migration/automatic', {
+		method: 'POST',
+		body: data,
+	})
+}
+
+export function skinSiteWikiMigrationStartXml(
+	file: File,
+): Promise<SkinSiteResponse<SkinSiteWikiMigrationJobInfo>> {
+	const form = new FormData()
+	form.append('xml', file, file.name)
+	return skinSiteRequest<SkinSiteWikiMigrationJobInfo>('wiki/admin/migration/xml', {
+		method: 'POST',
+		form,
+	})
+}
+
+export function skinSiteWikiMigrationCandidates(
+	jobId: number,
+	after?: number,
+): Promise<SkinSiteResponse<SkinSiteWikiMigrationPage>> {
+	const suffix = after ? '?after=' + after : ''
+	return skinSiteRequest<SkinSiteWikiMigrationPage>(
+		'wiki/admin/migration/' + jobId + '/candidates' + suffix,
+	)
+}
+
+export function skinSiteWikiMigrationDecide(
+	candidateId: number,
+	data: { decision: SkinSiteWikiMigrationDecision; targetTitle?: string | null; overwrite?: boolean },
+): Promise<SkinSiteResponse<void>> {
+	return skinSiteRequest<void>('wiki/admin/migration/candidates/' + candidateId, {
+		method: 'POST',
+		body: data,
+	})
+}
+
+export function skinSiteWikiMigrationPublish(
+	jobId: number,
+): Promise<SkinSiteResponse<SkinSiteWikiMigrationPublishResult>> {
+	return skinSiteRequest<SkinSiteWikiMigrationPublishResult>(
+		'wiki/admin/migration/' + jobId + '/publish',
+		{ method: 'POST' },
+	)
+}
+
+export function skinSiteWikiMigrationRollback(
+	jobId: number,
+): Promise<SkinSiteResponse<void>> {
+	return skinSiteRequest<void>('wiki/admin/migration/' + jobId + '/rollback', {
+		method: 'POST',
+	})
+}
+
+export function skinSiteWikiMigrationDelete(jobId: number): Promise<SkinSiteResponse<void>> {
+	return skinSiteRequest<void>('wiki/admin/migration/' + jobId, { method: 'DELETE' })
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 3ace0fa..571bc67 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12369,5 +12369,60 @@
   "app.skin-site.chat.admin.voice-saved": {"message": "Voice configuration saved."},
   "app.skin-site.chat.admin.voice-logs-auto-refresh": {"message": "Auto refresh"},
   "app.skin-site.chat.admin.voice-logs-refresh": {"message": "Refresh"},
-  "app.skin-site.chat.admin.voice-logs-empty": {"message": "No logs yet."}
+  "app.skin-site.chat.admin.voice-logs-empty": {"message": "No logs yet."},
+  "app.skin-site.admin.wiki.tab-migration": {"message": "Migration"},
+  "app.skin-site.admin.wiki.migration-title": {"message": "MediaWiki migration"},
+  "app.skin-site.admin.wiki.migration-hint": {"message": "Migrated content lands in a hidden staging area and is published in one batch after every page is reviewed."},
+  "app.skin-site.admin.wiki.auto-title": {"message": "Read from MediaWiki API"},
+  "app.skin-site.admin.wiki.api-url": {"message": "api.php URL"},
+  "app.skin-site.admin.wiki.bot-username": {"message": "Bot username (optional)"},
+  "app.skin-site.admin.wiki.bot-password": {"message": "Bot password (optional)"},
+  "app.skin-site.admin.wiki.credentials-hint": {"message": "Credentials stay in memory for this job only. HTTPS is required when supplied."},
+  "app.skin-site.admin.wiki.allow-private": {"message": "Allow private network source"},
+  "app.skin-site.admin.wiki.allow-private-hint": {"message": "Private sources may reach services inside the server network."},
+  "app.skin-site.admin.wiki.start-auto": {"message": "Create automatic migration job"},
+  "app.skin-site.admin.wiki.xml-title": {"message": "Import MediaWiki XML"},
+  "app.skin-site.admin.wiki.xml-file": {"message": "Export file"},
+  "app.skin-site.admin.wiki.start-xml": {"message": "Upload and stage"},
+  "app.skin-site.admin.wiki.stale-rules": {"message": "Stale page detection rules"},
+  "app.skin-site.admin.wiki.stale-days": {"message": "Days without update"},
+  "app.skin-site.admin.wiki.maintainer-window": {"message": "Maintainer window (days)"},
+  "app.skin-site.admin.wiki.max-maintainers": {"message": "Max maintainers"},
+  "app.skin-site.admin.wiki.stale-markers": {"message": "Stale categories, templates or text"},
+  "app.skin-site.admin.wiki.stale-markers-hint": {"message": "Comma separated"},
+  "app.skin-site.admin.wiki.jobs": {"message": "Migration jobs"},
+  "app.skin-site.admin.wiki.refresh-jobs": {"message": "Refresh"},
+  "app.skin-site.admin.wiki.jobs-empty": {"message": "No migration jobs yet."},
+  "app.skin-site.admin.wiki.reviewed-count": {"message": "Reviewed {reviewed} / {total}"},
+  "app.skin-site.admin.wiki.imported-excluded": {"message": "Imported {imported} · Excluded {excluded}"},
+  "app.skin-site.admin.wiki.view-job": {"message": "View job"},
+  "app.skin-site.admin.wiki.delete-job": {"message": "Delete job record"},
+  "app.skin-site.admin.wiki.confirm-delete-job": {"message": "Delete migration job #{id}? This cannot be undone."},
+  "app.skin-site.admin.wiki.candidates": {"message": "Candidate pages"},
+  "app.skin-site.admin.wiki.candidates-empty": {"message": "Select a job to review its pages."},
+  "app.skin-site.admin.wiki.last-updated": {"message": "Updated {date}"},
+  "app.skin-site.admin.wiki.maintainer-count": {"message": "{count} maintainers"},
+  "app.skin-site.admin.wiki.conflict": {"message": "Title conflict"},
+  "app.skin-site.admin.wiki.target-title": {"message": "Target title"},
+  "app.skin-site.admin.wiki.overwrite": {"message": "Overwrite"},
+  "app.skin-site.admin.wiki.import": {"message": "Import"},
+  "app.skin-site.admin.wiki.exclude": {"message": "Exclude"},
+  "app.skin-site.admin.wiki.publish": {"message": "Publish batch"},
+  "app.skin-site.admin.wiki.rollback": {"message": "Roll back"},
+  "app.skin-site.admin.wiki.confirm-rollback": {"message": "Roll back this migration batch? Published pages will be reverted."},
+  "app.skin-site.admin.wiki.state-importing": {"message": "Importing"},
+  "app.skin-site.admin.wiki.state-review": {"message": "Waiting review"},
+  "app.skin-site.admin.wiki.state-publishing": {"message": "Publishing"},
+  "app.skin-site.admin.wiki.state-published": {"message": "Published"},
+  "app.skin-site.admin.wiki.state-failed": {"message": "Failed"},
+  "app.skin-site.admin.wiki.state-rolled-back": {"message": "Rolled back"},
+  "app.skin-site.admin.wiki.decision-pending": {"message": "Pending"},
+  "app.skin-site.admin.wiki.decision-import": {"message": "Import"},
+  "app.skin-site.admin.wiki.decision-exclude": {"message": "Exclude"},
+  "app.skin-site.admin.wiki.migration-started": {"message": "Migration job created."},
+  "app.skin-site.admin.wiki.xml-staged": {"message": "XML parsed and staged for review."},
+  "app.skin-site.admin.wiki.published": {"message": "Published {imported} pages, overwrote {overwritten}."},
+  "app.skin-site.admin.wiki.rolled-back": {"message": "Migration batch rolled back."},
+  "app.skin-site.admin.wiki.job-deleted": {"message": "Migration record deleted."},
+  "app.skin-site.admin.wiki.select-xml": {"message": "Choose a MediaWiki XML file first."}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 202bffb..be7e653 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -12200,5 +12200,60 @@
   "app.skin-site.chat.admin.voice-saved": {"message": "语音库配置已保存。"},
   "app.skin-site.chat.admin.voice-logs-auto-refresh": {"message": "自动刷新"},
   "app.skin-site.chat.admin.voice-logs-refresh": {"message": "刷新"},
-  "app.skin-site.chat.admin.voice-logs-empty": {"message": "暂无日志。"}
+  "app.skin-site.chat.admin.voice-logs-empty": {"message": "暂无日志。"},
+  "app.skin-site.admin.wiki.tab-migration": {"message": "迁移中心"},
+  "app.skin-site.admin.wiki.migration-title": {"message": "MediaWiki 迁移"},
+  "app.skin-site.admin.wiki.migration-hint": {"message": "迁移内容会先进入不可见暂存区，所有页面完成导入或排除审核后才能整批发布。"},
+  "app.skin-site.admin.wiki.auto-title": {"message": "从 MediaWiki API 自动读取"},
+  "app.skin-site.admin.wiki.api-url": {"message": "api.php 地址"},
+  "app.skin-site.admin.wiki.bot-username": {"message": "Bot 用户名（选填）"},
+  "app.skin-site.admin.wiki.bot-password": {"message": "Bot 密码（选填）"},
+  "app.skin-site.admin.wiki.credentials-hint": {"message": "凭据只存在于本次后台任务的内存中，携带凭据时必须使用 HTTPS。"},
+  "app.skin-site.admin.wiki.allow-private": {"message": "明确允许访问内网来源"},
+  "app.skin-site.admin.wiki.allow-private-hint": {"message": "内网来源可能访问皮肤站所在网络中的服务，请只对可信地址启用。"},
+  "app.skin-site.admin.wiki.start-auto": {"message": "创建自动迁移任务"},
+  "app.skin-site.admin.wiki.xml-title": {"message": "导入 MediaWiki XML"},
+  "app.skin-site.admin.wiki.xml-file": {"message": "导出文件"},
+  "app.skin-site.admin.wiki.start-xml": {"message": "上传并建立暂存任务"},
+  "app.skin-site.admin.wiki.stale-rules": {"message": "疑似过时页面筛选规则"},
+  "app.skin-site.admin.wiki.stale-days": {"message": "未更新天数"},
+  "app.skin-site.admin.wiki.maintainer-window": {"message": "维护者统计天数"},
+  "app.skin-site.admin.wiki.max-maintainers": {"message": "维护者人数不超过"},
+  "app.skin-site.admin.wiki.stale-markers": {"message": "过时分类、模板或文字标记"},
+  "app.skin-site.admin.wiki.stale-markers-hint": {"message": "使用逗号分隔"},
+  "app.skin-site.admin.wiki.jobs": {"message": "迁移任务"},
+  "app.skin-site.admin.wiki.refresh-jobs": {"message": "刷新"},
+  "app.skin-site.admin.wiki.jobs-empty": {"message": "还没有迁移任务。"},
+  "app.skin-site.admin.wiki.reviewed-count": {"message": "已审核 {reviewed} / {total}"},
+  "app.skin-site.admin.wiki.imported-excluded": {"message": "导入 {imported} · 排除 {excluded}"},
+  "app.skin-site.admin.wiki.view-job": {"message": "查看任务"},
+  "app.skin-site.admin.wiki.delete-job": {"message": "删除迁移记录"},
+  "app.skin-site.admin.wiki.confirm-delete-job": {"message": "确认删除迁移任务 #{id}？此操作不可恢复。"},
+  "app.skin-site.admin.wiki.candidates": {"message": "候选页面"},
+  "app.skin-site.admin.wiki.candidates-empty": {"message": "选择任务后查看其页面。"},
+  "app.skin-site.admin.wiki.last-updated": {"message": "更新于 {date}"},
+  "app.skin-site.admin.wiki.maintainer-count": {"message": "{count} 位维护者"},
+  "app.skin-site.admin.wiki.conflict": {"message": "标题冲突"},
+  "app.skin-site.admin.wiki.target-title": {"message": "目标标题"},
+  "app.skin-site.admin.wiki.overwrite": {"message": "覆盖"},
+  "app.skin-site.admin.wiki.import": {"message": "导入"},
+  "app.skin-site.admin.wiki.exclude": {"message": "排除"},
+  "app.skin-site.admin.wiki.publish": {"message": "整批发布"},
+  "app.skin-site.admin.wiki.rollback": {"message": "回滚"},
+  "app.skin-site.admin.wiki.confirm-rollback": {"message": "确认回滚本批迁移？已发布的页面将被还原。"},
+  "app.skin-site.admin.wiki.state-importing": {"message": "正在读取"},
+  "app.skin-site.admin.wiki.state-review": {"message": "等待审核"},
+  "app.skin-site.admin.wiki.state-publishing": {"message": "正在发布"},
+  "app.skin-site.admin.wiki.state-published": {"message": "已发布"},
+  "app.skin-site.admin.wiki.state-failed": {"message": "失败"},
+  "app.skin-site.admin.wiki.state-rolled-back": {"message": "已回滚"},
+  "app.skin-site.admin.wiki.decision-pending": {"message": "待审核"},
+  "app.skin-site.admin.wiki.decision-import": {"message": "导入"},
+  "app.skin-site.admin.wiki.decision-exclude": {"message": "排除"},
+  "app.skin-site.admin.wiki.migration-started": {"message": "迁移任务已创建。"},
+  "app.skin-site.admin.wiki.xml-staged": {"message": "XML 已解析并进入逐页审核阶段。"},
+  "app.skin-site.admin.wiki.published": {"message": "已发布 {imported} 个页面，覆盖 {overwritten} 个。"},
+  "app.skin-site.admin.wiki.rolled-back": {"message": "迁移批次已安全回滚。"},
+  "app.skin-site.admin.wiki.job-deleted": {"message": "迁移记录已删除。"},
+  "app.skin-site.admin.wiki.select-xml": {"message": "请先选择 MediaWiki XML 文件。"}
 }

From 71b8d111fb8b6780b979c0cf97fa8532e5f2aff6 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 18 Oct 2026 13:13:03 +0800
Subject: [PATCH 16/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E7=AB=99=E7=BB=B4=E5=9F=BA=E5=8F=AA=E8=AF=BB=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 WikiView 页面：输入标题加载页面，支持内部词条跳转与返回栈
- 新增 WikiNodeRenderer 递归渲染器：标题、段落、加粗斜体下划线删除线、高亮、行内代码、黑幕、分隔线、内外链、有序无序列表、引用、代码块、表格、附件、提示块
- 新增 WikiNotice 提示块与 WikiAttachmentNode 附件组件，图片支持点击查看大图
- 补充维基节点与附件类型定义，新增附件查询接口与附件内容 URL 拼接
- 主页导航 Wiki 卡片改为站内打开
- 中英文各补 10 个文案
---
 .../components/ui/skin-site/SkinSiteHome.vue  |   4 +
 .../ui/skin-site/SkinSiteNavCards.vue         |  19 +-
 .../src/components/ui/skin-site/WikiView.vue  | 192 ++++++++++++++++++
 .../ui/skin-site/wiki/WikiAttachmentNode.vue  |  74 +++++++
 .../ui/skin-site/wiki/WikiNodeRenderer.vue    | 185 +++++++++++++++++
 .../ui/skin-site/wiki/WikiNotice.vue          |  32 +++
 .../ui/skin-site/wiki/wiki-color.ts           |  18 ++
 .../app-frontend/src/helpers/skin-site-api.ts |  48 ++++-
 .../app-frontend/src/locales/en-US/index.json |  12 +-
 .../app-frontend/src/locales/zh-CN/index.json |  12 +-
 10 files changed, 590 insertions(+), 6 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/WikiView.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/wiki/WikiAttachmentNode.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/wiki/WikiNodeRenderer.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/wiki/WikiNotice.vue
 create mode 100644 apps/app-frontend/src/components/ui/skin-site/wiki/wiki-color.ts

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 4d626df..23fe86a 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteHome.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteHome.vue
@@ -18,6 +18,7 @@ import SkinSiteNavCards from './SkinSiteNavCards.vue'
 import SkinSiteProfileModal from './SkinSiteProfileModal.vue'
 import SkinSiteProfileView from './SkinSiteProfileView.vue'
 import SkinSiteReviewView from './SkinSiteReviewView.vue'
+import WikiView from './WikiView.vue'
 
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
@@ -45,6 +46,7 @@ const view = ref<
 	| 'bug-detail'
 	| 'bug-notifications'
 	| 'admin'
+	| 'wiki'
 >('home')
 const selectedBugId = ref<number | null>(null)
 
@@ -98,6 +100,8 @@ async function copyAddress() {
 				@open="openBug"
 			/>
 			<SkinSiteAdminView v-else-if="view === 'admin'" @back="view = 'home'" />
+			<WikiView v-else-if="view === 'wiki'" />
+
 			<SkinSiteBugDetailView
 				v-else-if="view === 'bug-detail' && selectedBugId !== null"
 				:issue-id="selectedBugId"
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 0207c19..6148490 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteNavCards.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteNavCards.vue
@@ -12,7 +12,9 @@ import type { Component } from 'vue'
 
 const { formatMessage } = useVIntl()
 
-const emit = defineEmits<{ (e: 'navigate', view: 'downloads' | 'review' | 'bugs' | 'map'): void }>()
+const emit = defineEmits<{
+	(e: 'navigate', view: 'downloads' | 'review' | 'bugs' | 'map' | 'wiki'): void
+}>()
 
 const messages = defineMessages({
 	title: { id: 'app.skin-site.home.nav.title', defaultMessage: 'Skin site' },
@@ -104,8 +106,19 @@ const items: NavItem[] = [
 ]
 
 function open(item: NavItem) {
-	if (item.id === 'download' || item.id === 'review' || item.id === 'bugs' || item.id === 'map') {
-		emit('navigate', item.id === 'download' ? 'downloads' : item.id)
+	if (
+		item.id === 'download' ||
+		item.id === 'review' ||
+		item.id === 'bugs' ||
+		item.id === 'map' ||
+		item.id === 'wiki'
+	) {
+		emit(
+			'navigate',
+			item.id === 'download'
+				? 'downloads'
+				: (item.id as 'review' | 'bugs' | 'map' | 'wiki'),
+		)
 		return
 	}
 	void import('@tauri-apps/plugin-opener').then(({ openUrl }) => openUrl(item.href))
diff --git a/apps/app-frontend/src/components/ui/skin-site/WikiView.vue b/apps/app-frontend/src/components/ui/skin-site/WikiView.vue
new file mode 100644
index 0000000..4ad2544
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/WikiView.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref } from 'vue'
+
+import {
+	type SkinSiteWikiPageDetail,
+	skinSiteWikiPage,
+} from '@/helpers/skin-site-api'
+
+import WikiNodeRenderer from './wiki/WikiNodeRenderer.vue'
+
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+
+const props = withDefaults(defineProps<{ initialTitle?: string }>(), {
+	initialTitle: '',
+})
+
+const messages = defineMessages({
+	title: { id: 'app.skin-site.wiki.title', defaultMessage: 'StarLight Wiki' },
+	searchPlaceholder: {
+		id: 'app.skin-site.wiki.search-placeholder',
+		defaultMessage: 'Enter a page title',
+	},
+	open: { id: 'app.skin-site.wiki.open', defaultMessage: 'Open' },
+	loading: { id: 'app.skin-site.wiki.loading', defaultMessage: 'Loading…' },
+	notFound: {
+		id: 'app.skin-site.wiki.not-found',
+		defaultMessage: 'Page not found.',
+	},
+	empty: {
+		id: 'app.skin-site.wiki.empty',
+		defaultMessage: 'Enter a page title above to start reading.',
+	},
+	updatedAt: {
+		id: 'app.skin-site.wiki.updated-at',
+		defaultMessage: 'Last edited {date} by {author}',
+	},
+	revision: { id: 'app.skin-site.wiki.revision', defaultMessage: 'Revision #{id}' },
+	categories: { id: 'app.skin-site.wiki.categories', defaultMessage: 'Categories' },
+	back: { id: 'app.skin-site.wiki.back', defaultMessage: 'Back' },
+})
+
+const titleInput = ref(props.initialTitle)
+const page = ref<SkinSiteWikiPageDetail | null>(null)
+const loading = ref(false)
+const notFound = ref(false)
+const history = ref<string[]>([])
+
+const currentTitle = computed(() => page.value?.title ?? '')
+
+async function openPage(title: string) {
+	const trimmed = title.trim()
+	if (!trimmed) return
+	titleInput.value = trimmed
+	loading.value = true
+	notFound.value = false
+	try {
+		const res = await skinSiteWikiPage(trimmed)
+		if (!res.success) {
+			notFound.value = true
+			page.value = null
+			return
+		}
+		page.value = res.payload
+		if (currentTitle.value && history.value[history.value.length - 1] !== currentTitle.value) {
+			history.value.push(currentTitle.value)
+		}
+	} catch (error) {
+		handleError(error)
+		notFound.value = true
+		page.value = null
+	} finally {
+		loading.value = false
+	}
+}
+
+function goBack() {
+	const prev = history.value.pop()
+	if (prev) void openPage(prev)
+}
+
+function formatDate(ts: number): string {
+	try {
+		return new Date(ts).toLocaleString()
+	} catch {
+		return '—'
+	}
+}
+
+function onNavigate(title: string) {
+	if (title) void openPage(title)
+}
+
+onMounted(() => {
+	if (props.initialTitle) void openPage(props.initialTitle)
+})
+</script>
+
+<template>
+	<div class="flex w-full flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-2">
+			<button
+				v-if="history.length"
+				type="button"
+				class="rounded-lg bg-button-bg px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+				@click="goBack"
+			>
+				← {{ formatMessage(messages.back) }}
+			</button>
+			<h2 class="m-0 text-lg font-bold text-contrast">{{ formatMessage(messages.title) }}</h2>
+			<input
+				v-model="titleInput"
+				type="text"
+				:placeholder="formatMessage(messages.searchPlaceholder)"
+				class="min-w-0 flex-1 rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-1.5 text-xs text-contrast outline-none focus:border-brand"
+				@keyup.enter="openPage(titleInput)"
+			/>
+			<button
+				type="button"
+				class="rounded-lg bg-brand px-3 py-1.5 text-xs font-semibold text-contrast hover:brightness-110"
+				@click="openPage(titleInput)"
+			>
+				{{ formatMessage(messages.open) }}
+			</button>
+		</div>
+
+		<div v-if="loading" class="flex min-h-48 items-center justify-center gap-2 text-sm text-secondary">
+			<SpinnerIcon class="size-4 animate-spin" />
+			{{ formatMessage(messages.loading) }}
+		</div>
+		<p
+			v-else-if="notFound"
+			class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
+			{{ formatMessage(messages.notFound) }}
+		</p>
+		<p
+			v-else-if="!page"
+			class="m-0 rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
+		>
+			{{ formatMessage(messages.empty) }}
+		</p>
+		<template v-else>
+			<div class="flex flex-wrap items-baseline justify-between gap-2 border-b border-solid border-surface-5 pb-2">
+				<h1 class="m-0 text-2xl font-bold text-contrast">{{ page.title }}</h1>
+				<span class="text-[11px] text-secondary">
+					{{ formatMessage(messages.revision, { id: page.revisionId }) }}
+				</span>
+			</div>
+
+			<p class="m-0 text-[11px] text-secondary">
+				{{
+					formatMessage(messages.updatedAt, {
+						date: formatDate(page.updatedAt),
+						author: page.authorName,
+					})
+				}}
+			</p>
+
+			<div
+				v-if="page.redirectTarget"
+				class="rounded-lg border border-solid border-yellow/40 bg-yellow/10 p-3 text-xs text-yellow"
+			>
+				重定向到
+				<button
+					type="button"
+					class="font-semibold underline underline-offset-2"
+					@click="openPage(page.redirectTarget ?? '')"
+				>
+					{{ page.redirectTarget }}
+				</button>
+			</div>
+
+			<article class="min-w-0 text-sm leading-7 text-contrast">
+				<WikiNodeRenderer :nodes="page.nodes" @navigate="onNavigate" />
+			</article>
+
+			<div v-if="page.categories.length" class="flex flex-wrap items-center gap-2 pt-2">
+				<span class="text-[11px] text-secondary">{{ formatMessage(messages.categories) }}:</span>
+				<span
+					v-for="category in page.categories"
+					:key="category"
+					class="rounded bg-bg-raised px-2 py-0.5 text-[11px] text-secondary"
+				>
+					{{ category }}
+				</span>
+			</div>
+		</template>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/wiki/WikiAttachmentNode.vue b/apps/app-frontend/src/components/ui/skin-site/wiki/WikiAttachmentNode.vue
new file mode 100644
index 0000000..4f73b5a
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/wiki/WikiAttachmentNode.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import {
+	type SkinSiteWikiAttachmentInfo,
+	skinSiteWikiAttachment,
+	skinSiteWikiAttachmentUrl,
+} from '@/helpers/skin-site-api'
+
+const props = defineProps<{ name: string; caption?: string | null }>()
+
+const attachment = ref<SkinSiteWikiAttachmentInfo | null>(null)
+const loading = ref(true)
+const viewerOpen = ref(false)
+
+const contentUrl = computed(() =>
+	attachment.value ? skinSiteWikiAttachmentUrl(attachment.value.id) : '#',
+)
+const imageCaption = computed(() => {
+	const caption = props.caption?.trim() ?? ''
+	return caption === props.name || caption === attachment.value?.name ? '' : caption
+})
+
+onMounted(async () => {
+	try {
+		const res = await skinSiteWikiAttachment(props.name)
+		if (res.success) attachment.value = res.payload
+	} catch {
+		// ignore
+	} finally {
+		loading.value = false
+	}
+})
+</script>
+
+<template>
+	<span
+		v-if="loading"
+		class="inline-flex min-h-20 min-w-32 items-center justify-center rounded-lg border border-solid border-surface-5"
+	>
+		<span class="text-xs text-secondary">…</span>
+	</span>
+	<figure v-else-if="attachment?.image" class="my-5 inline-block max-w-full">
+		<button type="button" class="block max-w-full cursor-zoom-in rounded-lg" @click="viewerOpen = true">
+			<img
+				class="max-h-[70vh] max-w-full rounded-lg border border-solid border-surface-5 object-contain shadow-md"
+				:src="contentUrl"
+				:alt="caption || attachment.name"
+				loading="lazy"
+				decoding="async"
+			/>
+		</button>
+		<figcaption v-if="imageCaption" class="mt-2 text-center text-sm text-secondary">
+			{{ imageCaption }}
+		</figcaption>
+	</figure>
+	<a
+		v-else-if="attachment"
+		class="inline-flex items-center gap-1 text-brand underline-offset-2 hover:underline"
+		:href="contentUrl"
+		download
+	>
+		{{ caption || attachment.name }}
+	</a>
+	<span v-else class="text-red">附件“{{ name }}”不存在</span>
+
+	<div
+		v-if="viewerOpen"
+		class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 p-4"
+		@click.self="viewerOpen = false"
+	>
+		<img :src="contentUrl" :alt="caption || attachment?.name" class="max-h-[92vh] max-w-[92vw] object-contain" />
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/wiki/WikiNodeRenderer.vue b/apps/app-frontend/src/components/ui/skin-site/wiki/WikiNodeRenderer.vue
new file mode 100644
index 0000000..0c5288f
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/wiki/WikiNodeRenderer.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { type SkinSiteWikiNode } from '@/helpers/skin-site-api'
+
+import { safeExternalUrl, safeWikiColor } from './wiki-color'
+
+defineOptions({ name: 'WikiNodeRenderer' })
+
+defineProps<{ nodes: SkinSiteWikiNode[] }>()
+const emit = defineEmits<{ (e: 'navigate', title: string): void }>()
+
+function headingTag(level?: number | null): string {
+	return 'h' + Math.min(6, Math.max(1, level ?? 2))
+}
+
+function navigate(title?: string | null) {
+	emit('navigate', (title ?? '').replaceAll('_', ' '))
+}
+</script>
+
+<template>
+	<template v-for="(node, index) in nodes" :key="node.type + '-' + index">
+		<component
+			:is="headingTag(node.level)"
+			v-if="node.type === 'heading'"
+			class="wiki-heading scroll-mt-24"
+			:style="{ textAlign: node.align ?? undefined }"
+		>
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</component>
+		<p
+			v-else-if="node.type === 'paragraph'"
+			class="my-3 leading-7 break-words whitespace-pre-wrap"
+			:style="{ textAlign: node.align ?? undefined }"
+		>
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</p>
+		<strong v-else-if="node.type === 'strong'" class="font-bold">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</strong>
+		<small v-else-if="node.type === 'small'">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</small>
+		<span
+			v-else-if="node.type === 'color'"
+			:style="{ color: safeWikiColor(node.color ?? '') ?? undefined }"
+		>
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</span>
+		<em v-else-if="node.type === 'emphasis'" class="italic">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</em>
+		<u v-else-if="node.type === 'underline'">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</u>
+		<s v-else-if="node.type === 'strike'">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</s>
+		<mark v-else-if="node.type === 'highlight'" class="rounded bg-yellow/25 px-0.5 text-contrast">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</mark>
+		<code v-else-if="node.type === 'inlineCode'" class="rounded bg-button-bg px-1 font-mono text-sm">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</code>
+		<span
+			v-else-if="node.type === 'spoiler'"
+			class="cursor-help rounded bg-contrast text-contrast transition-colors hover:bg-transparent hover:text-inherit"
+			:title="node.tooltip || '我知道你在偷看'"
+			tabindex="0"
+		>
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</span>
+		<br v-else-if="node.type === 'break'" />
+		<hr v-else-if="node.type === 'rule'" class="my-6 border-surface-5" />
+		<button
+			v-else-if="node.type === 'internalLink'"
+			type="button"
+			class="font-medium underline-offset-2 hover:underline"
+			:class="node.exists === false ? 'text-red' : 'text-brand'"
+			:title="node.exists === false ? '该词条尚未创建' : undefined"
+			@click="navigate(node.title)"
+		>
+			<WikiNodeRenderer v-if="node.children.length" :nodes="node.children" @navigate="navigate" />
+			<template v-else>{{ node.text }}</template>
+		</button>
+		<a
+			v-else-if="node.type === 'externalLink'"
+			class="text-brand underline-offset-2 hover:underline"
+			:href="safeExternalUrl(node.href)"
+			target="_blank"
+			rel="noopener noreferrer nofollow"
+		>
+			<WikiNodeRenderer v-if="node.children.length" :nodes="node.children" @navigate="navigate" />
+			<template v-else>{{ node.text }}</template>
+		</a>
+		<ul v-else-if="node.type === 'unorderedList'" class="my-3 list-disc pl-7">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</ul>
+		<ol
+			v-else-if="node.type === 'orderedList'"
+			:start="node.start ?? undefined"
+			class="my-3 list-decimal pl-7"
+		>
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</ol>
+		<li v-else-if="node.type === 'listItem'" class="my-1">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</li>
+		<blockquote
+			v-else-if="node.type === 'quote'"
+			class="my-4 border-l-4 border-brand/60 bg-brand/5 px-4 py-2"
+		>
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</blockquote>
+		<pre
+			v-else-if="node.type === 'code'"
+			class="my-4 overflow-x-auto rounded-lg border border-solid border-surface-5 bg-bg-raised p-4 font-mono text-sm"
+		><code>{{ node.text }}</code></pre>
+		<div v-else-if="node.type === 'table'" class="my-5 overflow-x-auto">
+			<table class="w-full border-collapse text-sm">
+				<tbody>
+					<WikiNodeRenderer
+						v-if="node.children.length"
+						:nodes="node.children"
+						@navigate="navigate"
+					/>
+					<tr v-for="(row, rowIndex) in node.rows" :key="rowIndex">
+						<td v-for="(cell, cellIndex) in row" :key="cellIndex" class="border border-solid border-surface-5 px-2 py-1">
+							<WikiNodeRenderer :nodes="cell" @navigate="navigate" />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<tr v-else-if="node.type === 'tableRow'">
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</tr>
+		<component
+			:is="node.type === 'tableHeader' ? 'th' : 'td'"
+			v-else-if="node.type === 'tableCell' || node.type === 'tableHeader'"
+			class="border border-solid border-surface-5 px-2 py-1"
+			:colspan="node.colspan ?? 1"
+			:rowspan="node.rowspan ?? 1"
+		>
+			<WikiNodeRenderer :nodes="node.children" @navigate="navigate" />
+		</component>
+		<WikiAttachmentNode
+			v-else-if="node.type === 'attachment' && node.title"
+			:name="node.title"
+			:caption="node.text"
+		/>
+		<WikiNotice
+			v-else-if="node.type === 'notice' && node.title"
+			:title="node.title"
+			:description="node.text"
+			:variant="node.variant"
+		>
+			<WikiNodeRenderer v-if="node.children.length" :nodes="node.children" @navigate="navigate" />
+			<p v-else-if="node.text" class="whitespace-pre-wrap">{{ node.text }}</p>
+		</WikiNotice>
+		<span v-else>{{ node.text }}</span>
+	</template>
+</template>
+
+<style scoped>
+.wiki-heading {
+	margin-top: 1.65rem;
+	margin-bottom: 0.7rem;
+	border-bottom: 1px solid color-mix(in oklab, currentColor 16%, transparent);
+	padding-bottom: 0.4rem;
+	font-weight: 750;
+	line-height: 1.25;
+}
+
+h1.wiki-heading {
+	font-size: 2rem;
+}
+
+h2.wiki-heading {
+	font-size: 1.55rem;
+}
+
+h3.wiki-heading {
+	font-size: 1.25rem;
+}
+</style>
diff --git a/apps/app-frontend/src/components/ui/skin-site/wiki/WikiNotice.vue b/apps/app-frontend/src/components/ui/skin-site/wiki/WikiNotice.vue
new file mode 100644
index 0000000..95ae146
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/wiki/WikiNotice.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+	title: string
+	description?: string | null
+	variant?: string | null
+}>()
+
+const variantClass = computed(() => {
+	switch (props.variant) {
+		case 'warning':
+			return 'border-yellow/40 bg-yellow/10 text-yellow'
+		case 'error':
+			return 'border-red/40 bg-red/10 text-red'
+		case 'success':
+			return 'border-green/40 bg-green/10 text-green'
+		default:
+			return 'border-brand/40 bg-brand/10 text-brand'
+	}
+})
+</script>
+
+<template>
+	<div class="my-4 rounded-lg border border-solid p-4" :class="variantClass">
+		<p class="m-0 text-sm font-bold">{{ title }}</p>
+		<p v-if="description" class="m-0 mt-1 text-xs whitespace-pre-wrap opacity-90">
+			{{ description }}
+		</p>
+		<slot />
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/skin-site/wiki/wiki-color.ts b/apps/app-frontend/src/components/ui/skin-site/wiki/wiki-color.ts
new file mode 100644
index 0000000..e64cb4e
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/skin-site/wiki/wiki-color.ts
@@ -0,0 +1,18 @@
+export function safeWikiColor(value: unknown): string | null {
+	if (typeof value !== 'string') return null
+	const color = value.trim()
+	return color.length <= 80 &&
+		/^(?:[a-z]{1,20}|#[\da-f]{3}|#[\da-f]{4}|#[\da-f]{6}|#[\da-f]{8}|rgba?\([\d\s.,%]+\))$/i.test(color)
+		? color
+		: null
+}
+
+export function safeExternalUrl(url?: string | null): string {
+	if (!url) return '#'
+	try {
+		const parsed = new URL(url)
+		return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed.toString() : '#'
+	} catch {
+		return '#'
+	}
+}
diff --git a/apps/app-frontend/src/helpers/skin-site-api.ts b/apps/app-frontend/src/helpers/skin-site-api.ts
index c2cf8d8..c3bba36 100644
--- a/apps/app-frontend/src/helpers/skin-site-api.ts
+++ b/apps/app-frontend/src/helpers/skin-site-api.ts
@@ -1740,11 +1740,45 @@ export function skinSiteDeleteModRuntime(id: number): Promise<SkinSiteResponse<s
 export type SkinSiteWikiReadPolicy = 'PUBLIC' | 'MEMBER'
 export type SkinSiteWikiEditPolicy = 'MEMBER' | 'WEB_ADMIN'
 
+export interface SkinSiteWikiNode {
+	type: string
+	color?: string | null
+	align?: 'left' | 'center' | 'right' | 'justify' | null
+	start?: number | null
+	colspan?: number | null
+	rowspan?: number | null
+	variant?: string | null
+	iconFamily?: string | null
+	iconName?: string | null
+	iconVersion?: number | null
+	linkTitle?: string | null
+	linkLabel?: string | null
+	tooltip?: string | null
+	exists?: boolean | null
+	text?: string | null
+	level?: number | null
+	href?: string | null
+	title?: string | null
+	children: SkinSiteWikiNode[]
+	rows: SkinSiteWikiNode[][][]
+}
+
+export interface SkinSiteWikiAttachmentInfo {
+	id: number
+	versionId: number
+	name: string
+	mime: string
+	size: number
+	image: boolean
+	uploaderName: string
+	createdAt: number
+}
+
 export interface SkinSiteWikiPageDetail {
 	title: string
 	revisionId: number
 	source: string
-	nodes: unknown[]
+	nodes: SkinSiteWikiNode[]
 	categories: string[]
 	updatedAt: number
 	authorName: string
@@ -2493,3 +2527,15 @@ export function skinSiteWikiMigrationRollback(
 export function skinSiteWikiMigrationDelete(jobId: number): Promise<SkinSiteResponse<void>> {
 	return skinSiteRequest<void>('wiki/admin/migration/' + jobId, { method: 'DELETE' })
 }
+
+export function skinSiteWikiAttachment(
+	name: string,
+): Promise<SkinSiteResponse<SkinSiteWikiAttachmentInfo>> {
+	return skinSiteRequest<SkinSiteWikiAttachmentInfo>(
+		'wiki/attachment?name=' + encodeURIComponent(name),
+	)
+}
+
+export function skinSiteWikiAttachmentUrl(id: number): string {
+	return `${SKIN_SITE_ORIGIN}${REQUEST_TYPE_PATH.starlight}/wiki/attachment/${id}/content`
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 571bc67..9a3ae7f 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -12424,5 +12424,15 @@
   "app.skin-site.admin.wiki.published": {"message": "Published {imported} pages, overwrote {overwritten}."},
   "app.skin-site.admin.wiki.rolled-back": {"message": "Migration batch rolled back."},
   "app.skin-site.admin.wiki.job-deleted": {"message": "Migration record deleted."},
-  "app.skin-site.admin.wiki.select-xml": {"message": "Choose a MediaWiki XML file first."}
+  "app.skin-site.admin.wiki.select-xml": {"message": "Choose a MediaWiki XML file first."},
+  "app.skin-site.wiki.title": {"message": "StarLight Wiki"},
+  "app.skin-site.wiki.search-placeholder": {"message": "Enter a page title"},
+  "app.skin-site.wiki.open": {"message": "Open"},
+  "app.skin-site.wiki.loading": {"message": "Loading…"},
+  "app.skin-site.wiki.not-found": {"message": "Page not found."},
+  "app.skin-site.wiki.empty": {"message": "Enter a page title above to start reading."},
+  "app.skin-site.wiki.updated-at": {"message": "Last edited {date} by {author}"},
+  "app.skin-site.wiki.revision": {"message": "Revision #{id}"},
+  "app.skin-site.wiki.categories": {"message": "Categories"},
+  "app.skin-site.wiki.back": {"message": "Back"}
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index be7e653..0e33964 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -12255,5 +12255,15 @@
   "app.skin-site.admin.wiki.published": {"message": "已发布 {imported} 个页面，覆盖 {overwritten} 个。"},
   "app.skin-site.admin.wiki.rolled-back": {"message": "迁移批次已安全回滚。"},
   "app.skin-site.admin.wiki.job-deleted": {"message": "迁移记录已删除。"},
-  "app.skin-site.admin.wiki.select-xml": {"message": "请先选择 MediaWiki XML 文件。"}
+  "app.skin-site.admin.wiki.select-xml": {"message": "请先选择 MediaWiki XML 文件。"},
+  "app.skin-site.wiki.title": {"message": "StarLight 维基"},
+  "app.skin-site.wiki.search-placeholder": {"message": "输入页面标题"},
+  "app.skin-site.wiki.open": {"message": "打开"},
+  "app.skin-site.wiki.loading": {"message": "加载中…"},
+  "app.skin-site.wiki.not-found": {"message": "页面不存在。"},
+  "app.skin-site.wiki.empty": {"message": "在上方输入页面标题开始阅读。"},
+  "app.skin-site.wiki.updated-at": {"message": "最后编辑于 {date}，编辑者 {author}"},
+  "app.skin-site.wiki.revision": {"message": "修订 #{id}"},
+  "app.skin-site.wiki.categories": {"message": "分类"},
+  "app.skin-site.wiki.back": {"message": "返回"}
 }