Merge branch 'dev'

This commit is contained in:
sc 2021-06-01 11:13:18 +08:00
commit 172d09db7a
27 changed files with 1582 additions and 772 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "SCUI-Admin", "name": "SCUI-Admin",
"version": "1.1.1", "version": "1.1.3",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",

View File

@ -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";
}

View File

@ -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.

View File

@ -4,7 +4,7 @@
<div class="mask"> <div class="mask">
<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span> <span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
</div> </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> <a v-else :href="img" class="file" target="_blank"><i class="el-icon-document"></i></a>
</div> </div>
<div v-else class="sc-upload-uploader"> <div v-else class="sc-upload-uploader">

View File

@ -4,7 +4,7 @@
<ul> <ul>
<li v-for="(file, index) in fileList" :key="index"> <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)"> <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>
<div v-else class="sc-upload-item"> <div v-else class="sc-upload-item">
<div class="mask"> <div class="mask">

View File

@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
APP_NAME: "SCUI", APP_NAME: "SCUI",
//版本号 //版本号
APP_VER: "1.1.1", APP_VER: "1.1.2",
//接口地址 //接口地址
API_URL: "", API_URL: "",
@ -11,6 +11,12 @@ const DEFAULT_CONFIG = {
//MOCK接口地址 //MOCK接口地址
MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api", MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
//布局 默认default | 通栏header
LAYOUT: 'default',
//菜单是否折叠
MENU_IS_COLLAPSE: false,
//是否开启多标签 //是否开启多标签
LAYOUT_TAGS: true, LAYOUT_TAGS: true,

View File

@ -6,12 +6,14 @@
<el-menu-item v-if="!navMenu.children" :index="navMenu.path"> <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> <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> <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-menu-item>
<el-submenu v-if="navMenu.children" :index="navMenu.path"> <el-submenu v-if="navMenu.children" :index="navMenu.path">
<template #title> <template #title>
<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i> <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> </template>
<NavMenu :navMenus="navMenu.children"></NavMenu> <NavMenu :navMenus="navMenu.children"></NavMenu>
</el-submenu> </el-submenu>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,44 +1,147 @@
<template> <template>
<Side v-if="!ismobile"></Side> <!-- 通栏布局 -->
<Side-m v-if="ismobile"></Side-m> <template v-if="layout=='header'">
<div class="aminui-body el-container"> <header class="adminui-header">
<Head></Head> <div class="adminui-header-left">
<Tags v-if="!ismobile && $CONFIG.LAYOUT_TAGS"></Tags> <div class="logo">
<div class="adminui-main" id="adminui-main"> <i class="el-icon-platform-eleme"></i>
<router-view></router-view> <span>SCUI-Admin</span>
</div> </div>
</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> </template>
<script> <script>
import Side from './components/side.vue';
import SideM from './components/sideM.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 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 { export default {
name: 'index', name: 'index',
components: { components: {
Side,
SideM, SideM,
Head, Topbar,
Tags Tags,
NavMenu,
userbar,
setting
}, },
data() { data() {
return { return {
settingDialog: false,
menu: [],
nextMenu: [],
pmenu: {}
} }
}, },
computed:{ computed:{
ismobile(){ ismobile(){
return this.$store.state.global.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() { created() {
this.onLayoutResize(); this.onLayoutResize();
window.addEventListener('resize', 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: { methods: {
openSetting(){
this.settingDialog = true;
},
onLayoutResize(){ onLayoutResize(){
const clientWidth = document.body.clientWidth; const clientWidth = document.body.clientWidth;
if(clientWidth < 992){ if(clientWidth < 992){
@ -46,6 +149,38 @@
}else{ }else{
this.$store.commit("SET_ismobile", false) 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;
} }
} }
} }

View File

@ -26,7 +26,7 @@ app.config.globalProperties.$HAS = permission;
app.use(store); app.use(store);
app.use(router); 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('scTable', scTable);
app.component('scFilterBar', scFilterBar); app.component('scFilterBar', scFilterBar);

View File

@ -25,6 +25,7 @@ const routes = [{
path: "/dashboard", path: "/dashboard",
meta: { meta: {
title: "控制台", title: "控制台",
icon: "el-icon-menu",
affix: true affix: true
}, },
component: () => import(/* webpackChunkName: "home" */ '@/views/home'), component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
@ -33,7 +34,8 @@ const routes = [{
name: "userCenter", name: "userCenter",
path: "/usercenter", path: "/usercenter",
meta: { meta: {
title: "个人信息" title: "个人信息",
icon: "el-icon-user",
}, },
component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'), component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
}, },
@ -41,7 +43,8 @@ const routes = [{
name: "autocode", name: "autocode",
path: "/autocode", path: "/autocode",
meta: { meta: {
title: "代码生成器" title: "代码生成器",
icon: "el-icon-magic-stick",
}, },
component: () => import(/* webpackChunkName: "autocode" */ '@/views/autocode'), component: () => import(/* webpackChunkName: "autocode" */ '@/views/autocode'),
} }

View File

@ -1,10 +1,28 @@
import config from "@/config";
export default { export default {
state: { state: {
ismobile: false //移动端布局
ismobile: false,
//布局
layout: config.LAYOUT,
//菜单是否折叠 toggle
menuIsCollapse: config.MENU_IS_COLLAPSE,
//多标签栏
layoutTags: config.LAYOUT_TAGS,
}, },
mutations: { mutations: {
SET_ismobile(state, key){ SET_ismobile(state, key){
state.ismobile = 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
} }
} }
} }

View File

@ -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);} ::-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;} .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 {background-color: rgba(255, 255, 255, 0);}
.adminui-side-split-scroll::-webkit-scrollbar-track:hover {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 {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;} .adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;} .adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
.aminui-side.isCollapse {width: 64px;}
/* 右侧内容 */ /* 右侧内容 */
.aminui-body {flex: 1;display: flex;flex-flow: column;} .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-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-header .left-panel {display: flex;align-items: center;padding-left:20px;} .adminui-topbar .left-panel {display: flex;align-items: center;}
.adminui-header .right-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 {display: flex;align-items: center;}
.right-panel-search > * + * {margin-left:10px;} .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;} .adminui-topbar .menu-collapse {height: 50px;width: 60px;padding: 0 20px;display: flex;align-items: center;cursor: pointer;}
.msgList footer {height:35px;line-height: 35px;text-align:center;} .adminui-topbar .menu-collapse i {font-size: 16px;}
.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;} .adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, #d9ecff, transparent);}
.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-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);} .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;} .adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}

View File

@ -1,3 +1,4 @@
@import 'app.less'; @import 'app.less';
@import 'fix.less'; @import 'fix.less';
@import 'pages.less'; @import 'pages.less';
@import '~@/assets/font/scicon/iconfont.css';

View File

@ -22,6 +22,22 @@
data() { data() {
return { return {
activities: [ activities: [
{
content: [
"[新增] 扩展图标"
],
timestamp: '2021-06-01'
},
{
content: [
"[新增] 布局实时演示",
"[优化] 抽离tinymce、echarts模块",
"[优化] 更换富文本编辑为tinymce",
"[优化] 打印工具可直接传入html",
"[删除] 诺干个无用的模板",
],
timestamp: '2021-05-30'
},
{ {
content: [ content: [
"[优化] 上传组件上传行为", "[优化] 上传组件上传行为",

View File

@ -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>

View File

@ -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>

View File

@ -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 titletags
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>

View File

@ -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>

View File

@ -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>