update

src/components/Filter/index.vue

@@ -10,7 +10,7 @@ const FROM_TYPE = {
     CUSTOM: 'custom',
 }
 const emits = defineEmits(['search']);
-const {config, title} = defineProps({
+const {config, title, buttonCol, formBottom} = defineProps({
     config: {
         type: Array,
         default: [],
@@ -19,7 +19,11 @@ const {config, title} = defineProps({
     title: {
         type: String,
         default: '查询任务'
-    }
+    },
+    buttonCol: {
+        type: Boolean,
+        default: true,
+    },
 });
 const from = defineModel('from');
 
@@ -36,7 +40,7 @@ const reset = () => {
         {{ title }}
     </div>
 
-    <div class="flex">
+    <div class="flex mb-[16px]">
         <div class="flex-grow">
             <a-form
                 :auto-label-width="true"
@@ -44,7 +48,7 @@ const reset = () => {
                 <a-row :gutter="24">
                     <template v-for="(item, index) in config" :key="index">
                         <a-col :span="item.span || 8">
-                            <a-form-item :label="item.label">
+                            <a-form-item :label="item.label" :class="Math.ceil((index+1) / 3) !== Math.ceil(config.length / 3) ? 'mb20' : ''">
                                 <template v-if="item.type === FROM_TYPE.INPUT">
                                     <a-input
                                         class="w-full"
@@ -81,7 +85,7 @@ const reset = () => {
 
         <a-divider direction="vertical" margin="20px"></a-divider>
 
-        <div class="flex flex-col gap-[16px]">
+        <div class="flex gap-[16px]" :style="{flexDirection: buttonCol ? 'column' : 'row'}">
             <a-button @click="emits('search')" type="primary">
                 <template #icon>
                     <icon-search/>
@@ -109,9 +113,13 @@ const reset = () => {
     margin-bottom: 16px;
 }
 
+.mb20 {
+    margin-bottom: 20px !important;
+}
+
 .AFORM {
-    :deep(.arco-row) {
-        margin-bottom: 16px;
+    :deep(.arco-form-item) {
+        margin-bottom: 0;
     }
     :deep(.arco-form-item-label) {
         @apply whitespace-nowrap;

src/components/SequenceAdjustment/index.vue

@@ -0,0 +1,20 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="flex gap-[10px]">
+        <a-link :hoverable="false">
+            <icon-arrow-rise/>
+            上移
+        </a-link>
+        <a-link :hoverable="false">
+            <icon-arrow-fall/>
+            下移
+        </a-link>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/TinyMCE/index.vue

@@ -0,0 +1,54 @@
+<script setup>
+import {ref} from "vue";
+import Editor from "@tinymce/tinymce-vue";
+import {VITE_TINYMCE_KEY} from "../../utils/index.js";
+
+const loading = ref(true);
+const {skin} = defineProps({
+    skin: {
+        type: String,
+        default: 'borderless', // 'fluent'
+    }
+});
+
+const onEditorReady = () => {
+    loading.value = false;
+}
+
+const INIT = ref({
+    language: 'zh_CN',
+    skin: skin,
+    content_css: skin === 'fluent' ? 'fluent' : null,
+    toolbar_mode: skin === 'fluent' ? 'floating' : null,
+    plugins: 'advlist anchor autolink charmap code codesample directionality help image editimage insertdatetime link lists media nonbreaking pagebreak preview searchreplace table tableofcontents visualblocks visualchars wordcount',
+    toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
+    init_instance_callback: onEditorReady,
+})
+</script>
+
+<template>
+    <div id="TinyMCE" class="h-auto w-full">
+        <a-spin
+            dot
+            :size="20"
+            class="w-full h-auto"
+            :loading="loading"
+            tip="编辑器加载中">
+            <Editor
+                :init="INIT"
+                :api-key="VITE_TINYMCE_KEY()"
+                @on-ready="onEditorReady">
+            </Editor>
+        </a-spin>
+    </div>
+</template>
+
+<style scoped lang="scss">
+#TinyMCE {
+    :deep(.tox) {
+        width: 100%;
+        height: 100%;
+        min-height: 500px !important;
+    }
+}
+</style>

src/components/TinyMCE/modal.vue

@@ -0,0 +1,47 @@
+<script setup>
+import TinyMCE from "./index.vue";
+import {ref} from "vue";
+
+const visible = ref(false);
+const fullscreen = ref(false);
+</script>
+
+<template>
+    <a-link v-if="!$slots.default" :hoverable="false" @click="visible=true">编辑</a-link>
+    <div v-else><slot></slot></div>
+
+    <a-modal
+        id="TinyMCEModal"
+        :mask-closable="false"
+        :unmount-on-close="true"
+        :fullscreen="fullscreen"
+        width="800px"
+        :draggable="true"
+        title-align="start"
+        title="编辑"
+        v-model:visible="visible">
+        <template #title>
+            <div class="flex justify-between w-full pr-[30px]">
+                <div>
+                    编辑
+                </div>
+                <a-link @click="fullscreen = !fullscreen">
+                    <icon-fullscreen v-if="!fullscreen" />
+                    <icon-fullscreen-exit v-else />
+                </a-link>
+            </div>
+        </template>
+        <TinyMCE :skin="fullscreen ? 'fluent' : 'borderless'"></TinyMCE>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+</style>
+
+<style lang="scss">
+#TinyMCEModal {
+    .arco-modal-body {
+        @apply p-0 h-full min-h-[500px];
+    }
+}
+</style>