hubian
45b8c70cb9
功能模块: - 仪表盘: 统计数据概览、快速操作入口 - 资料池管理: 查看、搜索、删除资料 - 文章历史: 查看历史文章列表和主题标签 - 工作流控制: 新建工作流、配置参数、启动流程 - 系统设置: LLM配置、文章类型、数据管理 技术栈: - Flask Web框架 - Tailwind CSS - RESTful API - 实时LLM连接测试
126 lines
5.8 KiB
HTML
126 lines
5.8 KiB
HTML
<!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> |