feat: ✨ Finish key pair generation.

Jisu-Woniu · Nov 20, 2023 · cf64af9 · cf64af9
1 parent d75c14f
commit cf64af9
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 39 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -32,21 +32,21 @@ const tab = useSessionStorage("tab", Tab.sign);
           <VTab :value="Tab.sign" :prepend-icon="mdiFileKey"> 签名 </VTab>
           <VTab :value="Tab.validate" :prepend-icon="mdiFileCheck"> 校验 </VTab>
           <VTab :value="Tab.keygen" :prepend-icon="mdiKeyChain">
-            密钥管理
+            密钥生成
           </VTab>
         </VTabs>
       </template>
     </VToolbar>
 
     <VWindow v-model="tab">
       <VWindowItem :value="Tab.sign">
-        <SignView :activated="tab === Tab.sign" />
+        <SignView v-if="tab === Tab.sign" />
       </VWindowItem>
       <VWindowItem :value="Tab.validate">
-        <ValidateView :activated="tab === Tab.validate" />
+        <ValidateView v-if="tab === Tab.validate" />
       </VWindowItem>
       <VWindowItem :value="Tab.keygen">
-        <KeygenView :activated="tab === Tab.keygen" />
+        <KeygenView v-if="tab === Tab.keygen" />
       </VWindowItem>
     </VWindow>
   </VApp>

diff --git a/src/components/FileSelector.vue b/src/components/FileSelector.vue
@@ -23,7 +23,7 @@ const emits = defineEmits<{
 
 const file = useVModel(props, "modelValue", emits);
 
-const SelectFile = async () => {
+const selectFile = async () => {
   const selected = (await open({
     multiple: false,
     directory: props.directory,
@@ -56,7 +56,6 @@ onMounted(async () => {
         e.payload.length == 1 && (await checkFileType(e.payload[0]));
     }),
     listen<string[]>(TauriEvent.WINDOW_FILE_DROP, async (e) => {
-      console.log("DROP!!");
       if (e.payload.length != 1 || !(await checkFileType(e.payload[0]))) {
         await message(
           props.directory ? "请拖放一个文件夹到此处" : "请拖放一个文件到此处",
@@ -76,7 +75,9 @@ onMounted(async () => {
 onUnmounted(() => listeners.forEach((unlisten) => unlisten()));
 </script>
 <template>
-  <VBtn :prepend-icon="FolderOpen" @click="SelectFile"> 选择文件 </VBtn>
+  <slot :select-file="selectFile">
+    <VBtn :prepend-icon="FolderOpen" @click="selectFile"> 选择文件 </VBtn>
+  </slot>
   <VDialog v-model="hover" height="100%">
     <VCard v-if="hover_accept" class="hover-indication-box">
       <VIcon :icon="UploadFile" class="hover-indication-icon" />
@@ -86,7 +87,6 @@ onUnmounted(() => listeners.forEach((unlisten) => unlisten()));
     </VCard>
     <VCard v-else class="hover-indication-box">
       <VIcon :icon="Reject" class="hover-indication-icon" />
-      <div class="hover-indication-text text-blue-darken-3 mt-3">请</div>
     </VCard>
   </VDialog>
 </template>

diff --git a/src/main.ts b/src/main.ts
@@ -6,8 +6,12 @@ import "vuetify/styles";
 import { createVuetify } from "vuetify";
 
 import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
-import "@fontsource/roboto/latin.css";
-import "@fontsource/noto-sans-sc";
+import "@fontsource/roboto/latin-300.css";
+import "@fontsource/roboto/latin-400.css";
+import "@fontsource/roboto/latin-300-italic.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";
 
 const vuetify = createVuetify({
   icons: { defaultSet: "mdi", aliases, sets: { mdi } },

diff --git a/src/views/KeygenView.vue b/src/views/KeygenView.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import FileSelector from "@/components/FileSelector.vue";
-import { VBtn, VContainer, VTextField } from "vuetify/components";
+import FolderOpen from "~icons/ic/twotone-folder-open";
+import { VBtn, VContainer, VForm, VTextField } from "vuetify/components";
 import { mdiCheck } from "@mdi/js";
 import { invoke } from "@tauri-apps/api/tauri";
-
-defineProps<{ activated: boolean }>();
+import { message } from "@tauri-apps/api/dialog";
 
 const name = ref("");
 const email = ref("");
-
+const valid = ref<boolean | null>(null);
 const file = ref<string>();
 const rules = {
-  required: (value: string) => !!value.trim() || "必填",
+  required: (value: string) => !!value?.trim() || "必填",
   email: (value: string) => {
     const regex =
       /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
@@ -23,29 +23,51 @@ const rules = {
 };
 
 const generateKeyPair = async () => {
-  await invoke("generate_key_pair", {
-    name: name.value,
-    email: email.value,
-    path: file.value,
-  });
+  try {
+    if (valid.value) {
+      await invoke("generate_key_pair", {
+        name: name.value,
+        email: email.value,
+        path: file.value,
+      });
+      await message("生成成功");
+    }
+  } catch (x) {
+    await message("生成失败\n发生如下错误：\n" + x);
+  }
 };
 </script>
 
 <template>
   <VContainer fluid>
-    <h1 class="pa-2">密钥管理</h1>
-    <VTextField v-model="name" label="姓名" :rules="[rules.required]" />
-    <VTextField
-      v-model="email"
-      label="邮箱"
-      :rules="[rules.required, rules.email]"
-    />
-    <FileSelector v-if="activated" v-model="file" directory />
-    <div v-if="file">
-      {{ file }}
-    </div>
-    <VBtn :prepend-icon="mdiCheck" color="#4CAF50" @click="generateKeyPair"
-      >提交</VBtn
+    <h1 class="pa-2">密钥生成</h1>
+    <VForm
+      v-model="valid"
+      validate-on="blur"
+      fast-fail
+      @submit.prevent="generateKeyPair"
     >
+      <VTextField v-model="name" label="姓名" :rules="[rules.required]" />
+      <VTextField
+        v-model="email"
+        label="邮箱"
+        :rules="[rules.required, rules.email]"
+      />
+
+      <VTextField
+        v-model="file"
+        label="保存位置"
+        clearable
+        readonly
+        :rules="[rules.required]"
+      >
+        <template #append>
+          <FileSelector v-slot="{ selectFile }" v-model="file" directory>
+            <VBtn :icon="FolderOpen" @click="selectFile" />
+          </FileSelector>
+        </template>
+      </VTextField>
+      <VBtn :prepend-icon="mdiCheck" color="#4CAF50" type="submit"> 提交 </VBtn>
+    </VForm>
   </VContainer>
 </template>
diff --git a/src/views/SignView.vue b/src/views/SignView.vue
@@ -3,15 +3,13 @@ import { ref } from "vue";
 import FileSelector from "@/components/FileSelector.vue";
 import { VContainer } from "vuetify/components";
 
-defineProps<{ activated: boolean }>();
-
 const file = ref<string>();
 </script>
 
 <template>
   <VContainer fluid>
     <h1 class="pa-2">签名</h1>
-    <FileSelector v-if="activated" v-model="file" />
+    <FileSelector v-model="file" />
     <div v-if="file">
       {{ file }}
     </div>

diff --git a/src/views/ValidateView.vue b/src/views/ValidateView.vue
@@ -3,15 +3,13 @@ import { ref } from "vue";
 import FileSelector from "@/components/FileSelector.vue";
 import { VContainer } from "vuetify/components";
 
-defineProps<{ activated: boolean }>();
-
 const file = ref<string>();
 </script>
 
 <template>
   <VContainer fluid>
     <h1 class="pa-2">校验</h1>
-    <FileSelector v-if="activated" v-model="file" />
+    <FileSelector v-model="file" />
     <div v-if="file">
       {{ file }}
     </div>