fix: 修复截图中心菜单/编辑不可用与导航项缺中文

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[] = [
+	const options = [
-		...(event.type === 'contextmenu'
+		...(event.type === 'contextmenu' ? [{ name: 'edit' }, { name: 'copy' }] : []),
-			? [
+		{ name: 'open' },
-					{
+		{ name: 'go-to-instance' },
-						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),
-		},
 		{ type: 'divider' },
-		{
+		{ name: 'delete', color: 'danger' },
-			id: 'delete',
-			label: formatMessage(commonMessages.deleteLabel),
-			icon: TrashIcon,
-			tone: 'red',
-			action: () => requestDelete(screenshot),
-		},
 	]
-	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"

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"
   }
 }

apps/app-frontend/src/locales/zh-CN/index.json

@@ -10680,5 +10680,8 @@
   },
   "app.starlight-skin.frame-title": {
     "message": "StarLight 皮肤站"
+  },
+  "app.navigation.screenshots": {
+    "message": "截图"
   }
 }

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 {

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' }),
+			}
+		},
+	})
+}