cd8f368fe3
- 生成 epics-and-stories.xlsx 文件，包含 6 个工作表： - 功能模块总览（5 个 Epic，75 个用户故事） - Epic 1-3 的详细用户故事列表 - MCP 工具开发清单（6 个工具，14 人天） - 项目报价汇总（总计 67 人天，¥67,000） - 在文档中心添加 Excel 下载按钮： - 绿色"下载 Excel"按钮（带文件图标） - 与橙色"查看文档"按钮并列显示 - 支持直接下载 epics-and-stories.xlsx - 依赖更新： - 添加 xlsx npm 包用于 Excel 生成 - 更新 package.json 和 package-lock.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
383 lines
24 KiB
HTML
383 lines
24 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>文档中心 - AI 智能抽背助手原型系统</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--primary-blue: #1890FF;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
.doc-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.doc-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.stat-item {
|
||
background: linear-gradient(135deg, var(--primary-blue), #40a9ff);
|
||
}
|
||
.markdown-body h1, .markdown-body h2 { border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5em; margin-bottom: 1em; }
|
||
.markdown-body pre { background: #1f2937; color: #e5e7eb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
|
||
.markdown-body code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25rem; }
|
||
.markdown-body table { border-collapse: collapse; width: 100%; }
|
||
.markdown-body table th, .markdown-body table td { border: 1px solid #e5e7eb; padding: 0.5rem; }
|
||
.markdown-body table tr:nth-child(even) { background: #f9fafb; }
|
||
.markdown-body blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; color: #6b7280; }
|
||
.markdown-body a { color: #2563eb; }
|
||
</style>
|
||
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen">
|
||
<!-- 导航栏 -->
|
||
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-book text-white"></i>
|
||
</div>
|
||
<span class="text-xl font-bold text-gray-800">文档中心</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<a href="index.html" class="text-gray-600 hover:text-blue-600 text-sm">首页</a>
|
||
<a href="admin-index.html" class="text-gray-600 hover:text-blue-600 text-sm">平铺展示</a>
|
||
<span class="text-gray-300">|</span>
|
||
<span class="text-gray-500 text-sm">AI 智能抽背助手</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 统计区域 -->
|
||
<section class="py-8 bg-white border-b">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="grid grid-cols-4 gap-4">
|
||
<div class="stat-item rounded-xl p-4 text-white">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-white/80 text-sm">文档数量</p>
|
||
<p class="text-2xl font-bold">3</p>
|
||
</div>
|
||
<i class="fas fa-file-alt text-3xl text-white/30"></i>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-4 text-white">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-white/80 text-sm">页面数量</p>
|
||
<p class="text-2xl font-bold">6</p>
|
||
</div>
|
||
<i class="fas fa-file-code text-3xl text-white/30"></i>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-4 text-white">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-white/80 text-sm">功能模块</p>
|
||
<p class="text-2xl font-bold">5</p>
|
||
</div>
|
||
<i class="fas fa-cubes text-3xl text-white/30"></i>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-4 text-white">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-white/80 text-sm">更新日期</p>
|
||
<p class="text-2xl font-bold">03-28</p>
|
||
</div>
|
||
<i class="fas fa-calendar text-3xl text-white/30"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 主内容区 -->
|
||
<section class="py-12">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<!-- 文档列表 -->
|
||
<div class="lg:col-span-2">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6">项目文档</h2>
|
||
|
||
<!-- PRD 文档 -->
|
||
<div class="doc-card bg-white rounded-xl shadow-sm overflow-hidden mb-6">
|
||
<div class="flex">
|
||
<div class="w-2 bg-blue-500"></div>
|
||
<div class="p-6 flex-1">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<h3 class="text-lg font-semibold text-gray-800">产品需求文档 (PRD)</h3>
|
||
<span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">核心文档</span>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-4">完整的产品需求规格说明，包含项目愿景、功能需求、非功能需求、技术架构等</p>
|
||
</div>
|
||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-file-alt text-blue-600 text-xl"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">行数</p>
|
||
<p class="font-semibold text-gray-800">1,082 行</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">大小</p>
|
||
<p class="font-semibold text-gray-800">40 KB</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">功能点</p>
|
||
<p class="font-semibold text-gray-800">75 个</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">产品愿景</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">功能需求</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">技术架构</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">数据模型</span>
|
||
</div>
|
||
<a href="view-doc.html?doc=prd.md" target="_self" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
|
||
<i class="fas fa-eye mr-2"></i>查看文档
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- UX 设计规范 -->
|
||
<div class="doc-card bg-white rounded-xl shadow-sm overflow-hidden mb-6">
|
||
<div class="flex">
|
||
<div class="w-2 bg-purple-500"></div>
|
||
<div class="p-6 flex-1">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<h3 class="text-lg font-semibold text-gray-800">UX 设计规范</h3>
|
||
<span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">设计文档</span>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-4">用户体验设计规范，包含设计系统、组件规范、页面设计、响应式与无障碍等</p>
|
||
</div>
|
||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-palette text-purple-600 text-xl"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">行数</p>
|
||
<p class="font-semibold text-gray-800">1,094 行</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">大小</p>
|
||
<p class="font-semibold text-gray-800">36 KB</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">界面数</p>
|
||
<p class="font-semibold text-gray-800">6 个</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">设计系统</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">组件规范</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">色彩系统</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">无障碍</span>
|
||
</div>
|
||
<a href="view-doc.html?doc=ux-design-specification.md" target="_self" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
|
||
<i class="fas fa-eye mr-2"></i>查看文档
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 需求文档 -->
|
||
<div class="doc-card bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="flex">
|
||
<div class="w-2 bg-green-500"></div>
|
||
<div class="p-6 flex-1">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<h3 class="text-lg font-semibold text-gray-800">需求文档</h3>
|
||
<span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs">原始需求</span>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-4">原始需求文档，包含用户管理、收藏分享、任务制定、AI语音抽背、要点背诵等模块详细需求</p>
|
||
</div>
|
||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-list text-green-600 text-xl"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">行数</p>
|
||
<p class="font-semibold text-gray-800">1,092 行</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">大小</p>
|
||
<p class="font-semibold text-gray-800">50 KB</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">模块数</p>
|
||
<p class="font-semibold text-gray-800">5 个</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">用户管理</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">收藏分享</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">任务制定</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">AI抽背</span>
|
||
</div>
|
||
<a href="view-doc.html?doc=ai-tutor-requirements.md" target="_self" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
|
||
<i class="fas fa-eye mr-2"></i>查看文档
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 侧边栏 -->
|
||
<div>
|
||
<h2 class="text-lg font-bold text-gray-800 mb-4">快速导航</h2>
|
||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<a href="index.html" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
|
||
<i class="fas fa-home text-gray-400 w-5"></i>
|
||
<span class="text-gray-700">统一入口</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
|
||
<!-- 史诗和用户故事清单 -->
|
||
<div class="doc-card bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="flex">
|
||
<div class="w-2 bg-orange-500"></div>
|
||
<div class="p-6 flex-1">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<h3 class="text-lg font-semibold text-gray-800">史诗和用户故事清单</h3>
|
||
<span class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded text-xs">功能清单 & 报价</span>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-4">详细的功能清单，包含 5 个 Epic、75 个用户故事、工作量估算和成本报价</p>
|
||
</div>
|
||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-tasks text-orange-600 text-xl"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">Epic 数</p>
|
||
<p class="font-semibold text-gray-800">5 个</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">用户故事</p>
|
||
<p class="font-semibold text-gray-800">75 个</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<p class="text-gray-500 text-xs">预估工期</p>
|
||
<p class="font-semibold text-gray-800">67 人天</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">Epic</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">用户故事</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">工作量估算</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">报价</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">MCP 工具</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<a href="view-doc.html?doc=epics-and-stories.md" target="_self" class="px-4 py-2 bg-orange-600 text-white rounded-lg text-sm hover:bg-orange-700">
|
||
<i class="fas fa-eye mr-2"></i>查看文档
|
||
</a>
|
||
<a href="docs/epics-and-stories.xlsx" download class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
|
||
<i class="fas fa-file-excel mr-2"></i>下载 Excel
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="admin-index.html" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
|
||
<i class="fas fa-th text-gray-400 w-5"></i>
|
||
<span class="text-gray-700">平铺展示</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="pages/admin/dashboard.html" target="_blank" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
|
||
<i class="fas fa-chart-line text-gray-400 w-5"></i>
|
||
<span class="text-gray-700">数据概览</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2 class="text-lg font-bold text-gray-800 mb-4">页面列表</h2>
|
||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||
<ul class="space-y-1 text-sm">
|
||
<li><a href="pages/admin/dashboard.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">数据概览</a></li>
|
||
<li><a href="pages/admin/quiz-records.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">抽背记录查询</a></li>
|
||
<li><a href="pages/admin/student-management.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">学生管理</a></li>
|
||
<li><a href="pages/admin/knowledge-management.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">知识点管理</a></li>
|
||
<li><a href="pages/admin/task-management.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">学习任务管理</a></li>
|
||
<li><a href="pages/admin/settings.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">系统设置</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2 class="text-lg font-bold text-gray-800 mb-4 mt-6">设计规范</h2>
|
||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||
<h3 class="text-sm font-semibold text-gray-700 mb-3">色彩系统</h3>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-6 h-6 rounded" style="background: #1890FF"></div>
|
||
<span class="text-xs text-gray-600">主色 #1890FF</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-6 h-6 rounded" style="background: #52C41A"></div>
|
||
<span class="text-xs text-gray-600">成功 #52C41A</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-6 h-6 rounded" style="background: #FAAD14"></div>
|
||
<span class="text-xs text-gray-600">警告 #FAAD14</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-6 h-6 rounded" style="background: #F5222D"></div>
|
||
<span class="text-xs text-gray-600">错误 #F5222D</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-white border-t py-6">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||
<div>
|
||
<span>AI 智能抽背助手原型系统</span>
|
||
<span class="mx-2">|</span>
|
||
<span>基于 PRD 和 UX 设计规范生成</span>
|
||
</div>
|
||
<div>2026-03-28</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|