更新显示架构
This commit is contained in:
parent
50f34beab9
commit
b6294200a7
7
src/api/theme.ts
Normal file
7
src/api/theme.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import service from '@/utils/request'
|
||||||
|
|
||||||
|
// 获取模板初始化数据
|
||||||
|
export const getThemeInit = async () => {
|
||||||
|
const response = await service.get('index/init')
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
@ -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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
// 动态路由注册函数
|
// 动态路由注册函数
|
||||||
|
|||||||
@ -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)
|
||||||
|
|||||||
87
src/views/components/ThemeRenderer.vue
Normal file
87
src/views/components/ThemeRenderer.vue
Normal 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
17
src/views/theme/index.vue
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user