update：登录组件更新

src/components/layout-element/login/app-login-button/app-login-button.vue

 <template>
-    <div :class="[model.sysCss, 'app-login-button']" :style="containerStyle">
-        <i-button @click="handleClick" :type="curStyle">
-            <template v-if="model.sysImage">
-                <i v-if="model.sysImage.iconcls" :class="model.sysImage.iconcls"/>
-                <img v-else-if="model.sysImage.imagePath" :src="model.sysImage.imagePath" />
-            </template>
-            <span v-show="model.isShowCaption">{{ model.caption }}</span>
+    <div :class="curClassName" :style="curStyle">
+        <i-button 
+        @click="handleClick" 
+        :disabled="disabled"
+        :title="curTooltip" 
+        :type="buttonType">
+           <div :class="['button-content', iconAlign.toLowerCase()]">
+                <span v-if="cssClass || imagePath" class="icon">
+                    <i v-if="cssClass" :class="cssClass" />
+                    <img v-else :src="imagePath" />
+                </span>
+                <span v-if="showCaption" class="caption">{{ curCaption }}</span>
+            </div>
         </i-button>
     </div>
 </template>
 
 <script lang="ts">
-import { PanelButtonModel } from "@/model/panel-detail";
 import { Vue, Component, Prop } from "vue-property-decorator";
 
 @Component({})
@@ -20,7 +25,7 @@ export default class AppLoginButton extends Vue {
     /**
      * 名称
      *
-     * @type {PanelButtonModel}
+     * @type {string}
      * @memberof AppLoginButton
      */
     @Prop() public name!: string;
@@ -28,10 +33,10 @@ export default class AppLoginButton extends Vue {
     /**
      * 模型
      *
-     * @type {PanelButtonModel}
+     * @type {any}
      * @memberof AppLoginButton
      */
-    @Prop() public model!: PanelButtonModel;
+    @Prop() public layoutModelDetails: any;
 
     /**
      * 类型
@@ -41,29 +46,154 @@ export default class AppLoginButton extends Vue {
      */
     @Prop() public defaultStyle?: string;
 
+    /**
+     * 加载状态
+     *
+     * @memberof AppLoginButton
+     */
+    @Prop({ default: false }) public loading?: boolean;
+
+    /**
+     * 标题
+     *
+     * @memberof AppLoginButton
+     */
+    get curCaption() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.caption;
+    }
+
+    /**
+     * 提示信息
+     *
+     * @memberof AppLoginButton
+     */
+    get curTooltip() {
+         const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.tooltip;
+    }
+
+    /**
+     * 显示标题
+     *
+     * @memberof AppLoginButton
+     */
+    get showCaption() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.isShowCaption;
+    }
+
     /**
      * 当前按钮类型
      *
      * @type {string}
      * @memberof AppLoginButton
      */
-    get curStyle(): string {
-        if (this.model.renderMode == 'LINK') {
+    get buttonType(): string {
+        const layoutModel = this.layoutModelDetails[this.name];
+        if (layoutModel.renderMode == 'LINK') {
             return 'text';
-        } else if (this.model.buttonStyle != "DEFAULT" && this.defaultStyle) {
+        } else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) {
             return this.defaultStyle;
         } else {
-            return this.model.buttonStyle.toLowerCase();
+            if (
+                Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
+                Object.is(layoutModel.buttonStyle, 'STYLE2') ||
+                Object.is(layoutModel.buttonStyle, 'STYLE3') ||
+                Object.is(layoutModel.buttonStyle, 'STYLE4')
+            ) {
+                return 'default';
+            } else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
+                return 'error';
+            } else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
+                return 'primary';
+            } else {
+                return layoutModel.buttonStyle.toLowerCase();
+            }
+        }
+    }
+
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppLoginButton
+     */
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
+
+    /**
+     * 禁用
+     * 
+     * @memberof AppLoginButton
+     */
+    get disabled(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.disabled;
+    }
+
+    /**
+     * 类名
+     *
+     * @memberof AppLoginButton
+     */
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-login-button ${this.name} ${layoutModel.sysCss}`;
+    }
+
+    /**
+     * 图片路径
+     *
+     * @memberof AppLoginButton
+     */
+    get imagePath() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        let imagePath = '';
+        if (layoutModel.sysImage) {
+            imagePath = layoutModel.sysImage.imagePath;
+        } else if (layoutModel.uiAction) {
+            imagePath = layoutModel.uiAction.imagePath;
         }
+        return imagePath;
     }
 
     /**
-     * 按钮样式
+     * 图标
      *
-     * @type {string}
      * @memberof AppLoginButton
      */
-    public containerStyle: any = null;
+    get cssClass() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        let cssClass = '';
+        if (layoutModel.sysImage) {
+            cssClass = layoutModel.sysImage.iconcls;
+        } else if (layoutModel.uiAction) {
+            cssClass = layoutModel.uiAction.iconcls;
+        }
+        return cssClass;
+    }
+
+    /**
+     * 图标方向
+     *
+     * @memberof AppLoginButton
+     */
+    get iconAlign() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.iconAlign || 'LEFT';
+    }
+
+    /**
+     * 按钮幽灵属性，使按钮背景透明
+     *
+     * @memberof AppLoginButton
+     */
+    get buttonGhost() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return Object.is(layoutModel.buttonStyle, 'INVERSE');
+    }
 
     /**
      * 处理点击
@@ -75,11 +205,6 @@ export default class AppLoginButton extends Vue {
         this.$emit("itemClick", this.name);
     }
 
-    public mounted() {
-        if (this.model) {
-            this.containerStyle = this.model.getElementStyle();
-        }
-    }
 }
 </script>
 

src/components/layout-element/login/app-login-captcha/app-login-captcha.vue

 <template>
-    <div :class="[model.sysCss, 'app-login-captcha']" :style="containerStyle">
+    <div :class="curClassName" :style="curStyle">
         <auth-puzzle-vcode :show="show" @success="onSuccess" @fail="onFail" />
         <i-button :type="type" @click="executeOpen">验证</i-button>
     </div>
 </template>
 
 <script lang="ts">
-import { PanelUserControlModel } from "@/model/panel-detail";
 import { Vue, Component, Prop } from "vue-property-decorator";
 import AuthPuzzleVcode from "./vue-puzzle-code/vue-puzzle-code.vue";
 @Component({
@@ -21,7 +20,7 @@ export default class AppLoginCaptcha extends Vue {
      * @type {string}
      * @memberof AppLoginCaptcha
      */
-    @Prop() public model!: PanelUserControlModel;
+    @Prop() public layoutModelDetails: any;
 
     /**
      * 值
@@ -40,12 +39,24 @@ export default class AppLoginCaptcha extends Vue {
     @Prop() public name!: string;
 
     /**
-     * 容器样式
+     * 当前容器样式
+     * 
+     * @memberof AppLoginCaptcha
+     */
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
+
+    /**
+     * 类名
      *
-     * @type {any}
      * @memberof AppLoginCaptcha
      */
-    public containerStyle: any = null;
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-login-captcha ${this.name} ${layoutModel.sysCss}`;
+    }
 
     /**
      * 是否显示
@@ -57,10 +68,7 @@ export default class AppLoginCaptcha extends Vue {
      */
     public type: string = 'default';
 
-    public mounted() {
-        if (this.model) {
-            this.containerStyle = this.model.getElementStyle();
-        }
+    public created() {
         if (this.value) {
             this.type = 'success';
         }

src/components/layout-element/login/app-login-input/app-login-input.vue

 <template>
-    <div :class="[model.sysCss, 'app-login-input']" :style="containerStyle">
+    <div :class="curClassName" :style="curStyle">
         <i-input
             size='large'
             :prefix='defaultIcon'
@@ -7,13 +7,12 @@
             :type="defaultType"
             :disabled="disabled"
             :readonly="readonly"
-            :placeholder="model.caption">
+            :placeholder="curCaption">
         </i-input>
     </div>
 </template>
 
 <script lang="ts">
-import { PanelFieldModel } from '@/model/panel-detail';
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component({
@@ -23,10 +22,10 @@ export default class AppLoginInput extends Vue {
     /**
      * 模型
      *
-     * @type {string}
+     * @type {any}
      * @memberof AppLoginInput
      */
-    @Prop() public model!: PanelFieldModel;
+    @Prop() public layoutModelDetails: any;
     
     /**
      * 值
@@ -60,29 +59,35 @@ export default class AppLoginInput extends Vue {
      */
     @Prop() public defaultType?: string;
 
-    /**
-     * 容器样式
+        /**
+     * 标题
      *
-     * @type {any}
      * @memberof AppLoginInput
      */
-    public containerStyle: any = null;
+    get curCaption() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.caption;
+    }
 
     /**
-     * 禁用模式
-     *
-     * @type {any}
+     * 当前容器样式
+     * 
      * @memberof AppLoginInput
      */
-    public disabled: boolean = false;
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
 
     /**
-     * 只读模式
+     * 类名
      *
-     * @type {any}
      * @memberof AppLoginInput
      */
-    public readonly: boolean = false;
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-login-input ${this.name} ${layoutModel.sysCss}`;
+    }
 
     /**
      * 当前值
@@ -103,12 +108,24 @@ export default class AppLoginInput extends Vue {
         this.$emit('valueChange', { name: this.name, value: val });
     }
 
-    public mounted() {
-        if (this.model) {
-            this.containerStyle = this.model.getElementStyle();
-            this.disabled = Object.is(this.model.fieldState, '1');
-            this.readonly = Object.is(this.model.fieldState, '2'); 
-        }
+    /**
+     * 禁用
+     * 
+     * @memberof AppPresetSwitch
+     */
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.disabled;
+    }
+
+    /**
+     * 只读
+     * 
+     * @memberof AppPresetSwitch
+     */
+    get readonly() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.readonly;
     }
     
 }

src/components/layout-element/login/app-login-message/app-login-message.vue

 <template>
-  <div :class="[model.sysCss, 'app-login-message']" :style="containerStyle">
+  <div :class="curClassName" :style="curStyle">
     <alert v-show="value" type="error" show-icon>{{ value }}</alert>
   </div>
 </template>
 
 <script lang='ts'>
-import { PanelFieldModel } from "@/model/panel-detail";
 import { Component, Vue, Prop } from "vue-property-decorator";
 
 @Component({})
@@ -14,16 +13,16 @@ export default class AppLoginMessage extends Vue {
     /**
      * 模型
      *
-     * @type {string}
-     * @memberof AppLoginInput
+     * @type {any}
+     * @memberof AppLoginMessage
      */
-    @Prop() public model!: PanelFieldModel;
+    @Prop() public layoutModelDetails: any;
     
     /**
      * 值
      *
      * @type {string}
-     * @memberof AppLoginInput
+     * @memberof AppLoginMessage
      */
     @Prop() public value!: string;
 
@@ -31,22 +30,28 @@ export default class AppLoginMessage extends Vue {
      * 名称
      *
      * @type {string}
-     * @memberof AppLoginInput
+     * @memberof AppLoginMessage
      */
     @Prop() public name!: string;
 
     /**
-     * 容器样式
-     *
-     * @type {any}
-     * @memberof AppLoginInput
+     * 当前容器样式
+     * 
+     * @memberof AppLoginMessage
      */
-    public containerStyle: any = null;
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
 
-    public mounted() {
-        if (this.model) {
-            this.containerStyle = this.model.getElementStyle();
-        }
+    /**
+     * 类名
+     *
+     * @memberof AppLoginMessage
+     */
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-login-message ${this.name} ${layoutModel.sysCss}`;
     }
 
 }

src/components/layout-element/login/app-login-note-verify/app-login-note-verify.vue

 <template>
-    <div :class="[model.sysCss, 'app-login-note-verify']" :style="containerStyle">
+    <div :class="curClassName" :style="curStyle">
         <div class="content">
             <i-input
                 size="default"
@@ -26,7 +26,6 @@
 </template>
 
 <script lang="ts">
-import { PanelFieldModel } from "@/model/panel-detail";
 import { Vue, Component, Prop } from "vue-property-decorator";
 
 @Component({})
@@ -34,16 +33,16 @@ export default class AppLoginNoteVerify extends Vue {
     /**
      * 模型
      *
-     * @type {string}
-     * @memberof AppLoginInput
+     * @type {any}
+     * @memberof AppLoginNoteVerify
      */
-    @Prop() public model!: PanelFieldModel;
+    @Prop() public layoutModelDetails: any;
 
     /**
      * 值
      *
      * @type {string}
-     * @memberof AppLoginInput
+     * @memberof AppLoginNoteVerify
      */
     @Prop() public value!: string;
 
@@ -51,7 +50,7 @@ export default class AppLoginNoteVerify extends Vue {
      * 名称
      *
      * @type {string}
-     * @memberof AppLoginInput
+     * @memberof AppLoginNoteVerify
      */
     @Prop() public name!: string;
 
@@ -113,17 +112,23 @@ export default class AppLoginNoteVerify extends Vue {
     public timer: any = null;
 
     /**
-     * 容器样式
-     *
-     * @type {any}
-     * @memberof AppLoginInput
+     * 当前容器样式
+     * 
+     * @memberof AppLoginNoteVerify
      */
-    public containerStyle: any = null;
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
 
-    public mounted() {
-        if (this.model) {
-            this.containerStyle = this.model.getElementStyle();
-        }
+    /**
+     * 类名
+     *
+     * @memberof AppLoginNoteVerify
+     */
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-login-note-verify ${this.name} ${layoutModel.sysCss}`;
     }
 
     /**

src/components/layout-element/login/app-login-org/app-login-org.vue

 <template>
-    <div :class="[model.sysCss, 'app-login-org']" :style="containerStyle">
+    <div :class="curClassName" :style="curStyle">
         <Select v-model="curKey">
             <Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
     </div>
 </template>
 <script lang='ts'>
-import { PanelFieldModel } from '@/model/panel-detail';
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component({})
@@ -34,7 +33,7 @@ export default class AppLoginOrg extends Vue {
      * @type {*}
      * @memberof AppLoginOrg
      */
-    @Prop() public model!: PanelFieldModel;
+    @Prop() public layoutModelDetails: any;
 
     /**
      * 当前值
@@ -63,12 +62,24 @@ export default class AppLoginOrg extends Vue {
     public items: Array<any> = [];
 
     /**
-     * 容器样式
+     * 当前容器样式
+     * 
+     * @memberof AppLoginOrg
+     */
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
+
+    /**
+     * 类名
      *
-     * @type {any}
-     * @memberof AppLoginInput
+     * @memberof AppLoginOrg
      */
-    public containerStyle: any = null;
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-login-org ${this.name} ${layoutModel.sysCss}`;
+    }
 
     /**
      * 组件初始化数据，vue生命周期
@@ -77,9 +88,6 @@ export default class AppLoginOrg extends Vue {
      */
     public created() {
         this.getOrgData();
-        if (this.model) {
-            this.containerStyle = this.model.getElementStyle();
-        }
     }
 
     /**

src/components/layout-element/login/app-login-third/app-login-third.vue

 <template>
-    <div :class="[model.sysCss, 'app-login-third']" :style="containerStyle">
+    <div :class="curClassName" :style="curStyle">
         <div class="app-login-third__title">{{ $t("components.login.other") }}</div>
         <div class="app-login-third__content">
             <div class="sign-btn" @click="handleThirdLogin('DINGDING')">
@@ -13,7 +13,6 @@
 </template>
 
 <script lang="ts">
-import { PanelUserControlModel } from "@/model/panel-detail";
 import { Component, Prop, Vue } from "vue-property-decorator";
 @Component({})
 export default class AppThirdLogin extends Vue {
@@ -21,16 +20,16 @@ export default class AppThirdLogin extends Vue {
     /**
      * 模型
      *
-     * @type {string}
-     * @memberof AppLoginInput
+     * @type {any}
+     * @memberof AppThirdLogin
      */
-    @Prop() public model!: PanelUserControlModel;
+    @Prop() public layoutModelDetails: any;
     
     /**
      * 值
      *
      * @type {string}
-     * @memberof AppLoginInput
+     * @memberof AppThirdLogin
      */
     @Prop() public value!: string;
 
@@ -38,22 +37,28 @@ export default class AppThirdLogin extends Vue {
      * 名称
      *
      * @type {string}
-     * @memberof AppLoginInput
+     * @memberof AppThirdLogin
      */
     @Prop() public name!: string;
 
     /**
-     * 容器样式
-     *
-     * @type {any}
-     * @memberof AppLoginInput
+     * 当前容器样式
+     * 
+     * @memberof AppThirdLogin
      */
-    public containerStyle: any = null;
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
 
-    public mounted() {
-        if (this.model) {
-            this.containerStyle = this.model.getElementStyle();
-        }
+    /**
+     * 类名
+     *
+     * @memberof AppThirdLogin
+     */
+    get curClassName(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-login-input ${this.name} ${layoutModel.sysCss}`;
     }
     
     /**