diff --git a/web/.gitignore b/web/.gitignore
index a547bf3..c493a56 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+public/tinymce
 dist-ssr
 *.local
 
diff --git a/web/package-lock.json b/web/package-lock.json
index 81deebe..8254ea8 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,11 +9,13 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^6.3.2",
+        "@tinymce/tinymce-react": "^6.3.0",
         "antd": "^6.5.0",
         "axios": "^1.18.1",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
-        "react-router-dom": "^7.18.1"
+        "react-router-dom": "^7.18.1",
+        "tinymce": "^8.7.0"
       },
       "devDependencies": {
         "@types/node": "^24.13.2",
@@ -1486,6 +1488,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tinymce/tinymce-react": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmmirror.com/@tinymce/tinymce-react/-/tinymce-react-6.3.0.tgz",
+      "integrity": "sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
+        "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
+        "tinymce": "^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1"
+      },
+      "peerDependenciesMeta": {
+        "tinymce": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmmirror.com/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -1991,6 +2012,12 @@
       "integrity": "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==",
       "license": "MIT"
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
     "node_modules/json2mq": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz",
@@ -2261,6 +2288,18 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2316,6 +2355,15 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/oxlint": {
       "version": "1.72.0",
       "resolved": "https://registry.npmmirror.com/oxlint/-/oxlint-1.72.0.tgz",
@@ -2414,6 +2462,23 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
@@ -2591,6 +2656,12 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinymce": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmmirror.com/tinymce/-/tinymce-8.7.0.tgz",
+      "integrity": "sha512-V3fBgEzKxKT5d41/3qkXs//2SjANGHzo1MWnU2ai8nss8YrzPprrRFlDbX2X9Z6ClyQAknojs7CzEgcsTdqhPQ==",
+      "license": "SEE LICENSE IN license.md"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
diff --git a/web/package.json b/web/package.json
index 684eb53..68f8e73 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@ant-design/icons": "^6.3.2",
+    "@tinymce/tinymce-react": "^6.3.0",
     "antd": "^6.5.0",
     "axios": "^1.18.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1"
+    "react-router-dom": "^7.18.1",
+    "tinymce": "^8.7.0"
   },
   "devDependencies": {
     "@types/node": "^24.13.2",
diff --git a/web/src/api/generationPoints.ts b/web/src/api/generationPoints.ts
new file mode 100644
index 0000000..26c2a3c
--- /dev/null
+++ b/web/src/api/generationPoints.ts
@@ -0,0 +1,51 @@
+import request from "./request";
+import type { GenerationPoint } from "../types";
+
+export async function listGenerationPoints(template_id: string) {
+  const { data } = await request.get<GenerationPoint[]>("/generation-points", {
+    params: { template_id },
+  });
+  return data;
+}
+
+export async function createGenerationPoint(body: {
+  template_id: string;
+  position: string;
+  prompt: string;
+  model_id?: string;
+  order?: number;
+  ref_file?: File;
+}) {
+  const formData = new FormData();
+  formData.append("template_id", body.template_id);
+  formData.append("position", body.position);
+  formData.append("prompt", body.prompt);
+  if (body.model_id) formData.append("model_id", body.model_id);
+  if (body.order !== undefined) formData.append("order", String(body.order));
+  if (body.ref_file) formData.append("ref_file", body.ref_file);
+  const { data } = await request.post<GenerationPoint>("/generation-points", formData);
+  return data;
+}
+
+export async function updateGenerationPoint(
+  id: string,
+  body: Partial<GenerationPoint>
+) {
+  const { data } = await request.put<GenerationPoint>(`/generation-points/${id}`, body);
+  return data;
+}
+
+export async function deleteGenerationPoint(id: string) {
+  await request.delete(`/generation-points/${id}`);
+}
+
+export async function batchUpdateOrder(points: { id: string; order: number }[]) {
+  await request.post("/generation-points/batch-order", { points });
+}
+
+export async function testGenerationPoint(pointId: string) {
+  const { data } = await request.post<{ result: string }>(
+    `/generation-points/${pointId}/test`
+  );
+  return data.result;
+}
diff --git a/web/src/api/models.ts b/web/src/api/models.ts
new file mode 100644
index 0000000..66b1fea
--- /dev/null
+++ b/web/src/api/models.ts
@@ -0,0 +1,31 @@
+import request from "./request";
+import type { AIModel } from "../types";
+
+export async function listModels(params?: { enabled?: boolean }) {
+  const { data } = await request.get<AIModel[]>("/models", { params });
+  return data;
+}
+
+export async function getModel(id: string) {
+  const { data } = await request.get<AIModel>(`/models/${id}`);
+  return data;
+}
+
+export async function createModel(body: Partial<AIModel> & { api_key: string }) {
+  const { data } = await request.post<AIModel>("/models", body);
+  return data;
+}
+
+export async function updateModel(id: string, body: Partial<AIModel>) {
+  const { data } = await request.put<AIModel>(`/models/${id}`, body);
+  return data;
+}
+
+export async function deleteModel(id: string) {
+  await request.delete(`/models/${id}`);
+}
+
+export async function toggleModel(id: string, is_enabled: boolean) {
+  const { data } = await request.patch<AIModel>(`/models/${id}/toggle`, { is_enabled });
+  return data;
+}
diff --git a/web/src/api/request.ts b/web/src/api/request.ts
new file mode 100644
index 0000000..3e26e83
--- /dev/null
+++ b/web/src/api/request.ts
@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const request = axios.create({
+  baseURL: "/api/v1",
+  timeout: 30000,
+});
+
+request.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const message = error.response?.data?.detail || error.message || "请求失败";
+    return Promise.reject(new Error(message));
+  }
+);
+
+export default request;
diff --git a/web/src/api/tasks.ts b/web/src/api/tasks.ts
new file mode 100644
index 0000000..496809c
--- /dev/null
+++ b/web/src/api/tasks.ts
@@ -0,0 +1,27 @@
+import request from "./request";
+import type { GenerationTask } from "../types";
+
+export async function triggerGeneration(templateId: string) {
+  const { data } = await request.post<{ task_id: string; status: string }>(
+    `/templates/${templateId}/generate`
+  );
+  return data;
+}
+
+export async function getTaskStatus(taskId: string) {
+  const { data } = await request.get<GenerationTask>(`/tasks/${taskId}`);
+  return data;
+}
+
+export async function listTasks() {
+  const { data } = await request.get<GenerationTask[]>("/tasks");
+  return data;
+}
+
+export async function cancelTask(taskId: string) {
+  await request.post(`/tasks/${taskId}/cancel`);
+}
+
+export function getTaskDownloadUrl(taskId: string, format: "docx" | "pdf" = "docx") {
+  return `/api/v1/tasks/${taskId}/download?format=${format}`;
+}
diff --git a/web/src/api/templates.ts b/web/src/api/templates.ts
new file mode 100644
index 0000000..e84216e
--- /dev/null
+++ b/web/src/api/templates.ts
@@ -0,0 +1,37 @@
+import request from "./request";
+import type { Template, TemplateListItem } from "../types";
+
+export async function listTemplates() {
+  const { data } = await request.get<TemplateListItem[]>("/templates");
+  return data;
+}
+
+export async function getTemplate(id: string) {
+  const { data } = await request.get<Template>(`/templates/${id}`);
+  return data;
+}
+
+export async function uploadTemplate(file: File, name?: string) {
+  const formData = new FormData();
+  formData.append("file", file);
+  if (name) formData.append("name", name);
+  const { data } = await request.post<Template>("/templates", formData);
+  return data;
+}
+
+export async function getTemplateHtml(id: string) {
+  const { data } = await request.get<{ html_content: string }>(`/templates/${id}/html`);
+  return data.html_content;
+}
+
+export async function updateTemplateHtml(id: string, html_content: string) {
+  await request.put(`/templates/${id}/html`, { html_content });
+}
+
+export async function deleteTemplate(id: string) {
+  await request.delete(`/templates/${id}`);
+}
+
+export function getDownloadUrl(id: string, format: "docx" | "pdf" = "docx") {
+  return `/api/v1/templates/${id}/download?format=${format}`;
+}
diff --git a/web/src/pages/ModelList.tsx b/web/src/pages/ModelList.tsx
index 6cc7566..14de364 100644
--- a/web/src/pages/ModelList.tsx
+++ b/web/src/pages/ModelList.tsx
@@ -1,2 +1,208 @@
-const ModelList = () => <div>模型管理页面</div>;
-export default ModelList;
+import { useEffect, useState, useCallback } from "react";
+import {
+  Table, Button, Modal, Form, Input, Select, Switch,
+  Space, message, Popconfirm, Tag, Tooltip,
+} from "antd";
+import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import type { AIModel } from "../types";
+import * as modelApi from "../api/models";
+
+const PROVIDERS = [
+  { label: "OpenAI", value: "openai" },
+  { label: "Azure", value: "azure" },
+  { label: "自定义", value: "custom" },
+];
+
+export default function ModelList() {
+  const [models, setModels] = useState<AIModel[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingModel, setEditingModel] = useState<AIModel | null>(null);
+  const [form] = Form.useForm();
+
+  const fetchModels = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await modelApi.listModels();
+      setModels(data);
+    } catch {
+      message.error("获取模型列表失败");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchModels();
+  }, [fetchModels]);
+
+  const handleCreate = () => {
+    setEditingModel(null);
+    form.resetFields();
+    form.setFieldsValue({ provider: "openai", is_enabled: true, extra_params: "{}" });
+    setModalOpen(true);
+  };
+
+  const handleEdit = (model: AIModel) => {
+    setEditingModel(model);
+    form.setFieldsValue({
+      ...model,
+      extra_params: JSON.stringify(model.extra_params, null, 2),
+      api_key: "",
+    });
+    setModalOpen(true);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      let extraParams = {};
+      try {
+        extraParams = JSON.parse(values.extra_params || "{}");
+      } catch {
+        message.error("扩展参数 JSON 格式错误");
+        return;
+      }
+
+      const payload = {
+        ...values,
+        extra_params: extraParams,
+      };
+
+      if (editingModel) {
+        if (!payload.api_key) delete payload.api_key;
+        await modelApi.updateModel(editingModel.id, payload);
+        message.success("更新成功");
+      } else {
+        await modelApi.createModel(payload);
+        message.success("创建成功");
+      }
+      setModalOpen(false);
+      fetchModels();
+    } catch (err: unknown) {
+      if (err instanceof Error) message.error(err.message);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    await modelApi.deleteModel(id);
+    message.success("删除成功");
+    fetchModels();
+  };
+
+  const handleToggle = async (id: string, enabled: boolean) => {
+    await modelApi.toggleModel(id, enabled);
+    fetchModels();
+  };
+
+  const columns = [
+    { title: "名称", dataIndex: "name", key: "name", width: 150 },
+    {
+      title: "供应商",
+      dataIndex: "provider",
+      key: "provider",
+      width: 80,
+      render: (v: string) => {
+        const label = PROVIDERS.find((p) => p.value === v)?.label || v;
+        return <Tag>{label}</Tag>;
+      },
+    },
+    { title: "接口地址", dataIndex: "endpoint", key: "endpoint", ellipsis: true },
+    {
+      title: "启用",
+      dataIndex: "is_enabled",
+      key: "is_enabled",
+      width: 80,
+      render: (v: boolean, record: AIModel) => (
+        <Switch
+          checked={v}
+          size="small"
+          onChange={(checked) => handleToggle(record.id, checked)}
+        />
+      ),
+    },
+    {
+      title: "备注",
+      dataIndex: "remark",
+      key: "remark",
+      width: 150,
+      ellipsis: true,
+      render: (v: string | null) => v || "-",
+    },
+    {
+      title: "操作",
+      key: "actions",
+      width: 160,
+      render: (_: unknown, record: AIModel) => (
+        <Space>
+          <Button
+            type="link"
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => handleEdit(record)}
+          />
+          <Popconfirm
+            title="确定删除此模型？"
+            onConfirm={() => handleDelete(record.id)}
+          >
+            <Button type="link" size="small" danger icon={<DeleteOutlined />} />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: "flex", justifyContent: "space-between" }}>
+        <h2>模型管理</h2>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
+          新建模型
+        </Button>
+      </div>
+      <Table
+        columns={columns}
+        dataSource={models}
+        rowKey="id"
+        loading={loading}
+        pagination={false}
+      />
+      <Modal
+        title={editingModel ? "编辑模型" : "新建模型"}
+        open={modalOpen}
+        onCancel={() => setModalOpen(false)}
+        onOk={handleSubmit}
+        width={600}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical" preserve={false}>
+          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
+            <Input placeholder="模型名称" />
+          </Form.Item>
+          <Form.Item name="provider" label="供应商" rules={[{ required: true }]}>
+            <Select options={PROVIDERS} />
+          </Form.Item>
+          <Form.Item name="endpoint" label="接口地址" rules={[{ required: true }]}>
+            <Input placeholder="https://api.openai.com/v1/chat/completions" />
+          </Form.Item>
+          <Form.Item
+            name="api_key"
+            label="API Key"
+            rules={editingModel ? [] : [{ required: true, message: "请输入 API Key" }]}
+          >
+            <Input.Password placeholder={editingModel ? "留空则不修改" : "sk-..."} />
+          </Form.Item>
+          <Form.Item name="extra_params" label="扩展参数 (JSON)">
+            <Input.TextArea rows={4} placeholder='{"temperature": 0.7, "max_tokens": 2000}' />
+          </Form.Item>
+          <Form.Item name="is_enabled" label="启用" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+          <Form.Item name="remark" label="备注">
+            <Input.TextArea rows={2} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index d038e02..0eb32b4 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1,2 +1,42 @@
-const Settings = () => <div>系统设置页面</div>;
-export default Settings;
+import { Card, Form, Select, InputNumber, Button, Space, message, Divider } from "antd";
+import { SaveOutlined } from "@ant-design/icons";
+
+export default function Settings() {
+  const [form] = Form.useForm();
+
+  const handleSave = () => {
+    form.validateFields().then(() => {
+      message.success("设置保存成功（此功能为前端演示）");
+    });
+  };
+
+  return (
+    <div style={{ maxWidth: 600 }}>
+      <h2 style={{ marginBottom: 16 }}>系统设置</h2>
+      <Card>
+        <Form form={form} layout="vertical">
+          <Form.Item name="default_model" label="全局默认 AI 模型">
+            <Select
+              placeholder="请选择默认模型"
+              allowClear
+              options={[]}
+              disabled
+              notFoundContent="请先在模型管理中创建模型"
+            />
+          </Form.Item>
+          <Form.Item name="max_concurrency" label="最大并发数" initialValue={3}>
+            <InputNumber min={1} max={10} />
+          </Form.Item>
+          <Form.Item name="timeout" label="AI 调用超时（秒）" initialValue={120}>
+            <InputNumber min={10} max={600} />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" icon={<SaveOutlined />} onClick={handleSave}>
+              保存设置
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  );
+}
diff --git a/web/src/pages/TaskList.tsx b/web/src/pages/TaskList.tsx
index 0790220..0086c3f 100644
--- a/web/src/pages/TaskList.tsx
+++ b/web/src/pages/TaskList.tsx
@@ -1,2 +1,130 @@
-const TaskList = () => <div>任务历史页面</div>;
-export default TaskList;
+import { useEffect, useState, useCallback } from "react";
+import { Table, Button, Space, Tag, message, Popconfirm } from "antd";
+import { DownloadOutlined, StopOutlined, ReloadOutlined } from "@ant-design/icons";
+import type { GenerationTask } from "../types";
+import * as taskApi from "../api/tasks";
+
+const STATUS_MAP: Record<string, { color: string; label: string }> = {
+  pending: { color: "default", label: "等待中" },
+  processing: { color: "processing", label: "生成中" },
+  done: { color: "success", label: "已完成" },
+  failed: { color: "error", label: "失败" },
+};
+
+export default function TaskList() {
+  const [tasks, setTasks] = useState<GenerationTask[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchTasks = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await taskApi.listTasks();
+      setTasks(data);
+    } catch {
+      message.error("获取任务列表失败");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTasks();
+  }, [fetchTasks]);
+
+  const handleCancel = async (id: string) => {
+    await taskApi.cancelTask(id);
+    message.success("已取消");
+    fetchTasks();
+  };
+
+  const columns = [
+    {
+      title: "模板 ID",
+      dataIndex: "template_id",
+      key: "template_id",
+      width: 120,
+      ellipsis: true,
+      render: (v: string) => v.slice(0, 8) + "...",
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      width: 100,
+      render: (v: string) => {
+        const cfg = STATUS_MAP[v] || { color: "default", label: v };
+        return <Tag color={cfg.color}>{cfg.label}</Tag>;
+      },
+    },
+    {
+      title: "错误信息",
+      dataIndex: "error_msg",
+      key: "error_msg",
+      ellipsis: true,
+      render: (v: string | null) => v || "-",
+    },
+    {
+      title: "创建时间",
+      dataIndex: "created_at",
+      key: "created_at",
+      render: (v: string) => new Date(v).toLocaleString(),
+    },
+    {
+      title: "完成时间",
+      dataIndex: "finished_at",
+      key: "finished_at",
+      render: (v: string | null) => (v ? new Date(v).toLocaleString() : "-"),
+    },
+    {
+      title: "操作",
+      key: "actions",
+      width: 200,
+      render: (_: unknown, record: GenerationTask) => (
+        <Space>
+          {record.status === "done" && (
+            <>
+              <Button
+                size="small"
+                icon={<DownloadOutlined />}
+                onClick={() => window.open(taskApi.getTaskDownloadUrl(record.id))}
+              >
+                DOCX
+              </Button>
+              <Button
+                size="small"
+                onClick={() => window.open(taskApi.getTaskDownloadUrl(record.id, "pdf"))}
+              >
+                PDF
+              </Button>
+            </>
+          )}
+          {(record.status === "pending" || record.status === "processing") && (
+            <Popconfirm title="确定取消此任务？" onConfirm={() => handleCancel(record.id)}>
+              <Button size="small" danger icon={<StopOutlined />}>
+                取消
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: "flex", justifyContent: "space-between" }}>
+        <h2>任务历史</h2>
+        <Button icon={<ReloadOutlined />} onClick={fetchTasks}>
+          刷新
+        </Button>
+      </div>
+      <Table
+        columns={columns}
+        dataSource={tasks}
+        rowKey="id"
+        loading={loading}
+        pagination={{ pageSize: 20 }}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/TemplateEditor.tsx b/web/src/pages/TemplateEditor.tsx
index 6c4243b..4e2dba5 100644
--- a/web/src/pages/TemplateEditor.tsx
+++ b/web/src/pages/TemplateEditor.tsx
@@ -1,2 +1,442 @@
-const TemplateEditor = () => <div>模板编辑器页面</div>;
-export default TemplateEditor;
+import { useEffect, useState, useRef, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  Layout, Button, Modal, Form, Input, Select, Upload,
+  Space, message, Spin, Progress, Popconfirm, Card, Collapse,
+} from "antd";
+import {
+  PlusOutlined, DeleteOutlined, EditOutlined, SaveOutlined,
+  ArrowLeftOutlined, ThunderboltOutlined, DownloadOutlined,
+  ExperimentOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
+} from "@ant-design/icons";
+import { Editor } from "@tinymce/tinymce-react";
+import type { Editor as TinyMCEEditor } from "tinymce";
+import type { GenerationPoint, AIModel, GenerationTask } from "../types";
+import * as templateApi from "../api/templates";
+import * as pointApi from "../api/generationPoints";
+import * as modelApi from "../api/models";
+import * as taskApi from "../api/tasks";
+
+const { Sider, Content } = Layout;
+
+export default function TemplateEditor() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const editorRef = useRef<TinyMCEEditor | null>(null);
+  const selectionRef = useRef<{ start: number; end: number; text: string } | null>(null);
+
+  const [htmlContent, setHtmlContent] = useState("");
+  const [templateName, setTemplateName] = useState("");
+  const [points, setPoints] = useState<GenerationPoint[]>([]);
+  const [models, setModels] = useState<AIModel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [pointModalOpen, setPointModalOpen] = useState(false);
+  const [editingPoint, setEditingPoint] = useState<GenerationPoint | null>(null);
+  const [showSelectionBtn, setShowSelectionBtn] = useState(false);
+  const [selBtnPos, setSelBtnPos] = useState({ x: 0, y: 0 });
+  const [pointForm] = Form.useForm();
+  const [panelCollapsed, setPanelCollapsed] = useState(false);
+
+  const [generating, setGenerating] = useState(false);
+  const [taskStatus, setTaskStatus] = useState<GenerationTask | null>(null);
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const loadData = useCallback(async () => {
+    if (!id) return;
+    setLoading(true);
+    try {
+      const [template, pointsData, modelsData] = await Promise.all([
+        templateApi.getTemplate(id),
+        pointApi.listGenerationPoints(id),
+        modelApi.listModels({ enabled: true }),
+      ]);
+      setTemplateName(template.name);
+      setHtmlContent(template.html_content || "");
+      setPoints(pointsData);
+      setModels(modelsData);
+    } catch {
+      message.error("加载数据失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    loadData();
+    return () => {
+      if (pollingRef.current) clearInterval(pollingRef.current);
+    };
+  }, [loadData]);
+
+  const handleSave = async () => {
+    if (!id) return;
+    setSaving(true);
+    try {
+      const html = editorRef.current?.getContent() || htmlContent;
+      await templateApi.updateTemplateHtml(id, html);
+      setHtmlContent(html);
+      message.success("保存成功");
+    } catch {
+      message.error("保存失败");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleEditorInit = (_evt: unknown, editor: TinyMCEEditor) => {
+    editorRef.current = editor;
+    editor.on("selectionchange", () => {
+      const sel = editor.selection.getContent({ format: "text" });
+      if (sel && sel.trim().length > 0) {
+        const content = editor.getContent();
+        const rng = editor.selection.getRng();
+        if (rng) {
+          const preRange = rng.cloneRange();
+          preRange.selectNodeContents(editor.getBody());
+          preRange.setEnd(rng.startContainer, rng.startOffset);
+          const start = preRange.toString().length;
+          const end = start + sel.length;
+          selectionRef.current = { start, end, text: sel.trim() };
+        }
+        const ed = editor.getContainer();
+        const rect = ed.getBoundingClientRect();
+        setSelBtnPos({ x: rect.left + 100, y: rect.top + 10 });
+        setShowSelectionBtn(true);
+      } else {
+        setShowSelectionBtn(false);
+      }
+    });
+  };
+
+  const handleCreatePoint = () => {
+    setEditingPoint(null);
+    pointForm.resetFields();
+    if (selectionRef.current) {
+      pointForm.setFieldsValue({
+        prompt: `根据上下文生成关于「${selectionRef.current.text.slice(0, 20)}...」的内容`,
+      });
+    }
+    setPointModalOpen(true);
+  };
+
+  const handleEditPoint = (point: GenerationPoint) => {
+    setEditingPoint(point);
+    pointForm.setFieldsValue({
+      prompt: point.prompt,
+      model_id: point.model_id,
+    });
+    setPointModalOpen(true);
+  };
+
+  const handlePointSubmit = async () => {
+    if (!id) return;
+    try {
+      const values = await pointForm.validateFields();
+      const position = selectionRef.current
+        ? { start: selectionRef.current.start, end: selectionRef.current.end }
+        : editingPoint?.position;
+
+      const refFile = values.ref_file?.fileList?.[0]?.originFileObj;
+
+      if (editingPoint) {
+        const updateData: Record<string, unknown> = {};
+        if (values.prompt) updateData.prompt = values.prompt;
+        if (values.model_id) updateData.model_id = values.model_id;
+        await pointApi.updateGenerationPoint(editingPoint.id, updateData);
+        message.success("更新成功");
+      } else if (position) {
+        await pointApi.createGenerationPoint({
+          template_id: id,
+          position: JSON.stringify(position),
+          prompt: values.prompt,
+          model_id: values.model_id,
+          order: points.length,
+          ref_file: refFile,
+        });
+        message.success("创建成功");
+        selectionRef.current = null;
+        setShowSelectionBtn(false);
+      } else {
+        message.warning("请先在编辑器中选中文本");
+        return;
+      }
+
+      setPointModalOpen(false);
+      const updated = await pointApi.listGenerationPoints(id);
+      setPoints(updated);
+    } catch (err: unknown) {
+      if (err instanceof Error) message.error(err.message);
+    }
+  };
+
+  const handleDeletePoint = async (pointId: string) => {
+    await pointApi.deleteGenerationPoint(pointId);
+    message.success("删除成功");
+    const updated = await pointApi.listGenerationPoints(id!);
+    setPoints(updated);
+  };
+
+  const handleTestPoint = async (pointId: string) => {
+    try {
+      message.loading({ content: "测试中...", key: "test" });
+      const result = await pointApi.testGenerationPoint(pointId);
+      message.success({ content: "测试完成", key: "test" });
+      Modal.info({ title: "AI 生成结果", content: result, width: 600 });
+    } catch {
+      message.error({ content: "测试失败", key: "test" });
+    }
+  };
+
+  const handleGenerate = async () => {
+    if (!id) return;
+    if (points.length === 0) {
+      message.warning("请先添加至少一个生成点");
+      return;
+    }
+    setGenerating(true);
+    try {
+      const { task_id } = await taskApi.triggerGeneration(id);
+      pollingRef.current = setInterval(async () => {
+        try {
+          const status = await taskApi.getTaskStatus(task_id);
+          setTaskStatus(status);
+          if (status.status === "done" || status.status === "failed") {
+            if (pollingRef.current) clearInterval(pollingRef.current);
+            if (status.status === "done") {
+              message.success("生成完成！");
+            } else {
+              message.error(`生成失败: ${status.error_msg}`);
+            }
+            setGenerating(false);
+          }
+        } catch {
+          if (pollingRef.current) clearInterval(pollingRef.current);
+          setGenerating(false);
+        }
+      }, 2000);
+    } catch (err: unknown) {
+      if (err instanceof Error) message.error(err.message);
+      setGenerating(false);
+    }
+  };
+
+  const handleDownload = (format: "docx" | "pdf" = "docx") => {
+    if (taskStatus?.id) {
+      window.open(taskApi.getTaskDownloadUrl(taskStatus.id, format));
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: "center", padding: 100 }}>
+        <Spin size="large" />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ height: "calc(100vh - 120px)" }}>
+      <div
+        style={{
+          marginBottom: 12,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Space>
+          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate("/templates")}>
+            返回
+          </Button>
+          <h3 style={{ margin: 0 }}>{templateName}</h3>
+        </Space>
+        <Space>
+          <Button
+            icon={panelCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setPanelCollapsed(!panelCollapsed)}
+          />
+          <Button icon={<SaveOutlined />} onClick={handleSave} loading={saving}>
+            保存
+          </Button>
+          <Button
+            type="primary"
+            danger
+            icon={<ThunderboltOutlined />}
+            onClick={handleGenerate}
+            loading={generating}
+          >
+            生成文档
+          </Button>
+          {taskStatus?.status === "done" && (
+            <>
+              <Button icon={<DownloadOutlined />} onClick={() => handleDownload("docx")}>
+                DOCX
+              </Button>
+              <Button onClick={() => handleDownload("pdf")}>PDF</Button>
+            </>
+          )}
+        </Space>
+      </div>
+      {taskStatus && taskStatus.status !== "done" && taskStatus.status !== "failed" && (
+        <div style={{ marginBottom: 12 }}>
+          <Progress
+            percent={taskStatus.status === "processing" ? 50 : 10}
+            status="active"
+            format={() => taskStatus.status === "pending" ? "等待中..." : "生成中..."}
+          />
+        </div>
+      )}
+      {taskStatus?.status === "failed" && (
+        <div style={{ marginBottom: 12, color: "red" }}>失败: {taskStatus.error_msg}</div>
+      )}
+      <Layout style={{ height: "calc(100% - 50px)", background: "#fff" }}>
+        <Content style={{ position: "relative", overflow: "hidden" }}>
+          {showSelectionBtn && (
+            <Button
+              type="primary"
+              size="small"
+              icon={<PlusOutlined />}
+              onClick={handleCreatePoint}
+              style={{
+                position: "absolute",
+                zIndex: 1310,
+                top: 8,
+                left: 8,
+              }}
+            >
+              设为 AI 生成点
+            </Button>
+          )}
+          <Editor
+            tinymceScriptSrc="/tinymce/tinymce.min.js"
+            onInit={handleEditorInit}
+            value={htmlContent}
+            init={{
+              height: "100%",
+              menubar: true,
+              plugins: [
+                "advlist", "autolink", "lists", "link", "image",
+                "charmap", "preview", "anchor", "searchreplace",
+                "visualblocks", "code", "fullscreen", "insertdatetime",
+                "media", "table", "help", "wordcount",
+              ],
+              toolbar:
+                "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+              content_style: "body { font-family: Arial, sans-serif; font-size: 14px; }",
+              setup: (editor) => {
+                editor.on("init", () => {
+                  handleEditorInit(null, editor);
+                });
+              },
+            }}
+          />
+        </Content>
+        {!panelCollapsed && (
+          <Sider width={320} theme="light" style={{ padding: 16, overflow: "auto", borderLeft: "1px solid #f0f0f0" }}>
+            <h4 style={{ marginBottom: 12 }}>生成点列表 ({points.length})</h4>
+            {points.map((point, index) => {
+              const model = models.find((m) => m.id === point.model_id);
+              return (
+                <Card
+                  key={point.id}
+                  size="small"
+                  style={{ marginBottom: 8 }}
+                  title={
+                    <Space size={4}>
+                      <span style={{ fontSize: 12, color: "#999" }}>#{index + 1}</span>
+                      {model && (
+                        <span style={{ fontSize: 12, color: "#1677ff" }}>
+                          {model.name}
+                        </span>
+                      )}
+                    </Space>
+                  }
+                  extra={
+                    <Space size={4}>
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<ExperimentOutlined />}
+                        onClick={() => handleTestPoint(point.id)}
+                      />
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<EditOutlined />}
+                        onClick={() => handleEditPoint(point)}
+                      />
+                      <Popconfirm
+                        title="确定删除？"
+                        onConfirm={() => handleDeletePoint(point.id)}
+                      >
+                        <Button type="text" size="small" danger icon={<DeleteOutlined />} />
+                      </Popconfirm>
+                    </Space>
+                  }
+                >
+                  <p style={{ fontSize: 12, color: "#666", margin: 0, wordBreak: "break-all" }}>
+                    {point.prompt.slice(0, 80)}
+                    {point.prompt.length > 80 && "..."}
+                  </p>
+                </Card>
+              );
+            })}
+            {points.length === 0 && (
+              <p style={{ color: "#999", fontSize: 13 }}>
+                选中编辑器中的文本，点击"设为 AI 生成点"
+              </p>
+            )}
+          </Sider>
+        )}
+      </Layout>
+
+      <Modal
+        title={editingPoint ? "编辑生成点" : "新建生成点"}
+        open={pointModalOpen}
+        onCancel={() => setPointModalOpen(false)}
+        onOk={handlePointSubmit}
+        width={560}
+        destroyOnClose
+      >
+        <Form form={pointForm} layout="vertical" preserve={false}>
+          {selectionRef.current && !editingPoint && (
+            <div
+              style={{
+                marginBottom: 12,
+                padding: 8,
+                background: "#f6f8fa",
+                borderRadius: 6,
+                fontSize: 13,
+                color: "#666",
+              }}
+            >
+              已选中: 「{selectionRef.current.text.slice(0, 50)}
+              {selectionRef.current.text.length > 50 ? "..." : ""}」
+            </div>
+          )}
+          <Form.Item name="prompt" label="提示词" rules={[{ required: true }]}>
+            <Input.TextArea
+              rows={4}
+              placeholder="请输入 AI 生成提示词，例如：请根据参考文件内容，生成一段项目背景介绍..."
+            />
+          </Form.Item>
+          <Form.Item name="model_id" label="AI 模型">
+            <Select
+              allowClear
+              placeholder="留空则使用全局默认模型"
+              options={models.map((m) => ({ label: m.name, value: m.id }))}
+            />
+          </Form.Item>
+          {!editingPoint && (
+            <Form.Item name="ref_file" label="参考文件" valuePropName="fileList" getValueFromEvent={(e) => e.fileList}>
+              <Upload maxCount={1} beforeUpload={() => false}>
+                <Button icon={<PlusOutlined />}>上传参考文件</Button>
+              </Upload>
+            </Form.Item>
+          )}
+        </Form>
+      </Modal>
+    </div>
+  );
+}
diff --git a/web/src/pages/TemplateList.tsx b/web/src/pages/TemplateList.tsx
index 58ee5a0..bdf8fd8 100644
--- a/web/src/pages/TemplateList.tsx
+++ b/web/src/pages/TemplateList.tsx
@@ -1,2 +1,121 @@
-const TemplateList = () => <div>模板列表页面</div>;
-export default TemplateList;
+import { useEffect, useState, useCallback } from "react";
+import { Table, Button, Upload, Space, message, Popconfirm } from "antd";
+import { UploadOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, PlusOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import type { TemplateListItem } from "../types";
+import * as templateApi from "../api/templates";
+
+export default function TemplateList() {
+  const navigate = useNavigate();
+  const [templates, setTemplates] = useState<TemplateListItem[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchTemplates = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await templateApi.listTemplates();
+      setTemplates(data);
+    } catch {
+      message.error("获取模板列表失败");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTemplates();
+  }, [fetchTemplates]);
+
+  const handleUpload = async (file: File) => {
+    try {
+      await templateApi.uploadTemplate(file);
+      message.success("上传成功");
+      fetchTemplates();
+    } catch {
+      message.error("上传失败");
+    }
+    return false;
+  };
+
+  const handleDelete = async (id: string) => {
+    await templateApi.deleteTemplate(id);
+    message.success("删除成功");
+    fetchTemplates();
+  };
+
+  const columns = [
+    { title: "模板名称", dataIndex: "name", key: "name" },
+    {
+      title: "创建时间",
+      dataIndex: "created_at",
+      key: "created_at",
+      render: (v: string) => new Date(v).toLocaleString(),
+    },
+    {
+      title: "更新时间",
+      dataIndex: "updated_at",
+      key: "updated_at",
+      render: (v: string) => new Date(v).toLocaleString(),
+    },
+    {
+      title: "操作",
+      key: "actions",
+      width: 240,
+      render: (_: unknown, record: TemplateListItem) => (
+        <Space>
+          <Button
+            type="primary"
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => navigate(`/editor/${record.id}`)}
+          >
+            编辑
+          </Button>
+          <Button
+            size="small"
+            icon={<DownloadOutlined />}
+            onClick={() => window.open(templateApi.getDownloadUrl(record.id))}
+          >
+            DOCX
+          </Button>
+          <Button
+            size="small"
+            onClick={() => window.open(templateApi.getDownloadUrl(record.id, "pdf"))}
+          >
+            PDF
+          </Button>
+          <Popconfirm title="确定删除此模板？" onConfirm={() => handleDelete(record.id)}>
+            <Button size="small" danger icon={<DeleteOutlined />} />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: "flex", justifyContent: "space-between" }}>
+        <h2>模板管理</h2>
+        <Upload
+          accept=".docx"
+          showUploadList={false}
+          beforeUpload={(file) => {
+            handleUpload(file);
+            return false;
+          }}
+        >
+          <Button type="primary" icon={<PlusOutlined />}>
+            上传模板
+          </Button>
+        </Upload>
+      </div>
+      <Table
+        columns={columns}
+        dataSource={templates}
+        rowKey="id"
+        loading={loading}
+        pagination={false}
+      />
+    </div>
+  );
+}
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
new file mode 100644
index 0000000..f10451b
--- /dev/null
+++ b/web/src/types/index.ts
@@ -0,0 +1,50 @@
+export interface AIModel {
+  id: string;
+  name: string;
+  provider: string;
+  endpoint: string;
+  api_key: string;
+  extra_params: Record<string, unknown>;
+  is_enabled: boolean;
+  remark: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Template {
+  id: string;
+  name: string;
+  file_path: string;
+  html_content: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TemplateListItem {
+  id: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface GenerationPoint {
+  id: string;
+  template_id: string;
+  position: { start: number; end: number };
+  prompt: string;
+  model_id: string | null;
+  ref_file_path: string | null;
+  order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface GenerationTask {
+  id: string;
+  template_id: string;
+  status: "pending" | "processing" | "done" | "failed";
+  result_file_path: string | null;
+  error_msg: string | null;
+  created_at: string;
+  finished_at: string | null;
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 8b0f57b..d8d6737 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  server: {
+    port: 3000,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+    },
+  },
+});