feat: 初始化 Vite React 聊天应用骨架

搭建 React + Vite + React Router + TailwindCSS + Ant Design 基础工程，并通过 vite-plugin-pages 实现文件路由。新增首页响应式聊天布局，移动端在小于 750px 时使用左侧抽屉侧边栏。

Made-with: Cursor

src/pages/index.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useMemo, useState } from "react";
+import { Button, Drawer, Input, Layout, List, Space, Typography } from "antd";
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  MessageOutlined,
+  SettingOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+
+const { Header, Sider, Content } = Layout;
+
+const mockMessages = [
+  { role: "assistant", content: "你好，我是 ChatOne 助手，有什么可以帮你？" },
+  { role: "user", content: "请帮我总结今天的工作内容。" },
+  { role: "assistant", content: "当然可以，请先告诉我今天完成了哪些任务。" },
+];
+
+export default function HomePage() {
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 750);
+  const [inputValue, setInputValue] = useState("");
+
+  const menuItems = useMemo(
+    () => [
+      { icon: <MessageOutlined />, label: "新建会话" },
+      { icon: <UserOutlined />, label: "我的对话" },
+      { icon: <SettingOutlined />, label: "设置" },
+    ],
+    [],
+  );
+
+  useEffect(() => {
+    const onResize = () => {
+      const mobile = window.innerWidth < 750;
+      setIsMobile(mobile);
+      if (!mobile) {
+        setMobileSidebarOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  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>
+      <div className="px-2 py-3">
+        <Space direction="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>
+    </>
+  );
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      {!isMobile && (
+        <Sider trigger={null} collapsible collapsed={collapsed} theme="light">
+          {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);
+              }
+            }}
+          />
+          <Typography.Text type="secondary">ChatOne Web</Typography.Text>
+        </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>
+            </div>
+
+            <div className="flex-1 overflow-auto px-5 py-4">
+              <List
+                split={false}
+                dataSource={mockMessages}
+                renderItem={(item) => (
+                  <List.Item>
+                    <div
+                      className={`max-w-[80%] rounded-lg px-3 py-2 ${
+                        item.role === "user"
+                          ? "ml-auto bg-blue-50 border border-blue-100"
+                          : "bg-gray-50 border border-gray-100"
+                      }`}
+                    >
+                      <Typography.Text>{item.content}</Typography.Text>
+                    </div>
+                  </List.Item>
+                )}
+              />
+            </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>
+            </div>
+          </div>
+        </Content>
+      </Layout>
+
+      <Drawer
+        title="ChatOne"
+        placement="left"
+        closable
+        onClose={() => setMobileSidebarOpen(false)}
+        open={isMobile && mobileSidebarOpen}
+        width={260}
+      >
+        {sidebarContent}
+      </Drawer>
+    </Layout>
+  );
+}