Add 添加移动端home页面

UI/VAP_V3.VUE/src/core/utils/index.ts

@@ -692,11 +692,11 @@ export function isNumberStr(str: string) {
 	return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }
 
-export const getAssetPath = (path: string): string => {
+export function getAssetPath(path: string) {
 	return import.meta.env.BASE_URL + path
 }
 
-function blob2Base64(blob: any) {
+export function blob2Base64(blob: any) {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader()
 		reader.addEventListener("load", () => {
@@ -709,3 +709,8 @@ function blob2Base64(blob: any) {
 		reader.readAsDataURL(blob)
 	})
 }
+
+// 检测是否为移动设备
+export function isMobile() {
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+}

UI/VAP_V3.VUE/src/router/_staticRouter.ts

@@ -31,6 +31,19 @@ export const staticRouter: RouteRecordRaw[] = [
 			noCache: true
 		}
 	},
+	{
+		path: "/",
+		children: [
+			{
+				path: "/m-home",
+				name: "m-home",
+				component: () => import("@/views/mobile-home.vue"),
+				meta: {
+					title: "移动端首页"
+				}
+			}
+		]
+	},
 	{
 		path: "/",
 		children: [

UI/VAP_V3.VUE/src/views/home.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from "vue"
+import { useRouter } from "vue-router"
+
 const name = ref("中科轼峰")
+const router = useRouter()
+
 onMounted(() => {
+	// 如果是移动设备，跳转到移动端主页
+	if (isMobile()) {
+		router.replace("/m-home")
+		return
+	}
+
 	document.querySelector("body")?.classList.add("is-home")
 })
+
 onBeforeUnmount(() => {
 	document.querySelector("body")?.classList.remove("is-home")
 })

UI/VAP_V3.VUE/src/views/mobile-home.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import appStore from "@s"
+import { ref, onBeforeUnmount } from "vue"
+import VbQrScan from "@/components/qrcode/VbQrScan.vue"
+
+const name = ref("中科轼峰")
+const showScanner = ref(false)
+const scanResult = ref("")
+
+onBeforeUnmount(() => {
+	document.querySelector("body")?.classList.remove("is-mobile-home")
+})
+
+function handleScan() {
+	// 使用新创建的扫码组件
+	showScanner.value = true
+}
+
+function handleScanResult(result: string) {
+	scanResult.value = result
+	alert("扫描结果: " + result)
+}
+
+function handleCloseScanner() {
+	showScanner.value = false
+}
+</script>
+
+<template>
+	<div class="mobile-home-page">
+		<div class="home-page">
+			<div class="header">
+				<h1 class="animated-title">{{ name }}</h1>
+				<div class="subtitle">移动工作平台</div>
+			</div>
+
+			<div class="content">
+				<div class="avatar-wrapper">
+					<vb-symbol
+						:text="appStore.authStore.user.nickName"
+						:src="appStore.authStore.user.avatar"
+						:size="100"
+						shape="circle" />
+				</div>
+
+				<div class="welcome-card">
+					<div class="welcome-message">
+						<h2>欢迎您，{{ appStore.authStore.user.nickName }} ！</h2>
+						<p class="welcome-text">祝您使用愉快</p>
+					</div>
+				</div>
+
+				<div class="actions">
+					<el-button type="primary" round style="" @click="handleScan">
+						<i class="bi bi-qr-code-scan me-3 text-white fs-2"></i>
+						<span class="fs-2">扫一扫</span>
+					</el-button>
+				</div>
+			</div>
+
+			<div class="footer">
+				<p>&copy; {{ new Date().getFullYear() }} 中科轼峰. 保留所有权利.</p>
+			</div>
+		</div>
+		<!-- 扫码组件 -->
+		<VbQrScan
+			v-if="showScanner"
+			:enable-torch="true"
+			:continuous="false"
+			@close="handleCloseScanner"
+			@scanSuccess="handleScanResult" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.mobile-home-page {
+	width: 100%;
+	height: 100vh;
+	overflow: hidden;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	display: flex;
+	justify-content: center;
+}
+.home-page {
+	width: 100%;
+	max-width: 500px;
+	height: 100%;
+	color: white;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: -50%;
+		left: -50%;
+		width: 200%;
+		height: 200%;
+		background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+		transform: rotate(30deg);
+		z-index: 0;
+	}
+
+	.header {
+		text-align: center;
+		padding: 30px 20px 10px;
+		position: relative;
+		z-index: 1;
+
+		.animated-title {
+			font-size: 2.2rem;
+			font-weight: 800;
+			margin-bottom: 5px;
+			background: linear-gradient(45deg, #ffffff, #ffd700, #ffffff);
+			background-size: 200% auto;
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+			animation: shine 3s linear infinite;
+			text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+			letter-spacing: 1px;
+		}
+
+		.subtitle {
+			font-size: 1.1rem;
+			opacity: 0.9;
+			letter-spacing: 2px;
+			font-weight: 300;
+		}
+	}
+
+	.content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: -20%;
+		padding: 10px 20px;
+		position: relative;
+		z-index: 1;
+
+		.avatar-wrapper {
+			margin-bottom: -40px;
+			z-index: 2;
+			border: 4px solid rgba(255, 255, 255, 0.3);
+			border-radius: 50%;
+			background: rgba(255, 255, 255, 0.1);
+			backdrop-filter: blur(5px);
+
+			:deep(.symbol) {
+				border-radius: 50%;
+				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+			}
+		}
+
+		.welcome-card {
+			background: rgba(255, 255, 255, 0.15);
+			backdrop-filter: blur(10px);
+			border-radius: 20px;
+			padding: 60px 20px 30px;
+			text-align: center;
+			margin-bottom: 50px;
+			width: 90%;
+			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+			border: 1px solid rgba(255, 255, 255, 0.18);
+
+			.welcome-message {
+				h2 {
+					font-size: 1.6rem;
+					margin-bottom: 10px;
+					font-weight: 600;
+					text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+				}
+
+				.welcome-text {
+					font-size: 1.1rem;
+					opacity: 0.9;
+					letter-spacing: 1px;
+				}
+			}
+		}
+
+		.actions {
+			width: 90%;
+
+			:deep(.el-button) {
+				width: 100%;
+				height: 45px;
+				font-size: 1rem;
+			}
+		}
+	}
+
+	.footer {
+		text-align: center;
+		padding: 15px;
+		font-size: 0.8rem;
+		opacity: 0.7;
+		position: relative;
+		z-index: 1;
+	}
+}
+</style>