更新网站架构
This commit is contained in:
parent
b6294200a7
commit
8a33f6cd9f
@ -1,6 +1,5 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import { constantRoute, registerDynamicRoutes } from './routes';
|
import { constantRoute, registerDynamicRoutes } from './routes';
|
||||||
import { getHeadMenu } from '@/api/index';
|
|
||||||
|
|
||||||
// 先创建路由,但不立即匹配
|
// 先创建路由,但不立即匹配
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
@ -25,21 +24,6 @@ export async function loadAndRegisterRoutes() {
|
|||||||
return routesLoadingPromise;
|
return routesLoadingPromise;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 开始加载
|
|
||||||
routesLoadingPromise = (async () => {
|
|
||||||
try {
|
|
||||||
const response = await getHeadMenu();
|
|
||||||
if (response.code === 200 && response.data) {
|
|
||||||
registerDynamicRoutes(router, response.data);
|
|
||||||
routesLoaded = true;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load menus and register routes:', error);
|
|
||||||
} finally {
|
|
||||||
routesLoadingPromise = null;
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
return routesLoadingPromise;
|
return routesLoadingPromise;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,9 +31,7 @@ export async function loadAndRegisterRoutes() {
|
|||||||
router.beforeEach(async (to, _from, next) => {
|
router.beforeEach(async (to, _from, next) => {
|
||||||
// 如果路由还未加载,先加载路由
|
// 如果路由还未加载,先加载路由
|
||||||
if (!routesLoaded) {
|
if (!routesLoaded) {
|
||||||
if (!routesLoadingPromise) {
|
|
||||||
routesLoadingPromise = loadAndRegisterRoutes();
|
|
||||||
}
|
|
||||||
// 等待路由加载完成
|
// 等待路由加载完成
|
||||||
await routesLoadingPromise;
|
await routesLoadingPromise;
|
||||||
|
|
||||||
|
|||||||
@ -18,12 +18,11 @@
|
|||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
const API_BASE = 'http://localhost:8000'
|
const VITE_API_BASE_URL = import.meta.env.VITE_API_BASE_URL
|
||||||
|
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
const error = ref('')
|
const error = ref('')
|
||||||
const iframeSrc = ref('')
|
const iframeSrc = ref('')
|
||||||
const siteData = ref<Record<string, any>>({})
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
@ -31,12 +30,11 @@ const fetchData = async () => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// 直接用 axios 测试
|
// 直接用 axios 测试
|
||||||
const res = await axios.get(`${API_BASE}/index/init`)
|
const res = await axios.get(`${VITE_API_BASE_URL}/index/init`)
|
||||||
console.log('API响应:', res.data)
|
console.log('API响应:', res.data)
|
||||||
|
|
||||||
if (res.data.code === 200) {
|
if (res.data.code === 200) {
|
||||||
iframeSrc.value = API_BASE + res.data.data.theme_path
|
iframeSrc.value = VITE_API_BASE_URL + res.data.data.theme_path
|
||||||
siteData.value = res.data.data.data || {}
|
|
||||||
console.log('iframe地址:', iframeSrc.value)
|
console.log('iframe地址:', iframeSrc.value)
|
||||||
} else {
|
} else {
|
||||||
error.value = res.data.msg || '获取模板失败'
|
error.value = res.data.msg || '获取模板失败'
|
||||||
@ -50,13 +48,7 @@ const fetchData = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onLoad = () => {
|
const onLoad = () => {
|
||||||
const iframe = document.querySelector('.theme-iframe') as HTMLIFrameElement
|
console.log('模板加载完成')
|
||||||
if (iframe?.contentWindow) {
|
|
||||||
iframe.contentWindow.postMessage({
|
|
||||||
type: 'SET_SITE_DATA',
|
|
||||||
data: { ...siteData.value, _t: Date.now() }
|
|
||||||
}, '*')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@ -585,6 +585,12 @@ onMounted(async () => {
|
|||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(span) {
|
||||||
|
padding: 3px 4px;
|
||||||
|
margin:5px;
|
||||||
|
border-radius:4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.theend {
|
.theend {
|
||||||
|
|||||||
@ -40,10 +40,10 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="logo-w">
|
<div class="logo-w">
|
||||||
<img
|
<img
|
||||||
v-if="footerData && footerData.logow"
|
v-if="footerData && footerData.logow"
|
||||||
:src="getenvurl(footerData.logow)"
|
:src="getenvurl(footerData.logow)"
|
||||||
alt="logo"
|
alt="logo"
|
||||||
>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<div class="title">订阅我们</div>
|
<div class="title">订阅我们</div>
|
||||||
@ -51,11 +51,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-bottom" v-if="footerData" >
|
<div class="footer-bottom" v-if="footerData">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<span class="mr-3">{{ footerData.description }}</span>
|
<span class="mr-3">{{ footerData.description }}</span>
|
||||||
<span class="mr-3">{{ footerData.companyname }} {{ footerData.copyright }}</span>
|
<span class="mr-3">
|
||||||
<span class="mr-3"><a href="https://beian.miit.gov.cn/" target="_blank">{{ footerData.icp }}</a></span>
|
{{ footerData.companyname }} {{
|
||||||
|
footerData.copyright
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
<span class="mr-3">
|
||||||
|
<a href="https://beian.miit.gov.cn/" target="_blank">
|
||||||
|
{{ footerData.icp }}
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<span>法律声明 | 隐私条款</span>
|
<span>法律声明 | 隐私条款</span>
|
||||||
@ -92,7 +100,7 @@ const handleScroll = () => {
|
|||||||
const goToTop = () => {
|
const goToTop = () => {
|
||||||
window.scrollTo({
|
window.scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
behavior: 'smooth'
|
behavior: 'smooth',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -137,7 +145,7 @@ onUnmounted(() => {
|
|||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
||||||
.footer-content {
|
.footer-content {
|
||||||
width:1200px;
|
width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -177,7 +185,7 @@ onUnmounted(() => {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
|
|
||||||
li{
|
li {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -186,9 +194,9 @@ onUnmounted(() => {
|
|||||||
.right {
|
.right {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
|
||||||
.logo-w{
|
.logo-w {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
img{
|
img {
|
||||||
height: 45px;
|
height: 45px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
@ -212,35 +220,35 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gototop {
|
.gototop {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #3973ff;
|
background-color: #3973ff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
|
box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #ff6b6b;
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 20px rgba(64, 158, 255, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #ff6b6b;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 8px 20px rgba(64, 158, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user