From f46b50fc1eebe5a60b58be1ebb50843e3040574d Mon Sep 17 00:00:00 2001 From: alboped Date: Mon, 13 Apr 2026 14:18:33 +0800 Subject: [PATCH] =?UTF-8?q?ui:=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 22 ++++++++++-- src/pages/index.tsx | 81 +++++++++++++++++++++++++++++++++++++++------ 2 files changed, 90 insertions(+), 13 deletions(-) diff --git a/src/index.css b/src/index.css index 203df11..e1b095e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,28 @@ @import "tailwindcss"; html, -body, +body { + margin: 0; + height: 100%; +} + #root { margin: 0; - min-height: 100%; + min-height: 0; + height: 100%; +} + +/* Ant Layout 默认 min-height 会撑开整页；限制后仅内容区滚动 */ +.chat-one-shell.ant-layout { + min-height: 0; +} + +.chat-one-shell > .ant-layout { + min-height: 0; +} + +.chat-one-shell .ant-layout-content { + min-height: 0; } /* DeepSeek 风格近似色 */ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9150de2..5dccfe3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -24,6 +24,62 @@ const mockMessages = [ content: "当然可以，请先告诉我今天完成了哪些任务。", thinking: "正在理解用户意图并检索相关知识…", }, + { + role: "user" as const, + content: + "上午开了站会，修了 CI 里 yarn 缓存问题；下午写了首页聊天区的布局，把输入框固定在底部，消息区单独滚动。", + }, + { + role: "assistant" as const, + content: + "听起来节奏很紧凑。建议你在总结里分成「会议与协作」「工程交付」「阻塞与风险」三块，每块用 2～3 条要点，领导扫一眼就能抓住重点。", + }, + { role: "user" as const, content: "阻塞怎么写比较合适？" }, + { + role: "assistant" as const, + content: + "阻塞建议写清：现象、影响范围、你已尝试的排查、需要的支持（人或权限）、预计解除时间。若没有阻塞，可以明确写「无」或「低风险项：xxx 已可控」。", + }, + { + role: "user" as const, + content: "再帮我列一下本周前端工程化还可以做的小事，5 条以内。", + }, + { + role: "assistant" as const, + content: + "1）把公共 CI 工作流用 tag 固定版本，避免 main 漂移。\n2）给构建产物目录、构建命令做成入参，方便多包仓库复用。\n3）在 PR 上跑 lint + format:check，合并前强制通过。\n4）给关键页面加最小 smoke（构建成功 + 路由可访问）。\n5）整理一份「本地与 CI 一致」的 Node/Yarn 版本说明。", + }, + { role: "user" as const, content: "第 3 条我们已经在做了，换一条。" }, + { + role: "assistant" as const, + content: + "可以改成：为生产构建打开 source map 上传（或错误监控接入），这样线上异常栈可读性会好很多；若担心体积，可只在 CI 产物里保留、发布前剥离。", + }, + { + role: "user" as const, + content: "聊天页面我想多放点假数据，看下滚动条是不是只在消息区域出现。", + }, + { + role: "assistant" as const, + content: + "可以。做法是：最外层布局用视口高度约束（例如 h-dvh + overflow-hidden），中间消息列表容器用 flex-1 + min-h-0 + overflow-y-auto，输入区用 shrink-0。Ant Design 的 Layout 默认 min-height 较大时，记得用一层 class 把 .ant-layout-content 的 min-height 压成 0，否则内部滚动出不来。", + thinking: "回忆 flex 子项 min-height:auto 的常见坑，并对应到 Ant Layout…", + }, + { role: "user" as const, content: "移动端键盘弹起时会不会把输入框顶没？" }, + { + role: "assistant" as const, + content: + "有可能。可以后续视情况改用 visualViewport 或 dvh 微调；若仍有问题，再考虑把输入条做成 position: sticky/fixed 并给消息区预留 padding-bottom。当前先用 dvh + 分区滚动验证桌面与常见移动浏览器。", + }, + { + role: "user" as const, + content: "好的，我先用这批假消息滚两下看看效果。", + }, + { + role: "assistant" as const, + content: + "没问题。若滚动条出现在整页而不是消息列，优先检查父链上是否少了 min-h-0 或是否仍用 min-height 把内容撑开了。需要的话把 DOM 结构发我，我可以帮你对一下。", + }, ]; export default function HomePage() { @@ -123,7 +179,10 @@ export default function HomePage() { ); return ( - + {!isMobile && (
)} - +
@@ -193,12 +255,9 @@ export default function HomePage() {
- -
-
+ +
+
{mockMessages.map((item, index) => (
-
+