feat: store state in swift modify

components/do/review/Card.vue

@@ -66,6 +66,17 @@ const userStore = useUserStore()
 const marksSelectedValues = ref<number[]>([])
 
 provide('sentence', props.sentence) // 提供句子数据给子组件
+// 快捷修改
+const doSwiftModify = (
+  fn: (sentence: Sentence) => void,
+  initialState: Partial<Sentence>
+) => {
+  emit(
+    'doSwiftModify',
+    { ...(props.sentence as Sentence), ...initialState },
+    fn
+  )
+}
 </script>
 
 <template>
@@ -138,9 +149,7 @@ provide('sentence', props.sentence) // 提供句子数据给子组件
       @do-masonry-repaint="emit('doMasonryRepaint')"
       @operation-done="onOperationDone"
       @view-comments="emit('viewComments', props.index)"
-      @do-swift-modify="
-        emit('doSwiftModify', props.sentence as Sentence, $event)
-      "
+      @do-swift-modify="doSwiftModify"
     />
   </a-card>
 </template>

components/do/review/CardActionsContainer.vue

@@ -16,7 +16,10 @@ const emit = defineEmits<{
   doWebSearch: []
   doLocalSearch: []
   viewComments: []
-  doSwiftModify: [onModifyFinished: (sentence: Sentence) => void]
+  doSwiftModify: [
+    onModifyFinished: (sentence: Sentence) => void,
+    currentState: Partial<Sentence>
+  ]
   operationDone: [event: 'submit' | 'cancel']
 }>()
 
@@ -105,6 +108,16 @@ const onSwiftModify = (camel: Sentence) => {
   if (Object.keys(snake).length === 0) return
   comment.value = JSON.stringify(snake)
 }
+const doSwiftModify = () => {
+  try {
+    const initialState = objToCamel<Partial<Sentence>>(
+      JSON.parse(comment.value || '{}') as Record<string, never>
+    )
+    emit('doSwiftModify', onSwiftModify, initialState)
+  } catch (e) {
+    emit('doSwiftModify', onSwiftModify, {} as Partial<Sentence>)
+  }
+}
 </script>
 <template>
   <div class="actions-container">
@@ -162,7 +175,7 @@ const onSwiftModify = (camel: Sentence) => {
             @do-local-search="emit('doLocalSearch')"
             @do-web-search="emit('doWebSearch')"
             @view-comments="emit('viewComments')"
-            @do-swift-modify="emit('doSwiftModify', onSwiftModify)"
+            @do-swift-modify="doSwiftModify"
           />
         </div>
       </div>

utils/converter.ts

@@ -1,3 +1,4 @@
+import { snakeCase, camelCase } from 'lodash-es'
 import { PollStatus } from './../enums/poll'
 import { HitokotoType } from '@/enums/hitokoto'
 const HitokotoTypeMap = {
@@ -45,3 +46,25 @@ const PollStatusMap = {
 export function convertPollStatus(input: PollStatus): string {
   return PollStatusMap[input] || '未知'
 }
+
+export function objToCamel<
+  T extends { [key: string]: unknown },
+  V extends { [key: string]: unknown } = { [key: string]: unknown }
+>(obj: V): T {
+  return (Object.keys(obj) as Array<keyof V>).reduce((acc, key) => {
+    const camelKey = camelCase(key as unknown as string) as keyof T
+    acc[camelKey] = obj[key] as unknown as T[keyof T]
+    return acc
+  }, {} as T)
+}
+
+export function objToSnake<
+  T extends { [key: string]: unknown },
+  V extends { [key: string]: unknown } = { [key: string]: unknown }
+>(obj: V): T {
+  return (Object.keys(obj) as Array<keyof V>).reduce((acc, key) => {
+    const snakeKey = snakeCase(key as unknown as string) as keyof T
+    acc[snakeKey] = obj[key] as unknown as T[keyof T]
+    return acc
+  }, {} as T)
+}