refactor: remove stupid code

Signed-off-by: Innei <i@innei.in>

Author: Innei

src/components/kv-editor/index.tsx

@@ -27,36 +27,32 @@ export const KVEditor = defineComponent({
     const KVArray = ref<{ key: string; value: string }[]>([])
 
     const keySet = ref(new Set<string>())
-
-    const cleaner = watch(
-      () => props.value,
-      (newValue) => {
-        if (!isEmpty(newValue)) {
-          const arr = Object.entries(newValue).map(([k, v]) => {
-            keySet.value.add(k)
-            return {
-              key: k,
-              value: v.toString(),
-            }
-          })
-          KVArray.value = arr
-          cleaner()
-        }
-      },
-      { deep: true },
-    )
-
+    onMounted(() => {
+      if (!isEmpty(props.value)) {
+        const arr = Object.entries(props.value).map(([k, v]) => {
+          keySet.value.add(k)
+          return {
+            key: k,
+            value: v.toString(),
+          }
+        })
+        KVArray.value = arr
+      }
+    })
     watch(
       () => KVArray.value,
       (newValue) => {
-        const record = newValue.reduce((acc, cur) => {
-          // filter empty key value
-          if (cur.key === '' && cur.value === '') {
+        const record = newValue.reduce(
+          (acc, cur) => {
+            // filter empty key value
+            if (cur.key === '' && cur.value === '') {
+              return acc
+            }
+            acc[cur.key] = cur.value.toString()
             return acc
-          }
-          acc[cur.key] = cur.value.toString()
-          return acc
-        }, {} as { [key: string]: string })
+          },
+          {} as { [key: string]: string },
+        )
         props.onChange(record)
       },
       { deep: true },
@@ -89,9 +85,12 @@ export const KVEditor = defineComponent({
         }}
       >
         {{
-          default(rowProps: { index: number; value: typeof KVArray.value[0] }) {
+          default(rowProps: {
+            index: number
+            value: (typeof KVArray.value)[0]
+          }) {
             return (
-              <div class="flex items-center w-full">
+              <div class="flex w-full items-center">
                 {props.plainKeyInput ? (
                   <NInput
                     class="mr-4"

src/views/extra-features/snippets/tabs/for-edit.tsx

@@ -359,6 +359,7 @@ export const Tab2ForEdit = defineComponent({
 
                 <NFormItem label="Secret">
                   <KVEditor
+                    key={data.value.id}
                     plainKeyInput
                     onChange={(kv) => {
                       data.value.secret = kv

src/views/setting/tabs/user.tsx

@@ -5,7 +5,6 @@ import { RelativeTime } from 'components/time/relative-time'
 import { UploadWrapper } from 'components/upload'
 import { socialKeyMap } from 'constants/social'
 import { cloneDeep, isEmpty } from 'lodash-es'
-import type { UserModel } from 'models/user'
 import {
   NButton,
   NForm,
@@ -17,8 +16,9 @@ import {
   NUploadDragger,
   useMessage,
 } from 'naive-ui'
-import { RESTManager, deepDiff } from 'utils'
+import { deepDiff, RESTManager } from 'utils'
 import { computed, defineComponent, onMounted, ref } from 'vue'
+import type { UserModel } from 'models/user'
 
 import styles from './user.module.css'
 
@@ -62,7 +62,7 @@ export const TabUser = defineComponent(() => {
         yGap={20}
       >
         <NGi>
-          <NForm class="flex flex-col justify-center items-center ">
+          <NForm class="flex flex-col items-center justify-center ">
             <NFormItem>
               <div class={styles['avatar']}>
                 <UploadWrapper
@@ -92,7 +92,7 @@ export const TabUser = defineComponent(() => {
             </NFormItem>
 
             <NFormItem label="上次登录时间" class="!mt-4">
-              <div class="text-center w-full">
+              <div class="w-full text-center">
                 <NText>
                   {data.value.lastLoginTime ? (
                     <RelativeTime
@@ -106,7 +106,7 @@ export const TabUser = defineComponent(() => {
             </NFormItem>
 
             <NFormItem label="上次登录地址">
-              <div class="text-center w-full">
+              <div class="w-full text-center">
                 {data.value.lastLoginIp ? (
                   <IpInfoPopover
                     trigger={'hover'}
@@ -195,15 +195,16 @@ export const TabUser = defineComponent(() => {
             </NFormItem>
 
             <NFormItem label="社交平台 ID 录入">
-                <KVEditor
-                  options={Object.keys(socialKeyMap).map((key) => {
-                    return { label: key, value: socialKeyMap[key] }
-                  })}
-                  onChange={(newValue) => {
-                    data.value.socialIds = newValue
-                  }}
-                  value={data.value.socialIds || {}}
-                ></KVEditor>
+              <KVEditor
+                key={data.value.id}
+                options={Object.keys(socialKeyMap).map((key) => {
+                  return { label: key, value: socialKeyMap[key] }
+                })}
+                onChange={(newValue) => {
+                  data.value.socialIds = newValue
+                }}
+                value={data.value.socialIds || {}}
+              ></KVEditor>
             </NFormItem>
           </NForm>
         </NGi>