新增后台管理系统
功能模块: - 仪表盘: 统计数据概览、快速操作入口 - 资料池管理: 查看、搜索、删除资料 - 文章历史: 查看历史文章列表和主题标签 - 工作流控制: 新建工作流、配置参数、启动流程 - 系统设置: LLM配置、文章类型、数据管理 技术栈: - Flask Web框架 - Tailwind CSS - RESTful API - 实时LLM连接测试
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user