Merge branch 'dev'
This commit is contained in:
sc
commit
172d09db7a
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "SCUI-Admin",
|
||||
"version": "1.1.1",
|
||||
"version": "1.1.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'app.less';
|
||||
@import 'fix.less';
|
||||
@import 'pages.less';
|
||||
@import 'pages.less';
|
||||
@import '~@/assets/font/scicon/iconfont.css';
|
||||
|
|
@ -22,6 +22,22 @@
|
|||
data() {
|
||||
return {
|
||||
activities: [
|
||||
{
|
||||
content: [
|
||||
"[新增] 扩展图标"
|
||||
],
|
||||
timestamp: '2021-06-01'
|
||||
},
|
||||
{
|
||||
content: [
|
||||
"[新增] 布局实时演示",
|
||||
"[优化] 抽离tinymce、echarts模块",
|
||||
"[优化] 更换富文本编辑为tinymce",
|
||||
"[优化] 打印工具可直接传入html",
|
||||
"[删除] 诺干个无用的模板",
|
||||
],
|
||||
timestamp: '2021-05-30'
|
||||
},
|
||||
{
|
||||
content: [
|
||||
"[优化] 上传组件上传行为",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue