v1.0 - 文章编写系统初始版本

功能：
- 主题管理（创建/编辑/删除）
- 素材收集（文本/图片）
- Prompt编辑
- 大模型生成文章
- 文章管理（查看/编辑/删除）

技术栈：Flask + SQLite + LLM API

.env.example

@@ -0,0 +1,4 @@
+# LLM API 配置
+LLM_URL=https://your-llm-api/v1/chat/completions
+LLM_API_KEY=your-api-key-here
+LLM_MODEL=qwen3.6-plus

.gitignore

@@ -0,0 +1,28 @@
+# Python
+__pycache__/
+*.py[cod]
+*.egg-info/
+dist/
+build/
+.venv/
+venv/
+
+# Database
+*.db
+*.sqlite3
+
+# Uploads
+static/uploads/*
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment
+.env

README.md

@@ -0,0 +1,63 @@
+# Article Writer - 文章编写系统
+
+基于 Flask + LLM 的智能文章编写系统，支持主题管理、素材收集和大模型生成文章。
+
+## 功能
+
+- 主题管理：创建、编辑、删除文章主题
+- 素材收集：支持文本素材和图片素材
+- Prompt编辑：每个主题可自定义生成提示词
+- 大模型生成：调用 LLM 根据素材自动生成文章
+- 文章管理：查看、编辑、删除生成的文章
+
+## 技术栈
+
+- 后端：Python 3 + Flask + SQLite
+- 前端：HTML/CSS/JS（原生）
+- LLM：兼容 OpenAI API 格式的大模型接口
+
+## 快速开始
+
+```bash
+# 安装依赖
+pip install flask requests
+
+# 配置环境变量
+export LLM_URL="https://your-llm-api/v1/chat/completions"
+export LLM_API_KEY="your-api-key"
+export LLM_MODEL="qwen3.6-plus"
+
+# 启动服务
+python app.py
+```
+
+访问 http://localhost:19200
+
+## 配置
+
+通过环境变量配置 LLM 接口：
+
+| 环境变量 | 说明 | 默认值 |
+|---------|------|--------|
+| LLM_URL | 大模型 API 地址 | - |
+| LLM_API_KEY | API 密钥 | - |
+| LLM_MODEL | 模型名称 | qwen3.6-plus |
+
+## 项目结构
+
+```
+article-writer/
+├── app.py              # 主应用（Flask后端）
+├── templates/
+│   ├── index.html      # 首页（主题列表）
+│   └── topic.html      # 主题详情页
+├── static/
+│   ├── css/
+│   ├── js/
+│   └── uploads/        # 图片上传目录
+└── .gitignore
+```
+
+## License
+
+MIT

app.py

@@ -0,0 +1,357 @@
+#!/usr/bin/env python3
+"""
+文章编写系统 - Article Writer System
+功能：主题管理、素材收集、Prompt编辑、大模型生成文章
+"""
+
+import os
+import json
+import uuid
+import time
+import sqlite3
+import requests
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, redirect, url_for, send_from_directory
+from werkzeug.utils import secure_filename
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+UPLOAD_DIR = os.path.join(BASE_DIR, 'static', 'uploads')
+DB_PATH = os.path.join(BASE_DIR, 'articles.db')
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp'}
+
+# LLM配置（通过环境变量读取，避免密钥泄露）
+LLM_URL = os.environ.get('LLM_URL', 'https://www.autodl.art/api/v1/chat/completions')
+LLM_API_KEY = os.environ.get('LLM_API_KEY', '')
+LLM_MODEL = os.environ.get('LLM_MODEL', 'qwen3.6-plus')
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB
+
+
+def get_db():
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA journal_mode=WAL")
+    conn.execute("PRAGMA foreign_keys=ON")
+    return conn
+
+
+def init_db():
+    conn = get_db()
+    conn.executescript('''
+        CREATE TABLE IF NOT EXISTS topics (
+            id TEXT PRIMARY KEY,
+            name TEXT NOT NULL,
+            description TEXT DEFAULT '',
+            prompt TEXT DEFAULT '',
+            created_at TEXT DEFAULT (datetime('now','localtime')),
+            updated_at TEXT DEFAULT (datetime('now','localtime'))
+        );
+        CREATE TABLE IF NOT EXISTS materials (
+            id TEXT PRIMARY KEY,
+            topic_id TEXT NOT NULL,
+            type TEXT NOT NULL DEFAULT 'text',
+            content TEXT DEFAULT '',
+            file_path TEXT DEFAULT '',
+            sort_order INTEGER DEFAULT 0,
+            created_at TEXT DEFAULT (datetime('now','localtime')),
+            FOREIGN KEY (topic_id) REFERENCES topics(id) ON DELETE CASCADE
+        );
+        CREATE TABLE IF NOT EXISTS articles (
+            id TEXT PRIMARY KEY,
+            topic_id TEXT NOT NULL,
+            content TEXT DEFAULT '',
+            prompt_used TEXT DEFAULT '',
+            model TEXT DEFAULT '',
+            created_at TEXT DEFAULT (datetime('now','localtime')),
+            FOREIGN KEY (topic_id) REFERENCES topics(id) ON DELETE CASCADE
+        );
+    ''')
+    conn.commit()
+    conn.close()
+
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+# ==================== 页面路由 ====================
+
+@app.route('/')
+def index():
+    conn = get_db()
+    topics = conn.execute(
+        'SELECT t.*, (SELECT COUNT(*) FROM materials WHERE topic_id=t.id) as mat_count '
+        'FROM topics t ORDER BY updated_at DESC'
+    ).fetchall()
+    conn.close()
+    return render_template('index.html', topics=topics)
+
+
+@app.route('/topic/<topic_id>')
+def topic_detail(topic_id):
+    conn = get_db()
+    topic = conn.execute('SELECT * FROM topics WHERE id=?', (topic_id,)).fetchone()
+    if not topic:
+        conn.close()
+        return redirect(url_for('index'))
+    materials = conn.execute(
+        'SELECT * FROM materials WHERE topic_id=? ORDER BY sort_order, created_at',
+        (topic_id,)
+    ).fetchall()
+    articles = conn.execute(
+        'SELECT * FROM articles WHERE topic_id=? ORDER BY created_at DESC',
+        (topic_id,)
+    ).fetchall()
+    conn.close()
+    return render_template('topic.html', topic=topic, materials=materials, articles=articles)
+
+
+# ==================== 主题API ====================
+
+@app.route('/api/topics', methods=['POST'])
+def create_topic():
+    data = request.get_json(force=True)
+    name = data.get('name', '').strip()
+    if not name:
+        return jsonify({'error': '主题名不能为空'}), 400
+    conn = get_db()
+    tid = str(uuid.uuid4())[:8]
+    now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    conn.execute(
+        'INSERT INTO topics (id, name, description, prompt, created_at, updated_at) VALUES (?,?,?,?,?,?)',
+        (tid, name, data.get('description', ''), data.get('prompt', ''), now, now)
+    )
+    conn.commit()
+    topic = conn.execute('SELECT * FROM topics WHERE id=?', (tid,)).fetchone()
+    conn.close()
+    return jsonify(dict(topic))
+
+
+@app.route('/api/topics/<topic_id>', methods=['PUT'])
+def update_topic(topic_id):
+    data = request.get_json(force=True)
+    conn = get_db()
+    now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    fields = []
+    values = []
+    for key in ['name', 'description', 'prompt']:
+        if key in data:
+            fields.append(f'{key}=?')
+            values.append(data[key])
+    if fields:
+        fields.append('updated_at=?')
+        values.append(now)
+        values.append(topic_id)
+        conn.execute(f'UPDATE topics SET {",".join(fields)} WHERE id=?', values)
+        conn.commit()
+    topic = conn.execute('SELECT * FROM topics WHERE id=?', (topic_id,)).fetchone()
+    conn.close()
+    return jsonify(dict(topic))
+
+
+@app.route('/api/topics/<topic_id>', methods=['DELETE'])
+def delete_topic(topic_id):
+    conn = get_db()
+    # 删除关联的素材文件
+    materials = conn.execute('SELECT file_path FROM materials WHERE topic_id=? AND type="image"', (topic_id,)).fetchall()
+    for m in materials:
+        if m['file_path']:
+            fp = os.path.join(BASE_DIR, 'static', m['file_path'])
+            if os.path.exists(fp):
+                os.remove(fp)
+    conn.execute('DELETE FROM topics WHERE id=?', (topic_id,))
+    conn.commit()
+    conn.close()
+    return jsonify({'ok': True})
+
+
+# ==================== 素材API ====================
+
+@app.route('/api/topics/<topic_id>/materials', methods=['POST'])
+def add_material(topic_id):
+    conn = get_db()
+    # 检查主题存在
+    if not conn.execute('SELECT id FROM topics WHERE id=?', (topic_id,)).fetchone():
+        conn.close()
+        return jsonify({'error': '主题不存在'}), 404
+
+    mtype = request.form.get('type', 'text')
+    mid = str(uuid.uuid4())[:8]
+    now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+
+    if mtype == 'image':
+        file = request.files.get('file')
+        if not file or not allowed_file(file.filename):
+            conn.close()
+            return jsonify({'error': '不支持的图片格式'}), 400
+        ext = secure_filename(file.filename).rsplit('.', 1)[-1].lower()
+        filename = f"{topic_id}_{mid}_{int(time.time())}.{ext}"
+        filepath = os.path.join(UPLOAD_DIR, filename)
+        file.save(filepath)
+        conn.execute(
+            'INSERT INTO materials (id, topic_id, type, content, file_path, created_at) VALUES (?,?,?,?,?,?)',
+            (mid, topic_id, 'image', request.form.get('content', ''), f'uploads/{filename}', now)
+        )
+    else:
+        content = request.form.get('content', '').strip()
+        if not content:
+            conn.close()
+            return jsonify({'error': '文本内容不能为空'}), 400
+        conn.execute(
+            'INSERT INTO materials (id, topic_id, type, content, created_at) VALUES (?,?,?,?,?)',
+            (mid, topic_id, 'text', content, now)
+        )
+
+    conn.execute('UPDATE topics SET updated_at=? WHERE id=?', (now, topic_id))
+    conn.commit()
+    material = conn.execute('SELECT * FROM materials WHERE id=?', (mid,)).fetchone()
+    conn.close()
+    return jsonify(dict(material))
+
+
+@app.route('/api/materials/<material_id>', methods=['PUT'])
+def update_material(material_id):
+    data = request.get_json(force=True)
+    conn = get_db()
+    fields = []
+    values = []
+    for key in ['content', 'sort_order']:
+        if key in data:
+            fields.append(f'{key}=?')
+            values.append(data[key])
+    if fields:
+        values.append(material_id)
+        conn.execute(f'UPDATE materials SET {",".join(fields)} WHERE id=?', values)
+        conn.commit()
+    material = conn.execute('SELECT * FROM materials WHERE id=?', (material_id,)).fetchone()
+    conn.close()
+    return jsonify(dict(material)) if material else jsonify({'error': '未找到'}), 404
+
+
+@app.route('/api/materials/<material_id>', methods=['DELETE'])
+def delete_material(material_id):
+    conn = get_db()
+    mat = conn.execute('SELECT * FROM materials WHERE id=?', (material_id,)).fetchone()
+    if mat and mat['file_path']:
+        fp = os.path.join(BASE_DIR, 'static', mat['file_path'])
+        if os.path.exists(fp):
+            os.remove(fp)
+    conn.execute('DELETE FROM materials WHERE id=?', (material_id,))
+    conn.commit()
+    conn.close()
+    return jsonify({'ok': True})
+
+
+# ==================== 文章生成API ====================
+
+@app.route('/api/topics/<topic_id>/generate', methods=['POST'])
+def generate_article(topic_id):
+    conn = get_db()
+    topic = conn.execute('SELECT * FROM topics WHERE id=?', (topic_id,)).fetchone()
+    if not topic:
+        conn.close()
+        return jsonify({'error': '主题不存在'}), 404
+
+    materials = conn.execute(
+        'SELECT * FROM materials WHERE topic_id=? ORDER BY sort_order, created_at',
+        (topic_id,)
+    ).fetchall()
+    conn.close()
+
+    # 构建素材文本
+    material_parts = []
+    for m in materials:
+        if m['type'] == 'text':
+            material_parts.append(f"【文本素材】\n{m['content']}")
+        elif m['type'] == 'image':
+            desc = m['content'] or '（图片）'
+            material_parts.append(f"【图片素材】{desc}")
+
+    materials_text = '\n\n'.join(material_parts) if material_parts else '（暂无素材）'
+
+    # 构建prompt
+    custom_prompt = topic['prompt'] or '请根据以下素材撰写一篇结构清晰、内容丰富的文章：'
+
+    user_message = f"""{custom_prompt}
+
+主题：{topic['name']}
+{f'主题说明：{topic["description"]}' if topic['description'] else ''}
+
+=== 素材 ===
+{materials_text}
+
+=== 要求 ===
+1. 充分利用提供的素材
+2. 文章结构完整，层次分明
+3. 语言流畅，逻辑清晰
+4. 不要输出思考过程，直接给出文章内容"""
+
+    # 调用大模型
+    try:
+        resp = requests.post(
+            LLM_URL,
+            headers={
+                'Authorization': f'Bearer {LLM_API_KEY}',
+                'Content-Type': 'application/json'
+            },
+            json={
+                'model': LLM_MODEL,
+                'messages': [
+                    {'role': 'user', 'content': user_message}
+                ],
+                'temperature': 0.7,
+                'max_tokens': 8192
+            },
+            timeout=120
+        )
+        resp.raise_for_status()
+        result = resp.json()
+        article_content = result['choices'][0]['message']['content']
+    except Exception as e:
+        return jsonify({'error': f'生成失败: {str(e)}'}), 500
+
+    # 保存文章
+    aid = str(uuid.uuid4())[:8]
+    now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    conn = get_db()
+    conn.execute(
+        'INSERT INTO articles (id, topic_id, content, prompt_used, model, created_at) VALUES (?,?,?,?,?,?)',
+        (aid, topic_id, article_content, custom_prompt, LLM_MODEL, now)
+    )
+    conn.execute('UPDATE topics SET updated_at=? WHERE id=?', (now, topic_id))
+    conn.commit()
+    article = conn.execute('SELECT * FROM articles WHERE id=?', (aid,)).fetchone()
+    conn.close()
+    return jsonify(dict(article))
+
+
+@app.route('/api/articles/<article_id>', methods=['DELETE'])
+def delete_article(article_id):
+    conn = get_db()
+    conn.execute('DELETE FROM articles WHERE id=?', (article_id,))
+    conn.commit()
+    conn.close()
+    return jsonify({'ok': True})
+
+
+@app.route('/api/articles/<article_id>', methods=['PUT'])
+def update_article(article_id):
+    data = request.get_json(force=True)
+    conn = get_db()
+    conn.execute('UPDATE articles SET content=? WHERE id=?', (data.get('content', ''), article_id))
+    conn.commit()
+    conn.close()
+    return jsonify({'ok': True})
+
+
+# ==================== 启动 ====================
+
+if __name__ == '__main__':
+    os.makedirs(UPLOAD_DIR, exist_ok=True)
+    init_db()
+    print('=' * 50)
+    print('  文章编写系统启动')
+    print('  访问地址: http://localhost:19200')
+    print('=' * 50)
+    app.run(host='0.0.0.0', port=19200, debug=False)

templates/index.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>文章编写系统</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
+    <style>
+        :root { --bg-dark: #0d1117; --bg-card: #161b22; --bg-hover: #1c2333; --border: #30363d; --text: #c9d1d9; --text-muted: #8b949e; --accent: #58a6ff; --accent-hover: #79c0ff; --danger: #f85149; --success: #3fb950; }
+        * { box-sizing: border-box; }
+        body { background: var(--bg-dark); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; min-height: 100vh; }
+        .navbar { background: var(--bg-card); border-bottom: 1px solid var(--border); }
+        .navbar-brand { color: var(--accent) !important; font-weight: 700; font-size: 1.3rem; }
+        .topic-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; transition: all 0.2s; cursor: pointer; }
+        .topic-card:hover { border-color: var(--accent); background: var(--bg-hover); transform: translateY(-2px); }
+        .topic-card h5 { color: var(--text); margin-bottom: 8px; }
+        .topic-card .meta { color: var(--text-muted); font-size: 0.85rem; }
+        .topic-card .desc { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+        .btn-accent { background: var(--accent); color: #fff; border: none; }
+        .btn-accent:hover { background: var(--accent-hover); color: #fff; }
+        .btn-outline-accent { border-color: var(--accent); color: var(--accent); }
+        .btn-outline-accent:hover { background: var(--accent); color: #fff; }
+        .modal-content { background: var(--bg-card); border: 1px solid var(--border); }
+        .modal-header { border-bottom: 1px solid var(--border); }
+        .modal-footer { border-top: 1px solid var(--border); }
+        .form-control, .form-select { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
+        .form-control:focus, .form-select:focus { background: var(--bg-dark); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px rgba(88,166,255,0.2); }
+        .form-label { color: var(--text-muted); font-size: 0.9rem; }
+        .btn-close { filter: invert(1); }
+        .empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
+        .empty-state i { font-size: 4rem; margin-bottom: 16px; display: block; }
+        .badge-mat { background: rgba(88,166,255,0.15); color: var(--accent); }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-expand">
+        <div class="container">
+            <a class="navbar-brand" href="/"><i class="bi bi-pencil-square me-2"></i>文章编写系统</a>
+            <div class="ms-auto">
+                <button class="btn btn-accent" onclick="showCreateModal()">
+                    <i class="bi bi-plus-lg me-1"></i>新建主题
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container py-4">
+        {% if topics %}
+        <div class="row g-3">
+            {% for t in topics %}
+            <div class="col-md-6 col-lg-4">
+                <div class="topic-card" onclick="location.href='/topic/{{t.id}}'">
+                    <div class="d-flex justify-content-between align-items-start">
+                        <h5 class="mb-0"><i class="bi bi-folder2-open me-2 text-warning"></i>{{t.name}}</h5>
+                        <button class="btn btn-sm btn-link text-danger p-0" onclick="event.stopPropagation();deleteTopic('{{t.id}}','{{t.name}}')" title="删除">
+                            <i class="bi bi-trash3"></i>
+                        </button>
+                    </div>
+                    {% if t.description %}<div class="desc">{{t.description}}</div>{% endif %}
+                    <div class="meta mt-2">
+                        <span class="badge badge-mat me-1"><i class="bi bi-file-earmark-text me-1"></i>{{t.mat_count}} 素材</span>
+                        <span class="ms-2"><i class="bi bi-clock me-1"></i>{{t.updated_at}}</span>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="empty-state">
+            <i class="bi bi-journal-text"></i>
+            <h5>还没有主题</h5>
+            <p>点击右上角「新建主题」开始吧</p>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- 新建主题模态框 -->
+    <div class="modal fade" id="createModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">新建主题</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label">主题名称 *</label>
+                        <input type="text" class="form-control" id="topicName" placeholder="如：AI技术趋势">
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">主题说明</label>
+                        <textarea class="form-control" id="topicDesc" rows="2" placeholder="简要描述这个主题的方向"></textarea>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">默认Prompt</label>
+                        <textarea class="form-control" id="topicPrompt" rows="4" placeholder="请根据以下素材撰写一篇结构清晰、内容丰富的文章："></textarea>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-accent" onclick="createTopic()">创建</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+    const modal = new bootstrap.Modal(document.getElementById('createModal'));
+    function showCreateModal() { modal.show(); }
+
+    async function createTopic() {
+        const name = document.getElementById('topicName').value.trim();
+        if (!name) return alert('请输入主题名称');
+        const res = await fetch('/api/topics', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                name,
+                description: document.getElementById('topicDesc').value,
+                prompt: document.getElementById('topicPrompt').value
+            })
+        });
+        if (res.ok) location.reload();
+        else { const d = await res.json(); alert(d.error || '创建失败'); }
+    }
+
+    async function deleteTopic(id, name) {
+        if (!confirm(`确定删除主题「${name}」？所有素材和文章将被清除！`)) return;
+        const res = await fetch(`/api/topics/${id}`, {method: 'DELETE'});
+        if (res.ok) location.reload();
+    }
+    </script>
+</body>
+</html>

templates/topic.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{topic.name}} - 文章编写系统</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
+    <style>
+        :root { --bg-dark: #0d1117; --bg-card: #161b22; --bg-hover: #1c2333; --border: #30363d; --text: #c9d1d9; --text-muted: #8b949e; --accent: #58a6ff; --accent-hover: #79c0ff; --danger: #f85149; --success: #3fb950; --warning: #d29922; }
+        * { box-sizing: border-box; }
+        body { background: var(--bg-dark); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
+        .navbar { background: var(--bg-card); border-bottom: 1px solid var(--border); }
+        .navbar-brand, .navbar-brand:hover { color: var(--accent) !important; font-weight: 700; }
+        .section-title { color: var(--text); font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+        .section-title i { font-size: 1.2rem; }
+        .card-dark { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
+        .card-dark .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 12px 16px; }
+        .card-dark .card-body { padding: 16px; }
+        .material-item { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; transition: all 0.15s; }
+        .material-item:hover { border-color: var(--accent); }
+        .material-item .mat-content { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.5; max-height: 120px; overflow: hidden; }
+        .material-item img { max-width: 100%; max-height: 200px; border-radius: 6px; margin-top: 6px; }
+        .material-item .mat-meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 6px; }
+        .btn-accent { background: var(--accent); color: #fff; border: none; }
+        .btn-accent:hover { background: var(--accent-hover); color: #fff; }
+        .btn-outline-accent { border-color: var(--accent); color: var(--accent); }
+        .btn-outline-accent:hover { background: var(--accent); color: #fff; }
+        .modal-content { background: var(--bg-card); border: 1px solid var(--border); }
+        .modal-header { border-bottom: 1px solid var(--border); }
+        .modal-footer { border-top: 1px solid var(--border); }
+        .form-control, .form-select { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
+        .form-control:focus, .form-select:focus { background: var(--bg-dark); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px rgba(88,166,255,0.2); }
+        .form-label { color: var(--text-muted); font-size: 0.9rem; }
+        .btn-close { filter: invert(1); }
+        .article-content { white-space: pre-wrap; word-break: break-word; line-height: 1.8; font-size: 0.95rem; }
+        .prompt-area { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; min-height: 80px; }
+        .generating { opacity: 0.7; pointer-events: none; }
+        .spinner-generate { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .tab-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
+        .tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+        .tab-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
+        .article-card { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
+        .article-card .article-header { background: var(--bg-dark); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
+        .article-card .article-body { padding: 14px; background: var(--bg-card); max-height: 400px; overflow-y: auto; }
+        .copy-btn { cursor: pointer; color: var(--text-muted); }
+        .copy-btn:hover { color: var(--accent); }
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: var(--bg-dark); }
+        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-expand">
+        <div class="container-fluid px-4">
+            <a class="navbar-brand" href="/"><i class="bi bi-arrow-left me-2"></i>文章编写系统</a>
+            <span class="navbar-text text-warning fw-bold">{{topic.name}}</span>
+        </div>
+    </nav>
+
+    <div class="container-fluid px-4 py-3">
+        <div class="row g-3">
+            <!-- 左栏：素材 + Prompt -->
+            <div class="col-lg-5">
+                <!-- Prompt区 -->
+                <div class="card-dark mb-3">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <span class="section-title mb-0"><i class="bi bi-chat-square-text text-warning"></i>生成Prompt</span>
+                        <button class="btn btn-sm btn-outline-accent" onclick="savePrompt()"><i class="bi bi-check-lg me-1"></i>保存</button>
+                    </div>
+                    <div class="card-body">
+                        <textarea class="form-control" id="promptText" rows="4" placeholder="请根据以下素材撰写一篇结构清晰、内容丰富的文章：">{{topic.prompt or ''}}</textarea>
+                        {% if topic.description %}<div class="mt-2 text-muted small"><i class="bi bi-info-circle me-1"></i>主题说明：{{topic.description}}</div>{% endif %}
+                    </div>
+                </div>
+
+                <!-- 素材区 -->
+                <div class="card-dark">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <span class="section-title mb-0"><i class="bi bi-collection text-info"></i>素材库 <span class="badge bg-secondary ms-1">{{materials|length}}</span></span>
+                        <div>
+                            <button class="btn btn-sm btn-outline-accent me-1" onclick="showAddText()"><i class="bi bi-type me-1"></i>文本</button>
+                            <button class="btn btn-sm btn-outline-accent" onclick="showAddImage()"><i class="bi bi-image me-1"></i>图片</button>
+                        </div>
+                    </div>
+                    <div class="card-body" id="materialsList" style="max-height: 60vh; overflow-y: auto;">
+                        {% if materials %}
+                            {% for m in materials %}
+                            <div class="material-item" id="mat-{{m.id}}">
+                                <div class="d-flex justify-content-between align-items-start">
+                                    <span class="badge {{'bg-info' if m.type=='text' else 'bg-warning'}}">{{'文本' if m.type=='text' else '图片'}}</span>
+                                    <button class="btn btn-sm btn-link text-danger p-0" onclick="deleteMaterial('{{m.id}}')" title="删除"><i class="bi bi-x-lg"></i></button>
+                                </div>
+                                {% if m.type == 'text' %}
+                                <div class="mat-content mt-1">{{m.content}}</div>
+                                {% else %}
+                                {% if m.content %}<div class="small text-muted mt-1">{{m.content}}</div>{% endif %}
+                                <img src="/static/{{m.file_path}}" alt="素材图片">
+                                {% endif %}
+                                <div class="mat-meta">{{m.created_at}}</div>
+                            </div>
+                            {% endfor %}
+                        {% else %}
+                        <div class="text-center text-muted py-4">
+                            <i class="bi bi-inbox fs-2 d-block mb-2"></i>
+                            <small>点击上方按钮添加素材</small>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <!-- 右栏：文章生成 -->
+            <div class="col-lg-7">
+                <div class="card-dark">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <span class="section-title mb-0"><i class="bi bi-file-earmark-richtext text-success"></i>文章生成</span>
+                        <button class="btn btn-accent" id="generateBtn" onclick="generateArticle()">
+                            <i class="bi bi-stars me-1"></i>生成文章
+                        </button>
+                    </div>
+                    <div class="card-body" id="articlesArea" style="max-height: 80vh; overflow-y: auto;">
+                        {% if articles %}
+                            {% for a in articles %}
+                            <div class="article-card" id="article-{{a.id}}">
+                                <div class="article-header">
+                                    <span class="small text-muted"><i class="bi bi-clock me-1"></i>{{a.created_at}} · {{a.model}}</span>
+                                    <div>
+                                        <span class="copy-btn me-2" onclick="copyArticle('{{a.id}}')" title="复制"><i class="bi bi-clipboard"></i></span>
+                                        <span class="copy-btn me-2" onclick="downloadArticle('{{a.id}}')" title="下载"><i class="bi bi-download"></i></span>
+                                        <span class="copy-btn text-danger" onclick="deleteArticle('{{a.id}}')" title="删除"><i class="bi bi-trash3"></i></span>
+                                    </div>
+                                </div>
+                                <div class="article-body article-content" id="article-content-{{a.id}}">{{a.content}}</div>
+                            </div>
+                            {% endfor %}
+                        {% else %}
+                        <div class="text-center text-muted py-5">
+                            <i class="bi bi-pencil-square fs-1 d-block mb-3"></i>
+                            <p>添加素材并编辑Prompt后，点击「生成文章」</p>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 添加文本模态框 -->
+    <div class="modal fade" id="textModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="bi bi-type me-2"></i>添加文本素材</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <textarea class="form-control" id="textContent" rows="8" placeholder="在此粘贴或输入文本素材..."></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-accent" onclick="addText()">添加</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 添加图片模态框 -->
+    <div class="modal fade" id="imageModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="bi bi-image me-2"></i>添加图片素材</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label">选择图片</label>
+                        <input type="file" class="form-control" id="imageFile" accept="image/*">
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">图片说明（可选）</label>
+                        <input type="text" class="form-control" id="imageDesc" placeholder="描述图片内容">
+                    </div>
+                    <div id="imagePreview" class="text-center"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-accent" onclick="addImage()">上传</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+    const topicId = '{{topic.id}}';
+    const textModal = new bootstrap.Modal(document.getElementById('textModal'));
+    const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
+
+    // 图片预览
+    document.getElementById('imageFile').addEventListener('change', function(e) {
+        const preview = document.getElementById('imagePreview');
+        if (e.target.files[0]) {
+            const reader = new FileReader();
+            reader.onload = (ev) => { preview.innerHTML = `<img src="${ev.target.result}" style="max-width:100%;max-height:200px;border-radius:6px;">`; };
+            reader.readAsDataURL(e.target.files[0]);
+        } else { preview.innerHTML = ''; }
+    });
+
+    function showAddText() { document.getElementById('textContent').value = ''; textModal.show(); }
+    function showAddImage() { document.getElementById('imageFile').value = ''; document.getElementById('imageDesc').value = ''; document.getElementById('imagePreview').innerHTML = ''; imageModal.show(); }
+
+    async function addText() {
+        const content = document.getElementById('textContent').value.trim();
+        if (!content) return alert('请输入文本内容');
+        const fd = new FormData();
+        fd.append('type', 'text');
+        fd.append('content', content);
+        const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
+        if (res.ok) location.reload();
+        else { const d = await res.json(); alert(d.error); }
+    }
+
+    async function addImage() {
+        const file = document.getElementById('imageFile').files[0];
+        if (!file) return alert('请选择图片');
+        const fd = new FormData();
+        fd.append('type', 'image');
+        fd.append('file', file);
+        fd.append('content', document.getElementById('imageDesc').value);
+        const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
+        if (res.ok) location.reload();
+        else { const d = await res.json(); alert(d.error); }
+    }
+
+    async function deleteMaterial(id) {
+        if (!confirm('确定删除此素材？')) return;
+        await fetch(`/api/materials/${id}`, {method: 'DELETE'});
+        document.getElementById(`mat-${id}`).remove();
+    }
+
+    async function savePrompt() {
+        const prompt = document.getElementById('promptText').value;
+        const res = await fetch(`/api/topics/${topicId}`, {
+            method: 'PUT',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({prompt})
+        });
+        if (res.ok) {
+            const btn = event.target.closest('button');
+            btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>已保存';
+            btn.classList.replace('btn-outline-accent', 'btn-success');
+            setTimeout(() => { btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>保存'; btn.classList.replace('btn-success', 'btn-outline-accent'); }, 1500);
+        }
+    }
+
+    async function generateArticle() {
+        const btn = document.getElementById('generateBtn');
+        const orig = btn.innerHTML;
+        btn.innerHTML = '<span class="spinner-generate me-2"></span>生成中...';
+        btn.classList.add('generating');
+
+        try {
+            const res = await fetch(`/api/topics/${topicId}/generate`, {method: 'POST'});
+            if (!res.ok) { const d = await res.json(); throw new Error(d.error || '生成失败'); }
+            const article = await res.json();
+
+            // 清除空状态提示
+            const area = document.getElementById('articlesArea');
+            const empty = area.querySelector('.text-center');
+            if (empty) empty.remove();
+
+            // 插入新文章
+            const html = `<div class="article-card" id="article-${article.id}">
+                <div class="article-header">
+                    <span class="small text-muted"><i class="bi bi-clock me-1"></i>${article.created_at} · ${article.model}</span>
+                    <div>
+                        <span class="copy-btn me-2" onclick="copyArticle('${article.id}')" title="复制"><i class="bi bi-clipboard"></i></span>
+                        <span class="copy-btn me-2" onclick="downloadArticle('${article.id}')" title="下载"><i class="bi bi-download"></i></span>
+                        <span class="copy-btn text-danger" onclick="deleteArticle('${article.id}')" title="删除"><i class="bi bi-trash3"></i></span>
+                    </div>
+                </div>
+                <div class="article-body article-content" id="article-content-${article.id}">${escapeHtml(article.content)}</div>
+            </div>`;
+            area.insertAdjacentHTML('afterbegin', html);
+        } catch(e) {
+            alert('生成失败: ' + e.message);
+        } finally {
+            btn.innerHTML = orig;
+            btn.classList.remove('generating');
+        }
+    }
+
+    async function deleteArticle(id) {
+        if (!confirm('确定删除此文章？')) return;
+        await fetch(`/api/articles/${id}`, {method: 'DELETE'});
+        document.getElementById(`article-${id}`).remove();
+    }
+
+    function copyArticle(id) {
+        const el = document.getElementById(`article-content-${id}`);
+        navigator.clipboard.writeText(el.innerText).then(() => {
+            // toast feedback
+        });
+    }
+
+    function downloadArticle(id) {
+        const el = document.getElementById(`article-content-${id}`);
+        const blob = new Blob([el.innerText], {type: 'text/plain;charset=utf-8'});
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = `article_${id}.txt`;
+        a.click();
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    </script>
+</body>
+</html>