diff --git a/package.json b/package.json
index 75e81bb0..be0edfb8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "SCUI-Admin",
-	"version": "1.1.1",
+	"version": "1.1.3",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",
diff --git a/src/assets/font/scicon/iconfont.css b/src/assets/font/scicon/iconfont.css
new file mode 100644
index 00000000..388ecc91
--- /dev/null
+++ b/src/assets/font/scicon/iconfont.css
@@ -0,0 +1,407 @@
+@font-face {
+  font-family: "scicon"; /* Project id 2583127 */
+  src: url('iconfont.woff2?t=1622514384464') format('woff2'),
+       url('iconfont.woff?t=1622514384464') format('woff'),
+       url('iconfont.ttf?t=1622514384464') format('truetype');
+}
+
+[class*="sc-icon-"] {
+  font-family: "scicon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sc-icon-layout-line:before {
+  content: "\e718";
+}
+
+.sc-icon-table-fill:before {
+  content: "\e728";
+}
+
+.sc-icon-table-line:before {
+  content: "\e729";
+}
+
+.sc-icon-code-fill:before {
+  content: "\e72b";
+}
+
+.sc-icon-bug-line:before {
+  content: "\e72c";
+}
+
+.sc-icon-bug-fill:before {
+  content: "\e72d";
+}
+
+.sc-icon-git-branch-fill:before {
+  content: "\e72e";
+}
+
+.sc-icon-git-branch-line:before {
+  content: "\e72f";
+}
+
+.sc-icon-git-pull-request-line:before {
+  content: "\e730";
+}
+
+.sc-icon-git-pull-request-fill:before {
+  content: "\e731";
+}
+
+.sc-icon-dashboard-3-fill:before {
+  content: "\e73c";
+}
+
+.sc-icon-database-fill:before {
+  content: "\e73d";
+}
+
+.sc-icon-database-2-line:before {
+  content: "\e73e";
+}
+
+.sc-icon-database-2-fill:before {
+  content: "\e73f";
+}
+
+.sc-icon-dashboard-3-line:before {
+  content: "\e740";
+}
+
+.sc-icon-database-line:before {
+  content: "\e741";
+}
+
+.sc-icon-qr-code-line:before {
+  content: "\e747";
+}
+
+.sc-icon-wifi-line:before {
+  content: "\e758";
+}
+
+.sc-icon-wifi-off-line:before {
+  content: "\e759";
+}
+
+.sc-icon-draft-fill:before {
+  content: "\e760";
+}
+
+.sc-icon-draft-line:before {
+  content: "\e761";
+}
+
+.sc-icon-file-excel-2-fill:before {
+  content: "\e769";
+}
+
+.sc-icon-file-list-fill:before {
+  content: "\e76e";
+}
+
+.sc-icon-file-list-line:before {
+  content: "\e76f";
+}
+
+.sc-icon-file-ppt-2-fill:before {
+  content: "\e772";
+}
+
+.sc-icon-file-word-2-fill:before {
+  content: "\e779";
+}
+
+.sc-icon-android-fill:before {
+  content: "\e7c7";
+}
+
+.sc-icon-apple-fill:before {
+  content: "\e7c8";
+}
+
+.sc-icon-qq-fill:before {
+  content: "\e7d9";
+}
+
+.sc-icon-vuejs-fill:before {
+  content: "\e7e2";
+}
+
+.sc-icon-wechat-fill:before {
+  content: "\e7e3";
+}
+
+.sc-icon-windows-fill:before {
+  content: "\e7e4";
+}
+
+.sc-icon-map-pin-line:before {
+  content: "\e7ef";
+}
+
+.sc-icon-map-pin-fill:before {
+  content: "\e7f0";
+}
+
+.sc-icon-map-pin-add-line:before {
+  content: "\e7f1";
+}
+
+.sc-icon-road-map-fill:before {
+  content: "\e7f3";
+}
+
+.sc-icon-rocket-2-fill:before {
+  content: "\e7f4";
+}
+
+.sc-icon-rocket-2-line:before {
+  content: "\e7f5";
+}
+
+.sc-icon-road-map-line:before {
+  content: "\e7f6";
+}
+
+.sc-icon-image-add-line:before {
+  content: "\e806";
+}
+
+.sc-icon-image-fill:before {
+  content: "\e807";
+}
+
+.sc-icon-image-edit-line:before {
+  content: "\e808";
+}
+
+.sc-icon-image-line:before {
+  content: "\e809";
+}
+
+.sc-icon-notification-fill:before {
+  content: "\e80c";
+}
+
+.sc-icon-notification-line:before {
+  content: "\e80d";
+}
+
+.sc-icon-vidicon-fill:before {
+  content: "\e823";
+}
+
+.sc-icon-vidicon-line:before {
+  content: "\e824";
+}
+
+.sc-icon-t-shirt-line:before {
+  content: "\e836";
+}
+
+.sc-icon-t-shirt-fill:before {
+  content: "\e837";
+}
+
+.sc-icon-apps-fill:before {
+  content: "\e83c";
+}
+
+.sc-icon-apps-line:before {
+  content: "\e83d";
+}
+
+.sc-icon-delete-bin-6-line:before {
+  content: "\e84f";
+}
+
+.sc-icon-delete-bin-6-fill:before {
+  content: "\e850";
+}
+
+.sc-icon-filter-line:before {
+  content: "\e858";
+}
+
+.sc-icon-filter-fill:before {
+  content: "\e859";
+}
+
+.sc-icon-filter-off-fill:before {
+  content: "\e85a";
+}
+
+.sc-icon-filter-off-line:before {
+  content: "\e85b";
+}
+
+.sc-icon-forbid-fill:before {
+  content: "\e85c";
+}
+
+.sc-icon-forbid-line:before {
+  content: "\e85d";
+}
+
+.sc-icon-indeterminate-circle-fill:before {
+  content: "\e85e";
+}
+
+.sc-icon-indeterminate-circle-line:before {
+  content: "\e85f";
+}
+
+.sc-icon-information-fill:before {
+  content: "\e860";
+}
+
+.sc-icon-information-line:before {
+  content: "\e861";
+}
+
+.sc-icon-shield-check-fill:before {
+  content: "\e875";
+}
+
+.sc-icon-shield-check-line:before {
+  content: "\e876";
+}
+
+.sc-icon-shield-flash-fill:before {
+  content: "\e877";
+}
+
+.sc-icon-shield-flash-line:before {
+  content: "\e878";
+}
+
+.sc-icon-shield-keyhole-fill:before {
+  content: "\e879";
+}
+
+.sc-icon-shield-keyhole-line:before {
+  content: "\e87a";
+}
+
+.sc-icon-shield-user-fill:before {
+  content: "\e87b";
+}
+
+.sc-icon-shield-user-line:before {
+  content: "\e87c";
+}
+
+.sc-icon-contacts-fill:before {
+  content: "\e880";
+}
+
+.sc-icon-contacts-line:before {
+  content: "\e881";
+}
+
+.sc-icon-group-fill:before {
+  content: "\e883";
+}
+
+.sc-icon-group-line:before {
+  content: "\e884";
+}
+
+.sc-icon-user-fill:before {
+  content: "\e88b";
+}
+
+.sc-icon-user-line:before {
+  content: "\e88c";
+}
+
+.sc-icon-user-search-fill:before {
+  content: "\e88e";
+}
+
+.sc-icon-user-search-line:before {
+  content: "\e88f";
+}
+
+.sc-icon-user-settings-line:before {
+  content: "\e890";
+}
+
+.sc-icon-user-star-line:before {
+  content: "\e891";
+}
+
+.sc-icon-building-fill:before {
+  content: "\e6b1";
+}
+
+.sc-icon-building-line:before {
+  content: "\e6b2";
+}
+
+.sc-icon-home-3-line:before {
+  content: "\e6b3";
+}
+
+.sc-icon-home-3-fill:before {
+  content: "\e6b4";
+}
+
+.sc-icon-chat-check-fill:before {
+  content: "\e6f2";
+}
+
+.sc-icon-chat-check-line:before {
+  content: "\e6f3";
+}
+
+.sc-icon-chat-smile-line:before {
+  content: "\e6f9";
+}
+
+.sc-icon-chat-smile-fill:before {
+  content: "\e6fa";
+}
+
+.sc-icon-feedback-fill:before {
+  content: "\e6fb";
+}
+
+.sc-icon-message-3-fill:before {
+  content: "\e6fc";
+}
+
+.sc-icon-message-2-fill:before {
+  content: "\e6fd";
+}
+
+.sc-icon-message-2-line:before {
+  content: "\e6fe";
+}
+
+.sc-icon-message-3-line:before {
+  content: "\e6ff";
+}
+
+.sc-icon-feedback-line:before {
+  content: "\e700";
+}
+
+.sc-icon-edit-box-fill:before {
+  content: "\e70b";
+}
+
+.sc-icon-edit-box-line:before {
+  content: "\e70c";
+}
+
+.sc-icon-layout-fill:before {
+  content: "\e715";
+}
+
diff --git a/src/assets/font/scicon/iconfont.json b/src/assets/font/scicon/iconfont.json
new file mode 100644
index 00000000..9cec43a1
--- /dev/null
+++ b/src/assets/font/scicon/iconfont.json
@@ -0,0 +1,695 @@
+{
+  "id": "2583127",
+  "name": "SCUI",
+  "font_family": "scicon",
+  "css_prefix_text": "sc-icon-",
+  "description": "SCUI",
+  "glyphs": [
+    {
+      "icon_id": "17103084",
+      "name": "layout-line",
+      "font_class": "layout-line",
+      "unicode": "e718",
+      "unicode_decimal": 59160
+    },
+    {
+      "icon_id": "17103145",
+      "name": "table-fill",
+      "font_class": "table-fill",
+      "unicode": "e728",
+      "unicode_decimal": 59176
+    },
+    {
+      "icon_id": "17103147",
+      "name": "table-line",
+      "font_class": "table-line",
+      "unicode": "e729",
+      "unicode_decimal": 59177
+    },
+    {
+      "icon_id": "17103170",
+      "name": "code-fill",
+      "font_class": "code-fill",
+      "unicode": "e72b",
+      "unicode_decimal": 59179
+    },
+    {
+      "icon_id": "17103172",
+      "name": "bug-line",
+      "font_class": "bug-line",
+      "unicode": "e72c",
+      "unicode_decimal": 59180
+    },
+    {
+      "icon_id": "17103177",
+      "name": "bug-fill",
+      "font_class": "bug-fill",
+      "unicode": "e72d",
+      "unicode_decimal": 59181
+    },
+    {
+      "icon_id": "17103186",
+      "name": "git-branch-fill",
+      "font_class": "git-branch-fill",
+      "unicode": "e72e",
+      "unicode_decimal": 59182
+    },
+    {
+      "icon_id": "17103187",
+      "name": "git-branch-line",
+      "font_class": "git-branch-line",
+      "unicode": "e72f",
+      "unicode_decimal": 59183
+    },
+    {
+      "icon_id": "17103193",
+      "name": "git-pull-request-line",
+      "font_class": "git-pull-request-line",
+      "unicode": "e730",
+      "unicode_decimal": 59184
+    },
+    {
+      "icon_id": "17103194",
+      "name": "git-pull-request-fill",
+      "font_class": "git-pull-request-fill",
+      "unicode": "e731",
+      "unicode_decimal": 59185
+    },
+    {
+      "icon_id": "17103337",
+      "name": "dashboard-3-fill",
+      "font_class": "dashboard-3-fill",
+      "unicode": "e73c",
+      "unicode_decimal": 59196
+    },
+    {
+      "icon_id": "17103338",
+      "name": "database-fill",
+      "font_class": "database-fill",
+      "unicode": "e73d",
+      "unicode_decimal": 59197
+    },
+    {
+      "icon_id": "17103339",
+      "name": "database-2-line",
+      "font_class": "database-2-line",
+      "unicode": "e73e",
+      "unicode_decimal": 59198
+    },
+    {
+      "icon_id": "17103340",
+      "name": "database-2-fill",
+      "font_class": "database-2-fill",
+      "unicode": "e73f",
+      "unicode_decimal": 59199
+    },
+    {
+      "icon_id": "17103341",
+      "name": "dashboard-3-line",
+      "font_class": "dashboard-3-line",
+      "unicode": "e740",
+      "unicode_decimal": 59200
+    },
+    {
+      "icon_id": "17103343",
+      "name": "database-line",
+      "font_class": "database-line",
+      "unicode": "e741",
+      "unicode_decimal": 59201
+    },
+    {
+      "icon_id": "17103381",
+      "name": "qr-code-line",
+      "font_class": "qr-code-line",
+      "unicode": "e747",
+      "unicode_decimal": 59207
+    },
+    {
+      "icon_id": "17103456",
+      "name": "wifi-line",
+      "font_class": "wifi-line",
+      "unicode": "e758",
+      "unicode_decimal": 59224
+    },
+    {
+      "icon_id": "17103457",
+      "name": "wifi-off-line",
+      "font_class": "wifi-off-line",
+      "unicode": "e759",
+      "unicode_decimal": 59225
+    },
+    {
+      "icon_id": "17103500",
+      "name": "draft-fill",
+      "font_class": "draft-fill",
+      "unicode": "e760",
+      "unicode_decimal": 59232
+    },
+    {
+      "icon_id": "17103502",
+      "name": "draft-line",
+      "font_class": "draft-line",
+      "unicode": "e761",
+      "unicode_decimal": 59233
+    },
+    {
+      "icon_id": "17103526",
+      "name": "file-excel-2-fill",
+      "font_class": "file-excel-2-fill",
+      "unicode": "e769",
+      "unicode_decimal": 59241
+    },
+    {
+      "icon_id": "17103549",
+      "name": "file-list-fill",
+      "font_class": "file-list-fill",
+      "unicode": "e76e",
+      "unicode_decimal": 59246
+    },
+    {
+      "icon_id": "17103551",
+      "name": "file-list-line",
+      "font_class": "file-list-line",
+      "unicode": "e76f",
+      "unicode_decimal": 59247
+    },
+    {
+      "icon_id": "17103561",
+      "name": "file-ppt-2-fill",
+      "font_class": "file-ppt-2-fill",
+      "unicode": "e772",
+      "unicode_decimal": 59250
+    },
+    {
+      "icon_id": "17103587",
+      "name": "file-word-2-fill",
+      "font_class": "file-word-2-fill",
+      "unicode": "e779",
+      "unicode_decimal": 59257
+    },
+    {
+      "icon_id": "17104191",
+      "name": "android-fill",
+      "font_class": "android-fill",
+      "unicode": "e7c7",
+      "unicode_decimal": 59335
+    },
+    {
+      "icon_id": "17104192",
+      "name": "apple-fill",
+      "font_class": "apple-fill",
+      "unicode": "e7c8",
+      "unicode_decimal": 59336
+    },
+    {
+      "icon_id": "17104302",
+      "name": "qq-fill",
+      "font_class": "qq-fill",
+      "unicode": "e7d9",
+      "unicode_decimal": 59353
+    },
+    {
+      "icon_id": "17104345",
+      "name": "vuejs-fill",
+      "font_class": "vuejs-fill",
+      "unicode": "e7e2",
+      "unicode_decimal": 59362
+    },
+    {
+      "icon_id": "17104362",
+      "name": "wechat-fill",
+      "font_class": "wechat-fill",
+      "unicode": "e7e3",
+      "unicode_decimal": 59363
+    },
+    {
+      "icon_id": "17104369",
+      "name": "windows-fill",
+      "font_class": "windows-fill",
+      "unicode": "e7e4",
+      "unicode_decimal": 59364
+    },
+    {
+      "icon_id": "17104471",
+      "name": "map-pin-line",
+      "font_class": "map-pin-line",
+      "unicode": "e7ef",
+      "unicode_decimal": 59375
+    },
+    {
+      "icon_id": "17104473",
+      "name": "map-pin-fill",
+      "font_class": "map-pin-fill",
+      "unicode": "e7f0",
+      "unicode_decimal": 59376
+    },
+    {
+      "icon_id": "17104481",
+      "name": "map-pin-add-line",
+      "font_class": "map-pin-add-line",
+      "unicode": "e7f1",
+      "unicode_decimal": 59377
+    },
+    {
+      "icon_id": "17104505",
+      "name": "road-map-fill",
+      "font_class": "road-map-fill",
+      "unicode": "e7f3",
+      "unicode_decimal": 59379
+    },
+    {
+      "icon_id": "17104509",
+      "name": "rocket-2-fill",
+      "font_class": "rocket-2-fill",
+      "unicode": "e7f4",
+      "unicode_decimal": 59380
+    },
+    {
+      "icon_id": "17104511",
+      "name": "rocket-2-line",
+      "font_class": "rocket-2-line",
+      "unicode": "e7f5",
+      "unicode_decimal": 59381
+    },
+    {
+      "icon_id": "17104513",
+      "name": "road-map-line",
+      "font_class": "road-map-line",
+      "unicode": "e7f6",
+      "unicode_decimal": 59382
+    },
+    {
+      "icon_id": "17104624",
+      "name": "image-add-line",
+      "font_class": "image-add-line",
+      "unicode": "e806",
+      "unicode_decimal": 59398
+    },
+    {
+      "icon_id": "17104625",
+      "name": "image-fill",
+      "font_class": "image-fill",
+      "unicode": "e807",
+      "unicode_decimal": 59399
+    },
+    {
+      "icon_id": "17104626",
+      "name": "image-edit-line",
+      "font_class": "image-edit-line",
+      "unicode": "e808",
+      "unicode_decimal": 59400
+    },
+    {
+      "icon_id": "17104627",
+      "name": "image-line",
+      "font_class": "image-line",
+      "unicode": "e809",
+      "unicode_decimal": 59401
+    },
+    {
+      "icon_id": "17104655",
+      "name": "notification-fill",
+      "font_class": "notification-fill",
+      "unicode": "e80c",
+      "unicode_decimal": 59404
+    },
+    {
+      "icon_id": "17104658",
+      "name": "notification-line",
+      "font_class": "notification-line",
+      "unicode": "e80d",
+      "unicode_decimal": 59405
+    },
+    {
+      "icon_id": "17104750",
+      "name": "vidicon-fill",
+      "font_class": "vidicon-fill",
+      "unicode": "e823",
+      "unicode_decimal": 59427
+    },
+    {
+      "icon_id": "17104751",
+      "name": "vidicon-line",
+      "font_class": "vidicon-line",
+      "unicode": "e824",
+      "unicode_decimal": 59428
+    },
+    {
+      "icon_id": "17104846",
+      "name": "t-shirt-line",
+      "font_class": "t-shirt-line",
+      "unicode": "e836",
+      "unicode_decimal": 59446
+    },
+    {
+      "icon_id": "17104847",
+      "name": "t-shirt-fill",
+      "font_class": "t-shirt-fill",
+      "unicode": "e837",
+      "unicode_decimal": 59447
+    },
+    {
+      "icon_id": "17104895",
+      "name": "apps-fill",
+      "font_class": "apps-fill",
+      "unicode": "e83c",
+      "unicode_decimal": 59452
+    },
+    {
+      "icon_id": "17104902",
+      "name": "apps-line",
+      "font_class": "apps-line",
+      "unicode": "e83d",
+      "unicode_decimal": 59453
+    },
+    {
+      "icon_id": "17104978",
+      "name": "delete-bin-6-line",
+      "font_class": "delete-bin-6-line",
+      "unicode": "e84f",
+      "unicode_decimal": 59471
+    },
+    {
+      "icon_id": "17104979",
+      "name": "delete-bin-6-fill",
+      "font_class": "delete-bin-6-fill",
+      "unicode": "e850",
+      "unicode_decimal": 59472
+    },
+    {
+      "icon_id": "17105012",
+      "name": "filter-line",
+      "font_class": "filter-line",
+      "unicode": "e858",
+      "unicode_decimal": 59480
+    },
+    {
+      "icon_id": "17105014",
+      "name": "filter-fill",
+      "font_class": "filter-fill",
+      "unicode": "e859",
+      "unicode_decimal": 59481
+    },
+    {
+      "icon_id": "17105015",
+      "name": "filter-off-fill",
+      "font_class": "filter-off-fill",
+      "unicode": "e85a",
+      "unicode_decimal": 59482
+    },
+    {
+      "icon_id": "17105016",
+      "name": "filter-off-line",
+      "font_class": "filter-off-line",
+      "unicode": "e85b",
+      "unicode_decimal": 59483
+    },
+    {
+      "icon_id": "17105020",
+      "name": "forbid-fill",
+      "font_class": "forbid-fill",
+      "unicode": "e85c",
+      "unicode_decimal": 59484
+    },
+    {
+      "icon_id": "17105022",
+      "name": "forbid-line",
+      "font_class": "forbid-line",
+      "unicode": "e85d",
+      "unicode_decimal": 59485
+    },
+    {
+      "icon_id": "17105026",
+      "name": "indeterminate-circle-fill",
+      "font_class": "indeterminate-circle-fill",
+      "unicode": "e85e",
+      "unicode_decimal": 59486
+    },
+    {
+      "icon_id": "17105027",
+      "name": "indeterminate-circle-line",
+      "font_class": "indeterminate-circle-line",
+      "unicode": "e85f",
+      "unicode_decimal": 59487
+    },
+    {
+      "icon_id": "17105028",
+      "name": "information-fill",
+      "font_class": "information-fill",
+      "unicode": "e860",
+      "unicode_decimal": 59488
+    },
+    {
+      "icon_id": "17105044",
+      "name": "information-line",
+      "font_class": "information-line",
+      "unicode": "e861",
+      "unicode_decimal": 59489
+    },
+    {
+      "icon_id": "17105120",
+      "name": "shield-check-fill",
+      "font_class": "shield-check-fill",
+      "unicode": "e875",
+      "unicode_decimal": 59509
+    },
+    {
+      "icon_id": "17105121",
+      "name": "shield-check-line",
+      "font_class": "shield-check-line",
+      "unicode": "e876",
+      "unicode_decimal": 59510
+    },
+    {
+      "icon_id": "17105125",
+      "name": "shield-flash-fill",
+      "font_class": "shield-flash-fill",
+      "unicode": "e877",
+      "unicode_decimal": 59511
+    },
+    {
+      "icon_id": "17105126",
+      "name": "shield-flash-line",
+      "font_class": "shield-flash-line",
+      "unicode": "e878",
+      "unicode_decimal": 59512
+    },
+    {
+      "icon_id": "17105127",
+      "name": "shield-keyhole-fill",
+      "font_class": "shield-keyhole-fill",
+      "unicode": "e879",
+      "unicode_decimal": 59513
+    },
+    {
+      "icon_id": "17105128",
+      "name": "shield-keyhole-line",
+      "font_class": "shield-keyhole-line",
+      "unicode": "e87a",
+      "unicode_decimal": 59514
+    },
+    {
+      "icon_id": "17105132",
+      "name": "shield-user-fill",
+      "font_class": "shield-user-fill",
+      "unicode": "e87b",
+      "unicode_decimal": 59515
+    },
+    {
+      "icon_id": "17105134",
+      "name": "shield-user-line",
+      "font_class": "shield-user-line",
+      "unicode": "e87c",
+      "unicode_decimal": 59516
+    },
+    {
+      "icon_id": "17105220",
+      "name": "contacts-fill",
+      "font_class": "contacts-fill",
+      "unicode": "e880",
+      "unicode_decimal": 59520
+    },
+    {
+      "icon_id": "17105222",
+      "name": "contacts-line",
+      "font_class": "contacts-line",
+      "unicode": "e881",
+      "unicode_decimal": 59521
+    },
+    {
+      "icon_id": "17105246",
+      "name": "group-fill",
+      "font_class": "group-fill",
+      "unicode": "e883",
+      "unicode_decimal": 59523
+    },
+    {
+      "icon_id": "17105252",
+      "name": "group-line",
+      "font_class": "group-line",
+      "unicode": "e884",
+      "unicode_decimal": 59524
+    },
+    {
+      "icon_id": "17105284",
+      "name": "user-fill",
+      "font_class": "user-fill",
+      "unicode": "e88b",
+      "unicode_decimal": 59531
+    },
+    {
+      "icon_id": "17105291",
+      "name": "user-line",
+      "font_class": "user-line",
+      "unicode": "e88c",
+      "unicode_decimal": 59532
+    },
+    {
+      "icon_id": "17105298",
+      "name": "user-search-fill",
+      "font_class": "user-search-fill",
+      "unicode": "e88e",
+      "unicode_decimal": 59534
+    },
+    {
+      "icon_id": "17105299",
+      "name": "user-search-line",
+      "font_class": "user-search-line",
+      "unicode": "e88f",
+      "unicode_decimal": 59535
+    },
+    {
+      "icon_id": "17105302",
+      "name": "user-settings-line",
+      "font_class": "user-settings-line",
+      "unicode": "e890",
+      "unicode_decimal": 59536
+    },
+    {
+      "icon_id": "17105309",
+      "name": "user-star-line",
+      "font_class": "user-star-line",
+      "unicode": "e891",
+      "unicode_decimal": 59537
+    },
+    {
+      "icon_id": "17102554",
+      "name": "building-fill",
+      "font_class": "building-fill",
+      "unicode": "e6b1",
+      "unicode_decimal": 59057
+    },
+    {
+      "icon_id": "17102557",
+      "name": "building-line",
+      "font_class": "building-line",
+      "unicode": "e6b2",
+      "unicode_decimal": 59058
+    },
+    {
+      "icon_id": "17102563",
+      "name": "home-3-line",
+      "font_class": "home-3-line",
+      "unicode": "e6b3",
+      "unicode_decimal": 59059
+    },
+    {
+      "icon_id": "17102566",
+      "name": "home-3-fill",
+      "font_class": "home-3-fill",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "17102918",
+      "name": "chat-check-fill",
+      "font_class": "chat-check-fill",
+      "unicode": "e6f2",
+      "unicode_decimal": 59122
+    },
+    {
+      "icon_id": "17102919",
+      "name": "chat-check-line",
+      "font_class": "chat-check-line",
+      "unicode": "e6f3",
+      "unicode_decimal": 59123
+    },
+    {
+      "icon_id": "17102944",
+      "name": "chat-smile-line",
+      "font_class": "chat-smile-line",
+      "unicode": "e6f9",
+      "unicode_decimal": 59129
+    },
+    {
+      "icon_id": "17102945",
+      "name": "chat-smile-fill",
+      "font_class": "chat-smile-fill",
+      "unicode": "e6fa",
+      "unicode_decimal": 59130
+    },
+    {
+      "icon_id": "17102954",
+      "name": "feedback-fill",
+      "font_class": "feedback-fill",
+      "unicode": "e6fb",
+      "unicode_decimal": 59131
+    },
+    {
+      "icon_id": "17102955",
+      "name": "message-3-fill",
+      "font_class": "message-3-fill",
+      "unicode": "e6fc",
+      "unicode_decimal": 59132
+    },
+    {
+      "icon_id": "17102956",
+      "name": "message-2-fill",
+      "font_class": "message-2-fill",
+      "unicode": "e6fd",
+      "unicode_decimal": 59133
+    },
+    {
+      "icon_id": "17102958",
+      "name": "message-2-line",
+      "font_class": "message-2-line",
+      "unicode": "e6fe",
+      "unicode_decimal": 59134
+    },
+    {
+      "icon_id": "17102959",
+      "name": "message-3-line",
+      "font_class": "message-3-line",
+      "unicode": "e6ff",
+      "unicode_decimal": 59135
+    },
+    {
+      "icon_id": "17102961",
+      "name": "feedback-line",
+      "font_class": "feedback-line",
+      "unicode": "e700",
+      "unicode_decimal": 59136
+    },
+    {
+      "icon_id": "17103037",
+      "name": "edit-box-fill",
+      "font_class": "edit-box-fill",
+      "unicode": "e70b",
+      "unicode_decimal": 59147
+    },
+    {
+      "icon_id": "17103038",
+      "name": "edit-box-line",
+      "font_class": "edit-box-line",
+      "unicode": "e70c",
+      "unicode_decimal": 59148
+    },
+    {
+      "icon_id": "17103077",
+      "name": "layout-fill",
+      "font_class": "layout-fill",
+      "unicode": "e715",
+      "unicode_decimal": 59157
+    }
+  ]
+}
diff --git a/src/assets/font/scicon/iconfont.ttf b/src/assets/font/scicon/iconfont.ttf
new file mode 100644
index 00000000..7030957e
Binary files /dev/null and b/src/assets/font/scicon/iconfont.ttf differ
diff --git a/src/assets/font/scicon/iconfont.woff b/src/assets/font/scicon/iconfont.woff
new file mode 100644
index 00000000..194eb47c
Binary files /dev/null and b/src/assets/font/scicon/iconfont.woff differ
diff --git a/src/assets/font/scicon/iconfont.woff2 b/src/assets/font/scicon/iconfont.woff2
new file mode 100644
index 00000000..3e51999a
Binary files /dev/null and b/src/assets/font/scicon/iconfont.woff2 differ
diff --git a/src/components/scUpload/index.vue b/src/components/scUpload/index.vue
index af27525b..9d5a5e80 100644
--- a/src/components/scUpload/index.vue
+++ b/src/components/scUpload/index.vue
@@ -4,7 +4,7 @@
 			<div class="mask">
 				<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
 			</div>
-			<el-image v-if="fileIsImg" class="image" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body></el-image>
+			<el-image v-if="fileIsImg" class="image" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body :z-index="9999"></el-image>
 			<a v-else :href="img" class="file" target="_blank"><i class="el-icon-document"></i></a>
 		</div>
 		<div v-else class="sc-upload-uploader">
diff --git a/src/components/scUpload/multiple.vue b/src/components/scUpload/multiple.vue
index 81567306..23675247 100644
--- a/src/components/scUpload/multiple.vue
+++ b/src/components/scUpload/multiple.vue
@@ -4,7 +4,7 @@
 			<ul>
 				<li v-for="(file, index) in fileList" :key="index">
 					<div v-if="file.status!='success'" class="sc-upload-item" v-loading="true" element-loading-background="rgba(0, 0, 0, 0.5)">
-						<el-image class="image" :src="file.tempImg" fit="cover"></el-image>
+						<el-image class="image" :src="file.tempImg" fit="cover" :z-index="9999"></el-image>
 					</div>
 					<div v-else class="sc-upload-item">
 						<div class="mask">
diff --git a/src/config/index.js b/src/config/index.js
index 4dc37434..a65d1220 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
 	APP_NAME: "SCUI",
 
 	//版本号
-	APP_VER: "1.1.1",
+	APP_VER: "1.1.2",
 
 	//接口地址
 	API_URL: "",
@@ -11,6 +11,12 @@ const DEFAULT_CONFIG = {
 	//MOCK接口地址
 	MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
 
+	//布局 默认：default | 通栏：header
+	LAYOUT: 'default',
+
+	//菜单是否折叠
+	MENU_IS_COLLAPSE: false,
+
 	//是否开启多标签
 	LAYOUT_TAGS: true,
 
diff --git a/src/layout/components/NavMenu.vue b/src/layout/components/NavMenu.vue
index dd91dc5c..d30e97f8 100644
--- a/src/layout/components/NavMenu.vue
+++ b/src/layout/components/NavMenu.vue
@@ -6,12 +6,14 @@
 		<el-menu-item v-if="!navMenu.children" :index="navMenu.path">
 			<a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='a'></a>
 			<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
-			<span>{{navMenu.meta.title}}</span>
+			<template #title>
+				<span>{{navMenu.meta.title}}</span>
+			</template>
 		</el-menu-item>
 		<el-submenu v-if="navMenu.children" :index="navMenu.path">
 			<template #title>
 				<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
-				<span> {{navMenu.meta.title}}</span>
+				<span>{{navMenu.meta.title}}</span>
 			</template>
 			<NavMenu :navMenus="navMenu.children"></NavMenu>
 		</el-submenu>
diff --git a/src/layout/components/head.vue b/src/layout/components/head.vue
deleted file mode 100644
index f043bcd1..00000000
--- a/src/layout/components/head.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-	<div class="adminui-header">
-		<div class="left-panel">
-			<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
-				<template v-for="(item) in breadList" v-bind:key="item" >
-					<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.meta.title}}</el-breadcrumb-item>
-				</template>
-			</el-breadcrumb>
-		</div>
-		<div class="center-panel">
-
-		</div>
-		<div class="right-panel">
-			<div class="screen panel-item hidden-sm-and-down" @click="screen">
-				<i class="el-icon-full-screen"></i>
-			</div>
-			<div class="setting panel-item hidden-sm-and-down">
-				<i class="el-icon-setting"></i>
-			</div>
-			<el-popover placement="bottom" :width="360" trigger="click">
-				<template #reference>
-					<div class="msg panel-item">
-						<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
-							<i class="el-icon-bell"></i>
-						</el-badge>
-					</div>
-				</template>
-				<div>
-					<el-empty v-if="msgList.length==0" description="暂无新消息"></el-empty>
-					<div v-else class="msgList">
-						<header>
-							<label>通知</label>
-							<el-link :underline="false" href="javascript:void(0);" @click="markRead">全部标记已读</el-link>
-						</header>
-						<ul>
-							<el-scrollbar>
-								<li v-for="item in msgList" v-bind:key="item.id">
-									<a :href="item.link" target="_blank">
-										<h2>{{item.title}}</h2>
-										<p>{{item.describe}}</p>
-									</a>
-								</li>
-							</el-scrollbar>
-						</ul>
-						<footer><el-link :underline="false" href="https://gitee.com/lolicode/scui" target="_blank">前往通知中心</el-link></footer>
-					</div>
-				</div>
-			</el-popover>
-			<el-dropdown trigger="click" @command="handleUser">
-				<div class="user panel-item">
-					<el-avatar :size="30">{{ userNameF }}</el-avatar>
-					<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
-				</div>
-				<template #dropdown>
-					<el-dropdown-menu>
-						<el-dropdown-item command="uc">个人设置</el-dropdown-item>
-						<el-dropdown-item command="cmd">CMD</el-dropdown-item>
-						<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
-					</el-dropdown-menu>
-				</template>
-			</el-dropdown>
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				breadList: [],
-				userName: "",
-				userNameF: "",
-				msgList: [
-					{
-						id: 1,
-						title: "关于版本发布的通知",
-						describe: "点进去Gitee获取最新开源版本",
-						link: "https://gitee.com/lolicode/scui"
-					},
-					{
-						id: 2,
-						title: "感谢登录SCUI Admin",
-						describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
-						link: "https://gitee.com/lolicode/scui"
-					}
-				]
-			}
-		},
-		created() {
-			var userInfo = this.$TOOL.data.get("user").userInfo;
-			this.userName = userInfo.userName;
-			this.userNameF = this.userName.substring(0,1);
-			this.getBreadcrumb();
-		},
-		watch: {
-			$route() {
-				this.getBreadcrumb();
-			}
-		},
-		methods: {
-			//个人信息
-			handleUser(command) {
-				if(command == "uc"){
-					this.$router.push({path: '/usercenter'});
-				}
-				if(command == "outLogin"){
-					this.$router.replace({path: '/login'});
-				}
-				if(command == "cmd"){
-					this.$router.push({path: '/cmd'});
-				}
-			},
-			getBreadcrumb(){
-				let matched = this.$route.matched;
-				this.breadList = matched;
-			},
-			//全屏
-			screen(){
-				var element = document.documentElement;
-				this.$TOOL.screen(element)
-			},
-			//标记已读
-			markRead(){
-				this.msgList = []
-			}
-		}
-	}
-</script>
diff --git a/src/layout/components/setting.vue b/src/layout/components/setting.vue
new file mode 100644
index 00000000..9403ec0d
--- /dev/null
+++ b/src/layout/components/setting.vue
@@ -0,0 +1,45 @@
+<template>
+	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
+		<el-alert title="以下配置可实时预览，开发者可在 config/index.js 中配置默认值，非常不建议在生产环境下开放布局设置" type="error" :closable="false"></el-alert>
+		<el-divider></el-divider>
+		<el-form-item label="框架布局">
+			<el-select v-model="layout" placeholder="请选择">
+				<el-option label="默认" value="default"></el-option>
+				<el-option label="通栏" value="header"></el-option>
+			</el-select>
+		</el-form-item>
+		<el-form-item label="折叠菜单">
+			<el-switch v-model="menuIsCollapse"></el-switch>
+		</el-form-item>
+		<el-form-item label="标签栏">
+			<el-switch v-model="layoutTags"></el-switch>
+		</el-form-item>
+		<el-divider></el-divider>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				layout: this.$store.state.global.layout,
+				menuIsCollapse: this.$store.state.global.menuIsCollapse,
+				layoutTags: this.$store.state.global.layoutTags,
+			}
+		},
+		watch: {
+			layout(val) {
+				this.$store.commit("SET_layout", val)
+			},
+			menuIsCollapse(){
+				this.$store.commit("TOGGLE_menuIsCollapse")
+			},
+			layoutTags(){
+				this.$store.commit("TOGGLE_layoutTags")
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/layout/components/side.vue b/src/layout/components/side.vue
deleted file mode 100644
index 1f3d8d55..00000000
--- a/src/layout/components/side.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-	<div class="aminui-side-split">
-		<div class="adminui-side-split-scroll">
-			<ul>
-				<li v-for="item in menu" v-bind:key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)">
-					<i :class="item.meta.icon || 'el-icon-menu'"></i>
-					<p>{{ item.meta.title }}</p>
-				</li>
-			</ul>
-		</div>
-	</div>
-
-	<div class="aminui-side">
-		<div class="adminui-side-top">
-			<h2>{{ pmenu.meta.title }}</h2>
-		</div>
-		<div class="adminui-side-scroll">
-			<el-menu :default-active="$route.fullPath" router>
-				<NavMenu :navMenus="nextMenu"></NavMenu>
-			</el-menu>
-		</div>
-	</div>
-
-</template>
-
-<script>
-	import NavMenu from './NavMenu.vue';
-
-	export default {
-		components: {
-			NavMenu
-		},
-		data() {
-			return {
-				menu: [],
-				nextMenu: [],
-				pmenu: {}
-			}
-		},
-		created: function() {
-			var menu = this.$TOOL.data.get("user").menuList;
-			var home = this.$router.options.routes[0].children[0];
-			menu.unshift(home);
-			this.menu = this.filterUrl(menu);
-			this.showThis()
-		},
-		setup() {
-
-		},
-		watch: {
-			$route() {
-				this.showThis()
-			}
-		},
-		methods: {
-			//路由监听高亮
-			showThis(){
-				var home = this.$router.options.routes[0].children[0];
-				this.pmenu = this.$route.matched[1] || home;
-				this.nextMenu = this.filterUrl(this.pmenu.children);
-			},
-			//点击显示
-			showMenu(route) {
-				this.pmenu = route;
-				this.nextMenu = this.filterUrl(route.children);
-			},
-			//转换外部链接的路由
-			filterUrl(map){
-				var newMap = []
-				map && map.forEach(item => {
-					item.meta = item.meta?item.meta:{};
-					//处理隐藏
-					if(item.meta.hidden){
-						return false
-					}
-					//处理http
-					if(item.meta.type=='iframe'){
-						item.path = `/i/${item.name}`;
-					}
-					//递归循环
-					if(item.children&&item.children.length > 0){
-						this.filterUrl(item.children);
-					}
-					newMap.push(item)
-				})
-				return newMap;
-			}
-		}
-	}
-</script>
diff --git a/src/layout/components/topbar.vue b/src/layout/components/topbar.vue
new file mode 100644
index 00000000..9a2c0f7e
--- /dev/null
+++ b/src/layout/components/topbar.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="adminui-topbar">
+		<div class="left-panel">
+			<div class="menu-collapse hidden-sm-and-down" @click="$store.commit('TOGGLE_menuIsCollapse')">
+				<i class="el-icon-s-fold"></i>
+			</div>
+			<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
+				<template v-for="(item) in breadList" v-bind:key="item" >
+					<el-breadcrumb-item v-if="item.path !='/'">{{item.meta.title}}</el-breadcrumb-item>
+				</template>
+			</el-breadcrumb>
+		</div>
+		<div class="center-panel"></div>
+		<div class="right-panel">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				breadList: []
+			}
+		},
+		created() {
+			this.getBreadcrumb();
+		},
+		watch: {
+			$route() {
+				this.getBreadcrumb();
+			}
+		},
+		methods: {
+			getBreadcrumb(){
+				let matched = this.$route.matched;
+				this.breadList = matched;
+			}
+		}
+	}
+</script>
diff --git a/src/layout/components/userbar.vue b/src/layout/components/userbar.vue
new file mode 100644
index 00000000..3d77b626
--- /dev/null
+++ b/src/layout/components/userbar.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="user-bar">
+		<div class="screen panel-item hidden-sm-and-down" @click="screen">
+			<i class="el-icon-full-screen"></i>
+		</div>
+		<el-popover placement="bottom" :width="360" trigger="click">
+			<template #reference>
+				<div class="msg panel-item">
+					<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
+						<i class="el-icon-bell"></i>
+					</el-badge>
+				</div>
+			</template>
+			<div>
+				<el-empty v-if="msgList.length==0" description="暂无新消息"></el-empty>
+				<div v-else class="msgList">
+					<header>
+						<label>通知</label>
+						<el-link :underline="false" href="javascript:void(0);" @click="markRead">全部标记已读</el-link>
+					</header>
+					<ul>
+						<el-scrollbar>
+							<li v-for="item in msgList" v-bind:key="item.id">
+								<a :href="item.link" target="_blank">
+									<h2>{{item.title}}</h2>
+									<p>{{item.describe}}</p>
+								</a>
+							</li>
+						</el-scrollbar>
+					</ul>
+					<footer><el-link :underline="false" href="https://gitee.com/lolicode/scui" target="_blank">前往通知中心</el-link></footer>
+				</div>
+			</div>
+		</el-popover>
+		<el-dropdown trigger="click" @command="handleUser" style="height: 100%;">
+			<div class="user panel-item">
+				<el-avatar :size="30">{{ userNameF }}</el-avatar>
+				<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="uc">个人设置</el-dropdown-item>
+					<el-dropdown-item command="cmd">CMD</el-dropdown-item>
+					<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+	</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				userName: "",
+				userNameF: "",
+				msgList: [
+					{
+						id: 1,
+						title: "关于版本发布的通知",
+						describe: "点进去Gitee获取最新开源版本",
+						link: "https://gitee.com/lolicode/scui"
+					},
+					{
+						id: 2,
+						title: "感谢登录SCUI Admin",
+						describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
+						link: "https://gitee.com/lolicode/scui"
+					}
+				]
+			}
+		},
+		created() {
+			var userInfo = this.$TOOL.data.get("user").userInfo;
+			this.userName = userInfo.userName;
+			this.userNameF = this.userName.substring(0,1);
+		},
+		methods: {
+			//个人信息
+			handleUser(command) {
+				if(command == "uc"){
+					this.$router.push({path: '/usercenter'});
+				}
+				if(command == "outLogin"){
+					this.$router.replace({path: '/login'});
+				}
+				if(command == "cmd"){
+					this.$router.push({path: '/cmd'});
+				}
+			},
+			//全屏
+			screen(){
+				var element = document.documentElement;
+				this.$TOOL.screen(element)
+			},
+			//标记已读
+			markRead(){
+				this.msgList = []
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.user-bar {display: flex;align-items: center;height: 100%;}
+	.user-bar .panel-item {padding: 0 10px;cursor: pointer;height: 100%;display: flex;align-items: center;}
+	.user-bar .panel-item i {font-size: 16px;}
+	.user-bar .panel-item:hover {background: rgba(0, 0, 0, 0.1);}
+	.user-bar .user {display: flex;align-items: center;}
+	.user-bar .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
+
+	.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
+	.msgList footer {height:35px;line-height: 35px;text-align:center;}
+	.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
+	.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border: 1px solid transparent;cursor:pointer;}
+	.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
+	.msgList ul li h2 i {margin-right: 10px;}
+	.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
+	.msgList ul li a:hover {background: #ecf5ff;border-top: 1px solid #d9ecff;border-bottom: 1px solid #d9ecff;}
+	.msgList ul li a:hover h2 {color: #409EFF;}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 19be62d2..25e44acb 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,44 +1,147 @@
 <template>
-	<Side v-if="!ismobile"></Side>
-	<Side-m v-if="ismobile"></Side-m>
-	<div class="aminui-body el-container">
-		<Head></Head>
-		<Tags v-if="!ismobile && $CONFIG.LAYOUT_TAGS"></Tags>
-		<div class="adminui-main" id="adminui-main">
-			<router-view></router-view>
-		</div>
-	</div>
+	<!-- 通栏布局 -->
+	<template v-if="layout=='header'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo">
+					<i class="el-icon-platform-eleme"></i>
+					<span>SCUI-Admin</span>
+				</div>
+				<ul v-if="!ismobile" class="nav">
+					<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)">
+						<i :class="item.meta.icon || 'el-icon-menu'"></i>
+						<span>{{ item.meta.title }}</span>
+					</li>
+				</ul>
+			</div>
+			<div class="adminui-header-right">
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
+				<div v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta.title }}</h2>
+				</div>
+				<div class="adminui-side-scroll">
+					<el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse">
+						<NavMenu :navMenus="nextMenu"></NavMenu>
+					</el-menu>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+				<Topbar v-if="!ismobile"></Topbar>
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view></router-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 默认布局 -->
+	<template v-else>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile" class="aminui-side-split">
+				<div class="adminui-side-split-scroll">
+					<ul>
+						<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
+							@click="showMenu(item)">
+							<i :class="item.meta.icon || 'el-icon-menu'"></i>
+							<p>{{ item.meta.title }}</p>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
+				<div v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta.title }}</h2>
+				</div>
+				<div class="adminui-side-scroll">
+					<el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse">
+						<NavMenu :navMenus="nextMenu"></NavMenu>
+					</el-menu>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+				<Topbar>
+					<userbar></userbar>
+				</Topbar>
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view></router-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<div class="layout-setting" @click="openSetting"><i class="el-icon-brush"></i></div>
+
+	<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
+		<setting></setting>
+	</el-drawer>
 </template>
 
 <script>
-	import Side from './components/side.vue';
 	import SideM from './components/sideM.vue';
-	import Head from './components/head.vue';
+	import Topbar from './components/topbar.vue';
 	import Tags from './components/tags.vue';
+	import NavMenu from './components/NavMenu.vue';
+	import userbar from './components/userbar.vue';
+	import setting from './components/setting.vue';
 
 	export default {
 		name: 'index',
 		components: {
-			Side,
 			SideM,
-			Head,
-			Tags
+			Topbar,
+			Tags,
+			NavMenu,
+			userbar,
+			setting
 		},
 		data() {
 			return {
-
+				settingDialog: false,
+				menu: [],
+				nextMenu: [],
+				pmenu: {}
 			}
 		},
 		computed:{
 			ismobile(){
 				return this.$store.state.global.ismobile
+			},
+			layout(){
+				return this.$store.state.global.layout
+			},
+			layoutTags(){
+				return this.$store.state.global.layoutTags
+			},
+			menuIsCollapse(){
+				return this.$store.state.global.menuIsCollapse
 			}
 		},
 		created() {
 			this.onLayoutResize();
 			window.addEventListener('resize', this.onLayoutResize);
+			var menu = this.$TOOL.data.get("user").menuList;
+			var home = this.$router.options.routes[0].children[0];
+			menu.unshift(home);
+			this.menu = this.filterUrl(menu);
+			this.showThis()
+		},
+		watch: {
+			$route() {
+				this.showThis()
+			}
 		},
 		methods: {
+			openSetting(){
+				this.settingDialog = true;
+			},
 			onLayoutResize(){
 				const clientWidth = document.body.clientWidth;
 				if(clientWidth < 992){
@@ -46,6 +149,38 @@
 				}else{
 					this.$store.commit("SET_ismobile", false)
 				}
+			},
+			//路由监听高亮
+			showThis(){
+				var home = this.$router.options.routes[0].children[0];
+				this.pmenu = this.$route.matched[1] || home;
+				this.nextMenu = this.filterUrl(this.pmenu.children);
+			},
+			//点击显示
+			showMenu(route) {
+				this.pmenu = route;
+				this.nextMenu = this.filterUrl(route.children);
+			},
+			//转换外部链接的路由
+			filterUrl(map){
+				var newMap = []
+				map && map.forEach(item => {
+					item.meta = item.meta?item.meta:{};
+					//处理隐藏
+					if(item.meta.hidden){
+						return false
+					}
+					//处理http
+					if(item.meta.type=='iframe'){
+						item.path = `/i/${item.name}`;
+					}
+					//递归循环
+					if(item.children&&item.children.length > 0){
+						this.filterUrl(item.children);
+					}
+					newMap.push(item)
+				})
+				return newMap;
 			}
 		}
 	}
diff --git a/src/main.js b/src/main.js
index aa0590f8..2e24f503 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,7 +26,7 @@ app.config.globalProperties.$HAS = permission;
 
 app.use(store);
 app.use(router);
-app.use(ElementPlus, {size: 'small', zIndex: 1000 ,locale: locale});
+app.use(ElementPlus, {size: 'small', locale: locale});
 
 app.component('scTable', scTable);
 app.component('scFilterBar', scFilterBar);
diff --git a/src/router/index.js b/src/router/index.js
index ad8c85eb..b7ff40b7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,7 @@ const routes = [{
 						path: "/dashboard",
 						meta: {
 							title: "控制台",
+							icon: "el-icon-menu",
 							affix: true
 						},
 						component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
@@ -33,7 +34,8 @@ const routes = [{
 						name: "userCenter",
 						path: "/usercenter",
 						meta: {
-							title: "个人信息"
+							title: "个人信息",
+							icon: "el-icon-user",
 						},
 						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
 					},
@@ -41,7 +43,8 @@ const routes = [{
 						name: "autocode",
 						path: "/autocode",
 						meta: {
-							title: "代码生成器"
+							title: "代码生成器",
+							icon: "el-icon-magic-stick",
 						},
 						component: () => import(/* webpackChunkName: "autocode" */ '@/views/autocode'),
 					}
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
index f0087030..b053d91c 100644
--- a/src/store/modules/global.js
+++ b/src/store/modules/global.js
@@ -1,10 +1,28 @@
+import config from "@/config";
+
 export default {
 	state: {
-		ismobile: false
+		//移动端布局
+		ismobile: false,
+		//布局
+		layout: config.LAYOUT,
+		//菜单是否折叠 toggle
+		menuIsCollapse: config.MENU_IS_COLLAPSE,
+		//多标签栏
+		layoutTags: config.LAYOUT_TAGS,
 	},
 	mutations: {
 		SET_ismobile(state, key){
 			state.ismobile = key
+		},
+		SET_layout(state, key){
+			state.layout = key
+		},
+		TOGGLE_menuIsCollapse(state){
+			state.menuIsCollapse = !state.menuIsCollapse
+		},
+		TOGGLE_layoutTags(state){
+			state.layoutTags = !state.layoutTags
 		}
 	}
 }
diff --git a/src/style/app.less b/src/style/app.less
index b90899fa..2a7b82fb 100644
--- a/src/style/app.less
+++ b/src/style/app.less
@@ -16,7 +16,26 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 ::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
 
 /* 大布局样式 */
-.aminui {display: flex;}
+.aminui {display: flex;flex-flow: column;}
+.aminui-wrapper {display: flex;flex:1;overflow: auto;}
+
+/*布局设置*/
+.layout-setting {position: fixed;width: 40px;height: 40px;border-radius: 3px 0 0 3px;bottom: 100px;right: 0px;z-index: 100;background: #409EFF;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
+.layout-setting i {font-size: 18px;color: #fff;}
+
+/* 头部 */
+.adminui-header {height: 60px;background: #222b45;color: #fff;display: flex;justify-content:space-between;}
+.adminui-header-left {display: flex;align-items: center;padding-left:20px;}
+.adminui-header-right {display: flex;align-items: center;}
+.adminui-header .logo {font-size: 20px;font-weight: bold;display: flex;align-items: center;}
+.adminui-header .logo i {font-size: 30px;color: #09f;margin-right: 10px;}
+.adminui-header .nav {display: flex;height: 100%;margin-left: 40px;}
+.adminui-header .nav li {padding:0 10px;margin: 0 10px 0 0;font-size: 14px;color: rgba(255, 255, 255, 0.6);list-style: none;height: 100%;display: flex;align-items: center;cursor: pointer;}
+.adminui-header .nav li i {margin-right: 5px;}
+.adminui-header .nav li:hover {color: #fff;}
+.adminui-header .nav li.active {background: rgba(255, 255, 255, 0.1);color: #fff;}
+.adminui-header .user-bar .panel-item:hover {background: rgba(255, 255, 255, 0.1)!important;}
+.adminui-header .user-bar .user label{color: #fff;}
 
 /* 左侧菜单 */
 .aminui-side-split {width:65px;flex-shrink:0;background: #333;}
@@ -32,36 +51,25 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
 .adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
 
-.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
+.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;transition:width 0.3s;}
 .adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
 .adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
 .adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
+.aminui-side.isCollapse {width: 64px;}
 
 /* 右侧内容 */
 .aminui-body {flex: 1;display: flex;flex-flow: column;}
 
-.adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
-.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
-.adminui-header .right-panel {display: flex;align-items: center;}
+.adminui-topbar {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
+.adminui-topbar .left-panel {display: flex;align-items: center;}
+.adminui-topbar .right-panel {display: flex;align-items: center;}
+
 .right-panel-search {display: flex;align-items: center;}
 .right-panel-search > * + * {margin-left:10px;}
-.adminui-header .panel-item {height:50px;line-height: 50px;padding:0 10px;cursor: pointer;}
-.adminui-header .panel-item i {font-size: 16px;}
-.adminui-header .panel-item .badge .el-badge__content {top:15px}
-.adminui-header .panel-item:hover {background: #eee;}
-.adminui-header .el-breadcrumb .el-breadcrumb__inner i {margin-right:5px;}
-.adminui-header .user {display: flex;align-items: center;}
-.adminui-header .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
 
-.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
-.msgList footer {height:35px;line-height: 35px;text-align:center;}
-.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
-.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border: 1px solid transparent;cursor:pointer;}
-.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
-.msgList ul li h2 i {margin-right: 10px;}
-.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
-.msgList ul li a:hover {background: #ecf5ff;border-top: 1px solid #d9ecff;border-bottom: 1px solid #d9ecff;}
-.msgList ul li a:hover h2 {color: #409EFF;}
+.adminui-topbar .menu-collapse {height: 50px;width: 60px;padding: 0 20px;display: flex;align-items: center;cursor: pointer;}
+.adminui-topbar .menu-collapse i {font-size: 16px;}
+.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, #d9ecff, transparent);}
 
 .adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
 .adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
diff --git a/src/style/style.less b/src/style/style.less
index bd5efd23..f48e2cc9 100644
--- a/src/style/style.less
+++ b/src/style/style.less
@@ -1,3 +1,4 @@
 @import 'app.less';
 @import 'fix.less';
-@import 'pages.less';
\ No newline at end of file
+@import 'pages.less';
+@import '~@/assets/font/scicon/iconfont.css';
\ No newline at end of file
diff --git a/src/views/home/components/C2.vue b/src/views/home/components/C2.vue
index 96385fc9..f4988d17 100644
--- a/src/views/home/components/C2.vue
+++ b/src/views/home/components/C2.vue
@@ -22,6 +22,22 @@
 		data() {
 			return {
 				activities: [
+					{
+						content: [
+							"[新增] 扩展图标"
+						],
+						timestamp: '2021-06-01'
+					},
+					{
+						content: [
+							"[新增] 布局实时演示",
+							"[优化] 抽离tinymce、echarts模块",
+							"[优化] 更换富文本编辑为tinymce",
+							"[优化] 打印工具可直接传入html",
+							"[删除] 诺干个无用的模板",
+						],
+						timestamp: '2021-05-30'
+					},
 					{
 						content: [
 							"[优化] 上传组件上传行为",
diff --git a/src/views/template/itemList.vue b/src/views/template/itemList.vue
deleted file mode 100644
index 0b569be8..00000000
--- a/src/views/template/itemList.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-	<el-container>
-		<el-header>
-			<div class="left-panel">
-
-			</div>
-			<div class="right-panel">
-				<div class="right-panel-search">
-					<el-input v-model="keyword" placeholder="请输入内容" clearable></el-input>
-					<el-button type="primary" icon="el-icon-search"></el-button>
-				</div>
-			</div>
-		</el-header>
-		<el-main class="nopadding">
-			<div class="sc-itemList">
-				<div class="sc-itemList-list">
-					<el-row :gutter="20">
-
-						<el-col :xl="6" :lg="8" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
-							<el-card shadow="hover" :body-style="{ padding: '0px' }">
-								<el-image :src="item.image" fit="cover" :preview-src-list="[item.image]"></el-image>
-								<div class="title">
-									<h2>{{item.title}}</h2>
-									<p>
-										<el-tag type="warning">免费</el-tag>
-										<el-tag v-for="tag in item.tags" :key="tag">{{tag}}</el-tag>
-									</p>
-								</div>
-							</el-card>
-						</el-col>
-
-					</el-row>
-				</div>
-				<div class="sc-itemList-page">
-					<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="20" :page-size="20" :currentPage="1" ></el-pagination>
-				</div>
-			</div>
-		</el-main>
-	</el-container>
-</template>
-
-<script>
-	export default {
-		name: 'itemList',
-		data() {
-			return {
-				keyword: "",
-				list: [
-					{
-						title: "VUE Next",
-						tags: ["跨平台", "3.0", "测试版"],
-						image: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-					},
-					{
-						title: "Element Plus",
-						tags: ["Vue3.0", "个人"],
-						image: ""
-					}
-				]
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.el-card {margin-bottom: 20px;height:310px;}
-	.el-image {width: 100%;height:200px;background: #ddd;}
-	.title {padding:20px;}
-	.title h2 {font-size: 16px;}
-	.title p {font-size: 12px;color: #999;margin-top: 15px;}
-	.title p .el-tag {margin-right:8px;}
-
-	.sc-itemList {display:flex;flex-direction:column;height:100%;}
-	.sc-itemList-list {flex:1;border-bottom: 1px solid #EBEEF5;padding:20px;overflow: auto;}
-	.sc-itemList-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
-</style>
diff --git a/src/views/template/list.vue b/src/views/template/list.vue
deleted file mode 100644
index e8d2be24..00000000
--- a/src/views/template/list.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-	<el-container>
-		<el-header>
-			<div class="left-panel">
-				<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
-				<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
-					<template #reference>
-						<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
-					</template>
-				</el-popconfirm>
-			</div>
-			<div class="right-panel">
-				<div class="right-panel-search">
-					<el-input v-model="search.name" placeholder="请输入内容" clearable></el-input>
-					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
-				</div>
-				<scFilterBar ref="scFilterBar" :options="options" @change="updata"></scFilterBar>
-			</div>
-		</el-header>
-		<el-main class="nopadding">
-			<scTable ref="table" :apiObj="apiObj" :column="column" @selection-change="selectionChange">
-				<!-- 表格列开始 -->
-				<el-table-column type="selection" width="50"></el-table-column>
-
-				<el-table-column label="序号" type="index" width="50"></el-table-column>
-
-				<el-table-column label="头像" width="60">
-					<template #default="scope">
-						<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
-					</template>
-				</el-table-column>
-
-				<el-table-column label="名称" prop="name" width="150"></el-table-column>
-
-				<el-table-column label="进度" prop="progress" width="200">
-					<template #default="scope">
-						<el-progress :percentage="scope.row.progress" status="success"></el-progress>
-					</template>
-				</el-table-column>
-
-				<el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
-
-				<el-table-column label="状态" prop="audit" width="50">
-					<template #default="scope">
-						<el-tag>{{scope.row.audit}}</el-tag>
-					</template>
-				</el-table-column>
-
-				<el-table-column label="加入时间" prop="date" width="170"></el-table-column>
-
-				<el-table-column label="操作" fixed="right" align="right" width="140">
-					<template #default="scope">
-						<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
-						<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
-						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
-							<template #reference>
-								<el-button type="text" size="small">删除</el-button>
-							</template>
-						</el-popconfirm>
-					</template>
-				</el-table-column>
-				<!-- 表格列结束 -->
-			</scTable>
-		</el-main>
-	</el-container>
-
-	<!-- 弹窗开始 -->
-	<el-dialog :title="titleMap[dialogMode]" :width="600" v-model="showDialog" :before-close="closeDialog" append-to-body>
-		<el-form :model="form" :rules="rules" :disabled="dialogMode=='show'" ref="dialogForm" label-width="80px" label-position="top">
-			<el-row :gutter="20">
-				<el-col :span="12">
-					<el-form-item label="名称" prop="name">
-						<el-input v-model="form.name"></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="12">
-					<el-form-item label="邮箱" prop="yx">
-						<el-input v-model="form.yx"></el-input>
-					</el-form-item>
-				</el-col>
-			</el-row>
-			<el-row :gutter="20">
-				<el-col :span="12">
-					<el-form-item label="进度" prop="progress">
-						<el-input v-model.number="form.progress"></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="12">
-					<el-form-item label="状态" prop="audit">
-						<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-		<template #footer>
-			<el-button @click="closeDialog">取 消</el-button>
-			<el-button v-if="dialogMode=='add'" type="primary" @click="submitForm()">创 建</el-button>
-			<el-button v-if="dialogMode=='edit'" type="primary" @click="editForm()">保 存</el-button>
-		</template>
-	</el-dialog>
-	<!-- 弹窗结束 -->
-</template>
-
-<script>
-	export default {
-		name: 'list',
-		data() {
-			return {
-				search : {
-					name: ""
-				},
-				options: [
-					{
-						label: '状态',
-						value: 'type',
-						type: 'select',
-						extend: {
-							data:[
-								{
-									label: "通过",
-									value: "0"
-								},
-								{
-									label: "失败",
-									value: "1"
-								}
-							]
-						}
-					},
-					{
-						label: '加入时间',
-						value: 'date',
-						type: 'daterange'
-					}
-				],
-				apiObj: this.$API.demo.demolist.list,
-				selection: [],
-				showDialog: false,
-				dialogMode: "add",
-				editIndex: null,
-				titleMap: {
-					add: "新增",
-					edit: "编辑",
-					show: "查看"
-				},
-				form: {
-					name: "",
-					audit: "1",
-					yx: "",
-					progress: 0
-				},
-				rules: {
-					name: [
-						{ required: true, message: '请输入名称' },
-					],
-					yx: [
-						{ required: true, message: '请输入完整的邮箱地址' },
-					],
-					progress: [
-						{ required: true, message: '请输入进度' },
-					]
-				},
-				column: [
-					{
-						label: "NAME",
-						prop: "name",
-						width: 150
-					},
-					{
-						label: "PROGRESS",
-						prop: "progress",
-						width: 150
-					},
-					{
-						label: "AUDIT",
-						prop: "audit",
-						width: 150
-					}
-				]
-			}
-		},
-		mounted() {
-
-		},
-		methods: {
-			//表格选择后回调事件
-			selectionChange(selection){
-				this.selection = selection;
-			},
-			//行删除
-			table_del(index){
-				this.$refs.table.tableData.splice(index, 1);
-			},
-			//批量删除
-			batch_del(){
-				var _this = this;
-				_this.selection.forEach(function (item) {
-					_this.$refs.table.tableData.forEach(function (itemI, indexI) {
-						if (item.id === itemI.id) {
-							_this.$refs.table.tableData.splice(indexI, 1)
-						}
-					})
-				})
-			},
-			//关闭弹窗
-			closeDialog(){
-				this.showDialog = false;
-				this.$nextTick(() => {
-					this.$refs.dialogForm.resetFields();
-				})
-			},
-			//打开弹窗
-			openDialog(mode){
-				this.dialogMode = mode;
-				this.showDialog = true;
-			},
-			//新增提交
-			submitForm(){
-				this.$refs.dialogForm.validate((valid) => {
-					if (valid) {
-						var newData = {
-							...this.form,
-							id: new Date().getTime(),
-							date: "2021-04-30 13:57:00"
-						}
-						this.$refs.table.tableData.unshift(newData)
-						this.closeDialog();
-					}else{
-						return false;
-					}
-				})
-			},
-			//编辑
-			table_edit(row, index){
-				this.editIndex = index;
-				this.openDialog('edit');
-				this.$nextTick(() => {
-					this.form = {...row}
-				});
-			},
-			//编辑提交
-			editForm(){
-				this.$refs.dialogForm.validate((valid) => {
-					if (valid) {
-						Object.assign(this.$refs.table.tableData[this.editIndex], this.form)
-						this.closeDialog();
-					}else{
-						return false;
-					}
-				})
-			},
-			//查看
-			table_show(row){
-				this.openDialog('show');
-				this.$nextTick(() => {
-					this.form = {...row}
-				});
-			},
-			upsearch(){
-				var data = Object.assign({}, this.search, this.$refs.scFilterBar.getFilter());
-				this.$refs.table.upData(data)
-			},
-			updata(val){
-				var data = Object.assign({},this.search, val);
-				this.$refs.table.upData(data)
-			}
-		}
-	}
-</script>
diff --git a/src/views/template/show.vue b/src/views/template/show.vue
deleted file mode 100644
index dac92d50..00000000
--- a/src/views/template/show.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-	<div>
-		<el-empty description="SHOW"></el-empty>
-		<h2>ID={{ id }}</h2>
-		<el-input v-model="input" placeholder="请输入内容"></el-input>
-	</div>
-</template>
-
-<script>
-	export default {
-		name: 'show',
-		props: ['showid'],
-		data() {
-			return {
-				id: this.$route.params.id || this.showid,
-				input: ""
-			}
-		},
-		mounted: function() {
-			//如果路由与组件名称相同修改tags title，防止作用于非路由组件时修改tags
-			if(this.$route.name==this.$options.name){
-				this.$store.commit("updateViewTags", {
-					path: this.$route.path,
-					meta: {
-						title:"详情ID="+this.id
-					}
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.main {width:200px;}
-</style>
diff --git a/src/views/template/sideList.vue b/src/views/template/sideList.vue
deleted file mode 100644
index cd87a25b..00000000
--- a/src/views/template/sideList.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-	<el-container>
-		<el-aside width="200px">
-			<div>
-				<el-tree node-key="id" :data="data" :default-expanded-keys="[1]" :highlight-current="true" :expand-on-click-node="false" :show-checkbox="true" @node-click="handleNodeClick"></el-tree>
-			</div>
-		</el-aside>
-		<el-container>
-			<el-header>
-				<div>
-					<el-button type="primary" icon="el-icon-plus"></el-button>
-					<el-button type="primary" icon="el-icon-delete"></el-button>
-					<el-button type="primary">默认按钮</el-button>
-					<el-dropdown style="margin-left: 10px;">
-						<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
-						<template #dropdown>
-							<el-dropdown-menu>
-								<el-dropdown-item>黄金糕</el-dropdown-item>
-								<el-dropdown-item>狮子头</el-dropdown-item>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
-				</div>
-			</el-header>
-			<el-main class="nopadding">
-				<scTable ref="table" :data="tableData" row-key="name">
-					<!-- 表格列开始 -->
-					<el-table-column type="selection" width="50"></el-table-column>
-					<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
-					<el-table-column label="图标" width="80">
-						<template #default="scope">
-							<i :class="scope.row.meta.icon"></i>
-						</template>
-					</el-table-column>
-					<el-table-column label="路由名称" prop="name" width="100"></el-table-column>
-					<el-table-column label="路由地址" prop="path" width="200">
-						<template #default="scope">
-							<el-tag>{{scope.row.path}}</el-tag>
-						</template>
-					</el-table-column>
-					<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
-					<el-table-column label="是否隐藏" prop="meta.hidden" width="100">
-						<template #default="scope">
-							{{ scope.row.meta.hidden?"是":"否" }}
-						</template>
-					</el-table-column>
-
-					<el-table-column label="操作" fixed="right" align="right" width="140">
-						<template #default="scope">
-							<el-button @click="table_edit(scope.row)" type="text" size="mini">编辑</el-button>
-							<el-dropdown style="margin-left:10px;">
-								<el-button size="mini" type="primary" plain icon="el-icon-arrow-down"></el-button>
-								<template #dropdown>
-									<el-dropdown-menu>
-										<el-dropdown-item @click="table_show(scope.row)">查看</el-dropdown-item>
-										<el-dropdown-item>更新数据</el-dropdown-item>
-										<el-dropdown-item>转移</el-dropdown-item>
-										<el-dropdown-item>删除</el-dropdown-item>
-									</el-dropdown-menu>
-								</template>
-							</el-dropdown>
-						</template>
-					</el-table-column>
-					<!-- 表格列结束 -->
-				</scTable>
-			</el-main>
-		</el-container>
-	</el-container>
-
-	<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
-		<Show showid="我来自父组件"></Show>
-	</el-drawer>
-
-</template>
-
-<script>
-	import Show from './show.vue';
-
-	export default {
-		name: 'sideList',
-		components: {
-			Show
-		},
-		data() {
-			return {
-				data: [
-					{label: '桌面'},
-					{label: '下载'},
-					{label: '文档'},
-					{label: '图片'},
-					{label: '磁盘', id: 1, children:[
-						{label: 'Windows (C)'},
-						{label: '本地磁盘 (D)'},
-						{label: '本地磁盘 (E)'}
-					]}
-				],
-				tableData: [],
-				drawer: false
-			}
-		},
-		async created() {
-			var userInfo = await this.$API.user.login.get();
-			this.tableData = userInfo.data.menuList;
-		},
-		mounted(){
-
-		},
-		methods: {
-			handleNodeClick(data){
-				console.log(data);
-			},
-			table_show(row) {
-				this.$router.push({
-					path: '/template/show/' + row.meta.title
-				});
-			},
-			table_edit(row) {
-				console.log(row);
-				this.drawer = true
-			}
-		}
-	}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/vab/iconfont.vue b/src/views/vab/iconfont.vue
new file mode 100644
index 00000000..efa6b1d2
--- /dev/null
+++ b/src/views/vab/iconfont.vue
@@ -0,0 +1,36 @@
+<template>
+	<el-main>
+		<el-alert title="扩展了Element Plus图标库,也可以使用阿里iconfont在@/assets/font中新增自己的图标库,记得在@style/style.less中引入" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="0" class="box">
+			<el-col :span="4" v-for="(icon, index) in icons" :key="index" >
+				<div class="icon-box">
+					<i :class="'sc-icon-'+icon.font_class"></i>
+					<p>{{ 'sc-icon-'+icon.font_class }}</p>
+				</div>
+			</el-col>
+		</el-row>
+	</el-main>
+
+</template>
+
+<script>
+	import icons from '@/assets/font/scicon/iconfont.json'
+	export default {
+		data() {
+			return {
+				icons: ""
+			}
+		},
+		mounted() {
+			this.icons = icons.glyphs
+		}
+	}
+</script>
+
+<style scoped>
+	.box {border-top: 1px solid #eee;border-left: 1px solid #eee;}
+	.icon-box {height:120px;text-align: center;background: #fff;border-bottom: 1px solid #eee;border-right: 1px solid #eee;color: #666;padding:30px 10px;}
+	.icon-box i {font-size: 26px;transition: color .15s linear;}
+	.icon-box p {color: #999;margin-top: 15px;transition: color .15s linear;}
+	.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}
+</style>