'admin-21.03.22:新增打印、瀑布屏演示等'

README.md

@@ -7,10 +7,10 @@
 	    <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
 	        <img src="https://img.shields.io/badge/element--plus-%3E1.0.0-blue" alt="element plus">
 	    </a>
-		<a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
+		<a href="https://www.tslang.cn/" target="_blank">
 	        <img src="https://img.shields.io/badge/typescript-%3E4.0.0-blue" alt="typescript">
 	    </a>
-		<a href="https://gitee.com/lyt-top/vue-admin-wonderful-next/blob/master/LICENSE" target="_blank">
+		<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/LICENSE" target="_blank">
 		    <img src="https://img.shields.io/badge/vite-%3E2.0.0-yellow" alt="license">
 		</a>
 		<a href="https://vitejs.dev/" target="_blank">
@@ -117,6 +117,7 @@ cnpm run build
 - <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
 - <a href="https://github.com/antvis/g6" target="_blank">@antv/g6</a>
 - <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">qrcodejs</a>
+- <a href="https://github.com/crabbly/Print.js" target="_blank">print-js</a>
 
 #### 特别感谢
 

package.json

@@ -7,32 +7,33 @@
 		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
 	},
 	"dependencies": {
-		"@antv/g6": "^4.2.0",
+		"@antv/g6": "^4.2.1",
 		"axios": "^0.21.1",
 		"clipboard": "^2.0.8",
 		"countup.js": "^2.0.7",
 		"cropperjs": "^1.5.11",
 		"echarts": "^5.0.2",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.34",
+		"element-plus": "^1.0.2-beta.35",
 		"mitt": "^2.1.0",
 		"nprogress": "^0.2.0",
+		"print-js": "^1.6.0",
 		"qrcodejs2-fixes": "^0.0.2",
 		"screenfull": "^5.1.0",
 		"sortablejs": "^1.13.0",
 		"vue": "^3.0.5",
 		"vue-router": "^4.0.2",
 		"vuex": "^4.0.0-rc.2",
-		"wangeditor": "^4.6.9"
+		"wangeditor": "^4.6.10"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^14.14.34",
+		"@types/node": "^14.14.35",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.6",
-		"@typescript-eslint/eslint-plugin": "^4.17.0",
+		"@typescript-eslint/eslint-plugin": "^4.18.0",
-		"@typescript-eslint/parser": "^4.17.0",
+		"@typescript-eslint/parser": "^4.18.0",
 		"@vitejs/plugin-vue": "^1.1.5",
 		"@vue/compiler-sfc": "^3.0.7",
 		"dotenv": "^8.2.0",
@@ -42,7 +43,7 @@
 		"sass": "^1.32.8",
 		"sass-loader": "^11.0.1",
 		"typescript": "^4.2.3",
-		"vite": "^2.0.5",
+		"vite": "^2.1.2",
 		"vue-eslint-parser": "^7.6.0"
 	}
 }

src/router/index.ts

@@ -452,6 +452,21 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-ditu',
 						},
 					},
+					{
+						path: '/fun/printJs',
+						name: 'printJs',
+						component: () => import('/@/views/fun/printJs/index.vue'),
+						meta: {
+							title: '页面打印',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'el-icon-printer',
+						},
+					},
 				],
 			},
 			{
@@ -605,6 +620,21 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-chazhaobiaodanliebiao',
 						},
 					},
+					{
+						path: '/pages/waterfall',
+						name: 'waterfall',
+						component: () => import('/@/views/pages/waterfall/index.vue'),
+						meta: {
+							title: '瀑布屏',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-zidingyibuju',
+						},
+					},
 					{
 						path: '/pages/steps',
 						name: 'steps',

src/theme/element.scss

@@ -127,6 +127,27 @@
 .el-button--danger:active {
 	@include Button(whites, danger, danger);
 }
+// 第三方字体图标大小
+.el-button i.iconfont,
+.el-button i.fa {
+	font-size: 14px !important;
+	margin-right: 5px;
+}
+.el-button--medium i.iconfont,
+.el-button--medium i.fa {
+	font-size: 14px !important;
+	margin-right: 5px;
+}
+.el-button--small i.iconfont,
+.el-button--small i.fa {
+	font-size: 12px !important;
+	margin-right: 5px;
+}
+.el-button--mini i.iconfont,
+.el-button--mini i.fa {
+	font-size: 12px !important;
+	margin-right: 5px;
+}
 
 /* Link 文字链接
 ------------------------------- */
@@ -604,6 +625,9 @@
 .el-alert--error.is-light .el-alert__description {
 	color: set-color(danger);
 }
+.el-alert__title {
+	word-break: break-all;
+}
 
 /* Loading 加载
 ------------------------------- */

src/utils/setIconfont.ts

@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_1pnb6uhuq4e.css',
+	'//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url

src/views/fun/printJs/index.vue

@@ -0,0 +1,38 @@
+<template>
+	<div id="printRref">
+		<el-card shadow="hover" header="打印演示">
+			<el-alert
+				title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<el-button @click="onPrintJs" size="small" type="primary" icon="iconfont icon-dayin">点击打印演示</el-button>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import printJs from 'print-js';
+export default {
+	name: 'printJs',
+	setup() {
+		const state = reactive({});
+		// 打印点击
+		const onPrintJs = () => {
+			printJs({
+				printable: 'printRref',
+				type: 'html',
+				css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', 'https://unpkg.com/element-plus/lib/theme-chalk/index.css'],
+				scanStyles: false,
+				style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
+			});
+		};
+		return {
+			onPrintJs,
+			...toRefs(state),
+		};
+	},
+};
+</script>

src/views/pages/waterfall/index.vue

@@ -0,0 +1,179 @@
+<template>
+	<div class="waterfall-container">
+		<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
+			<div class="waterfall-first">
+				<div class="waterfall-first-item" v-for="v in 30" :key="v">
+					<div class="w100 h100 flex">
+						<span class="flex-margin">{{ v }}</span>
+					</div>
+				</div>
+			</div>
+		</el-card>
+		<el-card shadow="hover" header="瀑布屏（布局二）">
+			<div class="waterfall-last">
+				<div class="waterfall-last-item" v-for="v in 30" :key="v">
+					<div class="w100 h100 flex">
+						<span class="flex-margin">{{ v }}</span>
+					</div>
+				</div>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'waterfall',
+	setup() {
+		const state = reactive({});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.waterfall-container {
+	.waterfall-first {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
+		grid-gap: 0.25em;
+		grid-auto-flow: row dense;
+		grid-auto-rows: 20px;
+		.waterfall-first-item {
+			width: 100%;
+			background: var(--color-primary);
+			color: #ffffff;
+			transition: all 0.3s ease;
+			border-radius: 3px;
+			&:nth-of-type(3n + 1) {
+				grid-row: auto / span 5;
+			}
+			&:nth-of-type(3n + 2) {
+				grid-row: auto / span 6;
+			}
+			&:nth-of-type(3n + 3) {
+				grid-row: auto / span 8;
+			}
+			&:hover {
+				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+				transition: all 0.3s ease;
+				cursor: pointer;
+			}
+			&:active {
+				opacity: 0.5;
+			}
+		}
+	}
+	.waterfall-last {
+		display: grid;
+		grid-gap: 0.25em;
+		grid-auto-flow: row dense;
+		grid-auto-rows: minmax(188px, 20vmin);
+		grid-template-columns: 1fr;
+		.waterfall-last-item {
+			height: 100%;
+			background: var(--color-primary);
+			color: #ffffff;
+			transition: all 0.3s ease;
+			border-radius: 3px;
+			&:hover {
+				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+				transition: all 0.3s ease;
+				cursor: pointer;
+			}
+			&:active {
+				opacity: 0.5;
+			}
+		}
+	}
+	@media (min-width: 576px) {
+		.waterfall-last {
+			grid-template-columns: repeat(7, 1fr);
+			.waterfall-last-item {
+				&:nth-of-type(9n + 9) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 8) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 7) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(9n + 6) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 5) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(9n + 4) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 3) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(9n + 2) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(9n + 1) {
+					grid-column: auto / span 2;
+				}
+			}
+		}
+	}
+	@media (min-width: 576px) and (min-width: 1024px) {
+		.waterfall-last {
+			grid-template-columns: repeat(14, 1fr);
+			.waterfall-last-item {
+				&:nth-of-type(15n + 15) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 14) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 13) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(15n + 12) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 11) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 10) {
+					grid-column: auto / span 2;
+				}
+				&:nth-of-type(15n + 9) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 8) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 7) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 6) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 5) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 4) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 3) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 2) {
+					grid-column: auto / span 3;
+				}
+				&:nth-of-type(15n + 1) {
+					grid-column: auto / span 2;
+				}
+			}
+		}
+	}
+}
+</style>