automan-cmd 2.1.5

package/tpl/preview/components/Attribute.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="widget attribute">
+    <div>
+      <el-collapse v-model="activeNames">
+        <el-collapse-item
+          title="属性设置"
+          name="attr"
+        >
+          <div
+            v-if="componentProps"
+            size="mini"
+            label-position="left"
+            label-width="80px"
+            :model="componentProps"
+          >
+            <template v-for="(item) in propsInfo">
+              <div
+                v-if="(!item.work || item.work()) && !item.meta.ignore"
+                :key="item.key"
+                class="form-item"
+              >
+                <div>
+                  <span class="label">
+                    <el-tooltip placement="top">
+                      <div
+                        slot="content"
+                        style="max-width:300px"
+                      >{{ item.desc || '无' }}</div>
+                      <span>{{ item.label || item.key }}</span>
+                    </el-tooltip>
+                  </span>
+                  <span
+                    v-if="item"
+                    class="value"
+                  >
+                    <!-- 文本相关 -->
+                    <el-input
+                      v-if="item.type == 'string'"
+                      v-model="componentProps[item.key]"
+                      size="mini"
+                    />
+                    <el-input
+                      v-else-if="item.type == 'number'"
+                      v-model.number="componentProps[item.key]"
+                      type="number"
+                      size="mini"
+                    />
+                    <el-input
+                      v-else-if="item.type == 'input'"
+                      v-model="componentProps[item.key]"
+                      size="mini"
+                    />
+                    <el-input
+                      v-else-if="item.type == 'text'"
+                      v-model="componentProps[item.key]"
+                      :autosize="{ minRows: 2, maxRows: 5 }"
+                      type="textarea"
+                      size="mini"
+                    />
+                    <rich-text
+                      v-else-if="item.type == 'richtext'"
+                      :id="id"
+                      v-model="componentProps[item.key]"
+                    />
+                    <y-color-picker
+                      v-else-if="item.type == 'color'"
+                      v-model="componentProps[item.key]"
+                      show-alpha
+                    />
+                    <!-- json -->
+                    <attr-data
+                      v-else-if="isCollapsed('attr') && item.type == 'object'"
+                      type="object"
+                      :content.sync="componentProps[item.key]"
+                    />
+                    <attr-data
+                      v-else-if="isCollapsed('attr') && item.type == 'array'"
+                      type="array"
+                      :content.sync="componentProps[item.key]"
+                    />
+                    <attr-data
+                      v-else-if="isCollapsed('attr') && item.type == 'data'"
+                      :content.sync="componentProps[item.key]"
+                    />
+                    <!-- 布尔值 -->
+                    <el-switch
+                      v-else-if="item.type == 'boolean'"
+                      v-model="componentProps[item.key]"
+                      size="mini"
+                    />
+                    <!-- 图片 -->
+                    <template v-else-if="item.type == 'image'">
+                      <resource
+                        type="image"
+                        :url.sync="componentProps[item.key]"
+                      />
+                    </template>
+                    <resource
+                      v-else-if="item.type == 'audio'"
+                      type="audio"
+                      :url.sync="componentProps[item.key]"
+                    />
+                    <resource
+                      v-else-if="item.type == 'video'"
+                      type="video"
+                      :url.sync="componentProps[item.key]"
+                    />
+                    <resource
+                      v-else-if="item.type == 'file'"
+                      type="file"
+                      :url.sync="componentProps[item.key]"
+                    />
+                    <!-- 方法调用 -->
+                    <attr-function
+                      v-else-if="item.type == 'function'"
+                      :content.sync="componentProps[item.key]"
+                    />
+
+                    <!-- 时间选择器 -->
+                    <el-date-picker
+                      v-else-if="item.type == 'date'"
+                      v-model="componentProps[item.key]"
+                      value-format="yyyy/MM/dd HH:mm:ss"
+                      type="datetime"
+                      placeholder="选择日期时间"
+                    />
+
+                    <!-- 枚举 -->
+                    <el-select
+                      v-else-if="item.type == 'enum'"
+                      v-model="componentProps[item.key]"
+                      :multiple="item.meta && item.meta.multiple"
+                      size="mini"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="(itemChild,key) in enumFilter(item.meta.defaultList)"
+                        :key="key"
+                        :label="itemChild.label"
+                        :value="itemChild.value"
+                      />
+                    </el-select>
+
+                    <template v-else-if="item.type == 'checkbox'">
+                      <!-- checkbox-group -->
+                      <el-checkbox-group
+                        v-if="item.meta.defaultList"
+                        v-model="componentProps[item.key]"
+                      >
+                        <el-checkbox
+                          v-for="(itemChild, key) in enumFilter(item.meta.defaultList)"
+                          :key="key"
+                          :label="itemChild.value"
+                        >{{ itemChild.label }}</el-checkbox>
+                      </el-checkbox-group>
+                      <!-- checkbox -->
+                      <el-checkbox
+                        v-else
+                        v-model="componentProps[item.key]"
+                      />
+                    </template>
+
+                    <!-- radio -->
+                    <el-radio-group
+                      v-else-if="item.type == 'radio'"
+                      v-model="componentProps[item.key]"
+                    >
+                      <el-radio
+                        v-for="(itemChild, key) in enumFilter(item.meta.defaultList)"
+                        :key="key"
+                        :label="itemChild.value"
+                      >{{ itemChild.label }}</el-radio>
+                    </el-radio-group>
+                  </span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
+  .widget.attribute {
+    position: relative;
+    padding: 5px !important;
+
+    .el-input-group__append {
+      padding: 0 10px;
+      cursor: pointer;
+    }
+
+    .update {
+      padding: 20px 10px;
+      text-align: center;
+
+      .desc {
+        text-align: left;
+        margin: 10px 5px;
+      }
+    }
+
+    .id-lock {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .alerttip {
+      margin-bottom: 5px;
+    }
+
+    .noselect {
+      font-size: 20px;
+      color: #aaa;
+      font-weight: bolder;
+      text-align: center;
+    }
+
+    .form-item {
+      margin-bottom: 5px;
+      padding: 5px;
+
+      &:hover {
+        background-color: #6081bd33;
+        border-radius: 5px;
+
+        .label {
+          color: #ffffff;
+        }
+      }
+
+      .label {
+        font-weight: bold;
+        display: inline-block;
+        margin-bottom: 4px;
+        font-size: 12px;
+        min-width: 70px;
+      }
+
+      .value {
+        color: #909399;
+      }
+    }
+  }
+</style>
+
+<script type="text/ecmascript-6">
+/**
+   * 组件属性编辑器，每个组件的各个设置都是通过这里分发处理
+   */
+
+export default {
+  name: 'Attribute',
+  components: {},
+  mixins: [],
+  props: {
+    componentProps: {
+      type: Object
+    },
+    active: {
+      type: [Number, Boolean],
+      default: 0
+    }
+  },
+  data: function() {
+    return {
+      currEditor: '',
+      currEditorData: {},
+      showUpdate: false,
+      id: '',
+      canEditId: false,
+      propsInfo: {},
+      activeNames: ['base', 'animate', 'attr'],
+      newNodeInfo: null,
+      oldStyle: null,
+      forbidEdit: false
+    }
+  },
+  watch: {
+  },
+  mounted: function() {
+    this.onSelectOne()
+  },
+  methods: {
+    onSelectOne: function() {
+      this.dealPropsType()
+    },
+    isCollapsed(attr) {
+      const activeNames = this.activeNames
+      return activeNames && (activeNames.length && activeNames.indexOf(attr) > -1 || activeNames == attr)
+    },
+    enumFilter(list) {
+      if (!list) { return [] }
+      if (list instanceof Array) {
+        return list.map(li => {
+          return {
+            label: li,
+            value: li
+          }
+        })
+      }
+      if (typeof list === 'object') {
+        return Object.entries(list).map(([key, value]) => {
+          return {
+            label: value,
+            value: key
+          }
+        })
+      }
+      return list
+    },
+    dealPropsType: function() {
+      const fnTypeRE = /^(?:function|class) (\w+)/
+      const instance = window.componentVm
+      this.propsInfo = []
+      function getPropType(prop) {
+        // 编辑器属性上存在类型信息。以编辑器为准
+        const propEditor = prop.editor || prop.editer
+        if (propEditor && propEditor.type) {
+          return propEditor.type.toLocaleLowerCase()
+        }
+        const type = prop.type
+        if (typeof type == 'string') {
+          return type
+        }
+        const match = type.toString().match(fnTypeRE)
+        const ttype = typeof type === 'function'
+          ? match && match[1] || 'any'
+          : 'any'
+        return ttype.toLocaleLowerCase()
+      }
+      if (instance && instance.$options) {
+        const props = instance.$options.props
+        const propsData = []
+        for (const key in props) {
+          const prop = props[key]
+          const propEditor = prop.editor || prop.editer
+          const propData = {
+            key,
+            value: instance[key],
+            type: getPropType(prop),
+            work: (propEditor && propEditor.work || (() => true)).bind(instance), // 新增属性有效性（是否应出现）的检测 绑定this至当前组件实例
+            meta: propEditor || {},
+            order: prop.order || 10000,
+            required: !!prop.required
+          }
+          // 编辑属性存在则处理些特殊属性
+          if (propEditor) {
+            propData.label = propEditor.label
+            propData.desc = propEditor.desc
+          }
+          propsData.push(propData)
+        }
+        this.propsInfo = propsData || []
+        this.propsInfo = this.propsInfo.sort(function(a, b) {
+          return a.order - b.order
+        })
+        console.log('propsData', propsData)
+      }
+    }
+  }
+}
+</script>

package/tpl/preview/components/FitImg.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="component fit-img" ref="box">
+    124545
+    <img @load="onload" :src="src">
+    <spinner color="#fff" type="fading-circle" v-show="pending" :size="40" class="spinner" />
+  </div>
+</template>
+<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
+  .component.fit-img {
+    display: -webkit-box;
+    -webkit-box-align: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-pack: center;
+    overflow: hidden;
+    position: relative;
+
+    & > img {
+      visibility: hidden;
+    }
+
+    .spinner {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+</style>
+
+<script type="text/ecmascript-6">
+import Spinner from 'mint-ui/spinner'
+import 'mint-ui/spinner/style.css'
+
+export default {
+  name: 'FitImg',
+  components: { Spinner },
+  mixins: [],
+  props: {
+    src: {
+      required: true
+    }
+  },
+  data() {
+    return {
+      pending: true,
+      boxHeight: 1,
+      boxWidth: 1
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.boxHeight = this.$refs.box.clientHeight
+      this.boxWidth = this.$refs.box.clientWidth
+    })
+  },
+  methods: {
+    onload(e) {
+      const $img = e.currentTarget
+      this.pending = false
+
+      if (!$img) { return }
+      const height = $img.clientHeight
+      const width = $img.clientWidth
+
+      if (height / width > this.boxHeight / this.boxWidth) {
+        $img.style.height = '100%'
+        $img.style.width = 'auto'
+      } else {
+        $img.style.height = 'auto'
+        $img.style.width = '100%'
+      }
+      $img.style.visibility = 'visible'
+    }
+  }
+}
+</script>
+<template>
+  <div class="component fit-img" ref="box">
+    124545
+    <img @load="onload" :src="src">
+    <spinner color="#fff" type="fading-circle" v-show="pending" :size="40" class="spinner" />
+  </div>
+</template>
+<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
+  .component.fit-img {
+    display: -webkit-box;
+    -webkit-box-align: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-pack: center;
+    overflow: hidden;
+    position: relative;
+
+    & > img {
+      visibility: hidden;
+    }
+
+    .spinner {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+</style>
+
+<script type="text/ecmascript-6">
+import Spinner from 'mint-ui/spinner'
+import 'mint-ui/spinner/style.css'
+
+export default {
+  name: 'FitImg',
+  components: { Spinner },
+  mixins: [],
+  props: {
+    src: {
+      required: true
+    }
+  },
+  data() {
+    return {
+      pending: true,
+      boxHeight: 1,
+      boxWidth: 1
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.boxHeight = this.$refs.box.clientHeight
+      this.boxWidth = this.$refs.box.clientWidth
+    })
+  },
+  methods: {
+    onload(e) {
+      const $img = e.currentTarget
+      this.pending = false
+
+      if (!$img) { return }
+      const height = $img.clientHeight
+      const width = $img.clientWidth
+
+      if (height / width > this.boxHeight / this.boxWidth) {
+        $img.style.height = '100%'
+        $img.style.width = 'auto'
+      } else {
+        $img.style.height = 'auto'
+        $img.style.width = '100%'
+      }
+      $img.style.visibility = 'visible'
+    }
+  }
+}
+</script>

package/tpl/preview/components/ImgViewer.vue

@@ -0,0 +1,80 @@
+<template>
+  <popup v-model="visible" class="component img-viwer">
+    <div :style="style">
+      <swipe :continuous="false" :speed="200" :prevent="false" :auto="0" :default-index="defaultIndex" @change="handleChange" class="swpier">
+        <swipe-item v-for="(img, index) in imgs" :key="index">
+          <fit-img class="fit-img" :src="img" />
+        </swipe-item>
+      </swipe>
+    </div>
+  </popup>
+</template>
+<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
+  .component.img-viwer {
+    background-color: rgba(0, 0, 0, 0.9);
+
+    .swpier {
+      height: 100%;
+      width: 100%;
+    }
+
+    .fit-img {
+      height: 100%;
+      width: 100%;
+    }
+
+    .mint-swipe-indicator {
+      background-color: #333;
+
+      &.is-active {
+        background-color: #fff;
+      }
+    }
+  }
+</style>
+
+<script type="text/ecmascript-6">
+import FitImg from './FitImg'
+import SwipeItem from 'mint-ui/swipe-item/'
+import 'mint-ui/swipe-item/style.css'
+import Swipe from 'mint-ui/swipe'
+import 'mint-ui/swipe/style.css'
+import Popup from 'mint-ui/popup'
+import 'mint-ui/popup/style.css'
+
+export default {
+  name: 'ImgViewer',
+  components: { Popup, Swipe, SwipeItem, FitImg },
+  mixins: [],
+  data() {
+    return {
+      visible: false,
+      imgs: [],
+      style: {},
+      defaultIndex: 0
+    }
+  },
+  beforeMount() {
+    this.style = {
+      height: document.documentElement.clientHeight + 'px',
+      width: document.documentElement.clientWidth + 'px'
+    }
+  },
+  methods: {
+    handleChange(index) {
+      this.$emit('change', index)
+    },
+    open(imgs, index = 0) {
+      if (this.visible) { return }
+      this.imgs = imgs || []
+      this.defaultIndex = index
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+      this.imgs = []
+      this.defaultIndex = 0
+    }
+  }
+}
+</script>

package/tpl/preview/components/Loading.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="component loading">
+    <mt-popup v-model="show" popup-transition="popup-fade" class="loading-popup" ref="loadEntity">
+      <mt-spinner color="#fff" type="fading-circle" :size="40" />
+    </mt-popup>
+  </div>
+</template>
+<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
+  .component.loading {
+    .loading-popup {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate3D(-50%, -50%, 0);
+    }
+
+    .mint-popup {
+      background: transparent;
+    }
+  }
+</style>
+
+<script type="text/ecmascript-6">
+import Spinner from 'mint-ui/spinner'
+import 'mint-ui/spinner/style.css'
+import Popup from 'mint-ui/popup'
+import 'mint-ui/popup/style.css'
+
+export default {
+  name: 'Loading',
+  components: { MtSpinner: Spinner, MtPopup: Popup },
+  mixins: [],
+  data: function() {
+    return {
+      show: false
+    }
+  },
+  created: function() {
+  },
+  methods: {
+    open() {
+      this.show = true
+      const $loadEntity = this.$refs.loadEntity.$el
+      if (!$loadEntity) { return }
+      $loadEntity.style.display = 'block'
+    },
+    hide() {
+      this.show = false
+      const $loadEntity = this.$refs.loadEntity.$el
+      if (!$loadEntity) { return }
+      $loadEntity.style.display = 'none'
+    }
+  }
+}
+</script>