'admin-21.04.29:更新最新依赖、新增大图预览及其它组件演示效果优化'

package.json

@@ -32,7 +32,7 @@
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^15.0.0",
+		"@types/node": "^15.0.1",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.6",
 		"@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -43,7 +43,7 @@
 		"eslint": "^7.25.0",
 		"eslint-plugin-vue": "^7.9.0",
 		"prettier": "^2.2.1",
-		"sass": "^1.32.11",
+		"sass": "^1.32.12",
 		"sass-loader": "^11.0.1",
 		"typescript": "^4.2.4",
 		"vite": "^2.2.3",

src/i18n/lang/en.ts

@@ -45,6 +45,7 @@ export default {
 		pagesListAdapt: 'ListAdapt',
 		pagesWaterfall: 'Waterfall',
 		pagesSteps: 'Steps',
+		pagesPreview: 'Large preview',
 		chartIndex: 'chartIndex',
 		personal: 'personal',
 		tools: 'tools',

src/i18n/lang/zh-cn.ts

@@ -45,6 +45,7 @@ export default {
 		pagesListAdapt: '列表自适应',
 		pagesWaterfall: '瀑布屏',
 		pagesSteps: '步骤条',
+		pagesPreview: '大图预览',
 		chartIndex: '大数据图表',
 		personal: '个人中心',
 		tools: '工具类集合',

src/i18n/lang/zh-tw.ts

@@ -45,6 +45,7 @@ export default {
 		pagesListAdapt: '清單自我調整',
 		pagesWaterfall: '瀑布屏',
 		pagesSteps: '步驟條',
+		pagesPreview: '大圖預覽',
 		chartIndex: '大資料圖表',
 		personal: '個人中心',
 		tools: '工具類集合',

src/router/index.ts

@@ -697,6 +697,21 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-step',
 						},
 					},
+					{
+						path: '/pages/preview',
+						name: 'pagesPreview',
+						component: () => import('/@/views/pages/preview/index.vue'),
+						meta: {
+							title: 'message.router.pagesPreview',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-15tupianyulan',
+						},
+					},
 				],
 			},
 			{

src/theme/element.scss

@@ -583,6 +583,25 @@
 	background-color: set-color(info);
 }
 
+/* Result 结果
+------------------------------- */
+// success
+.el-result .icon-success {
+	fill: set-color(success);
+}
+// warning
+.el-result .icon-warning {
+	fill: set-color(warning);
+}
+// error
+.el-result .icon-error {
+	fill: set-color(danger);
+}
+// info
+.el-result .icon-info {
+	fill: set-color(info);
+}
+
 /* Alert 警告
 ------------------------------- */
 // success

src/utils/setIconfont.ts

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

src/views/layout/navBars/breadcrumb/setings.vue

@@ -654,7 +654,7 @@ export default defineComponent({
 						onWartermarkChange();
 						// 语言国际化
 						if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
-					}, 1000);
+					}, 1100);
 				});
 			});
 		});

src/views/pages/awesome/index.vue

@@ -56,7 +56,11 @@ export default {
 			height: 120px;
 			overflow: hidden;
 			display: flex;
+			transition: all 0.3s ease;
 			&:hover {
+				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+				cursor: pointer;
+				transition: all 0.3s ease;
 				.iconfont-warp-value {
 					i {
 						color: var(--color-primary);

src/views/pages/element/index.vue

@@ -57,7 +57,11 @@ export default {
 			height: 120px;
 			overflow: hidden;
 			display: flex;
+			transition: all 0.3s ease;
 			&:hover {
+				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+				cursor: pointer;
+				transition: all 0.3s ease;
 				.iconfont-warp-value {
 					i {
 						color: var(--color-primary);

src/views/pages/formAdapt/index.vue

@@ -72,7 +72,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
 						<el-form-item>
-							<el-button type="primary" icon="el-icon-position">更新个人信息</el-button>
+							<el-button type="primary" icon="iconfont icon-biaodan">更新个人信息</el-button>
 						</el-form-item>
 					</el-col>
 				</el-row>

src/views/pages/iocnfont/index.vue

@@ -53,7 +53,11 @@ export default {
 			height: 120px;
 			overflow: hidden;
 			display: flex;
+			transition: all 0.3s ease;
 			&:hover {
+				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+				cursor: pointer;
+				transition: all 0.3s ease;
 				.iconfont-warp-value {
 					i {
 						color: var(--color-primary);

src/views/pages/preview/index.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="preview-container">
+		<el-card shadow="hover" header="element-plus 大图预览">
+			<el-image style="width: 100px; height: 100px; border-radius: 5px" :src="url" :preview-src-list="srcList" title="点击查看大图预览"> </el-image>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'pagesPreview',
+	setup() {
+		const state = reactive({
+			url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
+			srcList: [
+				'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
+				'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
+				'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+			],
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>

src/views/pages/steps/index.vue

@@ -6,7 +6,10 @@
 				<el-step title="第二步" icon="iconfont icon-2_round_solid"></el-step>
 				<el-step title="第三步" icon="iconfont icon-3_round_solid"></el-step>
 			</el-steps>
-			<el-button @click="onNextSteps" size="small" class="mt15" type="primary">下一步</el-button>
+			<el-result icon="error" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
+			<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
+			<el-result icon="success" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
+			<el-button @click="onNextSteps" size="small" class="mt15" type="primary" icon="iconfont icon-step">下一步</el-button>
 		</el-card>
 	</div>
 </template>