Close #151

Tauri 不支持关联文件
mantou132 · Jul 2, 2022 · 03dbdb2 · 03dbdb2
1 parent 5e74e2d
commit 03dbdb2
Show file tree

Hide file tree

Showing 15 changed files with 459 additions and 200 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/packages/tauriapp/Info.plist b/packages/tauriapp/Info.plist
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>CFBundleDocumentTypes</key>
+    <array>
+      <dict>
+        <key>CFBundleTypeRole</key>
+        <string>Editor</string>
+        <key>LSItemContentTypes</key>
+        <array>
+          <string>public.nes</string>
+        </array>
+      </dict>
+    </array>
+  </dict>
+</plist>
diff --git a/packages/tauriapp/tauri.conf.json b/packages/tauriapp/tauri.conf.json
@@ -63,6 +63,7 @@
         "title": "NESBox",
         "width": 1024,
         "height": 640,
+        "fileDropEnabled": false,
         "visible": true
       }
     ]

diff --git a/packages/tauriapp/tauri.macos.conf.json b/packages/tauriapp/tauri.macos.conf.json
@@ -4,6 +4,7 @@
       {
         "width": 1024,
         "height": 640,
+        "fileDropEnabled": false,
         "visible": false
       }
     ]

diff --git a/packages/webapp/public/manifest.webmanifest b/packages/webapp/public/manifest.webmanifest
@@ -11,7 +11,7 @@
   "display": "standalone",
   "file_handlers": [
     {
-      "action": "/",
+      "action": "/emulator",
       "name": "NES file",
       "accept": {
         "application/octet-stream": [".nes"]

diff --git a/packages/webapp/src/configure.ts b/packages/webapp/src/configure.ts
@@ -8,7 +8,7 @@ import { localStorageKeys } from 'src/constants';
 import type { ThemeName } from 'src/theme';
 import { GetAccountQuery } from 'src/generated/graphql';
 
-const defaultKeybinding = {
+export const defaultKeybinding = {
   Up: 'w',
   Left: 'a',
   Down: 's',
@@ -70,26 +70,31 @@ interface Configure {
   searchState?: boolean;
   friendChatState?: number;
   usedRelease?: number;
+  openNesFile?: File;
   theme: ThemeName;
   shortcuts: {
     OPEN_SEARCH: Shortcut;
     OPEN_SETTINGS: Shortcut;
   };
 }
 
-export const [configure] = createCacheStore<Configure>(localStorageKeys.CONFIGURE_LOCAL_STORAGE_KEY, {
-  theme: 'default',
-  shortcuts: {
-    OPEN_SEARCH: {
-      win: ['ctrl', 'k'],
-      mac: ['command', 'k'],
-    },
-    OPEN_SETTINGS: {
-      win: ['esc'],
-      mac: ['esc'],
+export const [configure] = createCacheStore<Configure>(
+  localStorageKeys.CONFIGURE_LOCAL_STORAGE_KEY,
+  {
+    theme: 'default',
+    shortcuts: {
+      OPEN_SEARCH: {
+        win: ['ctrl', 'k'],
+        mac: ['command', 'k'],
+      },
+      OPEN_SETTINGS: {
+        win: ['esc'],
+        mac: ['esc'],
+      },
     },
   },
-});
+  { cacheExcludeKeys: ['openNesFile'] },
+);
 
 export function getShortcut(command: keyof Configure['shortcuts'], isDisplay = false) {
   const keys = configure.shortcuts[command][isMac ? 'mac' : 'win'];
@@ -120,3 +125,7 @@ export const toggoleSettingsState = () => {
 export const toggoleSearchState = () => {
   updateStore(configure, { searchState: !configure.searchState });
 };
+
+export const setNesFile = (file?: File) => {
+  updateStore(configure, { openNesFile: file });
+};
diff --git a/packages/webapp/src/constants.ts b/packages/webapp/src/constants.ts
@@ -25,7 +25,7 @@ export const queryKeys = {
 // clean outdate cache data
 [].forEach((key) => localStorage.removeItem(key));
 export const localStorageKeys = {
-  CONFIGURE_LOCAL_STORAGE_KEY: 'configure_v3',
+  CONFIGURE_LOCAL_STORAGE_KEY: 'configure_v4',
   STORE_LOCAL_STORAGE_KEY: 'store_v2',
   FRIEND_CHAT_STORAGE_KEY: 'friend_chat_v2',
 };

diff --git a/packages/webapp/src/drop.ts b/packages/webapp/src/drop.ts
@@ -0,0 +1,21 @@
+import { history } from '@mantou/gem';
+import { createPath } from 'duoyun-ui/elements/route';
+
+import { setNesFile } from 'src/configure';
+import { routes } from 'src/routes';
+import { matchRoute } from 'src/utils';
+
+window.launchQueue?.setConsumer(async (launchParams: any) => {
+  if (!launchParams.files.length) return;
+
+  // https://github.com/WICG/file-system-access/blob/master/EXPLAINER.md#example-code
+  const files = await Promise.all(launchParams.files.map((h: any) => h.getFile()));
+  dropHandler(files);
+});
+
+export const dropHandler = (files: File[]) => {
+  if (!matchRoute(routes.emulator)) {
+    history.push({ path: createPath(routes.emulator) });
+  }
+  setNesFile(files.find((e) => e.name.toLowerCase().endsWith('.nes')));
+};
diff --git a/packages/webapp/src/index.ts b/packages/webapp/src/index.ts
@@ -1,16 +1,17 @@
-import { html, render, history, styleMap } from '@mantou/gem';
+import { html, render, styleMap } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 import { Toast } from 'duoyun-ui/elements/toast';
-import { matchPath, RouteItem } from 'duoyun-ui/elements/route';
+import { DuoyunDropAreaElement } from 'duoyun-ui/elements/drop-area';
 
 import { theme } from 'src/theme';
 import { configure } from 'src/configure';
 import { COMMAND, isTauriMacApp, isTauriWinApp, RELEASE } from 'src/constants';
 import { logger } from 'src/logger';
 import { routes } from 'src/routes';
 import { gotoRedirectUri, isExpiredProfile, logout } from 'src/auth';
-import { isInputElement } from 'src/utils';
+import { isInputElement, matchRoute } from 'src/utils';
 import { listener } from 'src/gamepad';
+import { dropHandler } from 'src/drop';
 
 import 'src/modules/meta';
 
@@ -20,14 +21,12 @@ logger.info('MODE\t', import.meta.env.MODE);
 logger.info('RELEASE\t', RELEASE);
 logger.info('COMMAND\t', COMMAND);
 
-const match = (route: RouteItem) => matchPath(route.pattern, history.getParams().path);
-
-if ([routes.login, routes.register].some(match)) {
+if ([routes.login, routes.register].some(matchRoute)) {
   if (configure.profile) {
     gotoRedirectUri();
   }
-} else if ([routes.download].some(match)) {
-  //
+} else if ([routes.download, routes.emulator].some(matchRoute)) {
+  logger.info('Welcome!');
 } else if (!configure.profile || isExpiredProfile(configure.profile)) {
   logout(true);
 }
@@ -54,6 +53,11 @@ render(
         color: ${theme.textColor};
         background-color: ${theme.backgroundColor};
       }
+      dy-drop-area {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+      }
       @media ${mediaQuery.DESKTOP} {
         body {
           font-size: 1.1rem;
@@ -74,22 +78,27 @@ render(
           ></m-titlebar>
         `
       : ''}
-    <dy-route
-      @contextmenu=${(e: Event) => e.preventDefault()}
-      .routes=${[
-        routes.login,
-        routes.register,
-        routes.download,
-        {
-          pattern: '*',
-          getContent() {
-            import('src/app');
-            return html`<app-root></app-root>`;
-          },
-        },
-      ]}
+    <dy-drop-area
+      @change=${(evt: CustomEvent<File[]>) => evt.target instanceof DuoyunDropAreaElement && dropHandler(evt.detail)}
     >
-    </dy-route>
+      <dy-route
+        @contextmenu=${(e: Event) => e.preventDefault()}
+        .routes=${[
+          routes.login,
+          routes.register,
+          routes.download,
+          routes.emulator,
+          {
+            pattern: '*',
+            getContent() {
+              import('src/app');
+              return html`<app-root></app-root>`;
+            },
+          },
+        ]}
+      >
+      </dy-route>
+    </dy-drop-area>
   `,
   document.body,
 );

diff --git a/packages/webapp/src/modules/settings.ts b/packages/webapp/src/modules/settings.ts
@@ -70,7 +70,7 @@ export class MSettingsElement extends GemElement<State> {
             tab: i18n.get('accountSetting'),
             getContent() {
               return html`
-                <dy-tab-panel style="scrollbar-width: none">
+                <dy-tab-panel>
                   <m-account-settings></m-account-settings>
                 </dy-tab-panel>
               `;
@@ -80,7 +80,7 @@ export class MSettingsElement extends GemElement<State> {
             tab: i18n.get('keySetting'),
             getContent() {
               return html`
-                <dy-tab-panel style="scrollbar-width: none">
+                <dy-tab-panel>
                   <m-keybinding></m-keybinding>
                 </dy-tab-panel>
               `;
@@ -90,7 +90,7 @@ export class MSettingsElement extends GemElement<State> {
             tab: i18n.get('soundSetting'),
             getContent() {
               return html`
-                <dy-tab-panel style="scrollbar-width: none">
+                <dy-tab-panel>
                   <m-sound-settings></m-sound-settings>
                 </dy-tab-panel>
               `;
@@ -100,7 +100,7 @@ export class MSettingsElement extends GemElement<State> {
             tab: i18n.get('license'),
             getContent() {
               return html`
-                <dy-tab-panel style="scrollbar-width: none">
+                <dy-tab-panel>
                   MIT License Copyright (c) 2021-present Permission is hereby granted, free of charge, to any person
                   obtaining a copy of this software and associated documentation files (the "Software"), to deal in the
                   Software without restriction, including without limitation the rights to use, copy, modify, merge,