Feat：支持添加附件

wanglin2 · Apr 1, 2024 · c0e0f0c · c0e0f0c
1 parent ac31a26
commit c0e0f0c
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 11 deletions.
diff --git a/web/src/electron/fileHandle.js b/web/src/electron/fileHandle.js
@@ -127,6 +127,22 @@ export const bindFileHandleEvent = ({ mainWindow }) => {
     }
   })
 
+  // 选择本地文件
+  ipcMain.handle('selectFile', event => {
+    const res = dialog.showOpenDialogSync({
+      title: '选择'
+    })
+    if (res && res[0]) {
+      console.log(111, res[0])
+      return {
+        file: res[0],
+        name: path.basename(res[0])
+      }
+    } else {
+      return null
+    }
+  })
+
   // 获取文件内容
   ipcMain.handle('getFileContent', (event, id) => {
     return new Promise(resolve => {
@@ -213,6 +229,15 @@ export const bindFileHandleEvent = ({ mainWindow }) => {
     shell.showItemInFolder(file)
   })
 
+   // 打开指定文件
+   ipcMain.handle('openPath', (event, file) => {
+    const exist = fs.existsSync(file)
+    if (!exist) {
+      return '文件不存在'
+    }
+    shell.openPath(file)
+  })
+
   // 删除指定文件
   ipcMain.handle('deleteFile', (event, file) => {
     let res = ''

diff --git a/web/src/electron/preload.js b/web/src/electron/preload.js
@@ -14,7 +14,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   save: (id, data, fileName) => ipcRenderer.invoke('save', id, data, fileName),
   rename: (id, name) => ipcRenderer.invoke('rename', id, name),
   openUrl: url => ipcRenderer.send('openUrl', url),
-  addRecentFileList: (fileList) => ipcRenderer.invoke('addRecentFileList', fileList),
+  addRecentFileList: fileList =>
+    ipcRenderer.invoke('addRecentFileList', fileList),
   getRecentFileList: () => ipcRenderer.invoke('getRecentFileList'),
   clearRecentFileList: () => ipcRenderer.invoke('clearRecentFileList'),
   openFileInDir: file => ipcRenderer.invoke('openFileInDir', file),
@@ -23,5 +24,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     ipcRenderer.on('refreshRecentFileList', callback),
   openFile: file => ipcRenderer.invoke('openFile', file),
   selectOpenFile: () => ipcRenderer.send('selectOpenFile'),
-  copyFile: file => ipcRenderer.invoke('copyFile', file)
+  copyFile: file => ipcRenderer.invoke('copyFile', file),
+  selectFile: () => ipcRenderer.invoke('selectFile'),
+  openPath: path => ipcRenderer.invoke('openPath', path) 
 })
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
@@ -336,6 +336,7 @@ export default {
     formatTip: 'Format complete'
   },
   attachment: {
-    deleteAttachment: 'Delete attachment'
+    deleteAttachment: 'Delete attachment',
+    openFileInDir: 'Show in dir'
   }
 }
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
@@ -330,6 +330,7 @@ export default {
     formatTip: '格式化完成'
   },
   attachment: {
-    deleteAttachment: '删除附件'
+    deleteAttachment: '删除附件',
+    openFileInDir: '在目录中显示'
   }
 }
diff --git a/web/src/pages/Edit/components/NodeAttachment.vue b/web/src/pages/Edit/components/NodeAttachment.vue
@@ -6,9 +6,14 @@
       top: this.top + 'px',
       visibility: show ? 'visible' : 'hidden'
     }"
-    @click.stop="deleteAttachment"
+    @click.stop
   >
-    <div class="menuItem">{{ $t('attachment.deleteAttachment') }}</div>
+    <div class="menuItem" @click="openFileInDir">
+      {{ $t('attachment.openFileInDir') }}
+    </div>
+    <div class="menuItem" @click="deleteAttachment">
+      {{ $t('attachment.deleteAttachment') }}
+    </div>
   </div>
 </template>
 
@@ -61,15 +66,37 @@ export default {
   },
   methods: {
     // 选择附件
-    onSelectAttachment(activeNodes) {
+    async onSelectAttachment(activeNodes) {
       // activeNodes.forEach(node => {
       //   node.setAttachment('/test.md', '我去')
       // })
+      const file = await window.electronAPI.selectFile()
+      if (file) {
+        activeNodes.forEach(node => {
+          node.setAttachment(file.file, file.name)
+        })
+      }
     },
 
     // 点击附件图标，一般用来打开或下载附件
-    onNodeAttachmentClick(node, e, icon) {
+    async onNodeAttachmentClick(node, e, icon) {
       // console.log(node.getData('attachmentUrl'))
+      const file = node.getData('attachmentUrl')
+      if (!file) return
+      const error = await window.electronAPI.openPath(file)
+      if (error) {
+        this.$message.error(error)
+      }
+    },
+
+    // 在目录中显示
+    async openFileInDir() {
+      if (!this.node || !this.show) return
+      const file = this.node.getData('attachmentUrl')
+      const error = await window.electronAPI.openFileInDir(file)
+      if (error) {
+        this.$message.error(error)
+      }
     },
 
     // 显示删除浮层
@@ -116,7 +143,7 @@ export default {
 .nodeAttachmentContextMenu {
   position: fixed;
   background-color: #fff;
-  padding: 10px;
+  padding: 10px 0;
   border-radius: 5px;
   box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
   border: 1px solid rgba(0, 0, 0, 0.06);
@@ -128,6 +155,13 @@ export default {
     color: #1a1a1a;
     cursor: pointer;
     user-select: none;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 10px;
+
+    &:hover {
+      background: #f5f5f5;
+    }
   }
 }
 </style>
diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue
@@ -183,8 +183,8 @@ export default {
         'tag',
         'summary',
         'associativeLine',
-        'formula'
-        // 'attachment'
+        'formula',
+        'attachment'
       ],
       horizontalList: [],
       verticalList: [],