fix: 修复范式分析页面左侧面板底部内容被截断问题

- 添加 h-screen 确保面板占满高度
- 添加 min-h-0 确保 flex 子元素滚动正常
- header 添加 shrink-0 防止压缩
This commit is contained in:
empty
2026-01-08 10:15:37 +08:00
parent 59d29e7444
commit 0d40b7c82a

View File

@@ -1,7 +1,7 @@
<template>
<aside class="w-[400px] flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
<aside class="w-[400px] flex flex-col border-r border-slate-700 bg-slate-800 shrink-0 h-screen">
<!-- 头部 -->
<header class="p-4 border-b border-slate-700 flex items-center justify-between">
<header class="p-4 border-b border-slate-700 flex items-center justify-between shrink-0">
<div class="flex items-center gap-4">
<h1 class="font-bold text-lg text-white flex items-center gap-2">
<span class="text-2xl"></span> 写作范式分析
@@ -16,8 +16,8 @@
<span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
</header>
<!-- 内容区 -->
<div class="flex-1 overflow-y-auto p-4 space-y-6">
<!-- 内容区 - 添加 min-h-0 确保滚动正常 -->
<div class="flex-1 overflow-y-auto p-4 space-y-6 min-h-0">
<!-- 写作范式库 -->
<section>
<h3 class="text-sm font-medium text-slate-400 mb-4">📚 写作范式库</h3>