ci: 调用 platform/workflow 公共工作流并精简注释

ui: 首页对齐 DeepSeek 式布局（侧栏、消息气泡、思考折叠、输入区胶囊与发送按钮）
Made-with: Cursor

.gitea/workflows/ci.yml

@@ -1,9 +1,4 @@
-# 公共工作流仓库：platform/workflow
-# Gitea 要求 uses 格式：{owner}/{repo}/.gitea/workflows/{文件名}@{ref}
-# 公共仓内请将工作流放在：.gitea/workflows/web-spa-deploy.yml（若当前仅在 ci/ 下，请复制或移动到该路径）
-#
-# 本仓库「工作流 → 变量」：DEPLOY_PATH、DEPLOY_HOST、DEPLOY_USER
-# 本仓库「工作流 → 密钥」：SSH_PRIVATE_KEY（secrets: inherit）
+# 业务 CI：触发公共工作流；
 
 name: CI
 
@@ -21,7 +16,7 @@ jobs:
   build:
     uses: platform/workflow/.gitea/workflows/web-spa-deploy.yml@main
     with:
-      node_version: "22.14.0"
-      yarn_version: "1.22.22"
-      project_dir: "chat-one-web"
-    secrets: inherit
+      node_version: "22.14.0" # Node 完整 semver
+      yarn_version: "1.22.22" # Yarn 1
+      project_dir: "chat-one-web" # 远端目录 = $DEPLOY_PATH/本字段
+    secrets: inherit # 传入 SSH_PRIVATE_KEY

src/index.css

@@ -6,3 +6,16 @@ body,
   margin: 0;
   min-height: 100%;
 }
+
+/* DeepSeek 风格近似色 */
+:root {
+  --ds-bg-main: #ffffff;
+  --ds-bg-sider: #f7f7f8;
+  --ds-border: #ececec;
+  --ds-text-secondary: #8b8b8b;
+  --ds-user-bubble: #e8f3ff;
+  --ds-user-border: #cce7ff;
+  --ds-active-item: #e3f2fd;
+  --ds-send: #4dabf7;
+  --ds-send-hover: #339af0;
+}

src/pages/index.tsx

@@ -1,62 +1,62 @@
 import { useEffect, useMemo, useState } from "react";
-import { Button, Drawer, Input, Layout, Space, Typography } from "antd";
 import {
+  ArrowUpOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   MessageOutlined,
+  PaperClipOutlined,
+  PlusOutlined,
+  SearchOutlined,
   SettingOutlined,
+  ThunderboltOutlined,
   UserOutlined,
 } from "@ant-design/icons";
+import { Button, Collapse, Drawer, Input, Layout, Typography } from "antd";
 
 const { Header, Sider, Content } = Layout;
 const MOBILE_WIDTH = 750;
 
 const mockMessages = [
-  { role: "assistant", content: "你好，我是 ChatOne 助手，有什么可以帮你？" },
-  { role: "user", content: "请帮我总结今天的工作内容。" },
-  { role: "assistant", content: "当然可以，请先告诉我今天完成了哪些任务。" },
+  { role: "assistant" as const, content: "你好，我是 ChatOne 助手，有什么可以帮你？" },
+  { role: "user" as const, content: "请帮我总结今天的工作内容。" },
+  {
+    role: "assistant" as const,
+    content: "当然可以，请先告诉我今天完成了哪些任务。",
+    thinking: "正在理解用户意图并检索相关知识…",
+  },
 ];
 
 export default function HomePage() {
-  // 桌面端侧边栏折叠状态（移动端不使用该状态）
   const [collapsed, setCollapsed] = useState(false);
-  // 移动端抽屉侧边栏显示状态
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  // 当前视口宽度（用于调试响应式是否生效）
   const [viewportWidth, setViewportWidth] = useState(0);
-  // 是否为移动端（小于 750px）
   const [isMobile, setIsMobile] = useState(false);
   const [inputValue, setInputValue] = useState("");
+  const [deepThink, setDeepThink] = useState(false);
+  const [smartSearch, setSmartSearch] = useState(false);
 
-  const menuItems = useMemo(
+  const historyGroups = useMemo(
     () => [
-      { icon: <MessageOutlined />, label: "新建会话" },
-      { icon: <UserOutlined />, label: "我的对话" },
-      { icon: <SettingOutlined />, label: "设置" },
+      { title: "30 天内", keys: ["前端 CI 工具对比", "Nginx SPA 配置"] },
+      { title: "2025-12", keys: ["Gitea Actions 入门"] },
     ],
     [],
   );
 
   useEffect(() => {
     const updateIsMobile = () => {
-      // 兼容不同浏览器/缩放场景下的视口宽度读取
-      const viewportWidth = Math.min(
+      const w = Math.min(
         window.innerWidth,
         document.documentElement.clientWidth || window.innerWidth,
       );
-      setViewportWidth(viewportWidth);
-      const mobile = viewportWidth < MOBILE_WIDTH;
+      setViewportWidth(w);
+      const mobile = w < MOBILE_WIDTH;
       setIsMobile(mobile);
-      if (!mobile) {
-        // 切回桌面端时关闭移动抽屉，避免状态残留
-        setMobileSidebarOpen(false);
-      }
+      if (!mobile) setMobileSidebarOpen(false);
     };
-
     updateIsMobile();
     window.addEventListener("resize", updateIsMobile);
     window.addEventListener("orientationchange", updateIsMobile);
-
     return () => {
       window.removeEventListener("resize", updateIsMobile);
       window.removeEventListener("orientationchange", updateIsMobile);
@@ -64,106 +64,241 @@ export default function HomePage() {
   }, []);
 
   const sidebarContent = (
-    <>
-      {/* 侧边栏头部：桌面折叠时显示缩写，其他情况显示完整标题 */}
-      <div className="h-14 border-b border-gray-100 px-4 flex items-center">
-        <Typography.Title level={5} style={{ margin: 0 }}>
-          {collapsed && !isMobile ? "CO" : "ChatOne"}
-        </Typography.Title>
+    <div className="flex h-full flex-col bg-[var(--ds-bg-sider)]">
+      <div className="shrink-0 px-3 pt-3 pb-2">
+        <Button
+          block
+          className="h-10! rounded-xl! border-[var(--ds-border)]! bg-[var(--ds-bg-main)]! text-[13px]! font-medium shadow-none hover:border-sky-300! hover:text-sky-600!"
+          icon={<PlusOutlined />}
+        >
+          {(!collapsed || isMobile) && "新建会话"}
+        </Button>
       </div>
-      <div className="px-2 py-3">
-        <Space orientation="vertical" className="w-full">
-          {menuItems.map((item) => (
-            <Button key={item.label} type="text" className="w-full text-left!">
-              <Space>
-                {item.icon}
-                {/* 桌面折叠时隐藏文字；移动端抽屉内始终显示文字 */}
-                {(!collapsed || isMobile) && <span>{item.label}</span>}
-              </Space>
-            </Button>
-          ))}
-        </Space>
+
+      <div className="min-h-0 flex-1 overflow-auto px-2 py-2">
+        {historyGroups.map((group) => (
+          <div key={group.title} className="mb-4">
+            <Typography.Text
+              className="mb-2 block px-2 text-[11px] uppercase tracking-wide"
+              style={{ color: "var(--ds-text-secondary)" }}
+            >
+              {group.title}
+            </Typography.Text>
+            {group.keys.map((key) => (
+              <button
+                key={key}
+                type="button"
+                className="mb-1 flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-left text-[13px] text-neutral-700 transition-colors hover:bg-black/5"
+                style={{
+                  background:
+                    key === historyGroups[0].keys[0] ? "var(--ds-active-item)" : undefined,
+                }}
+              >
+                <MessageOutlined className="shrink-0 text-neutral-400" />
+                {(!collapsed || isMobile) && <span className="truncate">{key}</span>}
+              </button>
+            ))}
+          </div>
+        ))}
       </div>
-    </>
+
+      <div className="shrink-0 border-t border-[var(--ds-border)] p-3">
+        <Button
+          type="text"
+          className="h-10 w-full justify-start! rounded-xl! px-2 text-neutral-600 hover:bg-black/5!"
+          icon={<SettingOutlined />}
+        >
+          {(!collapsed || isMobile) && "设置"}
+        </Button>
+        <div className="mt-2 flex items-center gap-2 rounded-xl px-2 py-1.5">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-neutral-500">
+            <UserOutlined />
+          </div>
+          {(!collapsed || isMobile) && (
+            <Typography.Text className="truncate text-[13px]">用户</Typography.Text>
+          )}
+        </div>
+      </div>
+    </div>
   );
 
   return (
-    <Layout style={{ minHeight: "100vh" }}>
-      {/* 桌面端固定侧边栏；移动端改为 Drawer 抽屉 */}
+    <Layout style={{ minHeight: "100vh", background: "var(--ds-bg-main)" }}>
       {!isMobile && (
-        <Sider trigger={null} collapsible collapsed={collapsed} theme="light">
+        <Sider
+          trigger={null}
+          collapsible
+          collapsed={collapsed}
+          width={260}
+          collapsedWidth={72}
+          theme="light"
+          className="!bg-[var(--ds-bg-sider)] !border-r !border-[var(--ds-border)]"
+        >
+          <div className="flex h-14 items-center border-b border-[var(--ds-border)] px-3">
+            <Typography.Title level={5} className="!m-0 !text-[15px] !font-semibold">
+              {collapsed ? "CO" : "ChatOne"}
+            </Typography.Title>
+          </div>
           {sidebarContent}
         </Sider>
       )}
 
-      <Layout>
-        <Header className="bg-white! px-4! border-b! border-gray-100! flex items-center justify-between">
-          <Button
-            type="text"
-            icon={
-              isMobile ? (
-                <MenuUnfoldOutlined />
-              ) : collapsed ? (
-                <MenuUnfoldOutlined />
-              ) : (
-                <MenuFoldOutlined />
-              )
-            }
-            onClick={() => {
-              if (isMobile) {
-                // 移动端点击按钮：打开左侧抽屉
-                setMobileSidebarOpen(true);
-              } else {
-                // 桌面端点击按钮：切换侧边栏折叠
-                setCollapsed((v) => !v);
+      <Layout 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"
+          style={{ lineHeight: "56px" }}
+        >
+          <div className="flex items-center gap-3">
+            <Button
+              type="text"
+              className="text-neutral-500 hover:bg-black/5!"
+              icon={
+                isMobile ? (
+                  <MenuUnfoldOutlined />
+                ) : collapsed ? (
+                  <MenuUnfoldOutlined />
+                ) : (
+                  <MenuFoldOutlined />
+                )
               }
-            }}
-          />
-          <Space size={12}>
-            <Typography.Text type="secondary">ChatOne Web</Typography.Text>
-            <Typography.Text type="secondary">
-              {`W:${viewportWidth}px / ${isMobile ? "mobile" : "desktop"}`}
+              onClick={() => {
+                if (isMobile) setMobileSidebarOpen(true);
+                else setCollapsed((v) => !v);
+              }}
+            />
+            <Typography.Text className="text-[15px] font-medium text-neutral-800">
+              国内前端主流 CI 工具
             </Typography.Text>
-          </Space>
+          </div>
+          <span className="rounded-full border border-[var(--ds-border)] bg-neutral-50 px-3 py-1 text-xs text-neutral-500">
+            快速模式
+          </span>
         </Header>
 
-        <Content className="bg-gray-50 p-6">
-          {/* 聊天窗口：消息列表 + 底部输入区 */}
-          <div className="h-[calc(100vh-112px)] rounded-lg bg-white border border-gray-100 flex flex-col">
-            <div className="border-b border-gray-100 px-5 py-3">
-              <Typography.Title level={5} style={{ margin: 0 }}>
-                聊天窗口
-              </Typography.Title>
+        <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">
+              <div className="mx-auto flex max-w-3xl flex-col gap-5">
+                {mockMessages.map((item, index) => (
+                  <div
+                    key={index}
+                    className={`flex ${item.role === "user" ? "justify-end" : "justify-start"}`}
+                  >
+                    <div
+                      className={
+                        item.role === "user"
+                          ? "max-w-[85%] rounded-2xl border px-4 py-2.5 text-[15px] leading-relaxed text-neutral-800"
+                          : "max-w-[85%] space-y-2"
+                      }
+                      style={
+                        item.role === "user"
+                          ? {
+                              background: "var(--ds-user-bubble)",
+                              borderColor: "var(--ds-user-border)",
+                            }
+                          : undefined
+                      }
+                    >
+                      {item.role === "assistant" && item.thinking && (
+                        <Collapse
+                          bordered={false}
+                          size="small"
+                          className="!mb-2 !rounded-xl !bg-neutral-50 !border !border-[var(--ds-border)]"
+                          items={[
+                            {
+                              key: "think",
+                              label: (
+                                <span className="text-[13px] text-neutral-600">
+                                  <ThunderboltOutlined className="mr-1.5" />
+                                  已思考（用时约 2 秒）
+                                </span>
+                              ),
+                              children: (
+                                <Typography.Text type="secondary" className="text-[13px]">
+                                  {item.thinking}
+                                </Typography.Text>
+                              ),
+                            },
+                          ]}
+                        />
+                      )}
+                      {item.role === "assistant" && (
+                        <div className="rounded-2xl border border-[var(--ds-border)] bg-neutral-50/80 px-4 py-2.5 text-[15px] leading-relaxed text-neutral-800">
+                          {item.content}
+                        </div>
+                      )}
+                      {item.role === "user" && item.content}
+                    </div>
+                  </div>
+                ))}
+              </div>
             </div>
 
-            <div className="flex-1 overflow-auto px-5 py-4 flex flex-col gap-2">
-              {mockMessages.map((item, index) => (
-                <div
-                  key={index}
-                  className={`flex ${item.role === "user" ? "justify-end" : "justify-start"}`}
-                >
-                  <div
-                    className={`max-w-[80%] rounded-lg px-3 py-2 ${
-                      item.role === "user"
-                        ? "bg-blue-50 border border-blue-100"
-                        : "bg-gray-50 border border-gray-100"
-                    }`}
-                  >
-                    <Typography.Text>{item.content}</Typography.Text>
+            <div className="shrink-0 border-t border-[var(--ds-border)] bg-[var(--ds-bg-main)] px-4 py-4 md:px-8">
+              <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
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    placeholder="给 ChatOne 发送消息"
+                    variant="borderless"
+                    autoSize={{ minRows: 1, maxRows: 6 }}
+                    className="!px-1 !text-[15px] placeholder:text-neutral-400"
+                  />
+                  <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
+                    <div className="flex flex-wrap gap-2">
+                      <button
+                        type="button"
+                        onClick={() => setDeepThink((v) => !v)}
+                        className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs transition-colors ${
+                          deepThink
+                            ? "border-sky-300 bg-sky-50 text-sky-700"
+                            : "border-[var(--ds-border)] bg-[var(--ds-bg-main)] text-neutral-600 hover:border-neutral-300"
+                        }`}
+                      >
+                        <ThunderboltOutlined />
+                        深度思考
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setSmartSearch((v) => !v)}
+                        className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs transition-colors ${
+                          smartSearch
+                            ? "border-sky-300 bg-sky-50 text-sky-700"
+                            : "border-[var(--ds-border)] bg-[var(--ds-bg-main)] text-neutral-600 hover:border-neutral-300"
+                        }`}
+                      >
+                        <SearchOutlined />
+                        智能搜索
+                      </button>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="text"
+                        icon={<PaperClipOutlined className="text-neutral-400" />}
+                        className="text-neutral-400"
+                      />
+                      <Button
+                        type="primary"
+                        shape="circle"
+                        icon={<ArrowUpOutlined />}
+                        className="!flex !h-9 !w-9 !items-center !justify-center !border-0 !shadow-none"
+                        style={{
+                          background: "var(--ds-send)",
+                        }}
+                      />
+                    </div>
                   </div>
                 </div>
-              ))}
-            </div>
-
-            <div className="border-t border-gray-100 p-4">
-              <Space.Compact className="w-full">
-                <Input
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  placeholder="输入消息..."
-                />
-                <Button type="primary">发送消息</Button>
-              </Space.Compact>
+                {import.meta.env.DEV && (
+                  <Typography.Text type="secondary" className="mt-2 block text-center text-[11px]">
+                    W:{viewportWidth}px · {isMobile ? "mobile" : "desktop"}
+                  </Typography.Text>
+                )}
+              </div>
             </div>
           </div>
         </Content>
@@ -175,7 +310,8 @@ export default function HomePage() {
         closable
         onClose={() => setMobileSidebarOpen(false)}
         open={isMobile && mobileSidebarOpen}
-        size={260}
+        width={280}
+        styles={{ body: { padding: 0, background: "var(--ds-bg-sider)" } }}
       >
         {sidebarContent}
       </Drawer>