feat(gui-v2): split into components to make toolbar clean

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+const { api } = useApi()
+
+async function deleteCache() {
+  try {
+    await api.utils.cacheDelete()
+    message.info('Deleted Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+</script>
+
+<template>
+  <a-tooltip>
+    <template #title>
+      <span> Delete Cache </span>
+    </template>
+    <mdi-delete class="cursor-pointer mx-3" @click="deleteCache" />
+  </a-tooltip>
+</template>

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import FileSaver from 'file-saver'
+
+const { api } = useApi()
+
+async function exportCache() {
+  try {
+    const data = await api.utils.cacheGet()
+    if (!data) {
+      message.info('Cache is empty')
+      return
+    }
+    const blob = new Blob([JSON.stringify(data)], {
+      type: 'text/plain;charset=utf-8',
+    })
+    FileSaver.saveAs(blob, 'cache_exported.json')
+    message.info('Exported Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+</script>
+
+<template>
+  <!-- Export Cache -->
+  <a-tooltip>
+    <template #title>
+      <span> Export Cache </span>
+    </template>
+    <mdi-export class="cursor-pointer mx-3" @click="exportCache" />
+  </a-tooltip>
+</template>

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@@ -1,43 +1,15 @@
 <script lang="ts" setup>
-import FileSaver from 'file-saver'
-import { message } from 'ant-design-vue'
 import AddRow from './AddRow.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
+import ExportCache from './ExportCache.vue'
+import DeleteCache from './DeleteCache.vue'
 
 const { isUIAllowed } = useUIPermission()
 
-const { api } = useApi()
-
 const debug = $ref(false)
 
 const clickCount = $ref(0)
-
-async function exportCache() {
-  try {
-    const data = await api.utils.cacheGet()
-    if (!data) {
-      message.info('Cache is empty')
-      return
-    }
-    const blob = new Blob([JSON.stringify(data)], {
-      type: 'text/plain;charset=utf-8',
-    })
-    FileSaver.saveAs(blob, 'cache_exported.json')
-    message.info('Exported Cache Successfully')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
-
-async function deleteCache() {
-  try {
-    await api.utils.cacheDelete()
-    message.info('Deleted Cache Successfully')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
 </script>
 
 <template>
@@ -51,26 +23,19 @@ async function deleteCache() {
     "
   >
     <slot name="start" />
-    <div class="pt-2">
-      <!-- Export Cache -->
-      <a-tooltip v-if="debug">
-        <template #title>
-          <span class="caption"> Export Cache </span>
-        </template>
-        <mdi-export class="cursor-pointer mx-3" @click="exportCache" />
-      </a-tooltip>
 
-      <!-- Delete Cache -->
-      <a-tooltip v-if="debug">
-        <template #title>
-          <span class="caption"> Delete Cache </span>
-        </template>
-        <mdi-delete class="cursor-pointer mx-3" @click="deleteCache" />
-      </a-tooltip>
+    <template v-if="debug">
+      <ExportCache />
+
+      <div class="dot" />
+
+      <DeleteCache />
+
+      <div class="dot" />
 
       <!-- TODO: -->
       <!-- <debug-metas v-if="debug" class="mr-3" /> -->
-    </div>
+    </template>
 
     <LockMenu v-if="isUIAllowed('view-type')" />