feat: 移植截图中心（浏览/分组/编辑/导出）

apps/app-frontend/src/pages/Screenshots.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ScreenshotsPage from '@/components/ui/screenshots-page/index.vue'
+
+defineOptions({ name: 'ScreenshotsPage' })
+</script>
+
+<template>
+	<div class="box-border h-full p-6">
+		<ScreenshotsPage show-heading />
+	</div>
+</template>

apps/app-frontend/src/pages/instance/query-options.ts

@@ -0,0 +1,57 @@
+import { queryOptions } from '@tanstack/vue-query'
+
+import {
+	list,
+	list_all_screenshots,
+	list_screenshot_groups,
+	list_screenshots,
+	list_synced_screenshots,
+} from '@/helpers/instance'
+
+export const instanceKeys = {
+	all: ['instances'] as const,
+	list: () => ['instances', 'list'] as const,
+}
+
+export function instanceListQueryOptions() {
+	return queryOptions({
+		queryKey: instanceKeys.list(),
+		queryFn: list,
+	})
+}
+
+export const screenshotKeys = {
+	all: ['screenshots'] as const,
+	global: () => ['screenshots', 'global'] as const,
+	synced: () => ['screenshots', 'synced'] as const,
+	instance: (instanceId: string) => ['screenshots', 'instance', instanceId] as const,
+	groups: () => ['screenshots', 'groups'] as const,
+}
+
+export function instanceScreenshotsQueryOptions(instanceId: string) {
+	return queryOptions({
+		queryKey: screenshotKeys.instance(instanceId),
+		queryFn: () => list_screenshots(instanceId),
+	})
+}
+
+export function allScreenshotsQueryOptions() {
+	return queryOptions({
+		queryKey: screenshotKeys.global(),
+		queryFn: list_all_screenshots,
+	})
+}
+
+export function syncedScreenshotsQueryOptions() {
+	return queryOptions({
+		queryKey: screenshotKeys.synced(),
+		queryFn: list_synced_screenshots,
+	})
+}
+
+export function screenshotGroupsQueryOptions() {
+	return queryOptions({
+		queryKey: screenshotKeys.groups(),
+		queryFn: list_screenshot_groups,
+	})
+}