89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from "vue";
|
||
import { themePreviewUrl } from "@/api/module/cms";
|
||
import { FormModelValue } from "@/utils/themeParamForm";
|
||
|
||
/**
|
||
* 主题预览框（方案 §5.5/§6.3）：iframe 加载 /api/theme/preview（同源 CAS 会话，
|
||
* no-store），参数变更由父级 debounce 后更新 src。内容源站点不存在时提示。
|
||
*/
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
/** 预览内容源站点门户路径（W4：sitePath 语义，取该站栏目/文章/轮播渲染） */
|
||
sitePath?: string;
|
||
theme?: string;
|
||
themeParams?: FormModelValue;
|
||
/** 填满父容器高度（皮肤包管理全屏预览弹窗）；默认固定高，向导/编辑弹窗内不变 */
|
||
fill?: boolean;
|
||
}>(),
|
||
{ fill: false }
|
||
);
|
||
|
||
const src = computed(() => {
|
||
if (!props.sitePath || !props.theme) return "";
|
||
return themePreviewUrl(props.sitePath, props.theme, props.themeParams || {});
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="theme-preview" :class="{ 'theme-preview--fill': fill }">
|
||
<template v-if="!sitePath || !theme">
|
||
<div class="preview-empty">
|
||
无可用内容源站点 —— 预览需要借用一个已有站点的内容
|
||
<p class="hint">请先创建/启用一个站点（或初始化演示数据）后再预览</p>
|
||
</div>
|
||
</template>
|
||
<iframe
|
||
v-else
|
||
:key="src"
|
||
:src="src"
|
||
class="preview-frame"
|
||
title="主题预览"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.theme-preview {
|
||
width: 100%;
|
||
background: #f0f2f5;
|
||
border: 1px solid #e5e6eb;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
.preview-frame {
|
||
width: 100%;
|
||
height: 560px;
|
||
border: 0;
|
||
display: block;
|
||
}
|
||
.preview-empty {
|
||
height: 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #888;
|
||
font-size: 13px;
|
||
.hint {
|
||
margin-top: 6px;
|
||
color: #bbb;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.theme-preview--fill {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.preview-frame {
|
||
height: auto;
|
||
flex: 1;
|
||
min-height: 420px;
|
||
}
|
||
.preview-empty {
|
||
height: auto;
|
||
flex: 1;
|
||
}
|
||
}
|
||
</style>
|