commit 054e3b82ed71cd89e31b4c3ff6006d3181fe3f53
author Amy0104 <amywang0104@163.com> Tue Sep 13 11:04:12 2022 +0800
committer GitHub <noreply@github.com> Tue Sep 13 11:04:12 2022 +0800
tree 967c73f93a7763877c6a72861f101fac95ca9ad1
parent ba878b43896f180701ce21d4a007c820dcbb9ec8

[Feature] Add dblclick. (#15)

studio/components/files/index.tsx

diff --git a/studio/components/files/index.tsx b/studio/components/files/index.tsx
index f9ded12..9228e00 100644
--- a/studio/components/files/index.tsx
+++ b/studio/components/files/index.tsx
@@ -22,7 +22,8 @@
   VNodeChild,
   Ref,
   ref,
-  onMounted
+  onMounted,
+  onUnmounted
 } from 'vue'
 import { NTree, NInput, NDropdown } from 'naive-ui'
 import { FILE_TYPES_SUFFIX } from '@/constants/file'
@@ -47,7 +48,7 @@
 export const Files = defineComponent({
   name: 'files',
   props,
-  emits: ['select', 'inputBlur', 'delete', 'rename'],
+  emits: ['select', 'inputBlur', 'delete', 'rename', 'doubleClick'],
   setup(props, { emit, expose }) {
     const keyRef = ref()
     const treeRef = ref()
@@ -74,7 +75,7 @@
     const renderLabel = (info: { option: TreeOption }): VNodeChild => {
       const { isEditing, name, type, id } = info.option as IFileRecord
       return !isEditing
-        ? h('div', { 'data-id': id }, type ? getNameByType(type, name) : '')
+        ? h('div', { 'data-id': id }, type ? getNameByType(type, name) : name)
         : h(
             NInput,
             {
@@ -107,9 +108,19 @@
     const onClickoutside = () => {
       showDropdownRef.value = false
     }
+    const onDoubleClick = (ev: MouseEvent) => {
+      id = (ev.target as HTMLElement)?.dataset.id
+      if (id) emit('doubleClick', id)
+    }
 
     onMounted(() => {
       treeRef.value?.selfElRef.addEventListener('contextmenu', onContextMenu)
+      treeRef.value?.selfElRef.addEventListener('dblclick', onDoubleClick)
+    })
+
+    onUnmounted(() => {
+      treeRef.value?.selfElRef.removeEventListener('contextmenu', onContextMenu)
+      treeRef.value?.selfElRef.removeEventListener('dblclick', onDoubleClick)
     })
 
     return () => (

studio/components/studio-sider/index.tsx

diff --git a/studio/components/studio-sider/index.tsx b/studio/components/studio-sider/index.tsx
index 1a27d14..4b4111a 100644
--- a/studio/components/studio-sider/index.tsx
+++ b/studio/components/studio-sider/index.tsx
@@ -36,7 +36,8 @@
       onSelectFile,
       onInputBlur,
       onDelete,
-      onRename
+      onRename,
+      onDoubleClick
     } = useFile(inputRef, fileRef)
 
     const onSearch = (value: string) => {
@@ -71,6 +72,7 @@
             onInputBlur={onInputBlur}
             onDelete={onDelete}
             onRename={onRename}
+            onDoubleClick={onDoubleClick}
             inputRef={inputRef}
             selected-keys={[state.currentKey]}
             ref={fileRef}

studio/components/studio-sider/use-file.ts

diff --git a/studio/components/studio-sider/use-file.ts b/studio/components/studio-sider/use-file.ts
index a585387..0a10205 100644
--- a/studio/components/studio-sider/use-file.ts
+++ b/studio/components/studio-sider/use-file.ts
@@ -200,6 +200,17 @@
     refreshFiles()
   }
 
+  const onDoubleClick = (id: number) => {
+    const currentRecord = filesCached[id]
+    if (!currentRecord.type) return
+    if (currentRecord.isEditing) return
+    fileStore.openFile({
+      id,
+      name: getNameByType(currentRecord.type, currentRecord.name),
+      content: ''
+    })
+  }
+
   onMounted(() => {
     pullFiles()
   })
@@ -211,6 +222,7 @@
     onSelectFile,
     onInputBlur,
     onDelete,
-    onRename
+    onRename,
+    onDoubleClick
   }
 }