refactor: ♻️ Refactor commands into its own module.

.vscode/settings.json

@@ -15,5 +15,6 @@
     "zeroize",
     "zeroizing"
   ],
-  "conventionalCommits.scopes": ["deps"]
+  "conventionalCommits.scopes": ["deps"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CHANGELOG.md

@@ -38,6 +38,7 @@ All notable changes to this project will be documented in this file.
 - :sparkles: Add light/dark mode switch.
 - :sparkles: Remember opened tab on refresh.
 - :sparkles: Complex scene of FileSelector.
+- :sparkles: Finish key pair generation.
 
 ### Miscellaneous Tasks
 

package.json

@@ -49,7 +49,7 @@
     "stylelint-prettier": "^4.0.2",
     "typescript": "^5.3.2",
     "unplugin-icons": "^0.17.4",
-    "vite": "^5.0.0",
+    "vite": "^5.0.2",
     "vue-tsc": "^1.8.22"
   },
   "browserslist": [

src-tauri/Cargo.toml

@@ -23,7 +23,7 @@ tauri-build = { version = "1.5.0", features = [] }
 
 [dependencies]
 anyhow = { version = "1.0.75", features = ["backtrace"] }
-serde = { version = "1.0.192", features = ["derive"] }
+serde = { version = "1.0.193", features = ["derive"] }
 serde_json = "1.0.108"
 tokio = { version = "1.34.0", features = ["fs", "macros", "rt", "rt-multi-thread"] }
 

src-tauri/src/fs.rs

@@ -24,7 +24,7 @@ impl Serialize for FileType {
 }
 
 #[tauri::command]
-pub async fn file_type(path: &Path) -> Result<FileType> {
+pub async fn detect_file_type(path: &Path) -> Result<FileType> {
     Ok(match fs::metadata(path).await {
         Ok(metadata) => {
             if metadata.is_dir() {
@@ -43,13 +43,16 @@ pub async fn file_type(path: &Path) -> Result<FileType> {
 mod tests {
     use std::path::PathBuf;
 
-    use super::file_type;
+    use super::detect_file_type;
 
     #[tokio::test]
     async fn test() {
-        println!("{:?}", file_type(&PathBuf::from("/home/")).await);
-        println!("{:?}", file_type(&PathBuf::from("/etc/fstab")).await);
-        println!("{:?}", file_type(&PathBuf::from("/home/inexist")).await);
-        println!("{:?}", file_type(&PathBuf::from("/bin/sh")).await);
+        println!("{:?}", detect_file_type(&PathBuf::from("/home/")).await);
+        println!("{:?}", detect_file_type(&PathBuf::from("/etc/fstab")).await);
+        println!(
+            "{:?}",
+            detect_file_type(&PathBuf::from("/home/inexist")).await
+        );
+        println!("{:?}", detect_file_type(&PathBuf::from("/bin/sh")).await);
     }
 }

src-tauri/src/main.rs

@@ -3,15 +3,18 @@
 
 // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 
-use crate::{fs::file_type, keygen::generate_key_pair};
+use crate::{fs::detect_file_type, keygen::generate_key_pair};
 
 mod error;
 mod fs;
 mod keygen;
 
 fn main() -> anyhow::Result<()> {
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![generate_key_pair, file_type])
+        .invoke_handler(tauri::generate_handler![
+            generate_key_pair,
+            detect_file_type
+        ])
         .run(tauri::generate_context!())?;
     Ok(())
 }

src/App.vue

@@ -7,12 +7,12 @@ import {
   VWindow,
   VWindowItem,
 } from "vuetify/components";
-import { mdiFileKey, mdiFileCheck, mdiKeyChain } from "@mdi/js";
+import KeygenView from "@/views/KeygenView.vue";
 import SignView from "@/views/SignView.vue";
 import ValidateView from "@/views/ValidateView.vue";
-import KeygenView from "@/views/KeygenView.vue";
-import ColorSwitcher from "@/components/ColorSwitcher.vue";
+import { mdiFileCheck, mdiFileKey, mdiKeyChain } from "@mdi/js";
 import { useSessionStorage } from "@vueuse/core";
+import ColorSwitcher from "@/components/ColorSwitcher.vue";
 
 const enum Tab {
   sign,

src/command.ts

@@ -0,0 +1,18 @@
+import { invoke } from "@tauri-apps/api";
+
+export const generateKeyPair = (name: string, email: string, path: string) =>
+  invoke<void>("generate_key_pair", {
+    email,
+    name,
+    path,
+  });
+
+export const enum FileType {
+  dir = 1,
+  file = 0,
+  inexist = 3,
+  other = 2,
+}
+
+export const detectFileType = (path: string) =>
+  invoke<FileType>("detect_file_type", { path });

src/components/ColorSwitcher.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useColorMode, useCycleList } from "@vueuse/core";
-import { watchEffect } from "vue";
 import { useTheme } from "vuetify";
+import { watchEffect } from "vue";
 import { VBtn } from "vuetify/components";
+import { useColorMode, useCycleList } from "@vueuse/core";
 import AutoLightMode from "~icons/ic/twotone-brightness-auto";
-import LightMode from "~icons/ic/twotone-light-mode";
 import DarkMode from "~icons/ic/twotone-nightlight";
+import LightMode from "~icons/ic/twotone-light-mode";
 
 const theme = useTheme();
 

src/components/FileSelector.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
-import { message, open } from "@tauri-apps/api/dialog";
-import { listen, TauriEvent, type UnlistenFn } from "@tauri-apps/api/event";
-
 import { VBtn, VCard, VDialog, VIcon } from "vuetify/components";
-
-import UploadFile from "~icons/ic/twotone-upload-file";
+import { TauriEvent, type UnlistenFn, listen } from "@tauri-apps/api/event";
+import { message, open } from "@tauri-apps/api/dialog";
+import { useVModel } from "@vueuse/core";
+import { FileType, detectFileType } from "@/command";
 import FolderOpen from "~icons/ic/twotone-folder-open";
 import Reject from "~icons/ic/twotone-highlight-off";
-
-import { useVModel } from "@vueuse/core";
-import { invoke } from "@tauri-apps/api/tauri";
+import UploadFile from "~icons/ic/twotone-upload-file";
 
 const props = defineProps<{
   modelValue: string | undefined;
@@ -36,17 +33,9 @@ const hover_accept = ref(false);
 
 let listeners: UnlistenFn[];
 
-const enum FileType {
-  file = 0,
-  dir = 1,
-  other = 2,
-  inexist = 3,
-}
-
-const checkFileType = async (path: string) => {
-  const fileType = await invoke<FileType>("file_type", { path });
-  return fileType === (props.directory ? FileType.dir : FileType.file);
-};
+const checkFileType = async (path: string) =>
+  (await detectFileType(path)) ===
+  (props.directory ? FileType.dir : FileType.file);
 
 onMounted(async () => {
   listeners = await Promise.all([
@@ -56,23 +45,24 @@ onMounted(async () => {
         e.payload.length == 1 && (await checkFileType(e.payload[0]));
     }),
     listen<string[]>(TauriEvent.WINDOW_FILE_DROP, async (e) => {
-      if (e.payload.length != 1 || !(await checkFileType(e.payload[0]))) {
-        await message(
-          props.directory ? "请拖放一个文件夹到此处" : "请拖放一个文件到此处",
-        );
-      } else file.value = e.payload[0];
-      hover.value = false;
+      if (e.payload.length != 1 || !(await checkFileType(e.payload[0])))
+        await message(props.directory ? "只支持文件夹" : "只支持文件");
+      else file.value = e.payload[0];
+      hover.value = hover_accept.value = false;
     }),
     listen<void>(TauriEvent.WINDOW_FILE_DROP_CANCELLED, () => {
-      hover.value = false;
+      hover.value = hover_accept.value = false;
     }),
     listen<void>(TauriEvent.WINDOW_BLUR, () => {
-      hover.value = false;
+      hover.value = hover_accept.value = false;
     }),
   ]);
 });
 
-onUnmounted(() => listeners.forEach((unlisten) => unlisten()));
+onUnmounted(() => {
+  listeners.forEach((unlisten) => unlisten());
+  listeners = [];
+});
 </script>
 <template>
   <slot :select-file="selectFile">

src/main.ts

@@ -1,20 +1,19 @@
-import { createApp } from "vue";
-import "./styles.css";
-import App from "./App.vue";
-
-import "vuetify/styles";
-import { createVuetify } from "vuetify";
-
-import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
+import App from "@/App.vue";
+import "@fontsource/noto-sans-sc/chinese-simplified-300.css";
+import "@fontsource/noto-sans-sc/chinese-simplified-400.css";
 import "@fontsource/roboto/latin-300.css";
-import "@fontsource/roboto/latin-400.css";
 import "@fontsource/roboto/latin-300-italic.css";
+import "@fontsource/roboto/latin-400.css";
 import "@fontsource/roboto/latin-400-italic.css";
-import "@fontsource/noto-sans-sc/chinese-simplified-300.css";
-import "@fontsource/noto-sans-sc/chinese-simplified-400.css";
+import { createApp } from "vue";
+import { createVuetify } from "vuetify";
+import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
+import "vuetify/styles";
+
+import "./styles.css";
 
 const vuetify = createVuetify({
-  icons: { defaultSet: "mdi", aliases, sets: { mdi } },
+  icons: { aliases, defaultSet: "mdi", sets: { mdi } },
 });
 
 createApp(App).use(vuetify).mount("#app");