Auto-saving in the local storage mode.

Fix some UI bugs.

manifest.json

@@ -10,6 +10,6 @@
 	],
 	"menu": [
 		{"name": "Tag", "command": "node"},
-		{"name": "Search", "command": "lookup"}
+		{"name": "Preview", "command": "lookup"}
 	]
-}
+}

src/ui/component/LoadingWithContent.vue

@@ -1,17 +1,19 @@
 <template>
   <div>
     <slot></slot>
-    <div v-if="loading" class="loading-wrapper">
-      <LoadingIcon />
-      <p style="padding-bottom: 16px"> {{ msg }} </p>
-    </div>
+    <transition name="fade">
+      <div v-if="realLoading" class="loading-wrapper">
+        <LoadingIcon />
+        <p style="padding-bottom: 16px"> {{ msg }} </p>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script lang="ts">
 
 import LoadingIcon from "./LoadingIcon.vue";
-import {watchEffect} from "vue";
+import {ref, watchEffect} from "vue";
 export default {
   name: "LoadingWithContent",
   components: { LoadingIcon },
@@ -20,9 +22,20 @@ export default {
     msg: String
   },
   setup(props) {
+    const realLoading = ref(false);
     watchEffect(() => {
       console.log('loading', props.loading, props.msg);
+      if (realLoading.value) {
+        realLoading.value = props.loading;
+      } else {
+        setTimeout(() => {
+          if (props.loading && !realLoading.value) {
+            realLoading.value = props.loading;
+          }
+        }, 50);
+      }
     });
+    return { realLoading };
   }
 }
 
@@ -49,4 +62,14 @@ export default {
   color: rgba(0, 0, 0, .65);
 }
 
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
 </style>

src/ui/component/select/TkSelect.vue

@@ -266,7 +266,7 @@ export default {
   background-color: #fff;
   border-radius: 2px;
   padding: 4px 0;
-  overflow: scroll;
+  overflow-y: auto;
   z-index: 999;
 }
 

src/ui/pagenode/PageNode.vue

@@ -7,7 +7,7 @@
       @page-settings="openSettings"
   />
   <PageNodeFooter
-      v-if="fileId && !loading" :show-del="node?.saved"
+      v-if="fileId && !loading && provider.type !== 'local'" :show-del="node?.saved"
       @save="toSave"
       @delete="toDelete"
   />
@@ -26,7 +26,7 @@
             v-for="tag in collectTags"
             :tag="tag"
             :removable="true"
-            @remove="tag.check = !tag.check"
+            @remove="removeTag(tag)"
         >
         </FigTag>
       </div>
@@ -39,6 +39,7 @@
             @delete-tag-type="deleteTagType"
             @edit-tag="editTag"
             @delete-tag="deleteTag"
+            @select-tag="selectTag"
             :toggle-page="togglePage"
         />
       </div>
@@ -204,6 +205,9 @@ export default {
           return; // 重复了
         }
         Utils.newTagToTagTree(tagTree.value, tagType, tag);
+        if (provider.type === 'local') {
+          toSave();
+        }
       } else {
         throw "tagTree is undefined";
       }
@@ -227,6 +231,9 @@ export default {
         await provider.updateFullTags(fullTags.value, tagRenames);
         await reloadNode(true, true);
         loading.value = undefined;
+        if (provider.type === 'local') {
+          await toSave();
+        }
       } catch (e) {
         loading.value = t('loading.error');
         console.error(e);
@@ -250,6 +257,9 @@ export default {
         await provider.updateFullTags(fullTags.value, {});
         await reloadNode(true, true);
         loading.value = undefined;
+        if (provider.type === 'local') {
+          await toSave();
+        }
       } catch (e) {
         loading.value = t('loading.error');
         console.error(e);
@@ -285,6 +295,9 @@ export default {
         fullTags.value.delete(tagType);
         await provider.updateFullTags(fullTags.value, {});
         await reloadNode(true, true);
+        if (provider.type === 'local') {
+          await toSave();
+        }
       } catch (e) {
         loading.value = t('loading.error');
         console.error(e);
@@ -313,6 +326,21 @@ export default {
       }
     }
 
+    const removeTag = (tag: Context.Tag) => {
+      tag.check = false;
+      selectTag('', tag, false);
+    }
+
+    const selectTag = (type: string, tag: Context.Tag, check: boolean) => {
+      if (provider.type === 'local') {
+        if (collectTags.value.length == 0) {
+          toDelete();
+        } else {
+          toSave();
+        }
+      }
+    }
+
     // 保存Node
     const toSave = async (force: boolean = false) => {
       console.log("toSave", tagTree.value);
@@ -351,7 +379,9 @@ export default {
           fullTags: JSON.stringify([...fullTags.value]),
           node: JSON.stringify(node.value)
         });
-        dispatch('notify', t('saving.notify', [node.value.title]));
+        if (provider.type !== 'local') {
+          dispatch('notify', t('saving.notify', [node.value.title]));
+        }
       } catch (e) {
         loading.value = t('loading.error');
         console.error(e);
@@ -399,7 +429,7 @@ export default {
 
     return {
       provider, loading, fileId, currentSelection, fullTags, node, tagTree, collectTags, accessModal,
-      reloadNode, onSetFileId, addTag, editTag, deleteTag, addTagType, deleteTagType, editTypeName, toSave, toDelete, openSettings, accessModalIgnore, accessModalSubmit
+      reloadNode, onSetFileId, addTag, editTag, deleteTag, addTagType, deleteTagType, editTypeName, removeTag, selectTag, toSave, toDelete, openSettings, accessModalIgnore, accessModalSubmit
     }
 
   }
@@ -447,7 +477,8 @@ export default {
   align-items: flex-start;
   flex-flow: wrap;
   transition: all 500ms ease;
-  overflow: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
   max-height: 110px;
 }
 

src/ui/pageselect/PageSelect.vue

@@ -167,7 +167,7 @@ export default {
   background: white;
   margin: 0;
   padding: 4px 0;
-  overflow: scroll;
+  overflow: auto;
   border-right: 1px #E0E0E0 solid;
 
   display: flex;