sun-form-v3 1.0.70 → 1.0.72

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

@@ -1,194 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-<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

@@ -1,219 +0,0 @@
-<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

@@ -1,68 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-<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

@@ -1,95 +0,0 @@
-<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>