fix: 修复右侧范式分析结果区域底部内容被截断问题

- main添加h-screen min-h-0确保正确高度
- header添加shrink-0防止压缩
- 内容区添加min-h-0和pb-8确保滚动正常
This commit is contained in:
empty
2026-01-08 10:19:46 +08:00
parent f7659a5775
commit bed660ea0a

View File

@@ -1,5 +1,5 @@
<template> <template>
<main class="flex-1 flex flex-col bg-slate-950 relative"> <main class="flex-1 flex flex-col bg-slate-950 relative h-screen min-h-0">
<!-- Prompt调试面板 --> <!-- Prompt调试面板 -->
<div v-if="showPromptDebug && currentPage === 'writer'" class="absolute inset-0 bg-slate-950/95 z-20 p-8 overflow-auto backdrop-blur-sm"> <div v-if="showPromptDebug && currentPage === 'writer'" class="absolute inset-0 bg-slate-950/95 z-20 p-8 overflow-auto backdrop-blur-sm">
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
@@ -15,7 +15,7 @@
</div> </div>
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
<header class="h-14 border-b border-slate-800 flex items-center justify-between px-6 bg-slate-950"> <header class="h-14 border-b border-slate-800 flex items-center justify-between px-6 bg-slate-950 shrink-0">
<span class="text-sm font-medium text-slate-400"> <span class="text-sm font-medium text-slate-400">
{{ currentPage === 'writer' ? '输出预览' : '范式分析结果' }} {{ currentPage === 'writer' ? '输出预览' : '范式分析结果' }}
</span> </span>
@@ -35,8 +35,8 @@
</header> </header>
<!-- 主内容区 --> <!-- 主内容区 -->
<div class="flex-1 overflow-y-auto p-8 md:p-12"> <div class="flex-1 overflow-y-auto p-8 md:p-12 min-h-0">
<div class="max-w-3xl mx-auto min-h-[500px]"> <div class="max-w-3xl mx-auto pb-8">
<!-- 写作页面内容 --> <!-- 写作页面内容 -->
<div v-if="currentPage === 'writer'"> <div v-if="currentPage === 'writer'">
<div v-if="!generatedContent && !isGenerating" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20"> <div v-if="!generatedContent && !isGenerating" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">