@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config-page/dashboard-theme-setting/Index.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="theme-setting">
+    <div class="theme-setting__header">
+      <span v-if="editTheme">{{editTheme.NAME}}</span>
+      <el-button v-else type="primary" link @click="$emit('save')">
+        <i class="epx-icon-save"></i>
+        <span>保存为预设</span>
+      </el-button>
+    </div>
+    <div class="theme-setting__content">
+      <!-- PC / 移动端 切换：移动端态下编辑写入 mobile 覆盖层，仅 ≤992px 生效，未设项继承 PC -->
+      <div class="theme-setting__device-switch">
+        <el-radio-group :model-value="mobileEdit ? 'mobile' : 'pc'" size="small" @change="v=>mobileEdit = v==='mobile'">
+          <el-radio-button label="pc" value="pc">PC 端</el-radio-button>
+          <el-radio-button label="mobile" value="mobile">移动端</el-radio-button>
+        </el-radio-group>
+        <span v-if="mobileEdit" class="theme-setting__device-tip">仅覆盖移动端(≤992px)，未设项继承 PC</span>
+      </div>
+      <!-- 分类 -->
+      <ul class="theme-setting__tree">
+        <li class="theme-setting__tree-item" :class="{'is-fold': fold[item.key]}" v-for="item in visibleSettingTree" :key="item.key">
+          <div class="theme-setting__tree-header" @click="fold[item.key] = !fold[item.key]">
+            <span>{{item.label}}</span>
+            <i class="el-icon-arrow-down"></i>
+          </div>
+          <div class="theme-setting__tree-content">
+            <!-- 默认/悬浮 切换：悬浮态下编辑器读写 hoverStyle -->
+            <div v-if="item.hover" class="theme-setting__mode-switch">
+              <el-radio-group :model-value="hoverMode[item.key] ? 'hover' : 'default'" size="small" @change="v=>(hoverMode[item.key] = v==='hover')">
+                <el-radio-button label="default" value="default">默认</el-radio-button>
+                <el-radio-button label="hover" value="hover">悬浮</el-radio-button>
+              </el-radio-group>
+            </div>
+            <template v-for="config in item.children" :key="item.key+'-'+config.key">
+              <template v-if="!hoverMode[item.key] || config.hover">
+                <!-- 背景 -->
+                <theme-setting-background :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')+'-'+(hoverMode[item.key]?'h':'d')" v-if="config.type==='background'" :label="config.label" :value="cfgValue(item, config)" @change="v=>onChange(item, config, v)"></theme-setting-background>
+                <!-- 边框 -->
+                <theme-setting-border :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')+'-'+(hoverMode[item.key]?'h':'d')" v-else-if="config.type==='border'" :label="config.label" :value="cfgValue(item, config)" @change="v=>onChange(item, config, v)"></theme-setting-border>
+                <!-- 文字 -->
+                <theme-setting-font :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')+'-'+(hoverMode[item.key]?'h':'d')" v-else-if="config.type==='font'" :label="config.label" :value="cfgValue(item, config)" @change="v=>onChange(item, config, v)"></theme-setting-font>
+                <!-- 阴影 -->
+                <theme-setting-shadow :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')+'-'+(hoverMode[item.key]?'h':'d')" v-else-if="config.type==='shadow'" :label="config.label" :value="cfgValue(item, config)" @change="v=>onChange(item, config, v)"></theme-setting-shadow>
+                <!-- 单色 -->
+                <div :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')" v-else-if="config.type==='color'" class="epx-page-designer-setting-style__item--alone">
+                  <label class="epx-page-designer-setting-style__label" for="">{{config.label}}</label>
+                  <el-color-picker :model-value="cfgValue(item, config)" show-alpha :predefine="predefineColors" @change="v=>changeConfig(item, config, v)"></el-color-picker>
+                </div>
+                <!-- 多色色板 -->
+                <div :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')" v-else-if="config.type==='colors'" class="theme-setting__palette">
+                  <label class="epx-page-designer-setting-style__label" for="">{{config.label}}</label>
+                  <div class="theme-setting__palette-list">
+                    <div class="theme-setting__palette-item" v-for="(color, index) in getColors(item, config)" :key="index">
+                      <el-color-picker :model-value="color" show-alpha :predefine="predefineColors" @change="v=>setColor(item, config, index, v)"></el-color-picker>
+                      <i class="el-icon-close theme-setting__palette-remove" @click="removeColor(item, config, index)"></i>
+                    </div>
+                    <el-button class="theme-setting__palette-add" icon="el-icon-plus" @click="addColor(item, config)"></el-button>
+                  </div>
+                </div>
+                <!-- 数字 -->
+                <div :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')" v-else-if="config.type==='number'" class="epx-page-designer-setting-style__item--alone">
+                  <label class="epx-page-designer-setting-style__label" for="">{{config.label}}</label>
+                  <el-input-number :model-value="cfgValue(item, config)" controls-position="right" :min="0" size="default" @change="v=>changeConfig(item, config, v)"></el-input-number>
+                </div>
+                <!-- 文本 -->
+                <div :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')" v-else-if="config.type==='text'" class="epx-page-designer-setting-style__item--alone">
+                  <label class="epx-page-designer-setting-style__label" for="">{{config.label}}</label>
+                  <el-input :model-value="cfgValue(item, config)" size="default" :placeholder="config.placeholder" clearable @input="v=>changeConfig(item, config, v)"></el-input>
+                </div>
+                <!-- 多行文本 -->
+                <div :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')" v-else-if="config.type==='textarea'" class="epx-page-designer-setting-style__item--alone">
+                  <label class="epx-page-designer-setting-style__label" for="">{{config.label}}</label>
+                  <el-input type="textarea" :rows="8" :model-value="cfgValue(item, config)" :placeholder="config.placeholder" @input="v=>changeConfig(item, config, v)"></el-input>
+                </div>
+                <!-- CSS 编辑器（CodeMirror 语法高亮 + 自动补全） -->
+                <div :key="item.key+'-'+config.key+'-'+(mobileEdit?'m':'p')" v-else-if="config.type==='css'" class="theme-setting__css">
+                  <label class="epx-page-designer-setting-style__label" for="">{{config.label}}</label>
+                  <css-editor :value="cfgValue(item, config)" @change="v=>changeConfig(item, config, v)"></css-editor>
+                </div>
+              </template>
+            </template>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import Background from './Background.vue'
+import Border from './Border.vue'
+import Font from './Font.vue'
+import Shadow from './Shadow.vue'
+import CssEditor from '@epxing/designer/src/page-designer/setting-panel/css-editor/CssEditor.vue'
+export default {
+  name: 'epx-dashboard-designer-theme-setting',
+  components: {
+    ThemeSettingBackground: Background,
+    ThemeSettingBorder: Border,
+    ThemeSettingFont: Font,
+    ThemeSettingShadow: Shadow,
+    CssEditor
+  },
+  props: {
+    editTheme: Object,
+    value: Object
+  },
+  data () {
+    return {
+      settingTree: [],
+      fold: {},
+      hoverMode: {}, // 各分区是否处于"悬浮"编辑态，key 为分区 key
+      mobileEdit: false, // 是否处于"移动端"编辑态：写入 themeConfig.mobile 覆盖层
+      predefineColors: ['#4078ff', '#00c78b', '#ff8c42', '#a855f7', '#ef4444', '#f59e0b', '#06b6d4', '#84cc16'],
+      themeConfig: {
+        page: {},
+        component: {},
+        num: {},
+        chart: {},
+        custom: {},
+        mobile: {} // 移动端覆盖层（只存被覆盖的键，结构同顶层 page/component/num）
+      }
+    }
+  },
+  computed: {
+    // 移动端态只展示支持覆盖的样式分区（page/component/num）；chart 走 JS、custom 走基础层，暂不支持移动端覆盖
+    visibleSettingTree () {
+      return this.mobileEdit ? this.settingTree.filter(s => s.mobileOverride) : this.settingTree
+    }
+  },
+  watch: {
+    // 上报"移动端编辑态"，供设计器加 .is-mobile-preview 类预览移动端覆盖
+    mobileEdit (v) {
+      this.$emit('mobile-edit', v)
+    }
+  },
+  methods: {
+    getSetting () {
+      this.settingTree = [
+        {
+          key: 'page',
+          label: '页面样式',
+          mobileOverride: true,
+          children: [
+            {
+              key: 'background',
+              label: '背景',
+              type: 'background'
+            },
+            {
+              key: 'margin',
+              label: '间距',
+              type: 'num'
+            }
+          ]
+        },
+        {
+          key: 'component',
+          label: '图表组件样式',
+          hover: true, // 支持"默认/悬浮"切换
+          mobileOverride: true,
+          children: [
+            {
+              key: 'titleBackground',
+              label: '标题背景',
+              type: 'background'
+            },
+            {
+              key: 'titleIcon',
+              label: '标题图标',
+              type: 'image'
+            },
+            {
+              key: 'titleIconSize',
+              label: '图标大小',
+              type: 'number'
+            },
+            {
+              key: 'titleFontStyle',
+              label: '标题文字',
+              type: 'font'
+            },
+            {
+              key: 'background',
+              label: '组件背景',
+              type: 'background',
+              hover: true // 悬浮态可配
+            },
+            {
+              key: 'fontStyle',
+              label: '组件文字',
+              type: 'font',
+              hover: true
+            },
+            {
+              key: 'border',
+              label: '组件边框',
+              type: 'border',
+              hover: true
+            },
+            {
+              key: 'shadow',
+              label: '组件阴影',
+              type: 'shadow',
+              hover: true
+            }
+          ]
+        },
+        {
+          key: 'num',
+          label: '数字统计样式',
+          hover: true,
+          mobileOverride: true,
+          children: [
+            {
+              key: 'background',
+              label: '组件背景',
+              type: 'background',
+              hover: true
+            },
+            {
+              key: 'border',
+              label: '组件边框',
+              type: 'border',
+              hover: true
+            },
+            {
+              key: 'shadow',
+              label: '组件阴影',
+              type: 'shadow',
+              hover: true
+            },
+            {
+              key: 'fontStyle',
+              label: '数字文字',
+              type: 'font',
+              hover: true
+            },
+            {
+              key: 'titleFontStyle',
+              label: '标题文字',
+              type: 'font'
+            }
+          ]
+        },
+        {
+          key: 'chart',
+          label: '图表配色',
+          mobileOverride: true,
+          children: [
+            {
+              key: 'colors',
+              label: '系列色板',
+              type: 'colors'
+            },
+            {
+              key: 'splitLineColor',
+              label: '分割线颜色',
+              type: 'color'
+            },
+            {
+              key: 'axisLineColor',
+              label: '轴线颜色',
+              type: 'color'
+            }
+          ]
+        },
+        {
+          key: 'custom',
+          label: '高级自定义',
+          children: [
+            {
+              key: 'css',
+              label: '自定义 CSS（& 代表当前仪表盘作用域）',
+              type: 'css'
+            }
+          ]
+        }
+      ]
+    },
+    // 读分区容器：移动端态走 themeConfig.mobile 子树，否则顶层。不创建，缺失返回 {}
+    readSection (itemKey) {
+      const root = this.mobileEdit ? (this.themeConfig.mobile || {}) : this.themeConfig
+      return root[itemKey] || {}
+    },
+    // 写分区容器：移动端态写入 themeConfig.mobile 子树
+    writeSection (itemKey, updated) {
+      if (this.mobileEdit) {
+        if (!this.themeConfig.mobile) this.themeConfig.mobile = {}
+        this.themeConfig.mobile[itemKey] = updated
+      } else {
+        this.themeConfig[itemKey] = updated
+      }
+      this.$emit('change', this.themeConfig)
+    },
+    changeConfig (item, config, value) {
+      this.writeSection(item.key, { ...this.readSection(item.key), [config.key]: value })
+    },
+    // 悬浮态：把编辑结果写进分区的 hoverStyle 子对象（与默认态键名对称，引擎渲染时拍平为 :hover 规则）
+    changeHoverConfig (item, config, value) {
+      const section = this.readSection(item.key)
+      const hoverStyle = { ...(section.hoverStyle || {}), [config.key]: value }
+      this.writeSection(item.key, { ...section, hoverStyle })
+    },
+    // 编辑器取值：悬浮态读 hoverStyle 子对象，默认态读分区本身（移动端态读 mobile 子树）
+    cfgValue (item, config) {
+      const section = this.readSection(item.key)
+      if (this.hoverMode[item.key]) {
+        return (section.hoverStyle || {})[config.key]
+      }
+      return section[config.key]
+    },
+    onChange (item, config, value) {
+      if (this.hoverMode[item.key]) {
+        this.changeHoverConfig(item, config, value)
+      } else {
+        this.changeConfig(item, config, value)
+      }
+    },
+    // 色板：兼容旧的逗号分隔字符串，统一取成数组
+    getColors (item, config) {
+      const v = this.readSection(item.key)[config.key]
+      if (Array.isArray(v)) return v
+      if (typeof v === 'string' && v.trim()) return v.split(/[,，\s]+/).filter(Boolean)
+      return []
+    },
+    addColor (item, config) {
+      this.changeConfig(item, config, [...this.getColors(item, config), '#4078ff'])
+    },
+    setColor (item, config, index, value) {
+      const list = [...this.getColors(item, config)]
+      if (value) {
+        list.splice(index, 1, value)
+      } else {
+        list.splice(index, 1) // 清空取色器视为删除该色
+      }
+      this.changeConfig(item, config, list)
+    },
+    removeColor (item, config, index) {
+      const list = [...this.getColors(item, config)]
+      list.splice(index, 1)
+      this.changeConfig(item, config, list)
+    }
+  },
+  created () {
+    this.getSetting()
+    if (this.editTheme) {
+      const themeConfig = JSON.parse(this.editTheme.CONTENT)
+      // 兜底补齐分区，兼容旧主题数据缺少 chart/custom 等分区的情况
+      if (themeConfig) this.themeConfig = { ...this.themeConfig, ...themeConfig }
+    } else if (this.value) {
+      this.themeConfig = { ...this.themeConfig, ...this.value }
+    }
+  },
+  beforeUnmount () {
+    // 关闭主题面板时清掉设计器的移动端预览态
+    this.$emit('mobile-edit', false)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.theme-setting__header {
+  padding: 0 12px;
+  border-bottom: 1px solid #e3e3e3;
+  i {
+    margin-right: 4px;
+  }
+  >span {
+    font-weight: bold;
+    font-size: var(--epx-font-size-l);
+    color: #333333;
+    line-height: 48px;
+  }
+}
+.theme-setting__tree-item {
+  padding: 12px 0;
+  &:not(:last-child) {
+    border-bottom: 1px solid #e3e3e3;
+  }
+  &.is-fold {
+    .theme-setting__tree-content {
+      height: 0;
+      overflow: hidden;
+    }
+    .theme-setting__tree-header >i{
+      transform: rotate(180deg);
+    }
+  }
+}
+.theme-setting__tree-header {
+  padding: 0 12px;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  >span {
+    font-weight: bold;
+  }
+  >i {
+    font-size: var(--epx-font-size-l);
+    color: #666;
+    cursor: pointer;
+    transition: all .3s;
+  }
+}
+.theme-setting__tree-content {
+
+  :deep(.el-select),
+  :deep(.epx-page-designer-setting-style__upload) {
+    width: 160px;
+  }
+
+}
+.theme-setting__mode-switch {
+  padding: 4px 12px 8px;
+}
+.theme-setting__device-switch {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e3e3e3;
+  text-align: center;
+}
+.theme-setting__device-tip {
+  display: block;
+  margin-top: 6px;
+  font-size: 12px;
+  color: #999;
+}
+.theme-setting__palette {
+  padding: 6px 12px;
+}
+.theme-setting__palette-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+}
+.theme-setting__palette-item {
+  position: relative;
+  &:hover .theme-setting__palette-remove {
+    display: block;
+  }
+}
+.theme-setting__palette-remove {
+  display: none;
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  font-size: 12px;
+  color: #fff;
+  background: #909399;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.theme-setting__palette-add {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 4px; // 方形，与取色块一致（去掉 circle 圆形）
+  font-size: 16px;
+}
+.theme-setting__css {
+  padding: 6px 12px;
+  .epx-page-designer-setting-style__label {
+    display: block;
+    width: auto; // 覆盖基础类的 90px，避免长标题被挤成多行
+    margin-bottom: 6px;
+  }
+}
+</style>

package/src/visual/config-page/dashboard-theme-setting/Shadow.vue

@@ -0,0 +1,102 @@
+<template>
+<div :class="{'epx-page-designer-setting-style__item': true, 'epx-page-designer-setting-style__item--unfold':unfold }">
+  <div class="epx-page-designer-setting-style__header">
+    <span>
+      <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" @click="unfold=!unfold"></i>
+      <label class="epx-page-designer-setting-style__label" for="">{{label}}</label>
+    </span>
+  </div>
+  <div class="epx-page-designer-setting-style__content">
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">颜色</label>
+      <el-color-picker v-model="shadow.color" show-alpha :predefine="predefineColors"></el-color-picker>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">水平偏移</label>
+      <el-input-number v-model="shadow.x" controls-position="right" size="small"></el-input-number>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">垂直偏移</label>
+      <el-input-number v-model="shadow.y" controls-position="right" size="small"></el-input-number>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">模糊</label>
+      <el-input-number v-model="shadow.blur" :min="0" controls-position="right" size="small"></el-input-number>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">扩展</label>
+      <el-input-number v-model="shadow.spread" controls-position="right" size="small"></el-input-number>
+    </div>
+    <div class="epx-page-designer-setting-style__subitem">
+      <label class="epx-page-designer-setting-style__label" for="">内阴影</label>
+      <el-switch v-model="shadow.inset"></el-switch>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  props: {
+    label: String,
+    value: Object
+  },
+  data () {
+    return {
+      unfold: false,
+      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
+      shadow: { x: undefined, y: undefined, blur: undefined, spread: undefined, color: '', inset: false }
+    }
+  },
+  watch: {
+    shadow: {
+      handler () {
+        this.emitChange()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 解析 box-shadow 字符串到结构化字段（容错：颜色用 rgba/hex 匹配，其余按 px 长度顺序取 x/y/blur/spread）
+    parse (value) {
+      const out = { x: undefined, y: undefined, blur: undefined, spread: undefined, color: '', inset: false }
+      const str = (value && value['box-shadow']) || ''
+      if (!str) return out
+      let s = String(str).trim()
+      if (/\binset\b/.test(s)) {
+        out.inset = true
+        s = s.replace(/\binset\b/, ' ')
+      }
+      const colorMatch = s.match(/rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-fA-F]{3,8}/)
+      if (colorMatch) {
+        out.color = colorMatch[0]
+        s = s.replace(colorMatch[0], ' ')
+      }
+      const nums = (s.match(/-?\d*\.?\d+/g) || []).map(Number)
+      out.x = nums[0]
+      out.y = nums[1]
+      out.blur = nums[2]
+      out.spread = nums[3]
+      return out
+    },
+    // 组合为 box-shadow 样式组；全空则发空对象（清除阴影）
+    emitChange () {
+      const { x, y, blur, spread, color, inset } = this.shadow
+      const isNum = v => typeof v === 'number' && !isNaN(v)
+      const hasLen = [x, y, blur, spread].some(isNum)
+      if (!hasLen && !color) {
+        this.$emit('change', {})
+        return
+      }
+      const px = v => `${isNum(v) ? v : 0}px`
+      const parts = []
+      if (inset) parts.push('inset')
+      parts.push(px(x), px(y), px(blur), px(spread))
+      if (color) parts.push(color)
+      this.$emit('change', { 'box-shadow': parts.join(' ') })
+    }
+  },
+  created () {
+    this.shadow = this.parse(this.value)
+  }
+}
+</script>

package/src/visual/config-page/index.js

@@ -0,0 +1,93 @@
+import VisualConfigPage from './VisualConfigPage.vue'
+import ComponentList from './ComponentList.vue'
+import ComponentLibrary from './ComponentLibrary.vue'
+import ComponentLibraryDialog from './ComponentLibraryDialog.vue'
+import JsPanel from '@epxing/business/src/components/JsPanel.vue'
+import PagePreview from './PagePreview.vue'
+import ConfigPanel from './ConfigPanel.vue'
+// 数据看板预览
+import Dashboard from './Dashboard.vue'
+import DashboardDesign from './DashboardDesign.vue'
+import DashboardGlobalConfig from './DashboardGlobalConfig.vue'
+import DashboardSetting from './DashboardSetting.vue'
+import DashboardMobile from './DashboardMobile.vue'
+
+// 基础类型组件
+import Chart from '@epxing/designer/src/visual/config/Chart'
+import Color from '@epxing/designer/src/visual/config/Color'
+import Event from '@epxing/designer/src/visual/config/Event'
+import Field from '@epxing/designer/src/visual/config/Field'
+import Font from '@epxing/designer/src/visual/config/Font'
+import Html from '@epxing/designer/src/visual/config/Html'
+import Image from '@epxing/designer/src/visual/config/Image'
+import Input from '@epxing/designer/src/visual/config/Input'
+import List from '@epxing/designer/src/visual/config/List'
+import ListField from '@epxing/designer/src/visual/config/ListField'
+import MField from '@epxing/designer/src/visual/config/MField'
+import Number from '@epxing/designer/src/visual/config/Number'
+import Object from '@epxing/designer/src/visual/config/Object'
+import Operate from '@epxing/designer/src/visual/config/Operate'
+import OrderField from '@epxing/designer/src/visual/config/OrderField'
+import Page from '@epxing/designer/src/visual/config/Page'
+import Params from '@epxing/designer/src/visual/config/Params'
+import Radio from '@epxing/designer/src/visual/config/Radio'
+import Row from '@epxing/designer/src/visual/config/Row'
+import Scope from '@epxing/designer/src/visual/config/Scope'
+import Select from '@epxing/designer/src/visual/config/Select'
+import Switch from '@epxing/designer/src/visual/config/Switch'
+import Textarea from '@epxing/designer/src/visual/config/Textarea'
+import Tree from '@epxing/designer/src/visual/config/Tree'
+
+VisualConfigPage.install = function install (Vue) {
+  Vue.component(VisualConfigPage.name, VisualConfigPage)
+  Vue.component(ComponentList.name, ComponentList)
+  Vue.component(ComponentLibrary.name, ComponentLibrary)
+  Vue.component(ComponentLibraryDialog.name, ComponentLibraryDialog)
+  Vue.component(JsPanel.name, JsPanel)
+  Vue.component(PagePreview.name, PagePreview)
+  Vue.component(ConfigPanel.name, ConfigPanel)
+  Vue.component(Dashboard.name, Dashboard)
+  Vue.component(DashboardDesign.name, DashboardDesign)
+  Vue.component(DashboardGlobalConfig.name, DashboardGlobalConfig)
+  Vue.component(DashboardSetting.name, DashboardSetting)
+  Vue.component(DashboardMobile.name, DashboardMobile)
+  Vue.component(Chart.name, Chart)
+  Vue.component(Color.name, Color)
+  Vue.component(Event.name, Event)
+  Vue.component(Field.name, Field)
+  Vue.component(Font.name, Font)
+  Vue.component(Html.name, Html)
+  Vue.component(Image.name, Image)
+  Vue.component(Input.name, Input)
+  Vue.component(List.name, List)
+  Vue.component(ListField.name, ListField)
+  Vue.component(MField.name, MField)
+  Vue.component(Number.name, Number)
+  Vue.component(Object.name, Object)
+  Vue.component(Operate.name, Operate)
+  Vue.component(OrderField.name, OrderField)
+  Vue.component(Page.name, Page)
+  Vue.component(Params.name, Params)
+  Vue.component(Radio.name, Radio)
+  Vue.component(Row.name, Row)
+  Vue.component(Scope.name, Scope)
+  Vue.component(Select.name, Select)
+  Vue.component(Switch.name, Switch)
+  Vue.component(Textarea.name, Textarea)
+  Vue.component(Tree.name, Tree)
+}
+
+export default VisualConfigPage
+
+export {
+  ComponentList,
+  ComponentLibrary,
+  ComponentLibraryDialog,
+  JsPanel,
+  PagePreview,
+  ConfigPanel,
+  Dashboard,
+  DashboardDesign,
+  DashboardGlobalConfig,
+  DashboardMobile
+}