From 453d3b03c2f9b0e6ddbc3f5420eab615b422efd0 Mon Sep 17 00:00:00 2001
From: Frankie Huang <frankie@FrankiedeMacBook-Pro.local>
Date: Fri, 2 May 2025 02:02:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD,=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=8A=E4=BC=A0=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=92=8C=E5=AD=97=E6=AE=B5=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainEditor.vue           |  88 +++++++++++++++++-
 src/components/UI/UploadImageConfig.vue | 114 ++++++++++++++++++++++++
 2 files changed, 200 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UI/UploadImageConfig.vue

diff --git a/src/components/MainEditor.vue b/src/components/MainEditor.vue
index 17dad6d..8d344c0 100644
--- a/src/components/MainEditor.vue
+++ b/src/components/MainEditor.vue
@@ -4,7 +4,7 @@
             <MdEditor ref="editorRef" v-model="editorState.text" :id="editorState.id" :theme="editorState.theme"
                 :previewTheme="editorState.previewTheme" :style="{ height: editorState.height }"
                 :toolbars="editorState.toolbars" :toolbarsExclude="editorState.toolbarsExclude" @onSave="onSave"
-                @onHtmlChanged="getPreviewedHTML">
+                @onHtmlChanged="getPreviewedHTML" @onUploadImg="onUploadImg">
                 <template #defToolbars>
                     <NormalToolbar :title="leftSidebarState == 'open' ? '隐藏文件树' : '显示文件树'" @onClick="toggleLeftSideBar">
                         <template #trigger>
@@ -39,16 +39,21 @@
             </div>
         </template>
     </Split>
+    <UploadImageConfig v-model:visible="uploadImgForm.showFormModal" v-model:uploadImgAPI="uploadImgForm.uploadImgAPI"
+        v-model:uploadImgField="uploadImgForm.uploadImgField" v-model:otherField="uploadImgForm.otherField">
+    </UploadImageConfig>
 </template>
 
 <script setup>
 import 'md-editor-v3/lib/style.css';
 import '@vavt/v3-extension/lib/asset/PreviewThemeSwitch.css';
 import '@vavt/v3-extension/lib/asset/ExportPDF.css';
+import UploadImageConfig from './UI/UploadImageConfig.vue';
+import scriptjs from 'scriptjs'
 import { config, MdEditor, MdCatalog, NormalToolbar } from 'md-editor-v3';
 import { ThemeSwitch, PreviewThemeSwitch, ExportPDF } from '@vavt/v3-extension';
 import { lineNumbers } from '@codemirror/view';
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, nextTick, onMounted } from "vue";
 import { Message } from 'view-ui-plus'
 
 const props = defineProps({
@@ -219,6 +224,85 @@ const publish = () => {
     Message.warning('抱歉，该功能暂未开放');
 }
 
+const uploadImgForm = reactive({
+    // 是否显示表单对话框
+    showFormModal: false,
+    // 上传图片的后端 API 接口
+    uploadImgAPI: localStorage.getItem('imageUploadURLOfEditor') || '',
+    // 上传图片时，FormData 的文件字段
+    uploadImgField: localStorage.getItem('imageUploadFieldOfEditor') || '',
+    // 上传图片时，FormData 里附带的其他字段和数值. example: [{ key: 'token', value: 'uuid' }]
+    otherField: JSON.parse(localStorage.getItem('imageUploadOtherFieldOfEditor')) || [],
+});
+watch(() => uploadImgForm.uploadImgAPI, (newAPI) => {
+    localStorage.setItem('imageUploadURLOfEditor', newAPI);
+})
+watch(() => uploadImgForm.uploadImgField, (newField) => {
+    localStorage.setItem('imageUploadFieldOfEditor', newField);
+})
+watch(() => uploadImgForm.otherField, (newData) => {
+    localStorage.setItem('imageUploadOtherFieldOfEditor', JSON.stringify(newData));
+})
+
+const onUploadImg = async (files, callback) => {
+    if (uploadImgForm.uploadImgAPI.trim().length == 0 || uploadImgForm.uploadImgField.trim().length == 0) {
+        Message.warning("请先配置图片上传的后端接口，以及对应的字段名称");
+        uploadImgForm.showFormModal = true;
+        return;
+    }
+
+    const res = await Promise.all(
+        files.map((file) => {
+            return new Promise((rev, rej) => {
+                const formData = new FormData();
+                formData.append(uploadImgForm.uploadImgField.trim(), file);
+                uploadImgForm.otherField.forEach(field => {
+                    formData.append(field.key.trim(), field.value);
+                });
+
+                fetch(uploadImgForm.uploadImgAPI.trim(), {
+                    method: 'POST',
+                    body: formData,
+                }).then(response => {
+                    if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
+                    return response.json();
+                }).then(data => {
+                    rev(data);
+                }).catch(error => {
+                    rej(error);
+                    Message.error(`上传失败: ${error}`);
+                });
+            });
+        })
+    );
+
+    callback(res.map((item) => item.url));
+};
+
+// 用于将其他 JS 脚本加载进来
+const fetchScript = (url) => {
+    return new Promise((resolve) => {
+        scriptjs(url, () => {
+            resolve()
+        })
+    })
+}
+
+onMounted(async () => {
+    // 加载 jQuery 脚本以便能够使用 jQuery 语法
+    await fetchScript('/static/jquery/jquery.min.js');
+    // 使用 nextTick 确保页面组件已完成挂载和渲染
+    await nextTick();
+
+    // （这个做法并不规范）找到工具栏中「上传图片」的下拉框，新增一个选项，支持更新图片上传的配置
+    let imageIcon = $('div.md-editor-toolbar-item[title="图片"]').first();
+    let dropdownOverlay = imageIcon.next().children().first();
+    let ulOfDropdownOverlay = dropdownOverlay.children().first();
+    let updateLi = $('<li class="md-editor-menu-item md-editor-menu-item-image" role="menuitem" tabindex="0">更新配置</li>');
+    updateLi.on('click', () => uploadImgForm.showFormModal = true);
+    updateLi.appendTo(ulOfDropdownOverlay);
+});
+
 // 对父组件暴露数据或方法
 defineExpose({})
 </script>
diff --git a/src/components/UI/UploadImageConfig.vue b/src/components/UI/UploadImageConfig.vue
new file mode 100644
index 0000000..1a41ae7
--- /dev/null
+++ b/src/components/UI/UploadImageConfig.vue
@@ -0,0 +1,114 @@
+<template>
+    <Modal v-model="showFormModal" title="更新上传图片配置（update configuration for uploading image）" :footer-hide="true">
+        <Form ref="uploadImgFormRef" :model="configForm" :label-width="80" style="width: 300px">
+            <FormItem label="API" prop="uploadImgAPI" required>
+                <Tooltip content="上传图片的后端 API 接口" placement="top" max-width="300">
+                    <Input type="text" v-model="configForm.uploadImgAPI"
+                        placeholder="example: https://api.example.com/upload" style="width: 290px;"></Input>
+                </Tooltip>
+            </FormItem>
+            <FormItem label="Field" prop="uploadImgField" required>
+                <Tooltip content="上传图片时，该图片文件在 form-data 中的字段名" placement="top" max-width="300">
+                    <Input type="text" v-model="configForm.uploadImgField"
+                        placeholder="File Field. example: image or file ..." style="width: 290px;"></Input>
+                </Tooltip>
+            </FormItem>
+            <FormItem v-for="(field, index) in configForm.otherField" :key="index" :label="'Field ' + (index + 1)"
+                :prop="'otherField.' + index + '.key'"
+                :rules="{ required: true, message: 'Field Key can not be empty', trigger: 'blur' }">
+                <Space>
+                    <Tooltip content="其他附带字段名，比如 token，可用于辅助鉴权" placement="top" max-width="300">
+                        <Input type="text" v-model="field.key" placeholder="Field Key" style="width: 80px;"></Input>
+                    </Tooltip>
+                    <Input type="text" v-model="field.value" placeholder="Field Value" style="width: 200px;"></Input>
+                    <Button @click="removeField(index)">Delete</Button>
+                </Space>
+            </FormItem>
+            <FormItem>
+                <Button type="dashed" long @click="addField()" icon="md-add">Add More Field</Button>
+            </FormItem>
+            <FormItem>
+                <Button type="primary" @click="handleSubmit()">Submit</Button>
+                <Button @click="handleReset()" style="margin-left: 8px">Reset</Button>
+            </FormItem>
+        </Form>
+    </Modal>
+</template>
+
+<script setup>
+import { ref, reactive, watch, useTemplateRef } from "vue";
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        required: true,
+        default: false,
+    },
+    uploadImgAPI: {
+        type: String,
+        required: true,
+        default: '',
+    },
+    uploadImgField: {
+        type: String,
+        required: true,
+        default: '',
+    },
+    // 示例 [{ key: 'token', value: 'uuid' }]
+    otherField: {
+        type: Array,
+        required: true,
+        default: [],
+    },
+});
+
+const emit = defineEmits([
+    'update:visible',
+    'update:uploadImgAPI',
+    'update:uploadImgField',
+    'update:otherField',
+]);
+
+const uploadImgFormRef = useTemplateRef('uploadImgFormRef');
+
+// 是否弹出对话框。要求双向绑定
+const showFormModal = ref(props.visible);
+watch(() => props.visible, (visible) => {
+    showFormModal.value = visible;
+})
+watch(showFormModal, (visible) => {
+    emit('update:visible', visible);
+})
+
+const configForm = reactive({
+    // 上传图片的后端 API 接口
+    uploadImgAPI: props.uploadImgAPI,
+    // 上传图片时，FormData 的文件字段
+    uploadImgField: props.uploadImgField,
+    // 上传图片时，FormData 里附带的其他字段和数值
+    otherField: JSON.parse(JSON.stringify(props.otherField)),
+});
+
+const addField = () => {
+    configForm.otherField.push({ key: '', value: '' });
+};
+
+const removeField = (index) => {
+    configForm.otherField.splice(index, 1)
+};
+
+const handleSubmit = () => {
+    uploadImgFormRef.value.validate((valid) => {
+        if (valid) {
+            emit('update:uploadImgAPI', configForm.uploadImgAPI);
+            emit('update:uploadImgField', configForm.uploadImgField);
+            emit('update:otherField', JSON.parse(JSON.stringify(configForm.otherField)));
+            showFormModal.value = false;
+        }
+    })
+};
+
+const handleReset = () => {
+    uploadImgFormRef.value.resetFields();
+};
+</script>