coder/article-workflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增后台管理系统

Browse Source 
功能模块:
- 仪表盘: 统计数据概览、快速操作入口
- 资料池管理: 查看、搜索、删除资料
- 文章历史: 查看历史文章列表和主题标签
- 工作流控制: 新建工作流、配置参数、启动流程
- 系统设置: LLM配置、文章类型、数据管理

技术栈:
- Flask Web框架
- Tailwind CSS
- RESTful API
- 实时LLM连接测试
This commit is contained in:
hubian
2026-04-08 11:48:39 +08:00
parent 3094a5cb56
commit 45b8c70cb9
7 changed files with 1320 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
admin/app.py Normal file
View File

@@ -0,0 +1,276 @@
"""
文章撰写工作流系统 - 后台管理API
"""
from flask import Flask, render_template, jsonify, request, send_file
from flask_cors import CORS
import json
import os
import sys
from pathlib import Path
from datetime import datetime
# 添加父目录到路径
sys.path.insert(0, str(Path(__file__).parent.parent))
from config.settings import LLM_CONFIG, ARTICLE_TYPES, RESOURCE_POOL_CONFIG
from src.resource_pool import ResourcePool
from src.llm_client import LLMClient
app = Flask(__name__)
CORS(app)
# 初始化资料池
pool = ResourcePool(RESOURCE_POOL_CONFIG)
# ============ 页面路由 ============
@app.route('/')
def index():
"""首页 - 仪表盘"""
return render_template('index.html')
@app.route('/resources')
def resources_page():
"""资料池页面"""
return render_template('resources.html')
@app.route('/articles')
def articles_page():
"""文章历史页面"""
return render_template('articles.html')
@app.route('/workflow')
def workflow_page():
"""工作流控制页面"""
return render_template('workflow.html')
@app.route('/settings')
def settings_page():
"""系统设置页面"""
return render_template('settings.html')
# ============ API路由 ============
@app.route('/api/stats')
def api_stats():
"""获取统计数据"""
stats = pool.get_stats()
# 添加更多统计
articles = pool.get_article_history(limit=100)
# 按日期统计文章
date_stats = {}
for article in articles:
date = article.get('date', '')[:10]
date_stats[date] = date_stats.get(date, 0) + 1
stats['articles_by_date'] = date_stats
stats['recent_articles'] = articles[:5]
return jsonify(stats)
@app.route('/api/resources')
def api_resources():
"""获取资料列表"""
analyzed_only = request.args.get('analyzed') == 'true'
keyword = request.args.get('keyword', '')
resources = pool.list_resources(analyzed_only=analyzed_only)
# 关键词过滤
if keyword:
resources = [r for r in resources if
keyword.lower() in r.get('title', '').lower() or
keyword.lower() in r.get('url', '').lower()]
return jsonify(resources)
@app.route('/api/resources/<resource_id>')
def api_resource_detail(resource_id):
"""获取资料详情"""
resource = pool.get_resource(resource_id)
if not resource:
return jsonify({'error': 'Resource not found'}), 404
# 获取分析摘要
summary = pool.get_summary(resource_id)
if summary:
resource['summary'] = summary
return jsonify(resource)
@app.route('/api/resources/<resource_id>', methods=['DELETE'])
def api_delete_resource(resource_id):
"""删除资料"""
# TODO: 实现删除逻辑
return jsonify({'success': True})
@app.route('/api/summaries')
def api_summaries():
"""获取所有摘要"""
summaries = pool.get_all_summaries()
return jsonify(summaries)
@app.route('/api/articles')
def api_articles():
"""获取文章历史"""
limit = request.args.get('limit', 20, type=int)
articles = pool.get_article_history(limit=limit)
return jsonify(articles)
@app.route('/api/topics')
def api_topics():
"""获取历史主题"""
topics = pool.get_past_topics()
return jsonify(topics)
@app.route('/api/article-types')
def api_article_types():
"""获取文章类型"""
return jsonify(ARTICLE_TYPES)
@app.route('/api/keywords')
def api_keywords():
"""获取关键词索引"""
keywords = pool.index.get('keywords_index', {})
return jsonify(keywords)
@app.route('/api/config')
def api_config():
"""获取当前配置"""
# 隐藏敏感信息
safe_config = {
'base_url': LLM_CONFIG.get('base_url', ''),
'model': LLM_CONFIG.get('model', ''),
'max_tokens': LLM_CONFIG.get('max_tokens', 4096),
'temperature': LLM_CONFIG.get('temperature', 0.7),
}
return jsonify(safe_config)
@app.route('/api/config', methods=['POST'])
def api_update_config():
"""更新配置"""
data = request.json
# 这里只更新内存中的配置，实际应该保存到文件
# TODO: 实现配置持久化
return jsonify({'success': True, 'message': '配置已更新'})
@app.route('/api/workflow/start', methods=['POST'])
def api_start_workflow():
"""启动工作流"""
data = request.json
topic = data.get('topic')
article_type = data.get('type', '技术解析')
mode = data.get('mode', 'full')
if not topic:
return jsonify({'error': '请提供文章主题'}), 400
# TODO: 实际启动工作流（可以用线程或队列）
# 这里返回模拟响应
result = {
'status': 'started',
'topic': topic,
'type': article_type,
'mode': mode,
'message': '工作流已启动，请稍后查看结果'
}
return jsonify(result)
@app.route('/api/workflow/status')
def api_workflow_status():
"""获取工作流状态"""
# TODO: 实现实际的工作流状态追踪
return jsonify({
'running': False,
'current_step': None,
'progress': 0
})
@app.route('/api/test-llm', methods=['POST'])
def api_test_llm():
"""测试LLM连接"""
try:
client = LLMClient(LLM_CONFIG)
result = client.generate("你好，请回复'连接成功'")
if result:
return jsonify({'success': True, 'response': result})
else:
return jsonify({'success': False, 'error': '模型无响应'}), 500
except Exception as e:
return jsonify({'success': False, 'error': str(e)}), 500
@app.route('/api/articles/<path:filename>')
def api_article_file(filename):
"""获取文章文件内容"""
output_dir = Path(__file__).parent.parent / 'output' / 'articles'
filepath = output_dir / filename
if filepath.exists():
return send_file(filepath)
else:
return jsonify({'error': 'File not found'}), 404
@app.route('/api/export/resources')
def api_export_resources():
"""导出资料数据"""
resources = pool.list_resources()
export_data = {
'exported_at': datetime.now().isoformat(),
'count': len(resources),
'resources': resources
}
return jsonify(export_data)
# ============ 错误处理 ============
@app.errorhandler(404)
def not_found(error):
return jsonify({'error': 'Not found'}), 404
@app.errorhandler(500)
def server_error(error):
return jsonify({'error': 'Internal server error'}), 500
if __name__ == '__main__':
print("=" * 50)
print("文章撰写工作流系统 - 后台管理")
print("=" * 50)
print(f"访问地址: http://localhost:5001")
print("=" * 50)
app.run(host='0.0.0.0', port=5001, debug=True)

126
admin/templates/articles.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章历史 - 文章工作流</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex">
<aside class="w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
<div class="p-6">
<h1 class="text-white text-xl font-bold flex items-center gap-2">
<i class="ri-article-line text-2xl text-blue-400"></i>
文章工作流
</h1>
</div>
<nav class="mt-6">
<a href="/" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-dashboard-line"></i><span>仪表盘</span>
</a>
<a href="/resources" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-database-2-line"></i><span>资料池</span>
</a>
<a href="/articles" class="flex items-center gap-3 px-6 py-3 bg-slate-700 text-white">
<i class="ri-file-list-3-line"></i><span>文章历史</span>
</a>
<a href="/workflow" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-flow-chart"></i><span>工作流</span>
</a>
<a href="/settings" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-settings-3-line"></i><span>系统设置</span>
</a>
</nav>
</aside>
<main class="ml-64 flex-1 p-8">
<h1 class="text-2xl font-bold text-gray-800 mb-6">文章历史</h1>
<!-- 历史文章列表 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100">
<div class="p-6 border-b border-gray-100">
<div class="flex justify-between items-center">
<h2 class="font-semibold text-gray-700">已生成的文章</h2>
<span class="text-sm text-gray-500" id="articleCount">0 篇文章</span>
</div>
</div>
<div id="articlesList" class="divide-y divide-gray-100">
<div class="p-8 text-center text-gray-500">加载中...</div>
</div>
</div>
<!-- 历史主题 -->
<div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="font-semibold text-gray-700 mb-4">历史主题标签</h2>
<div id="topicsCloud" class="flex flex-wrap gap-2">
<span class="text-gray-500 text-sm">加载中...</span>
</div>
</div>
</main>
</div>
<script>
async function loadArticles() {
const response = await fetch('/api/articles');
const articles = await response.json();
document.getElementById('articleCount').textContent = `${articles.length} 篇文章`;
const container = document.getElementById('articlesList');
if (articles.length === 0) {
container.innerHTML = '<div class="p-8 text-center text-gray-500">暂无文章记录</div>';
return;
}
container.innerHTML = articles.map(a => `
<div class="p-6 hover:bg-gray-50 transition-colors">
<div class="flex items-start justify-between">
<div class="flex-1">
<h3 class="font-medium text-gray-800 text-lg">${a.topic}</h3>
<div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">${a.type}</span>
<span><i class="ri-calendar-line"></i> ${new Date(a.date).toLocaleString()}</span>
<span><i class="ri-file-text-line"></i> ${a.resources_count || 0} 份资料</span>
</div>
${a.output_path ? `
<div class="mt-3">
<a href="/api/articles/${a.output_path.split('/').pop()}"
target="_blank"
class="text-blue-500 hover:text-blue-700 text-sm flex items-center gap-1">
<i class="ri-external-link-line"></i> 查看文章
</a>
</div>
` : ''}
</div>
</div>
</div>
`).join('');
}
async function loadTopics() {
const response = await fetch('/api/topics');
const topics = await response.json();
const container = document.getElementById('topicsCloud');
if (topics.length === 0) {
container.innerHTML = '<span class="text-gray-500 text-sm">暂无历史主题</span>';
return;
}
container.innerHTML = topics.map(t => `
<span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 cursor-pointer">
${t}
</span>
`).join('');
}
loadArticles();
loadTopics();
</script>
</body>
</html>

226
admin/templates/index.html Normal file
View File

@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章撰写工作流系统 - 后台管理</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
.sidebar { transition: all 0.3s; }
.card { transition: all 0.2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex">
<!-- 侧边栏 -->
<aside class="sidebar w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
<div class="p-6">
<h1 class="text-white text-xl font-bold flex items-center gap-2">
<i class="ri-article-line text-2xl text-blue-400"></i>
文章工作流
</h1>
<p class="text-slate-400 text-sm mt-1">后台管理系统</p>
</div>
<nav class="mt-6">
<a href="/" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors">
<i class="ri-dashboard-line text-lg"></i>
<span>仪表盘</span>
</a>
<a href="/resources" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors">
<i class="ri-database-2-line text-lg"></i>
<span>资料池</span>
</a>
<a href="/articles" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors">
<i class="ri-file-list-3-line text-lg"></i>
<span>文章历史</span>
</a>
<a href="/workflow" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors">
<i class="ri-flow-chart text-lg"></i>
<span>工作流</span>
</a>
<a href="/settings" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors">
<i class="ri-settings-3-line text-lg"></i>
<span>系统设置</span>
</a>
</nav>
</aside>
<!-- 主内容区 -->
<main class="ml-64 flex-1 p-8">
<!-- 统计卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">资料总数</p>
<p class="text-3xl font-bold text-gray-800 mt-2" id="stat-resources">-</p>
</div>
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<i class="ri-database-2-line text-2xl text-blue-600"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">已分析</p>
<p class="text-3xl font-bold text-gray-800 mt-2" id="stat-analyzed">-</p>
</div>
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<i class="ri-check-double-line text-2xl text-green-600"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">文章总数</p>
<p class="text-3xl font-bold text-gray-800 mt-2" id="stat-articles">-</p>
</div>
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
<i class="ri-article-line text-2xl text-purple-600"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">关键词数</p>
<p class="text-3xl font-bold text-gray-800 mt-2" id="stat-keywords">-</p>
</div>
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
<i class="ri-key-2-line text-2xl text-orange-600"></i>
</div>
</div>
</div>
</div>
<!-- 快速操作 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-rocket-line text-blue-500"></i>
快速开始
</h2>
<div class="space-y-3">
<a href="/workflow" class="flex items-center gap-3 p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
<i class="ri-add-circle-line text-blue-600 text-xl"></i>
<div>
<p class="font-medium text-gray-800">新建工作流</p>
<p class="text-sm text-gray-500">启动一个完整的文章撰写流程</p>
</div>
</a>
<a href="/resources" class="flex items-center gap-3 p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
<i class="ri-upload-cloud-line text-green-600 text-xl"></i>
<div>
<p class="font-medium text-gray-800">添加资料</p>
<p class="text-sm text-gray-500">手动添加URL或内容到资料池</p>
</div>
</a>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-history-line text-purple-500"></i>
最近文章
</h2>
<div class="space-y-3" id="recent-articles">
<p class="text-gray-500 text-sm">加载中...</p>
</div>
</div>
</div>
<!-- 系统状态 -->
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-server-line text-green-500"></i>
系统状态
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-gray-50 rounded-lg">
<p class="text-sm text-gray-500">LLM模型</p>
<p class="font-medium text-gray-800" id="llm-model">-</p>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<p class="text-sm text-gray-500">API地址</p>
<p class="font-medium text-gray-800 text-sm truncate" id="llm-url">-</p>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<p class="text-sm text-gray-500">连接状态</p>
<p class="font-medium" id="llm-status">
<span class="text-yellow-500">检测中...</span>
</p>
</div>
</div>
</div>
</main>
</div>
<script>
// 加载统计数据
async function loadStats() {
const response = await fetch('/api/stats');
const data = await response.json();
document.getElementById('stat-resources').textContent = data.resources_count || 0;
document.getElementById('stat-analyzed').textContent = data.analyzed_count || 0;
document.getElementById('stat-articles').textContent = data.articles_count || 0;
document.getElementById('stat-keywords').textContent = data.keywords_count || 0;
// 最近文章
const recentDiv = document.getElementById('recent-articles');
if (data.recent_articles && data.recent_articles.length > 0) {
recentDiv.innerHTML = data.recent_articles.map(a => `
<a href="/articles" class="flex items-center justify-between p-2 hover:bg-gray-50 rounded transition-colors">
<div class="truncate">
<p class="font-medium text-gray-800 truncate">${a.topic}</p>
<p class="text-sm text-gray-500">${a.type} · ${new Date(a.date).toLocaleDateString()}</p>
</div>
<i class="ri-arrow-right-s-line text-gray-400"></i>
</a>
`).join('');
} else {
recentDiv.innerHTML = '<p class="text-gray-500 text-sm">暂无文章记录</p>';
}
}
// 加载配置
async function loadConfig() {
const response = await fetch('/api/config');
const data = await response.json();
document.getElementById('llm-model').textContent = data.model || '-';
document.getElementById('llm-url').textContent = data.base_url || '-';
}
// 测试LLM连接
async function testLLM() {
const statusEl = document.getElementById('llm-status');
try {
const response = await fetch('/api/test-llm', { method: 'POST' });
const data = await response.json();
if (data.success) {
statusEl.innerHTML = '<span class="text-green-500"><i class="ri-check-line"></i> 已连接</span>';
} else {
statusEl.innerHTML = '<span class="text-red-500"><i class="ri-close-line"></i> 连接失败</span>';
}
} catch (e) {
statusEl.innerHTML = '<span class="text-red-500"><i class="ri-close-line"></i> 连接错误</span>';
}
}
// 初始化
loadStats();
loadConfig();
testLLM();
</script>
</body>
</html>

236
admin/templates/resources.html Normal file
View File

@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资料池管理 - 文章工作流</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex">
<!-- 侧边栏 -->
<aside class="w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
<div class="p-6">
<h1 class="text-white text-xl font-bold flex items-center gap-2">
<i class="ri-article-line text-2xl text-blue-400"></i>
文章工作流
</h1>
</div>
<nav class="mt-6">
<a href="/" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-dashboard-line"></i><span>仪表盘</span>
</a>
<a href="/resources" class="flex items-center gap-3 px-6 py-3 bg-slate-700 text-white">
<i class="ri-database-2-line"></i><span>资料池</span>
</a>
<a href="/articles" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-file-list-3-line"></i><span>文章历史</span>
</a>
<a href="/workflow" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-flow-chart"></i><span>工作流</span>
</a>
<a href="/settings" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-settings-3-line"></i><span>系统设置</span>
</a>
</nav>
</aside>
<!-- 主内容 -->
<main class="ml-64 flex-1 p-8">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">资料池管理</h1>
<div class="flex gap-3">
<button onclick="exportResources()" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2">
<i class="ri-download-line"></i> 导出
</button>
</div>
</div>
<!-- 筛选栏 -->
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 mb-6">
<div class="flex gap-4 items-center">
<div class="flex-1">
<input type="text" id="searchInput" placeholder="搜索资料..."
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onkeyup="filterResources()">
</div>
<select id="filterAnalyzed" onchange="filterResources()"
class="px-4 py-2 border border-gray-200 rounded-lg">
<option value="all">全部</option>
<option value="analyzed">已分析</option>
<option value="unanalyzed">未分析</option>
</select>
</div>
</div>
<!-- 资料列表 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50 border-b border-gray-100">
<tr>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">标题</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">来源</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">状态</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">添加时间</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">操作</th>
</tr>
</thead>
<tbody id="resourceTable">
<tr><td colspan="5" class="px-6 py-8 text-center text-gray-500">加载中...</td></tr>
</tbody>
</table>
</div>
<!-- 详情弹窗 -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white rounded-xl w-3/4 max-h-[80vh] overflow-hidden flex flex-col">
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
<h2 class="text-xl font-bold text-gray-800" id="modalTitle">资料详情</h2>
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
<i class="ri-close-line text-2xl"></i>
</button>
</div>
<div class="p-6 overflow-auto flex-1" id="modalContent">
<!-- 内容将动态填充 -->
</div>
</div>
</div>
</main>
</div>
<script>
let allResources = [];
async function loadResources() {
const response = await fetch('/api/resources');
allResources = await response.json();
renderResources(allResources);
}
function renderResources(resources) {
const tbody = document.getElementById('resourceTable');
if (resources.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" class="px-6 py-8 text-center text-gray-500">暂无资料</td></tr>';
return;
}
tbody.innerHTML = resources.map(r => `
<tr class="border-b border-gray-50 hover:bg-gray-50">
<td class="px-6 py-4">
<div class="font-medium text-gray-800 truncate max-w-md">${r.title || '无标题'}</div>
</td>
<td class="px-6 py-4">
<a href="${r.url}" target="_blank" class="text-blue-500 hover:underline text-sm truncate max-w-xs block">${r.url || '-'}</a>
</td>
<td class="px-6 py-4">
${r.analyzed
? '<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">已分析</span>'
: '<span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs">待分析</span>'}
</td>
<td class="px-6 py-4 text-sm text-gray-500">
${r.added_at ? new Date(r.added_at).toLocaleString() : '-'}
</td>
<td class="px-6 py-4">
<button onclick="viewDetail('${r.id}')" class="text-blue-500 hover:text-blue-700 mr-3">
<i class="ri-eye-line"></i> 查看
</button>
<button onclick="deleteResource('${r.id}')" class="text-red-500 hover:text-red-700">
<i class="ri-delete-bin-line"></i>
</button>
</td>
</tr>
`).join('');
}
function filterResources() {
const keyword = document.getElementById('searchInput').value.toLowerCase();
const analyzedFilter = document.getElementById('filterAnalyzed').value;
let filtered = allResources;
if (keyword) {
filtered = filtered.filter(r =>
(r.title && r.title.toLowerCase().includes(keyword)) ||
(r.url && r.url.toLowerCase().includes(keyword))
);
}
if (analyzedFilter === 'analyzed') {
filtered = filtered.filter(r => r.analyzed);
} else if (analyzedFilter === 'unanalyzed') {
filtered = filtered.filter(r => !r.analyzed);
}
renderResources(filtered);
}
async function viewDetail(id) {
const response = await fetch(`/api/resources/${id}`);
const data = await response.json();
document.getElementById('modalTitle').textContent = data.title || '资料详情';
document.getElementById('modalContent').innerHTML = `
<div class="space-y-4">
<div>
<h3 class="font-medium text-gray-700 mb-2">基本信息</h3>
<div class="grid grid-cols-2 gap-4 text-sm">
<div><span class="text-gray-500">来源：</span><a href="${data.url}" target="_blank" class="text-blue-500">${data.url}</a></div>
<div><span class="text-gray-500">类型：</span>${data.type || '-'}</div>
<div><span class="text-gray-500">添加时间：</span>${data.added_at || '-'}</div>
<div><span class="text-gray-500">状态：</span>${data.analyzed ? '已分析' : '待分析'}</div>
</div>
</div>
${data.summary ? `
<div>
<h3 class="font-medium text-gray-700 mb-2">分析摘要</h3>
<div class="bg-gray-50 p-4 rounded-lg text-sm whitespace-pre-wrap">${data.summary}</div>
</div>
` : ''}
${data.content ? `
<div>
<h3 class="font-medium text-gray-700 mb-2">原始内容</h3>
<div class="bg-gray-50 p-4 rounded-lg text-sm max-h-64 overflow-auto whitespace-pre-wrap">${data.content.substring(0, 2000)}...</div>
</div>
` : ''}
</div>
`;
document.getElementById('detailModal').classList.remove('hidden');
document.getElementById('detailModal').classList.add('flex');
}
function closeModal() {
document.getElementById('detailModal').classList.add('hidden');
document.getElementById('detailModal').classList.remove('flex');
}
async function deleteResource(id) {
if (!confirm('确定要删除这个资料吗？')) return;
const response = await fetch(`/api/resources/${id}`, { method: 'DELETE' });
const data = await response.json();
if (data.success) {
loadResources();
}
}
async function exportResources() {
const response = await fetch('/api/export/resources');
const data = await response.json();
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'resources_export.json';
a.click();
}
// 初始化
loadResources();
</script>
</body>
</html>

234
admin/templates/settings.html Normal file
View File

@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统设置 - 文章工作流</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex">
<aside class="w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
<div class="p-6">
<h1 class="text-white text-xl font-bold flex items-center gap-2">
<i class="ri-article-line text-2xl text-blue-400"></i>
文章工作流
</h1>
</div>
<nav class="mt-6">
<a href="/" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-dashboard-line"></i><span>仪表盘</span>
</a>
<a href="/resources" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-database-2-line"></i><span>资料池</span>
</a>
<a href="/articles" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-file-list-3-line"></i><span>文章历史</span>
</a>
<a href="/workflow" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-flow-chart"></i><span>工作流</span>
</a>
<a href="/settings" class="flex items-center gap-3 px-6 py-3 bg-slate-700 text-white">
<i class="ri-settings-3-line"></i><span>系统设置</span>
</a>
</nav>
</aside>
<main class="ml-64 flex-1 p-8">
<h1 class="text-2xl font-bold text-gray-800 mb-6">系统设置</h1>
<!-- LLM配置 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-robot-line text-blue-500"></i>
大模型配置
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">API地址</label>
<input type="text" id="apiUrl"
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="http://localhost:1234/v1">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">API Key</label>
<input type="password" id="apiKey"
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="sk-...">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">模型名称</label>
<input type="text" id="modelName"
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="qwen3.5-4b">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">最大Token数</label>
<input type="number" id="maxTokens"
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="4096">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Temperature</label>
<input type="number" id="temperature" step="0.1" min="0" max="1"
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="0.7">
</div>
</div>
<div class="flex gap-3 mt-6">
<button onclick="saveConfig()"
class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2">
<i class="ri-save-line"></i> 保存配置
</button>
<button onclick="testConnection()"
class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2">
<i class="ri-link"></i> 测试连接
</button>
</div>
</div>
<!-- 文章类型配置 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-file-list-3-line text-purple-500"></i>
文章类型
</h2>
<div id="articleTypes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<p class="text-gray-500">加载中...</p>
</div>
</div>
<!-- 数据管理 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-database-2-line text-orange-500"></i>
数据管理
</h2>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div>
<p class="font-medium text-gray-800">导出资料池</p>
<p class="text-sm text-gray-500">导出所有资料数据为JSON格式</p>
</div>
<button onclick="exportData('resources')"
class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">
导出
</button>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div>
<p class="font-medium text-gray-800">导出文章历史</p>
<p class="text-sm text-gray-500">导出所有文章记录</p>
</div>
<button onclick="exportData('articles')"
class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">
导出
</button>
</div>
<div class="flex items-center justify-between p-4 bg-red-50 rounded-lg">
<div>
<p class="font-medium text-red-800">清空资料池</p>
<p class="text-sm text-red-500">删除所有资料和分析数据（不可恢复）</p>
</div>
<button onclick="clearData()"
class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">
清空
</button>
</div>
</div>
</div>
</main>
</div>
<script>
async function loadConfig() {
const response = await fetch('/api/config');
const data = await response.json();
document.getElementById('apiUrl').value = data.base_url || '';
document.getElementById('modelName').value = data.model || '';
document.getElementById('maxTokens').value = data.max_tokens || 4096;
document.getElementById('temperature').value = data.temperature || 0.7;
}
async function loadArticleTypes() {
const response = await fetch('/api/article-types');
const types = await response.json();
const container = document.getElementById('articleTypes');
container.innerHTML = Object.entries(types).map(([key, value]) => `
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-medium text-gray-800">${key}</h3>
<p class="text-sm text-gray-500 mt-1">${value.description}</p>
<p class="text-xs text-gray-400 mt-2">字数: ${value.word_count}</p>
</div>
`).join('');
}
async function saveConfig() {
const config = {
base_url: document.getElementById('apiUrl').value,
model: document.getElementById('modelName').value,
max_tokens: parseInt(document.getElementById('maxTokens').value),
temperature: parseFloat(document.getElementById('temperature').value),
};
const response = await fetch('/api/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config)
});
const data = await response.json();
if (data.success) {
alert('配置已保存');
} else {
alert('保存失败');
}
}
async function testConnection() {
const btn = event.target;
btn.disabled = true;
btn.innerHTML = '<i class="ri-loader-4-line animate-spin"></i> 测试中...';
try {
const response = await fetch('/api/test-llm', { method: 'POST' });
const data = await response.json();
if (data.success) {
alert('连接成功！模型响应: ' + data.response);
} else {
alert('连接失败: ' + data.error);
}
} catch (e) {
alert('测试失败: ' + e.message);
}
btn.disabled = false;
btn.innerHTML = '<i class="ri-link"></i> 测试连接';
}
async function exportData(type) {
if (type === 'resources') {
window.location.href = '/api/export/resources';
}
}
async function clearData() {
if (!confirm('确定要清空所有资料吗？此操作不可恢复！')) return;
alert('功能开发中');
}
// 初始化
loadConfig();
loadArticleTypes();
</script>
</body>
</html>

219
admin/templates/workflow.html Normal file
View File

@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工作流控制 - 文章工作流</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex">
<aside class="w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
<div class="p-6">
<h1 class="text-white text-xl font-bold flex items-center gap-2">
<i class="ri-article-line text-2xl text-blue-400"></i>
文章工作流
</h1>
</div>
<nav class="mt-6">
<a href="/" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-dashboard-line"></i><span>仪表盘</span>
</a>
<a href="/resources" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-database-2-line"></i><span>资料池</span>
</a>
<a href="/articles" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-file-list-3-line"></i><span>文章历史</span>
</a>
<a href="/workflow" class="flex items-center gap-3 px-6 py-3 bg-slate-700 text-white">
<i class="ri-flow-chart"></i><span>工作流</span>
</a>
<a href="/settings" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-settings-3-line"></i><span>系统设置</span>
</a>
</nav>
</aside>
<main class="ml-64 flex-1 p-8">
<h1 class="text-2xl font-bold text-gray-800 mb-6">工作流控制</h1>
<!-- 新建工作流 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-add-circle-line text-blue-500"></i>
新建工作流
</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">文章主题</label>
<input type="text" id="topicInput"
placeholder="输入文章主题，如：Flash Attention原理解析"
class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">文章类型</label>
<select id="typeSelect" class="w-full px-4 py-3 border border-gray-200 rounded-lg">
<option value="技术解析">技术解析</option>
<option value="技术文档翻译">技术文档翻译</option>
<option value="项目介绍分析">项目介绍分析</option>
<option value="综述文章">综述文章</option>
<option value="实践教程">实践教程</option>
<option value="问题分析">问题分析</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">运行模式</label>
<div class="flex gap-4">
<label class="flex items-center gap-2">
<input type="radio" name="mode" value="full" checked class="text-blue-500">
<span>完整流程</span>
</label>
<label class="flex items-center gap-2">
<input type="radio" name="mode" value="collect" class="text-blue-500">
<span>仅收集资料</span>
</label>
<label class="flex items-center gap-2">
<input type="radio" name="mode" value="write" class="text-blue-500">
<span>仅写作文章</span>
</label>
</div>
</div>
<div class="flex gap-3 pt-4">
<button onclick="startWorkflow()"
class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2">
<i class="ri-play-line"></i> 启动工作流
</button>
<button onclick="suggestTopic()"
class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 flex items-center gap-2">
<i class="ri-lightbulb-line"></i> 推荐主题
</button>
</div>
</div>
</div>
<!-- 工作流状态 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-loader-4-line text-orange-500"></i>
工作流状态
</h2>
<div id="workflowStatus" class="text-gray-500">
当前没有运行中的工作流
</div>
</div>
<!-- 工作流说明 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-information-line text-green-500"></i>
工作流说明
</h2>
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
<div class="text-center p-4 bg-blue-50 rounded-lg">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2">
<span class="text-white font-bold">1</span>
</div>
<p class="font-medium text-gray-800">确定主题</p>
<p class="text-sm text-gray-500 mt-1">选择主题和类型</p>
</div>
<div class="text-center p-4 bg-green-50 rounded-lg">
<div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2">
<span class="text-white font-bold">2</span>
</div>
<p class="font-medium text-gray-800">收集资料</p>
<p class="text-sm text-gray-500 mt-1">搜索相关资料</p>
</div>
<div class="text-center p-4 bg-yellow-50 rounded-lg">
<div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-2">
<span class="text-white font-bold">3</span>
</div>
<p class="font-medium text-gray-800">分析资料</p>
<p class="text-sm text-gray-500 mt-1">深度分析内容</p>
</div>
<div class="text-center p-4 bg-purple-50 rounded-lg">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-2">
<span class="text-white font-bold">4</span>
</div>
<p class="font-medium text-gray-800">生成大纲</p>
<p class="text-sm text-gray-500 mt-1">规划文章结构</p>
</div>
<div class="text-center p-4 bg-pink-50 rounded-lg">
<div class="w-10 h-10 bg-pink-500 rounded-full flex items-center justify-center mx-auto mb-2">
<span class="text-white font-bold">5</span>
</div>
<p class="font-medium text-gray-800">撰写文章</p>
<p class="text-sm text-gray-500 mt-1">输出最终文章</p>
</div>
</div>
</div>
</main>
</div>
<script>
async function startWorkflow() {
const topic = document.getElementById('topicInput').value.trim();
const type = document.getElementById('typeSelect').value;
const mode = document.querySelector('input[name="mode"]:checked').value;
if (!topic) {
alert('请输入文章主题');
return;
}
const statusEl = document.getElementById('workflowStatus');
statusEl.innerHTML = `
<div class="flex items-center gap-3">
<div class="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
<span>正在启动工作流...</span>
</div>
`;
try {
const response = await fetch('/api/workflow/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ topic, type, mode })
});
const data = await response.json();
if (data.status === 'started') {
statusEl.innerHTML = `
<div class="p-4 bg-green-50 rounded-lg">
<p class="text-green-700 font-medium"><i class="ri-check-line"></i> 工作流已启动</p>
<p class="text-sm text-green-600 mt-1">主题: ${data.topic}</p>
<p class="text-sm text-green-600">类型: ${data.type}</p>
<p class="text-sm text-gray-500 mt-2">${data.message}</p>
</div>
`;
} else {
statusEl.innerHTML = `<p class="text-red-500">启动失败: ${data.error}</p>`;
}
} catch (e) {
statusEl.innerHTML = `<p class="text-red-500">请求失败: ${e.message}</p>`;
}
}
async function suggestTopic() {
const topics = [
"Flash Attention原理解析",
"RAG技术实践指南",
"大模型推理优化综述",
"MoE架构深度分析",
"向量数据库选型对比",
"LLM应用开发实战"
];
const randomTopic = topics[Math.floor(Math.random() * topics.length)];
document.getElementById('topicInput').value = randomTopic;
}
</script>
</body>
</html>

2
requirements.txt
View File

@@ -1 +1,3 @@
requests>=2.28.0
flask>=2.3.0
flask-cors>=4.0.0