feat: 优化调整消息及图片复制

bitporo · Jul 7, 2024 · fe1d5ed · fe1d5ed
1 parent 5b7da69
commit fe1d5ed
Show file tree

Hide file tree

Showing 14 changed files with 131 additions and 111 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,13 @@
+{
+  "editor.gotoLocation.alternativeDeclarationCommand": "editor.action.revealDefinition",
+  "editor.gotoLocation.alternativeDefinitionCommand": "editor.action.revealDefinition",
+  "editor.gotoLocation.alternativeTypeDefinitionCommand": "editor.action.revealDefinition",
+  "editor.selectionHighlight": false,
+  "files.autoSave": "onFocusChange",
+  "editor.suggest.snippetsPreventQuickSuggestions": false,
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "off",
+    "strings": "on"
+  }
+}
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,6 @@
+## 1.2.1（2024-07-7）
+1、增加文本消息快捷复制，直接右键文本消息即会自动选中  
+2、调整图片消息中直接复制图片功能为需在浏览器端点击图片预览后再右键复制    
 ## 1.2.0（2024-07-4）
 1、消息增加图片预览展示及右键复制  
 2、优化下载时的隐藏问题  

diff --git a/electron/index.js b/electron/index.js
@@ -1,5 +1,5 @@
 const { Application } = require('ee-core');
-const { app, Menu, session } = require('electron')
+const { app, Menu, MenuItem, session } = require('electron')
 const http = require('http');
 
 class Index extends Application {
@@ -83,6 +83,16 @@ class Index extends Application {
         win.focus();
       })
     }
+    // 在右键点击时显示上下文菜单
+    win.webContents.on('context-menu', (event, params) => {
+      const menu = new Menu();
+      menu.append(new MenuItem({
+        label: '复制',
+        role: 'copy'
+      }));
+      menu.popup(win);
+    });
+
     // do some things
     session.defaultSession.on('will-download', (downloadevent, item, webContents) => {
       item.on('updated', (event, state) => {

diff --git a/frontend/pages/index/index.vue b/frontend/pages/index/index.vue
@@ -5,13 +5,13 @@
         <div class="time">{{ data.dateTime }}</div>
         <div class="item-content" @contextmenu="onItemRightClick($event, data, index)">
           <view v-if="data.type == 'text'">
-            <text class="content-text">
+            <text :ref="`textRef${index}`" class="content-text">
               {{ data.content }}
             </text>
           </view>
           <div v-else-if="data.type == 'file'" class="file-container">
             <div class="file-block" v-if="data.fileData.mimetype.includes('image')">
-              <Image :src="getUrl(data)" :ref="`imgRef${index}`" alt="图片加载失败" width="100%" preview />
+              <Image :src="getUrl(data)" alt="图片加载失败" width="100%" preview />
               <div style="margin-top: 5px;">
                 <text class="content-text">{{ data.fileData.originalFilename }}</text>
               </div>
@@ -37,7 +37,7 @@
     </div>
     <div class="input-module">
       <Textarea v-model="contentValue" placeholder="请输入内容, Ctrl+Enter可快捷发送" rows="4" style="flex: 1;"
-        @keyup.ctrl.enter="handleSend()" />
+        @keyup.ctrl.enter="handleSend()" @keyup.ctrl.v="handleCopy" />
       <div style="display: flex;flex-direction: column;gap: 10px;">
         <Button icon="pi pi-file-arrow-up" aria-label="传文件" severity="secondary" @click="handleFileChoose" />
         <Button icon="pi pi-send" aria-label="传文本" :loading="loading" @click="handleSend()" />
@@ -91,8 +91,18 @@
         hasSelectContent: false, // 是否有选中文本
         contextMenu: [{
           visible: () => {
-            return !this.hasSelectContent
+            return this.hasSelectContent
           },
+          label: '复制',
+          icon: 'pi pi-copy',
+          command: () => {
+            document.execCommand('copy')
+            uni.showToast({
+              icon: 'success',
+              title: '已复制',
+            })
+          }
+        }, {
           disabled: () => {
             if (!window.process?.versions?.electron) { // 如果不在客户端(electron)内
               return this.onRightClickItem?.ip != getApp().globalData.myIp // 则只有自己发布的才能删除
@@ -115,19 +125,6 @@
               }
             })
           }
-        }, {
-          visible: () => {
-            return this.hasSelectContent
-          },
-          label: '复制',
-          icon: 'pi pi-copy',
-          command: () => {
-            document.execCommand('copy')
-            uni.showToast({
-              icon: 'success',
-              title: '已复制',
-            })
-          }
         }]
       }
     },
@@ -140,10 +137,8 @@
       this.initSSE()
     },
     methods: {
-      handleImageClick(index, item) {
-        item.preview = true
-        this.$refs[`imgRef${index}`][0]
-        // console.log(this.$refs[`imgRef${index}`][0].children)
+      handleCopy(e) {
+        console.log(e);
       },
       ipShow(ip) {
         if (ip == '127.0.0.1') {
@@ -360,15 +355,14 @@
         a.click()
       },
       onItemRightClick(event, itemData, index) {
-        console.log(event)
         const selection = window.getSelection();
-        if (event.target.ariaLabel == 'Zoom Image') { // 如果右键图片
+        if (itemData.type == 'text') { // 如果是文本消息，则自动选中所有文本
           selection.removeAllRanges()
           const range = document.createRange()
-          range.selectNode(this.$refs[`imgRef${index}`][0].rootEl.children[0]);
+          range.selectNode(this.$refs[`textRef${index}`][0].$el);
           selection.addRange(range)
           this.hasSelectContent = true
-        } else if (selection.toString()) { // 非图片复制
+        } else if (selection.toString()) { // 如果是其他消息，但有文本选中
           this.hasSelectContent = true
         } else {
           this.hasSelectContent = false

diff --git a/frontend/responsive/left-window.vue b/frontend/responsive/left-window.vue
@@ -16,7 +16,7 @@
           <Button icon="pi pi-language" text raised rounded aria-label="Language" />
         </view>
         <view style="margin-top: 10px;">
-          <uni-link href="https://easysend.channer.cn/">版本 1.2.0（持续更新中）</uni-link>
+          <uni-link href="https://easysend.channer.cn/">版本 1.2.1（持续更新中）</uni-link>
         </view>
         <view style="margin-top: 10px;">
           Copyright © 2024 EasySend. All Rights Reserved.

diff --git a/frontend/responsive/right-window.vue b/frontend/responsive/right-window.vue
@@ -33,7 +33,7 @@
         <AccordionPanel value="1">
           <AccordionHeader>使用方法</AccordionHeader>
           <AccordionContent class="intro-content">
-            <view>只需在一台主机上启动软件，其余客户端使用浏览器访问“共享访问地址”即可，支持图片预览，右键复制、删除消息图片</view>
+            <view>只需在一台主机上启动软件，其余客户端使用浏览器访问“共享访问地址”即可，支持拖拽发送文件，支持点击图片预览，右键全选复制文本、删除消息，若需要复制图片请在浏览器端，点击图片后右键复制</view>
           </AccordionContent>
         </AccordionPanel>
         <AccordionPanel value="2">
@@ -65,90 +65,90 @@
 </template>
 
 <script>
-import Card from 'primevue/card';
-import Accordion from 'primevue/accordion';
-import AccordionPanel from 'primevue/accordionpanel';
-import AccordionHeader from 'primevue/accordionheader';
-import AccordionContent from 'primevue/accordioncontent';
-export default {
-  components: {
-    Card,
-    Accordion,
-    AccordionPanel,
-    AccordionHeader,
-    AccordionContent
-  },
-  data() {
-    return {
-      urlList: []
-    }
-  },
-  mounted() {
-    this.getHost()
-    this.getMyHost()
-  },
-  methods: {
-    getHost() {
-      uni.request({
-        url: `http://${window.location.hostname}:7071/api` + '/system/getHostIp',
-        method: 'GET'
-      }).then(res => {
-        const ipList = res.data.filter(item => {
-          const arr = item.split('.')
-          // 判断ip最后一位是否为1
-          return !(/^1$/.test(arr[arr.length - 1]))
-        })
-        this.urlList = ipList.map(ip => `http://${ip}:7072`)
-      })
+  import Card from 'primevue/card';
+  import Accordion from 'primevue/accordion';
+  import AccordionPanel from 'primevue/accordionpanel';
+  import AccordionHeader from 'primevue/accordionheader';
+  import AccordionContent from 'primevue/accordioncontent';
+  export default {
+    components: {
+      Card,
+      Accordion,
+      AccordionPanel,
+      AccordionHeader,
+      AccordionContent
     },
-    getMyHost() {
-      uni.request({
-        url: `http://${window.location.hostname}:7071/api` + '/system/getMyIp',
-        method: 'GET'
-      }).then(res => {
-        getApp().globalData.myIp = res.data.ip
-      })
+    data() {
+      return {
+        urlList: []
+      }
     },
-    onCopy(index) {
-      window.getSelection().selectAllChildren(this.$refs.urlLink[index].$el)
-      document.execCommand('copy')
-      uni.showToast({
-        icon: 'none',
-        title: '已复制'
-      })
+    mounted() {
+      this.getHost()
+      this.getMyHost()
     },
-    onQrcode(url) {
-      window.open(url)
+    methods: {
+      getHost() {
+        uni.request({
+          url: `http://${window.location.hostname}:7071/api` + '/system/getHostIp',
+          method: 'GET'
+        }).then(res => {
+          const ipList = res.data.filter(item => {
+            const arr = item.split('.')
+            // 判断ip最后一位是否为1
+            return !(/^1$/.test(arr[arr.length - 1]))
+          })
+          this.urlList = ipList.map(ip => `http://${ip}:7072`)
+        })
+      },
+      getMyHost() {
+        uni.request({
+          url: `http://${window.location.hostname}:7071/api` + '/system/getMyIp',
+          method: 'GET'
+        }).then(res => {
+          getApp().globalData.myIp = res.data.ip
+        })
+      },
+      onCopy(index) {
+        window.getSelection().selectAllChildren(this.$refs.urlLink[index].$el)
+        document.execCommand('copy')
+        uni.showToast({
+          icon: 'none',
+          title: '已复制'
+        })
+      },
+      onQrcode(url) {
+        window.open(url)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-.right-content {
-  font-size: 14px;
-  padding: 20px;
-  display: flex;
-  box-sizing: border-box;
-  height: 100vh;
-  flex-direction: column;
-  justify-content: space-between;
-}
+  .right-content {
+    font-size: 14px;
+    padding: 20px;
+    display: flex;
+    box-sizing: border-box;
+    height: 100vh;
+    flex-direction: column;
+    justify-content: space-between;
+  }
 
-.intro-title {
-  /* padding: 10px 0; */
-  margin-bottom: 10px;
-  font-weight: bold;
-}
+  .intro-title {
+    /* padding: 10px 0; */
+    margin-bottom: 10px;
+    font-weight: bold;
+  }
 
-.intro-content {
-  background-color: var(--p-highlight-color);
-  /*    padding: 15px;
+  .intro-content {
+    background-color: var(--p-highlight-color);
+    /*    padding: 15px;
     color: #666666; */
-}
+  }
 
-.icon-button {
-  cursor: pointer;
-  margin-left: 10px;
-}
+  .icon-button {
+    cursor: pointer;
+    margin-left: 10px;
+  }
 </style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easy-send",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "便捷的局域网共享文本文件小工具，简捷使用，传送方便，仅需一台设备启动，其余设备使用浏览器访问即可使用",
   "main": "main.js",
   "scripts": {

diff --git a/public/dist/assets/index-BqHYs4zx.js → public/dist/assets/index-BlaUdk8_.js b/public/dist/assets/index-BqHYs4zx.js → public/dist/assets/index-BlaUdk8_.js
diff --git a/public/dist/assets/index-BxrxAWer.css → public/dist/assets/index-Cb9ZAycB.css b/public/dist/assets/index-BxrxAWer.css → public/dist/assets/index-Cb9ZAycB.css
diff --git a/public/dist/assets/index-COxUUwhL.css → public/dist/assets/index-e8Nzhdse.css b/public/dist/assets/index-COxUUwhL.css → public/dist/assets/index-e8Nzhdse.css
diff --git a/public/dist/assets/pages-index-index.BwNg1OKb.js b/public/dist/assets/pages-index-index.BwNg1OKb.js
diff --git a/public/dist/assets/pages-index-index.DLhcohUm.js b/public/dist/assets/pages-index-index.DLhcohUm.js
diff --git a/...st/assets/pages-qrcode-qrcode.CxA0xsRg.js → ...st/assets/pages-qrcode-qrcode.DiOmF4_1.js b/...st/assets/pages-qrcode-qrcode.CxA0xsRg.js → ...st/assets/pages-qrcode-qrcode.DiOmF4_1.js
diff --git a/public/dist/index.html b/public/dist/index.html
@@ -14,8 +14,8 @@
     <title>简传</title>
     <!--preload-links-->
     <!--app-context-->
-    <script type="module" crossorigin src="/assets/index-BqHYs4zx.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-COxUUwhL.css">
+    <script type="module" crossorigin src="/assets/index-BlaUdk8_.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-e8Nzhdse.css">
   </head>
   <body>
     <div id="app"><!--app-html--></div>