feat(OcrView): 添加助记词内容编辑功能

- 在OcrView 组件中添加 EditDialog 组件用于编辑助记词内容
- 实现助记词内容编辑的表单布局和功能- 添加编辑按钮点击事件处理，弹出编辑对话框
-优化表格展示样式，增加分隔符和调整样式

src/components/EditDialog.vue

@@ -10,7 +10,7 @@
         <ElForm :model="model" :rules="rules" ref="formEl" label-position="right" :label-width="labelWidth">
             <slot></slot>
         </ElForm>
-        <div class="text-right">
+        <div class="text-right" style="margin-top: 15px">
             <ElButton @click="show = false" :disabled="saving">取消</ElButton>
             <ElButton type="primary" @click="onSave" :loading="saving">保存</ElButton>
         </div>

src/views/OcrView.vue

@@ -26,7 +26,7 @@
                 <div style="display: flex; align-items: center">
                     <div v-html="formatContent(row.content)"></div>
                     <div style="margin-left: 10px">
-                        <ElButton :icon="Edit" circle size="small" @click="editContent(row)"></ElButton>
+                        <ElButton :icon="Edit" circle size="small" @click="onContentEdit(row)"></ElButton>
                     </div>
                 </div>
             </template>
@@ -54,6 +54,7 @@
                                 padding: 5px 10px;
                                 border-radius: 5px;
                                 white-space: nowrap;
+                                margin-left: 3px;
                             "
                             >{{ value.address }}</span
                         >
@@ -80,6 +81,30 @@
         </ElTableColumn>
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
     </PagingTable>
+
+    <EditDialog
+        v-model="showEditDialog"
+        :model="model"
+        :on-submit="submit"
+        @success="table.refresh()"
+        style="width: 80%"
+    >
+        <ElForm label-width="100px" label-position="right">
+            <div style="display: flex; align-items: stretch; gap: 20px; height: 500px">
+                <div style="flex: 1; display: flex; flex-direction: column; justify-content: center">
+                    <ElFormItem prop="content" label="助记词内容">
+                        <ElInput v-model="model.content" placeholder="请输入内容" type="textarea" :rows="15" />
+                    </ElFormItem>
+                </div>
+
+                <ElDivider direction="vertical" style="height: 100%" />
+
+                <div style="flex: 1; display: flex; justify-content: center; align-items: center">
+                    <RImage style="max-width: 100%; height: 100%; object-fit: cover" :src="model.img" fit="cover" />
+                </div>
+            </div>
+        </ElForm>
+    </EditDialog>
 </template>
 <script setup>
 import { ref } from 'vue'
@@ -87,10 +112,15 @@ import PagingTable from '@/components/PagingTable.vue'
 import { useTimeFormatter } from '@/utils/formatter'
 import { Check, Edit, Plus, Search } from '@vicons/tabler'
 import { ElMessageBox } from 'element-plus'
+import EditDialog from '@/components/EditDialog.vue'
+import { setupEditDialog } from '@/utils/editDialog'
+import { http } from '@/plugins/http'
 
 const query = ref({})
 const timeFormatter = useTimeFormatter()
 const table = ref(null)
+const model = ref({})
+const { showEditDialog } = setupEditDialog(model)
 
 function formatRecord(record) {
     return record
@@ -134,11 +164,8 @@ function formatContent(content) {
         .join('<br>')
 }
 
-function editContent(row) {
-
-}
-
-function saveContent(row) {
-
+async function onContentEdit(row) {
+    model.value = row
+    showEditDialog.value = true
 }
 </script>