ai-agent-book 精选快照（<2MB 代码与文档，来自 github.com/bojieli/ai-agent-book）

2026-08-20 13:12:50 +00:00
commit b119135836
10275 changed files with 3284984 additions and 0 deletions
@@ -0,0 +1 @@
+:root{--color-primary: #2563eb;--color-primary-text: #ffffff;--color-bg: #f5f5f5;--color-panel: #ffffff;--color-text: #1f2937;--font-family: monospace;--radius: 12px}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family)}.app{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--color-panel)}.header{padding:20px 24px;border-bottom:1px solid #e5e7eb}.header-title{margin:0;font-size:20px}.header-subtitle{margin:4px 0 0;font-size:13px;color:#6b7280}.chat-window{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.bubble{max-width:75%;padding:10px 14px;border-radius:var(--radius);line-height:1.5;white-space:pre-wrap}.bubble-assistant{align-self:flex-start;background:#eef2f5;color:var(--color-text)}.bubble-user{align-self:flex-end;background:var(--color-primary);color:var(--color-primary-text)}.composer{display:flex;gap:8px;padding:16px 24px;border-top:1px solid #e5e7eb}.composer-input{flex:1;padding:10px 12px;border:1px solid #d1d5db;border-radius:var(--radius);font-size:14px;font-family:inherit}.send-button{padding:10px 20px;border:none;border-radius:var(--radius);background:var(--color-primary);color:var(--color-primary-text);font-size:14px;cursor:pointer}.send-button:hover{opacity:.9}
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>对话式界面定制系统</title>
+    <script type="module" crossorigin src="/assets/index-CvgOOKX3.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CCn-3TaK.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>对话式界面定制系统</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,20 @@
+{
+  "name": "conversational-ui-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "实验 5-11：对话式界面定制系统 —— React(Vite) 前端",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.7"
+  }
+}
@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+// ===========================================================================
+// 基础 chatbot 界面。
+// 这是一个"可被自然语言定制"的最小 React 应用：
+//   - 标题文案、按钮文字等 UI 文本都写在这里（Agent 可按需求改文案）；
+//   - 颜色、字体、布局等样式集中在 theme.css（Agent 可按需求改样式）。
+// 用户在对话中说"把发送按钮改成蓝色 / 换成等宽字体 / 标题改成 XXX"，
+// Agent 会定位并修改这些源码文件，Vite HMR 让改动即时生效。
+// ===========================================================================
+
+// UI 文案（Agent 定制"文案"需求时修改这里）
+const HEADER_TITLE = "我的专属客服";
+const HEADER_SUBTITLE = "有什么可以帮你的吗？";
+const SEND_BUTTON_LABEL = "发送";
+
+export default function App() {
+  const [messages, setMessages] = useState([
+    { role: "assistant", text: "你好！我是你的智能助手，随时为你服务。" },
+  ]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSend() {
+    const text = input.trim();
+    if (!text || loading) return;
+    setMessages((m) => [...m, { role: "user", text }]);
+    setInput("");
+    setLoading(true);
+    try {
+      const resp = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: text }),
+      });
+      const data = await resp.json();
+      setMessages((m) => [...m, { role: "assistant", text: data.reply }]);
+    } catch (e) {
+      setMessages((m) => [
+        ...m,
+        { role: "assistant", text: "（后端未连接，这是本地占位回复）" },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="app">
+      <header className="header">
+        <h1 className="header-title">{HEADER_TITLE}</h1>
+        <p className="header-subtitle">{HEADER_SUBTITLE}</p>
+      </header>
+
+      <main className="chat-window">
+        {messages.map((m, i) => (
+          <div key={i} className={`bubble bubble-${m.role}`}>
+            {m.text}
+          </div>
+        ))}
+        {loading && <div className="bubble bubble-assistant">思考中…</div>}
+      </main>
+
+      <footer className="composer">
+        <input
+          className="composer-input"
+          value={input}
+          placeholder="输入消息…"
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSend()}
+        />
+        <button className="send-button" onClick={handleSend}>
+          {SEND_BUTTON_LABEL}
+        </button>
+      </footer>
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./theme.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
@@ -0,0 +1,108 @@
+/* ==========================================================================
+   主题样式表（Agent 定制"颜色 / 字体 / 布局"需求时修改这里）
+   为方便自然语言定制，关键视觉变量集中在 :root 里。
+   ========================================================================== */
+:root {
+  --color-primary: #2563eb;        /* 主色（发送按钮、用户气泡）——改为蓝色 */
+  --color-primary-text: #ffffff;   /* 主色上的文字颜色 */
+  --color-bg: #f5f5f5;             /* 页面背景 */
+  --color-panel: #ffffff;          /* 面板/卡片背景 */
+  --color-text: #1f2937;           /* 正文文字 */
+  --font-family: monospace;        /* 将字体改为等宽字体 */
+  --radius: 12px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-family);
+}
+
+.app {
+  max-width: 640px;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-panel);
+}
+
+.header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.header-title {
+  margin: 0;
+  font-size: 20px;
+}
+
+.header-subtitle {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.chat-window {
+  flex: 1;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+.bubble {
+  max-width: 75%;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.bubble-assistant {
+  align-self: flex-start;
+  background: #eef2f5;
+  color: var(--color-text);
+}
+
+.bubble-user {
+  align-self: flex-end;
+  background: var(--color-primary);
+  color: var(--color-primary-text);
+}
+
+.composer {
+  display: flex;
+  gap: 8px;
+  padding: 16px 24px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.composer-input {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.send-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--color-primary);
+  color: var(--color-primary-text);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.send-button:hover {
+  opacity: 0.9;
+}
@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// Vite 开发服务器默认开启 HMR（热模块替换）。
+// 当 Agent 修改 src/ 下的源码时，浏览器无需整页刷新即可即时看到界面变化。
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    // 后端 FastAPI 跑在 8000，前端把 /api 请求代理过去，避免跨域。
+    proxy: {
+      "/api": "http://127.0.0.1:56044",
+    },
+  },
+});
				`@@ -0,0 +1 @@`
				:root{--color-primary: #2563eb;--color-primary-text: #ffffff;--color-bg: #f5f5f5;--color-panel: #ffffff;--color-text: #1f2937;--font-family: monospace;--radius: 12px}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family)}.app{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--color-panel)}.header{padding:20px 24px;border-bottom:1px solid #e5e7eb}.header-title{margin:0;font-size:20px}.header-subtitle{margin:4px 0 0;font-size:13px;color:#6b7280}.chat-window{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.bubble{max-width:75%;padding:10px 14px;border-radius:var(--radius);line-height:1.5;white-space:pre-wrap}.bubble-assistant{align-self:flex-start;background:#eef2f5;color:var(--color-text)}.bubble-user{align-self:flex-end;background:var(--color-primary);color:var(--color-primary-text)}.composer{display:flex;gap:8px;padding:16px 24px;border-top:1px solid #e5e7eb}.composer-input{flex:1;padding:10px 12px;border:1px solid #d1d5db;border-radius:var(--radius);font-size:14px;font-family:inherit}.send-button{padding:10px 20px;border:none;border-radius:var(--radius);background:var(--color-primary);color:var(--color-primary-text);font-size:14px;cursor:pointer}.send-button:hover{opacity:.9}