前端增加人工互联网搜索功能

- 新增互联网搜索面板,支持手动输入关键词搜索
- 搜索结果展示为卡片形式,显示标题和链接
- 支持抓取单个结果的详细内容
- 可一键保存搜索结果到内容库
- 新增搜索 API 端点:/api/articles/internet-search
- 搜索结果详情模态框展示
- 响应式设计,搜索结果自适应布局
This commit is contained in:
2026-07-13 12:04:20 +08:00
parent 4f02a6a0ea
commit 7bb5a250c8
4 changed files with 419 additions and 1 deletions
+40
View File
@@ -116,6 +116,26 @@
</div>
</div>
<!-- 互联网搜索区域 -->
<div class="panel full-width">
<div class="panel-header">
<h2><i class="ri-search-line"></i> 互联网搜索</h2>
<div class="panel-actions">
<input type="text" id="internet-search-keyword" placeholder="输入关键词搜索..." class="search-input" style="width: 300px;">
<input type="number" id="internet-search-count" value="10" min="1" max="20" style="width: 80px;" title="结果数量">
<button onclick="doInternetSearch()" class="btn btn-primary" id="search-btn">
<i class="ri-search-line"></i> 搜索
</button>
</div>
</div>
<div class="panel-body">
<div id="internet-search-status" style="margin-bottom: 10px; color: #666; font-size: 14px;"></div>
<div class="search-results-grid" id="internet-search-results">
<div class="empty-text">输入关键词进行互联网搜索</div>
</div>
</div>
</div>
<!-- 处理历史 -->
<div class="panel full-width">
<div class="panel-header">
@@ -267,6 +287,26 @@
</div>
</div>
<!-- 搜索结果详情模态框 -->
<div id="search-result-modal" class="modal">
<div class="modal-content large">
<div class="modal-header">
<h3><i class="ri-external-link-line"></i> 搜索结果详情</h3>
<button onclick="closeModal('search-result-modal')" class="close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="modal-body" id="search-result-body">
</div>
<div class="modal-footer">
<button onclick="closeModal('search-result-modal')" class="btn btn-secondary">关闭</button>
<button onclick="saveSearchResultToLibrary()" class="btn btn-success">
<i class="ri-save-line"></i> 保存到内容库
</button>
</div>
</div>
</div>
<!-- 文章详情模态框 -->
<div id="article-detail-modal" class="modal">
<div class="modal-content large">