update：更新

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

 <template>
-    <div :class="className">
+    <div :class="curClassName" :style="curStyle">
         <template v-if="QRCodeConfig.url">
             <ibiz-qr-code
                 :size="QRCodeConfig.size"
@@ -40,13 +40,32 @@ export default class AppPresetQrCode extends Vue {
      */
     @Prop() public name!: string;
 
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppPresetQrCode
+     */
+    @Prop() public layoutModelDetails: any;
+
     /**
      * 类名
      *
      * @memberof AppPresetQrCode
      */
-    get className(): string {
-        return `app-preset-qrcode ${this.name}`;
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-preset-qrcode ${this.name} ${layoutModel.sysCss}`;
+    }
+
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppPresetQrCode
+     */
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
     }
 
     /**

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

 <template>
-  <el-switch :class="className" v-model="curValue" :disabled="disabled"></el-switch>
+    <el-switch :class="curClassName" :style="curStyle" v-model="curValue" :disabled="disabled"></el-switch>
 </template>
 
 <script lang="ts">
@@ -24,20 +24,41 @@ export default class AppPresetSwitch extends Vue {
     @Prop() public name!: string
 
     /**
-     * 名称
+     * 布局模型详情
      *
      * @type {*}
      * @memberof AppPresetSwitch
      */
-    @Prop({default: false}) public disabled?: boolean
+    @Prop() public layoutModelDetails: any;
 
     /**
      * 类名
      *
      * @memberof AppPresetSwitch
      */
-    get className(): string {
-        return `app-preset-switch ${this.name}`;
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-preset-switch ${this.name} ${layoutModel.sysCss}`;
+    }
+
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppPresetSwitch
+     */
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
+
+    /**
+     * 禁用
+     * 
+     * @memberof AppPresetSwitch
+     */
+    get disabled(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.disabled;
     }
 
     /**

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

 <template>
-    <div :class="className">
+    <div :class="curClassName" :style="curStyle">
         <el-input v-model="curValue" :placeholder="placeholder"></el-input>
     </div>
 </template>
@@ -26,20 +26,52 @@ export default class AppPresetTextInput extends Vue {
     @Prop() public name!: string;
 
     /**
-     * 禁用
+     * 布局模型详情
      *
-     * @type {boolean}
-     * @memberof AppPresetTextInput
+     * @type {*}
+     * @memberof AppPresetSwitch
      */
-    @Prop() public disabled?: boolean;
+    @Prop() public layoutModelDetails: any;
 
     /**
-     * 占位文本
+     * 类名
      *
-     * @type {string}
-     * @memberof AppPresetTextInput
+     * @memberof AppPresetSwitch
      */
-    @Prop({default: ''}) public placeholder?: string;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-preset-text-input ${this.name} ${layoutModel.sysCss}`;
+    }
+
+    /**
+     * 禁用
+     * 
+     * @memberof AppPresetSwitch
+     */
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.disabled;
+    }
+
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppPresetSwitch
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
+
+    /**
+     * 占位提示
+     * 
+     * @memberof AppPresetSwitch
+     */
+    get placeholder() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.placeholder || '';
+    }
 
     /**
      * 类名

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

 <template>
-  <div :class="className">
+  <div :class="curClassName" :style="curStyle">
     <slot></slot>
   </div>
 </template>
@@ -18,13 +18,32 @@ export default class AppPresetCaption extends Vue {
      */
     @Prop() public name!: string;
 
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppPresetCaption
+     */
+    @Prop() public layoutModelDetails: any;
+
     /**
      * 类名
      *
-     * @memberof AppPresetText
+     * @memberof AppPresetCaption
+     */
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-preset-caption ${this.name} ${layoutModel.sysCss}`;
+    }
+
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppPresetCaption
      */
-    get className(): string {
-        return `app-preset-caption ${this.name}`;
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
     }
 }
 </script>

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

 <template>
-    <div :class="className">
+    <div :class="curClassName" :style="curStyle">
         <!-- 直接内容类型 -->
         <template v-if="Object.is(contentType, 'RAW')">
             <template v-if="Object.is(renderMode, 'TEXT')">
-                <span :style="cssStyle">{{ content }}</span>
+                <span :style="contentStyle">{{ content }}</span>
             </template>
             <template v-else-if="Object.is(renderMode, 'HEADING1')">
-                <h1 :style="cssStyle">{{ content }}</h1>
+                <h1 :style="contentStyle">{{ content }}</h1>
             </template>
             <template v-else-if="Object.is(renderMode, 'HEADING2')">
-                <h2 :style="cssStyle">{{ content }}</h2>
+                <h2 :style="contentStyle">{{ content }}</h2>
             </template>
             <template v-else-if="Object.is(renderMode, 'HEADING3')">
-                <h3 :style="cssStyle">{{ content }}</h3>
+                <h3 :style="contentStyle">{{ content }}</h3>
             </template>
             <template v-else-if="Object.is(renderMode, 'HEADING4')">
-                <h4 :style="cssStyle">{{ content }}</h4>
+                <h4 :style="contentStyle">{{ content }}</h4>
             </template>
             <template v-else-if="Object.is(renderMode, 'HEADING5')">
-                <h5 :style="cssStyle">{{ content }}</h5>
+                <h5 :style="contentStyle">{{ content }}</h5>
             </template>
             <template v-else-if="Object.is(renderMode, 'HEADING6')">
-                <h6 :style="cssStyle">{{ content }}</h6>
+                <h6 :style="contentStyle">{{ content }}</h6>
             </template>
             <template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
-                <p :style="cssStyle">{{ content }}</p>
+                <p :style="contentStyle">{{ content }}</p>
             </template>
         </template>
         <!-- 图片类型 -->
         <template v-else-if="Object.is(contentType, 'IMAGE')">
-            <img :style="cssStyle" v-if="imgUrl" :src="imgUrl" />
-            <i :style="cssStyle" v-else :class="imageClass ? imageClass : ''"></i>
+            <img :style="contentStyle" v-if="imagePath" :src="imagePath" />
+            <i :style="contentStyle" v-else :class="cssClass"></i>
         </template>
         <!-- HTML类型 -->
         <template v-else-if="Object.is(contentType, 'HTML')">
-            <div :style="cssStyle" v-html="content" />
+            <div :style="contentStyle" v-html="content" />
         </template>
         <!-- MARKDOWN类型 -->
         <template v-else-if="Object.is(contentType, 'MARKDOWN')">
             MARKDOWN暂未支持
-            <!-- <app-markdown-editor :style="cssStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
+            <!-- <app-markdown-editor :style="contentStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
         </template>
     </div>
 </template>
@@ -67,109 +67,111 @@ export default class AppPresetText extends Vue {
     @Prop() public name!: string;
 
     /**
-     * 内容类型
+     * 布局模型详情
      *
-     * @type {string}
-     * @memberof AppPresetText
+     * @type {*}
+     * @memberof AppPresetTitle
      */
-    @Prop({ default: 'RAW' }) public contentType!: 'RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN';
+    @Prop() public layoutModelDetails: any;
 
     /**
-     * 绘制模式
+     * 图标
      *
-     * @type {string}
      * @memberof AppPresetText
      */
-    @Prop({ default: 'TEXT' }) public renderMode!: 'TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH';
+    @Prop() public imageClass?: string;
 
     /**
-     * 内容样式
+     * 图片路径
      *
-     * @type {string}
      * @memberof AppPresetText
      */
-    @Prop() public contentStyle?: string;
+    get imagePath() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.imagePath;
+    }
 
     /**
-     * 预置类型
+     * 图标
      *
-     * @type {string}
-     * @memberof AppPresetText
+     * @memberof AppPresetTitle
      */
-    @Prop({ default: 'STATIC_TEXT' }) public predefinedType!: 'FIELD_TEXT_DYNAMIC' | 'STATIC_LABEL' | 'STATIC_TEXT';
+    get cssClass() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.iconcls;
+    }
 
     /**
-     * 图标
+     * 类名
      *
-     * @memberof AppPresetText
+     * @memberof AppPresetTitle
      */
-    @Prop() public imageClass?: string;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-preset-text app-preset-text--${layoutModel.contentType.toLowerCase()} ${this.name} ${layoutModel.sysCss}`;
+    }
 
     /**
-     * 图片路径
-     *
-     * @memberof AppPresetText
+     * 当前容器样式
+     * 
+     * @memberof AppPresetTitle
      */
-    @Prop() public imgUrl?: string;
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
 
     /**
-     * 样式
-     *
-     * @memberof AppPresetText
+     * 绘制模式
+     * 
+     * @memberof AppPresetTitle
      */
-    protected cssStyle: string = '';
-    
+    get renderMode() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.renderMode;
+    }
+
     /**
      * 内容
      *
      * @memberof AppPresetText
      */
     get content(): string {
+        const layoutModel = this.layoutModelDetails[this.name];
         let content = this.value;
-        if (this.contentType == 'HTML') {
-            const items = content.match(/\{{(.+?)\}}/g);
-            if (items) {
-                items.forEach((item: string) => {
-                    content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
-                });
+        if (layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') {
+            if (layoutModel.contentType == 'ROW') {
+                content = layoutModel.rawContent;
+            } else if (layoutModel.contentType == 'HTML') {
+                content = layoutModel.htmlContent;
+                const items = content.match(/\{{(.+?)\}}/g);
+                if (items) {
+                    items.forEach((item: string) => {
+                        content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
+                    });
+                }
+                content = content.replaceAll('&lt;', '<');
+                content = content.replaceAll('&gt;', '>');
+                content = content.replaceAll('&amp;nbsp;', ' ');
+                content = content.replaceAll('&nbsp;', ' ');
             }
-            content = content.replaceAll('&lt;', '<');
-            content = content.replaceAll('&gt;', '>');
-            content = content.replaceAll('&amp;nbsp;', ' ');
-            content = content.replaceAll('&nbsp;', ' ');
         }
         return content;
     }
 
     /**
-     * 类名
-     *
-     * @memberof AppPresetText
-     */
-    get className(): string {
-        return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name}`;
-    }
-
-    /**
-     * Vue生命周期 --- Created
-     *
-     * @memberof AppPresetText
-     */
-    created() {
-        this.handleText();
-    }
-
-    /**
-     * 处理文本
+     * 内容样式
      *
      * @memberof AppPresetText
      */
-    protected handleText() {
-        if (this.predefinedType === 'STATIC_LABEL') {
-            this.cssStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
+    get contentStyle(): string {
+        const layoutModel = this.layoutModelDetails[this.name];
+        let contentStyle = layoutModel.contentStyle;
+        if (layoutModel.predefinedType === 'STATIC_LABEL') {
+            contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
         }
+        return contentStyle;
     }
-
 }
 </script>
 <style lang="less">

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

 <template>
-    <h1 :class="className">{{ curValue }}</h1>
+    <h1 :class="curClassName" :style="curStyle">{{ curValue }}</h1>
 </template>
 
 <script lang="ts">
@@ -16,13 +16,32 @@ export default class AppPresetTitle extends Vue {
      */
     @Prop() public name!: string;
 
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppPresetTitle
+     */
+    @Prop() public layoutModelDetails: any;
+
     /**
      * 类名
      *
      * @memberof AppPresetTitle
      */
-    get className(): string {
-        return `app-preset-title ${this.name}`;
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-preset-title ${this.name} ${layoutModel.sysCss}`;
+    }
+
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppPresetTitle
+     */
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
     }
 
     /**

src/model/panel-detail/panel-raw-item.ts

@@ -27,6 +27,48 @@ export class PanelRawitemModel extends PanelDetailModel {
      */
     private readonly viewType: string;
 
+    /**
+     * 绘制模式
+     *
+     * @private
+     * @type {('TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH')}
+     * @memberof PanelRawitemModel
+     */
+    public renderMode: 'TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH' = 'TEXT';
+
+    /**
+     * 内容类型
+     *
+     * @private
+     * @type {('RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN')}
+     * @memberof PanelRawitemModel
+     */
+    public contentType: 'RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN' = 'RAW';
+
+    /**
+     * 内容样式
+     *
+     * @type {string}
+     * @memberof PanelRawitemModel
+     */
+    public contentStyle!: string;
+
+    /**
+     * 直接内容
+     *
+     * @type {string}
+     * @memberof PanelRawitemModel
+     */
+    public rawContent!: string;
+
+    /**
+     * html内容
+     *
+     * @type {string}
+     * @memberof PanelRawitemModel
+     */
+    public htmlContent!: string;
+
     /**
      * Creates an instance of PanelRawitemModel.
      * @param {*} [opts={}]
@@ -35,6 +77,11 @@ export class PanelRawitemModel extends PanelDetailModel {
     constructor(opts: any = {}) {
         super(opts);
         this.viewType = opts.viewType;
+        this.renderMode = opts.renderMode ? opts.renderMode : 'TEXT';
+        this.contentType = opts.contentType ? opts.contentType : 'RAW';
+        this.contentStyle = opts.contentStyle;
+        this.rawContent = opts.rawContent;
+        this.htmlContent = opts.htmlContent;
     }
 
     /**
@@ -83,6 +130,4 @@ export class PanelRawitemModel extends PanelDetailModel {
         }
         return false;
     }
-
-
 }
\ No newline at end of file