update：更新

src/app-register.ts

@@ -128,7 +128,9 @@ import AppLoginNoteVerify from './components/layout-element/login/app-login-note
 import AppRawItemImage from './components/layout-element/media/app-rawitem-image/app-rawitem-image.vue';
 import AppRawItemCarousel from './components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue';
 import AppRawItemVideo from './components/layout-element/media/app-rawitem-video/app-rawitem-video.vue';
-
+import AppPresetQrCode from './components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue';
+import AppPresetSwitch from './components/layout-element/interactive/app-preset-switch/app-preset-switch.vue';
+import AppPresetTextInput from './components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -271,5 +273,8 @@ export const AppComponents = {
         v.component('app-rawitem-image', AppRawItemImage);
         v.component('app-rawitem-carousel', AppRawItemCarousel);
         v.component('app-rawitem-video', AppRawItemVideo);
+        v.component('app-preset-qr-code',AppPresetQrCode);
+        v.component('app-preset-switch',AppPresetSwitch);
+        v.component('app-preset-text-input',AppPresetTextInput);
     },
 };
\ No newline at end of file

src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.less

+.app-preset-qr-code {
+    width: 100%;
+    height: 100%;
+
+    .ibiz-qr-code {
+        width: 100%;
+        height: 100%;
+    }
+}
\ No newline at end of file

src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue

+<template>
+    <div :class="className">
+        <template v-if="QRCodeConfig.url">
+            <ibiz-qr-code
+                :size="QRCodeConfig.size"
+                :url="QRCodeConfig.url"
+                :bgSrc="QRCodeConfig.bgSrc"
+                :margin="QRCodeConfig.margin"
+                :backgroundColor="QRCodeConfig.backgroundColor"
+                :logoSrc="QRCodeConfig.logoSrc"
+                :logoMargin="QRCodeConfig.logoMargin"
+                :logoBgColor="QRCodeConfig.logoBgColor"
+                :logoRadius="QRCodeConfig.logoRadius"
+                :whiteMargin="QRCodeConfig.whiteMargin"
+                class="ibiz-qr-code"
+                :callback="callback">
+            </ibiz-qr-code>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppPresetQrCode extends Vue {
+    /**
+     * 内容  value数据格式：对象类型的JSON字符串，参数类型与QRCodeConfig一致："{ "url": "http://www.baidu.com" }"
+     *
+     * @type {string}
+     * @memberof AppPresetQrCode
+     */
+    @Prop() public value?: any;
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppPresetQrCode
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 类名
+     *
+     * @memberof AppPresetQrCode
+     */
+    get className(): string {
+        return `app-preset-qr-code ${this.name}`;
+    }
+
+    /**
+     * ibiz-qr-code组件可传参数
+     * @param {number} size  二维码大小，包含边框
+     * @param {string} url  二维码内容
+     * @param {string} bgSrc  背景图片  
+     * @param {number} margin 二维码外边距   
+     * @param {string} backgroundColor 背景颜色    
+     * @param {string} logoSrc 中央图标logo地址    
+     * @param {number} logoMargin logo周围的空白边框   
+     * @param {string} logoBgColor logo边框的背景色   
+     * @param {number} logoRadius logo边框圆角半径
+     * @param {boolean} whiteMargin 背景图外是否设置白色边框  
+     * @type {*}
+     * @memberof AppPresetQrCode
+     */
+    public QRCodeConfig: { 
+        size?: number, 
+        url?: string, 
+        bgSrc?: string,
+        margin?: number, 
+        backgroundColor?: string, 
+        logoSrc?: string,
+        logoMargin?: number, 
+        logoBgColor?: string, 
+        logoRadius?: number,
+        whiteMargin?: boolean,
+    } = {}
+
+    /**
+     * 二维码生成的回调函数
+     * @type {*}
+     * @memberof AppPresetQrCode
+     */
+    public callback(event: any) {
+        // TODO
+    }
+
+    /**
+     * 获取二维码数据
+     * 
+     * @memberof AppPresetQrCode
+     */
+    public created() {
+        this.getQRCodeData();
+    }
+
+    /**
+     * 获取二维码绘制数据
+     *
+     * @type {*}
+     * @memberof AppPresetQrCode
+     */
+    public getQRCodeData() {
+        if(this.value && typeof(this.value) == 'string') {
+            const value = JSON.parse(this.value);
+            const {
+                size, 
+                url, 
+                bgSrc,
+                margin, 
+                backgroundColor, 
+                logoSrc,
+                logoMargin, 
+                logoBgColor, 
+                logoRadius,
+                whiteMargin,
+            } = value;
+            this.QRCodeConfig = {
+                size, 
+                url, 
+                bgSrc,
+                margin, 
+                backgroundColor, 
+                logoSrc,
+                logoMargin, 
+                logoBgColor, 
+                logoRadius,
+                whiteMargin,
+            };
+            // TODO
+        }
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-preset-qrcode.less';
+</style>
\ No newline at end of file

src/components/layout-element/interactive/app-preset-switch/app-preset-switch.less

+.app-preset-switch {
+    min-width: 40px;
+    height: 100%;
+}
\ No newline at end of file

src/components/layout-element/interactive/app-preset-switch/app-preset-switch.vue

+<template>
+  <el-switch :class="className" v-model="curValue" :disabled="disabled"></el-switch>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppPresetSwitch extends Vue {
+    /**
+     * 开关值
+     *
+     * @type {*}
+     * @memberof AppPresetSwitch
+     */
+    @Prop() public value!: any
+
+    /**
+     * 名称
+     *
+     * @type {*}
+     * @memberof AppPresetSwitch
+     */
+    @Prop() public name!: string
+
+    /**
+     * 名称
+     *
+     * @type {*}
+     * @memberof AppPresetSwitch
+     */
+    @Prop({default: false}) public disabled?: boolean
+
+    /**
+     * 类名
+     *
+     * @memberof AppPresetSwitch
+     */
+    get className(): string {
+        return `app-preset-switch ${this.name}`;
+    }
+
+    /**
+     * 获取开关状态
+     *
+     * @type {*}
+     * @memberof AppPresetSwitch
+     */
+    get curValue(): boolean {
+        return !!this.value;
+    }
+
+    /**
+     * 开关状态发生变化
+     *
+     * @type {*}
+     * @memberof AppPresetSwitch
+     */
+    set curValue(value: boolean) {
+        this.$emit('valueChange', {name: this.name, value});
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-preset-switch.less';
+</style>
\ No newline at end of file

src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.less

+.app-preset-text-input {
+    width: 100%;
+    height: 32px;
+
+    .el-input,
+    .el-input__inner {
+        width: 100%;
+        height: 32px;
+    }
+}
\ No newline at end of file

src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue

+<template>
+    <div :class="className">
+        <el-input v-model="curValue" :placeholder="placeholder"></el-input>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppPresetTextInput extends Vue {
+    /**
+     * 输入值
+     *
+     * @type {*}
+     * @memberof AppPresetTextInput
+     */
+    @Prop() public value!: any;
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppPresetTextInput
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 禁用
+     *
+     * @type {boolean}
+     * @memberof AppPresetTextInput
+     */
+    @Prop() public disabled?: boolean;
+
+    /**
+     * 占位文本
+     *
+     * @type {string}
+     * @memberof AppPresetTextInput
+     */
+    @Prop({default: ''}) public placeholder?: string;
+
+    /**
+     * 类名
+     *
+     * @memberof AppPresetSwitch
+     */
+    get className(): string {
+        return `app-preset-text-input ${this.name}`;
+    }
+
+    /**
+     * 当前值
+     *
+     * @memberof AppPresetTextInput
+     */
+    get curValue() {
+        return this.value;
+    }
+
+    /**
+     * 值变化
+     *
+     * @memberof AppPresetTextInput
+     */
+    set curValue(val: any) {
+        this.$emit('valueChange', { name: this.name, value: val });
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-preset-text-input.less';
+</style>
\ No newline at end of file

src/components/layout-element/text/app-preset-caption/app-preset-caption.vue

 <template>
-  <div class="app-preset-caption">
+  <div :class="className">
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
+import { Vue, Component, Prop } from "vue-property-decorator";
 
 @Component({})
-export default class AppPresetCaption extends Vue {}
+export default class AppPresetCaption extends Vue {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppPresetCaption
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 类名
+     *
+     * @memberof AppPresetText
+     */
+    get className(): string {
+        return `app-preset-caption ${this.name}`;
+    }
+}
 </script>
 
 <style lang='less'>

src/components/layout-element/text/app-preset-text/app-preset-text.vue

 <template>
-    <div :class="['app-preset-text', `app-preset-text--${contentType.toLowerCase()}`]">
+    <div :class="className">
         <!-- 直接内容类型 -->
         <template v-if="Object.is(contentType, 'RAW')">
             <template v-if="Object.is(renderMode, 'TEXT')">
@@ -58,6 +58,14 @@ export default class AppPresetText extends Vue {
      */
     @Prop() public value!: any;
 
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppPresetText
+     */
+    @Prop() public name!: string;
+
     /**
      * 内容类型
      *
@@ -98,11 +106,11 @@ export default class AppPresetText extends Vue {
     @Prop() public imageClass?: string;
 
     /**
-     * 动态图片路径
+     * 图片路径
      *
      * @memberof AppPresetText
      */
-    protected dynaImgUrl: string = '';
+    @Prop() public imgUrl?: string;
 
     /**
      * 样式
@@ -111,15 +119,6 @@ export default class AppPresetText extends Vue {
      */
     protected cssStyle: string = '';
     
-    /**
-     * 图片路径
-     *
-     * @memberof AppPresetText
-     */
-    get imgUrl(): string {
-        return this.dynaImgUrl;
-    }
-
     /**
      * 内容
      *
@@ -142,6 +141,15 @@ export default class AppPresetText extends Vue {
         return content;
     }
 
+    /**
+     * 类名
+     *
+     * @memberof AppPresetText
+     */
+    get className(): string {
+        return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name}`;
+    }
+
     /**
      * Vue生命周期 --- Created
      *
@@ -149,7 +157,6 @@ export default class AppPresetText extends Vue {
      */
     created() {
         this.handleText();
-        this.handleDynaImg();
     }
 
     /**
@@ -163,30 +170,6 @@ export default class AppPresetText extends Vue {
         }
     }
 
-    /**
-     * 处理动态图片
-     *
-     * @memberof AppPresetText
-     */
-    protected handleDynaImg() {
-        // TODO 动态图片
-        // if (this.value && typeof this.value == 'string') {
-        //     // 默认识别文件对象形式，识别失败则为全路径模式
-        //     try {
-        //         const _files = JSON.parse(this.value);
-        //         const file = _files instanceof Array ? _files[0] : null;
-        //         const url = file && file.id ? `${this.downloadUrl}/${file.id}` : '';
-        //         ImgurlBase64.getInstance()
-        //         .getImgURLOfBase64(url)
-        //         .then((res: any) => {
-        //             this.dynaImgUrl = res;
-        //         });
-        //     } catch (error) {
-        //         this.dynaImgUrl = this.value;
-        //     }
-        // }
-    }
-
 }
 </script>
 <style lang="less">

src/components/layout-element/text/app-preset-title/app-preset-title.vue

 <template>
-    <h1 class="app-preset-title">{{ curValue }}</h1>
+    <h1 :class="className">{{ curValue }}</h1>
 </template>
 
 <script lang="ts">
 import { Environment } from "@/environments/environment";
-import { Vue, Component } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component({})
 export default class AppPresetTitle extends Vue {
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppPresetTitle
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 类名
+     *
+     * @memberof AppPresetTitle
+     */
+    get className(): string {
+        return `app-preset-title ${this.name}`;
+    }
 
     /**
      * 当前值