ui: 优化样式；

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 风格近似色 */

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 (
-    <Layout style={{ minHeight: "100vh", background: "var(--ds-bg-main)" }}>
+    <Layout
+      className="chat-one-shell flex h-dvh max-h-dvh overflow-hidden"
+      style={{ background: "var(--ds-bg-main)" }}
+    >
       {!isMobile && (
         <Sider
           trigger={null}
@@ -132,7 +191,7 @@ export default function HomePage() {
           width={260}
           collapsedWidth={72}
           theme="light"
-          className="!bg-[var(--ds-bg-sider)] !border-r !border-[var(--ds-border)]"
+          className="!min-h-0 !overflow-hidden !bg-[var(--ds-bg-sider)] !border-r !border-[var(--ds-border)]"
         >
           <div className="flex h-14 items-center gap-2 border-b border-[var(--ds-border)] px-3">
             <img
@@ -153,9 +212,12 @@ export default function HomePage() {
         </Sider>
       )}
 
-      <Layout style={{ background: "var(--ds-bg-main)" }}>
+      <Layout
+        className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+        style={{ background: "var(--ds-bg-main)" }}
+      >
         <Header
-          className="!flex !h-14 !items-center !justify-between !border-b !border-[var(--ds-border)] !bg-[var(--ds-bg-main)] !px-5"
+          className="!flex !h-14 !shrink-0 !items-center !justify-between !border-b !border-[var(--ds-border)] !bg-[var(--ds-bg-main)] !px-5"
           style={{ lineHeight: "56px" }}
         >
           <div className="flex items-center gap-3">
@@ -193,12 +255,9 @@ export default function HomePage() {
           </span>
         </Header>
 
-        <Content
-          className="flex flex-col !bg-[var(--ds-bg-main)]"
-          style={{ minHeight: "calc(100vh - 56px)" }}
-        >
-          <div className="flex min-h-0 flex-1 flex-col">
-            <div className="min-h-0 flex-1 overflow-auto px-4 py-6 md:px-8">
+        <Content className="flex min-h-0 flex-1 flex-col overflow-hidden !bg-[var(--ds-bg-main)]">
+          <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+            <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-4 pt-6 pb-0 md:px-8 md:pt-6 md:pb-0">
               <div className="mx-auto flex max-w-3xl flex-col gap-5">
                 {mockMessages.map((item, index) => (
                   <div
@@ -255,7 +314,7 @@ export default function HomePage() {
               </div>
             </div>
 
-            <div className="shrink-0 border-t border-[var(--ds-border)] bg-[var(--ds-bg-main)] px-4 py-4 md:px-8">
+            <div className="shrink-0 bg-[var(--ds-bg-main)] px-4 pb-4 pt-0 md:px-8 md:pb-4 md:pt-0">
               <div className="mx-auto max-w-3xl">
                 <div className="rounded-2xl border border-[var(--ds-border)] bg-neutral-50/50 p-3 shadow-sm">
                   <Input.TextArea