From 1b487da5c2a866f894e161358d3ebc1b7555abd3 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Fri, 2 Oct 2026 13:20:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=88=AA=E5=9B=BE?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E8=8F=9C=E5=8D=95/=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E4=B8=8D=E5=8F=AF=E7=94=A8=E4=B8=8E=E5=AF=BC=E8=88=AA=E9=A1=B9?=
 =?UTF-8?q?=E7=BC=BA=E4=B8=AD=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ui/screenshots-page/index.vue  | 87 ++++++++++---------
 .../app-frontend/src/locales/en-US/index.json |  3 +
 .../app-frontend/src/locales/zh-CN/index.json |  3 +
 apps/app-frontend/src/providers/setup.ts      |  2 +
 .../providers/setup/image-viewer-editor.ts    | 16 ++++
 5 files changed, 71 insertions(+), 40 deletions(-)
 create mode 100644 apps/app-frontend/src/providers/setup/image-viewer-editor.ts

diff --git a/apps/app-frontend/src/components/ui/screenshots-page/index.vue b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
index 9875dd2..ac332a4 100644
--- a/apps/app-frontend/src/components/ui/screenshots-page/index.vue
+++ b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
@@ -21,7 +21,6 @@ import {
 import {
 	Avatar,
 	Button,
-	type ButtonMenuOption,
 	type ComboboxOption,
 	commonMessages,
 	ConfirmModal,
@@ -1038,7 +1037,6 @@ function activateScreenshot(screenshot: InstanceScreenshot, event: MouseEvent |
 		(candidate) => getSelectionKey(candidate) === getSelectionKey(screenshot),
 	)
 	if (index >= 0) {
-		screenshotOptionsMenu.value?.close()
 		imageViewer.value?.show(index)
 	}
 }
@@ -1055,44 +1053,34 @@ function requestDelete(screenshot: InstanceScreenshot, fromPreview = false) {
 
 function showScreenshotOptions(screenshot: InstanceScreenshot, event: MouseEvent) {
 	screenshotOptionsTarget.value = screenshot
-	const options: ButtonMenuOption[] = [
-		...(event.type === 'contextmenu'
-			? [
-					{
-						id: 'edit',
-						label: formatMessage(messages.edit),
-						icon: EditIcon,
-						action: () => editScreenshot(screenshot),
-					},
-					{
-						id: 'copy',
-						label: formatMessage(messages.copy),
-						icon: ClipboardCopyIcon,
-						action: () => void copyScreenshot(screenshot),
-					},
-				]
-			: []),
-		{
-			id: 'open',
-			label: formatMessage(messages.showInFolder),
-			icon: FolderOpenIcon,
-			action: () => void openScreenshot(screenshot),
-		},
-		{
-			id: 'go-to-instance',
-			label: formatMessage(messages.goToInstance),
-			action: () => void goToInstance(screenshot),
-		},
+	const options = [
+		...(event.type === 'contextmenu' ? [{ name: 'edit' }, { name: 'copy' }] : []),
+		{ name: 'open' },
+		{ name: 'go-to-instance' },
 		{ type: 'divider' },
-		{
-			id: 'delete',
-			label: formatMessage(commonMessages.deleteLabel),
-			icon: TrashIcon,
-			tone: 'red',
-			action: () => requestDelete(screenshot),
-		},
+		{ name: 'delete', color: 'danger' },
 	]
-	screenshotOptionsMenu.value?.open(event, options)
+	screenshotOptionsMenu.value?.showMenu(event, screenshot, options)
+}
+
+function handleScreenshotOptionClicked({ item, option }: { item: InstanceScreenshot; option: string }) {
+	switch (option) {
+		case 'edit':
+			editScreenshot(item)
+			break
+		case 'copy':
+			void copyScreenshot(item)
+			break
+		case 'open':
+			void openScreenshot(item)
+			break
+		case 'go-to-instance':
+			void goToInstance(item)
+			break
+		case 'delete':
+			requestDelete(item)
+			break
+	}
 }
 
 function goToInstance(screenshot: InstanceScreenshot) {
@@ -1128,7 +1116,6 @@ function editScreenshot(screenshot: InstanceScreenshot) {
 		(candidate) => getSelectionKey(candidate) === getSelectionKey(screenshot),
 	)
 	if (index >= 0) {
-		screenshotOptionsMenu.value?.close()
 		void imageViewer.value?.edit(index)
 	}
 }
@@ -1426,7 +1413,23 @@ onBeforeUnmount(() => {
 		:markdown="false"
 		@proceed="deleteCustomGroup"
 	/>
-	<ContextMenu ref="screenshotOptionsMenu" :label="formatMessage(commonMessages.actionsLabel)">
+	<ContextMenu
+		ref="screenshotOptionsMenu"
+		:label="formatMessage(commonMessages.actionsLabel)"
+		@option-clicked="handleScreenshotOptionClicked"
+	>
+		<template #edit>
+			<EditIcon />
+			{{ formatMessage(messages.edit) }}
+		</template>
+		<template #copy>
+			<ClipboardCopyIcon />
+			{{ formatMessage(messages.copy) }}
+		</template>
+		<template #open>
+			<FolderOpenIcon />
+			{{ formatMessage(messages.showInFolder) }}
+		</template>
 		<template #go-to-instance>
 			<Avatar
 				:src="getInstanceIconUrl(screenshotOptionsInstance?.icon_path)"
@@ -1437,6 +1440,10 @@ onBeforeUnmount(() => {
 			/>
 			{{ formatMessage(messages.goToInstance) }}
 		</template>
+		<template #delete>
+			<TrashIcon />
+			{{ formatMessage(commonMessages.deleteLabel) }}
+		</template>
 	</ContextMenu>
 	<ImageViewerEditor
 		ref="imageViewer"
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 95b10fb..21dab45 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -9922,5 +9922,8 @@
   },
   "unknown-pack-warning-modal.warning.title": {
     "message": "Unknown file warning"
+  },
+  "app.navigation.screenshots": {
+    "message": "Screenshots"
   }
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 9cfa1ee..aa381e9 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -10680,5 +10680,8 @@
   },
   "app.starlight-skin.frame-title": {
     "message": "StarLight 皮肤站"
+  },
+  "app.navigation.screenshots": {
+    "message": "截图"
   }
 }
diff --git a/apps/app-frontend/src/providers/setup.ts b/apps/app-frontend/src/providers/setup.ts
index 157e3f9..849c40d 100644
--- a/apps/app-frontend/src/providers/setup.ts
+++ b/apps/app-frontend/src/providers/setup.ts
@@ -3,6 +3,7 @@ import type { AbstractPopupNotificationManager, AbstractWebNotificationManager }
 import { setupCreationModal } from './setup/creation-modal'
 import { setupFileDropProvider } from './setup/file-drop'
 import { setupFilePickerProvider } from './setup/file-picker'
+import { setupImageViewerEditorProvider } from './setup/image-viewer-editor'
 import { setupInstanceImportProvider } from './setup/instance-import'
 import { setupTagsProvider } from './setup/tags'
 
@@ -14,6 +15,7 @@ export function setupProviders(
 	setupTagsProvider(notificationManager, stateInitialization)
 	const fileDrop = setupFileDropProvider()
 	const filePicker = setupFilePickerProvider()
+	setupImageViewerEditorProvider()
 	setupInstanceImportProvider(notificationManager)
 
 	return {
diff --git a/apps/app-frontend/src/providers/setup/image-viewer-editor.ts b/apps/app-frontend/src/providers/setup/image-viewer-editor.ts
new file mode 100644
index 0000000..64fa153
--- /dev/null
+++ b/apps/app-frontend/src/providers/setup/image-viewer-editor.ts
@@ -0,0 +1,16 @@
+import {
+	type ImageViewerEditorData,
+	type ImageViewerEditorSource,
+	provideImageViewerEditor,
+} from '@modrinth/ui'
+import { readFile } from '@tauri-apps/plugin-fs'
+
+export function setupImageViewerEditorProvider() {
+	provideImageViewerEditor({
+		async loadEditorData(source: ImageViewerEditorSource): Promise<ImageViewerEditorData> {
+			return {
+				source: new Blob([await readFile(source.path)], { type: 'image/png' }),
+			}
+		},
+	})
+}
\ No newline at end of file