diff --git a/package-lock.json b/package-lock.json
index 79e2e5f3..9c49ab3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6590,13 +6590,15 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6613,19 +6615,22 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6756,7 +6761,8 @@
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6770,6 +6776,7 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6786,6 +6793,7 @@
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6801,6 +6809,7 @@
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -6909,7 +6918,8 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6923,6 +6933,7 @@
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7060,6 +7071,7 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/src/assets/styles/realize/element-variables.scss b/src/assets/styles/realize/element-variables.scss
index 639e95d3..58f2be30 100644
--- a/src/assets/styles/realize/element-variables.scss
+++ b/src/assets/styles/realize/element-variables.scss
@@ -9,7 +9,7 @@ $--color-primary: #3963bc;
 
 $--color-primary: #3963bc;
 $--color-success: #00c292 !default;
-$--color-warning: #dee2e6 !default;
+$--color-warning: #ffcb71 !default;
 $--color-danger: #f4516c !default;
 
 $--background-color-base: #F6F7FA !default;
@@ -100,31 +100,31 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
 }
 
 .el-button--warning {
-  color: #8c98ae;
+  color: #FFFFFF;
 
   &.is-plain {
-    color: #8c98ae;
+    color: #ffcb71;
     background: #fff;
-    border: 1px solid #8c98ae;
+    border: 1px solid #ffcb71;
 
     &:hover,
     &:focus {
-      background: #8c98ae;
+      background: #ffcb71;
       color: #fff;
-      border: 1px solid #8c98ae;
+      border: 1px solid #ffcb71;
     }
 
     &.is-disabled {
-      color: #8c98ae;
-      background: #fff;
-      border: 1px solid #8c98ae;
+      color: #fff;
+      background: #FFBE4D;
+      border: 1px solid #FFBE4D;
       opacity: 0.5;
 
       &:hover,
       &:focus {
-        color: #8c98ae;
-        background: #fff;
-        border: 1px solid #8c98ae;
+        color: #fff;
+        background: #ffcb71;
+        border: 1px solid #ffcb71;
         opacity: 0.5;
       }
     }
@@ -132,22 +132,22 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
 
   &:hover,
   &:focus {
-    color: #8c98ae;
-    background: #bfcbd7;
-    border: 1px solid #bfcbd7;
+    color: #fff;
+    background: #FFBE4D;
+    border: 1px solid #FFBE4D;
   }
 
   &.is-disabled {
-    background: #dee2e6;
-    color: #8c98ae;
-    border: 1px solid #dee2e6;
+    background: #ffcb71;
+    color: #fff;
+    border: 1px solid #ffcb71;
     opacity: 0.5;
 
     &:hover,
     &:focus {
-      background: #dee2e6;
-      color: #8c98ae;
-      border: 1px solid #dee2e6;
+      background: #ffcb71;
+      color: #fff;
+      border: 1px solid #ffcb71;
       opacity: 0.5;
     }
   }
@@ -821,3 +821,8 @@ $typeMap: (primary:#3963BC,
     }
   }
 }
+
+/* alert */
+.el-alert+.el-alert {
+  margin-top: 20px;
+}
diff --git a/src/plugins/LinCmsUi/stage-config.js b/src/plugins/LinCmsUi/stage-config.js
index 702e3de7..666bcc55 100644
--- a/src/plugins/LinCmsUi/stage-config.js
+++ b/src/plugins/LinCmsUi/stage-config.js
@@ -9,54 +9,110 @@ const LinCmsUiRouter = {
   inNav: true,
   children: [
     {
-      title: 'Button 按钮',
-      type: 'view',
-      name: 'LinCmsUiButton',
-      route: '/lin-cms-ui/button',
-      filePath: 'plugins/LinCmsUi/views/button/Button.vue',
-      inNav: true,
-      icon: 'iconfont icon-jiemiansheji',
-      right: null,
-    },
-    {
-      title: 'Icon 图标',
-      type: 'view',
-      name: null,
-      route: '/lin-cms-ui/icon',
-      filePath: 'plugins/LinCmsUi/views/icon/Icon.vue',
-      inNav: true,
-      icon: 'iconfont icon-jiemiansheji',
-      right: null,
-    },
-    {
-      title: 'Switch 开关',
-      type: 'view',
+      title: 'Basic',
+      type: 'folder',
       name: null,
-      route: '/lin-cms-ui/switch',
-      filePath: 'plugins/LinCmsUi/views/switch/Switch.vue',
+      route: '/lin-cms-ui/basic/',
+      filePath: 'plugins/LinCmsUi/views/basic/',
       inNav: true,
       icon: 'iconfont icon-jiemiansheji',
       right: null,
+      children: [
+        {
+          title: 'Button 按钮',
+          type: 'view',
+          name: 'LinCmsUiButton',
+          route: '/lin-cms-ui/basic/button',
+          filePath: 'plugins/LinCmsUi/views/basic/button/Button.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+        {
+          title: 'Link 文字链接',
+          type: 'view',
+          name: 'LinCmsUiButton',
+          route: '/lin-cms-ui/basic/link',
+          filePath: 'plugins/LinCmsUi/views/basic/link/Link.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+        {
+          title: 'Icon 图标',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/basic/icon',
+          filePath: 'plugins/LinCmsUi/views/basic/icon/Icon.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+      ],
     },
     {
-      title: 'Rate 评分',
-      type: 'view',
+      title: 'Data',
+      type: 'folder',
       name: null,
-      route: '/lin-cms-ui/rate',
-      filePath: 'plugins/LinCmsUi/views/rate/Rate.vue',
+      route: '/lin-cms-ui/data/',
+      filePath: 'plugins/LinCmsUi/views/data/',
       inNav: true,
       icon: 'iconfont icon-jiemiansheji',
       right: null,
+      children: [
+        {
+          title: 'Pagination 分页',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/data/pagination',
+          filePath: 'plugins/LinCmsUi/views/data/pagination/Pagination.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+        {
+          title: 'Badge 标记',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/data/badge',
+          filePath: 'plugins/LinCmsUi/views/data/badge/Badge.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+        {
+          title: 'Tag 标签',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/data/tag',
+          filePath: 'plugins/LinCmsUi/views/data/tag/Tag.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+      ],
     },
     {
-      title: 'Tabs 标签页',
-      type: 'view',
+      title: 'Navigation',
+      type: 'folder',
       name: null,
-      route: '/lin-cms-ui/tab',
-      filePath: 'plugins/LinCmsUi/views/tab/Tab.vue',
+      route: '/lin-cms-ui/navigation/',
+      filePath: 'plugins/LinCmsUi/views/navigation/',
       inNav: true,
       icon: 'iconfont icon-jiemiansheji',
       right: null,
+      children: [
+        {
+          title: 'Tabs 标签页',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/navigation/tab',
+          filePath: 'plugins/LinCmsUi/views/navigation/tab/Tab.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+      ],
     },
     {
       title: 'Table 表格',
@@ -86,7 +142,6 @@ const LinCmsUiRouter = {
           filePath: 'plugins/LinCmsUi/views/table/TableCombo.vue',
           inNav: true,
           icon: 'iconfont icon-jiemiansheji',
-
         },
       ],
     },
@@ -150,47 +205,59 @@ const LinCmsUiRouter = {
           icon: 'iconfont icon-jiemiansheji',
 
         },
+        {
+          title: 'Switch 开关',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/form/switch',
+          filePath: 'plugins/LinCmsUi/views/form/switch/Switch.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
+        {
+          title: 'Rate 评分',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/form/rate',
+          filePath: 'plugins/LinCmsUi/views/form/rate/Rate.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
       ],
     },
     {
-      title: 'Link 文字链接',
-      type: 'view',
-      name: 'LinCmsUiButton',
-      route: '/lin-cms-ui/link',
-      filePath: 'plugins/LinCmsUi/views/link/Link.vue',
-      inNav: true,
-      icon: 'iconfont icon-jiemiansheji',
-      right: null,
-    },
-    {
-      title: 'Tag 标签',
-      type: 'view',
-      name: null,
-      route: '/lin-cms-ui/tag',
-      filePath: 'plugins/LinCmsUi/views/tag/Tag.vue',
-      inNav: true,
-      icon: 'iconfont icon-jiemiansheji',
-      right: null,
-    },
-    {
-      title: 'Pagination 分页',
-      type: 'view',
-      name: null,
-      route: '/lin-cms-ui/pagination',
-      filePath: 'plugins/LinCmsUi/views/pagination/Pagination.vue',
-      inNav: true,
-      icon: 'iconfont icon-jiemiansheji',
-      right: null,
-    },
-    {
-      title: 'Badge 标记',
-      type: 'view',
+      title: 'Notice 通知 ',
+      type: 'folder',
       name: null,
-      route: '/lin-cms-ui/badge',
-      filePath: 'plugins/LinCmsUi/views/badge/Badge.vue',
+      route: '/lin-cms-ui/notice/base',
+      filePath: 'plugins/LinCmsUi/views/notice/',
       inNav: true,
       icon: 'iconfont icon-jiemiansheji',
       right: null,
+      children: [
+        {
+          title: 'Alert 警告',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/notice/alert',
+          filePath: 'plugins/LinCmsUi/views/notice/Alert.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+
+        },
+        {
+          title: 'Message 消息提示',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/notice/message',
+          filePath: 'plugins/LinCmsUi/views/notice/Message.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+
+        },
+      ],
     },
   ],
 }
diff --git a/src/plugins/LinCmsUi/views/button/Button.vue b/src/plugins/LinCmsUi/views/basic/button/Button.vue
similarity index 99%
rename from src/plugins/LinCmsUi/views/button/Button.vue
rename to src/plugins/LinCmsUi/views/basic/button/Button.vue
index 5a261f21..0ed07c16 100644
--- a/src/plugins/LinCmsUi/views/button/Button.vue
+++ b/src/plugins/LinCmsUi/views/basic/button/Button.vue
@@ -264,5 +264,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/style/container.scss'
+@import '../../../assets/style/container'
 </style>
diff --git a/src/plugins/LinCmsUi/views/icon/Icon.vue b/src/plugins/LinCmsUi/views/basic/icon/Icon.vue
similarity index 99%
rename from src/plugins/LinCmsUi/views/icon/Icon.vue
rename to src/plugins/LinCmsUi/views/basic/icon/Icon.vue
index 4ac5f54c..af4c856c 100644
--- a/src/plugins/LinCmsUi/views/icon/Icon.vue
+++ b/src/plugins/LinCmsUi/views/basic/icon/Icon.vue
@@ -200,5 +200,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/style/container.scss";
+@import '../../../assets/style/container'
 </style>
diff --git a/src/plugins/LinCmsUi/views/link/Link.vue b/src/plugins/LinCmsUi/views/basic/link/Link.vue
similarity index 98%
rename from src/plugins/LinCmsUi/views/link/Link.vue
rename to src/plugins/LinCmsUi/views/basic/link/Link.vue
index 19ea0870..3fc52f16 100644
--- a/src/plugins/LinCmsUi/views/link/Link.vue
+++ b/src/plugins/LinCmsUi/views/basic/link/Link.vue
@@ -124,5 +124,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/style/container.scss'
+@import '../../../assets/style/container'
 </style>
diff --git a/src/plugins/LinCmsUi/views/badge/Badge.vue b/src/plugins/LinCmsUi/views/data/badge/Badge.vue
similarity index 99%
rename from src/plugins/LinCmsUi/views/badge/Badge.vue
rename to src/plugins/LinCmsUi/views/data/badge/Badge.vue
index 369414fd..39db2f50 100644
--- a/src/plugins/LinCmsUi/views/badge/Badge.vue
+++ b/src/plugins/LinCmsUi/views/data/badge/Badge.vue
@@ -178,7 +178,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/style/container.scss';
+@import '../../../assets/style/container.scss';
 .item {
   margin-right: 40px;
 }
diff --git a/src/plugins/LinCmsUi/views/pagination/Pagination.vue b/src/plugins/LinCmsUi/views/data/pagination/Pagination.vue
similarity index 99%
rename from src/plugins/LinCmsUi/views/pagination/Pagination.vue
rename to src/plugins/LinCmsUi/views/data/pagination/Pagination.vue
index 9a18e6ed..e29f62ca 100644
--- a/src/plugins/LinCmsUi/views/pagination/Pagination.vue
+++ b/src/plugins/LinCmsUi/views/data/pagination/Pagination.vue
@@ -329,7 +329,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/style/container.scss';
+@import '../../../assets/style/container.scss';
 .el-pagination {
   margin-top:10px;
 }
diff --git a/src/plugins/LinCmsUi/views/tag/Tag.vue b/src/plugins/LinCmsUi/views/data/tag/Tag.vue
similarity index 99%
rename from src/plugins/LinCmsUi/views/tag/Tag.vue
rename to src/plugins/LinCmsUi/views/data/tag/Tag.vue
index a1b5383c..ab62b86b 100644
--- a/src/plugins/LinCmsUi/views/tag/Tag.vue
+++ b/src/plugins/LinCmsUi/views/data/tag/Tag.vue
@@ -270,7 +270,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/style/container.scss';
+@import '../../../assets/style/container.scss';
 .el-tag + .el-tag {
   margin-left: 10px;
 }
diff --git a/src/plugins/LinCmsUi/views/rate/Rate.vue b/src/plugins/LinCmsUi/views/form/rate/Rate.vue
similarity index 98%
rename from src/plugins/LinCmsUi/views/rate/Rate.vue
rename to src/plugins/LinCmsUi/views/form/rate/Rate.vue
index daf4e2f7..5d803dce 100644
--- a/src/plugins/LinCmsUi/views/rate/Rate.vue
+++ b/src/plugins/LinCmsUi/views/form/rate/Rate.vue
@@ -104,7 +104,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/style/container.scss';
+@import '../../../assets/style/container.scss';
 
 .block {
   padding: 30px 0;
diff --git a/src/plugins/LinCmsUi/views/switch/Switch.vue b/src/plugins/LinCmsUi/views/form/switch/Switch.vue
similarity index 98%
rename from src/plugins/LinCmsUi/views/switch/Switch.vue
rename to src/plugins/LinCmsUi/views/form/switch/Switch.vue
index d7572d05..9ad8ed5a 100644
--- a/src/plugins/LinCmsUi/views/switch/Switch.vue
+++ b/src/plugins/LinCmsUi/views/form/switch/Switch.vue
@@ -131,5 +131,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/style/container.scss'
+@import '../../../assets/style/container.scss'
 </style>
diff --git a/src/plugins/LinCmsUi/views/tab/Tab.vue b/src/plugins/LinCmsUi/views/navigation/tab/Tab.vue
similarity index 99%
rename from src/plugins/LinCmsUi/views/tab/Tab.vue
rename to src/plugins/LinCmsUi/views/navigation/tab/Tab.vue
index 20573eda..44d0ffcd 100644
--- a/src/plugins/LinCmsUi/views/tab/Tab.vue
+++ b/src/plugins/LinCmsUi/views/navigation/tab/Tab.vue
@@ -177,5 +177,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/style/container.scss";
+@import "../../../assets/style/container.scss";
 </style>
diff --git a/src/plugins/LinCmsUi/views/notice/Alert.vue b/src/plugins/LinCmsUi/views/notice/Alert.vue
new file mode 100644
index 00000000..7290d936
--- /dev/null
+++ b/src/plugins/LinCmsUi/views/notice/Alert.vue
@@ -0,0 +1,434 @@
+<template>
+  <div class="lin-container">
+    <div class="lin-title">Alert 警告</div>
+    <div class="lin-wrap-ui">
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>基础用法</span>
+        </div>
+        <el-row>
+          <div>
+            <el-alert
+              title="成功提示的文案"
+              type="success">
+            </el-alert>
+            <el-alert
+              title="消息提示的文案"
+              type="info">
+            </el-alert>
+            <el-alert
+              title="警告提示的文案"
+              type="warning">
+            </el-alert>
+            <el-alert
+              title="错误提示的文案"
+              type="error">
+            </el-alert>
+          </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{base}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+       <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>主题</span>
+        </div>
+        <el-row>
+        <div>
+           <template>
+            <el-alert
+              title="成功提示的文案"
+              type="success"
+              effect="dark">
+            </el-alert>
+            <el-alert
+              title="消息提示的文案"
+              type="info"
+              effect="dark">
+            </el-alert>
+            <el-alert
+              title="警告提示的文案"
+              type="warning"
+              effect="dark">
+            </el-alert>
+            <el-alert
+              title="错误提示的文案"
+              type="error"
+              effect="dark">
+            </el-alert>
+          </template>
+            </div>
+        </el-row>
+        <el-collapse class="test" style="color:red;">
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{effect}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>自定义关闭按钮</span>
+        </div>
+        <el-row>
+        <div>
+          <template>
+            <el-alert
+              title="不可关闭的 alert"
+              type="success"
+              :closable="false">
+            </el-alert>
+            <el-alert
+              title="自定义 close-text"
+              type="info"
+              close-text="知道了">
+            </el-alert>
+            <el-alert
+              title="设置了回调的 alert"
+              type="warning"
+              @close="hello">
+            </el-alert>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse class="test" style="color:red;">
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{close}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>带有 icon</span>
+        </div>
+        <el-row>
+         <div>
+          <template>
+            <el-alert
+              title="成功提示的文案"
+              type="success"
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="消息提示的文案"
+              type="info"
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="警告提示的文案"
+              type="warning"
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="错误提示的文案"
+              type="error"
+              show-icon>
+            </el-alert>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{showIcon}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+       <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>文字居中</span>
+        </div>
+        <el-row>
+         <div>
+         <template>
+            <el-alert
+              title="成功提示的文案"
+              type="success"
+              center
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="消息提示的文案"
+              type="info"
+              center
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="警告提示的文案"
+              type="warning"
+              center
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="错误提示的文案"
+              type="error"
+              center
+              show-icon>
+            </el-alert>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{center}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+       <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>带有辅助性文字介绍</span>
+        </div>
+        <el-row>
+         <div>
+         <template>
+            <el-alert
+              title="带辅助性文字介绍"
+              type="success"
+              description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
+            </el-alert>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{description}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+       <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>带有 icon 和辅助性文字介绍</span>
+        </div>
+        <el-row>
+         <div>
+          <template>
+            <el-alert
+              title="成功提示的文案"
+              type="success"
+              description="文字说明文字说明文字说明文字说明文字说明文字说明"
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="消息提示的文案"
+              type="info"
+              description="文字说明文字说明文字说明文字说明文字说明文字说明"
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="警告提示的文案"
+              type="warning"
+              description="文字说明文字说明文字说明文字说明文字说明文字说明"
+              show-icon>
+            </el-alert>
+            <el-alert
+              title="错误提示的文案"
+              type="error"
+              description="文字说明文字说明文字说明文字说明文字说明文字说明"
+              show-icon>
+            </el-alert>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{descriptionAndShowIcon}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinCmsUiButton',
+  components: {},
+  data() {
+    return {
+      text: '',
+      base: `     
+        <template>
+          <el-alert
+            title="成功提示的文案"
+            type="success">
+          </el-alert>
+          <el-alert
+            title="消息提示的文案"
+            type="info">
+          </el-alert>
+          <el-alert
+            title="警告提示的文案"
+            type="warning">
+          </el-alert>
+          <el-alert
+            title="错误提示的文案"
+            type="error">
+          </el-alert>
+        </template>`,
+      effect: `
+        <template>
+          <el-alert
+            title="成功提示的文案"
+            type="success"
+            effect="dark">
+          </el-alert>
+          <el-alert
+            title="消息提示的文案"
+            type="info"
+            effect="dark">
+          </el-alert>
+          <el-alert
+            title="警告提示的文案"
+            type="warning"
+            effect="dark">
+          </el-alert>
+          <el-alert
+            title="错误提示的文案"
+            type="error"
+            effect="dark">
+          </el-alert>
+        </template>`,
+      /* eslint-disable */
+      close: `
+        <template>
+          <el-alert
+            title="不可关闭的 alert"
+            type="success"
+            :closable="false">
+          </el-alert>
+          <el-alert
+            title="自定义 close-text"
+            type="info"
+            close-text="知道了">
+          </el-alert>
+          <el-alert
+            title="设置了回调的 alert"
+            type="warning"
+            @close="hello">
+          </el-alert>
+        </template>
+        <script>
+          export default {
+            methods: {
+              hello() {
+                alert('Hello World!');
+              }
+            }
+          }
+        <\/script>`,
+      showIcon: `
+        <template>
+          <el-alert
+            title="成功提示的文案"
+            type="success"
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="消息提示的文案"
+            type="info"
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="警告提示的文案"
+            type="warning"
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="错误提示的文案"
+            type="error"
+            show-icon>
+          </el-alert>
+        </template>`,
+      center: `
+        <template>
+          <el-alert
+            title="成功提示的文案"
+            type="success"
+            center
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="消息提示的文案"
+            type="info"
+            center
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="警告提示的文案"
+            type="warning"
+            center
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="错误提示的文案"
+            type="error"
+            center
+            show-icon>
+          </el-alert>
+        </template>`,
+      description: `
+        <template>
+          <el-alert
+            title="带辅助性文字介绍"
+            type="success"
+            description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
+          </el-alert>
+        </template>`,
+      descriptionAndShowIcon:  `
+        <template>
+          <el-alert
+            title="成功提示的文案"
+            type="success"
+            description="文字说明文字说明文字说明文字说明文字说明文字说明"
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="消息提示的文案"
+            type="info"
+            description="文字说明文字说明文字说明文字说明文字说明文字说明"
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="警告提示的文案"
+            type="warning"
+            description="文字说明文字说明文字说明文字说明文字说明文字说明"
+            show-icon>
+          </el-alert>
+          <el-alert
+            title="错误提示的文案"
+            type="error"
+            description="文字说明文字说明文字说明文字说明文字说明文字说明"
+            show-icon>
+          </el-alert>
+        </template>`
+    }
+  },
+  // 计算属性设置
+  computed: {},
+  // 数据变更监听
+  watch: {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    hello() {
+      // eslint-disable-next-line
+      alert('Hello World!')
+    },
+    // 执行获取数据等初始化动作
+    init() {},
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/container.scss';
+.el-alert+.el-alert {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/plugins/LinCmsUi/views/notice/Message.vue b/src/plugins/LinCmsUi/views/notice/Message.vue
new file mode 100644
index 00000000..01830049
--- /dev/null
+++ b/src/plugins/LinCmsUi/views/notice/Message.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="lin-container">
+    <div class="lin-title">Message 消息提示</div>
+    <div class="lin-wrap-ui">
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>基础用法</span>
+        </div>
+        <el-row>
+          <div>
+            <template>
+              <el-button :plain="true" @click="open">打开消息提示</el-button>
+              <el-button :plain="true" @click="openVn">VNode</el-button>
+            </template>
+          </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{base}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+       <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>不同状态</span>
+        </div>
+        <el-row>
+        <div>
+          <template>
+            <el-button :plain="true" @click="open2">成功</el-button>
+            <el-button :plain="true" @click="open3">警告</el-button>
+            <el-button :plain="true" @click="open1">消息</el-button>
+            <el-button :plain="true" @click="open4">错误</el-button>
+          </template>
+          </div>
+        </el-row>
+        <el-collapse class="test" style="color:red;">
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{type}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>可关闭</span>
+        </div>
+        <el-row>
+        <div>
+          <template>
+            <el-button :plain="true" @click="open5">消息</el-button>
+            <el-button :plain="true" @click="open6">成功</el-button>
+            <el-button :plain="true" @click="open7">警告</el-button>
+            <el-button :plain="true" @click="open8">错误</el-button>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse class="test" style="color:red;">
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{showClose}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>文字居中</span>
+        </div>
+        <el-row>
+         <div>
+          <template>
+            <el-button :plain="true" @click="openCenter">文字居中</el-button>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{center}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>使用 HTML 片段</span>
+        </div>
+        <el-row>
+         <div>
+         <template>
+            <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
+          </template>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{dangerouslyUseHTMLString}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinCmsUiButton',
+  components: {},
+  data() {
+    return {
+    /* eslint-disable */
+      base: `     
+        <template>
+          <el-button :plain="true" @click="open">打开消息提示</el-button>
+          <el-button :plain="true" @click="openVn">VNode</el-button>
+        </template>
+
+        <script>
+          export default {
+            methods: {
+              open() {
+                this.$message('这是一条消息提示')
+              },
+
+              openVn() {
+                const h = this.$createElement
+                this.$message({
+                  message: h('p', null, [
+                    h('span', null, '内容可以是 '),
+                    h('i', { style: 'color: teal' }, 'VNode')
+                  ])
+                })
+              }
+            }
+          }
+        <\/script>`,
+      type: `
+      <template>
+        <el-button :plain="true" @click="open2">成功</el-button>
+        <el-button :plain="true" @click="open3">警告</el-button>
+        <el-button :plain="true" @click="open1">消息</el-button>
+        <el-button :plain="true" @click="open4">错误</el-button>
+      </template>
+
+      <script>
+        export default {
+          methods: {
+            open1() {
+              this.$message('这是一条消息提示')
+            },
+            open2() {
+              this.$message({
+                message: '恭喜你，这是一条成功消息',
+                type: 'success'
+              })
+            },
+
+            open3() {
+              this.$message({
+                message: '警告哦，这是一条警告消息',
+                type: 'warning'
+              });
+            },
+
+            open4() {
+              this.$message.error('错了哦，这是一条错误消息');
+            }
+          }
+        }
+      <\/script>`,
+      showClose: `
+        <template>
+          <el-button :plain="true" @click="open1">消息</el-button>
+          <el-button :plain="true" @click="open2">成功</el-button>
+          <el-button :plain="true" @click="open3">警告</el-button>
+          <el-button :plain="true" @click="open4">错误</el-button>
+        </template>
+
+        <script>
+          export default {
+            methods: {
+              open1() {
+                this.$message({
+                  showClose: true,
+                  message: '这是一条消息提示'
+                });
+              },
+
+              open2() {
+                this.$message({
+                  showClose: true,
+                  message: '恭喜你，这是一条成功消息',
+                  type: 'success'
+                });
+              },
+
+              open3() {
+                this.$message({
+                  showClose: true,
+                  message: '警告哦，这是一条警告消息',
+                  type: 'warning'
+                });
+              },
+
+              open4() {
+                this.$message({
+                  showClose: true,
+                  message: '错了哦，这是一条错误消息',
+                  type: 'error'
+                });
+              }
+            }
+          }
+        <\/script>`,
+      center: `
+        <template>
+          <el-button :plain="true" @click="openCenter">文字居中</el-button>
+        </template>
+
+        <script>
+          export default {
+            methods: {
+              openCenter() {
+                this.$message({
+                  message: '居中的文字',
+                  center: true
+                });
+              }
+            }
+          }
+        <\/script>
+       `,
+      dangerouslyUseHTMLString: `
+        <template>
+          <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
+        </template>
+
+        <script>
+          export default {
+            methods: {
+              openHTML() {
+                this.$message({
+                  dangerouslyUseHTMLString: true,
+                  message: '<strong>这是 <i>HTML</i> 片段</strong>'
+                });
+              }
+            }
+          }
+        <\/script>`
+    }
+  },
+  // 计算属性设置
+  computed: {},
+  // 数据变更监听
+  watch: {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    openHTML() {
+      this.$message({
+        dangerouslyUseHTMLString: true,
+        message: '<strong>这是 <i>HTML</i> 片段</strong>',
+      })
+    },
+    openCenter() {
+      this.$message({
+        message: '居中的文字',
+        center: true,
+      })
+    },
+    open() {
+      this.$message('这是一条消息提示')
+    },
+    openVn() {
+      const h = this.$createElement
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', { style: 'color: teal' }, 'VNode'),
+        ]),
+      })
+    },
+    open1() {
+      this.$message('这是一条消息提示')
+    },
+    open2() {
+      this.$message({
+        message: '恭喜你，这是一条成功消息',
+        type: 'success',
+      })
+    },
+
+    open3() {
+      this.$message({
+        message: '警告哦，这是一条警告消息',
+        type: 'warning',
+      })
+    },
+
+    open4() {
+      this.$message.error('错了哦，这是一条错误消息')
+    },
+    open5() {
+      this.$message({
+        showClose: true,
+        message: '这是一条消息提示',
+      })
+    },
+
+    open6() {
+      this.$message({
+        showClose: true,
+        message: '恭喜你，这是一条成功消息',
+        type: 'success',
+      })
+    },
+
+    open7() {
+      this.$message({
+        showClose: true,
+        message: '警告哦，这是一条警告消息',
+        type: 'warning',
+      })
+    },
+
+    open8() {
+      this.$message({
+        showClose: true,
+        message: '错了哦，这是一条错误消息',
+        type: 'error',
+      })
+    },
+    // 执行获取数据等初始化动作
+    init() {},
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/container.scss'
+</style>