zetan-cli-dev-template-vue-element-admin 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +8 -0
- package/template/.editorconfig +14 -0
- package/template/.env.development +5 -0
- package/template/.env.production +6 -0
- package/template/.env.staging +8 -0
- package/template/.eslintignore +4 -0
- package/template/.eslintrc.js +198 -0
- package/template/.travis.yml +5 -0
- package/template/LICENSE +21 -0
- package/template/README.es.md +228 -0
- package/template/README.ja.md +224 -0
- package/template/README.md +250 -0
- package/template/README.zh-CN.md +273 -0
- package/template/babel.config.js +14 -0
- package/template/build/index.js +35 -0
- package/template/jest.config.js +24 -0
- package/template/jsconfig.json +9 -0
- package/template/mock/article.js +116 -0
- package/template/mock/index.js +60 -0
- package/template/mock/mock-server.js +81 -0
- package/template/mock/remote-search.js +51 -0
- package/template/mock/role/index.js +98 -0
- package/template/mock/role/routes.js +530 -0
- package/template/mock/user.js +84 -0
- package/template/mock/utils.js +48 -0
- package/template/package.json +111 -0
- package/template/plop-templates/component/index.hbs +26 -0
- package/template/plop-templates/component/prompt.js +55 -0
- package/template/plop-templates/store/index.hbs +16 -0
- package/template/plop-templates/store/prompt.js +62 -0
- package/template/plop-templates/utils.js +2 -0
- package/template/plop-templates/view/index.hbs +26 -0
- package/template/plop-templates/view/prompt.js +55 -0
- package/template/plopfile.js +9 -0
- package/template/postcss.config.js +5 -0
- package/template/public/favicon.ico +0 -0
- package/template/public/index.html +15 -0
- package/template/src/App.vue +11 -0
- package/template/src/api/article.js +41 -0
- package/template/src/api/qiniu.js +8 -0
- package/template/src/api/remote-search.js +17 -0
- package/template/src/api/role.js +38 -0
- package/template/src/api/user.js +24 -0
- package/template/src/assets/401_images/401.gif +0 -0
- package/template/src/assets/404_images/404.png +0 -0
- package/template/src/assets/404_images/404_cloud.png +0 -0
- package/template/src/assets/custom-theme/fonts/element-icons.ttf +0 -0
- package/template/src/assets/custom-theme/fonts/element-icons.woff +0 -0
- package/template/src/assets/custom-theme/index.css +1 -0
- package/template/src/components/BackToTop/index.vue +111 -0
- package/template/src/components/Breadcrumb/index.vue +82 -0
- package/template/src/components/Charts/Keyboard.vue +155 -0
- package/template/src/components/Charts/LineMarker.vue +227 -0
- package/template/src/components/Charts/MixChart.vue +271 -0
- package/template/src/components/Charts/mixins/resize.js +56 -0
- package/template/src/components/DndList/index.vue +166 -0
- package/template/src/components/DragSelect/index.vue +65 -0
- package/template/src/components/Dropzone/index.vue +297 -0
- package/template/src/components/ErrorLog/index.vue +78 -0
- package/template/src/components/GithubCorner/index.vue +54 -0
- package/template/src/components/Hamburger/index.vue +44 -0
- package/template/src/components/HeaderSearch/index.vue +180 -0
- package/template/src/components/ImageCropper/index.vue +1779 -0
- package/template/src/components/ImageCropper/utils/data2blob.js +19 -0
- package/template/src/components/ImageCropper/utils/effectRipple.js +39 -0
- package/template/src/components/ImageCropper/utils/language.js +232 -0
- package/template/src/components/ImageCropper/utils/mimes.js +7 -0
- package/template/src/components/JsonEditor/index.vue +77 -0
- package/template/src/components/Kanban/index.vue +99 -0
- package/template/src/components/MDinput/index.vue +360 -0
- package/template/src/components/MarkdownEditor/default-options.js +31 -0
- package/template/src/components/MarkdownEditor/index.vue +118 -0
- package/template/src/components/Pagination/index.vue +101 -0
- package/template/src/components/PanThumb/index.vue +142 -0
- package/template/src/components/RightPanel/index.vue +145 -0
- package/template/src/components/Screenfull/index.vue +60 -0
- package/template/src/components/Share/DropdownMenu.vue +103 -0
- package/template/src/components/SizeSelect/index.vue +57 -0
- package/template/src/components/Sticky/index.vue +91 -0
- package/template/src/components/SvgIcon/index.vue +62 -0
- package/template/src/components/TextHoverEffect/Mallki.vue +113 -0
- package/template/src/components/ThemePicker/index.vue +175 -0
- package/template/src/components/Tinymce/components/EditorImage.vue +111 -0
- package/template/src/components/Tinymce/dynamicLoadScript.js +59 -0
- package/template/src/components/Tinymce/index.vue +247 -0
- package/template/src/components/Tinymce/plugins.js +7 -0
- package/template/src/components/Tinymce/toolbar.js +6 -0
- package/template/src/components/Upload/SingleImage.vue +134 -0
- package/template/src/components/Upload/SingleImage2.vue +130 -0
- package/template/src/components/Upload/SingleImage3.vue +157 -0
- package/template/src/components/UploadExcel/index.vue +138 -0
- package/template/src/directive/clipboard/clipboard.js +49 -0
- package/template/src/directive/clipboard/index.js +13 -0
- package/template/src/directive/el-drag-dialog/drag.js +77 -0
- package/template/src/directive/el-drag-dialog/index.js +13 -0
- package/template/src/directive/el-table/adaptive.js +41 -0
- package/template/src/directive/el-table/index.js +13 -0
- package/template/src/directive/permission/index.js +13 -0
- package/template/src/directive/permission/permission.js +31 -0
- package/template/src/directive/sticky.js +91 -0
- package/template/src/directive/waves/index.js +13 -0
- package/template/src/directive/waves/waves.css +26 -0
- package/template/src/directive/waves/waves.js +72 -0
- package/template/src/filters/index.js +68 -0
- package/template/src/icons/index.js +9 -0
- package/template/src/icons/svg/404.svg +1 -0
- package/template/src/icons/svg/bug.svg +1 -0
- package/template/src/icons/svg/chart.svg +1 -0
- package/template/src/icons/svg/clipboard.svg +1 -0
- package/template/src/icons/svg/component.svg +1 -0
- package/template/src/icons/svg/dashboard.svg +1 -0
- package/template/src/icons/svg/documentation.svg +1 -0
- package/template/src/icons/svg/drag.svg +1 -0
- package/template/src/icons/svg/edit.svg +1 -0
- package/template/src/icons/svg/education.svg +1 -0
- package/template/src/icons/svg/email.svg +1 -0
- package/template/src/icons/svg/example.svg +1 -0
- package/template/src/icons/svg/excel.svg +1 -0
- package/template/src/icons/svg/exit-fullscreen.svg +1 -0
- package/template/src/icons/svg/eye-open.svg +1 -0
- package/template/src/icons/svg/eye.svg +1 -0
- package/template/src/icons/svg/form.svg +1 -0
- package/template/src/icons/svg/fullscreen.svg +1 -0
- package/template/src/icons/svg/guide.svg +1 -0
- package/template/src/icons/svg/icon.svg +1 -0
- package/template/src/icons/svg/international.svg +1 -0
- package/template/src/icons/svg/language.svg +1 -0
- package/template/src/icons/svg/link.svg +1 -0
- package/template/src/icons/svg/list.svg +1 -0
- package/template/src/icons/svg/lock.svg +1 -0
- package/template/src/icons/svg/message.svg +1 -0
- package/template/src/icons/svg/money.svg +1 -0
- package/template/src/icons/svg/nested.svg +1 -0
- package/template/src/icons/svg/password.svg +1 -0
- package/template/src/icons/svg/pdf.svg +1 -0
- package/template/src/icons/svg/people.svg +1 -0
- package/template/src/icons/svg/peoples.svg +1 -0
- package/template/src/icons/svg/qq.svg +1 -0
- package/template/src/icons/svg/search.svg +1 -0
- package/template/src/icons/svg/shopping.svg +1 -0
- package/template/src/icons/svg/size.svg +1 -0
- package/template/src/icons/svg/skill.svg +1 -0
- package/template/src/icons/svg/star.svg +1 -0
- package/template/src/icons/svg/tab.svg +1 -0
- package/template/src/icons/svg/table.svg +1 -0
- package/template/src/icons/svg/theme.svg +1 -0
- package/template/src/icons/svg/tree-table.svg +1 -0
- package/template/src/icons/svg/tree.svg +1 -0
- package/template/src/icons/svg/user.svg +1 -0
- package/template/src/icons/svg/wechat.svg +1 -0
- package/template/src/icons/svg/zip.svg +1 -0
- package/template/src/icons/svgo.yml +22 -0
- package/template/src/layout/components/AppMain.vue +57 -0
- package/template/src/layout/components/Navbar.vue +167 -0
- package/template/src/layout/components/Settings/index.vue +108 -0
- package/template/src/layout/components/Sidebar/FixiOSBug.js +26 -0
- package/template/src/layout/components/Sidebar/Item.vue +41 -0
- package/template/src/layout/components/Sidebar/Link.vue +43 -0
- package/template/src/layout/components/Sidebar/Logo.vue +82 -0
- package/template/src/layout/components/Sidebar/SidebarItem.vue +95 -0
- package/template/src/layout/components/Sidebar/index.vue +54 -0
- package/template/src/layout/components/TagsView/ScrollPane.vue +94 -0
- package/template/src/layout/components/TagsView/index.vue +292 -0
- package/template/src/layout/components/index.js +5 -0
- package/template/src/layout/index.vue +102 -0
- package/template/src/layout/mixin/ResizeHandler.js +45 -0
- package/template/src/main.js +53 -0
- package/template/src/permission.js +74 -0
- package/template/src/router/index.js +404 -0
- package/template/src/router/modules/charts.js +36 -0
- package/template/src/router/modules/components.js +102 -0
- package/template/src/router/modules/nested.js +66 -0
- package/template/src/router/modules/table.js +41 -0
- package/template/src/settings.js +35 -0
- package/template/src/store/getters.js +15 -0
- package/template/src/store/index.js +25 -0
- package/template/src/store/modules/app.js +56 -0
- package/template/src/store/modules/errorLog.js +28 -0
- package/template/src/store/modules/permission.js +69 -0
- package/template/src/store/modules/settings.js +35 -0
- package/template/src/store/modules/tagsView.js +160 -0
- package/template/src/store/modules/user.js +131 -0
- package/template/src/styles/btn.scss +99 -0
- package/template/src/styles/element-ui.scss +84 -0
- package/template/src/styles/element-variables.scss +31 -0
- package/template/src/styles/index.scss +191 -0
- package/template/src/styles/mixin.scss +66 -0
- package/template/src/styles/sidebar.scss +226 -0
- package/template/src/styles/transition.scss +48 -0
- package/template/src/styles/variables.scss +35 -0
- package/template/src/utils/auth.js +15 -0
- package/template/src/utils/clipboard.js +32 -0
- package/template/src/utils/error-log.js +35 -0
- package/template/src/utils/get-page-title.js +10 -0
- package/template/src/utils/index.js +357 -0
- package/template/src/utils/open-window.js +25 -0
- package/template/src/utils/permission.js +21 -0
- package/template/src/utils/request.js +85 -0
- package/template/src/utils/scroll-to.js +58 -0
- package/template/src/utils/validate.js +87 -0
- package/template/src/vendor/Export2Excel.js +220 -0
- package/template/src/vendor/Export2Zip.js +24 -0
- package/template/src/views/charts/keyboard.vue +23 -0
- package/template/src/views/charts/line.vue +23 -0
- package/template/src/views/charts/mix-chart.vue +23 -0
- package/template/src/views/clipboard/index.vue +49 -0
- package/template/src/views/components-demo/avatar-upload.vue +61 -0
- package/template/src/views/components-demo/back-to-top.vue +154 -0
- package/template/src/views/components-demo/count-to.vue +218 -0
- package/template/src/views/components-demo/dnd-list.vue +39 -0
- package/template/src/views/components-demo/drag-dialog.vue +61 -0
- package/template/src/views/components-demo/drag-kanban.vue +66 -0
- package/template/src/views/components-demo/drag-select.vue +43 -0
- package/template/src/views/components-demo/dropzone.vue +31 -0
- package/template/src/views/components-demo/json-editor.vue +36 -0
- package/template/src/views/components-demo/markdown.vue +101 -0
- package/template/src/views/components-demo/mixin.vue +169 -0
- package/template/src/views/components-demo/split-pane.vue +67 -0
- package/template/src/views/components-demo/sticky.vue +135 -0
- package/template/src/views/components-demo/tinymce.vue +36 -0
- package/template/src/views/dashboard/admin/components/BarChart.vue +102 -0
- package/template/src/views/dashboard/admin/components/BoxCard.vue +118 -0
- package/template/src/views/dashboard/admin/components/LineChart.vue +135 -0
- package/template/src/views/dashboard/admin/components/PanelGroup.vue +181 -0
- package/template/src/views/dashboard/admin/components/PieChart.vue +79 -0
- package/template/src/views/dashboard/admin/components/RaddarChart.vue +116 -0
- package/template/src/views/dashboard/admin/components/TodoList/Todo.vue +81 -0
- package/template/src/views/dashboard/admin/components/TodoList/index.scss +320 -0
- package/template/src/views/dashboard/admin/components/TodoList/index.vue +127 -0
- package/template/src/views/dashboard/admin/components/TransactionTable.vue +55 -0
- package/template/src/views/dashboard/admin/components/mixins/resize.js +55 -0
- package/template/src/views/dashboard/admin/index.vue +124 -0
- package/template/src/views/dashboard/editor/index.vue +74 -0
- package/template/src/views/dashboard/index.vue +31 -0
- package/template/src/views/documentation/index.vue +57 -0
- package/template/src/views/error-log/components/ErrorTestA.vue +13 -0
- package/template/src/views/error-log/components/ErrorTestB.vue +11 -0
- package/template/src/views/error-log/index.vue +32 -0
- package/template/src/views/error-page/401.vue +99 -0
- package/template/src/views/error-page/404.vue +228 -0
- package/template/src/views/example/components/ArticleDetail.vue +289 -0
- package/template/src/views/example/components/Dropdown/Comment.vue +41 -0
- package/template/src/views/example/components/Dropdown/Platform.vue +46 -0
- package/template/src/views/example/components/Dropdown/SourceUrl.vue +38 -0
- package/template/src/views/example/components/Dropdown/index.js +3 -0
- package/template/src/views/example/components/Warning.vue +13 -0
- package/template/src/views/example/create.vue +13 -0
- package/template/src/views/example/edit.vue +13 -0
- package/template/src/views/example/list.vue +112 -0
- package/template/src/views/excel/components/AutoWidthOption.vue +34 -0
- package/template/src/views/excel/components/BookTypeOption.vue +39 -0
- package/template/src/views/excel/components/FilenameOption.vue +27 -0
- package/template/src/views/excel/export-excel.vue +116 -0
- package/template/src/views/excel/merge-header.vue +101 -0
- package/template/src/views/excel/select-excel.vue +107 -0
- package/template/src/views/excel/upload-excel.vue +42 -0
- package/template/src/views/guide/index.vue +36 -0
- package/template/src/views/guide/steps.js +53 -0
- package/template/src/views/icons/element-icons.js +3 -0
- package/template/src/views/icons/index.vue +101 -0
- package/template/src/views/icons/svg-icons.js +10 -0
- package/template/src/views/login/auth-redirect.vue +15 -0
- package/template/src/views/login/components/SocialSignin.vue +72 -0
- package/template/src/views/login/index.vue +324 -0
- package/template/src/views/nested/menu1/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-1/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-2/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue +5 -0
- package/template/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue +5 -0
- package/template/src/views/nested/menu1/menu1-3/index.vue +5 -0
- package/template/src/views/nested/menu2/index.vue +5 -0
- package/template/src/views/pdf/content.js +58 -0
- package/template/src/views/pdf/download.vue +201 -0
- package/template/src/views/pdf/index.vue +13 -0
- package/template/src/views/permission/components/SwitchRoles.vue +32 -0
- package/template/src/views/permission/directive.vue +111 -0
- package/template/src/views/permission/page.vue +19 -0
- package/template/src/views/permission/role.vue +270 -0
- package/template/src/views/profile/components/Account.vue +38 -0
- package/template/src/views/profile/components/Activity.vue +185 -0
- package/template/src/views/profile/components/Timeline.vue +43 -0
- package/template/src/views/profile/components/UserCard.vue +134 -0
- package/template/src/views/profile/index.vue +68 -0
- package/template/src/views/qiniu/upload.vue +41 -0
- package/template/src/views/redirect/index.vue +12 -0
- package/template/src/views/tab/components/TabPane.vue +103 -0
- package/template/src/views/tab/index.vue +57 -0
- package/template/src/views/table/complex-table.vue +379 -0
- package/template/src/views/table/drag-table.vue +153 -0
- package/template/src/views/table/dynamic-table/components/FixedThead.vue +62 -0
- package/template/src/views/table/dynamic-table/components/UnfixedThead.vue +50 -0
- package/template/src/views/table/dynamic-table/index.vue +24 -0
- package/template/src/views/table/inline-edit-table.vue +149 -0
- package/template/src/views/theme/index.vue +120 -0
- package/template/src/views/zip/index.vue +77 -0
- package/template/tests/unit/.eslintrc.js +5 -0
- package/template/tests/unit/components/Hamburger.spec.js +18 -0
- package/template/tests/unit/components/SvgIcon.spec.js +22 -0
- package/template/tests/unit/utils/formatTime.spec.js +29 -0
- package/template/tests/unit/utils/param2Obj.spec.js +14 -0
- package/template/tests/unit/utils/parseTime.spec.js +37 -0
- package/template/tests/unit/utils/validate.spec.js +28 -0
- package/template/vue.config.js +124 -0
@@ -0,0 +1,142 @@
|
|
1
|
+
<template>
|
2
|
+
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
|
3
|
+
<div class="pan-info">
|
4
|
+
<div class="pan-info-roles-container">
|
5
|
+
<slot />
|
6
|
+
</div>
|
7
|
+
</div>
|
8
|
+
<!-- eslint-disable-next-line -->
|
9
|
+
<div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
|
10
|
+
</div>
|
11
|
+
</template>
|
12
|
+
|
13
|
+
<script>
|
14
|
+
export default {
|
15
|
+
name: 'PanThumb',
|
16
|
+
props: {
|
17
|
+
image: {
|
18
|
+
type: String,
|
19
|
+
required: true
|
20
|
+
},
|
21
|
+
zIndex: {
|
22
|
+
type: Number,
|
23
|
+
default: 1
|
24
|
+
},
|
25
|
+
width: {
|
26
|
+
type: String,
|
27
|
+
default: '150px'
|
28
|
+
},
|
29
|
+
height: {
|
30
|
+
type: String,
|
31
|
+
default: '150px'
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
</script>
|
36
|
+
|
37
|
+
<style scoped>
|
38
|
+
.pan-item {
|
39
|
+
width: 200px;
|
40
|
+
height: 200px;
|
41
|
+
border-radius: 50%;
|
42
|
+
display: inline-block;
|
43
|
+
position: relative;
|
44
|
+
cursor: default;
|
45
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
46
|
+
}
|
47
|
+
|
48
|
+
.pan-info-roles-container {
|
49
|
+
padding: 20px;
|
50
|
+
text-align: center;
|
51
|
+
}
|
52
|
+
|
53
|
+
.pan-thumb {
|
54
|
+
width: 100%;
|
55
|
+
height: 100%;
|
56
|
+
background-position: center center;
|
57
|
+
background-size: cover;
|
58
|
+
border-radius: 50%;
|
59
|
+
overflow: hidden;
|
60
|
+
position: absolute;
|
61
|
+
transform-origin: 95% 40%;
|
62
|
+
transition: all 0.3s ease-in-out;
|
63
|
+
}
|
64
|
+
|
65
|
+
/* .pan-thumb:after {
|
66
|
+
content: '';
|
67
|
+
width: 8px;
|
68
|
+
height: 8px;
|
69
|
+
position: absolute;
|
70
|
+
border-radius: 50%;
|
71
|
+
top: 40%;
|
72
|
+
left: 95%;
|
73
|
+
margin: -4px 0 0 -4px;
|
74
|
+
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
75
|
+
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
76
|
+
} */
|
77
|
+
|
78
|
+
.pan-info {
|
79
|
+
position: absolute;
|
80
|
+
width: inherit;
|
81
|
+
height: inherit;
|
82
|
+
border-radius: 50%;
|
83
|
+
overflow: hidden;
|
84
|
+
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
85
|
+
}
|
86
|
+
|
87
|
+
.pan-info h3 {
|
88
|
+
color: #fff;
|
89
|
+
text-transform: uppercase;
|
90
|
+
position: relative;
|
91
|
+
letter-spacing: 2px;
|
92
|
+
font-size: 18px;
|
93
|
+
margin: 0 60px;
|
94
|
+
padding: 22px 0 0 0;
|
95
|
+
height: 85px;
|
96
|
+
font-family: 'Open Sans', Arial, sans-serif;
|
97
|
+
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
98
|
+
}
|
99
|
+
|
100
|
+
.pan-info p {
|
101
|
+
color: #fff;
|
102
|
+
padding: 10px 5px;
|
103
|
+
font-style: italic;
|
104
|
+
margin: 0 30px;
|
105
|
+
font-size: 12px;
|
106
|
+
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
107
|
+
}
|
108
|
+
|
109
|
+
.pan-info p a {
|
110
|
+
display: block;
|
111
|
+
color: #333;
|
112
|
+
width: 80px;
|
113
|
+
height: 80px;
|
114
|
+
background: rgba(255, 255, 255, 0.3);
|
115
|
+
border-radius: 50%;
|
116
|
+
color: #fff;
|
117
|
+
font-style: normal;
|
118
|
+
font-weight: 700;
|
119
|
+
text-transform: uppercase;
|
120
|
+
font-size: 9px;
|
121
|
+
letter-spacing: 1px;
|
122
|
+
padding-top: 24px;
|
123
|
+
margin: 7px auto 0;
|
124
|
+
font-family: 'Open Sans', Arial, sans-serif;
|
125
|
+
opacity: 0;
|
126
|
+
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
127
|
+
transform: translateX(60px) rotate(90deg);
|
128
|
+
}
|
129
|
+
|
130
|
+
.pan-info p a:hover {
|
131
|
+
background: rgba(255, 255, 255, 0.5);
|
132
|
+
}
|
133
|
+
|
134
|
+
.pan-item:hover .pan-thumb {
|
135
|
+
transform: rotate(-110deg);
|
136
|
+
}
|
137
|
+
|
138
|
+
.pan-item:hover .pan-info p a {
|
139
|
+
opacity: 1;
|
140
|
+
transform: translateX(0px) rotate(0deg);
|
141
|
+
}
|
142
|
+
</style>
|
@@ -0,0 +1,145 @@
|
|
1
|
+
<template>
|
2
|
+
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
|
3
|
+
<div class="rightPanel-background" />
|
4
|
+
<div class="rightPanel">
|
5
|
+
<div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
|
6
|
+
<i :class="show?'el-icon-close':'el-icon-setting'" />
|
7
|
+
</div>
|
8
|
+
<div class="rightPanel-items">
|
9
|
+
<slot />
|
10
|
+
</div>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
</template>
|
14
|
+
|
15
|
+
<script>
|
16
|
+
import { addClass, removeClass } from '@/utils'
|
17
|
+
|
18
|
+
export default {
|
19
|
+
name: 'RightPanel',
|
20
|
+
props: {
|
21
|
+
clickNotClose: {
|
22
|
+
default: false,
|
23
|
+
type: Boolean
|
24
|
+
},
|
25
|
+
buttonTop: {
|
26
|
+
default: 250,
|
27
|
+
type: Number
|
28
|
+
}
|
29
|
+
},
|
30
|
+
data() {
|
31
|
+
return {
|
32
|
+
show: false
|
33
|
+
}
|
34
|
+
},
|
35
|
+
computed: {
|
36
|
+
theme() {
|
37
|
+
return this.$store.state.settings.theme
|
38
|
+
}
|
39
|
+
},
|
40
|
+
watch: {
|
41
|
+
show(value) {
|
42
|
+
if (value && !this.clickNotClose) {
|
43
|
+
this.addEventClick()
|
44
|
+
}
|
45
|
+
if (value) {
|
46
|
+
addClass(document.body, 'showRightPanel')
|
47
|
+
} else {
|
48
|
+
removeClass(document.body, 'showRightPanel')
|
49
|
+
}
|
50
|
+
}
|
51
|
+
},
|
52
|
+
mounted() {
|
53
|
+
this.insertToBody()
|
54
|
+
},
|
55
|
+
beforeDestroy() {
|
56
|
+
const elx = this.$refs.rightPanel
|
57
|
+
elx.remove()
|
58
|
+
},
|
59
|
+
methods: {
|
60
|
+
addEventClick() {
|
61
|
+
window.addEventListener('click', this.closeSidebar)
|
62
|
+
},
|
63
|
+
closeSidebar(evt) {
|
64
|
+
const parent = evt.target.closest('.rightPanel')
|
65
|
+
if (!parent) {
|
66
|
+
this.show = false
|
67
|
+
window.removeEventListener('click', this.closeSidebar)
|
68
|
+
}
|
69
|
+
},
|
70
|
+
insertToBody() {
|
71
|
+
const elx = this.$refs.rightPanel
|
72
|
+
const body = document.querySelector('body')
|
73
|
+
body.insertBefore(elx, body.firstChild)
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
</script>
|
78
|
+
|
79
|
+
<style>
|
80
|
+
.showRightPanel {
|
81
|
+
overflow: hidden;
|
82
|
+
position: relative;
|
83
|
+
width: calc(100% - 15px);
|
84
|
+
}
|
85
|
+
</style>
|
86
|
+
|
87
|
+
<style lang="scss" scoped>
|
88
|
+
.rightPanel-background {
|
89
|
+
position: fixed;
|
90
|
+
top: 0;
|
91
|
+
left: 0;
|
92
|
+
opacity: 0;
|
93
|
+
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
94
|
+
background: rgba(0, 0, 0, .2);
|
95
|
+
z-index: -1;
|
96
|
+
}
|
97
|
+
|
98
|
+
.rightPanel {
|
99
|
+
width: 100%;
|
100
|
+
max-width: 260px;
|
101
|
+
height: 100vh;
|
102
|
+
position: fixed;
|
103
|
+
top: 0;
|
104
|
+
right: 0;
|
105
|
+
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
106
|
+
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
107
|
+
transform: translate(100%);
|
108
|
+
background: #fff;
|
109
|
+
z-index: 40000;
|
110
|
+
}
|
111
|
+
|
112
|
+
.show {
|
113
|
+
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
114
|
+
|
115
|
+
.rightPanel-background {
|
116
|
+
z-index: 20000;
|
117
|
+
opacity: 1;
|
118
|
+
width: 100%;
|
119
|
+
height: 100%;
|
120
|
+
}
|
121
|
+
|
122
|
+
.rightPanel {
|
123
|
+
transform: translate(0);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
.handle-button {
|
128
|
+
width: 48px;
|
129
|
+
height: 48px;
|
130
|
+
position: absolute;
|
131
|
+
left: -48px;
|
132
|
+
text-align: center;
|
133
|
+
font-size: 24px;
|
134
|
+
border-radius: 6px 0 0 6px !important;
|
135
|
+
z-index: 0;
|
136
|
+
pointer-events: auto;
|
137
|
+
cursor: pointer;
|
138
|
+
color: #fff;
|
139
|
+
line-height: 48px;
|
140
|
+
i {
|
141
|
+
font-size: 24px;
|
142
|
+
line-height: 48px;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
</style>
|
@@ -0,0 +1,60 @@
|
|
1
|
+
<template>
|
2
|
+
<div>
|
3
|
+
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
|
4
|
+
</div>
|
5
|
+
</template>
|
6
|
+
|
7
|
+
<script>
|
8
|
+
import screenfull from 'screenfull'
|
9
|
+
|
10
|
+
export default {
|
11
|
+
name: 'Screenfull',
|
12
|
+
data() {
|
13
|
+
return {
|
14
|
+
isFullscreen: false
|
15
|
+
}
|
16
|
+
},
|
17
|
+
mounted() {
|
18
|
+
this.init()
|
19
|
+
},
|
20
|
+
beforeDestroy() {
|
21
|
+
this.destroy()
|
22
|
+
},
|
23
|
+
methods: {
|
24
|
+
click() {
|
25
|
+
if (!screenfull.enabled) {
|
26
|
+
this.$message({
|
27
|
+
message: 'you browser can not work',
|
28
|
+
type: 'warning'
|
29
|
+
})
|
30
|
+
return false
|
31
|
+
}
|
32
|
+
screenfull.toggle()
|
33
|
+
},
|
34
|
+
change() {
|
35
|
+
this.isFullscreen = screenfull.isFullscreen
|
36
|
+
},
|
37
|
+
init() {
|
38
|
+
if (screenfull.enabled) {
|
39
|
+
screenfull.on('change', this.change)
|
40
|
+
}
|
41
|
+
},
|
42
|
+
destroy() {
|
43
|
+
if (screenfull.enabled) {
|
44
|
+
screenfull.off('change', this.change)
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
</script>
|
50
|
+
|
51
|
+
<style scoped>
|
52
|
+
.screenfull-svg {
|
53
|
+
display: inline-block;
|
54
|
+
cursor: pointer;
|
55
|
+
fill: #5a5e66;;
|
56
|
+
width: 20px;
|
57
|
+
height: 20px;
|
58
|
+
vertical-align: 10px;
|
59
|
+
}
|
60
|
+
</style>
|
@@ -0,0 +1,103 @@
|
|
1
|
+
<template>
|
2
|
+
<div :class="{active:isActive}" class="share-dropdown-menu">
|
3
|
+
<div class="share-dropdown-menu-wrapper">
|
4
|
+
<span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
|
5
|
+
<div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
|
6
|
+
<a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
|
7
|
+
<span v-else>{{ item.title }}</span>
|
8
|
+
</div>
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
</template>
|
12
|
+
|
13
|
+
<script>
|
14
|
+
export default {
|
15
|
+
props: {
|
16
|
+
items: {
|
17
|
+
type: Array,
|
18
|
+
default: function() {
|
19
|
+
return []
|
20
|
+
}
|
21
|
+
},
|
22
|
+
title: {
|
23
|
+
type: String,
|
24
|
+
default: 'vue'
|
25
|
+
}
|
26
|
+
},
|
27
|
+
data() {
|
28
|
+
return {
|
29
|
+
isActive: false
|
30
|
+
}
|
31
|
+
},
|
32
|
+
methods: {
|
33
|
+
clickTitle() {
|
34
|
+
this.isActive = !this.isActive
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
38
|
+
</script>
|
39
|
+
|
40
|
+
<style lang="scss" >
|
41
|
+
$n: 9; //和items.length 相同
|
42
|
+
$t: .1s;
|
43
|
+
.share-dropdown-menu {
|
44
|
+
width: 250px;
|
45
|
+
position: relative;
|
46
|
+
z-index: 1;
|
47
|
+
height: auto!important;
|
48
|
+
&-title {
|
49
|
+
width: 100%;
|
50
|
+
display: block;
|
51
|
+
cursor: pointer;
|
52
|
+
background: black;
|
53
|
+
color: white;
|
54
|
+
height: 60px;
|
55
|
+
line-height: 60px;
|
56
|
+
font-size: 20px;
|
57
|
+
text-align: center;
|
58
|
+
z-index: 2;
|
59
|
+
transform: translate3d(0,0,0);
|
60
|
+
}
|
61
|
+
&-wrapper {
|
62
|
+
position: relative;
|
63
|
+
}
|
64
|
+
&-item {
|
65
|
+
text-align: center;
|
66
|
+
position: absolute;
|
67
|
+
width: 100%;
|
68
|
+
background: #e0e0e0;
|
69
|
+
color: #000;
|
70
|
+
line-height: 60px;
|
71
|
+
height: 60px;
|
72
|
+
cursor: pointer;
|
73
|
+
font-size: 18px;
|
74
|
+
overflow: hidden;
|
75
|
+
opacity: 1;
|
76
|
+
transition: transform 0.28s ease;
|
77
|
+
&:hover {
|
78
|
+
background: black;
|
79
|
+
color: white;
|
80
|
+
}
|
81
|
+
@for $i from 1 through $n {
|
82
|
+
&:nth-of-type(#{$i}) {
|
83
|
+
z-index: -1;
|
84
|
+
transition-delay: $i*$t;
|
85
|
+
transform: translate3d(0, -60px, 0);
|
86
|
+
}
|
87
|
+
}
|
88
|
+
}
|
89
|
+
&.active {
|
90
|
+
.share-dropdown-menu-wrapper {
|
91
|
+
z-index: 1;
|
92
|
+
}
|
93
|
+
.share-dropdown-menu-item {
|
94
|
+
@for $i from 1 through $n {
|
95
|
+
&:nth-of-type(#{$i}) {
|
96
|
+
transition-delay: ($n - $i)*$t;
|
97
|
+
transform: translate3d(0, ($i - 1)*60px, 0);
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
102
|
+
}
|
103
|
+
</style>
|
@@ -0,0 +1,57 @@
|
|
1
|
+
<template>
|
2
|
+
<el-dropdown trigger="click" @command="handleSetSize">
|
3
|
+
<div>
|
4
|
+
<svg-icon class-name="size-icon" icon-class="size" />
|
5
|
+
</div>
|
6
|
+
<el-dropdown-menu slot="dropdown">
|
7
|
+
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
|
8
|
+
{{
|
9
|
+
item.label }}
|
10
|
+
</el-dropdown-item>
|
11
|
+
</el-dropdown-menu>
|
12
|
+
</el-dropdown>
|
13
|
+
</template>
|
14
|
+
|
15
|
+
<script>
|
16
|
+
export default {
|
17
|
+
data() {
|
18
|
+
return {
|
19
|
+
sizeOptions: [
|
20
|
+
{ label: 'Default', value: 'default' },
|
21
|
+
{ label: 'Medium', value: 'medium' },
|
22
|
+
{ label: 'Small', value: 'small' },
|
23
|
+
{ label: 'Mini', value: 'mini' }
|
24
|
+
]
|
25
|
+
}
|
26
|
+
},
|
27
|
+
computed: {
|
28
|
+
size() {
|
29
|
+
return this.$store.getters.size
|
30
|
+
}
|
31
|
+
},
|
32
|
+
methods: {
|
33
|
+
handleSetSize(size) {
|
34
|
+
this.$ELEMENT.size = size
|
35
|
+
this.$store.dispatch('app/setSize', size)
|
36
|
+
this.refreshView()
|
37
|
+
this.$message({
|
38
|
+
message: 'Switch Size Success',
|
39
|
+
type: 'success'
|
40
|
+
})
|
41
|
+
},
|
42
|
+
refreshView() {
|
43
|
+
// In order to make the cached page re-rendered
|
44
|
+
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
|
45
|
+
|
46
|
+
const { fullPath } = this.$route
|
47
|
+
|
48
|
+
this.$nextTick(() => {
|
49
|
+
this.$router.replace({
|
50
|
+
path: '/redirect' + fullPath
|
51
|
+
})
|
52
|
+
})
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
}
|
57
|
+
</script>
|
@@ -0,0 +1,91 @@
|
|
1
|
+
<template>
|
2
|
+
<div :style="{height:height+'px',zIndex:zIndex}">
|
3
|
+
<div
|
4
|
+
:class="className"
|
5
|
+
:style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
|
6
|
+
>
|
7
|
+
<slot>
|
8
|
+
<div>sticky</div>
|
9
|
+
</slot>
|
10
|
+
</div>
|
11
|
+
</div>
|
12
|
+
</template>
|
13
|
+
|
14
|
+
<script>
|
15
|
+
export default {
|
16
|
+
name: 'Sticky',
|
17
|
+
props: {
|
18
|
+
stickyTop: {
|
19
|
+
type: Number,
|
20
|
+
default: 0
|
21
|
+
},
|
22
|
+
zIndex: {
|
23
|
+
type: Number,
|
24
|
+
default: 1
|
25
|
+
},
|
26
|
+
className: {
|
27
|
+
type: String,
|
28
|
+
default: ''
|
29
|
+
}
|
30
|
+
},
|
31
|
+
data() {
|
32
|
+
return {
|
33
|
+
active: false,
|
34
|
+
position: '',
|
35
|
+
width: undefined,
|
36
|
+
height: undefined,
|
37
|
+
isSticky: false
|
38
|
+
}
|
39
|
+
},
|
40
|
+
mounted() {
|
41
|
+
this.height = this.$el.getBoundingClientRect().height
|
42
|
+
window.addEventListener('scroll', this.handleScroll)
|
43
|
+
window.addEventListener('resize', this.handleResize)
|
44
|
+
},
|
45
|
+
activated() {
|
46
|
+
this.handleScroll()
|
47
|
+
},
|
48
|
+
destroyed() {
|
49
|
+
window.removeEventListener('scroll', this.handleScroll)
|
50
|
+
window.removeEventListener('resize', this.handleResize)
|
51
|
+
},
|
52
|
+
methods: {
|
53
|
+
sticky() {
|
54
|
+
if (this.active) {
|
55
|
+
return
|
56
|
+
}
|
57
|
+
this.position = 'fixed'
|
58
|
+
this.active = true
|
59
|
+
this.width = this.width + 'px'
|
60
|
+
this.isSticky = true
|
61
|
+
},
|
62
|
+
handleReset() {
|
63
|
+
if (!this.active) {
|
64
|
+
return
|
65
|
+
}
|
66
|
+
this.reset()
|
67
|
+
},
|
68
|
+
reset() {
|
69
|
+
this.position = ''
|
70
|
+
this.width = 'auto'
|
71
|
+
this.active = false
|
72
|
+
this.isSticky = false
|
73
|
+
},
|
74
|
+
handleScroll() {
|
75
|
+
const width = this.$el.getBoundingClientRect().width
|
76
|
+
this.width = width || 'auto'
|
77
|
+
const offsetTop = this.$el.getBoundingClientRect().top
|
78
|
+
if (offsetTop < this.stickyTop) {
|
79
|
+
this.sticky()
|
80
|
+
return
|
81
|
+
}
|
82
|
+
this.handleReset()
|
83
|
+
},
|
84
|
+
handleResize() {
|
85
|
+
if (this.isSticky) {
|
86
|
+
this.width = this.$el.getBoundingClientRect().width + 'px'
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|
91
|
+
</script>
|
@@ -0,0 +1,62 @@
|
|
1
|
+
<template>
|
2
|
+
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
|
3
|
+
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
|
4
|
+
<use :xlink:href="iconName" />
|
5
|
+
</svg>
|
6
|
+
</template>
|
7
|
+
|
8
|
+
<script>
|
9
|
+
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
|
10
|
+
import { isExternal } from '@/utils/validate'
|
11
|
+
|
12
|
+
export default {
|
13
|
+
name: 'SvgIcon',
|
14
|
+
props: {
|
15
|
+
iconClass: {
|
16
|
+
type: String,
|
17
|
+
required: true
|
18
|
+
},
|
19
|
+
className: {
|
20
|
+
type: String,
|
21
|
+
default: ''
|
22
|
+
}
|
23
|
+
},
|
24
|
+
computed: {
|
25
|
+
isExternal() {
|
26
|
+
return isExternal(this.iconClass)
|
27
|
+
},
|
28
|
+
iconName() {
|
29
|
+
return `#icon-${this.iconClass}`
|
30
|
+
},
|
31
|
+
svgClass() {
|
32
|
+
if (this.className) {
|
33
|
+
return 'svg-icon ' + this.className
|
34
|
+
} else {
|
35
|
+
return 'svg-icon'
|
36
|
+
}
|
37
|
+
},
|
38
|
+
styleExternalIcon() {
|
39
|
+
return {
|
40
|
+
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
|
41
|
+
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
|
42
|
+
}
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
46
|
+
</script>
|
47
|
+
|
48
|
+
<style scoped>
|
49
|
+
.svg-icon {
|
50
|
+
width: 1em;
|
51
|
+
height: 1em;
|
52
|
+
vertical-align: -0.15em;
|
53
|
+
fill: currentColor;
|
54
|
+
overflow: hidden;
|
55
|
+
}
|
56
|
+
|
57
|
+
.svg-external-icon {
|
58
|
+
background-color: currentColor;
|
59
|
+
mask-size: cover!important;
|
60
|
+
display: inline-block;
|
61
|
+
}
|
62
|
+
</style>
|