UI优化完善初版
This commit is contained in:
lt
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 67 B |
@@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
|
||||
<rect width="192" height="192" fill="#409EFF" rx="24"/>
|
||||
<text x="96" y="120" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="white" text-anchor="middle">宇</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 287 B |
Binary file not shown.
|
Before Width: | Height: | Size: 67 B |
@@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
|
||||
<rect width="512" height="512" fill="#409EFF" rx="48"/>
|
||||
<text x="256" y="320" font-family="Arial, sans-serif" font-size="200" font-weight="bold" fill="white" text-anchor="middle">宇</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 289 B |
@@ -1,170 +0,0 @@
|
||||
<!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="/static/element-plus/index.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; }
|
||||
.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||||
.login-box { background: white; border-radius: 12px; padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
|
||||
.login-title { text-align: center; margin-bottom: 32px; color: #303133; font-size: 24px; font-weight: 600; }
|
||||
.login-btn { width: 100%; }
|
||||
.app-container { min-height: 100vh; display: flex; flex-direction: column; }
|
||||
.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; }
|
||||
.page { display: none; }
|
||||
.page.active { display: block; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s; cursor: pointer; }
|
||||
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
|
||||
.stat-title { font-size: 14px; color: #909399; margin-bottom: 8px; }
|
||||
.stat-value { font-size: 28px; font-weight: 700; color: #303133; }
|
||||
.stat-card.primary .stat-value { color: #409eff; }
|
||||
.stat-card.success .stat-value { color: #67c23a; }
|
||||
.stat-card.warning .stat-value { color: #e6a23c; }
|
||||
.stat-card.danger .stat-value { color: #f56c6c; }
|
||||
.stat-card.info .stat-value { color: #909399; }
|
||||
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
|
||||
.module-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
||||
.module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.module-title { font-size: 16px; font-weight: 600; color: #303133; }
|
||||
.module-status { padding: 4px 12px; border-radius: 20px; font-size: 12px; }
|
||||
.module-status.running { background: #f0f9ff; color: #409eff; }
|
||||
.module-content { font-size: 14px; color: #606266; line-height: 1.6; }
|
||||
.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; }
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.stat-value { font-size: 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-if="!isLoggedIn" class="login-container">
|
||||
<div class="login-box">
|
||||
<h1 class="login-title">宇之然内容创作平台</h1>
|
||||
<el-form :model="loginForm" label-width="0">
|
||||
<el-form-item><el-input v-model="loginForm.username" placeholder="用户名" size="large" prefix-icon="User"></el-input></el-form-item>
|
||||
<el-form-item><el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" prefix-icon="Lock" @keyup.enter="handleLogin"></el-input></el-form-item>
|
||||
<el-form-item><el-button type="primary" size="large" class="login-btn" @click="handleLogin" :loading="loginLoading">登录</el-button></el-form-item>
|
||||
<el-alert v-if="loginError" type="error" :title="loginError" show-icon :closable="false" style="margin-top: 16px;"></el-alert>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="app-container">
|
||||
<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><el-tag size="small" v-if="isAdmin" type="danger">管理员</el-tag></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" :class="{ active: currentPage === 'overview' }" @click="redirectToPage('/')">📊 系统概览</button>
|
||||
<button class="sidebar-btn" :class="{ active: currentPage === 'topics' }" @click="redirectToPage('topics.html')">📋 选题管理</button>
|
||||
<button class="sidebar-btn" :class="{ active: currentPage === 'logs' }" @click="redirectToPage('logs.html')">📄 系统日志</button>
|
||||
<button v-if="isAdmin" class="sidebar-btn" :class="{ active: currentPage === 'users' }" @click="redirectToPage('users.html')">👥 用户管理</button>
|
||||
</aside>
|
||||
<main class="content-area">
|
||||
<div id="page-overview" class="page" :class="{ active: currentPage === 'overview' }">
|
||||
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px; color: #303133;">📊 系统概览</h2>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card primary" @click="goToTopics('')"><div class="stat-title">选题总数</div><div class="stat-value">{{ stats.total }}</div></div>
|
||||
<div class="stat-card warning" @click="goToTopics('待处理')"><div class="stat-title">待处理</div><div class="stat-value">{{ stats.pending }}</div></div>
|
||||
<div class="stat-card danger" @click="goToTopics('待审查')"><div class="stat-title">待审查</div><div class="stat-value">{{ stats.review }}</div></div>
|
||||
<div class="stat-card success" @click="goToTopics('待发布')"><div class="stat-title">待发布</div><div class="stat-value">{{ stats.ready }}</div></div>
|
||||
<div class="stat-card info" @click="goToTopics('已发布')"><div class="stat-title">已发布</div><div class="stat-value">{{ stats.published }}</div></div>
|
||||
<div class="stat-card primary" @click="goToTopics('')"><div class="stat-title">今日新增</div><div class="stat-value">{{ stats.today }}</div></div>
|
||||
</div>
|
||||
<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #303133;">🔧 模块状态</h3>
|
||||
<div class="module-grid">
|
||||
<div class="module-card"><div class="module-header"><span class="module-title">🤖 内容创作引擎</span><span class="module-status running">运行中</span></div><div class="module-content"><div>最后运行：2026-04-27 14:30</div><div>今日任务：12 个</div><div>成功率：95%</div></div></div>
|
||||
<div class="module-card"><div class="module-header"><span class="module-title">🔍 内容优化器</span><span class="module-status running">运行中</span></div><div class="module-content"><div>最后运行：2026-04-27 14:45</div><div>今日优化：8 个</div><div>平均提升：+12 分</div></div></div>
|
||||
<div class="module-card"><div class="module-header"><span class="module-title">📡 内容收集器</span><span class="module-status running">运行中</span></div><div class="module-content"><div>最后运行：2026-04-27 14:00</div><div>今日收集：24 个</div><div>来源：8 个平台</div></div></div>
|
||||
<div class="module-card"><div class="module-header"><span class="module-title">📤 发布管理器</span><span class="module-status running">运行中</span></div><div class="module-content"><div>最后运行：2026-04-27 13:30</div><div>今日发布：5 个</div><div>成功率：100%</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page-topics" class="page" :class="{ active: currentPage === 'topics' }"><div style="text-align: center; padding: 40px;"><el-result icon="info" title="选题管理"><template #extra><el-button type="primary" @click="redirectToPage('topics.html')">进入选题管理页面</el-button></template></el-result></div></div>
|
||||
<div id="page-logs" class="page" :class="{ active: currentPage === 'logs' }"><div style="text-align: center; padding: 40px;"><el-result icon="info" title="系统日志"><template #extra><el-button type="primary" @click="redirectToPage('logs.html')">进入系统日志页面</el-button></template></el-result></div></div>
|
||||
<div id="page-users" class="page" :class="{ active: currentPage === 'users' }"><div style="text-align: center; padding: 40px;" v-if="isAdmin"><el-result icon="info" title="用户管理"><template #extra><el-button type="primary" @click="redirectToPage('users.html')">进入用户管理页面</el-button></template></el-result></div><el-empty v-else description="暂无权限访问"></el-empty></div>
|
||||
</main>
|
||||
</div>
|
||||
<nav class="mobile-nav">
|
||||
<button class="mobile-nav-btn" :class="{ active: currentPage === 'overview' }" @click="redirectToPage('/')">📊 概览</button>
|
||||
<button class="mobile-nav-btn" :class="{ active: currentPage === 'topics' }" @click="redirectToPage('topics.html')">📋 选题</button>
|
||||
<button class="mobile-nav-btn" :class="{ active: currentPage === 'logs' }" @click="redirectToPage('logs.html')">📄 日志</button>
|
||||
<button v-if="isAdmin" class="mobile-nav-btn" :class="{ active: currentPage === 'users' }" @click="redirectToPage('users.html')">👥 用户</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/vue/vue.global.js"></script>
|
||||
<script src="/static/element-plus/index.full.min.js"></script>
|
||||
<script>
|
||||
const App = {
|
||||
data() { return { isLoggedIn: false, isAdmin: false, currentUser: { username: '' }, currentPage: 'overview', loginForm: { username: '', password: '' }, loginLoading: false, loginError: '', stats: { total: 0, pending: 0, review: 0, ready: 0, published: 0, today: 0 } } },
|
||||
methods: {
|
||||
async handleLogin() {
|
||||
this.loginLoading = true; this.loginError = '';
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.loginForm) });
|
||||
if (!response.ok) throw new Error('登录失败');
|
||||
const data = await response.json();
|
||||
localStorage.setItem('authToken', data.token);
|
||||
this.currentUser = data.user;
|
||||
this.isAdmin = data.user.role === 'admin';
|
||||
this.isLoggedIn = true;
|
||||
this.currentPage = 'overview';
|
||||
this.fetchStats();
|
||||
} catch (error) { this.loginError = '用户名或密码错误'; }
|
||||
finally { this.loginLoading = false; }
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); this.isLoggedIn = false; this.currentUser = { username: '' }; this.isAdmin = false; this.loginForm = { username: '', password: '' }; },
|
||||
async fetchStats() {
|
||||
try {
|
||||
const response = await fetch('/api/system/status', { headers: { 'Authorization': 'Bearer ' + localStorage.getItem('authToken') } });
|
||||
if (response.ok) { const data = await response.json(); this.stats = data.stats || this.stats; }
|
||||
} catch (error) {
|
||||
console.log('获取统计信息失败，使用模拟数据');
|
||||
this.stats = { total: 47, pending: 8, review: 12, ready: 5, published: 22, today: 3 };
|
||||
}
|
||||
},
|
||||
goToTopics(filter) { const url = filter ? '/topics.html?filter=' + encodeURIComponent(filter) : '/topics.html'; window.location.href = url; },
|
||||
redirectToPage(page) { window.location.href = '/' + page; }
|
||||
},
|
||||
mounted() {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (token) {
|
||||
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; this.currentPage = 'overview'; this.fetchStats(); })
|
||||
.catch(() => localStorage.removeItem('authToken'));
|
||||
}
|
||||
}
|
||||
};
|
||||
const app = Vue.createApp(App);
|
||||
app.use(ElementPlus);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -89,17 +89,32 @@
|
||||
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 logs = {
|
||||
creator: "2026-04-27 11:45:23 | 成功生成选题 B02 - AI 在内容创作中的应用\n2026-04-27 11:30:15 | 开始生成选题 C03 - 数字化转型案例研究\n2026-04-27 10:30:12 | 创建新选题 A01 - 可持续发展趋势分析",
|
||||
optimizer: "2026-04-27 12:05:30 | 优化完成选题 C03 - 合规分提升至 78\n2026-04-27 11:50:45 | 优化中选题 B02 - 等待人工审核",
|
||||
collector: "2026-04-27 10:30:12 | 收集到 3 个新选题\n2026-04-27 09:45:20 | 更新行业热点数据\n2026-04-27 09:00:00 | 启动每日收集任务"
|
||||
}[this.logType] || '暂无日志数据';
|
||||
this.logContent = "日志类型：" + this.logType + "\n日期：" + (this.logDate || '今天') + "\n\n" + logs;
|
||||
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) {
|
||||
this.$message.error('获取日志失败');
|
||||
console.error('获取日志失败:', error);
|
||||
this.$message.error(`获取日志失败: ${error.message}`);
|
||||
this.logContent = '';
|
||||
} finally {
|
||||
this.loadingLogs = false;
|
||||
}
|
||||
|
||||
@@ -212,19 +212,27 @@ const TopicsApp = {
|
||||
this.loadingTable = true;
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/topics', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (!response.ok) throw new Error('获取失败');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
setTimeout(() => window.location.href = '/', 1500);
|
||||
this.loadingTable = false;
|
||||
return;
|
||||
}
|
||||
const response = await fetch('/api/topics', {
|
||||
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();
|
||||
this.topics = data || [];
|
||||
this.loadingTable = false;
|
||||
this.$message.success('选题加载成功');
|
||||
} catch (error) {
|
||||
console.log('获取选题失败，使用模拟数据');
|
||||
this.$message.error('获取选题失败，使用模拟数据');
|
||||
this.topics = [
|
||||
{ id: 'A01', title: '可持续发展趋势分析', field: '环保', status: 'pending', compliance_score: 85, created_at: '2026-04-27 10:30', generated_at: null, published_at: null },
|
||||
{ id: 'B02', title: 'AI 在内容创作中的应用', field: '科技', status: 'review', compliance_score: 92, created_at: '2026-04-27 11:15', generated_at: '2026-04-27 11:45', published_at: null },
|
||||
{ id: 'C03', title: '数字化转型案例研究', field: '商业', status: 'ready', compliance_score: 78, created_at: '2026-04-27 12:00', generated_at: '2026-04-27 12:30', published_at: '2026-04-27 13:00' }
|
||||
];
|
||||
console.error('获取选题失败:', error);
|
||||
this.$message.error(`获取选题失败: ${error.message}`);
|
||||
this.topics = [];
|
||||
} finally {
|
||||
this.loadingTable = false;
|
||||
}
|
||||
},
|
||||
@@ -242,23 +250,126 @@ const TopicsApp = {
|
||||
await this.fetchTopics();
|
||||
},
|
||||
openPreview(topic) { this.$message.info('预览：' + topic.title); },
|
||||
async createTopic(topic) {
|
||||
if (topic.status === 'pending') {
|
||||
this.$message.success('开始创作：' + topic.title);
|
||||
await this.fetchTopics();
|
||||
} else { this.$message.info('仅待处理选题可创作'); }
|
||||
},
|
||||
async optimizeTopic(topic) {
|
||||
if (topic.status === 'review') {
|
||||
this.$message.success('开始优化：' + topic.title);
|
||||
await this.fetchTopics();
|
||||
} else { this.$message.info('仅待审查选题可优化'); }
|
||||
},
|
||||
async handlePublish(topic) { this.$message.success('发布：' + topic.title); await this.fetchTopics(); },
|
||||
deleteTopic(id) {
|
||||
this.$confirm('确定删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(async () => { this.$message.success('删除成功'); await this.fetchTopics(); }).catch(() => {});
|
||||
},
|
||||
async createTopic(topic) {
|
||||
if (topic.status !== 'pending') {
|
||||
this.$message.info('仅待处理选题可创作');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
return;
|
||||
}
|
||||
const response = await fetch('/api/system/generate/run', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.detail || `请求失败: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
this.$message.success(`创作完成: ${topic.title}`);
|
||||
await this.fetchTopics();
|
||||
} catch (error) {
|
||||
console.error('创作失败:', error);
|
||||
this.$message.error(`创作失败: ${error.message}`);
|
||||
}
|
||||
},
|
||||
async optimizeTopic(topic) {
|
||||
if (topic.status !== 'review') {
|
||||
this.$message.info('仅待审查选题可优化');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
return;
|
||||
}
|
||||
const response = await fetch('/api/optimizer/run', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.detail || `请求失败: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
this.$message.success(`优化完成: ${topic.title}`);
|
||||
await this.fetchTopics();
|
||||
} catch (error) {
|
||||
console.error('优化失败:', error);
|
||||
this.$message.error(`优化失败: ${error.message}`);
|
||||
}
|
||||
},
|
||||
async handlePublish(topic) {
|
||||
if (topic.status !== 'ready') {
|
||||
this.$message.info('仅待发布选题可发布');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
return;
|
||||
}
|
||||
const response = await fetch('/api/publishing/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.detail || `请求失败: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
this.$message.success(`发布成功: ${topic.title}`);
|
||||
await this.fetchTopics();
|
||||
} catch (error) {
|
||||
console.error('发布失败:', error);
|
||||
this.$message.error(`发布失败: ${error.message}`);
|
||||
}
|
||||
},
|
||||
async deleteTopic(id) {
|
||||
this.$confirm('确定删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
const response = await fetch(`/api/topics/${encodeURIComponent(id)}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.detail || `请求失败: ${response.status}`);
|
||||
}
|
||||
this.$message.success('删除成功');
|
||||
await this.fetchTopics();
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
this.$message.error(`删除失败: ${error.message}`);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
|
||||
redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; },
|
||||
formatDate(dateStr) {
|
||||
|
||||
@@ -1,415 +0,0 @@
|
||||
<!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="/static/element-plus/index.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); }
|
||||
.status-badge { display: inline-flex; align-items: center; gap: 4px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
.status-dot.待处理 { background: #E6A23C; }
|
||||
.status-dot.待审查 { background: #F56C6C; }
|
||||
.status-dot.待发布 { background: #67C23A; }
|
||||
.status-dot.已发布 { background: #409EFF; }
|
||||
|
||||
.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) {
|
||||
.mobile-nav { display: flex !important; }
|
||||
.topic-card-list { display: block; }
|
||||
.el-table { display: none; }
|
||||
|
||||
.sidebar { display: none; }
|
||||
|
||||
.content-area { padding: 16px; padding-bottom: 80px; }
|
||||
}
|
||||
|
||||
/* 移动端卡片布局 */
|
||||
@media (max-width: 768px) {
|
||||
.el-table { font-size: 12px; display: none; }
|
||||
.el-table .el-button { padding: 4px 8px; font-size: 11px; min-height: auto; }
|
||||
.el-table .cell { padding: 0 4px; }
|
||||
.el-table .el-table__cell { padding: 6px 0; }
|
||||
|
||||
.topic-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.topic-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-title { font-size: 16px; font-weight: 600; color: #303133; flex: 1; margin-right: 8px; }
|
||||
.topic-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
.topic-card-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
.topic-card-actions .el-button { flex: 1; min-width: 60px; }
|
||||
|
||||
}
|
||||
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
<style>#app[v-cloak] { display: none; }
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<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 ? 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 active">📋 选题管理</button>
|
||||
<button class="sidebar-btn" @click="redirectToPage('logs.html')">📄 系统日志</button>
|
||||
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
|
||||
</aside>
|
||||
<main class="content-area">
|
||||
<div class="card">
|
||||
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">📋 选题管理</h2>
|
||||
<div class="card" style="display: inline-block; min-width: fit-content; padding: 16px; margin-bottom: 24px;">
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
|
||||
<el-button type="success" size="small" @click="triggerGenerateSelected" :disabled="selectedTopicIds.length === 0">▶ 批量创作</el-button>
|
||||
<el-button type="warning" size="small" @click="triggerOptimizeSelected" :disabled="selectedTopicIds.length === 0">🔍 批量优化</el-button>
|
||||
<span class="ml-auto text-sm text-gray-500" v-if="selectedTopicIds.length > 0" style="color: #909399; font-size: 14px; margin-left: auto;">已选 {{ selectedTopicIds.length }} 项</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;">
|
||||
<el-tag size="large" :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''">全部 ({{ topics.length }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待处理' ? 'primary' : ''" @click="filterStatus = '待处理'">待处理 ({{ countByStatus('待处理') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待审查' ? 'primary' : ''" @click="filterStatus = '待审查'">待审查 ({{ countByStatus('待审查') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待发布' ? 'primary' : ''" @click="filterStatus = '待发布'">待发布 ({{ countByStatus('待发布') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
|
||||
</div>
|
||||
<div class="card" style="width: 100%; overflow-x: auto; padding: 16px;">
|
||||
<el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="70" fixed></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="200"></el-table-column>
|
||||
<el-table-column prop="field" label="领域" width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="90">
|
||||
<template #default="scope"><span class="status-badge"><span class="status-dot" :class="scope.row.status"></span>{{ scope.row.status }}</span></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="compliance_score" label="合规分" width="90">
|
||||
<template #default="scope"><el-progress :percentage="scope.row.compliance_score || 0" :format="() => scope.row.compliance_score || '-'" :stroke-width="15"></el-progress></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="140"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
|
||||
<el-table-column prop="generated_at" label="创作时间" width="140"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column prop="published_at" label="发布时间" width="140"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; gap: 4px; flex-wrap: wrap;">
|
||||
<el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="scope.row.status !== '待处理'" @click="createTopic(scope.row)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="scope.row.status !== '待审查'" @click="optimizeTopic(scope.row)">审查</el-button>
|
||||
<el-button v-if="scope.row.status === '待发布'" size="small" type="primary" @click="handlePublish(scope.row)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(scope.row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 移动端卡片列表 -->
|
||||
<div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
|
||||
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
|
||||
<div class="topic-card-header">
|
||||
<div class="topic-card-title">{{ topic.title }}</div>
|
||||
<el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-tags">
|
||||
<el-tag size="small" type="info">{{ topic.field }}</el-tag>
|
||||
<el-tag size="small" type="warning">合规{{ topic.compliance_score }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-meta">
|
||||
<div>创建: {{ formatDate(topic.created_at) }}</div>
|
||||
<div>创作: {{ topic.generated_at ? formatDate(topic.generated_at) : '-' }}</div>
|
||||
<div>发布: {{ topic.published_at ? formatDate(topic.published_at) : '-' }}</div>
|
||||
</div>
|
||||
<div class="topic-card-actions">
|
||||
<el-button size="small" @click="openPreview(topic)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="topic.status !== '待处理'" @click="createTopic(topic)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="topic.status !== '待审查'" @click="optimizeTopic(topic)">审查</el-button>
|
||||
<el-button v-if="topic.status === '待发布'" size="small" type="primary" @click="handlePublish(topic)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(topic.id)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<nav class="mobile-nav">
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
|
||||
<button class="mobile-nav-btn active">📋 选题</button>
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('logs.html')">📄 日志</button>
|
||||
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</button>
|
||||
</nav>
|
||||
</div>
|
||||
<script src="/static/vue/vue.global.js"></script>
|
||||
<script src="/static/element-plus/index.full.min.js"></script>
|
||||
|
||||
<script>
|
||||
const TopicsApp = {
|
||||
data() {
|
||||
// 从 localStorage 恢复登录状态
|
||||
let isLoggedIn = false, isAdmin = false, currentUser = { username: '' };
|
||||
try {
|
||||
const userInfo = JSON.parse(localStorage.getItem('user_info'));
|
||||
if (userInfo) {
|
||||
isLoggedIn = true;
|
||||
isAdmin = userInfo.role === 'admin';
|
||||
currentUser = userInfo;
|
||||
}
|
||||
} catch (e) {}
|
||||
return {
|
||||
currentPage: 'topics',
|
||||
isLoggedIn, isAdmin, currentUser,
|
||||
loadingTable: false,
|
||||
selectedTopicIds: [],
|
||||
filterStatus: '',
|
||||
stats: { total: 0, pending: 0, review: 0, ready: 0, published: 0, today: 0 },
|
||||
topics: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredTopics() {
|
||||
if (!this.topics || !this.topics.length) { return []; }
|
||||
if (!this.filterStatus) { return this.topics; }
|
||||
return this.topics.filter(t => t.status === this.filterStatus);
|
||||
},
|
||||
countByStatus() {
|
||||
return (status) => this.topics.filter(t => t.status === status).length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchTopics() {
|
||||
this.loadingTable = true;
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/topics/?size=100', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (!response.ok) throw new Error('获取失败');
|
||||
const data = await response.json();
|
||||
this.topics = data || [];
|
||||
this.loadingTable = false;
|
||||
} catch (error) {
|
||||
console.log('获取选题失败，使用模拟数据');
|
||||
this.$message.error('获取选题失败，使用模拟数据');
|
||||
this.topics = [
|
||||
{ id: 'A01', title: '可持续发展趋势分析', field: '环保', status: '待处理', compliance_score: 85, created_at: '2026-04-27 10:30', generated_at: null, published_at: null },
|
||||
{ id: 'B02', title: 'AI 在内容创作中的应用', field: '科技', status: '待审查', compliance_score: 92, created_at: '2026-04-27 11:15', generated_at: '2026-04-27 11:45', published_at: null },
|
||||
{ id: 'C03', title: '数字化转型案例研究', field: '商业', status: '待发布', compliance_score: 78, created_at: '2026-04-27 12:00', generated_at: '2026-04-27 12:30', published_at: '2026-04-27 13:00' }
|
||||
];
|
||||
this.loadingTable = false;
|
||||
}
|
||||
},
|
||||
async fetchStats() {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/system/status', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.stats = {
|
||||
total: data.total_topics || 0,
|
||||
pending: data.topics_by_status ? data.topics_by_status['待处理'] || 0 : 0,
|
||||
review: data.topics_by_status ? data.topics_by_status['待审查'] || 0 : 0,
|
||||
ready: data.topics_by_status ? data.topics_by_status['待发布'] || 0 : 0,
|
||||
published: data.published_count || 0,
|
||||
today: data.today_articles || 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取统计信息失败');
|
||||
}
|
||||
},
|
||||
|
||||
refreshAll() { this.$message.info('执行批量刷新'); },
|
||||
async triggerGenerateSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量创作已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async triggerOptimizeSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量优化已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
} async createTopic(topic) {
|
||||
if (topic.status === '待处理') {
|
||||
this.$message.success('开始创作：' + topic.title);
|
||||
await this.fetchTopics();
|
||||
} else { this.$message.info('仅待处理选题可创作'); }
|
||||
},
|
||||
async optimizeTopic(topic) {
|
||||
if (topic.status === '待审查') {
|
||||
this.$message.success('开始优化：' + topic.title);
|
||||
await this.fetchTopics();
|
||||
} else { this.$message.info('仅待审查选题可优化'); }
|
||||
},
|
||||
async handlePublish(topic) {
|
||||
if (topic.status !== '待发布') {
|
||||
this.$message.info('仅待发布选题可发布');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/publishing/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.$message.success('发布成功');
|
||||
if (data.urls) {
|
||||
const msg = Object.entries(data.urls).map(([k,v]) => `${k}: ${v}`).join('
|
||||
');
|
||||
this.$notify({ title: '发布链接', message: `<pre>${msg}</pre>`, type: 'success', duration: 0 });
|
||||
}
|
||||
} else {
|
||||
throw new Error('发布失败');
|
||||
}
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('发布失败');
|
||||
}
|
||||
},
|
||||
deleteTopic(id) {
|
||||
this.$confirm('确定删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/topics/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('authToken') }
|
||||
});
|
||||
if (response.ok) {
|
||||
this.$message.success('删除成功');
|
||||
await this.fetchTopics();
|
||||
} else {
|
||||
const err = await response.json().catch(() => ({}));
|
||||
this.$message.error('删除失败: ' + (err.detail || response.statusText));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error('删除请求失败');
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
|
||||
redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; },
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
try {
|
||||
return new Date(dateStr.replace(' ', 'T')).toLocaleString('zh-CN', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit'
|
||||
});
|
||||
} catch (e) { return dateStr; }
|
||||
},
|
||||
getStatusType(status) {
|
||||
const map = { '待处理': 'warning', '待审查': 'danger', '待发布': 'success', '已发布': 'info' };
|
||||
return map[status] || 'primary';
|
||||
|
||||
,
|
||||
openPreview(topic) {
|
||||
const urls = topic.platform_urls && Object.entries(topic.platform_urls).map(([k, v]) => `${k}: ${v}`).join(', ');
|
||||
const details = [
|
||||
`选题ID: ${topic.id}`,
|
||||
`标题: ${topic.title}`,
|
||||
`领域: ${topic.field || '-'}`,
|
||||
`优先级: ${topic.priority_score}`,
|
||||
`状态: ${topic.status}`,
|
||||
`合规分: ${topic.compliance_score || '-'}`,
|
||||
`创建时间: ${topic.created_at || '-'}`,
|
||||
`发布时间: ${topic.published_at || '-'}`,
|
||||
`生成时间: ${topic.generated_at || '-'}`,
|
||||
`发布平台: ${urls || '未发布'}`
|
||||
].join('\n');
|
||||
this.$alert(details, '选题预览', { width: '600px', customClass: 'preview-dialog' });
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('[DEBUG] TopicsApp mounted');
|
||||
const token = localStorage.getItem('authToken');
|
||||
console.log('[DEBUG] Token exists:', !!token);
|
||||
if (!token) { window.location.href = '/'; return; }
|
||||
// 解析 URL filter 参数
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const filter = urlParams.get('filter');
|
||||
console.log('[DEBUG] URL filter:', filter);
|
||||
if (filter) { this.filterStatus = filter; }
|
||||
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
||||
.then(response => response.ok ? response.json() : Promise.reject())
|
||||
.then(data => {
|
||||
console.log('[DEBUG] Auth success, user:', data.user);
|
||||
this.currentUser = data.user;
|
||||
this.isAdmin = data.user.role === 'admin';
|
||||
this.isLoggedIn = true;
|
||||
this.fetchTopics();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[DEBUG] Auth failed in topics.html', err);
|
||||
localStorage.removeItem('authToken');
|
||||
window.location.href = '/';
|
||||
});
|
||||
}
|
||||
};
|
||||
const app = Vue.createApp(TopicsApp);
|
||||
app.use(ElementPlus);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,430 +0,0 @@
|
||||
<!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="/static/element-plus/index.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); }
|
||||
.status-badge { display: inline-flex; align-items: center; gap: 4px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
.status-dot.待处理 { background: #E6A23C; }
|
||||
.status-dot.待审查 { background: #F56C6C; }
|
||||
.status-dot.待发布 { background: #67C23A; }
|
||||
.status-dot.已发布 { background: #409EFF; }
|
||||
|
||||
.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) {
|
||||
.mobile-nav { display: flex !important; }
|
||||
.topic-card-list { display: block; }
|
||||
.el-table { display: none; }
|
||||
|
||||
.sidebar { display: none; }
|
||||
|
||||
.content-area { padding: 16px; padding-bottom: 80px; }
|
||||
}
|
||||
|
||||
/* 移动端卡片布局 */
|
||||
@media (max-width: 768px) {
|
||||
.el-table { font-size: 12px; display: none; }
|
||||
.el-table .el-button { padding: 4px 8px; font-size: 11px; min-height: auto; }
|
||||
.el-table .cell { padding: 0 4px; }
|
||||
.el-table .el-table__cell { padding: 6px 0; }
|
||||
|
||||
.topic-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.topic-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-title { font-size: 16px; font-weight: 600; color: #303133; flex: 1; margin-right: 8px; }
|
||||
.topic-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
.topic-card-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
.topic-card-actions .el-button { flex: 1; min-width: 60px; }
|
||||
|
||||
}
|
||||
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
<style>#app[v-cloak] { display: none; }
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<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 ? 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 active">📋 选题管理</button>
|
||||
<button class="sidebar-btn" @click="redirectToPage('logs.html')">📄 系统日志</button>
|
||||
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
|
||||
</aside>
|
||||
<main class="content-area">
|
||||
<div class="card">
|
||||
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">📋 选题管理</h2>
|
||||
<div class="card" style="display: inline-block; min-width: fit-content; padding: 16px; margin-bottom: 24px;">
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
|
||||
<el-button type="success" size="small" @click="triggerGenerateSelected" :disabled="selectedTopicIds.length === 0">▶ 批量创作</el-button>
|
||||
<el-button type="warning" size="small" @click="triggerOptimizeSelected" :disabled="selectedTopicIds.length === 0">🔍 批量优化</el-button>
|
||||
<span class="ml-auto text-sm text-gray-500" v-if="selectedTopicIds.length > 0" style="color: #909399; font-size: 14px; margin-left: auto;">已选 {{ selectedTopicIds.length }} 项</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;">
|
||||
<el-tag size="large" :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''">全部 ({{ topics.length }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待处理' ? 'primary' : ''" @click="filterStatus = '待处理'">待处理 ({{ countByStatus('待处理') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待审查' ? 'primary' : ''" @click="filterStatus = '待审查'">待审查 ({{ countByStatus('待审查') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待发布' ? 'primary' : ''" @click="filterStatus = '待发布'">待发布 ({{ countByStatus('待发布') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
|
||||
</div>
|
||||
<div class="card" style="width: 100%; overflow-x: auto; padding: 16px;">
|
||||
<el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="70" fixed></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="200"></el-table-column>
|
||||
<el-table-column prop="field" label="领域" width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="90">
|
||||
<template #default="scope"><span class="status-badge"><span class="status-dot" :class="scope.row.status"></span>{{ scope.row.status }}</span></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="compliance_score" label="合规分" width="90">
|
||||
<template #default="scope"><el-progress :percentage="scope.row.compliance_score || 0" :format="() => scope.row.compliance_score || '-'" :stroke-width="15"></el-progress></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="140"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
|
||||
<el-table-column prop="generated_at" label="创作时间" width="140"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column prop="published_at" label="发布时间" width="140"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; gap: 4px; flex-wrap: wrap;">
|
||||
<el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="scope.row.status !== '待处理'" @click="createTopic(scope.row)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="scope.row.status !== '待审查'" @click="optimizeTopic(scope.row)">审查</el-button>
|
||||
<el-button v-if="scope.row.status === '待发布'" size="small" type="primary" @click="handlePublish(scope.row)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(scope.row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 移动端卡片列表 -->
|
||||
<div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
|
||||
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
|
||||
<div class="topic-card-header">
|
||||
<div class="topic-card-title">{{ topic.title }}</div>
|
||||
<el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-tags">
|
||||
<el-tag size="small" type="info">{{ topic.field }}</el-tag>
|
||||
<el-tag size="small" type="warning">合规{{ topic.compliance_score }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-meta">
|
||||
<div>创建: {{ formatDate(topic.created_at) }}</div>
|
||||
<div>创作: {{ topic.generated_at ? formatDate(topic.generated_at) : '-' }}</div>
|
||||
<div>发布: {{ topic.published_at ? formatDate(topic.published_at) : '-' }}</div>
|
||||
</div>
|
||||
<div class="topic-card-actions">
|
||||
<el-button size="small" @click="openPreview(topic)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="topic.status !== '待处理'" @click="createTopic(topic)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="topic.status !== '待审查'" @click="optimizeTopic(topic)">审查</el-button>
|
||||
<el-button v-if="topic.status === '待发布'" size="small" type="primary" @click="handlePublish(topic)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(topic.id)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<nav class="mobile-nav">
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
|
||||
<button class="mobile-nav-btn active">📋 选题</button>
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('logs.html')">📄 日志</button>
|
||||
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</button>
|
||||
</nav>
|
||||
</div>
|
||||
<script src="/static/vue/vue.global.js"></script>
|
||||
<script src="/static/element-plus/index.full.min.js"></script>
|
||||
|
||||
<script>
|
||||
const TopicsApp = {
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('authToken'),
|
||||
isAdmin: false,
|
||||
currentUser: { username: '' },
|
||||
loadingTable: false,
|
||||
selectedTopicIds: [],
|
||||
filterStatus: '',
|
||||
topics: [],
|
||||
stats: { total: 0, pending: 0, review: 0, ready: 0, published: 0, today: 0 }
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredTopics() {
|
||||
if (!this.topics || !this.topics.length) { return []; }
|
||||
if (!this.filterStatus) { return this.topics; }
|
||||
return this.topics.filter(t => t.status === this.filterStatus);
|
||||
},
|
||||
countByStatus() {
|
||||
return (status) => this.topics.filter(t => t.status === status).length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchTopics() {
|
||||
this.loadingTable = true;
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/topics/?size=100', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (!response.ok) throw new Error('获取失败');
|
||||
const data = await response.json();
|
||||
this.topics = data || [];
|
||||
this.loadingTable = false;
|
||||
} catch (error) {
|
||||
console.log('获取选题失败，使用模拟数据');
|
||||
this.$message.error('获取选题失败，使用模拟数据');
|
||||
this.topics = [
|
||||
{ id: 'A01', title: '可持续发展趋势分析', field: '环保', status: '待处理', compliance_score: 85, created_at: '2026-04-27 10:30', generated_at: null, published_at: null },
|
||||
{ id: 'B02', title: 'AI 在内容创作中的应用', field: '科技', status: '待审查', compliance_score: 92, created_at: '2026-04-27 11:15', generated_at: '2026-04-27 11:45', published_at: null },
|
||||
{ id: 'C03', title: '数字化转型案例研究', field: '商业', status: '待发布', compliance_score: 78, created_at: '2026-04-27 12:00', generated_at: '2026-04-27 12:30', published_at: null }
|
||||
];
|
||||
this.loadingTable = false;
|
||||
}
|
||||
},
|
||||
async fetchStats() {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/system/status', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.stats = {
|
||||
total: data.total_topics || 0,
|
||||
pending: data.topics_by_status ? data.topics_by_status['待处理'] || 0 : 0,
|
||||
review: data.topics_by_status ? data.topics_by_status['待审查'] || 0 : 0,
|
||||
ready: data.topics_by_status ? data.topics_by_status['待发布'] || 0 : 0,
|
||||
published: data.published_count || 0,
|
||||
today: data.today_articles || 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取统计信息失败');
|
||||
}
|
||||
},
|
||||
refreshAll() { this.$message.info('执行批量刷新'); },
|
||||
async triggerGenerateSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量创作已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async triggerOptimizeSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量优化已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async createTopic(topic) {
|
||||
if (topic.status !== '待处理') {
|
||||
this.$message.info('仅待处理选题可创作');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待审查' })
|
||||
});
|
||||
this.$message.success('创作完成，状态变更为待审查');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('创作失败');
|
||||
}
|
||||
},
|
||||
async optimizeTopic(topic) {
|
||||
if (topic.status !== '待审查') {
|
||||
this.$message.info('仅待审查选题可优化');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待发布' })
|
||||
});
|
||||
this.$message.success('优化完成，状态变更为待发布');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('优化失败');
|
||||
}
|
||||
},
|
||||
async handlePublish(topic) {
|
||||
if (topic.status !== '待发布') {
|
||||
this.$message.info('仅待发布选题可发布');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/publishing/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.$message.success('发布成功');
|
||||
if (data.urls) {
|
||||
const msg = Object.entries(data.urls).map(([k,v]) => `${k}: ${v}`).join('\n');
|
||||
this.$notify({ title: '发布链接', message: `<pre>${msg}</pre>`, type: 'success', duration: 0 });
|
||||
}
|
||||
} else {
|
||||
throw new Error('发布失败');
|
||||
}
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('发布失败');
|
||||
}
|
||||
},
|
||||
deleteTopic(id) {
|
||||
this.$confirm('确定删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/topics/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('authToken') }
|
||||
});
|
||||
if (response.ok) {
|
||||
this.$message.success('删除成功');
|
||||
await this.fetchTopics();
|
||||
} else {
|
||||
const err = await response.json().catch(() => ({}));
|
||||
this.$message.error('删除失败: ' + (err.detail || response.statusText));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error('删除请求失败');
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
|
||||
openPreview(topic) {
|
||||
const lines = [
|
||||
`选题ID: ${topic.id}`,
|
||||
`标题: ${topic.title}`,
|
||||
`领域: ${topic.field || '-'}`,
|
||||
`优先级: ${topic.priority_score}`,
|
||||
`状态: ${topic.status}`,
|
||||
`合规分: ${topic.compliance_score || '-'}`,
|
||||
`创建时间: ${topic.created_at || '-'}`,
|
||||
`发布时间: ${topic.published_at || '-'}`,
|
||||
`生成时间: ${topic.generated_at || '-'}`
|
||||
];
|
||||
const platform = topic.platform_urls && Object.entries(topic.platform_urls).map(([k, v]) => `${k}: ${v}`).join(', ');
|
||||
lines.push(`发布平台: ${platform || '未发布'}`);
|
||||
this.$alert(lines.join('\n'), '选题预览', { width: '600px', customClass: 'preview-dialog' });
|
||||
},
|
||||
redirectToPage(page) {
|
||||
let url = page;
|
||||
if (page === 'overview' || page === '/') url = '/';
|
||||
else if (!page.endsWith('.html')) url = page + '.html';
|
||||
window.location.href = url;
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
try {
|
||||
return new Date(dateStr.replace(' ', 'T')).toLocaleString('zh-CN', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit'
|
||||
});
|
||||
} catch (e) { return dateStr; }
|
||||
},
|
||||
getStatusType(status) {
|
||||
const map = { '待处理': 'warning', '待审查': 'danger', '待发布': 'success', '已发布': 'info' };
|
||||
return map[status] || 'primary';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('[DEBUG] TopicsApp mounted');
|
||||
const token = localStorage.getItem('authToken');
|
||||
console.log('[DEBUG] Token exists:', !!token);
|
||||
if (!token) { window.location.href = '/'; return; }
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const filter = urlParams.get('filter');
|
||||
console.log('[DEBUG] URL filter:', filter);
|
||||
if (filter) { this.filterStatus = filter; }
|
||||
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
||||
.then(response => response.ok ? response.json() : Promise.reject())
|
||||
.then(data => {
|
||||
console.log('[DEBUG] Auth success, user:', data.user);
|
||||
this.currentUser = data.user;
|
||||
})
|
||||
.catch(() => { console.log('[DEBUG] Auth failed'); this.currentUser = {}; });
|
||||
this.fetchTopics();
|
||||
this.fetchStats();
|
||||
}
|
||||
};
|
||||
|
||||
TopicsApp = new Vue({ ... }); // placeholder, actual template may have its own Nuxt/Vue init
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,430 +0,0 @@
|
||||
<!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="/static/element-plus/index.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); }
|
||||
.status-badge { display: inline-flex; align-items: center; gap: 4px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
.status-dot.待处理 { background: #E6A23C; }
|
||||
.status-dot.待审查 { background: #F56C6C; }
|
||||
.status-dot.待发布 { background: #67C23A; }
|
||||
.status-dot.已发布 { background: #409EFF; }
|
||||
|
||||
.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) {
|
||||
.mobile-nav { display: flex !important; }
|
||||
.topic-card-list { display: block; }
|
||||
.el-table { display: none; }
|
||||
|
||||
.sidebar { display: none; }
|
||||
|
||||
.content-area { padding: 16px; padding-bottom: 80px; }
|
||||
}
|
||||
|
||||
/* 移动端卡片布局 */
|
||||
@media (max-width: 768px) {
|
||||
.el-table { font-size: 12px; display: none; }
|
||||
.el-table .el-button { padding: 4px 8px; font-size: 11px; min-height: auto; }
|
||||
.el-table .cell { padding: 0 4px; }
|
||||
.el-table .el-table__cell { padding: 6px 0; }
|
||||
|
||||
.topic-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.topic-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-title { font-size: 16px; font-weight: 600; color: #303133; flex: 1; margin-right: 8px; }
|
||||
.topic-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
.topic-card-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
.topic-card-actions .el-button { flex: 1; min-width: 60px; }
|
||||
|
||||
}
|
||||
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
<style>#app[v-cloak] { display: none; }
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<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 ? 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 active">📋 选题管理</button>
|
||||
<button class="sidebar-btn" @click="redirectToPage('logs.html')">📄 系统日志</button>
|
||||
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
|
||||
</aside>
|
||||
<main class="content-area">
|
||||
<div class="card">
|
||||
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">📋 选题管理</h2>
|
||||
<div class="card" style="display: inline-block; min-width: fit-content; padding: 16px; margin-bottom: 24px;">
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
|
||||
<el-button type="success" size="small" @click="triggerGenerateSelected" :disabled="selectedTopicIds.length === 0">▶ 批量创作</el-button>
|
||||
<el-button type="warning" size="small" @click="triggerOptimizeSelected" :disabled="selectedTopicIds.length === 0">🔍 批量优化</el-button>
|
||||
<span class="ml-auto text-sm text-gray-500" v-if="selectedTopicIds.length > 0" style="color: #909399; font-size: 14px; margin-left: auto;">已选 {{ selectedTopicIds.length }} 项</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;">
|
||||
<el-tag size="large" :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''">全部 ({{ topics.length }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待处理' ? 'primary' : ''" @click="filterStatus = '待处理'">待处理 ({{ countByStatus('待处理') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待审查' ? 'primary' : ''" @click="filterStatus = '待审查'">待审查 ({{ countByStatus('待审查') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待发布' ? 'primary' : ''" @click="filterStatus = '待发布'">待发布 ({{ countByStatus('待发布') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
|
||||
</div>
|
||||
<div class="card" style="width: 100%; overflow-x: auto; padding: 16px;">
|
||||
<el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="70" fixed></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="200"></el-table-column>
|
||||
<el-table-column prop="field" label="领域" width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="90">
|
||||
<template #default="scope"><span class="status-badge"><span class="status-dot" :class="scope.row.status"></span>{{ scope.row.status }}</span></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="compliance_score" label="合规分" width="90">
|
||||
<template #default="scope"><el-progress :percentage="scope.row.compliance_score || 0" :format="() => scope.row.compliance_score || '-'" :stroke-width="15"></el-progress></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="140"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
|
||||
<el-table-column prop="generated_at" label="创作时间" width="140"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column prop="published_at" label="发布时间" width="140"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; gap: 4px; flex-wrap: wrap;">
|
||||
<el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="scope.row.status !== '待处理'" @click="createTopic(scope.row)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="scope.row.status !== '待审查'" @click="optimizeTopic(scope.row)">审查</el-button>
|
||||
<el-button v-if="scope.row.status === '待发布'" size="small" type="primary" @click="handlePublish(scope.row)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(scope.row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 移动端卡片列表 -->
|
||||
<div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
|
||||
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
|
||||
<div class="topic-card-header">
|
||||
<div class="topic-card-title">{{ topic.title }}</div>
|
||||
<el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-tags">
|
||||
<el-tag size="small" type="info">{{ topic.field }}</el-tag>
|
||||
<el-tag size="small" type="warning">合规{{ topic.compliance_score }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-meta">
|
||||
<div>创建: {{ formatDate(topic.created_at) }}</div>
|
||||
<div>创作: {{ topic.generated_at ? formatDate(topic.generated_at) : '-' }}</div>
|
||||
<div>发布: {{ topic.published_at ? formatDate(topic.published_at) : '-' }}</div>
|
||||
</div>
|
||||
<div class="topic-card-actions">
|
||||
<el-button size="small" @click="openPreview(topic)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="topic.status !== '待处理'" @click="createTopic(topic)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="topic.status !== '待审查'" @click="optimizeTopic(topic)">审查</el-button>
|
||||
<el-button v-if="topic.status === '待发布'" size="small" type="primary" @click="handlePublish(topic)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(topic.id)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<nav class="mobile-nav">
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
|
||||
<button class="mobile-nav-btn active">📋 选题</button>
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('logs.html')">📄 日志</button>
|
||||
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</button>
|
||||
</nav>
|
||||
</div>
|
||||
<script src="/static/vue/vue.global.js"></script>
|
||||
<script src="/static/element-plus/index.full.min.js"></script>
|
||||
|
||||
<script>
|
||||
const TopicsApp = {
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('authToken'),
|
||||
isAdmin: false,
|
||||
currentUser: { username: '' },
|
||||
loadingTable: false,
|
||||
selectedTopicIds: [],
|
||||
filterStatus: '',
|
||||
topics: [],
|
||||
stats: { total: 0, pending: 0, review: 0, ready: 0, published: 0, today: 0 }
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredTopics() {
|
||||
if (!this.topics || !this.topics.length) { return []; }
|
||||
if (!this.filterStatus) { return this.topics; }
|
||||
return this.topics.filter(t => t.status === this.filterStatus);
|
||||
},
|
||||
countByStatus() {
|
||||
return (status) => this.topics.filter(t => t.status === status).length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchTopics() {
|
||||
this.loadingTable = true;
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/topics/?size=100', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (!response.ok) throw new Error('获取失败');
|
||||
const data = await response.json();
|
||||
this.topics = data || [];
|
||||
this.loadingTable = false;
|
||||
} catch (error) {
|
||||
console.log('获取选题失败，使用模拟数据');
|
||||
this.$message.error('获取选题失败，使用模拟数据');
|
||||
this.topics = [
|
||||
{ id: 'A01', title: '可持续发展趋势分析', field: '环保', status: '待处理', compliance_score: 85, created_at: '2026-04-27 10:30', generated_at: null, published_at: null },
|
||||
{ id: 'B02', title: 'AI 在内容创作中的应用', field: '科技', status: '待审查', compliance_score: 92, created_at: '2026-04-27 11:15', generated_at: '2026-04-27 11:45', published_at: null },
|
||||
{ id: 'C03', title: '数字化转型案例研究', field: '商业', status: '待发布', compliance_score: 78, created_at: '2026-04-27 12:00', generated_at: '2026-04-27 12:30', published_at: null }
|
||||
];
|
||||
this.loadingTable = false;
|
||||
}
|
||||
},
|
||||
async fetchStats() {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/system/status', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.stats = {
|
||||
total: data.total_topics || 0,
|
||||
pending: data.topics_by_status ? data.topics_by_status['待处理'] || 0 : 0,
|
||||
review: data.topics_by_status ? data.topics_by_status['待审查'] || 0 : 0,
|
||||
ready: data.topics_by_status ? data.topics_by_status['待发布'] || 0 : 0,
|
||||
published: data.published_count || 0,
|
||||
today: data.today_articles || 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取统计信息失败');
|
||||
}
|
||||
},
|
||||
refreshAll() { this.$message.info('执行批量刷新'); },
|
||||
async triggerGenerateSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量创作已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async triggerOptimizeSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量优化已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async createTopic(topic) {
|
||||
if (topic.status !== '待处理') {
|
||||
this.$message.info('仅待处理选题可创作');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待审查' })
|
||||
});
|
||||
this.$message.success('创作完成，状态变更为待审查');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('创作失败');
|
||||
}
|
||||
},
|
||||
async optimizeTopic(topic) {
|
||||
if (topic.status !== '待审查') {
|
||||
this.$message.info('仅待审查选题可优化');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待发布' })
|
||||
});
|
||||
this.$message.success('优化完成，状态变更为待发布');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('优化失败');
|
||||
}
|
||||
},
|
||||
async handlePublish(topic) {
|
||||
if (topic.status !== '待发布') {
|
||||
this.$message.info('仅待发布选题可发布');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/publishing/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.$message.success('发布成功');
|
||||
if (data.urls) {
|
||||
const msg = Object.entries(data.urls).map(([k,v]) => `${k}: ${v}`).join('\n');
|
||||
this.$notify({ title: '发布链接', message: `<pre>${msg}</pre>`, type: 'success', duration: 0 });
|
||||
}
|
||||
} else {
|
||||
throw new Error('发布失败');
|
||||
}
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('发布失败');
|
||||
}
|
||||
},
|
||||
deleteTopic(id) {
|
||||
this.$confirm('确定删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/topics/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('authToken') }
|
||||
});
|
||||
if (response.ok) {
|
||||
this.$message.success('删除成功');
|
||||
await this.fetchTopics();
|
||||
} else {
|
||||
const err = await response.json().catch(() => ({}));
|
||||
this.$message.error('删除失败: ' + (err.detail || response.statusText));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error('删除请求失败');
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
|
||||
openPreview(topic) {
|
||||
const lines = [
|
||||
`选题ID: ${topic.id}`,
|
||||
`标题: ${topic.title}`,
|
||||
`领域: ${topic.field || '-'}`,
|
||||
`优先级: ${topic.priority_score}`,
|
||||
`状态: ${topic.status}`,
|
||||
`合规分: ${topic.compliance_score || '-'}`,
|
||||
`创建时间: ${topic.created_at || '-'}`,
|
||||
`发布时间: ${topic.published_at || '-'}`,
|
||||
`生成时间: ${topic.generated_at || '-'}`
|
||||
];
|
||||
const platform = topic.platform_urls && Object.entries(topic.platform_urls).map(([k, v]) => `${k}: ${v}`).join(', ');
|
||||
lines.push(`发布平台: ${platform || '未发布'}`);
|
||||
this.$alert(lines.join('\n'), '选题预览', { width: '600px', customClass: 'preview-dialog' });
|
||||
},
|
||||
redirectToPage(page) {
|
||||
let url = page;
|
||||
if (page === 'overview' || page === '/') url = '/';
|
||||
else if (!page.endsWith('.html')) url = page + '.html';
|
||||
window.location.href = url;
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
try {
|
||||
return new Date(dateStr.replace(' ', 'T')).toLocaleString('zh-CN', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit'
|
||||
});
|
||||
} catch (e) { return dateStr; }
|
||||
},
|
||||
getStatusType(status) {
|
||||
const map = { '待处理': 'warning', '待审查': 'danger', '待发布': 'success', '已发布': 'info' };
|
||||
return map[status] || 'primary';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('[DEBUG] TopicsApp mounted');
|
||||
const token = localStorage.getItem('authToken');
|
||||
console.log('[DEBUG] Token exists:', !!token);
|
||||
if (!token) { window.location.href = '/'; return; }
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const filter = urlParams.get('filter');
|
||||
console.log('[DEBUG] URL filter:', filter);
|
||||
if (filter) { this.filterStatus = filter; }
|
||||
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
||||
.then(response => response.ok ? response.json() : Promise.reject())
|
||||
.then(data => {
|
||||
console.log('[DEBUG] Auth success, user:', data.user);
|
||||
this.currentUser = data.user;
|
||||
})
|
||||
.catch(() => { console.log('[DEBUG] Auth failed'); this.currentUser = {}; });
|
||||
this.fetchTopics();
|
||||
this.fetchStats();
|
||||
}
|
||||
};
|
||||
|
||||
TopicsApp = new Vue(TopicsApp);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,446 +0,0 @@
|
||||
<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="/static/element-plus/index.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); }
|
||||
.status-badge { display: inline-flex; align-items: center; gap: 4px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
.status-dot.待处理 { background: #E6A23C; }
|
||||
.status-dot.待审查 { background: #F56C6C; }
|
||||
.status-dot.待发布 { background: #67C23A; }
|
||||
.status-dot.已发布 { background: #409EFF; }
|
||||
|
||||
.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) {
|
||||
.mobile-nav { display: flex !important; }
|
||||
.topic-card-list { display: block; }
|
||||
.el-table { display: none; }
|
||||
|
||||
.sidebar { display: none; }
|
||||
|
||||
.content-area { padding: 16px; padding-bottom: 80px; }
|
||||
}
|
||||
|
||||
/* 移动端卡片布局 */
|
||||
@media (max-width: 768px) {
|
||||
.el-table { font-size: 12px; display: none; }
|
||||
.el-table .el-button { padding: 4px 8px; font-size: 11px; min-height: auto; }
|
||||
.el-table .cell { padding: 0 4px; }
|
||||
.el-table .el-table__cell { padding: 6px 0; }
|
||||
|
||||
.topic-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.topic-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-title { font-size: 16px; font-weight: 600; color: #303133; flex: 1; margin-right: 8px; }
|
||||
.topic-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
.topic-card-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
.topic-card-actions .el-button { flex: 1; min-width: 60px; }
|
||||
|
||||
}
|
||||
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
<style>#app[v-cloak] { display: none; }
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<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 ? 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 active">📋 选题管理</button>
|
||||
<button class="sidebar-btn" @click="redirectToPage('logs.html')">📄 系统日志</button>
|
||||
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
|
||||
</aside>
|
||||
<main class="content-area">
|
||||
<div class="card">
|
||||
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">📋 选题管理</h2>
|
||||
<div class="card" style="display: inline-block; min-width: fit-content; padding: 16px; margin-bottom: 24px;">
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
|
||||
<el-button type="success" size="small" @click="triggerGenerateSelected" :disabled="selectedTopicIds.length === 0">▶ 批量创作</el-button>
|
||||
<el-button type="warning" size="small" @click="triggerOptimizeSelected" :disabled="selectedTopicIds.length === 0">🔍 批量优化</el-button>
|
||||
<span class="ml-auto text-sm text-gray-500" v-if="selectedTopicIds.length > 0" style="color: #909399; font-size: 14px; margin-left: auto;">已选 {{ selectedTopicIds.length }} 项</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;">
|
||||
<el-tag size="large" :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''">全部 ({{ topics.length }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待处理' ? 'primary' : ''" @click="filterStatus = '待处理'">待处理 ({{ countByStatus('待处理') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待审查' ? 'primary' : ''" @click="filterStatus = '待审查'">待审查 ({{ countByStatus('待审查') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待发布' ? 'primary' : ''" @click="filterStatus = '待发布'">待发布 ({{ countByStatus('待发布') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
|
||||
</div>
|
||||
<div class="card" style="width: 100%; overflow-x: auto; padding: 16px;">
|
||||
<el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="70" fixed></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="200"></el-table-column>
|
||||
<el-table-column prop="field" label="领域" width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="90">
|
||||
<template #default="scope"><span class="status-badge"><span class="status-dot" :class="scope.row.status"></span>{{ scope.row.status }}</span></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="compliance_score" label="合规分" width="90">
|
||||
<template #default="scope"><el-progress :percentage="scope.row.compliance_score || 0" :format="() => scope.row.compliance_score || '-'" :stroke-width="15"></el-progress></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="140"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
|
||||
<el-table-column prop="generated_at" label="创作时间" width="140"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column prop="published_at" label="发布时间" width="140"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; gap: 4px; flex-wrap: wrap;">
|
||||
<el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="scope.row.status !== '待处理'" @click="createTopic(scope.row)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="scope.row.status !== '待审查'" @click="optimizeTopic(scope.row)">审查</el-button>
|
||||
<el-button v-if="scope.row.status === '待发布'" size="small" type="primary" @click="handlePublish(scope.row)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(scope.row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 移动端卡片列表 -->
|
||||
<div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
|
||||
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
|
||||
<div class="topic-card-header">
|
||||
<div class="topic-card-title">{{ topic.title }}</div>
|
||||
<el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-tags">
|
||||
<el-tag size="small" type="info">{{ topic.field }}</el-tag>
|
||||
<el-tag size="small" type="warning">合规{{ topic.compliance_score }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-meta">
|
||||
<div>创建: {{ formatDate(topic.created_at) }}</div>
|
||||
<div>创作: {{ topic.generated_at ? formatDate(topic.generated_at) : '-' }}</div>
|
||||
<div>发布: {{ topic.published_at ? formatDate(topic.published_at) : '-' }}</div>
|
||||
</div>
|
||||
<div class="topic-card-actions">
|
||||
<el-button size="small" @click="openPreview(topic)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="topic.status !== '待处理'" @click="createTopic(topic)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="topic.status !== '待审查'" @click="optimizeTopic(topic)">审查</el-button>
|
||||
<el-button v-if="topic.status === '待发布'" size="small" type="primary" @click="handlePublish(topic)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(topic.id)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<nav class="mobile-nav">
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
|
||||
<button class="mobile-nav-btn active">📋 选题</button>
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('logs.html')">📄 日志</button>
|
||||
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</button>
|
||||
</nav>
|
||||
</div>
|
||||
<script src="/static/vue/vue.global.js"></script>
|
||||
<script src="/static/element-plus/index.full.min.js"></script>
|
||||
|
||||
<script>
|
||||
const TopicsApp = {
|
||||
data() {
|
||||
// 从 localStorage 恢复登录状态
|
||||
let isLoggedIn = false, isAdmin = false, currentUser = { username: '' };
|
||||
try {
|
||||
const userInfo = JSON.parse(localStorage.getItem('user_info'));
|
||||
if (userInfo) {
|
||||
isLoggedIn = true;
|
||||
isAdmin = userInfo.role === 'admin';
|
||||
currentUser = userInfo;
|
||||
}
|
||||
} catch (e) {}
|
||||
return {
|
||||
currentPage: 'topics',
|
||||
isLoggedIn, isAdmin, currentUser,
|
||||
loadingTable: false,
|
||||
selectedTopicIds: [],
|
||||
filterStatus: '',
|
||||
stats: { total: 0, pending: 0, review: 0, ready: 0, published: 0, today: 0 },
|
||||
topics: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredTopics() {
|
||||
if (!this.topics || !this.topics.length) { return []; }
|
||||
if (!this.filterStatus) { return this.topics; }
|
||||
return this.topics.filter(t => t.status === this.filterStatus);
|
||||
},
|
||||
countByStatus() {
|
||||
return (status) => this.topics.filter(t => t.status === status).length;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async fetchTopics() {
|
||||
this.loadingTable = true;
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/topics/?size=100', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (!response.ok) throw new Error('获取失败');
|
||||
const data = await response.json();
|
||||
this.topics = data || [];
|
||||
this.loadingTable = false;
|
||||
} catch (error) {
|
||||
console.log('获取选题失败，使用模拟数据');
|
||||
this.$message.error('获取选题失败，使用模拟数据');
|
||||
this.topics = [
|
||||
{ id: 'A01', title: '可持续发展趋势分析', field: '环保', status: '待处理', compliance_score: 85, created_at: '2026-04-27 10:30', generated_at: null, published_at: null },
|
||||
{ id: 'B02', title: 'AI 在内容创作中的应用', field: '科技', status: '待审查', compliance_score: 92, created_at: '2026-04-27 11:15', generated_at: '2026-04-27 11:45', published_at: null },
|
||||
{ id: 'C03', title: '数字化转型案例研究', field: '商业', status: '待发布', compliance_score: 78, created_at: '2026-04-27 12:00', generated_at: '2026-04-27 12:30', published_at: null }
|
||||
];
|
||||
this.loadingTable = false;
|
||||
}
|
||||
},
|
||||
async fetchStats() {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/system/status', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.stats = {
|
||||
total: data.total_topics || 0,
|
||||
pending: data.topics_by_status ? data.topics_by_status['待处理'] || 0 : 0,
|
||||
review: data.topics_by_status ? data.topics_by_status['待审查'] || 0 : 0,
|
||||
ready: data.topics_by_status ? data.topics_by_status['待发布'] || 0 : 0,
|
||||
published: data.published_count || 0,
|
||||
today: data.today_articles || 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取统计信息失败');
|
||||
}
|
||||
},
|
||||
refreshAll() { this.$message.info('执行批量刷新'); },
|
||||
async triggerGenerateSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量创作已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async triggerOptimizeSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量优化已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async createTopic(topic) {
|
||||
if (topic.status !== '待处理') {
|
||||
this.$message.info('仅待处理选题可创作');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待审查' })
|
||||
});
|
||||
this.$message.success('创作完成，状态变更为待审查');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('创作失败');
|
||||
}
|
||||
},
|
||||
async optimizeTopic(topic) {
|
||||
if (topic.status !== '待审查') {
|
||||
this.$message.info('仅待审查选题可优化');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待发布' })
|
||||
});
|
||||
this.$message.success('优化完成，状态变更为待发布');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('优化失败');
|
||||
}
|
||||
},
|
||||
async handlePublish(topic) {
|
||||
if (topic.status !== '待发布') {
|
||||
this.$message.info('仅待发布选题可发布');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/publishing/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.$message.success('发布成功');
|
||||
if (data.urls) {
|
||||
');
|
||||
this.$notify({ title: '发布链接', message: `<pre>${msg}</pre>`, type: 'success', duration: 0 });
|
||||
}
|
||||
} else {
|
||||
throw new Error('发布失败');
|
||||
}
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('发布失败');
|
||||
}
|
||||
},
|
||||
deleteTopic(id) {
|
||||
this.$confirm('确定删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/topics/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('authToken') }
|
||||
});
|
||||
if (response.ok) {
|
||||
this.$message.success('删除成功');
|
||||
await this.fetchTopics();
|
||||
} else {
|
||||
const err = await response.json().catch(() => ({}));
|
||||
this.$message.error('删除失败: ' + (err.detail || response.statusText));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error('删除请求失败');
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
|
||||
openPreview(topic) {
|
||||
const lines = [
|
||||
`选题ID: ${topic.id}`,
|
||||
`标题: ${topic.title}`,
|
||||
`领域: ${topic.field || '-'}`,
|
||||
`优先级: ${topic.priority_score}`,
|
||||
`状态: ${topic.status}`,
|
||||
`合规分: ${topic.compliance_score || '-'}`,
|
||||
`创建时间: ${topic.created_at || '-'}`,
|
||||
`发布时间: ${topic.published_at || '-'}`,
|
||||
`生成时间: ${topic.generated_at || '-'}`
|
||||
];
|
||||
const platform = topic.platform_urls && Object.entries(topic.platform_urls).map(([k, v]) => `${k}: ${v}`).join(', ');
|
||||
lines.push(`发布平台: ${platform || '未发布'}`);
|
||||
this.$alert(lines.join('
|
||||
'), '选题预览', { width: '600px', customClass: 'preview-dialog' });
|
||||
},
|
||||
redirectToPage(page) {
|
||||
let url = page;
|
||||
if (page === 'overview' || page === '/') url = '/';
|
||||
else if (!page.endsWith('.html')) url = page + '.html';
|
||||
window.location.href = url;
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
try {
|
||||
return new Date(dateStr.replace(' ', 'T')).toLocaleString('zh-CN', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit'
|
||||
});
|
||||
} catch (e) { return dateStr; }
|
||||
},
|
||||
getStatusType(status) {
|
||||
const map = { '待处理': 'warning', '待审查': 'danger', '待发布': 'success', '已发布': 'info' };
|
||||
return map[status] || 'primary';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('[DEBUG] TopicsApp mounted');
|
||||
const token = localStorage.getItem('authToken');
|
||||
console.log('[DEBUG] Token exists:', !!token);
|
||||
if (!token) { window.location.href = '/'; return; }
|
||||
// 解析 URL filter 参数
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const filter = urlParams.get('filter');
|
||||
console.log('[DEBUG] URL filter:', filter);
|
||||
if (filter) { this.filterStatus = filter; }
|
||||
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
||||
.then(response => response.ok ? response.json() : Promise.reject())
|
||||
.then(data => {
|
||||
console.log('[DEBUG] Auth success, user:', data.user);
|
||||
this.currentUser = data.user;
|
||||
this.isAdmin = data.user.role === 'admin';
|
||||
this.isLoggedIn = true;
|
||||
this.fetchTopics();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[DEBUG] Auth failed in topics.html', err);
|
||||
localStorage.removeItem('authToken');
|
||||
window.location.href = '/';
|
||||
});
|
||||
}
|
||||
};
|
||||
const app = Vue.createApp(TopicsApp);
|
||||
app.use(ElementPlus);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,430 +0,0 @@
|
||||
<!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="/static/element-plus/index.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); }
|
||||
.status-badge { display: inline-flex; align-items: center; gap: 4px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
.status-dot.待处理 { background: #E6A23C; }
|
||||
.status-dot.待审查 { background: #F56C6C; }
|
||||
.status-dot.待发布 { background: #67C23A; }
|
||||
.status-dot.已发布 { background: #409EFF; }
|
||||
|
||||
.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) {
|
||||
.mobile-nav { display: flex !important; }
|
||||
.topic-card-list { display: block; }
|
||||
.el-table { display: none; }
|
||||
|
||||
.sidebar { display: none; }
|
||||
|
||||
.content-area { padding: 16px; padding-bottom: 80px; }
|
||||
}
|
||||
|
||||
/* 移动端卡片布局 */
|
||||
@media (max-width: 768px) {
|
||||
.el-table { font-size: 12px; display: none; }
|
||||
.el-table .el-button { padding: 4px 8px; font-size: 11px; min-height: auto; }
|
||||
.el-table .cell { padding: 0 4px; }
|
||||
.el-table .el-table__cell { padding: 6px 0; }
|
||||
|
||||
.topic-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.topic-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-title { font-size: 16px; font-weight: 600; color: #303133; flex: 1; margin-right: 8px; }
|
||||
.topic-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
.topic-card-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
.topic-card-actions .el-button { flex: 1; min-width: 60px; }
|
||||
|
||||
}
|
||||
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
<style>#app[v-cloak] { display: none; }
|
||||
/* 桌面端默认：显示表格，隐藏移动端元素和卡片 */
|
||||
.mobile-nav { display: none !important; }
|
||||
.topic-card-list { display: none; }
|
||||
.el-table { display: table; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<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 ? 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 active">📋 选题管理</button>
|
||||
<button class="sidebar-btn" @click="redirectToPage('logs.html')">📄 系统日志</button>
|
||||
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
|
||||
</aside>
|
||||
<main class="content-area">
|
||||
<div class="card">
|
||||
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">📋 选题管理</h2>
|
||||
<div class="card" style="display: inline-block; min-width: fit-content; padding: 16px; margin-bottom: 24px;">
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
|
||||
<el-button type="success" size="small" @click="triggerGenerateSelected" :disabled="selectedTopicIds.length === 0">▶ 批量创作</el-button>
|
||||
<el-button type="warning" size="small" @click="triggerOptimizeSelected" :disabled="selectedTopicIds.length === 0">🔍 批量优化</el-button>
|
||||
<span class="ml-auto text-sm text-gray-500" v-if="selectedTopicIds.length > 0" style="color: #909399; font-size: 14px; margin-left: auto;">已选 {{ selectedTopicIds.length }} 项</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;">
|
||||
<el-tag size="large" :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''">全部 ({{ topics.length }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待处理' ? 'primary' : ''" @click="filterStatus = '待处理'">待处理 ({{ countByStatus('待处理') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待审查' ? 'primary' : ''" @click="filterStatus = '待审查'">待审查 ({{ countByStatus('待审查') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '待发布' ? 'primary' : ''" @click="filterStatus = '待发布'">待发布 ({{ countByStatus('待发布') }})</el-tag>
|
||||
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
|
||||
</div>
|
||||
<div class="card" style="width: 100%; overflow-x: auto; padding: 16px;">
|
||||
<el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="70" fixed></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="200"></el-table-column>
|
||||
<el-table-column prop="field" label="领域" width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="90">
|
||||
<template #default="scope"><span class="status-badge"><span class="status-dot" :class="scope.row.status"></span>{{ scope.row.status }}</span></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="compliance_score" label="合规分" width="90">
|
||||
<template #default="scope"><el-progress :percentage="scope.row.compliance_score || 0" :format="() => scope.row.compliance_score || '-'" :stroke-width="15"></el-progress></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="140"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
|
||||
<el-table-column prop="generated_at" label="创作时间" width="140"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column prop="published_at" label="发布时间" width="140"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; gap: 4px; flex-wrap: wrap;">
|
||||
<el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="scope.row.status !== '待处理'" @click="createTopic(scope.row)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="scope.row.status !== '待审查'" @click="optimizeTopic(scope.row)">审查</el-button>
|
||||
<el-button v-if="scope.row.status === '待发布'" size="small" type="primary" @click="handlePublish(scope.row)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(scope.row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 移动端卡片列表 -->
|
||||
<div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
|
||||
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
|
||||
<div class="topic-card-header">
|
||||
<div class="topic-card-title">{{ topic.title }}</div>
|
||||
<el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-tags">
|
||||
<el-tag size="small" type="info">{{ topic.field }}</el-tag>
|
||||
<el-tag size="small" type="warning">合规{{ topic.compliance_score }}</el-tag>
|
||||
</div>
|
||||
<div class="topic-card-meta">
|
||||
<div>创建: {{ formatDate(topic.created_at) }}</div>
|
||||
<div>创作: {{ topic.generated_at ? formatDate(topic.generated_at) : '-' }}</div>
|
||||
<div>发布: {{ topic.published_at ? formatDate(topic.published_at) : '-' }}</div>
|
||||
</div>
|
||||
<div class="topic-card-actions">
|
||||
<el-button size="small" @click="openPreview(topic)" type="primary">预览</el-button>
|
||||
<el-button size="small" type="success" :disabled="topic.status !== '待处理'" @click="createTopic(topic)">创作</el-button>
|
||||
<el-button size="small" type="warning" :disabled="topic.status !== '待审查'" @click="optimizeTopic(topic)">审查</el-button>
|
||||
<el-button v-if="topic.status === '待发布'" size="small" type="primary" @click="handlePublish(topic)">发布</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTopic(topic.id)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<nav class="mobile-nav">
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
|
||||
<button class="mobile-nav-btn active">📋 选题</button>
|
||||
<button class="mobile-nav-btn" @click="redirectToPage('logs.html')">📄 日志</button>
|
||||
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</button>
|
||||
</nav>
|
||||
</div>
|
||||
<script src="/static/vue/vue.global.js"></script>
|
||||
<script src="/static/element-plus/index.full.min.js"></script>
|
||||
|
||||
<script>
|
||||
const TopicsApp = {
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: !!localStorage.getItem('authToken'),
|
||||
isAdmin: false,
|
||||
currentUser: { username: '' },
|
||||
loadingTable: false,
|
||||
selectedTopicIds: [],
|
||||
filterStatus: '',
|
||||
topics: [],
|
||||
stats: { total: 0, pending: 0, review: 0, ready: 0, published: 0, today: 0 }
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredTopics() {
|
||||
if (!this.topics || !this.topics.length) { return []; }
|
||||
if (!this.filterStatus) { return this.topics; }
|
||||
return this.topics.filter(t => t.status === this.filterStatus);
|
||||
},
|
||||
countByStatus() {
|
||||
return (status) => this.topics.filter(t => t.status === status).length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchTopics() {
|
||||
this.loadingTable = true;
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/topics/?size=100', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (!response.ok) throw new Error('获取失败');
|
||||
const data = await response.json();
|
||||
this.topics = data || [];
|
||||
this.loadingTable = false;
|
||||
} catch (error) {
|
||||
console.log('获取选题失败，使用模拟数据');
|
||||
this.$message.error('获取选题失败，使用模拟数据');
|
||||
this.topics = [
|
||||
{ id: 'A01', title: '可持续发展趋势分析', field: '环保', status: '待处理', compliance_score: 85, created_at: '2026-04-27 10:30', generated_at: null, published_at: null },
|
||||
{ id: 'B02', title: 'AI 在内容创作中的应用', field: '科技', status: '待审查', compliance_score: 92, created_at: '2026-04-27 11:15', generated_at: '2026-04-27 11:45', published_at: null },
|
||||
{ id: 'C03', title: '数字化转型案例研究', field: '商业', status: '待发布', compliance_score: 78, created_at: '2026-04-27 12:00', generated_at: '2026-04-27 12:30', published_at: null }
|
||||
];
|
||||
this.loadingTable = false;
|
||||
}
|
||||
},
|
||||
async fetchStats() {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/system/status', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.stats = {
|
||||
total: data.total_topics || 0,
|
||||
pending: data.topics_by_status ? data.topics_by_status['待处理'] || 0 : 0,
|
||||
review: data.topics_by_status ? data.topics_by_status['待审查'] || 0 : 0,
|
||||
ready: data.topics_by_status ? data.topics_by_status['待发布'] || 0 : 0,
|
||||
published: data.published_count || 0,
|
||||
today: data.today_articles || 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取统计信息失败');
|
||||
}
|
||||
},
|
||||
refreshAll() { this.$message.info('执行批量刷新'); },
|
||||
async triggerGenerateSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量创作已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async triggerOptimizeSelected() {
|
||||
if (!this.selectedTopicIds.length) return;
|
||||
this.$message.success('批量优化已启动');
|
||||
this.selectedTopicIds = [];
|
||||
await this.fetchTopics();
|
||||
},
|
||||
async createTopic(topic) {
|
||||
if (topic.status !== '待处理') {
|
||||
this.$message.info('仅待处理选题可创作');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待审查' })
|
||||
});
|
||||
this.$message.success('创作完成，状态变更为待审查');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('创作失败');
|
||||
}
|
||||
},
|
||||
async optimizeTopic(topic) {
|
||||
if (topic.status !== '待审查') {
|
||||
this.$message.info('仅待审查选题可优化');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/api/topics/${topic.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ status: '待发布' })
|
||||
});
|
||||
this.$message.success('优化完成，状态变更为待发布');
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('优化失败');
|
||||
}
|
||||
},
|
||||
async handlePublish(topic) {
|
||||
if (topic.status !== '待发布') {
|
||||
this.$message.info('仅待发布选题可发布');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/publishing/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('authToken')
|
||||
},
|
||||
body: JSON.stringify({ topic_id: topic.id })
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.$message.success('发布成功');
|
||||
if (data.urls) {
|
||||
const msg = Object.entries(data.urls).map(([k,v]) => `${k}: ${v}`).join('\n');
|
||||
this.$notify({ title: '发布链接', message: `<pre>${msg}</pre>`, type: 'success', duration: 0 });
|
||||
}
|
||||
} else {
|
||||
throw new Error('发布失败');
|
||||
}
|
||||
await this.fetchTopics();
|
||||
} catch (e) {
|
||||
this.$message.error('发布失败');
|
||||
}
|
||||
},
|
||||
deleteTopic(id) {
|
||||
this.$confirm('确定删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/topics/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('authToken') }
|
||||
});
|
||||
if (response.ok) {
|
||||
this.$message.success('删除成功');
|
||||
await this.fetchTopics();
|
||||
} else {
|
||||
const err = await response.json().catch(() => ({}));
|
||||
this.$message.error('删除失败: ' + (err.detail || response.statusText));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error('删除请求失败');
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
|
||||
openPreview(topic) {
|
||||
const lines = [
|
||||
`选题ID: ${topic.id}`,
|
||||
`标题: ${topic.title}`,
|
||||
`领域: ${topic.field || '-'}`,
|
||||
`优先级: ${topic.priority_score}`,
|
||||
`状态: ${topic.status}`,
|
||||
`合规分: ${topic.compliance_score || '-'}`,
|
||||
`创建时间: ${topic.created_at || '-'}`,
|
||||
`发布时间: ${topic.published_at || '-'}`,
|
||||
`生成时间: ${topic.generated_at || '-'}`
|
||||
];
|
||||
const platform = topic.platform_urls && Object.entries(topic.platform_urls).map(([k, v]) => `${k}: ${v}`).join(', ');
|
||||
lines.push(`发布平台: ${platform || '未发布'}`);
|
||||
this.$alert(lines.join('\n'), '选题预览', { width: '600px', customClass: 'preview-dialog' });
|
||||
},
|
||||
redirectToPage(page) {
|
||||
let url = page;
|
||||
if (page === 'overview' || page === '/') url = '/';
|
||||
else if (!page.endsWith('.html')) url = page + '.html';
|
||||
window.location.href = url;
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
try {
|
||||
return new Date(dateStr.replace(' ', 'T')).toLocaleString('zh-CN', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit'
|
||||
});
|
||||
} catch (e) { return dateStr; }
|
||||
},
|
||||
getStatusType(status) {
|
||||
const map = { '待处理': 'warning', '待审查': 'danger', '待发布': 'success', '已发布': 'info' };
|
||||
return map[status] || 'primary';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('[DEBUG] TopicsApp mounted');
|
||||
const token = localStorage.getItem('authToken');
|
||||
console.log('[DEBUG] Token exists:', !!token);
|
||||
if (!token) { window.location.href = '/'; return; }
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const filter = urlParams.get('filter');
|
||||
console.log('[DEBUG] URL filter:', filter);
|
||||
if (filter) { this.filterStatus = filter; }
|
||||
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
||||
.then(response => response.ok ? response.json() : Promise.reject())
|
||||
.then(data => {
|
||||
console.log('[DEBUG] Auth success, user:', data.user);
|
||||
this.currentUser = data.user;
|
||||
})
|
||||
.catch(() => { console.log('[DEBUG] Auth failed'); this.currentUser = {}; });
|
||||
this.fetchTopics();
|
||||
this.fetchStats();
|
||||
}
|
||||
};
|
||||
|
||||
TopicsApp = new Vue(TopicsApp);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -123,31 +123,85 @@
|
||||
async fetchUsers() {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const response = await fetch('/api/admin/users', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (!response.ok) throw new Error('获取失败');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
return;
|
||||
}
|
||||
const response = await fetch('/api/admin/users', {
|
||||
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();
|
||||
this.users = data || [];
|
||||
this.$message.success('用户列表加载成功');
|
||||
} catch (error) {
|
||||
console.log('使用模拟数据');
|
||||
this.users = [
|
||||
{ id: 'admin', username: '管理员', role: 'admin', created_at: '2026-04-01 09:00' },
|
||||
{ id: 'editor1', username: '编辑小王', role: 'editor', created_at: '2026-04-05 14:30' },
|
||||
{ id: 'editor2', username: '编辑小李', role: 'editor', created_at: '2026-04-10 10:15' }
|
||||
];
|
||||
console.error('获取用户失败:', error);
|
||||
this.$message.error(`获取用户失败: ${error.message}`);
|
||||
this.users = [];
|
||||
}
|
||||
},
|
||||
addUser() {
|
||||
const newId = 'user' + Date.now();
|
||||
this.users.push({ id: newId, username: '新用户', role: 'editor', created_at: new Date().toISOString().slice(0, 16).replace('T', ' ') });
|
||||
this.$message.success('添加用户成功');
|
||||
async addUser() {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
return;
|
||||
}
|
||||
// 使用默认用户名，添加时间戳避免重复
|
||||
const username = '新用户' + Date.now().toString().slice(-4);
|
||||
const response = await fetch('/api/admin/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ username: username, role: 'editor' })
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.detail || `请求失败: ${response.status}`);
|
||||
}
|
||||
const newUser = await response.json();
|
||||
this.users.push(newUser);
|
||||
this.$message.success('添加用户成功');
|
||||
} catch (error) {
|
||||
console.error('添加用户失败:', error);
|
||||
this.$message.error(`添加用户失败: ${error.message}`);
|
||||
}
|
||||
},
|
||||
deleteUser(id) {
|
||||
async deleteUser(id) {
|
||||
if (id === 'admin') {
|
||||
this.$message.warning('不能删除管理员用户');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定删除该用户？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
||||
.then(() => { this.users = this.users.filter(u => u.id !== id); this.$message.success('删除用户成功'); }).catch(() => {});
|
||||
.then(async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (!token) {
|
||||
this.$message.error('请先登录');
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
const response = await fetch(`/api/admin/users/${encodeURIComponent(id)}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.detail || `请求失败: ${response.status}`);
|
||||
}
|
||||
this.users = this.users.filter(u => u.id !== id);
|
||||
this.$message.success('删除用户成功');
|
||||
} catch (error) {
|
||||
console.error('删除用户失败:', error);
|
||||
this.$message.error(`删除用户失败: ${error.message}`);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
|
||||
redirectToPage(page) { window.location.href = '/' + page; },
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user