update：更新

src/app-register.ts

@@ -141,6 +141,7 @@ import ExtendActionTimeline from './components/extend-action-timeline/extend-act
 import AppIndexViewLayoutLeft from './layout/index-view-layout-left/index-view-layout-left.vue';
 import AppIndexViewLayoutTop from './layout/index-view-layout-top/index-view-layout-top.vue';
 import AppGridViewLayout from './layout/grid-view-layout/grid-view-layout.vue';
+import AppEditViewLayout from './layout/edit-view-layout/edit-view-layout.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -167,6 +168,7 @@ export const AppComponents = {
         v.prototype.$verify = Verify;
         v.prototype.$viewTool = ViewTool;
         v.prototype.$uiActionTool = UIActionTool;
+        v.component('app-edit-view-layout',AppEditViewLayout);
         v.component('app-index-view-layout-top',AppIndexViewLayoutTop);
         v.component('app-index-view-layout-left',AppIndexViewLayoutLeft);
         v.component('app-grid-view-layout',AppGridViewLayout);

src/layout/edit-view-layout/edit-view-layout.scss

+.edit-view-layout {
+    
+}
\ No newline at end of file

src/layout/edit-view-layout/edit-view-layout.vue

+<template>
+    <layout class="edit-view-layout view-layout view-container">
+        <header class="view-header">
+            <div class="view-header__left">
+                <slot name="headerLeft" />
+            </div>
+            <div class="view-header__center">
+                <slot name="headerCenter" />
+            </div>
+            <div class="view-header__right">
+                <slot name="headerRight" />
+            </div>   
+        </header>
+        <content class="view-content content-container">
+            <slot />
+        </content>
+        <footer class="view-footer">
+            <slot name="footer" />
+        </footer>
+    </layout>
+</template>
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppGridViewLayout extends Vue {
+
+}
+</script>
+
+<style lang="scss">
+@import "./edit-view-layout.scss";
+</style>

src/layout/index-view-layout-left/index-view-layout-left.scss

 .index-view-layout--left {
     position: relative;
 
-    .index-view-layout-sider {
+    .index-view-sider {
         flex: none !important;
         max-width: none !important;
         transition: none 0s ease 0s;
         background-color: var(--app-color-white);
 
-        .sider__top {
+        .index-view-sider__top {
             font-size: 21px;
             font-weight: 700;
             height: 64px;
@@ -23,7 +23,7 @@
         }
     }
 
-    .index-view-layout-split {
+    .index-view-split {
         position: absolute;
         left: 195px;
         width: 5px;
@@ -31,7 +31,7 @@
         cursor: w-resize;
     }
 
-    .index-view-layout-header {
+    .index-view-header {
         height: 64px;
         display: flex;
         justify-content: space-between;
@@ -39,20 +39,20 @@
         background-color: var(--app-color-white);
         color: var(--app-color-black);
 
-        .header__left {
+        .index-view-header__left {
             display: flex;
             font-size: 21px;
             margin-left: 8px;
             align-items: center;
         }
 
-        .header__right {
+        .index-view-header__right {
             display: flex;
             align-items: center;
         }
     }
 
-    .index-view-layout-content {
+    .index-view-content {
         height: calc(100% - 64px);
         background-color: var(--app-color-gray-400);
 
@@ -61,7 +61,7 @@
             margin: 0 12px;
         }
 
-        &.index-view-layout-content--tab {
+        &.index-view-content--tab {
 
             >.view-container {
                 height: calc(100% - 65px);

src/layout/index-view-layout-left/index-view-layout-left.vue

 <template>
     <layout class="index-view-layout index-view-layout--left" id="movebox">
-        <sider class="index-view-layout-sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
-            <div class="sider__top">
+        <sider class="index-view-sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
+            <div class="index-view-sider__top">
                 <slot name="siderTop" />
             </div>
             <slot name="siderContent" />
         </sider>
-        <div v-show="!collapseChange" class="index-view-layout-split" id="move_axis"></div>
+        <div v-show="!collapseChange" class="index-view-split" id="move_axis"></div>
         <layout id="right_move">
-            <header class="index-view-layout-header">
-                <div class="header__left">
+            <header class="index-view-header">
+                <div class="index-view-header__left">
                     <slot name="headerLeft" />
                 </div>
-                <div class="header__center">
+                <div class="index-view-header__center">
                     <slot name="headerCenter" />
                 </div>
-                <div class="header__right">
+                <div class="index-view-header__right">
                     <slot name="headerRight" />
                 </div>   
             </header>
-            <content :class="{ 'index-view-layout-content': true, 'index-view-layout-content--tab': Object.is(navModel,'tab') ? true : false, 'index-view-layout-content--route': Object.is(navModel,'route') ? true : false }">
+            <content :class="{ 'index-view-content': true, 'index-view-content--tab': Object.is(navModel,'tab') ? true : false, 'index-view-content--route': Object.is(navModel,'route') ? true : false }">
                 <slot name="tabPageExp" />
                 <slot name="navPos" />
             </content>
@@ -27,7 +27,7 @@
     </layout>
 </template>
 <script lang="ts">
-import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component({})
 export default class AppIndexViewLayoutLeft extends Vue {

src/layout/index-view-layout-top/index-view-layout-top.scss

 .index-view-layout--top {
-    .index-view-layout-header {
+    .index-view-header {
         height: 64px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: var(--app-color-black);
         color: var(--app-color-white);
-        .header__left {
+        .index-view-header__left {
             font-size: 21px;
             font-weight: 700;
             margin-left: 50px;
@@ -16,12 +16,12 @@
                 margin-right: 6px;
             }
         }
-        .header__right {
+        .index-view-header__right {
             display: flex;
             align-items: center;
         }
     }
-    .index-view-layout-content {
+    .index-view-content {
         height: calc(100% - 64px);
         overflow: auto;
         padding: 20px 38px 0 38px;

src/layout/index-view-layout-top/index-view-layout-top.vue

 <template>
     <layout class="index-view-layout index-view-layout--top">
-        <header class="index-view-layout-header">
-            <div class="header__left">
+        <header class="index-view-header">
+            <div class="index-view-header__left">
                 <slot name="headerLeft" />
             </div>
-            <div class="header__center">
+            <div class="index-view-header__center">
                 <slot name="headerCenter" />
             </div>
-            <div class="header__right">
+            <div class="index-view-header__right">
                 <slot name="headerRight" />
             </div>
         </header>
-        <content class="index-view-layout-content">
+        <content class="index-view-content">
             <slot name="navPos" />
         </content>
-        <footer class="layout-footer-center">
+        <footer class="index-view-footer">
             <slot name="footer"></slot>
         </footer>
     </layout>