sun-form-v3 1.0.71 → 1.0.72

package/src/assets/styles/element/index.scss

@@ -1,15 +0,0 @@
-/* 只需要重写你需要的即可 */
-@forward 'element-plus/theme-chalk/src/common/var.scss'with (
-  $colors: ('primary': (
-      'base': rgb(85, 132, 255),
-    ),
-  ),
-);
-
-
-
-@use "element-plus/theme-chalk/src/index.scss"as *;
-
-body {
-  margin: 0;
-}

package/src/assets/styles/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/components/a.js

@@ -1,14 +0,0 @@
-const modules =
-    import.meta.glob('./test**.vue', {
-        eager: true
-    });
-    console.log('modules',modules);
-const components = Object.fromEntries(
-    Object.entries(modules).map(([path, module]) => {
-        const componentName = module.default.name
-        return [componentName, module.default];
-    })
-);
-export default {
-    ...components,
-};

package/src/components/aDesigner/config.vue

@@ -1,127 +0,0 @@
-<template>
-    <common-card title="基础属性" class="mb-1">
-        <div class="w-full">
-            <common-label-container label="唯一名称">
-                <el-input v-model="chosenWidget.id" disabled>
-                    <template #append>
-                        <el-button icon="Refresh" />
-                    </template>
-                </el-input>
-            </common-label-container>
-            <common-label-container label="组件标签">
-                <el-input v-model="chosenWidget.props.label">
-                </el-input>
-            </common-label-container>
-            <common-label-container label="字段名称">
-                <el-input v-model="chosenWidget.props.zdname" placeholder="填写会作为表单字段名称">
-                </el-input>
-            </common-label-container>
-            <common-label-container label="默认赋值">
-                <common-type-input v-model="chosenWidget.props.value"></common-type-input>
-            </common-label-container>
-            <common-label-container label="备注内容">
-                <el-input v-model="chosenWidget.props.remark" placeholder="填写会有备注提示内容">
-                </el-input>
-            </common-label-container>
-            <common-label-container label="组件宽度">
-                <el-slider v-model="chosenWidget.props.width" :step="2" show-stops :max="24" :min="6" />
-            </common-label-container>
-            <common-label-container label="标签宽度">
-                <el-input v-model="chosenWidget.props.labelWidth" placeholder="请填写标签信息">
-                </el-input>
-            </common-label-container>
-            <common-label-container label="标签位置">
-                <el-radio-group v-model="chosenWidget.props.labelPosition">
-                    <el-radio-button value="left" label="居左"></el-radio-button>
-                    <el-radio-button value="top" label="居上"></el-radio-button>
-                </el-radio-group>
-            </common-label-container>
-            <common-label-container label="标签对齐">
-                <el-radio-group v-model="chosenWidget.props.labelAlign">
-                    <el-radio-button value="left" label="居左"></el-radio-button>
-                    <el-radio-button value="right" label="居右"></el-radio-button>
-                </el-radio-group>
-            </common-label-container>
-            <common-label-container label="是否隐藏">
-                <el-radio-group v-model="chosenWidget.props.hide">
-                    <el-radio-button :value="false" label="显示"></el-radio-button>
-                    <el-radio-button :value="true" label="隐藏"></el-radio-button>
-                </el-radio-group>
-            </common-label-container>
-        </div>
-        <!-- <common-json-input v-model="data.chosenWidget.props.list"></common-json-input> -->
-        <common-api-config :designer="designer" v-if="chosenWidget.props.apiSet"
-            v-model="chosenWidget.props.apiSet"></common-api-config>
-        <component :ref="chosenWidget.id" :is="getComponent(chosenWidget.type)" :widget="chosenWidget" :designer="designer">
-        </component>
-    </common-card>
-    <common-card title="事件属性">
-        <common-label-container label="onCreated">
-            <modalEditor v-model="chosenWidget.props.onCreated" :params="['widget', 'self', 'app']" :designer="designer">
-            </modalEditor>
-        </common-label-container>
-        <common-label-container label="onMounted">
-            <modalEditor v-model="chosenWidget.props.onMounted" :params="['widget', 'self', 'app']" :designer="designer">
-            </modalEditor>
-        </common-label-container>
-        <common-label-container label="onInput">
-            <modalEditor v-model="chosenWidget.props.onInput" :params="['value', 'widget', 'self', 'app']"
-                :designer="designer">
-            </modalEditor>
-        </common-label-container>
-        <common-label-container label="onChange">
-            <modalEditor v-model="chosenWidget.props.onChange" :params="['value', 'widget', 'self', 'app']"
-                :designer="designer">
-            </modalEditor>
-        </common-label-container>
-        <common-label-container label="onFocus">
-            <modalEditor v-model="chosenWidget.props.onFocus" :params="['value', 'widget', 'self', 'app']"
-                :designer="designer">
-            </modalEditor>
-        </common-label-container>
-        <common-label-container label="onBlur">
-            <modalEditor v-model="chosenWidget.props.onBlur" :params="['value', 'widget', 'self', 'app']"
-                :designer="designer">
-            </modalEditor>
-        </common-label-container>
-        <common-label-container label="onHandle">
-            <modalEditor v-model="chosenWidget.props.onHandle" :params="['widget', 'self', 'app']" :designer="designer">
-            </modalEditor>
-        </common-label-container>
-    </common-card>
-    <!-- <common-code-editor v-model="data.chosenWidget.props.value"></common-code-editor> -->
-    <!-- <modalEditor v-model="data.chosenWidget.props.value"></modalEditor> -->
-    <!-- <CommonTypeInput v-model="data.chosenWidget.props.value"></CommonTypeInput> -->
-    <!-- <common-api-config :designer="designer" v-if="chosenWidget.props.apiSet"
-        v-model="chosenWidget.props.apiSet"></common-api-config>
-    {{ chosenWidget }} -->
-    <!-- {{ designer.widgetConfig }} -->
-</template>
-
-<script setup>
-
-import { ref, reactive, watch, computed, defineAsyncComponent } from 'vue';
-import commonCodeEditor from '../widgetCommonComps/commonCodeEditor/editor.vue'
-import modalEditor from '../widgetCommonComps/commonCodeEditor/modalEditor.vue'
-const modules = import.meta.glob('../widgetConfigComps/**/index.vue');
-const components = Object.fromEntries(
-    Object.entries(modules).map(([path, importFn]) => {
-        const match = path.match(/\/([^/]+)\/index\.vue$/);
-        const componentName = match ? match[1] : null;
-        return [componentName, defineAsyncComponent(importFn)];
-    })
-);
-const getComponent = (type) => {
-  return components['config-' + type] || null;
-};
-defineOptions({ name: "config" })
-let props = defineProps({
-    designer: {
-        type: Object,
-        default: {}
-    }
-})
-let designer = props.designer
-let chosenWidget = computed(() => designer.chosenWidget)
-</script>
-<style scoped lang="scss"></style>

package/src/components/aDesigner/design.vue

@@ -1,20 +0,0 @@
-<template>
-    <commonContainer class="h-full w-full" :widget="designer.widgetConfig" :designer="designer">
-        <widget-homepage :widget="designer.widgetConfig" :designer="designer"></widget-homepage>
-    </commonContainer>
-</template>
-
-<script setup>
-import { ref, reactive, toRaw, markRaw } from 'vue';
-let props = defineProps({
-    designer: {
-        type: Object,
-        default: {}
-    }
-})
-let designer = props.designer
-let homeWidget = designer.widgetConfig
-defineOptions({ name: "design" })
-</script>
-
-<style scoped lang="scss"></style>

package/src/components/aDesigner/index.vue

@@ -1,144 +0,0 @@
-<template>
-    <div class="h-[100vh]  bg-gray-100 flex flex-col ">
-        <div class="head px-4 py-2 bg-gray-50 flex justify-between items-center">
-            <div class="logo">
-                <img class="h-[32px]" src="../../assets/img/logo.png" alt="">
-            </div>
-            <div class="menu">
-                <el-popover placement="bottom" :width="360" trigger="click">
-                    <template #reference>
-                        <el-button class="mr-3">历史记录</el-button>
-                    </template>
-                    <el-table :row-style="rowStyleHandle" :data="designer.historyList" @row-click="clickRowHandle"
-                        max-height="300">
-                        <el-table-column property="id" label="变更组件">
-                            <template #default="scope">
-                                <div>{{ scope.row.widgetConfig.chosenId }}</div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column width="100" property="time" label="操作时间" />
-                    </el-table>
-                </el-popover>
-                <el-button-group class="mr-3">
-                    <el-button @click="goBack" :disabled="designer.historyIndex === 0">
-                        <i :class="`iconfont icon-xianghou`"></i>
-                    </el-button>
-                    <el-button @click="goForward" :disabled="designer.historyIndex === designer.historyList.length - 1">
-                        <i :class="`iconfont icon-xiangqian`"></i>
-                    </el-button>
-                </el-button-group>
-                <el-button @click="clearWidgetConfig">重置</el-button>
-                <el-button type="primary" @click="preview">预览</el-button>
-            </div>
-        </div>
-        <div class="content  flex-1 flex  border-t border-gray-200 overflow-hidden">
-            <!-- 左侧菜单栏 -->
-            <div class="left flex bg-gray-50 border-r border-gray-200">
-                <div class="w-12 border-r border-gray-200 pt-5">
-                    <div class="btn_item" :class="{ active: data.activeSidebar === 0 }" @click="data.activeSidebar = 0">
-                        <i :class="`iconfont icon-zujian`"></i>
-                    </div>
-                    <div class="btn_item" :class="{ active: data.activeSidebar === 1 }" @click="data.activeSidebar = 1">
-                        <i :class="`iconfont icon-dagang`"></i>
-                    </div>
-                    <div class="btn_item" :class="{ active: data.activeSidebar === 2 }" @click="data.activeSidebar = 2">
-                        <i :class="`iconfont icon-yuanma`"></i>
-                    </div>
-                </div>
-                <div class="w-80">
-                    <panel :designer="designer" :activeSidebar="data.activeSidebar"></panel>
-                </div>
-            </div>
-            <!-- 中间操作栏 -->
-            <div class="mid flex-1 py-2 px-2 box-border w-full h-full overflow-auto">
-                <div class="inner w-full h-full  bg-gray-50  ">
-                    <design :designer="designer"></design>
-                </div>
-            </div>
-            <!-- 右侧配置栏 -->
-            <div class="right bg-gray-50 w-80 border-l border-gray-200 overflow-y-auto overflow-x-hidden">
-                <config v-if="designer.chosenWidget" :designer="designer"></config>
-            </div>
-        </div>
-    </div>
-    <vxe-modal transfer v-model="showModal" width="99%" height="99%" show-footer>
-        <template #title>
-            <span>预览表单</span>
-        </template>
-        <template #default>
-            <show v-if="showModal" :widgetConfig="compWidgetConfig"></show>
-        </template>
-        <template #footer>
-            <el-button icon="Close" size="small" @click="showModal=false">关闭</el-button>
-        </template>
-    </vxe-modal>
-</template>
-
-<script setup>
-import { ref, reactive, watch } from 'vue';
-import panel from './panel.vue'
-import design from './design.vue'
-import config from './config.vue'
-import show from './show.vue'
-
-import Designer from '../../designer'
-
-import widgetConfigPanelData from '../../widgetConfig'
-let initWidgetConfig = widgetConfigPanelData.homepage
-let originInitData = JSON.parse(JSON.stringify(initWidgetConfig))
-let showModal = ref(false)
-let compWidgetConfig = null
-let designer = reactive(new Designer({
-    widgetConfig: initWidgetConfig
-}))
-let data = reactive({
-    activeSidebar: 0,
-})
-const preview = ()=>{
-    compWidgetConfig=designer.$utils.clone(designer.widgetConfig, true)
-    showModal.value=true;
-}
-const clearWidgetConfig = () => {
-    designer.updateWidget("homepage", designer.$utils.clone(originInitData, true), true)
-}
-const clickRowHandle = (row) => {
-    designer.historyIndex = row.index
-    designer.updateByHistory(row.widgetConfig)
-
-}
-const rowStyleHandle = ({ row, rowIndex }) => {
-    if (designer.historyIndex === rowIndex) {
-        return {
-            color: 'rgb(85, 132, 255)',
-            fontWeight: "bold"
-            // background: "rgb(85, 132, 255)"
-        }
-    }
-}
-const goBack = () => {
-    if (designer.historyIndex > 0) {
-        designer.historyIndex--
-        designer.updateByHistory(designer.historyList[designer.historyIndex].widgetConfig)
-    }
-}
-const goForward = () => {
-    if (designer.historyIndex < designer.historyList.length - 1) {
-        designer.historyIndex++
-        designer.updateByHistory(designer.historyList[designer.historyIndex].widgetConfig)
-    }
-}
-defineOptions({ name: "designer" })
-</script>
-
-<style scoped lang="scss">
-@import url("../../assets/font/iconfont.css");
-
-.btn_item {
-    transition: all .3s;
-    @apply w-full flex items-center box-border border-l-4 border-transparent justify-center h-12 mb-3 cursor-pointer hover:bg-blue-50 hover:text-blue-700;
-}
-
-.active {
-    @apply border-blue-700 text-blue-700 bg-blue-50;
-}
-</style>

package/src/components/aDesigner/panel.vue

@@ -1,144 +0,0 @@
-<template>
-    <div class="flex flex-col h-full" v-if="props.activeSidebar === 0">
-        <!-- 工具栏 -->
-        <div class="px-4 py-2 text-lg text-gray-900 border-b border-gray-200">组件库</div>
-        <!-- 组件内容 -->
-        <div class="flex-1 overflow-auto select-none">
-            <commonCard :title="'容器组件'" class="mb-1">
-                <draggable ghostClass="ghost" class="content_wrap flex flex-wrap flex-shrink-0 justify-between "
-                    :list="panelListContainer" :group="{ name: 'dragGroup', pull: 'clone', put: false }" item-key="id"
-                    :clone="handleWidgetClone" :sort="false">
-                    <template #item="{ element }">
-                        <div @click="handleWidgetClick(element)"
-                            class="group items w-[47%] flex-shrink-0 px-2 py-2 border border-gray-200 my-2 rounded cursor-pointer hover:shadow-md">
-                            <i :class="`iconfont icon-${element.type} text-blue-700 group-hover:text-blue-500`"></i>
-                            <span class="text-sm ml-1 group-hover:text-blue-500"> {{ element.displayName }} </span>
-                        </div>
-                    </template>
-                </draggable>
-            </commonCard>
-            <commonCard :title="'表单组件'" class="mb-1">
-                <draggable ghostClass="ghost" class="content_wrap flex flex-wrap flex-shrink-0 justify-between "
-                    :list="panelListForm" :group="{ name: 'dragGroup', pull: 'clone', put: false }" item-key="id"
-                    :clone="handleWidgetClone" :sort="false">
-                    <template #item="{ element }">
-                        <div @click="handleWidgetClick(element)"
-                            class="group items w-[47%] flex-shrink-0 px-2 py-2 border border-gray-200 my-2 rounded cursor-pointer hover:shadow-md">
-                            <i :class="`iconfont icon-${element.type} text-blue-700 group-hover:text-blue-500`"></i>
-                            <span class="text-sm ml-1 group-hover:text-blue-500"> {{ element.displayName }} </span>
-                        </div>
-                    </template>
-                </draggable>
-            </commonCard>
-            <commonCard :title="'其他组件'">
-                <draggable ghostClass="ghost" class="content_wrap flex flex-wrap flex-shrink-0 justify-between "
-                    :list="panelListOrther" :group="{ name: 'dragGroup', pull: 'clone', put: false }" item-key="id"
-                    :clone="handleWidgetClone" :sort="false">
-                    <template #item="{ element }">
-                        <div @click="handleWidgetClick(element)"
-                            class="group items w-[47%] flex-shrink-0 px-2 py-2 border border-gray-200 my-2 rounded cursor-pointer hover:shadow-md">
-                            <i :class="`iconfont icon-${element.type} text-blue-700 group-hover:text-blue-500`"></i>
-                            <span class="text-sm ml-1 group-hover:text-blue-500"> {{ element.displayName }} </span>
-                        </div>
-                    </template>
-                </draggable>
-            </commonCard>
-
-        </div>
-    </div>
-    <!-- 大纲 -->
-    <div class="flex flex-col h-full" v-if="props.activeSidebar === 1">
-        <common-sidetree :designer="designer"></common-sidetree>
-    </div>
-    <!-- 源码 -->
-    <div class="flex flex-col h-full box-border p-2" v-if="props.activeSidebar === 2">
-        <common-code-editor class="flex-1" theme="vs-dark" ref="editor" :tabSize="2" :pure="true" :minimap="false"
-            language="json" v-model="codeString"></common-code-editor>
-        <el-button @click="updateWidget">立即应用配置</el-button>
-    </div>
-</template>
-  
-
-<script setup>
-import draggable from "vuedraggable/src/vuedraggable";
-import commonCodeEditor from '../widgetCommonComps/commonCodeEditor/editor.vue'
-import { ref, reactive, watch, toRaw } from 'vue';
-import widgetConfig from '../../widgetConfig';
-import { js_beautify } from "../../util/jsformat";
-//获取参数props传参
-let props = defineProps({
-    designer: {
-        type: Object,
-        default: {}
-    },
-    activeSidebar: {
-        type: Number,
-        default: 0
-    }
-})
-let designer = props.designer
-let panelList = reactive(widgetConfig);
-let panelListContainer = reactive([]);
-let panelListForm = reactive([]);
-let panelListOrther = reactive([]);
-let codeString = ref("")
-let editor = ref()
-let handleWidgetClone = (e) => {
-    return designer.getChosenInitData(e)
-}
-let handleWidgetClick = (e) => {
-    let chosenWidget = designer.chosenWidget;
-    let obj = designer.getChosenInitData(e)
-    if (!chosenWidget) {//没有选中时候默认添加到homeWidgetList
-        let homeWidgetList = designer.widgetConfig.widgetList;
-        homeWidgetList.push(obj)
-    } else {//选中时候
-        if (chosenWidget.isContainer) {//如果选中组件是容器就添加到容器中
-            chosenWidget.widgetList.push(obj)
-        } else {//如果选中组件不是容器就添加到选中组件后面
-            let { widgetList, index } = designer.getParentWidgetById(chosenWidget.id);
-            widgetList.splice(index + 1, 0, obj)
-        }
-    }
-}
-for (let i in panelList) {
-    let item = panelList[i];
-    if (item.addToPanel !== false && i != 'homepage') {
-        item.type = i;
-        if (item.isContainer) {
-            panelListContainer.push(item);
-        } else if (item.isForm) {
-            panelListForm.push(item);
-        } else {
-            panelListOrther.push(item);
-        }
-    }
-}
-const updateWidget = () => {
-    let chosenWidget = designer.chosenWidget;
-    designer.updateWidget(chosenWidget.id, JSON.parse(codeString.value))
-
-}
-watch(() => designer.widgetConfig, (val) => {
-    if (designer.chosenWidget) {
-        let str = js_beautify(JSON.stringify(designer.chosenWidget))
-        codeString.value = str
-        if (props.activeSidebar == 2) {
-            editor.value.setValue(str)
-        }
-    }
-}, {
-    deep: true,
-    immediate: true
-})
-defineOptions({ name: "panel" })
-
-</script>
-
-<style scoped lang="scss">
-@import url("../../assets/font/iconfont.css");
-
-.ghost {
-    @apply max-h-0 overflow-hidden border border-blue-700 p-0 w-full;
-}
-</style>

package/src/components/aDesigner/show.vue

@@ -1,24 +0,0 @@
-<template>
-    <commonContainer class="h-full w-full" :widget="designer.widgetConfig" :designer="designer">
-        <widget-homepage :widget="designer.widgetConfig" :designer="designer"></widget-homepage>
-    </commonContainer>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue';
-import Designer from '../../designer'
-let props = defineProps({
-    widgetConfig: {
-        type: Object,
-        default: {}
-    },
-})
-let designer = reactive(new Designer({
-    widgetConfig: props.widgetConfig,
-    showMode: true
-}))
-defineOptions({ name: "sunForm" })
-
-</script>
-
-<style scoped lang="scss"></style>