feat: add file toolbar (#127)

feat: add file toolbar

Refs: #16

---------

Signed-off-by: seven <[email protected]>

components.d.ts

@@ -45,6 +45,7 @@ declare module 'vue' {
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterMain: typeof import('./src/components/RouterMain.vue')['default']
     RouterView: typeof import('vue-router')['RouterView']

src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "1.5", features = [] }
 
 [dependencies]
-tauri = { version = "1.7", features = [ "fs-create-dir", "global-shortcut-all", "http-all", "fs-exists", "fs-read-file", "fs-write-file", "shell-open"] }
+tauri = { version = "1.7", features = [ "dialog-open", "fs-create-dir", "global-shortcut-all", "http-all", "fs-exists", "fs-read-file", "fs-write-file", "shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }

src-tauri/tauri.conf.json

@@ -37,6 +37,9 @@
       },
       "globalShortcut": {
         "all": true
+      },
+      "dialog": {
+        "open": true
       }
     },
     "windows": [

src/layout/components/the-aside.vue

@@ -78,7 +78,7 @@ const mainNavList = ref([
   },
   {
     id: 'file',
-    path: '/',
+    path: '/file',
     name: 'file',
     icon: markRaw(Folders),
     isLink: false,

src/router/index.ts

@@ -57,6 +57,14 @@ const router = createRouter({
           },
           component: () => import('../views/setting/index.vue'),
         },
+        {
+          name: 'File',
+          path: '/file',
+          meta: {
+            keepAlive: false,
+          },
+          component: () => import('../views/file/index.vue'),
+        },
       ],
     },
   ],

src/views/file/components/tool-bar.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="tool-bar-container">
+    <n-tooltip trigger="hover" v-for="toolBar in toolBarList">
+      <template #trigger>
+        <n-icon size="26" class="tool-bar-item" @click="handleToolBarAction(toolBar.id)">
+          <component :is="toolBar.icon" />
+        </n-icon>
+      </template>
+      {{ toolBar.title }}
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { open } from '@tauri-apps/api/dialog';
+import { DocumentAdd, FolderAdd, FolderOpen } from '@vicons/carbon';
+
+enum ToolBarAction {
+  ADD_DOCUMENT = 'ADD_DOCUMENT',
+  ADD_FOLDER = 'ADD_FOLDER',
+  OPEN_FOLDER = 'OPEN_FOLDER',
+}
+
+const toolBarList = [
+  {
+    id: ToolBarAction.ADD_DOCUMENT,
+    icon: DocumentAdd,
+    title: 'Add Document',
+  },
+  {
+    id: ToolBarAction.ADD_FOLDER,
+    icon: FolderAdd,
+    title: 'Add Folder',
+  },
+  {
+    id: ToolBarAction.OPEN_FOLDER,
+    icon: FolderOpen,
+    title: 'Open Folder',
+  },
+];
+
+const handleToolBarAction = async (id: ToolBarAction) => {
+  if (id === ToolBarAction.ADD_DOCUMENT) {
+  } else if (id === ToolBarAction.ADD_FOLDER) {
+  } else if (id === ToolBarAction.OPEN_FOLDER) {
+    try {
+      const selectedFiles = await open({
+        multiple: false,
+        directory: true,
+      });
+      console.log('Selected files:', selectedFiles);
+    } catch (error) {
+      console.error('Failed to open file dialog:', error);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tool-bar-container {
+  height: var(--tool-bar-height);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+
+  .tool-bar-item {
+    margin: 0 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    .n-icon {
+      opacity: 0.4;
+      transition: 0.3s;
+    }
+
+    &:hover {
+      .n-icon {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+</style>

src/views/file/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <tool-bar />
+  <div class="file-container">file</div>
+</template>
+
+<script setup lang="ts">
+import ToolBar from './components/tool-bar.vue';
+</script>
+
+<style lang="scss" scoped>
+.file-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>