sun-form-v3 1.0.64 → 1.0.66

package/src/components/widgetCommonComps/commonApiConfig/index.vue

@@ -0,0 +1,194 @@
+<template>
+    <el-button plain :type="props.modelValue.apiurl ? 'primary' : ''" icon="Setting" @click="openEvent">
+        {{ props.buttonName }}
+    </el-button>
+    <vxe-modal transfer v-model="showModal" width="600px" height="600px" show-footer @close="closeHandle">
+        <template #title>
+            <span>{{ props.title }}</span>
+        </template>
+        <template #default>
+            <div class="item">
+                <div class="lab">发送方式</div>
+                <div class="con">
+                    <el-radio-group v-model="data.method">
+                        <el-radio-button value="get" label="GET"></el-radio-button>
+                        <el-radio-button value="post" label="POST"></el-radio-button>
+                        <el-radio-button value="put" label="PUT"></el-radio-button>
+                        <el-radio-button value="patch" label="PATCH"></el-radio-button>
+                        <el-radio-button value="delete" label="DELETE"></el-radio-button>
+                    </el-radio-group>
+                </div>
+            </div>
+            <div class="item">
+                <div class="lab">数据格式</div>
+                <div class="con">
+                    <el-radio-group v-model="data.contentType">
+                        <el-radio-button value="JSON" label="JSON"></el-radio-button>
+                        <el-radio-button value="FormData" label="FormData"></el-radio-button>
+                    </el-radio-group>
+                </div>
+            </div>
+            <div class="item">
+                <div class="lab">接口地址</div>
+                <div class="con">
+                    <el-input v-model="data.apiurl" placeholder="例：/api/getData"></el-input>
+                </div>
+            </div>
+            <div class="item">
+                <div class="lab">参数数据</div>
+                <div class="con">
+                    <common-json-input v-model="data.params"></common-json-input>
+                </div>
+            </div>
+            <div class="item">
+                <div class="lab">参数适配器</div>
+                <div class="con">
+                    <modal-editor :designer="designer" v-model="data.paramsFormat" :params="['params', 'widget', 'app']"></modal-editor>
+                    <el-popover placement="top-start" title="示例" :width="150" trigger="hover">
+                        <slot>
+                            return
+                            &nbsp;{<br>
+                            &nbsp;&nbsp;&nbsp;"name":'张三',<br>
+                            &nbsp;&nbsp;&nbsp;"age":22<br>
+                            &nbsp;},<br>
+                        </slot>
+                        <template #reference>
+                            <el-icon class="ml-2 cursor-pointer">
+                                <WarningFilled />
+                            </el-icon>
+                        </template>
+                    </el-popover>
+                    <!-- <common-code-editor v-model="data.beforeSend" height="300px"></common-code-editor> -->
+                </div>
+            </div>
+            <div class="item">
+                <div class="lab">请求头数据</div>
+                <div class="con">
+                    <common-json-input v-model="data.headers"></common-json-input>
+                </div>
+            </div>
+
+            <div class="item">
+                <div class="lab">请求头适配器</div>
+                <div class="con">
+                    <modal-editor :designer="designer" v-model="data.headersFormat" :params="['headers', 'widget', 'app']"></modal-editor>
+                    <el-popover placement="top-start" title="示例" :width="150" trigger="hover">
+                        <slot>
+                            return
+                            &nbsp;{<br>
+                            &nbsp;&nbsp;&nbsp;"token":'abc',<br>
+                            &nbsp;&nbsp;&nbsp;"serial-no":22<br>
+                            &nbsp;},<br>
+                        </slot>
+                        <template #reference>
+                            <el-icon class="ml-2 cursor-pointer">
+                                <WarningFilled />
+                            </el-icon>
+                        </template>
+                    </el-popover>
+                    <!-- <common-code-editor v-model="data.beforeSend" height="300px"></common-code-editor> -->
+                </div>
+            </div>
+            <div class="item">
+                <div class="lab">请求成功适配器</div>
+                <div class="con">
+                    <modal-editor :designer="designer" v-model="data.successFormat" :params="['res', 'widget', 'app']"></modal-editor>
+                    <el-popover placement="top-start" title="注意" :width="200" trigger="hover">
+                        <slot>
+                            请求成功是指数据上的请求成功，不代表业务上的请求成功，axios中进入的是then回调
+                        </slot>
+                        <template #reference>
+                            <el-icon class="ml-2 cursor-pointer">
+                                <WarningFilled />
+                            </el-icon>
+                        </template>
+                    </el-popover>
+                </div>
+            </div>
+            <div class="item">
+                <div class="lab">请求失败适配器</div>
+                <div class="con">
+                    <modal-editor :designer="designer" v-model="data.errorFormat" :params="['error', 'widget', 'app']"></modal-editor>
+                    <el-popover placement="top-start" title="注意" :width="200" trigger="hover">
+                        <slot>
+                            请求失败是指数据上的请求成功，不代表业务上的请求成功，axios中进入的是catch回调
+                        </slot>
+                        <template #reference>
+                            <el-icon class="ml-2 cursor-pointer">
+                                <WarningFilled />
+                            </el-icon>
+                        </template>
+                    </el-popover>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <el-button icon="Promotion" size="small" @click="testHandle">测试请求</el-button>
+            <el-button icon="Close" size="small" @click="closeHandle">关闭</el-button>
+            <el-button icon="Check" type="primary" size="small" @click="confirmHandle">确认</el-button>
+        </template>
+    </vxe-modal>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import commonCodeEditor from '../commonCodeEditor/editor.vue'
+import modalEditor from '../commonCodeEditor/modalEditor.vue'
+
+defineOptions({ name: "commonApiConfig" })
+const emit = defineEmits(['update:modelValue'])
+let props = defineProps({
+    modelValue: [Object, null],
+    designer: {
+        type: Object
+    },
+    buttonName: {
+        type: [String],
+        default: '接口配置'
+    }, title: {
+        type: [String],
+        default: '请求配置'
+    },
+})
+let designer = props.designer
+// let data = computed({
+//     set(value) {
+//         emit('update:modelValue', value)
+//     },
+//     get() {
+//         return props.modelValue
+//     }
+// })
+let data = ref(null)
+let showModal = ref(false)
+const openEvent = () => {
+    data.value = designer.$utils.clone(props.modelValue, true)
+    // data.apiSet = props.modelValue
+    showModal.value = true;
+}
+const closeHandle = () => {
+    showModal.value = false
+}
+const testHandle = () => {
+    emit('update:modelValue', data.value)
+    designer.requestByApisetConfig(designer.chosenWidget)
+}
+const confirmHandle = () => {
+    emit('update:modelValue', data.value)
+    showModal.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.item {
+    @apply flex my-4 items-center;
+
+    .lab {
+        @apply flex-none w-32 flex justify-end pr-4;
+    }
+
+    .con {
+        @apply flex-1;
+    }
+}
+</style>

package/src/components/widgetCommonComps/commonCard/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="border-gray-200 border-t border-b">
+        <!-- 卡片头 -->
+        <div class="flex items-center justify-between p-2 bg-gray-100 cursor-pointer text-sm" @click="toggle = !toggle">
+            <span class="select-none">
+                {{ props.title }}
+            </span>
+            <span>
+                <el-icon v-if="toggle">
+                    <ArrowUp />
+                </el-icon>
+                <el-icon v-else>
+                    <ArrowDown />
+                </el-icon>
+            </span>
+        </div>
+        <!-- 卡片内容 -->
+        <div class="px-3 py-2 bg-white" v-if="toggle">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+let props = defineProps({
+    title: {
+        type: String,
+        default: "标题"
+    }
+})
+defineOptions({ name: "commonCard" })
+let toggle = ref(true);
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetCommonComps/commonCodeEditor/editor.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="flex w-full h-full">
+        <div class="tree_wrap flex-none w-[320px] border"  v-if="!props.pure">
+            <common-sidetree :designer="designer" :canAddApi="true" @addApi="addApiHandle"></common-sidetree>
+        </div>
+        <div class="h-full w-full flex flex-col flex-1">
+            <div class="head py-2 px-2 box-border bg-[#191c20]" v-if="!props.pure">
+                <span class="text-[#569cd6]">function</span>
+                <span class="text-[#ffd700]">( </span>
+                <span v-for="(item, index) in props.params" class="text-[#d4d4d4]">
+                    {{ item }}
+                    {{ index == props.params.length - 1 ? '' : ' , ' }}
+                </span>
+                <span class="text-[#ffd700]"> ) {</span>
+            </div>
+            <div class="flex-1 h-full" ref="container" :style="{ width: props.width, height: props.height }">
+            </div>
+            <div v-if="!props.pure" class="footer text-[#ffd700] bg-[#2f3129]  py-2 px-2">}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import "monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution"; // 代码高亮&提示
+import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution"; // 代码高亮&提示
+import "monaco-editor/esm/vs/language/typescript/monaco.contribution"; // 代码高亮&提示
+import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js'; // 右键显示菜单
+import 'monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js'; // 折叠
+import 'monaco-editor/esm/vs/editor/contrib/format/browser/formatActions.js'; // 格式化代码
+import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js'; // 代码联想提示
+import 'monaco-editor/esm/vs/editor/contrib/tokenization/browser/tokenization.js'; // 代码联想提示
+import 'monaco-editor/esm/vs/editor/contrib/snippet/browser/snippetController2.js'; //代码片段支持
+
+defineOptions({ name: "commonCodeEditor" });
+const props = defineProps({
+    modelValue: [String, null],
+    designer: {
+        type: Object,
+        default: {}
+    },
+    width: {
+        type: [String],
+        default: '100%'
+    },
+    height: {
+        type: [String],
+        default: '100%'
+    },
+    language: {
+        type: [String],
+        default: 'javascript'
+    },
+    theme: {
+        type: [String],
+        default: 'vs-dark'
+        // default: 'vs'
+    },
+    params: {
+        type: [Array],
+        default: []
+    },
+    minimap: {
+        type: [Boolean],
+        default: true,
+    },
+    pure: {
+        type: [Boolean],
+        default: false,
+    },
+    tabSize: {
+        type: [Number],
+        default: 4,
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const container = ref(null);
+let editor = null
+onMounted(() => {
+    // 设置 Monaco 编辑器的基础路径
+    window.MonacoEnvironment = {
+        getWorker(_, label) {
+            if (label === 'json') {
+                return new jsonWorker();
+            }
+            if (label === 'css' || label === 'scss' || label === 'less') {
+                return new cssWorker();
+            }
+            if (label === 'html' || label === 'handlebars' || label === 'razor') {
+                return new htmlWorker();
+            }
+            if (label === 'typescript' || label === 'javascript') {
+                return new tsWorker();
+            }
+            return new editorWorker();
+        }
+    };
+
+    // 确保容器元素存在且尺寸正确
+    if (container.value) {
+        editor = monaco.editor.create(container.value, {
+            value: props.modelValue || "",
+            language: props.language,
+            theme: props.theme, // 可选：使用暗色主题 默认
+            automaticLayout: true, // 自动调整布局以适应容器大小变化
+            minimap: { enabled: props.minimap }, // 启用小地图
+            folding: true, // 启用代码折叠
+            foldingStrategy: 'auto', // 自动折叠策略
+            renderLineHighlight: 'all', // 高亮当前行
+            scrollBeyondLastLine: false, // 禁止滚动超过最后一行
+            quickSuggestions: true, // 快速建议
+            suggestOnTriggerCharacters: true, // 在触发字符时提供建议
+            parameterHints: { enabled: true }, // 启用参数提示
+            autoClosingBrackets: 'always', // 自动闭合括号
+            autoClosingQuotes: 'always', // 自动闭合引号
+            guides: { indentation: true }, // 缩进指南
+            autoIndent: 'full', // 自动缩进
+            formatOnType: true, // 在输入时格式化
+            formatOnPaste: true, // 在粘贴时格式化
+            wordWrap: 'wordWrapColumn',// 自动换行
+            tabSize: props.tabSize,// 缩进大小
+        });
+        // monaco.languages.registerHoverProvider('javascript', {
+        //     provideHover: function (model, position) {
+        //         const word = model.getWordAtPosition(position);
+        //         if (word.word.startsWith('btn_')) {
+        //             return {
+        //                 contents: [
+        //                     { value: '按钮组件: 提交表单' },
+        //                     { value: '属性: label="提交", type="primary"' },
+        //                     { value: '方法: onClick="submitForm()"' }
+        //                 ]
+        //             };
+        //         }
+        //         // 处理其他组件类型...
+        //     }
+        // });
+
+        editor.addAction({
+            id: 'show-component-info',
+            label: '显示组件信息',
+            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.I],
+            contextMenuGroupId: 'operation',
+            contextMenuOrder: 1.5,
+            run: function (ed) {
+                const model = ed.getModel();
+                const selection = ed.getSelection();
+                const word = model.getWordAtPosition(selection.getStartPosition());
+                if (word && word.word.startsWith('grid_')) {
+                    console.log('组件名称:', word.word);
+                    showComponentInfo(word.word); // 自定义函数，显示组件信息
+                }
+            }
+        });
+        editor.onDidChangeModelContent((event) => {
+            emit('update:modelValue', editor.getValue());
+        });
+        setTimeout(() => {
+            formatCode();
+        }, 20);
+        // watch(() => props.modelValue, (val) => {
+        //     console.log(val);
+        //     setValue(val)
+        //     setTimeout(() => {
+        //         formatCode();
+        //     }, 20);
+        // }, {
+        //     deep: true,
+        //     immediate: true
+        // })
+        // 可选：在组件卸载时销毁编辑器
+        onUnmounted(() => {
+            editor.dispose();
+        });
+    } else {
+        console.error('编辑器容器元素不存在');
+    }
+});
+const getValue = () => {
+    console.log(editor.getValue());
+}
+const setValue = (val) => {
+    editor.setValue(val);
+}
+const formatCode = () => {
+    editor.trigger('keyboard', 'editor.action.formatDocument', null);
+}
+const setPositionValue = (val) => {
+    const position = editor.getPosition();
+    editor.executeEdits('', [{
+        range: new monaco.Range(
+            position.lineNumber,
+            position.column,
+            position.lineNumber,
+            position.column
+        ),
+        text: val,
+        forceMoveMarkers: true
+    }]);
+}
+const addApiHandle = (row) => {
+    console.log(row);
+}
+
+defineExpose({
+    getValue,
+    setValue,
+    setPositionValue,
+    formatCode
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetCommonComps/commonCodeEditor/modalEditor.vue

@@ -0,0 +1,68 @@
+<template>
+    <el-button plain :type="props.modelValue ? 'primary' : ''" icon="Edit" @click="openEvent">
+        {{ props.buttonName }}
+    </el-button>
+    <vxe-modal transfer v-model="showModal" width="80%" height="80%" show-footer @close="closeHandle">
+        <template #title>
+            <span>{{ props.title }}</span>
+        </template>
+        <template #default>
+            <commonCodeEditor :designer="designer" :params="props.params" v-if="showModal" v-model="codeString">
+            </commonCodeEditor>
+        </template>
+        <template #footer>
+            <el-button icon="Close" size="small" @click="closeHandle">关闭</el-button>
+            <el-button icon="Check" size="small" type="primary" @click="confirmHandle">确认</el-button>
+        </template>
+    </vxe-modal>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import commonCodeEditor from './editor.vue'
+
+let props = defineProps({
+    modelValue: [String, null],
+    params: {
+        type: [Array],
+        default: []
+    },
+    designer: {
+        type: Object,
+        default: {}
+    },
+    buttonName: {
+        type: [String],
+        default: '编辑代码'
+    }, title: {
+        type: [String],
+        default: '代码编辑器'
+    },
+})
+const emit = defineEmits(['update:modelValue'])
+
+let showModal = ref(false)
+// let codeString = computed({
+//     get() {
+//         return props.modelValue
+//     },
+//     set(value) {
+//         emit('update:modelValue', value);
+//     }
+// })
+let codeString = ref(null)
+const openEvent = () => {
+    codeString.value = props.modelValue
+    showModal.value = true;
+}
+const closeHandle = () => {
+    showModal.value = false
+}
+const confirmHandle = () => {
+    emit('update:modelValue', codeString.value);
+    showModal.value = false
+}
+defineOptions({ name: "modalEditor" })
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetCommonComps/commonCollapseCard/index.vue

@@ -0,0 +1,10 @@
+<template>
+</template>
+
+<script setup>
+import { ref,reactive } from 'vue';
+defineOptions({name:"commonCollapseCard"})
+</script>
+
+<style scoped lang="scss">
+</style>

package/src/components/widgetCommonComps/commonContainer/index.vue

@@ -0,0 +1,95 @@
+<template>
+    <div @click.stop="activeWidget" class="box-border relative "
+        v-if="!(designer.showMode&&props.widget.props.hide)"
+        :style="{width: 100/24 * props.widget.props.width + '%'}"
+        :class="designer.showMode||(widget.id == designer.widgetConfig.chosenId ? 'border-blue-700 border-2' : 'border-2 border-gray-100 ') + ' ' + (designer.showMode||(props.widget.type == 'homepage' ? 'overflow-y-auto py-5 ' : ''))">
+        <slot></slot>
+        <div v-if="widget.id == designer.widgetConfig.chosenId && widget.type != 'homepage'&&!designer.showMode"
+            class="absolute right-[-2px] top-[-22px] h-[20px] bg-blue-700">
+            <el-tooltip class="box-item" effect="dark" content="父级" placement="top">
+                <el-icon size="22" color="#ffffff" class="icon_item" @click.stop="gotoParent">
+                    <Top />
+                </el-icon>
+            </el-tooltip>
+            <el-tooltip class="box-item" effect="dark" content="复制" placement="top">
+                <el-icon size="22" color="#ffffff" class="icon_item" @click.stop="copyWidget">
+                    <CopyDocument />
+                </el-icon>
+            </el-tooltip>
+            <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
+                <el-icon @click.stop="deleteWidget" size="22" color="#ffffff" class="icon_item">
+                    <Delete />
+                </el-icon>
+            </el-tooltip>
+        </div>
+        <div v-if="props.widget.id == designer.widgetConfig.chosenId && props.widget.type != 'homepage'&&!designer.showMode"
+            class="handle absolute  top-[-22px] h-[20px] bg-blue-700 text-gray-50 text-xs px-1 flex items-center justify-center cursor-pointer"
+            :class="(widget.type == 'homepage') ? 'right-[-2px]' : 'right-[68px]'">
+            <el-icon v-if="widget.type != 'homepage'" size="12" color="#ffffff" class="mr-1">
+                <Rank />
+            </el-icon>
+            {{ props.widget.displayName }}
+        </div>
+    </div>
+</template>
+
+<script setup>
+import widgetConfig from '../../../widgetConfig';
+import { ref, reactive, watch } from 'vue';
+defineOptions({ name: "commonContainer" })
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: {}
+    },
+    widget: {
+        type: Object,
+        default: {}
+    },
+    parentWidget: {
+        type: Object,
+        default: {}
+    }
+})
+let widget = reactive(props.widget)
+let designer = props.designer
+let parentWidget = reactive(props.parentWidget)
+
+let activeWidget = () => {
+    if(!designer.showMode){
+        designer.setChosenId(widget.id)
+    }
+}
+let deleteWidget = () => {
+    let widgetList = parentWidget.widgetList
+    let index = widgetList.findIndex(item => item.id == widget.id);
+    widgetList.splice(index, 1);
+    if (widgetList.length) {
+        if (index == 0) {
+            designer.setChosenId(widgetList[0].id)
+        } else {
+            designer.setChosenId(widgetList[index - 1].id)
+        }
+    } else {
+        designer.setChosenId(parentWidget.id)
+    }
+}
+let gotoParent = () => {
+    designer.setChosenId(parentWidget.id)
+}
+let copyWidget = () => {
+    let widgetList = parentWidget.widgetList
+    let index = widgetList.findIndex(item => item.id == widget.id);
+    let obj = widgetConfig[widget.type]
+    let newWidget = designer.getChosenInitData(obj)
+    widgetList.splice(index + 1, 0, newWidget);
+}
+</script>
+
+<style scoped lang="scss">
+@import url("../../../assets/font/iconfont.css");
+
+.icon_item {
+    @apply px-1 cursor-pointer;
+}
+</style>