diff --git a/dev/snippets/vue-html.json b/dev/snippets/vue-html.json
index b25f4342..540b0349 100644
--- a/dev/snippets/vue-html.json
+++ b/dev/snippets/vue-html.json
@@ -1,59 +1,82 @@
 {
-	// 一个新的页面
-	"d2-new-page": {
-		"prefix": "dd-new-page",
-		"body": [
-			"<template>",
-			"  <d2-container type=\"${1:full}\" class=\"page\">",
-			"    ${2:page-name}",
-			"  </d2-container>",
-			"</template>",
-			"",
-			"<script>",
-			"export default {",
+  // 一个新的页面
+  "d2-new-page": {
+    "prefix": "dd-new-page",
+    "body": [
+      "<template>",
+      "  <d2-container class=\"${1:page-name}\">",
+      "    <!--",
+      "      可选 type = full(默认) | card | ghost",
+      "      可选 better-scroll 属性",
+			"      可选 better-scroll-option 属性",
+			"      文档 http://d2admin.fairyever.com/zh/components/container.html",
+      "    -->",
+      "    <template slot=\"header\">header</template>",
+      "    <span class=\"${1:page-name}_title\">this is [ {{name}} ]</span>",
+      "    <template slot=\"footer\">footer</template>",
+      "  </d2-container>",
+      "</template>",
+      "<script>",
+      "import { mapState, mapMutations } from 'vuex'",
+      "export default {",
+      "  name: '${1:page-name}',",
       "  data () {",
-      "    return {}",
-			"  },",
-			"  computed: {",
+      "    return {",
+      "      name: '${1:page-name}'",
+      "    }",
       "  },",
-			"  methods: {",
+      "  computed: {",
+      "    ...mapState({",
+      "      // 访问用户信息",
+      "      userInfo: state => state.d2admin.userInfo",
+      "    })",
+      "  },",
+      "  methods: {",
+      "    ...mapMutations([",
+      "      // 操作公用数据",
+      "      'd2adminUtilDatabase',",
+      "      // 操作用户私有数据",
+      "      'd2adminUtilDatabaseUser'",
+      "    ])",
       "  }",
       "}",
-			"</script>",
-			"",
-			"<style lang=\"scss\" scoped>",
-			"@import '~@/assets/style/public.scss';",
-			".page {",
-			"  // Your page style here",
-			"  // Do not use empty rulesets",
-			"  // If empty, delete it",
-			"}",
-			"</style>"
-		],
-		"description": "new page"
-	},
-	// d2-container 组件 header 插槽
-	"d2-container-header": {
-		"prefix": "dd-container-header",
-		"body": [
-			"<template slot=\"header\">${1:header}</template>"
-		],
-		"description": "d2-container component header slot"
-	},
-	// d2-container 组件 footer 插槽
-	"d2-container-footer": {
-		"prefix": "dd-container-footer",
-		"body": [
-			"<template slot=\"footer\">${1:footer}</template>"
-		],
-		"description": "d2-container component footer slot"
-	},
-	// 图标组件
-	"d2-icon": {
-		"prefix": "dd-icon",
-		"body": [
-			"<d2-icon name=\"${1:github}\"/>"
-		],
-		"description": "d2-icon component"
-	}
+      "</script>",
+      "<style lang=\"scss\" scoped>",
+      "@import '~@/assets/style/public.scss';",
+			".${1:page-name} {",
+			"  .${1:page-name}_title {",
+			"    font-size: 14px;",
+			"  }",
+      "  // Your page style here",
+      "  // Do not use empty rulesets",
+      "  // If the page does not need an additional definition style, please delete",
+      "}",
+      "</style>"
+    ],
+    "description": "new page"
+  },
+  // d2-container 组件 header 插槽
+  "d2-container-header": {
+    "prefix": "dd-container-header",
+    "body": [
+      "<template slot=\"header\">${1:header}</template>"
+    ],
+    "description": "d2-container component header slot"
+  },
+  // d2-container 组件 footer 插槽
+  "d2-container-footer": {
+    "prefix": "dd-container-footer",
+    "body": [
+      "<template slot=\"footer\">${1:footer}</template>"
+    ],
+    "description": "d2-container component footer slot"
+  },
+  // 图标组件
+  "d2-icon": {
+    "prefix": "dd-icon",
+    "body": [
+      "<d2-icon name=\"${1:github}\"/>"
+    ],
+    "description": "d2-icon component"
+  }
 }
diff --git a/dev/snippets/vue.json b/dev/snippets/vue.json
index b25f4342..540b0349 100644
--- a/dev/snippets/vue.json
+++ b/dev/snippets/vue.json
@@ -1,59 +1,82 @@
 {
-	// 一个新的页面
-	"d2-new-page": {
-		"prefix": "dd-new-page",
-		"body": [
-			"<template>",
-			"  <d2-container type=\"${1:full}\" class=\"page\">",
-			"    ${2:page-name}",
-			"  </d2-container>",
-			"</template>",
-			"",
-			"<script>",
-			"export default {",
+  // 一个新的页面
+  "d2-new-page": {
+    "prefix": "dd-new-page",
+    "body": [
+      "<template>",
+      "  <d2-container class=\"${1:page-name}\">",
+      "    <!--",
+      "      可选 type = full(默认) | card | ghost",
+      "      可选 better-scroll 属性",
+			"      可选 better-scroll-option 属性",
+			"      文档 http://d2admin.fairyever.com/zh/components/container.html",
+      "    -->",
+      "    <template slot=\"header\">header</template>",
+      "    <span class=\"${1:page-name}_title\">this is [ {{name}} ]</span>",
+      "    <template slot=\"footer\">footer</template>",
+      "  </d2-container>",
+      "</template>",
+      "<script>",
+      "import { mapState, mapMutations } from 'vuex'",
+      "export default {",
+      "  name: '${1:page-name}',",
       "  data () {",
-      "    return {}",
-			"  },",
-			"  computed: {",
+      "    return {",
+      "      name: '${1:page-name}'",
+      "    }",
       "  },",
-			"  methods: {",
+      "  computed: {",
+      "    ...mapState({",
+      "      // 访问用户信息",
+      "      userInfo: state => state.d2admin.userInfo",
+      "    })",
+      "  },",
+      "  methods: {",
+      "    ...mapMutations([",
+      "      // 操作公用数据",
+      "      'd2adminUtilDatabase',",
+      "      // 操作用户私有数据",
+      "      'd2adminUtilDatabaseUser'",
+      "    ])",
       "  }",
       "}",
-			"</script>",
-			"",
-			"<style lang=\"scss\" scoped>",
-			"@import '~@/assets/style/public.scss';",
-			".page {",
-			"  // Your page style here",
-			"  // Do not use empty rulesets",
-			"  // If empty, delete it",
-			"}",
-			"</style>"
-		],
-		"description": "new page"
-	},
-	// d2-container 组件 header 插槽
-	"d2-container-header": {
-		"prefix": "dd-container-header",
-		"body": [
-			"<template slot=\"header\">${1:header}</template>"
-		],
-		"description": "d2-container component header slot"
-	},
-	// d2-container 组件 footer 插槽
-	"d2-container-footer": {
-		"prefix": "dd-container-footer",
-		"body": [
-			"<template slot=\"footer\">${1:footer}</template>"
-		],
-		"description": "d2-container component footer slot"
-	},
-	// 图标组件
-	"d2-icon": {
-		"prefix": "dd-icon",
-		"body": [
-			"<d2-icon name=\"${1:github}\"/>"
-		],
-		"description": "d2-icon component"
-	}
+      "</script>",
+      "<style lang=\"scss\" scoped>",
+      "@import '~@/assets/style/public.scss';",
+			".${1:page-name} {",
+			"  .${1:page-name}_title {",
+			"    font-size: 14px;",
+			"  }",
+      "  // Your page style here",
+      "  // Do not use empty rulesets",
+      "  // If the page does not need an additional definition style, please delete",
+      "}",
+      "</style>"
+    ],
+    "description": "new page"
+  },
+  // d2-container 组件 header 插槽
+  "d2-container-header": {
+    "prefix": "dd-container-header",
+    "body": [
+      "<template slot=\"header\">${1:header}</template>"
+    ],
+    "description": "d2-container component header slot"
+  },
+  // d2-container 组件 footer 插槽
+  "d2-container-footer": {
+    "prefix": "dd-container-footer",
+    "body": [
+      "<template slot=\"footer\">${1:footer}</template>"
+    ],
+    "description": "d2-container component footer slot"
+  },
+  // 图标组件
+  "d2-icon": {
+    "prefix": "dd-icon",
+    "body": [
+      "<d2-icon name=\"${1:github}\"/>"
+    ],
+    "description": "d2-icon component"
+  }
 }
diff --git a/src/demo.vue b/src/demo.vue
index 441a9ac9..3dffa263 100644
--- a/src/demo.vue
+++ b/src/demo.vue
@@ -1,27 +1,47 @@
 <template>
-  <d2-container type="full" :scroll="false" class="page-name">
+  <d2-container class="demo-page">
+    <!--
+      可选 type = full(默认) | card | ghost
+      可选 better-scroll 属性
+      可选 better-scroll-option 属性
+      文档 http://d2admin.fairyever.com/zh/components/container.html
+    -->
     <template slot="header">header</template>
-    this is [ page-name ]
+    <span class="demo-page_title">this is [ {{name}} ]</span>
     <template slot="footer">footer</template>
   </d2-container>
 </template>
-
 <script>
+import { mapState, mapMutations } from 'vuex'
 export default {
-  name: 'page-name',
+  name: 'demo-page',
   data () {
-    return {}
+    return {
+      name: 'demo-page'
+    }
   },
   computed: {
+    ...mapState({
+      // 访问用户信息
+      userInfo: state => state.d2admin.userInfo
+    })
   },
   methods: {
+    ...mapMutations([
+      // 操作公用数据
+      'd2adminUtilDatabase',
+      // 操作用户私有数据
+      'd2adminUtilDatabaseUser'
+    ])
   }
 }
 </script>
-
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
-.page-name {
+.demo-page {
+  .demo-page_title {
+    font-size: 14px;
+  }
   // Your page style here
   // Do not use empty rulesets
   // If the page does not need an additional definition style, please delete