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

package/src/visual/config-page/VisualConfigPage.vue

@@ -0,0 +1,746 @@
+<template>
+<div class="config-container">
+  <!-- 头部 -->
+  <div class="page-header">
+    <div class="page-header__left">
+      <i class="page-header__back el-icon-arrow-left" @click="back"></i>
+      <p class="page-title">
+        <span class="page-header__subtitle">{{$t('Editing the page')}}：</span>
+        <span class="page-header__title">{{currentPage.title}}</span>
+      </p>
+    </div>
+    <div class="page-header__operate">
+      <p class="header-operate__item" @click="this.pageSetting">{{$t('page setup')}}</p>
+      <!-- <el-button size="default">{{$t('preview')}}</el-button> -->
+      <el-button type="primary" size="default" @click="saveConfigs">{{$t('save')}}</el-button>
+    </div>
+  </div>
+  <div class="page-content">
+    <!-- 导航tabs -->
+    <ul class="page-tabs">
+      <li :class="{'page-tabs__item': true, 'active': showPanel==='selectComponent'}" @click="showPanel='selectComponent'">
+        <i class="epx-icon-dagang"></i>
+      </li>
+      <li :class="{'page-tabs__item': true, 'active': showPanel==='componentLibrary'}" @click="showPanel='componentLibrary'">
+        <i class="epx-icon-yingyong"></i>
+      </li>
+      <li :class="{'page-tabs__item': true, 'active': showPanel==='jsPanel'}" @click="showPanel='jsPanel'">
+        <i class="epx-icon-js"></i>
+      </li>
+    </ul>
+    <!-- 功能面板 -->
+    <div class="function-panel">
+      <epx-visual-config-component-list
+        v-if="showPanel==='selectComponent' && loadComponentList"
+        :all-component-list="this.componentList"
+        :component-list="this.selectComponentList"
+        :component="selectComponent"
+        @delete="deleteSelectComponent"
+        @copy="copyComponent"
+        @add="([component, upId]) => addComponent(component, upId)"
+        @change-configs="changeConfigs"
+        @click="clickComponent"
+        @close="showPanel=null"
+      />
+      <epx-visual-config-component-library
+        v-if="showPanel==='componentLibrary'"
+        :all-component-list="this.componentList"
+        :component-list="this.selectComponentList"
+        @close="showPanel=null"
+      />
+      <div class="js-panel" v-if="showPanel==='jsPanel'"  @click.stop>
+        <p class="js-panel-title">
+          <span>{{$t('Page JS')}}</span>
+          <i class="el-icon-close" @click="showPanel=null"></i>
+        </p>
+        <epx-js-panel :value="pageGlobalConfigs.JS" @change="v=>changeItemConfigs('page', { JS: v })"></epx-js-panel>
+      </div>
+    </div>
+    <!-- 页面预览 -->
+    <div class="page-preview">
+      <epx-visual-config-page-preview
+        :globalConfigs="pageGlobalConfigs"
+        :itemConfigs="allComponentConfigs"
+        :all-component-list="componentList"
+        :component-list="this.selectComponentList"
+        @update-component-list="v=>this.selectComponentList = v"
+        :selectComponent="selectComponent"
+        @click="clickComponent"
+        @delete="deleteSelectComponent"
+      />
+    </div>
+    <!-- 组件配置面板 -->
+    <div class="config-panel" v-if="selectComponent">
+      <!-- 获取组件对应的配置面板 -->
+      <epx-visual-config-panel
+        :component="selectComponent"
+        :metaId="currentMetaId"
+        :globalConfigs="pageGlobalConfigs"
+        :itemConfigs="allComponentConfigs"
+        :relationList="relationList"
+        :pageParams="pageParams"
+        :scopeConfigs="scopeConfigs"
+      ></epx-visual-config-panel>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+// 页面可视化配置
+import { mapState, mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-config-page',
+  navConfigs: {
+    flag: false
+  },
+  props: {
+    newWindow: Boolean
+  },
+  provide () {
+    const { id } = this.$query
+    return {
+      pageMetaId: this.currentMetaId,
+      pageId: id,
+      pageConfigs: this.page_config,
+      getPageMetaId: () => this.currentMetaId,
+      getAllComponentList: () => this.componentList,
+      getItemConfigs: () => this.allComponentConfigs,
+      getDefaultContainerItems: () => this.defaultContainerItems,
+      setContainerDefaultItems: this.setContainerDefaultItems,
+      changeItemConfigs: this.changeItemConfigs,
+      deleteItemConfigs: this.deleteItemConfigs
+    }
+  },
+  data () {
+    return {
+      componentList: [],
+      selectComponentList: [],
+      selectComponent: null,
+      showPanel: 'selectComponent',
+      pageGlobalConfigs: {},
+      allComponentConfigs: {},
+      pageMetaId: null,
+      relationList: [],
+      pageParams: [],
+      scopeConfigs: {},
+      loadComponentList: false
+    }
+  },
+  computed: {
+    ...mapState({
+      showMenu: state => state.config.showMenu,
+      showAppNav: state => state.config.showAppNav
+    }),
+    ...mapGetters([
+      'getPageById'
+    ]),
+    currentPage () {
+      const page = this.getPageById(this.$query.id)
+      return page || {}
+    },
+    currentMetaId () {
+      return this.$query.entityId || this.pageMetaId
+    },
+    currentMeta () {
+      return this.metas[this.currentMetaId] || null
+    },
+    page_config () {
+      const { config = '{}' } = this.$query
+      if (typeof config === 'string') {
+        try {
+          // eslint-disable-next-line no-eval
+          return eval('(' + config + ')')
+        } catch (error) {
+          return {}
+        }
+      }
+      return config
+    }
+  },
+  methods: {
+    back () {
+      if (this.newWindow) {
+        window.close()
+      } else if (this.$query.isObjectDetail) {
+        this.backPage()
+      } else {
+        this.backPage({ reload: true })
+      }
+    },
+    getPageInfo () {
+      this.getPageId()
+        .then(page => {
+          const { metaId } = page
+          if (metaId) this.pageMetaId = metaId
+          this.getMetaId()
+            .then(() => {
+              this.getDefaultConfig()
+              this.loadConfig = true
+            })
+        })
+    },
+    getPageId () {
+      // 获取当前page
+      if (!this.$query.id || !this.$_.isEmpty(this.currentPage)) {
+        return Promise.resolve(this.currentPage)
+      }
+      return this.$store.dispatch({
+        type: 'ADD_PAGE',
+        pageId: this.$query.id
+      })
+    },
+    getMetaId () {
+      if (!this.currentMetaId || this.currentMeta) {
+        return Promise.resolve(this.currentMeta)
+      } else {
+        return this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: this.currentMetaId
+        })
+      }
+    },
+    getDefaultConfig () {
+      // 获取默认组件
+      const { config: pageConfigs = {} } = this.currentPage || {}
+      const { itemConfigs = {}, items = [], ...globalConfigs } = pageConfigs
+      // 深度拷贝 防止修改pageConfigs参数
+      this.allComponentConfigs = this.$_.cloneDeep(itemConfigs) // 组件配置
+      this.selectComponentList = this.$_.cloneDeep(items) // 已选组件
+      this.pageGlobalConfigs = this.$_.cloneDeep(globalConfigs) // 页面全局配置
+      this.pageSetting()
+      this.getScopeConfigs()
+      this.getEntityRelation()
+    },
+    getEntityRelation () {
+      this.$http.$get({
+        entityId: 'FM_ENTITY_RELATION',
+        action: 'getEntityRelationTree',
+        mainEntity: this.currentMetaId
+      })
+        .then(data => {
+          data.forEach(relation => {
+            relation.label = relation.title
+            relation.value = relation.flag
+            relation.children = relation.childrens
+            if (relation.childrens) {
+              relation.childrens.forEach(childRelation => {
+                childRelation.value = relation.flag + '#' + childRelation.flag
+                childRelation.label = childRelation.title
+              })
+            }
+          })
+          this.relationList = data
+        })
+    },
+    /**
+     * 获取查询配置
+     */
+    getScopeConfigs () {
+      this.$http.list({
+        action: 'getAllSearchConfig',
+        entityId: 'FM_SEARCH_CONFIG'
+      })
+        .then(data => {
+          this.scopeConfigs = data
+        })
+    },
+    getComponetName (component) {
+      if (component && component.PATH) {
+        let project = 'frame'
+        let pathName = ''
+        const pagePath = component.PATH
+        const rootMatch = pagePath.match(/^@\/\w+\//)
+        if (rootMatch) {
+          project = rootMatch[0].replace(/[@|/]/g, '')
+          pathName = pagePath.split(rootMatch)[1].replace('.vue', '')
+        }
+        // 根据路径定义组件名 SubList  转为 sub-list  layout/SubList 转为 layout-sub-list
+        const componentPath = pathName.replace('views/', '').replace('components/', '').replace('packages/', '').replace(/\//g, '-').replace(/(\w)([A-Z])/g, '$1-$2').toLowerCase()
+        const componentName = (project === 'frame' ? '' : (project + '-')) + componentPath
+
+        return componentName
+      }
+      return null
+    },
+    getVisualComponent (component) {
+      if (component && component.VISUAL_CONFIG_PATH) {
+        let pathName = ''
+        const pagePath = component.VISUAL_CONFIG_PATH
+        const rootMatch = pagePath.match(/^@\/(frame\/|product\/|project\/)?/)
+        if (rootMatch) {
+          pathName = pagePath.split(rootMatch[0])[1].replace('.vue', '')
+        }
+        // 根据路径定义组件名 SubList  转为 sub-list  layout/SubList 转为 layout-sub-list
+        const componentPath = pathName.replace('views/', '').replace('components/', '').replace('packages/', '').replace(/\//g, '-').replace(/(\w)([A-Z])/g, '$1-$2').toLowerCase()
+        const componentName = componentPath
+        return componentName
+      }
+      return null
+    },
+    getComponentList () {
+      this.$http.list({
+        entityId: 'FM_PAGE',
+        'scope.TYPE': '01',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc',
+        scopeParams: JSON.stringify([{ lb: '(', field: 'LEVEL', values: '01', link: 'or' }, { field: 'SYSTEM', values: this.SYSTEM || this.appConfig['SYSTEM|ID'], rb: ')' }])
+      })
+        .then(data => {
+          this.loadComponentList = true
+          const componentList = data.entitys
+          componentList.forEach(item => {
+            item.componentName = item.CODE
+            if (item.COMPONENT_TYPE === 'page') {
+              const componentName = this.getComponetName(item)
+              item.componentName = componentName
+            }
+            const visualComponentName = this.getVisualComponent(item)
+            item.visualComponentName = visualComponentName
+          })
+          this.componentList = [...componentList]
+        })
+        .catch(err => {
+          this.loadComponentList = true
+          this.$message.error(err.message)
+        })
+    },
+    changeItemConfigs (key, configs = {}, type) {
+      if (key === 'page') {
+        this.pageGlobalConfigs = { ...this.pageGlobalConfigs, ...configs }
+      } else {
+        const itemConfig = this.allComponentConfigs[key] || {}
+        let componentConfigs = {}
+        const componentAttris = ['flex', 'layout', 'direction', 'justify', 'align', 'style', 'componentName', 'span', 'xsspan', 'items', 'countScopeParams']
+        let componentAttriMap = {}
+        for (const key in configs) {
+          const isAttri = componentAttris.find(item => item === key || item + '.i18n' === key)
+          if (isAttri || type === 'component') {
+            componentAttriMap = { ...componentAttriMap, [key.replace(/^componentName(.i18n)?$/, 'title$1')]: configs[key] }
+          } else {
+            componentConfigs = { ...componentConfigs, [key]: configs[key] }
+          }
+        }
+        // 设置组件配置
+        this.allComponentConfigs[key] = { ...itemConfig, ...componentConfigs }
+        // 设置组件属性
+        const selectComponentList = [...this.selectComponentList]
+        const ids = key.split('-')
+        ids.reduce((componentList, id, index) => {
+          const component = componentList.find(item => item.id === id) || {}
+          if (index === ids.length - 1) {
+            for (const attri in componentAttriMap) {
+              if (componentAttriMap[attri] !== undefined) {
+                component[attri] = componentAttriMap[attri]
+                if (component[attri] === null) delete component[attri]
+              }
+            }
+            if (this.selectComponent && key === this.selectComponent.id) {
+              this.selectComponent = { ...this.selectComponent, component }
+            }
+            return null
+          }
+          if (!component.items) component.items = []
+          return component.items
+        }, selectComponentList)
+        this.selectComponentList = this.$_.cloneDeep(selectComponentList)
+      }
+    },
+    deleteItemConfigs (key) {
+      delete this.allComponentConfigs[key]
+    },
+    copyComponent (component, upId) {
+      const newCompId = this.$util.genId()
+      const newComp = { ...component, id: newCompId }
+      if (newComp.items) delete newComp.items
+      // 如果存在子节点-重新添加子节点数据
+      const configs = this.allComponentConfigs[upId !== 'root' ? (upId + '-' + component.id) : component.id]
+      if (upId === 'root') {
+        const index = this.selectComponentList.findIndex(item => item.id === component.id)
+        if (index !== -1) {
+          this.selectComponentList.splice(index + 1, 0, newComp)
+          this.changeItemConfigs(newComp.id, { ...configs })
+        }
+      } else {
+        // 查找其父组件
+        const selectComponentList = [...this.selectComponentList]
+        const ids = upId.split('-')
+        const componentList = ids.reduce((componentList, id) => {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          if (!componentItem.items) componentItem.items = []
+          return componentItem.items
+        }, selectComponentList)
+        const index = componentList.findIndex(item => item.id === component.id)
+        if (index !== -1) {
+          componentList.splice(index + 1, 0, newComp)
+          this.selectComponentList = selectComponentList
+          this.changeItemConfigs(upId + '-' + newComp.id, { ...configs })
+        }
+      }
+      const copyChildren = (children, oldUpId, newUpId, upComponent) => {
+        for (const child of children) {
+          // 获取子节点的配置
+          const newCompId = this.$util.genId()
+          const newComp = { ...child, id: newCompId }
+          if (newComp.items) delete newComp.items
+          const configs = this.allComponentConfigs[oldUpId + '-' + child.id] || {}
+          this.changeItemConfigs(newUpId + '-' + newComp.id, { ...configs })
+          if (!upComponent.items) upComponent.items = []
+          upComponent.items.push(newComp)
+          if (child.items) copyChildren(child.items, oldUpId + '-' + child.id, newUpId + '-' + newComp.id, newComp)
+        }
+      }
+      if (component.items) {
+        const oldUpId = upId !== 'root' ? (upId + '-' + component.id) : component.id
+        const newUpId = upId !== 'root' ? (upId + '-' + newComp.id) : newComp.id
+        copyChildren(component.items, oldUpId, newUpId, newComp)
+      }
+      this.$forceUpdate()
+    },
+    addComponent (component, upId, configs) {
+      const title = component.TITLE
+      const newComp = {
+        id: component.id,
+        title,
+        contentType: component.componentName || component.CODE
+      }
+      if (component.CODE === 'chart') {
+        newComp.title = '未命名统计报表'
+        newComp.type = 'table'
+      }
+
+      if (upId === 'root') {
+        // 增加upId配置
+        this.selectComponentList.push(newComp)
+        if (component.CODE === 'chart') this.changeItemConfigs(newComp.id, { metaId: this.pageMetaId })
+      } else {
+        // 查找其父组件
+        const selectComponentList = [...this.selectComponentList]
+        const ids = upId.split('-')
+        const componentList = ids.reduce((componentList, id) => {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          if (!componentItem.items) componentItem.items = []
+          return componentItem.items
+        }, selectComponentList)
+        componentList.push(newComp)
+        this.selectComponentList = selectComponentList
+        if (component.CODE === 'chart') this.changeItemConfigs(upId + '-' + newComp.id, { metaId: this.pageMetaId })
+        this.$forceUpdate()
+      }
+    },
+    deleteSelectComponent (id, e) {
+      e && e.stopPropagation()
+      const selectComponentList = [...this.selectComponentList]
+      const ids = id.split('-')
+      ids.reduce((componentList, id, index) => {
+        if (index === ids.length - 1) {
+          const componentIndex = componentList.findIndex(item => item.id === id) || {}
+          const deletecomponent = componentList[componentIndex]
+          if (deletecomponent) {
+            // 删除配置
+            const deleteConfigs = (arr, upId) => {
+              arr.forEach(item => {
+                const itemId = upId ? upId + '-' + item.id : item.id
+                this.deleteItemConfigs(itemId)
+                if (item.items) {
+                  deleteConfigs(item.items, itemId)
+                }
+              })
+            }
+            const newIds = [...ids]
+            newIds.pop()
+            const componentId = newIds.join('-')
+            deleteConfigs([deletecomponent], componentId)
+          }
+          componentList.splice(componentIndex, 1)
+        } else {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          return componentItem.items
+        }
+      }, selectComponentList)
+      this.selectComponentList = selectComponentList
+      this.$forceUpdate()
+    },
+    changeConfigs (id, newConfigs) {
+      const configs = this.componentConfigs[id] || {}
+      this.componentConfigs[id] = { ...configs, ...newConfigs }
+    },
+    pageSetting () {
+      const { visualConfigPath } = this.currentPage
+      const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath })
+      this.selectComponent = { type: 'page', id: 'page', ...this.currentPage, visualComponentName: name, config: this.pageGlobalConfigs }
+    },
+    clickComponent (componentId, componentInfo, component, upId) {
+      console.log(componentId, componentInfo, component, upId)
+      this.selectComponent = { id: componentId, ...componentInfo, config: component, upId }
+    },
+    scrollToConfig (componentId) {
+      // const component = this.$refs.visualComponent
+      // if (!component) return
+      // const configComponent = component.$refs[`config-${componentId}`]
+      // if (configComponent) {
+      //   const el = configComponent.$el || configComponent
+      //   const configContainer = this.$refs.configContainer
+      //   configContainer.scrollTop = el.offsetTop - 20
+      // }
+    },
+    setComponentConfig (componentList, itemConfigs = {}, upId) {
+      componentList.forEach(component => {
+        const componentId = upId ? upId + '-' + component.id : component.id
+        const configComponentOuter = this.$refs[`config-${component.id}`]
+        if (configComponentOuter) {
+          const configComponent = configComponentOuter.$refs.component
+          if (configComponent) {
+            const configs = configComponent.getConfigs() || {}
+            const { span, flex, componentName } = configs
+            if (span) component.span = span
+            delete component.configs
+            if (componentName) {
+              component.title = componentName
+              delete configs.componentName
+            }
+            if (flex) {
+              component.flex = flex
+              delete configs.flex
+            }
+            const defaulConfigs = itemConfigs[componentId] || {}
+            itemConfigs[componentId] = { ...defaulConfigs, ...configs }
+          }
+        }
+        const { items = [] } = component
+        if (items.length > 0) {
+          this.setComponentConfig(items, itemConfigs, componentId)
+        }
+      })
+    },
+    setContainerDefaultItems (id, items) {
+      if (id === 'page') {
+        const { config: pageConfigs = {} } = this.currentPage || {}
+        if (!pageConfigs.items) this.selectComponentList = items
+      } else {
+        const selectComponentList = [...this.selectComponentList]
+        const ids = id.split('-')
+        ids.reduce((componentList, id, index) => {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          if (!componentItem.items) {
+            if (index === ids.length - 1) componentItem.items = items
+            else componentItem.items = []
+          }
+          return componentItem.items
+        }, selectComponentList)
+
+        this.selectComponentList = selectComponentList
+      }
+    },
+    saveConfigs (event, next, errorFn) {
+      const selectComponentList = [...this.selectComponentList]
+      const itemConfigs = { ...this.allComponentConfigs }
+      this.setComponentConfig(selectComponentList, itemConfigs, '')
+      for (const key in itemConfigs) {
+        const itemConfig = itemConfigs[key]
+        for (const itemKey in itemConfig) {
+          if (itemConfig[itemKey] === null || itemConfig[itemKey] === undefined) {
+            delete itemConfig[itemKey]
+          }
+        }
+        if (this.$_.isEmpty(itemConfig)) {
+          delete itemConfigs[key]
+        }
+      }
+      // 获取所有的配置
+      this.selectComponentList = [...selectComponentList]
+      // 保存当前配置
+      const config = { ...this.pageGlobalConfigs }
+      // 更改组件名称和flex布局
+      config.items = selectComponentList
+      config.itemConfigs = itemConfigs
+      import(/* webpackChunkName: "standalone" */'@babel/standalone')
+        .then(babel => {
+          // 获取页面全局配置
+          const es5 = babel.transform(config.JS, { presets: ['env'] })
+          config.compileJS = es5.code
+          for (const key in config) {
+            if (config[key] === null) {
+              delete config[key]
+            }
+          }
+          this.savePageConfigs(config, next, errorFn)
+        })
+    },
+    savePageConfigs (config) {
+      // 获取全局参数
+      let formParams = {}
+      const globalConfig = this.$refs.globalConfig
+      if (globalConfig) {
+        const formComp = this.getComponentById('form', globalConfig)
+        if (formComp) {
+          formParams = formComp.getFormData()
+          if (!formParams) return
+        }
+      }
+      this.$http.update({
+        entityId: this.$metaId,
+        ...formParams,
+        [`bean.${this.$metaKey}`]: this.$query.id,
+        'bean.CONTENT': JSON.stringify(config, null, '\t')
+      })
+        .then(data => {
+          this.$message.success(this.$t('save successfully'))
+          if (this.newWindow) {
+            // window.opener.postMessage({ pageId: this.$query.id, type: 'configPage' }, '/')
+          } else {
+            this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+            // 重新获取页面
+            this.$store.dispatch('ADD_PAGE', { pageId: this.$query.id })
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    }
+  },
+  created () {
+    if (this.showMenu) {
+      this.changeMenuFlag = true
+      this.$store.commit('SWITCH_MENU_SHOW', false)
+    }
+    if (this.showAppNav) {
+      this.changeAppNavFlag = true
+      this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    }
+    this.getPageInfo()
+    this.getDefaultConfig()
+    this.getComponentList()
+    // 加载可视化组件
+    import('@epxing/designer/src/visual/index.js')
+      .then(() => {
+        // 重新渲染页面
+        this.selectComponent = { ...this.selectComponent }
+        this.$forceUpdate()
+      })
+  },
+  beforeUnmount () {
+    if (this.changeMenuFlag) {
+      this.$store.commit('SWITCH_MENU_SHOW', true)
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.config-container {
+  position: relative;
+  left: -10px;
+  top: -10px;
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  background: var(--epx-bg-card);
+  padding: 0 20px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.page-header__left {
+  display: flex;
+}
+
+.page-header__back {
+  font-size: 24px;
+  color: #666;
+  margin-right: 16px;
+  cursor: pointer;
+}
+
+.page-header__title {
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+}
+.page-header__subtitle {
+  font-size: var(--epx-font-size-base);
+  color: #666;
+}
+.page-header__operate {
+  display: flex;
+  align-items: center;
+}
+.header-operate__item {
+  color: #666;
+  cursor: pointer;
+  margin: 20px;
+  &:hover {
+    @include font_color_primary
+  }
+}
+.page-content {
+  flex:1;
+  display: flex;
+  overflow: hidden;
+}
+.page-tabs {
+  width: 50px;
+  height: 100%;
+  background: var(--epx-bg-card);
+  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.1);
+  padding:  20px 0;
+  flex-shrink: 0;
+}
+.page-tabs__item {
+  width: 100%;
+  height: 40px;
+  margin-bottom: 10px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 24px;
+  cursor: pointer;
+  &:hover, &.active {
+    @include bg_color_primary(.2);
+    @include font_color_primary
+  }
+}
+.page-preview {
+  flex: 1;
+  overflow: hidden;
+}
+.config-panel {
+  width: 360px;
+  flex-shrink: 0;
+}
+.function-panel {
+  position: relative;
+  flex-shrink: 0;
+}
+.js-panel {
+  position: absolute;
+  top: 0;
+  width: 600px;
+  height: 100%;
+  z-index: 10;
+}
+.js-panel-title {
+  background: var(--epx-bg-card);
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  color: #666;
+  i {
+    cursor: pointer;
+    color: #999;
+    font-size: 18px;
+  }
+}
+</style>