feat: backup restore UI (#134)

feat: backup restore UI #134

implement the backup UI

Refs: #23

---------

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

Author: Blankll

components.d.ts

@@ -37,6 +37,7 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NP: typeof import('naive-ui')['NP']
     NPopover: typeof import('naive-ui')['NPopover']
     NProgress: typeof import('naive-ui')['NProgress']
     NRadio: typeof import('naive-ui')['NRadio']
@@ -48,7 +49,10 @@ declare module 'vue' {
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NUpload: typeof import('naive-ui')['NUpload']
+    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     PathBreadcrumb: typeof import('./src/components/PathBreadcrumb.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterMain: typeof import('./src/components/RouterMain.vue')['default']

src/lang/enUS.ts

@@ -8,6 +8,7 @@ export const enUS = {
     user: 'User',
     setting: 'Setting',
     chatBot: 'AI Assistant',
+    backupRestore: 'Backup/Restore',
   },
   setting: {
     basic: 'Basic',
@@ -170,6 +171,23 @@ export const enUS = {
     empty: 'No history yet',
     emptyDesc: 'History of queries will appear here as you execute Scans and Queries',
   },
+  backup: {
+    backup: 'Backup',
+    restore: 'Restore',
+    restoreSourceDesc: 'Click or drag a file to this area to upload your JSON/CSV file',
+    backupForm: {
+      connection: 'Connection',
+      index: 'Index',
+      backupFolder: 'Location',
+      backupFileName: 'File Name',
+      connectionRequired: 'Please select a Connection',
+      indexRequired: 'Please select an Index',
+      backupFolderRequired: 'Please select Backup Folder',
+      backupFileNameRequired: 'Please enter Backup File Name',
+      validationFailed: 'Backup Config validation failed!',
+      validationPassed: 'Backup Config validation passed!',
+    },
+  },
   version: {
     newVersion: 'New version available',
     message: 'A new version is available, download it now',

src/lang/zhCN.ts

@@ -8,6 +8,7 @@ export const zhCN = {
     user: '用户',
     setting: '设置',
     chatBot: 'AI助手',
+    backupRestore: '备份/恢复',
   },
   setting: {
     basic: '通用设置',
@@ -171,6 +172,23 @@ export const zhCN = {
     empty: '无历史记录',
     emptyDesc: '执行扫描和查询时，查询历史记录将显示在此处',
   },
+  backup: {
+    backup: '备份',
+    restore: '恢复',
+    restoreSourceDesc: '点击或拖动文件到此区域上传您的 JSON/CSV 文件',
+    backupForm: {
+      connection: '选择连接',
+      index: '选择索引',
+      backupFolder: '文件夹',
+      backupFileName: '文件名',
+      connectionRequired: '请选择连接',
+      indexRequired: '请选择索引',
+      backupFolderRequired: '请选择备份文件夹',
+      backupFileNameRequired: '请输入备份文件名',
+      validationFailed: '备份操作配置校验失败！',
+      validationPassed: '备份操作配置校验通过！',
+    },
+  },
   version: {
     newVersion: '发现新版本',
     message: '发现新版本，是否立即下载',

src/layout/components/the-aside.vue

@@ -53,9 +53,11 @@ import {
   UserAvatar,
   ExpandAll,
   Equalizer,
+  ImportExport,
 } from '@vicons/carbon';
 import { useAppStore } from '../../store';
 import TheAsideIcon from './the-aside-icon.vue';
+
 const router = useRouter();
 const route = useRoute();
 const appStore = useAppStore();
@@ -90,13 +92,13 @@ const mainNavList = ref([
     icon: markRaw(ExpandAll),
     isLink: false,
   },
-  // {
-  //   id: 'import-export',
-  //   path: '/import-export',
-  //   name: 'import-export',
-  //   icon: markRaw(SaveSeries),
-  //   isLink: false,
-  // },
+  {
+    id: 'backup-restore',
+    path: '/backup-restore',
+    name: 'backupRestore',
+    icon: markRaw(ImportExport),
+    isLink: false,
+  },
   {
     id: 'github',
     path: '',
@@ -130,6 +132,7 @@ interface RouteItem {
   name: string;
   isLink: boolean;
 }
+
 const isActive = (item: RouteItem) => {
   return item.path === route.path;
 };
@@ -157,10 +160,12 @@ const navClick = (item: RouteItem) => {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--border-color);
+
   .main-nav {
     flex: 1;
     height: 0;
   }
+
   .icon-item {
     height: var(--aside-width);
     height: 40px;
@@ -171,12 +176,15 @@ const navClick = (item: RouteItem) => {
     align-items: center;
     color: var(--text-color);
     cursor: pointer;
+
     .n-icon {
       opacity: 0.4;
       transition: 0.3s;
     }
+
     &.active {
       position: relative;
+
       &::before {
         content: '';
         position: absolute;
@@ -186,10 +194,12 @@ const navClick = (item: RouteItem) => {
         width: 5px;
         background-color: var(--border-color);
       }
+
       .n-icon {
         opacity: 1;
       }
     }
+
     &:hover {
       .n-icon {
         opacity: 0.9;

src/router/index.ts

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

src/store/backupRestoreStore.ts

@@ -0,0 +1,28 @@
+import { open } from '@tauri-apps/api/dialog';
+
+import { defineStore } from 'pinia';
+import { CustomError } from '../common';
+import { get } from 'lodash';
+
+export const useBackupRestoreStore = defineStore('backupRestoreStore', {
+  state(): { folderPath: string; fileName: string } {
+    return {
+      folderPath: '',
+      fileName: '',
+    };
+  },
+  persist: true,
+  getters: {},
+  actions: {
+    async selectFolder() {
+      try {
+        this.folderPath = (await open({ recursive: true, directory: true })) as string;
+      } catch (error) {
+        throw new CustomError(
+          get(error, 'status', 500),
+          get(error, 'details', get(error, 'message', '')),
+        );
+      }
+    },
+  },
+});

src/store/index.ts

@@ -12,3 +12,4 @@ export * from './connectionStore';
 export * from './sourceFileStore';
 export * from './chatStore';
 export * from './clusterManageStore';
+export * from './backupRestoreStore';