fix: 提升暗色主题文字对比度，解决提示文字看不清的问题

- text-muted色值从#8b949e提亮到#9eaab8（对比度4.3:1→5.0:1） - 覆盖Bootstrap .text-muted默认色，统一走CSS变量 - 表单标签从text-muted改为text色+font-weight:500，更醒目 - 输入框placeholder设为#6e7a88，比默认更清晰 - .btn-secondary适配暗色主题，不再用Bootstrap默认灰 - modal-content显式设置color:var(--text) - index页新增.alert-info暗色适配 - 新增.form-text颜色覆盖
2026-05-21 21:55:13 +08:00
parent d2ce8f54d4
commit d3dd11ca8b
3 changed files with 390 additions and 30 deletions
--- a/app.py
+++ b/app.py
@@ -19,7 +19,7 @@ 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配置（通过环境变量读取，避免密钥泄露；运行时可从数据库覆盖）
 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')
@@ -63,14 +63,43 @@ def init_db():
            content TEXT DEFAULT '',
            prompt_used TEXT DEFAULT '',
            model TEXT DEFAULT '',
+            llm_url TEXT DEFAULT '',
+            created_at TEXT DEFAULT (datetime('now','localtime')),
+            FOREIGN KEY (topic_id) REFERENCES topics(id) ON DELETE CASCADE
+        );
+        CREATE TABLE IF NOT EXISTS llm_config (
+            id INTEGER PRIMARY KEY CHECK (id = 1),
+            url TEXT DEFAULT '',
+            api_key TEXT DEFAULT '',
+            model TEXT DEFAULT '',
+            updated_at TEXT DEFAULT (datetime('now','localtime'))
+        );
+        CREATE TABLE IF NOT EXISTS prompt_history (
+            id TEXT PRIMARY KEY,
+            topic_id TEXT NOT NULL,
+            prompt TEXT NOT NULL DEFAULT '',
+            model TEXT DEFAULT '',
            created_at TEXT DEFAULT (datetime('now','localtime')),
            FOREIGN KEY (topic_id) REFERENCES topics(id) ON DELETE CASCADE
        );
    ''')
+    # 初始化默认配置
+    conn.execute('INSERT OR IGNORE INTO llm_config (id, url, api_key, model) VALUES (1, ?, ?, ?)',
+                 (LLM_URL, LLM_API_KEY, LLM_MODEL))
    conn.commit()
    conn.close()


+def get_llm_config():
+    """从数据库读取LLM配置，如无则用环境变量默认值"""
+    conn = get_db()
+    row = conn.execute('SELECT * FROM llm_config WHERE id=1').fetchone()
+    conn.close()
+    if row and row['url']:
+        return {'url': row['url'], 'api_key': row['api_key'], 'model': row['model'] or LLM_MODEL}
+    return {'url': LLM_URL, 'api_key': LLM_API_KEY, 'model': LLM_MODEL}
+
+
 def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@@ -243,6 +272,58 @@ def delete_material(material_id):
    return jsonify({'ok': True})


+# ==================== LLM配置API ====================
+
+@app.route('/api/llm-config', methods=['GET'])
+def get_llm_config_api():
+    config = get_llm_config()
+    # 隐藏部分API Key
+    key = config['api_key']
+    masked = key[:8] + '***' + key[-4:] if len(key) > 12 else '***'
+    return jsonify({
+        'url': config['url'],
+        'api_key_masked': masked,
+        'api_key_set': bool(key),
+        'model': config['model']
+    })
+
+
+@app.route('/api/llm-config', methods=['PUT'])
+def update_llm_config():
+    data = request.get_json(force=True)
+    conn = get_db()
+    now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+
+    # 读取当前配置
+    current = conn.execute('SELECT * FROM llm_config WHERE id=1').fetchone()
+
+    url = data.get('url', current['url'] if current else LLM_URL)
+    # 如果前端传了空key则保留旧key
+    api_key = data.get('api_key', '') or (current['api_key'] if current else LLM_API_KEY)
+    model = data.get('model', current['model'] if current else LLM_MODEL)
+
+    conn.execute('''
+        INSERT INTO llm_config (id, url, api_key, model, updated_at) VALUES (1, ?, ?, ?, ?)
+        ON CONFLICT(id) DO UPDATE SET url=?, api_key=?, model=?, updated_at=?
+    ''', (1, url, api_key, model, now, url, api_key, model, now))
+    conn.commit()
+    conn.close()
+    return jsonify({'ok': True})
+
+
+# ==================== Prompt历史API ====================
+
+@app.route('/api/topics/<topic_id>/prompt-history', methods=['GET'])
+def get_prompt_history(topic_id):
+    conn = get_db()
+    history = conn.execute(
+        'SELECT * FROM prompt_history WHERE topic_id=? ORDER BY created_at DESC LIMIT 20',
+        (topic_id,)
+    ).fetchall()
+    conn.close()
+    return jsonify([dict(h) for h in history])
+
+
 # ==================== 文章生成API ====================

@app.route('/api/topics/<topic_id>/generate', methods=['POST'])
@@ -273,6 +354,15 @@ def generate_article(topic_id):
    # 构建prompt
    custom_prompt = topic['prompt'] or '请根据以下素材撰写一篇结构清晰、内容丰富的文章：'

+    # 获取LLM配置
+    llm_config = get_llm_config()
+    llm_url = llm_config['url']
+    llm_key = llm_config['api_key']
+    llm_model = llm_config['model']
+
+    if not llm_key:
+        return jsonify({'error': '请先配置LLM API Key（首页右上角设置）'}), 400
+
    user_message = f"""{custom_prompt}

 主题：{topic['name']}
@@ -290,13 +380,13 @@ def generate_article(topic_id):
    # 调用大模型
    try:
        resp = requests.post(
-            LLM_URL,
+            llm_url,
            headers={
-                'Authorization': f'Bearer {LLM_API_KEY}',
+                'Authorization': f'Bearer {llm_key}',
                'Content-Type': 'application/json'
            },
            json={
-                'model': LLM_MODEL,
+                'model': llm_model,
                'messages': [
                    {'role': 'user', 'content': user_message}
                ],
@@ -311,13 +401,20 @@ def generate_article(topic_id):
    except Exception as e:
        return jsonify({'error': f'生成失败: {str(e)}'}), 500

-    # 保存文章
-    aid = str(uuid.uuid4())[:8]
+    # 保存prompt历史
+    phid = 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)
+        'INSERT INTO prompt_history (id, topic_id, prompt, model, created_at) VALUES (?,?,?,?,?)',
+        (phid, topic_id, custom_prompt, llm_model, now)
+    )
+
+    # 保存文章
+    aid = str(uuid.uuid4())[:8]
+    conn.execute(
+        'INSERT INTO articles (id, topic_id, content, prompt_used, model, llm_url, created_at) VALUES (?,?,?,?,?,?,?)',
+        (aid, topic_id, article_content, custom_prompt, llm_model, llm_url, now)
    )
    conn.execute('UPDATE topics SET updated_at=? WHERE id=?', (now, topic_id))
    conn.commit()
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,9 +7,10 @@
    <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; }
+        :root { --bg-dark: #0d1117; --bg-card: #161b22; --bg-hover: #1c2333; --border: #30363d; --text: #c9d1d9; --text-muted: #9eaab8; --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; }
+        .text-muted { color: var(--text-muted) !important; }
        .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; }
@@ -21,23 +22,35 @@
        .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); }
+        .btn-secondary { background: var(--border); color: var(--text); border: none; }
+        .btn-secondary:hover { background: #444c56; color: var(--text); }
+        .modal-content { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
        .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::placeholder, .form-select::placeholder { color: #6e7a88; opacity: 1; }
        .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; }
+        .form-label { color: var(--text); font-size: 0.9rem; font-weight: 500; }
+        .form-text { color: var(--text-muted) !important; }
        .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); }
+        .config-indicator { font-size: 0.8rem; }
+        .alert-info { background: rgba(88,166,255,0.12); border-color: rgba(88,166,255,0.25); color: var(--text); }
    </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">
+            <div class="ms-auto d-flex align-items-center gap-2">
+                <span class="config-indicator text-muted" id="configIndicator">
+                    <i class="bi bi-circle text-warning"></i> 未配置
+                </span>
+                <button class="btn btn-outline-accent btn-sm" onclick="showConfigModal()">
+                    <i class="bi bi-gear me-1"></i>模型配置
+                </button>
                <button class="btn btn-accent" onclick="showCreateModal()">
                    <i class="bi bi-plus-lg me-1"></i>新建主题
                </button>
@@ -105,10 +118,116 @@
        </div>
    </div>

+    <!-- LLM配置模态框 -->
+    <div class="modal fade" id="configModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="bi bi-gear 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">API 地址</label>
+                        <input type="text" class="form-control" id="cfgUrl" placeholder="https://api.openai.com/v1/chat/completions">
+                        <div class="form-text text-muted">兼容 OpenAI 格式的接口地址</div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">API Key</label>
+                        <div class="input-group">
+                            <input type="password" class="form-control" id="cfgKey" placeholder="留空则保持原配置不变">
+                            <button class="btn btn-outline-accent" type="button" onclick="toggleKeyVisibility()">
+                                <i class="bi bi-eye" id="keyEyeIcon"></i>
+                            </button>
+                        </div>
+                        <div class="form-text text-muted" id="cfgKeyHint"></div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">模型名称</label>
+                        <input type="text" class="form-control" id="cfgModel" placeholder="如：gpt-4o、qwen3.6-plus、deepseek-chat">
+                    </div>
+                    <div class="alert alert-info py-2 small">
+                        <i class="bi bi-info-circle me-1"></i>配置保存后立即生效，所有主题生成文章时使用此配置。
+                    </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="saveConfig()">
+                        <i class="bi bi-check-lg me-1"></i>保存配置
+                    </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(); }
+    const createModalInstance = new bootstrap.Modal(document.getElementById('createModal'));
+    const configModalInstance = new bootstrap.Modal(document.getElementById('configModal'));
+
+    // 页面加载时获取配置状态
+    (async function() {
+        try {
+            const res = await fetch('/api/llm-config');
+            const cfg = await res.json();
+            const ind = document.getElementById('configIndicator');
+            if (cfg.api_key_set) {
+                ind.innerHTML = `<i class="bi bi-circle-fill text-success"></i> ${cfg.model}`;
+            } else {
+                ind.innerHTML = `<i class="bi bi-circle text-warning"></i> 未配置`;
+            }
+        } catch(e) {}
+    })();
+
+    function showCreateModal() { createModalInstance.show(); }
+
+    async function showConfigModal() {
+        try {
+            const res = await fetch('/api/llm-config');
+            const cfg = await res.json();
+            document.getElementById('cfgUrl').value = cfg.url || '';
+            document.getElementById('cfgKey').value = '';
+            document.getElementById('cfgKeyHint').textContent = cfg.api_key_set ? `当前: ${cfg.api_key_masked}` : '尚未配置';
+            document.getElementById('cfgModel').value = cfg.model || '';
+        } catch(e) {}
+        configModalInstance.show();
+    }
+
+    function toggleKeyVisibility() {
+        const inp = document.getElementById('cfgKey');
+        const icon = document.getElementById('keyEyeIcon');
+        if (inp.type === 'password') {
+            inp.type = 'text';
+            icon.className = 'bi bi-eye-slash';
+        } else {
+            inp.type = 'password';
+            icon.className = 'bi bi-eye';
+        }
+    }
+
+    async function saveConfig() {
+        const data = {
+            url: document.getElementById('cfgUrl').value.trim(),
+            model: document.getElementById('cfgModel').value.trim()
+        };
+        const key = document.getElementById('cfgKey').value.trim();
+        if (key) data.api_key = key;  // 只在有新值时传递
+
+        const res = await fetch('/api/llm-config', {
+            method: 'PUT',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(data)
+        });
+        if (res.ok) {
+            // 更新指示器
+            const ind = document.getElementById('configIndicator');
+            ind.innerHTML = `<i class="bi bi-circle-fill text-success"></i> ${data.model}`;
+            configModalInstance.hide();
+        } else {
+            const d = await res.json();
+            alert(d.error || '保存失败');
+        }
+    }

    async function createTopic() {
        const name = document.getElementById('topicName').value.trim();
--- a/templates/topic.html
+++ b/templates/topic.html
@@ -7,9 +7,10 @@
    <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; }
+        :root { --bg-dark: #0d1117; --bg-card: #161b22; --bg-hover: #1c2333; --border: #30363d; --text: #c9d1d9; --text-muted: #9eaab8; --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; }
+        .text-muted { color: var(--text-muted) !important; }
        .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; }
@@ -26,26 +27,36 @@
        .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); }
+        .btn-secondary { background: var(--border); color: var(--text); border: none; }
+        .btn-secondary:hover { background: #444c56; color: var(--text); }
+        .modal-content { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
        .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::placeholder, .form-select::placeholder { color: #6e7a88; opacity: 1; }
        .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; }
+        .form-label { color: var(--text); font-size: 0.9rem; font-weight: 500; }
+        .form-text { color: var(--text-muted) !important; }
        .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); }
+        .prompt-history-item { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; transition: all 0.15s; }
+        .prompt-history-item:hover { border-color: var(--accent); }
+        .prompt-history-item .ph-text { font-size: 0.85rem; white-space: pre-wrap; max-height: 60px; overflow: hidden; }
+        .prompt-history-item .ph-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
+        .paste-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 24px; text-align: center; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
+        .paste-zone:hover, .paste-zone.active { border-color: var(--accent); background: rgba(88,166,255,0.05); color: var(--accent); }
+        .paste-zone i { font-size: 2rem; display: block; margin-bottom: 8px; }
+        .collapsible-prompt { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
+        .collapsible-prompt.show { max-height: 200px; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg-dark); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@@ -67,9 +78,19 @@
                <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 class="d-flex gap-1">
+                            <button class="btn btn-sm btn-outline-accent" onclick="togglePromptHistory()" title="历史记录">
+                                <i class="bi bi-clock-history"></i>
+                            </button>
+                            <button class="btn btn-sm btn-outline-accent" onclick="savePrompt()"><i class="bi bi-check-lg me-1"></i>保存</button>
+                        </div>
                    </div>
                    <div class="card-body">
+                        <!-- Prompt历史折叠区 -->
+                        <div id="promptHistoryArea" class="collapsible-prompt mb-2">
+                            <div class="mb-2 small text-muted"><i class="bi bi-clock-history me-1"></i>历史Prompt（点击恢复）</div>
+                            <div id="promptHistoryList"></div>
+                        </div>
                        <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>
@@ -85,6 +106,11 @@
                        </div>
                    </div>
                    <div class="card-body" id="materialsList" style="max-height: 60vh; overflow-y: auto;">
+                        <!-- 粘贴上传区 -->
+                        <div class="paste-zone mb-3" id="pasteZone" tabindex="0" onclick="document.getElementById('imageFile').click()">
+                            <i class="bi bi-clipboard"></i>
+                            <small>Ctrl+V 粘贴截图 或 点击选择图片</small>
+                        </div>
                        {% if materials %}
                            {% for m in materials %}
                            <div class="material-item" id="mat-{{m.id}}">
@@ -102,9 +128,8 @@
                            </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 class="text-center text-muted py-3" id="materialsEmpty">
+                            <small>添加素材开始创作</small>
                        </div>
                        {% endif %}
                    </div>
@@ -125,13 +150,21 @@
                            {% 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>
+                                    <span class="small text-muted">
+                                        <i class="bi bi-clock me-1"></i>{{a.created_at}} · {{a.model}}
+                                        {% if a.prompt_used %}<span class="copy-btn ms-2" onclick="toggleArticlePrompt('{{a.id}}')" title="查看Prompt"><i class="bi bi-chat-left-text"></i></span>{% endif %}
+                                    </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>
+                                {% if a.prompt_used %}
+                                <div class="collapsible-prompt" id="article-prompt-{{a.id}}">
+                                    <div style="padding: 8px 14px; background: rgba(88,166,255,0.05); border-bottom: 1px solid var(--border); font-size: 0.82rem; white-space: pre-wrap; color: var(--text-muted);">{{a.prompt_used}}</div>
+                                </div>
+                                {% endif %}
                                <div class="article-body article-content" id="article-content-{{a.id}}">{{a.content}}</div>
                            </div>
                            {% endfor %}
@@ -193,13 +226,80 @@
        </div>
    </div>

+    <!-- 粘贴截图快速上传模态框 -->
+    <div class="modal fade" id="pasteModal" tabindex="-1">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="bi bi-clipboard-check me-2"></i>粘贴上传</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div id="pastePreview" class="text-center mb-2"></div>
+                    <div class="mb-2">
+                        <label class="form-label">图片说明（可选）</label>
+                        <input type="text" class="form-control form-control-sm" id="pasteDesc" placeholder="描述图片内容">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-accent btn-sm" onclick="uploadPastedImage()">上传</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'));
+    const pasteModal = new bootstrap.Modal(document.getElementById('pasteModal'));
+    let pastedBlob = null;  // 暂存粘贴的图片

-    // 图片预览
+    // ===== 粘贴截图上传 =====
+    document.addEventListener('paste', function(e) {
+        const items = e.clipboardData && e.clipboardData.items;
+        if (!items) return;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].type.indexOf('image') !== -1) {
+                e.preventDefault();
+                const blob = items[i].getAsFile();
+                pastedBlob = blob;
+                // 预览
+                const reader = new FileReader();
+                reader.onload = (ev) => {
+                    document.getElementById('pastePreview').innerHTML = `<img src="${ev.target.result}" style="max-width:100%;max-height:200px;border-radius:6px;">`;
+                    document.getElementById('pasteDesc').value = '';
+                    pasteModal.show();
+                };
+                reader.readAsDataURL(blob);
+                break;
+            }
+        }
+    });
+
+    // 粘贴区拖拽高亮
+    const pasteZone = document.getElementById('pasteZone');
+    document.addEventListener('paste', () => { pasteZone.classList.add('active'); setTimeout(() => pasteZone.classList.remove('active'), 1000); });
+
+    async function uploadPastedImage() {
+        if (!pastedBlob) return alert('没有粘贴的图片');
+        const fd = new FormData();
+        fd.append('type', 'image');
+        fd.append('file', pastedBlob, `paste_${Date.now()}.png`);
+        fd.append('content', document.getElementById('pasteDesc').value);
+        const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
+        if (res.ok) {
+            pastedBlob = null;
+            pasteModal.hide();
+            location.reload();
+        } else {
+            const d = await res.json(); alert(d.error);
+        }
+    }
+
+    // 图片预览（选择文件）
    document.getElementById('imageFile').addEventListener('change', function(e) {
        const preview = document.getElementById('imagePreview');
        if (e.target.files[0]) {
@@ -256,6 +356,39 @@
        }
    }

+    // ===== Prompt历史 =====
+    let promptHistoryLoaded = false;
+
+    async function togglePromptHistory() {
+        const area = document.getElementById('promptHistoryArea');
+        if (area.classList.contains('show')) {
+            area.classList.remove('show');
+            return;
+        }
+        if (!promptHistoryLoaded) {
+            const res = await fetch(`/api/topics/${topicId}/prompt-history`);
+            const history = await res.json();
+            const list = document.getElementById('promptHistoryList');
+            if (history.length === 0) {
+                list.innerHTML = '<div class="text-muted small">暂无历史记录</div>';
+            } else {
+                list.innerHTML = history.map(h => `
+                    <div class="prompt-history-item" onclick="restorePrompt('${escapeAttr(h.prompt)}')">
+                        <div class="ph-text">${escapeHtml(h.prompt)}</div>
+                        <div class="ph-meta">${h.created_at} · ${h.model}</div>
+                    </div>
+                `).join('');
+            }
+            promptHistoryLoaded = true;
+        }
+        area.classList.add('show');
+    }
+
+    function restorePrompt(text) {
+        document.getElementById('promptText').value = text;
+    }
+
+    // ===== 文章生成 =====
    async function generateArticle() {
        const btn = document.getElementById('generateBtn');
        const orig = btn.innerHTML;
@@ -275,13 +408,17 @@
            // 插入新文章
            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>
+                    <span class="small text-muted">
+                        <i class="bi bi-clock me-1"></i>${article.created_at} · ${article.model}
+                        ${article.prompt_used ? `<span class="copy-btn ms-2" onclick="toggleArticlePrompt('${article.id}')" title="查看Prompt"><i class="bi bi-chat-left-text"></i></span>` : ''}
+                    </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>
+                ${article.prompt_used ? `<div class="collapsible-prompt" id="article-prompt-${article.id}"><div style="padding: 8px 14px; background: rgba(88,166,255,0.05); border-bottom: 1px solid var(--border); font-size: 0.82rem; white-space: pre-wrap; color: var(--text-muted);">${escapeHtml(article.prompt_used)}</div></div>` : ''}
                <div class="article-body article-content" id="article-content-${article.id}">${escapeHtml(article.content)}</div>
            </div>`;
            area.insertAdjacentHTML('afterbegin', html);
@@ -301,9 +438,7 @@

    function copyArticle(id) {
        const el = document.getElementById(`article-content-${id}`);
-        navigator.clipboard.writeText(el.innerText).then(() => {
-            // toast feedback
-        });
+        navigator.clipboard.writeText(el.innerText).then(() => {});
    }

    function downloadArticle(id) {
@@ -315,11 +450,20 @@
        a.click();
    }

+    function toggleArticlePrompt(id) {
+        const el = document.getElementById(`article-prompt-${id}`);
+        if (el) el.classList.toggle('show');
+    }
+
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
+
+    function escapeAttr(text) {
+        return text.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n');
+    }
    </script>
 </body>
 </html>