update

src/components/TinyMCE/index.vue

@@ -1,7 +1,8 @@
 <script setup>
-import {ref, watch, computed, nextTick} from "vue";
+import {computed, nextTick, ref, watch} from "vue";
 import Editor from "@tinymce/tinymce-vue";
 import {VITE_TINYMCE_KEY} from "../../utils/index.js";
+import Api from "../../api/index.js";
 
 const content = defineModel('content');
 const EditorIF = ref(true);
@@ -28,7 +29,13 @@ const INIT = computed(() => ({
     images_upload_url: 'http://your-api/upload',
     images_upload_credentials: true,
     images_upload_handler: (blobInfo, success, failure) => {
-        console.log(blobInfo, success, failure);
+        return new Promise((resolve, reject) => {
+            Api.system.uploadFile(blobInfo.blob()).then(({data}) => {
+                resolve(data);
+            }).catch(err => {
+                reject(err);
+            });
+        })
     },
     file_picker_types: 'image',
     images_reuse_filename: true,

src/components/TinyMCE/modal.vue

@@ -1,17 +1,47 @@
 <script setup>
-import TinyMCE from "./index.vue";
-import {ref} from "vue";
+import {ref, watch} from "vue";
+import TinyMCE from './index.vue';
 
+const {title, preview} = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    preview: {
+        type: Boolean,
+        default: false,
+    }
+});
+const emits = defineEmits(['success', 'show']);
 const content = defineModel('content');
+const contentTitle = defineModel('contentTitle');
+const inputRef = ref();
 const visible = ref(false);
 const fullscreen = ref(false);
+
+watch(
+    () => visible.value,
+    (val) => {
+        if (val) emits('show');
+    }
+)
+const success = async () => {
+    emits('success');
+}
+
+const clickInput = () => {
+    inputRef.value.focus();
+}
 </script>
 
 <template>
     <a-link v-if="!$slots.default" :hoverable="false" @click="visible=true">编辑</a-link>
-    <div v-else><slot></slot></div>
+    <div v-else @click="visible=true">
+        <slot></slot>
+    </div>
 
     <a-modal
+        @ok="success"
         id="TinyMCEModal"
         :mask-closable="false"
         :unmount-on-close="true"
@@ -19,23 +49,30 @@ const fullscreen = ref(false);
         width="800px"
         :draggable="true"
         title-align="start"
-        title="编辑"
+        v-bind="$attrs"
         v-model:visible="visible">
         <template #title>
             <div class="flex justify-between w-full pr-[30px]">
                 <div>
-                    编辑
+                    {{ title }}
+                </div>
+                <div>
+                    <a-input v-if="!preview" ref="inputRef" @click="clickInput"
+                             v-model:model-value="contentTitle"></a-input>
+                    <div v-else>{{ contentTitle }}</div>
                 </div>
                 <a-link @click="fullscreen = !fullscreen">
-                    <icon-fullscreen v-if="!fullscreen" />
-                    <icon-fullscreen-exit v-else />
+                    <icon-fullscreen v-if="!fullscreen"/>
+                    <icon-fullscreen-exit v-else/>
                 </a-link>
             </div>
         </template>
         <TinyMCE
+            v-if="!preview"
             v-model:content="content"
             :skin="fullscreen ? 'fluent' : 'borderless'">
         </TinyMCE>
+        <div v-else v-html="content" class="p-[24px]"></div>
     </a-modal>
 </template>
 

src/components/XSelect/index.vue

@@ -1,12 +1,17 @@
 <script setup>
 import {onMounted, reactive} from "vue";
 
-const {api, fieldName} = defineProps({
+const {api, fieldName, apiPo} = defineProps({
     api: {
         type: Function,
-        default: async () => {},
+        default: async () => {
+        },
         required: true,
     },
+    apiPo: {
+        type: Object,
+        default: {}
+    },
     fieldName: {
         type: Object,
         default: {value: 'id', label: 'name'},
@@ -15,7 +20,7 @@ const {api, fieldName} = defineProps({
 const list = reactive([]);
 
 onMounted(() => {
-    api && api().then(({data}) => {
+    api && api(apiPo).then(({data}) => {
         list.length = 0;
         list.push(...data);
     });

src/components/upload/UploadOne.vue

@@ -24,7 +24,7 @@ const beforeUpload = (file) => {
         <a-upload draggable @before-upload="beforeUpload">
             <template #upload-button v-if="files">
                 <div class="x-upload-one-image">
-                    <a-image :preview="false" :src="files"></a-image>
+                    <a-image fit="contain" width="100%" height="100%" :preview="false" :src="files"></a-image>
                 </div>
             </template>
         </a-upload>