feat: implement remove secret #2

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

Author: Blankll

public/tauri.svg

@@ -72,5 +72,8 @@ export const enUS = {
       usernameRequired: 'Username is required',
       passwordRequired: 'Password is required',
     },
+    operations: {
+      remove: 'Remove',
+    },
   },
 };

src/lang/enUS.ts

@@ -72,5 +72,8 @@ export const zhCN = {
       usernameRequired: '请输入用户名',
       passwordRequired: '请输入密码',
     },
+    operations: {
+      remove: '删除',
+    },
   },
 };

src/lang/zhCN.ts

@@ -21,6 +21,7 @@ import {
   BiCheckLg,
   GiHouseKeys,
   FaTerminal,
+  MdMorehoriz,
 } from 'oh-vue-icons/icons';
 
 const app = createApp(App);
@@ -39,6 +40,7 @@ addIcons(
   CoFolder,
   GiHouseKeys,
   FaTerminal,
+  MdMorehoriz,
 );
 app.component('VIcon', OhVueIcon);
 

src/main.ts

@@ -32,5 +32,9 @@ export const useSecretStore = defineStore('secretStore', {
         this.secrets[index] = secret;
       }
     },
+    removeSecret(secret: Secret) {
+      const index = this.secrets.findIndex(s => s.id === secret.id);
+      this.secrets.splice(index, 1);
+    },
   },
 });

src/store/secretStore.ts

@@ -7,6 +7,19 @@
       hoverable
       @click="editSecret(secret)"
     >
+      <template #header-extra>
+        <div class="operation" @click.stop="">
+          <n-dropdown
+            trigger="click"
+            :options="options"
+            @select="(args: number) => handleSelect(args, secret)"
+          >
+            <n-icon size="20">
+              <v-icon name="md-morehoriz" />
+            </n-icon>
+          </n-dropdown>
+        </div>
+      </template>
     </n-card>
     <new-key-dialog ref="editKeyDialogRef" />
   </div>
@@ -15,7 +28,9 @@
 <script setup lang="ts">
 import { Secret, useSecretStore } from '../../../store';
 import NewKeyDialog from './new-key-dialog.vue';
+import { useLang } from '../../../lang';
 
+const lang = useLang();
 const secretStore = useSecretStore();
 
 const { secrets } = toRefs(secretStore);
@@ -24,6 +39,17 @@ const editKeyDialogRef = ref();
 const editSecret = (secret: Secret) => {
   editKeyDialogRef.value.showMedal(secret);
 };
+const options = reactive([{ key: 1, label: lang.t('secret.operations.remove') }]);
+const handleSelect = (key: number, secret: Secret) => {
+  switch (key) {
+    case 1:
+      deleteSecret(secret);
+      break;
+  }
+};
+const deleteSecret = (secret: Secret) => {
+  secretStore.removeSecret(secret);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -33,6 +59,7 @@ const editSecret = (secret: Secret) => {
   gap: 16px;
   padding: 16px;
 }
+
 .secret-list .n-card:hover {
   cursor: pointer;
 }