更新显示架构

This commit is contained in:
扫地僧 2026-03-09 09:40:31 +08:00
parent 50f34beab9
commit b6294200a7
5 changed files with 115 additions and 25 deletions

7
src/api/theme.ts Normal file
View File

@ -0,0 +1,7 @@
import service from '@/utils/request'
// 获取模板初始化数据
export const getThemeInit = async () => {
const response = await service.get('index/init')
return response.data
}

View File

@ -4,12 +4,11 @@ import { createComponentLoader } from '@/utils/pathResolver'
export const constantRoute = [ export const constantRoute = [
{ {
path: '/', path: '/',
component: () => import('@/views/home/index.vue'), component: () => import('@/views/theme/index.vue'),
name: '首页', name: '首页',
meta: { meta: {
title: '首页', title: '首页',
hidden: false, hidden: false,
icon: 'HomeFilled',
}, },
}, },
{ {
@ -22,24 +21,6 @@ export const constantRoute = [
icon: 'DocumentDelete', icon: 'DocumentDelete',
}, },
}, },
{
path: '/newscenter/kingdeeNews/detail/:id',
component: () => import('@/views/components/articleDetail.vue'),
name: 'kingdeeNewsDetail',
meta: {
title: '金蝶新闻详情',
hidden: true,
},
},
{
path: '/newscenter/companyNews/detail/:id',
component: () => import('@/views/components/articleDetail.vue'),
name: 'companyNewsDetail',
meta: {
title: '站点新闻详情',
hidden: true,
},
},
] ]
// 动态路由注册函数 // 动态路由注册函数

View File

@ -3,13 +3,12 @@ import axios from 'axios'
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL, baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 10000, // 请求超时时间 timeout: 10000,
}) })
// 请求拦截器 // 请求拦截器
service.interceptors.request.use( service.interceptors.request.use(
(config) => { (config) => {
// 可以在这里添加token等认证信息
return config return config
}, },
(error) => { (error) => {
@ -17,11 +16,10 @@ service.interceptors.request.use(
} }
) )
// 响应拦截器 // 响应拦截器 - 返回 response.data
service.interceptors.response.use( service.interceptors.response.use(
(response) => { (response) => {
// 直接返回响应数据 return response.data
return response
}, },
(error) => { (error) => {
console.error('API请求错误:', error) console.error('API请求错误:', error)

View File

@ -0,0 +1,87 @@
<template>
<div class="theme-renderer">
<div v-if="loading" class="loading">加载中...</div>
<div v-else-if="error" class="error">
<p>{{ error }}</p>
<button @click="fetchData">点击重试</button>
</div>
<iframe
v-else-if="iframeSrc"
:src="iframeSrc"
class="theme-iframe"
@load="onLoad"
></iframe>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
const API_BASE = 'http://localhost:8000'
const loading = ref(true)
const error = ref('')
const iframeSrc = ref('')
const siteData = ref<Record<string, any>>({})
const fetchData = async () => {
loading.value = true
error.value = ''
try {
// axios
const res = await axios.get(`${API_BASE}/index/init`)
console.log('API响应:', res.data)
if (res.data.code === 200) {
iframeSrc.value = API_BASE + res.data.data.theme_path
siteData.value = res.data.data.data || {}
console.log('iframe地址:', iframeSrc.value)
} else {
error.value = res.data.msg || '获取模板失败'
}
} catch (err: any) {
console.error('请求失败:', err)
error.value = err.message || '网络错误'
} finally {
loading.value = false
}
}
const onLoad = () => {
const iframe = document.querySelector('.theme-iframe') as HTMLIFrameElement
if (iframe?.contentWindow) {
iframe.contentWindow.postMessage({
type: 'SET_SITE_DATA',
data: { ...siteData.value, _t: Date.now() }
}, '*')
}
}
onMounted(() => {
fetchData()
})
</script>
<style scoped>
.theme-renderer {
width: 100%;
height: 100vh;
background: #f5f5f5;
}
.theme-iframe {
width: 100%;
height: 100%;
border: none;
}
.loading, .error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
color: #666;
}
.error { color: red; }
</style>

17
src/views/theme/index.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="theme-page">
<ThemeRenderer />
</div>
</template>
<script setup lang="ts">
import ThemeRenderer from '@/views/components/ThemeRenderer.vue'
</script>
<style lang="scss" scoped>
.theme-page {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>