feat(file-tree): optimize UX

Aventador945 · Nov 28, 2022 · c13cb40 · c13cb40
1 parent 5c9114f
commit c13cb40
Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/renderer/components/Tree.vue b/src/renderer/components/Tree.vue
@@ -6,7 +6,7 @@
     @dblclick="refresh"
     ref="asideRef"
     :title="$t('tree.db-click-refresh')">
-    <div class="loading" v-if="tree === null"> {{$t('loading')}} </div>
+    <div class="loading" v-if="loadingVisible"> {{$t('loading')}} </div>
     <template v-else>
       <TreeNode v-for="item in tree" :item="item" :key="item.path" />
     </template>
@@ -22,6 +22,7 @@
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 import { useStore } from 'vuex'
+import { useLazyRef } from '@fe/utils/composable'
 import { useContextMenu } from '@fe/support/ui/context-menu'
 import { refreshTree } from '@fe/services/tree'
 import { fetchSettings, showSettingPanel } from '@fe/services/setting'
@@ -40,7 +41,9 @@ export default defineComponent({
     const contextMenu = useContextMenu()
     const asideRef = ref<HTMLElement>()
 
-    const { currentRepo, tree } = toRefs(store.state)
+    const currentRepo = computed(() => store.state.currentRepo)
+    const tree = useLazyRef(() => store.state.tree, val => val ? -1 : 200)
+    const loadingVisible = useLazyRef(() => store.state.tree === null, val => val ? 200 : 100)
     const hasRepo = computed(() => !!currentRepo.value)
 
     async function refresh () {
@@ -95,6 +98,7 @@ export default defineComponent({
       asideRef,
       tree,
       refresh,
+      loadingVisible,
       showContextMenu,
       showSettingPanel,
       hasRepo,

diff --git a/src/renderer/components/TreeNode.vue b/src/renderer/components/TreeNode.vue
@@ -20,7 +20,7 @@
         @contextmenu.exact.prevent.stop="showContextMenu(itemNode)">
         <div class="item">
           <div class="item-label" draggable="true" @dragstart="onDragStart">
-            {{ itemNode.name === '/' ? currentRepoName : itemNode.name }} <span class="count">({{itemNode.children ? itemNode.children.length : 0}})</span>
+            {{ itemNode.name }} <span class="count">({{itemNode.children ? itemNode.children.length : 0}})</span>
           </div>
           <div class="item-action">
             <svg-icon class="icon" name="folder-plus-solid" @click.exact.stop.prevent="createFolder()" :title="$t('tree.context-menu.create-dir')"></svg-icon>
@@ -62,6 +62,7 @@ import { createDir, createDoc, deleteDoc, duplicateDoc, isMarkdownFile, isMarked
 import { useI18n } from '@fe/services/i18n'
 import { dirname, extname, isBelongTo, join } from '@fe/utils/path'
 import { useToast } from '@fe/support/ui/toast'
+import type { AppState } from '@fe/support/store'
 import SvgIcon from './SvgIcon.vue'
 
 export default defineComponent({
@@ -76,7 +77,7 @@ export default defineComponent({
   setup (props) {
     const { t } = useI18n()
 
-    const store = useStore()
+    const store = useStore<AppState>()
     const toast = useToast()
 
     const refFile = ref<any>(null)
@@ -90,7 +91,7 @@ export default defineComponent({
       localMarked.value = null
     })
 
-    const { currentFile, currentRepo } = toRefs(store.state)
+    const currentFile = computed(() => store.state.currentFile)
 
     async function createFile () {
       await createDoc({ repo: props.item.repo }, props.item)
@@ -285,8 +286,6 @@ export default defineComponent({
       }
     }
 
-    const currentRepoName = computed(() => currentRepo.value?.name ?? '/')
-
     const selected = computed(() => {
       if (!currentFile.value) {
         return false
@@ -331,7 +330,6 @@ export default defineComponent({
       itemNode,
       refFile,
       fileTitle,
-      currentRepoName,
       selected,
       onTreeNodeDblClick,
       marked,

diff --git a/src/renderer/services/tree.ts b/src/renderer/services/tree.ts
@@ -47,6 +47,11 @@ export async function refreshTree () {
 
   try {
     const tree = await api.fetchTree(repo.name, store.state.treeSort || { by: 'serial', order: 'asc' })
+
+    if (tree.length > 0 && tree[0].name === '/') {
+      tree[0].name = repo.name
+    }
+
     store.commit('setTree', tree)
   } catch (error: any) {
     useToast().show('warning', error.message)