修改移动端部分交互

Close #58
TransparentLC · Nov 15, 2024 · 1083dc5 · 1083dc5
1 parent 825c82d
commit 1083dc5
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git a/client/package.json b/client/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
-    "core-js": "^3.38.1",
+    "core-js": "^3.39.0",
     "vue": "^2.7.16",
     "vue-axios": "^2.1.5",
     "vue-linkify": "^1.0.1",
@@ -24,7 +24,7 @@
     "cross-env": "^7.0.3",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
-    "sass": "~1.79.5",
+    "sass": "^1.81.0",
     "sass-loader": "^10.5.2",
     "typeface-roboto": "^1.1.13",
     "vue-cli-plugin-vuetify": "^2.5.8",

diff --git a/client/src/components/SendFile.vue b/client/src/components/SendFile.vue
@@ -48,7 +48,7 @@
                     color="primary"
                     large
                     class="d-block mx-auto"
-                    @click="$refs.selectFile.click()"
+                    @click="focus"
                 >
                     <div title="支持拖拽和 Ctrl+V 粘贴截图">
                         选择要发送的文件<span class="d-none d-xl-inline">（支持拖拽和 Ctrl+V 粘贴截图）</span>
@@ -110,6 +110,9 @@ export default {
         },
     },
     methods: {
+        focus() {
+            this.$refs.selectFile.click();
+        },
         /**
          * @param {File[]} files
          */

diff --git a/client/src/components/SendText.vue b/client/src/components/SendText.vue
@@ -2,6 +2,7 @@
     <div>
         <div class="headline text--primary mb-4">发送文本</div>
         <v-textarea
+            ref="textarea"
             no-resize
             outlined
             dense
@@ -25,6 +26,9 @@
 export default {
     name: 'send-text',
     methods: {
+        focus() {
+            this.$refs.textarea.focus();
+        },
         send() {
             this.$http.post(
                 'text',

diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
@@ -34,10 +34,10 @@
                     <v-icon>{{mdiPlus}}</v-icon>
                 </v-btn>
             </template>
-            <v-btn fab dark small color="primary" @click="dialog = true; mode = 'file'">
+            <v-btn fab dark small color="primary" @click="dialog = true; mode = 'file'; $nextTick(() => $refs.dialogFile.focus())">
                 <v-icon>{{mdiFileDocumentOutline}}</v-icon>
             </v-btn>
-            <v-btn fab dark small color="primary" @click="dialog = true; mode = 'text'">
+            <v-btn fab dark small color="primary" @click="dialog = true; mode = 'text'; $nextTick(() => $refs.dialogText.focus())">
                 <v-icon>{{mdiText}}</v-icon>
             </v-btn>
         </v-speed-dial>
@@ -59,8 +59,8 @@
                 </v-toolbar>
                 <v-card-text class="px-4">
                     <div class="my-4">
-                        <send-text v-if="mode === 'text'"></send-text>
-                        <send-file v-if="mode === 'file'"></send-file>
+                        <send-text ref="dialogText" v-if="mode === 'text'"></send-text>
+                        <send-file ref="dialogFile" v-if="mode === 'file'"></send-file>
                     </div>
                 </v-card-text>
             </v-card>
@@ -98,5 +98,20 @@ export default {
             mdiClose,
         };
     },
+    methods: {
+        closeDialog() {
+            this.dialog = false;
+        },
+    },
+    watch: {
+        dialog(newval) {
+            if (newval) {
+                history.pushState(null, null, location.href);
+                addEventListener('popstate', this.closeDialog);
+            } else {
+                removeEventListener('popstate', this.closeDialog);
+            }
+        },
+    },
 }
 </script>
diff --git a/server-node/package.json b/server-node/package.json
@@ -18,6 +18,6 @@
     "koa-static": "^5.0.0",
     "koa-websocket": "^7.0.0",
     "sharp": "^0.33.5",
-    "ua-parser-js": "2.0.0-beta.3"
+    "ua-parser-js": "2.0.0-rc.3"
   }
 }