feat: 添加网络搜索功能（Tavily Search）

- 后端：新增 search_config 表存储搜索接口配置
- 后端：实现 /api/search 和 /api/search/detail API
- 前端：首页添加搜索配置入口（模态框）
- 前端：主题详情页添加搜索面板（搜索框+结果列表+详情查看）
- 搜索结果可一键添加为素材
- 支持搜索深度和时间范围筛选
- 更新 README 文档

README.md

@@ -1,6 +1,6 @@
 # Article Writer - 文章编写系统
 
-基于 Flask + LLM 的智能文章编写系统，支持主题管理、素材收集、分类标签和大模型生成文章。
+基于 Flask + LLM 的智能文章编写系统，支持主题管理、素材收集、网络搜索、分类标签和大模型生成文章。
 
 ## 功能
 
@@ -8,6 +8,7 @@
 - 分类系统：多级分类，每个主题可归属多个分类
 - 标签系统：灵活标签，每个主题支持多个标签，支持增删改
 - 素材收集：支持文本素材和图片素材（含Ctrl+V粘贴截图）
+- **网络搜索：集成 Tavily Search，在主题页面直接搜索网络资料，一键添加为素材**
 - Prompt编辑：每个主题可自定义生成提示词，支持历史记录
 - 大模型生成：调用 LLM 根据素材自动生成文章
 - 文章管理：查看、编辑、删除、复制、下载生成的文章
@@ -17,6 +18,7 @@
 - 后端：Python 3 + Flask + SQLite
 - 前端：HTML/CSS/JS（Bootstrap 5 暗色主题）
 - LLM：兼容 OpenAI API 格式的大模型接口
+- 搜索：Tavily Search API
 
 ## 快速开始
 
@@ -37,6 +39,8 @@ python app.py
 
 ## 配置
 
+### LLM 配置
+
 通过环境变量或页面配置 LLM 接口：
 
 | 环境变量 | 说明 | 默认值 |
@@ -45,6 +49,25 @@ python app.py
 | LLM_API_KEY | API 密钥 | - |
 | LLM_MODEL | 模型名称 | qwen3.6-plus |
 
+### 搜索配置
+
+在首页右上角点击「搜索配置」按钮，配置 Tavily Search API Key。
+
+获取 API Key: [tavily.com](https://tavily.com)
+
+支持的搜索参数：
+- **搜索深度**：基础(basic) / 深度(advanced)
+- **时间范围**：不限 / 最近一天 / 一周 / 一月 / 一年
+
+## 网络搜索功能
+
+在每个主题的详情页中，提供「网络搜索」面板：
+
+1. 输入关键词，选择搜索深度和时间范围
+2. 点击搜索，结果以列表形式展示（标题、URL、摘要、相关度）
+3. 点击「查看详情」可获取网页完整内容
+4. 点击「添加为素材」可将搜索结果（含详细内容）一键添加为文本素材
+
 ## 数据结构
 
 - **topics** - 文章主题
@@ -55,7 +78,9 @@ python app.py
 - **materials** - 素材（文本/图片）
 - **articles** - 生成的文章
 - **llm_config** - LLM接口配置
+- **search_config** - 搜索接口配置
 - **prompt_history** - Prompt历史记录
+- **prompt_templates** - Prompt模板
 
 ## 项目结构
 
@@ -63,8 +88,8 @@ python app.py
 article-writer/
 ├── app.py              # 主应用（Flask后端）
 ├── templates/
-│   ├── index.html      # 首页（主题列表 + 分类/标签筛选）
-│   └── topic.html      # 主题详情页（素材 + 文章生成 + 分类标签编辑）
+│   ├── index.html      # 首页（主题列表 + 分类/标签筛选 + 搜索配置）
+│   └── topic.html      # 主题详情页（素材 + 网络搜索 + 文章生成 + 分类标签编辑）
 ├── static/
 │   └── uploads/        # 图片上传目录
 ├── .env.example        # 环境变量示例
@@ -73,6 +98,12 @@ article-writer/
 
 ## API
 
+### 搜索
+- `GET /api/search-config` - 获取搜索配置（API Key 脱敏）
+- `PUT /api/search-config` - 更新搜索配置
+- `POST /api/search` - 执行网络搜索
+- `POST /api/search/detail` - 获取搜索结果详细内容
+
 ### 分类
 - `GET /api/categories` - 分类列表（含主题计数）
 - `POST /api/categories` - 创建分类

app.py

@@ -117,6 +117,12 @@ def init_db():
             FOREIGN KEY (topic_id) REFERENCES topics(id) ON DELETE CASCADE,
             FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
         );
+        CREATE TABLE IF NOT EXISTS search_config (
+            id INTEGER PRIMARY KEY CHECK (id = 1),
+            provider TEXT DEFAULT 'tavily',
+            api_key TEXT DEFAULT '',
+            updated_at TEXT DEFAULT (datetime('now','localtime'))
+        );
     ''')
     # 初始化默认Prompt模板
     default_templates = [
@@ -147,6 +153,9 @@ def init_db():
         conn.execute('ALTER TABLE materials ADD COLUMN selected INTEGER DEFAULT 1')
     except Exception:
         pass
+    # 初始化默认搜索配置
+    conn.execute('INSERT OR IGNORE INTO search_config (id, provider, api_key) VALUES (1, ?, ?)',
+                 ('tavily', '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'))
     conn.close()
 
 
@@ -724,6 +733,133 @@ def analyze_material(material_id):
     return jsonify({'analysis': analysis_text})
 
 
+# ==================== 搜索配置与搜索API ====================
+
+def get_search_config():
+    """从数据库读取搜索配置"""
+    conn = get_db()
+    row = conn.execute('SELECT * FROM search_config WHERE id=1').fetchone()
+    conn.close()
+    if row and row['api_key']:
+        return {'provider': row['provider'], 'api_key': row['api_key']}
+    return {'provider': 'tavily', 'api_key': ''}
+
+
+@app.route('/api/search-config', methods=['GET'])
+def get_search_config_api():
+    config = get_search_config()
+    key = config['api_key']
+    masked = key[:8] + '***' + key[-4:] if len(key) > 12 else ('***' if key else '')
+    return jsonify({
+        'provider': config['provider'],
+        'api_key_masked': masked,
+        'api_key_set': bool(key)
+    })
+
+
+@app.route('/api/search-config', methods=['PUT'])
+def update_search_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 search_config WHERE id=1').fetchone()
+    provider = data.get('provider', current['provider'] if current else 'tavily')
+    api_key = data.get('api_key', '') or (current['api_key'] if current else '')
+    conn.execute('''
+        INSERT INTO search_config (id, provider, api_key, updated_at) VALUES (1, ?, ?, ?)
+        ON CONFLICT(id) DO UPDATE SET provider=excluded.provider, api_key=excluded.api_key, updated_at=excluded.updated_at
+    ''', (provider, api_key, now))
+    conn.commit()
+    conn.close()
+    return jsonify({'ok': True})
+
+
+@app.route('/api/search', methods=['POST'])
+def search_web():
+    """调用 Tavily Search API 进行搜索"""
+    data = request.get_json(force=True)
+    query = data.get('query', '').strip()
+    if not query:
+        return jsonify({'error': '搜索关键词不能为空'}), 400
+
+    search_config = get_search_config()
+    if not search_config['api_key']:
+        return jsonify({'error': '请先配置搜索API Key（首页右上角设置）'}), 400
+
+    max_results = data.get('max_results', 8)
+    search_depth = data.get('search_depth', 'basic')
+    time_range = data.get('time_range', None)
+
+    try:
+        req_body = {
+            'query': query,
+            'max_results': max_results,
+            'search_depth': search_depth,
+            'include_raw_content': False,
+        }
+        if time_range:
+            req_body['time_range'] = time_range
+
+        resp = requests.post(
+            'https://api.tavily.com/search',
+            headers={
+                'Authorization': f"Bearer {search_config['api_key']}",
+                'Content-Type': 'application/json'
+            },
+            json=req_body,
+            timeout=30
+        )
+        resp.raise_for_status()
+        result = resp.json()
+        return jsonify(result)
+    except requests.exceptions.HTTPError as e:
+        return jsonify({'error': f'搜索请求失败: HTTP {e.response.status_code}'}), 502
+    except Exception as e:
+        return jsonify({'error': f'搜索失败: {str(e)}'}), 500
+
+
+@app.route('/api/search/detail', methods=['POST'])
+def search_detail():
+    """调用 Tavily Search API 获取详细内容（include_raw_content）"""
+    data = request.get_json(force=True)
+    query = data.get('query', '').strip()
+    url = data.get('url', '').strip()
+    if not query:
+        return jsonify({'error': '搜索关键词不能为空'}), 400
+
+    search_config = get_search_config()
+    if not search_config['api_key']:
+        return jsonify({'error': '请先配置搜索API Key'}), 400
+
+    try:
+        req_body = {
+            'query': query,
+            'max_results': 3,
+            'search_depth': 'advanced',
+            'include_raw_content': True,
+        }
+        if url:
+            req_body['include_domains'] = [url.split('/')[2]] if '/' in url else [url]
+
+        resp = requests.post(
+            'https://api.tavily.com/search',
+            headers={
+                'Authorization': f"Bearer {search_config['api_key']}",
+                'Content-Type': 'application/json'
+            },
+            json=req_body,
+            timeout=45
+        )
+        resp.raise_for_status()
+        result = resp.json()
+        # 如果指定了URL，过滤只返回该URL的结果
+        if url:
+            result['results'] = [r for r in result.get('results', []) if r.get('url') == url]
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({'error': f'获取详情失败: {str(e)}'}), 500
+
+
 # ==================== LLM配置API ====================
 
 @app.route('/api/llm-config', methods=['GET'])

templates/index.html

@@ -79,6 +79,9 @@
                 <button class="btn btn-outline-accent btn-sm" onclick="showConfigModal()">
                     <i class="bi bi-gear me-1"></i>模型配置
                 </button>
+                <button class="btn btn-outline-accent btn-sm" onclick="showSearchConfigModal()">
+                    <i class="bi bi-search me-1"></i>搜索配置
+                </button>
                 <button class="btn btn-outline-accent btn-sm" onclick="showCategoryModal()">
                     <i class="bi bi-folder me-1"></i>分类管理
                 </button>
@@ -325,6 +328,47 @@
         </div>
     </div>
 
+    <!-- 搜索配置模态框 -->
+    <div class="modal fade" id="searchConfigModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="bi bi-search 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>
+                        <select class="form-select" id="searchProvider">
+                            <option value="tavily">Tavily Search</option>
+                        </select>
+                        <div class="form-text text-muted">当前仅支持 Tavily Search，后续可扩展更多搜索服务</div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">API Key</label>
+                        <div class="input-group">
+                            <input type="password" class="form-control" id="searchApiKey" placeholder="留空则保持原配置不变">
+                            <button class="btn btn-outline-accent" type="button" onclick="toggleSearchKeyVisibility()">
+                                <i class="bi bi-eye" id="searchKeyEyeIcon"></i>
+                            </button>
+                        </div>
+                        <div class="form-text text-muted" id="searchKeyHint"></div>
+                    </div>
+                    <div class="alert alert-info py-2 small">
+                        <i class="bi bi-info-circle me-1"></i>配置保存后，在各主题页面可使用搜索功能搜集素材。<br>
+                        获取 Tavily API Key: <a href="https://tavily.com" target="_blank" style="color:var(--accent)">tavily.com</a>
+                    </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="saveSearchConfig()">
+                        <i class="bi bi-check-lg me-1"></i>保存配置
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Prompt模板管理模态框 -->
     <div class="modal fade" id="promptTemplateModal" tabindex="-1">
         <div class="modal-dialog modal-lg">
@@ -357,6 +401,7 @@
     <script>
     const createModalInstance = new bootstrap.Modal(document.getElementById('createModal'));
     const configModalInstance = new bootstrap.Modal(document.getElementById('configModal'));
+    const searchConfigModalInstance = new bootstrap.Modal(document.getElementById('searchConfigModal'));
     const categoryModalInstance = new bootstrap.Modal(document.getElementById('categoryModal'));
     const tagModalInstance = new bootstrap.Modal(document.getElementById('tagModal'));
     const promptTemplateModalInstance = new bootstrap.Modal(document.getElementById('promptTemplateModal'));
@@ -888,8 +933,45 @@
             ind.innerHTML = `<i class="bi bi-circle-fill text-success"></i> ${data.model}`;
             configModalInstance.hide();
         } else {
-            const d = await res.json();
-            alert(d.error || '保存失败');
+            const d = await res.json(); alert(d.error || '保存失败');
+        }
+    }
+
+    // ===== 搜索配置 =====
+    async function showSearchConfigModal() {
+        document.getElementById('searchApiKey').value = '';
+        try {
+            const res = await fetch('/api/search-config');
+            const cfg = await res.json();
+            document.getElementById('searchProvider').value = cfg.provider || 'tavily';
+            document.getElementById('searchKeyHint').textContent = cfg.api_key_set ? `当前: ${cfg.api_key_masked}` : '尚未配置';
+        } catch(e) {}
+        searchConfigModalInstance.show();
+    }
+
+    function toggleSearchKeyVisibility() {
+        const inp = document.getElementById('searchApiKey');
+        const icon = document.getElementById('searchKeyEyeIcon');
+        if (inp.type === 'password') { inp.type = 'text'; icon.className = 'bi bi-eye-slash'; }
+        else { inp.type = 'password'; icon.className = 'bi bi-eye'; }
+    }
+
+    async function saveSearchConfig() {
+        const data = {
+            provider: document.getElementById('searchProvider').value
+        };
+        const key = document.getElementById('searchApiKey').value.trim();
+        if (key) data.api_key = key;
+
+        const res = await fetch('/api/search-config', {
+            method: 'PUT',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(data)
+        });
+        if (res.ok) {
+            searchConfigModalInstance.hide();
+        } else {
+            const d = await res.json(); alert(d.error || '保存失败');
         }
     }
     </script>

templates/topic.html

@@ -108,6 +108,27 @@
         .core-idea-edit-bar .edit-row { display: flex; gap: 6px; align-items: flex-end; }
         .core-idea-edit-bar textarea { flex: 1; }
         .core-idea-edit-bar .btn-group { display: flex; gap: 4px; flex-shrink: 0; }
+
+        /* 搜索面板样式 */
+        .search-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
+        .search-panel .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 12px 16px; }
+        .search-panel .card-body { padding: 16px; }
+        .search-bar { display: flex; gap: 6px; }
+        .search-bar input { flex: 1; }
+        .search-bar select { width: auto; min-width: 100px; }
+        .search-result-item { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; transition: all 0.15s; }
+        .search-result-item:hover { border-color: var(--accent); }
+        .search-result-item .result-title { color: var(--accent); font-weight: 600; font-size: 0.92rem; text-decoration: none; display: flex; align-items: center; gap: 6px; }
+        .search-result-item .result-title:hover { text-decoration: underline; }
+        .search-result-item .result-url { color: var(--text-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
+        .search-result-item .result-snippet { color: var(--text); font-size: 0.85rem; line-height: 1.5; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+        .search-result-item .result-score { color: var(--text-muted); font-size: 0.72rem; margin-top: 4px; }
+        .search-result-item .result-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
+        .search-result-item .result-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
+        .search-result-item .result-detail.show { display: block; }
+        .search-result-item .result-detail-content { font-size: 0.85rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--text); max-height: 400px; overflow-y: auto; }
+        .search-loading { text-align: center; padding: 20px; color: var(--text-muted); }
+        .search-empty { text-align: center; padding: 20px; color: var(--text-muted); }
     </style>
 </head>
 <body>
@@ -197,6 +218,41 @@
                     </div>
                 </div>
 
+                <!-- 搜索面板 -->
+                <div class="search-panel mb-3">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <span class="section-title mb-0"><i class="bi bi-search text-accent"></i>网络搜索</span>
+                        <button class="btn btn-sm btn-link text-muted p-0" onclick="toggleSearchPanel()" title="折叠/展开">
+                            <i class="bi bi-chevron-down" id="searchPanelToggle"></i>
+                        </button>
+                    </div>
+                    <div class="card-body" id="searchPanelBody">
+                        <div class="search-bar mb-3">
+                            <input type="text" class="form-control form-control-sm" id="searchQuery" placeholder="输入关键词搜索相关资料..." onkeydown="if(event.key==='Enter'){event.preventDefault();doSearch();}">
+                            <select class="form-select form-select-sm" id="searchDepth" style="width:auto;min-width:90px;">
+                                <option value="basic">基础</option>
+                                <option value="advanced">深度</option>
+                            </select>
+                            <select class="form-select form-select-sm" id="searchTimeRange" style="width:auto;min-width:90px;">
+                                <option value="">不限时间</option>
+                                <option value="day">最近一天</option>
+                                <option value="week">最近一周</option>
+                                <option value="month">最近一月</option>
+                                <option value="year">最近一年</option>
+                            </select>
+                            <button class="btn btn-sm btn-accent" onclick="doSearch()" id="searchBtn">
+                                <i class="bi bi-search me-1"></i>搜索
+                            </button>
+                        </div>
+                        <div id="searchResults">
+                            <div class="search-empty">
+                                <i class="bi bi-globe2 d-block" style="font-size:2rem;opacity:0.3;"></i>
+                                <small>搜索网络资料，结果可添加为素材</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- 素材区 -->
                 <div class="card-dark">
                     <div class="card-header d-flex justify-content-between align-items-center">
@@ -922,6 +978,173 @@
 
     // 初始化选择计数
     updateSelectCount();
+
+    // ===== 网络搜索 =====
+    let searchPanelCollapsed = false;
+    let lastSearchQuery = '';
+
+    function toggleSearchPanel() {
+        const body = document.getElementById('searchPanelBody');
+        const icon = document.getElementById('searchPanelToggle');
+        searchPanelCollapsed = !searchPanelCollapsed;
+        body.style.display = searchPanelCollapsed ? 'none' : '';
+        icon.className = searchPanelCollapsed ? 'bi bi-chevron-right' : 'bi bi-chevron-down';
+    }
+
+    async function doSearch() {
+        const query = document.getElementById('searchQuery').value.trim();
+        if (!query) return;
+
+        const depth = document.getElementById('searchDepth').value;
+        const timeRange = document.getElementById('searchTimeRange').value;
+        const btn = document.getElementById('searchBtn');
+        const origBtn = btn.innerHTML;
+        btn.innerHTML = '<span class="spinner-generate" style="width:14px;height:14px;border-width:2px;"></span>';
+        btn.disabled = true;
+
+        const resultsEl = document.getElementById('searchResults');
+        resultsEl.innerHTML = '<div class="search-loading"><span class="spinner-generate" style="width:20px;height:20px;"></span><br><small class="mt-2 d-block">搜索中...</small></div>';
+
+        try {
+            const body = { query, search_depth: depth, max_results: 8 };
+            if (timeRange) body.time_range = timeRange;
+
+            const res = await fetch('/api/search', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(body)
+            });
+            if (!res.ok) { const d = await res.json(); throw new Error(d.error || '搜索失败'); }
+            const data = await res.json();
+            lastSearchQuery = query;
+
+            const results = data.results || [];
+            if (results.length === 0) {
+                resultsEl.innerHTML = '<div class="search-empty"><i class="bi bi-search d-block" style="font-size:1.5rem;opacity:0.3;"></i><small>未找到相关结果</small></div>';
+            } else {
+                resultsEl.innerHTML = `<div class="small text-muted mb-2"><i class="bi bi-info-circle me-1"></i>找到 ${results.length} 条结果（耗时 ${data.response_time ? data.response_time.toFixed(1) : '-'}s）</div>` +
+                    results.map((r, i) => renderSearchResult(r, i, query)).join('');
+            }
+        } catch(e) {
+            resultsEl.innerHTML = `<div class="search-empty text-danger"><i class="bi bi-exclamation-triangle d-block" style="font-size:1.5rem;"></i><small>${escapeHtml(e.message)}</small></div>`;
+        } finally {
+            btn.innerHTML = origBtn;
+            btn.disabled = false;
+        }
+    }
+
+    function renderSearchResult(r, index, query) {
+        const scorePercent = r.score ? Math.round(r.score * 100) : 0;
+        return `<div class="search-result-item" id="search-result-${index}">
+            <a class="result-title" href="${escapeHtml(r.url)}" target="_blank" rel="noopener">
+                <i class="bi bi-box-arrow-up-right" style="font-size:0.8rem;"></i>
+                ${escapeHtml(r.title)}
+            </a>
+            <div class="result-url">${escapeHtml(r.url)}</div>
+            <div class="result-snippet">${escapeHtml(r.content)}</div>
+            <div class="result-score">相关度: ${scorePercent}%</div>
+            <div class="result-actions">
+                <button class="btn btn-sm btn-outline-accent" onclick="toggleSearchDetail(${index}, '${escapeAttr(query)}', '${escapeAttr(r.url)}')" id="detail-btn-${index}">
+                    <i class="bi bi-eye me-1"></i>查看详情
+                </button>
+                <button class="btn btn-sm btn-outline-success" onclick="addSearchResultAsMaterial(${index})" title="添加为文本素材">
+                    <i class="bi bi-plus-circle me-1"></i>添加为素材
+                </button>
+                <a class="btn btn-sm btn-secondary" href="${escapeHtml(r.url)}" target="_blank" rel="noopener" title="在新窗口打开">
+                    <i class="bi bi-box-arrow-up-right"></i>
+                </a>
+            </div>
+            <div class="result-detail" id="search-detail-${index}">
+                <div class="result-detail-content" id="search-detail-content-${index}"></div>
+            </div>
+        </div>`;
+    }
+
+    async function toggleSearchDetail(index, query, url) {
+        const detailEl = document.getElementById(`search-detail-${index}`);
+        const btnEl = document.getElementById(`detail-btn-${index}`);
+        const contentEl = document.getElementById(`search-detail-content-${index}`);
+
+        if (detailEl.classList.contains('show')) {
+            detailEl.classList.remove('show');
+            btnEl.innerHTML = '<i class="bi bi-eye me-1"></i>查看详情';
+            return;
+        }
+
+        // 如果已经有内容，直接展示
+        if (contentEl.textContent.trim()) {
+            detailEl.classList.add('show');
+            btnEl.innerHTML = '<i class="bi bi-eye-slash me-1"></i>收起详情';
+            return;
+        }
+
+        // 获取详细内容
+        btnEl.innerHTML = '<span class="spinner-generate" style="width:12px;height:12px;border-width:2px;"></span>';
+        btnEl.disabled = true;
+
+        try {
+            const res = await fetch('/api/search/detail', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ query, url })
+            });
+            if (!res.ok) { const d = await res.json(); throw new Error(d.error || '获取详情失败'); }
+            const data = await res.json();
+            const results = data.results || [];
+            if (results.length > 0 && results[0].raw_content) {
+                contentEl.textContent = results[0].raw_content;
+            } else if (results.length > 0) {
+                contentEl.textContent = results[0].content || '暂无详细内容';
+            } else {
+                contentEl.textContent = '未能获取详细内容';
+            }
+            detailEl.classList.add('show');
+            btnEl.innerHTML = '<i class="bi bi-eye-slash me-1"></i>收起详情';
+        } catch(e) {
+            contentEl.textContent = '获取详情失败: ' + e.message;
+            detailEl.classList.add('show');
+            btnEl.innerHTML = '<i class="bi bi-eye-slash me-1"></i>收起详情';
+        } finally {
+            btnEl.disabled = false;
+        }
+    }
+
+    async function addSearchResultAsMaterial(index) {
+        const item = document.querySelector(`#search-result-${index}`);
+        if (!item) return;
+
+        const title = item.querySelector('.result-title').textContent.trim();
+        const url = item.querySelector('.result-url').textContent.trim();
+        const snippet = item.querySelector('.result-snippet').textContent.trim();
+        const detailEl = document.getElementById(`search-detail-content-${index}`);
+        const detailContent = detailEl ? detailEl.textContent.trim() : '';
+
+        // 构建素材内容：标题 + URL + 摘要 + 详细内容
+        let content = `【${title}】\n来源: ${url}\n\n${snippet}`;
+        if (detailContent) {
+            content += `\n\n--- 详细内容 ---\n${detailContent}`;
+        }
+
+        const fd = new FormData();
+        fd.append('type', 'text');
+        fd.append('content', content);
+
+        try {
+            const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
+            if (res.ok) {
+                // 高亮提示
+                const btn = item.querySelector('.btn-outline-success');
+                btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>已添加';
+                btn.classList.replace('btn-outline-success', 'btn-success');
+                btn.disabled = true;
+                setTimeout(() => location.reload(), 800);
+            } else {
+                const d = await res.json(); alert(d.error || '添加失败');
+            }
+        } catch(e) {
+            alert('添加素材失败: ' + e.message);
+        }
+    }
     </script>
 </body>
 </html>