Files
yu-zhi-ran/platform/frontend/logs.html
T
lt 31d6306e3b feat: 数据源统一与前端预览修复
=== 后端核心 ===
- db_helper: 统一数据库访问抽象层
- system.py API:
  * 参数绑定修复: 使用 Body(embed=True) 接收 JSON
  * 添加请求日志记录
- sync.py: 仅导出 DB→JSON(备份)

=== 合规与流水线 ===
- compliance_checker: 标签检测优化(仅检查容器,避免正文误判)
- 所有脚本(creator/collector/writer/outline/research等)统一使用数据库

=== 前端改版 ===
- topics.html:
  * 创作/优化 API 路径修正
  * 预览弹窗重设计:多平台并行加载、富文本显示、单复制按钮
  * 状态中文映射(getStatusLabel)
  * 认证检查
- 所有 HTML 静态资源路径修复(移除 /static 前缀)

=== 数据一致性 ===
- 数据库状态统一为英文(pending/review/ready/published)
- 前端显示中文化映射

已测试 A03 流水线完整通过。
2026-05-07 11:25:42 +08:00

141 lines
8.9 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>
<link rel="stylesheet" href="element-plus.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f7fa; }
.navbar { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; padding: 16px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.navbar-content { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
.navbar-title { font-size: 20px; font-weight: 600; }
.navbar-user { display: flex; align-items: center; gap: 16px; }
.user-info { display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.main-content { display: flex; flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.sidebar { width: 180px; background: white; padding: 16px; box-shadow: 2px 0 8px rgba(0,0,0,0.05); }
.sidebar-btn { width: 100%; text-align: left; padding: 12px 16px; border: none; background: transparent; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.3s; color: #606266; font-size: 14px; }
.sidebar-btn:hover { background: #f5f7fa; color: #409eff; }
.sidebar-btn.active { background: #ecf5ff; color: #409eff; font-weight: 600; }
.content-area { flex: 1; padding: 24px; overflow-y: auto; }
.card { background: white; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); padding: 8px 0; z-index: 1000; }
.mobile-nav-btn { flex: 1; border: none; background: transparent; padding: 12px; text-align: center; font-size: 12px; color: #606266; cursor: pointer; }
.mobile-nav-btn.active { color: #409eff; font-weight: 600; }
@media (max-width: 768px) {
.sidebar { display: none; }
.mobile-nav { display: flex; }
.content-area { padding: 16px; padding-bottom: 80px; }
}
/* logs.html 移动端优化 */
@media (max-width: 768px) {
.log-controls { flex-direction: column; gap: 8px; }
.log-controls .el-select, .log-controls .el-date-picker { width: 100% !important; }
.el-card { margin: 0 -16px; border-radius: 0; min-height: calc(100vh - 180px); }
.el-card .el-card__body { padding: 12px; }
pre { font-size: 11px; line-height: 1.4; }
}
</style>
</head>
<body>
<div id="app">
<nav class="navbar">
<div class="navbar-content">
<h1 class="navbar-title">宇之然内容创作平台 - 系统日志</h1>
<div class="navbar-user">
<div class="user-info"><div class="avatar">{{ currentUser.username.charAt(0).toUpperCase() }}</div><span>{{ currentUser.username }}</span></div>
<el-button type="danger" size="small" @click="handleLogout">退出</el-button>
</div>
</div>
</nav>
<div class="main-content">
<aside class="sidebar">
<button class="sidebar-btn" @click="redirectToPage('/')">📊 系统概览</button>
<button class="sidebar-btn" @click="redirectToPage('topics.html')">📋 选题管理</button>
<button class="sidebar-btn active">📄 系统日志</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('admin.html')">⚙️ 系统</button>
</aside>
<main class="content-area">
<div class="card">
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">📄 系统日志</h2>
<div style="display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;">
<el-select v-model="logType" placeholder="日志类型" size="default" style="width: 180px;">
<el-option label="创作日志" value="creator"></el-option>
<el-option label="优化日志" value="optimizer"></el-option>
<el-option label="收集日志" value="collector"></el-option>
</el-select>
<el-date-picker v-model="logDate" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="default"></el-date-picker>
<el-button type="primary" @click="fetchLogs" :loading="loadingLogs">加载日志</el-button>
</div>
<el-card v-if="logContent" class="font-mono text-sm bg-gray-50" style="max-height: 600px; overflow-y: auto; background: #f9fafb; border: 1px solid #e5e7eb;"><pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word;">{{ logContent }}</pre></el-card>
<el-empty v-else description="请先选择类型和日期,然后点击加载"></el-empty>
</div>
</main>
</div>
<nav class="mobile-nav">
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
<button class="mobile-nav-btn" @click="redirectToPage('topics.html')">📋 选题</button>
<button class="mobile-nav-btn active">📄 日志</button>
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</button>
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('admin.html')">⚙️ 系统</button>
</nav>
</div>
<script src="vue.global.prod.js"></script>
<script src="element-plus.full.js"></script>
<script>
const LogsApp = {
data() { return { isLoggedIn: false, isAdmin: false, currentUser: { username: '' }, logType: 'creator', logDate: '', logContent: '', loadingLogs: false } },
methods: {
async fetchLogs() {
// 验证输入
if (!this.logType || !this.logDate) {
this.$message.warning('请选择日志类型和日期');
return;
}
this.loadingLogs = true;
try {
const token = localStorage.getItem('authToken');
const response = await fetch(`/api/logs?type=${encodeURIComponent(this.logType)}&date=${encodeURIComponent(this.logDate)}`, {
headers: { 'Authorization': 'Bearer ' + token }
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.detail || `请求失败: ${response.status}`);
}
const data = await response.json();
// 后端返回: { type, date, content }
this.logContent = `日志类型:${data.type}\n日期:${data.date}\n\n${data.content || '(日志文件为空)'}`;
this.$message.success('日志加载成功');
} catch (error) {
console.error('获取日志失败:', error);
this.$message.error(`获取日志失败: ${error.message}`);
this.logContent = '';
} finally {
this.loadingLogs = false;
}
},
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
redirectToPage(page) { window.location.href = '/' + page; }
},
mounted() {
const token = localStorage.getItem('authToken');
if (!token) { window.location.href = '/'; return; }
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
.then(response => response.ok ? response.json() : Promise.reject())
.then(data => { this.currentUser = data.user; this.isAdmin = data.user.role === 'admin'; this.isLoggedIn = true; })
.catch(() => { localStorage.removeItem('authToken'); window.location.href = '/'; });
}
};
const app = Vue.createApp(LogsApp);
app.use(ElementPlus);
app.mount('#app');
</script>
</body>
</html>