chore(入口页面): 调整文件结构
This commit is contained in:
parent
17aca66489
commit
b8cc5e3b4e
@ -7,13 +7,13 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'root',
|
name: 'root',
|
||||||
component: () => import('../views/LoadingView.vue'),
|
component: () => import('../views/LandingPage/LoadingView.vue'),
|
||||||
meta: { requiresAuth: false, isPublic: true },
|
meta: { requiresAuth: false, isPublic: true },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/loading',
|
path: '/loading',
|
||||||
name: 'loading',
|
name: 'loading',
|
||||||
component: () => import('../views/LoadingView.vue'),
|
component: () => import('../views/LandingPage/LoadingView.vue'),
|
||||||
meta: { requiresAuth: false, isPublic: true },
|
meta: { requiresAuth: false, isPublic: true },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -68,7 +68,7 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
name: 'about',
|
name: 'about',
|
||||||
component: () => import('../views/AboutView.vue'),
|
component: () => import('../views/LandingPage/AboutView.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/host-setting',
|
path: '/host-setting',
|
||||||
@ -134,7 +134,7 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: '/not_app',
|
path: '/not_app',
|
||||||
name: 'not-app',
|
name: 'not-app',
|
||||||
component: () => import('../views/NotAppView.vue'),
|
component: () => import('../views/LandingPage/NotAppView.vue'),
|
||||||
meta: { requiresAuth: false },
|
meta: { requiresAuth: false },
|
||||||
},
|
},
|
||||||
// 404 页面
|
// 404 页面
|
||||||
|
|||||||
@ -47,9 +47,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted } from 'vue'
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { isInApp, connectApplication, parseAccessOrigin, parseHeader, setHttpHeaders } from '../utils/appBridge.js'
|
import {
|
||||||
import { appConnectionManager } from '../utils/appConnectionManager.js'
|
isInApp,
|
||||||
import {getDefaultPage} from "@/utils/permissionManager.js";
|
connectApplication,
|
||||||
|
parseAccessOrigin,
|
||||||
|
parseHeader,
|
||||||
|
setHttpHeaders,
|
||||||
|
} from '@/utils/appBridge.js'
|
||||||
|
import { appConnectionManager } from '@/utils/appConnectionManager.js'
|
||||||
|
import { getDefaultPage } from '@/utils/permissionManager.js'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
@ -62,7 +68,7 @@ const checkShouldRedirect = () => {
|
|||||||
console.log('Checking redirect conditions:', {
|
console.log('Checking redirect conditions:', {
|
||||||
path: currentPath,
|
path: currentPath,
|
||||||
name: routeName,
|
name: routeName,
|
||||||
url: window.location.href
|
url: window.location.href,
|
||||||
})
|
})
|
||||||
|
|
||||||
// 只有当访问根路径或loading页面时,才执行自动跳转
|
// 只有当访问根路径或loading页面时,才执行自动跳转
|
||||||
@ -72,7 +78,7 @@ const checkShouldRedirect = () => {
|
|||||||
console.log('Redirect decision:', {
|
console.log('Redirect decision:', {
|
||||||
isRootAccess,
|
isRootAccess,
|
||||||
isLoadingAccess,
|
isLoadingAccess,
|
||||||
shouldRedirect: isRootAccess || isLoadingAccess
|
shouldRedirect: isRootAccess || isLoadingAccess,
|
||||||
})
|
})
|
||||||
|
|
||||||
return isRootAccess || isLoadingAccess
|
return isRootAccess || isLoadingAccess
|
||||||
@ -88,7 +94,7 @@ const loadingSteps = [
|
|||||||
{ text: 'Connecting to server...', subText: 'Establishing secure connection', duration: 200 },
|
{ text: 'Connecting to server...', subText: 'Establishing secure connection', duration: 200 },
|
||||||
{ text: 'Loading user data...', subText: 'Retrieving your information', duration: 300 },
|
{ text: 'Loading user data...', subText: 'Retrieving your information', duration: 300 },
|
||||||
{ text: 'Setting up interface...', subText: 'Preparing your workspace', duration: 200 },
|
{ text: 'Setting up interface...', subText: 'Preparing your workspace', duration: 200 },
|
||||||
{ text: 'Almost ready...', subText: 'Finalizing setup', duration: 200 }
|
{ text: 'Almost ready...', subText: 'Finalizing setup', duration: 200 },
|
||||||
]
|
]
|
||||||
|
|
||||||
let currentStepIndex = 0
|
let currentStepIndex = 0
|
||||||
@ -119,7 +125,6 @@ const startLoading = async () => {
|
|||||||
|
|
||||||
// 跳转到目标页面
|
// 跳转到目标页面
|
||||||
await navigateToTargetPage()
|
await navigateToTargetPage()
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Loading failed:', error)
|
console.error('Loading failed:', error)
|
||||||
// 出错时跳转到错误页面
|
// 出错时跳转到错误页面
|
||||||
@ -153,7 +158,7 @@ const connectToApp = async () => {
|
|||||||
const startProgressAnimation = () => {
|
const startProgressAnimation = () => {
|
||||||
let currentProgress = 0
|
let currentProgress = 0
|
||||||
const totalDuration = loadingSteps.reduce((sum, step) => sum + step.duration, 0)
|
const totalDuration = loadingSteps.reduce((sum, step) => sum + step.duration, 0)
|
||||||
const progressIncrement = 100 / totalDuration * 50 // 每50ms增加的进度
|
const progressIncrement = (100 / totalDuration) * 50 // 每50ms增加的进度
|
||||||
|
|
||||||
progressInterval = setInterval(() => {
|
progressInterval = setInterval(() => {
|
||||||
currentProgress += progressIncrement
|
currentProgress += progressIncrement
|
||||||
@ -184,7 +189,7 @@ const updateLoadingStep = () => {
|
|||||||
|
|
||||||
// 等待加载完成
|
// 等待加载完成
|
||||||
const waitForLoadingComplete = () => {
|
const waitForLoadingComplete = () => {
|
||||||
return new Promise(resolve => {
|
return new Promise((resolve) => {
|
||||||
const totalTime = loadingSteps.reduce((sum, step) => sum + step.duration, 0)
|
const totalTime = loadingSteps.reduce((sum, step) => sum + step.duration, 0)
|
||||||
setTimeout(resolve, totalTime)
|
setTimeout(resolve, totalTime)
|
||||||
})
|
})
|
||||||
@ -203,7 +208,12 @@ const navigateToTargetPage = async () => {
|
|||||||
|
|
||||||
// 只有当访问根路径 ("/") 或者 loading 页面时,才跳转到默认页面
|
// 只有当访问根路径 ("/") 或者 loading 页面时,才跳转到默认页面
|
||||||
// 其他所有具体路径都不应该被重定向
|
// 其他所有具体路径都不应该被重定向
|
||||||
if (currentPath === '/' || routeName === 'root' || currentPath === '/loading' || routeName === 'loading') {
|
if (
|
||||||
|
currentPath === '/' ||
|
||||||
|
routeName === 'root' ||
|
||||||
|
currentPath === '/loading' ||
|
||||||
|
routeName === 'loading'
|
||||||
|
) {
|
||||||
console.log('Navigating to default page from root or loading')
|
console.log('Navigating to default page from root or loading')
|
||||||
router.replace(getDefaultPage())
|
router.replace(getDefaultPage())
|
||||||
} else {
|
} else {
|
||||||
@ -262,16 +272,20 @@ onUnmounted(() => {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background:
|
background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
|
||||||
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
|
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
|
||||||
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
|
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
|
||||||
animation: backgroundShift 10s ease-in-out infinite;
|
animation: backgroundShift 10s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes backgroundShift {
|
@keyframes backgroundShift {
|
||||||
0%, 100% { transform: translateX(0) translateY(0); }
|
0%,
|
||||||
50% { transform: translateX(-10px) translateY(-5px); }
|
100% {
|
||||||
|
transform: translateX(0) translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-10px) translateY(-5px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-content {
|
.loading-content {
|
||||||
@ -297,8 +311,13 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes logoFloat {
|
@keyframes logoFloat {
|
||||||
0%, 100% { transform: translateY(0); }
|
0%,
|
||||||
50% { transform: translateY(-10px); }
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-icon {
|
.logo-icon {
|
||||||
@ -356,8 +375,12 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% { transform: rotate(0deg); }
|
0% {
|
||||||
100% { transform: rotate(360deg); }
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-text {
|
.loading-text {
|
||||||
Loading…
x
Reference in New Issue
Block a user