fix(mini-program): 修复剧本详情页样式和内容显示问题

样式修复:
- 标题添加 flex:1 和 text-overflow: ellipsis,长文本自动省略
- 标题添加左右 margin,避免与返回按钮重叠
- 返回按钮添加 flex-shrink:0 和 z-index,确保不被压缩

内容显示修复:
- 优先读取 script.content 字段(转换后的标准格式)
- 兼容 script.plotJson.fullContent 格式(旧数据)
This commit is contained in:
2026-04-07 22:17:39 +08:00
parent ae7392c37e
commit b8dc438cbe
@@ -59,7 +59,10 @@ onMounted(() => {
// 从 store 获取剧本详情 // 从 store 获取剧本详情
if (scriptId) { if (scriptId) {
script.value = scripts.value.find(s => s.id === scriptId) script.value = scripts.value.find(s => s.id === scriptId)
if (script.value?.plotJson?.fullContent) { // 优先读取 content 字段(转换后的格式),兼容 plotJson.fullContent
if (script.value?.content) {
fullContent.value = script.value.content
} else if (script.value?.plotJson?.fullContent) {
fullContent.value = script.value.plotJson.fullContent fullContent.value = script.value.plotJson.fullContent
} else { } else {
fullContent.value = '暂无完整内容' fullContent.value = '暂无完整内容'
@@ -90,6 +93,7 @@ const goBack = () => {
background: rgba(168, 85, 247, 0.1); background: rgba(168, 85, 247, 0.1);
border-bottom: 1px solid rgba(168, 85, 247, 0.2); border-bottom: 1px solid rgba(168, 85, 247, 0.2);
flex-shrink: 0; flex-shrink: 0;
position: relative;
} }
.header-left { .header-left {
@@ -100,6 +104,8 @@ const goBack = () => {
border-radius: 24rpx; border-radius: 24rpx;
background: rgba(168, 85, 247, 0.15); background: rgba(168, 85, 247, 0.15);
border: 1px solid rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.2);
z-index: 10;
flex-shrink: 0;
} }
.back-icon { .back-icon {
@@ -118,6 +124,13 @@ const goBack = () => {
font-weight: 500; font-weight: 500;
color: rgba(243, 232, 255, 0.9); color: rgba(243, 232, 255, 0.9);
font-family: 'Cinzel', 'Inter', serif; font-family: 'Cinzel', 'Inter', serif;
flex: 1;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 8rpx;
margin-right: 8rpx;
} }
/* ==================== 滚动内容区 ==================== */ /* ==================== 滚动内容区 ==================== */