yuzhiran
7e953afbd2
- 新增创作工作台 studio.html：合并选题/内容工厂/文章管理为单一 tab 入口（iframe embed 模式） - 新增 AI味检测模块（ai_slop API + 页面，合规软硬问题分级） - 新增白标品牌配置（branding API + 页面 + deploy 私有化交付包） - 发布闭环：publishing 放宽至 editor + records/mark-published 接口 - 移动端响应式补全（admin/calendar/ai-slop 表格卡片兜底） - 修复菜单幂等播种缺陷（按 path 对齐，避免功能页孤立） - 新增短视频脚本 shortvideo.py 与 2026 市场调研简报
572 lines
37 KiB
HTML
572 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>宇之然内容创作平台 - 数据分析</title>
|
|
<link rel="stylesheet" href="element-plus.css">
|
|
<link rel="stylesheet" href="theme-modern.css">
|
|
<style>
|
|
.stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 20px; color: white; text-align: center; }
|
|
.stat-card.success { background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%); }
|
|
.stat-card.warning { background: linear-gradient(135deg, #e6a23c 0%, #f5c543 100%); }
|
|
.stat-card.danger { background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%); }
|
|
.stat-value { font-size: 32px; font-weight: 700; }
|
|
.stat-label { font-size: 14px; opacity: 0.9; margin-top: 4px; }
|
|
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 24px; }
|
|
.chart-container { background: white; border-radius: 12px; padding: 16px; margin-bottom: 24px; height: 320px; position: relative; }
|
|
.platform-chart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
|
@media (max-width: 768px) {
|
|
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
|
|
.stat-card { padding: 14px; }
|
|
.stat-value { font-size: 24px; }
|
|
.stat-label { font-size: 12px; }
|
|
.chart-container { height: 220px !important; padding: 12px; }
|
|
.platform-chart { grid-template-columns: 1fr; }
|
|
.metrics-table { display: none; }
|
|
.metrics-card-list { display: block; }
|
|
}
|
|
.metrics-table { display: block; }
|
|
.metrics-card-list { display: none; }
|
|
.metrics-card { background: var(--color-bg-raised); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
|
|
.metrics-card:active { transform: scale(0.99); }
|
|
.metrics-card-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--color-border); font-size: var(--font-size-small); }
|
|
.metrics-card-row:last-child { border-bottom: none; }
|
|
.metrics-card-label { color: var(--color-text-secondary); }
|
|
.metrics-card-value { color: var(--color-text-primary); font-weight: 500; }
|
|
.metrics-card-title { font-size: var(--font-size-body); font-weight: 600; color: var(--color-text-primary); margin-bottom: 10px; }
|
|
.metrics-card-reason { font-size: var(--font-size-caption); color: var(--color-text-regular); margin-top: 6px; line-height: 1.5; }
|
|
</style>
|
|
<script src="uni-nav.js"></script>
|
|
<script src="chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<uni-nav title="数据分析" :username="currentUser.username" :is-admin="isAdmin" current-page="metrics" @navigate="redirectToPage" @logout="handleLogout">
|
|
</uni-nav>
|
|
<div class="main-content">
|
|
<main class="content-area">
|
|
<div class="filter-bar" style="margin-bottom:20px;">
|
|
<el-button size="default" :type="activeTab === 'dashboard' ? 'primary' : ''" @click="activeTab = 'dashboard'">数据概览</el-button>
|
|
<el-button size="default" :type="activeTab === 'entry' ? 'primary' : ''" @click="activeTab = 'entry'; switchToEntry()">数据录入</el-button>
|
|
</div>
|
|
<div v-if="activeTab === 'dashboard'">
|
|
<h2 style="font-size: 24px; font-weight: 700; margin-bottom: 24px; color: #303133;"><el-icon style="vertical-align:-2px;"><IconDashboard /></el-icon> 数据分析</h2>
|
|
<div v-if="loadingDashboard" style="text-align:center;padding:40px 0;color:#909399;">
|
|
<el-icon style="font-size:32px;margin-bottom:12px;" class="is-loading"><IconLoading /></el-icon>
|
|
<div>加载中...</div>
|
|
</div>
|
|
<div class="card page-fade">
|
|
<h3 style="font-size: 18px; margin-bottom: 16px;"><el-icon style="vertical-align:-2px;"><IconDashboard /></el-icon> 选题状态分布</h3>
|
|
<div style="display: flex; gap: 20px; flex-wrap: wrap; align-items:center;">
|
|
<div style="flex:1;min-width:200px;">
|
|
<div v-for="(count, status) in dashboard.topics_by_status" :key="status" style="display:flex;align-items:center;margin-bottom:12px;">
|
|
<div :style="{width:14+'px',height:14+'px',borderRadius:'50%',marginRight:10+'px',background:statusColors(status)}"></div>
|
|
<div style="flex:1;font-size:14px;color:#606266;">{{ getStatusLabel(status) }}</div>
|
|
<div style="font-size:16px;font-weight:600;color:#303133;">{{ count }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:200px;height:180px;">
|
|
<canvas ref="statusChartCanvas" style="width:100%;height:100%;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="font-size: 18px; margin-bottom: 16px;"><el-icon style="vertical-align:-2px;"><IconStar /></el-icon> 热门选题 TOP10</h3>
|
|
<div v-if="dashboard.top_topics && dashboard.top_topics.length > 0">
|
|
<div class="metrics-table">
|
|
<el-table :data="dashboard.top_topics" stripe size="small">
|
|
<el-table-column prop="topic_id" label="ID" width="80"></el-table-column>
|
|
<el-table-column prop="title" label="标题"></el-table-column>
|
|
<el-table-column prop="total_views" label="阅读" width="100">
|
|
<template #default="scope">{{ scope.row.total_views || 0 }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_likes" label="点赞" width="100">
|
|
<template #default="scope">{{ scope.row.total_likes || 0 }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="metrics-card-list">
|
|
<div v-for="item in dashboard.top_topics" :key="item.topic_id" class="metrics-card">
|
|
<div class="metrics-card-title">{{ item.topic_id }}. {{ item.title }}</div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">阅读</span><span class="metrics-card-value">{{ item.total_views || 0 }}</span></div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">点赞</span><span class="metrics-card-value">{{ item.total_likes || 0 }}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state"><el-icon style="font-size:48px;color:#c0c4cc;"><IconDashboard /></el-icon><div class="empty-text">暂无热门选题数据</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="font-size: 18px; margin-bottom: 16px;"><el-icon style="vertical-align:-2px;"><IconDashboard /></el-icon> 数据趋势</h3>
|
|
<div style="display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;">
|
|
<el-button-group>
|
|
<el-button :type="trendDays === 7 ? 'primary' : ''" @click="trendDays = 7; fetchTrend()">7天</el-button>
|
|
<el-button :type="trendDays === 30 ? 'primary' : ''" @click="trendDays = 30; fetchTrend()">30天</el-button>
|
|
<el-button :type="trendDays === 90 ? 'primary' : ''" @click="trendDays = 90; fetchTrend()">90天</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas ref="trendChartCanvas" style="width:100%;height:280px;"></canvas>
|
|
</div>
|
|
<div v-if="trendData.length === 0" style="text-align: center; color: #909399; padding: 20px;">暂无数据</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="font-size: 18px; margin-bottom: 16px;"><el-icon style="vertical-align:-2px;"><IconStar /></el-icon> 平台对比</h3>
|
|
<div v-if="platformData && platformData.length > 0">
|
|
<div style="display:flex;flex-wrap:wrap;gap:20px;margin-bottom:16px;">
|
|
<div style="flex:1;min-width:250px;height:200px;">
|
|
<canvas ref="platformChartCanvas" style="width:100%;height:100%;"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="metrics-table">
|
|
<el-table :data="platformData" stripe size="small">
|
|
<el-table-column prop="platform" label="平台" width="120">
|
|
<template #default="scope">{{ getPlatformName(scope.row.platform) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="count" label="文章数" width="100"></el-table-column>
|
|
<el-table-column prop="total_views" label="总阅读" width="120"></el-table-column>
|
|
<el-table-column prop="avg_views" label="平均阅读" width="120">
|
|
<template #default="scope">{{ Math.round(scope.row.avg_views || 0) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_likes" label="总点赞" width="120"></el-table-column>
|
|
<el-table-column prop="avg_likes" label="平均点赞" width="120">
|
|
<template #default="scope">{{ Math.round(scope.row.avg_likes || 0) }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="metrics-card-list">
|
|
<div v-for="item in platformData" :key="item.platform" class="metrics-card">
|
|
<div class="metrics-card-title">{{ getPlatformName(item.platform) }}</div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">文章数</span><span class="metrics-card-value">{{ item.count }}</span></div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">总阅读</span><span class="metrics-card-value">{{ item.total_views }}</span></div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">平均阅读</span><span class="metrics-card-value">{{ Math.round(item.avg_views || 0) }}</span></div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">总点赞</span><span class="metrics-card-value">{{ item.total_likes }}</span></div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">平均点赞</span><span class="metrics-card-value">{{ Math.round(item.avg_likes || 0) }}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state"><el-icon style="font-size:48px;color:#c0c4cc;"><IconGlobe /></el-icon><div class="empty-text">暂无平台对比数据</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="font-size: 18px; margin-bottom: 16px;"><el-icon style="vertical-align:-2px;"><IconInfo /></el-icon> 选题推荐</h3>
|
|
<div v-if="recommendations && recommendations.length > 0">
|
|
<div class="metrics-table">
|
|
<el-table :data="recommendations" stripe size="small">
|
|
<el-table-column prop="topic_id" label="ID" width="80"></el-table-column>
|
|
<el-table-column prop="title" label="推荐选题"></el-table-column>
|
|
<el-table-column prop="field" label="领域" width="120"></el-table-column>
|
|
<el-table-column prop="avg_engagement" label="互动率" width="100">
|
|
<template #default="scope">{{ scope.row.avg_engagement }}%</template>
|
|
</el-table-column>
|
|
<el-table-column prop="max_views" label="最高阅读" width="120"></el-table-column>
|
|
<el-table-column prop="reason" label="推荐理由"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="metrics-card-list">
|
|
<div v-for="item in recommendations" :key="item.topic_id" class="metrics-card">
|
|
<div class="metrics-card-title">{{ item.topic_id }}. {{ item.title }}</div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">领域</span><span class="metrics-card-value">{{ item.field }}</span></div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">互动率</span><span class="metrics-card-value">{{ item.avg_engagement }}%</span></div>
|
|
<div class="metrics-card-row"><span class="metrics-card-label">最高阅读</span><span class="metrics-card-value">{{ item.max_views }}</span></div>
|
|
<div class="metrics-card-reason">{{ item.reason }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state"><el-icon style="font-size:48px;color:#c0c4cc;"><IconInfo /></el-icon><div class="empty-text">暂无选题推荐</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'entry'" class="page-fade">
|
|
<h2 style="font-size: 24px; font-weight: 700; margin-bottom: 24px; color: #303133;"><el-icon style="vertical-align:-2px;"><IconEdit /></el-icon> 数据录入</h2>
|
|
|
|
<div class="card" style="margin-bottom:20px;">
|
|
<h3 style="font-size:16px;margin-bottom:16px;">手动录入</h3>
|
|
<el-form :model="entryForm" label-width="100px" size="small">
|
|
<el-form-item label="选题">
|
|
<el-select v-model="entryForm.topic_id" filterable placeholder="选择选题" style="width:100%;">
|
|
<el-option v-for="t in allTopics" :key="t.id" :label="t.id + ' - ' + t.title" :value="t.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="平台">
|
|
<el-select v-model="entryForm.platform" placeholder="选择平台" style="width:200px;">
|
|
<el-option label="知乎" value="zhihu"></el-option>
|
|
<el-option label="微信公众号" value="wechat"></el-option>
|
|
<el-option label="小红书" value="xiaohongshu"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="发布链接">
|
|
<el-input v-model="entryForm.publish_url" placeholder="https://..."></el-input>
|
|
</el-form-item>
|
|
<el-row :gutter="12">
|
|
<el-col :span="6"><el-form-item label="阅读"><el-input-number v-model="entryForm.views" :min="0" style="width:100%;"></el-input-number></el-form-item></el-col>
|
|
<el-col :span="6"><el-form-item label="点赞"><el-input-number v-model="entryForm.likes" :min="0" style="width:100%;"></el-input-number></el-form-item></el-col>
|
|
<el-col :span="6"><el-form-item label="收藏"><el-input-number v-model="entryForm.favorites" :min="0" style="width:100%;"></el-input-number></el-form-item></el-col>
|
|
<el-col :span="6"><el-form-item label="评论"><el-input-number v-model="entryForm.comments" :min="0" style="width:100%;"></el-input-number></el-form-item></el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="6"><el-form-item label="分享"><el-input-number v-model="entryForm.shares" :min="0" style="width:100%;"></el-input-number></el-form-item></el-col>
|
|
</el-row>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitEntry" :loading="submitting">保存</el-button>
|
|
<el-button @click="resetEntryForm">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="card" style="margin-bottom:20px;">
|
|
<h3 style="font-size:16px;margin-bottom:16px;">从知乎自动获取</h3>
|
|
<el-form :model="zhihuForm" label-width="100px" size="small" @submit.prevent="fetchZhihu">
|
|
<el-form-item label="选题">
|
|
<el-select v-model="zhihuForm.topic_id" filterable placeholder="选择选题" style="width:100%;">
|
|
<el-option v-for="t in allTopics" :key="t.id" :label="t.id + ' - ' + t.title" :value="t.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="知乎链接">
|
|
<el-input v-model="zhihuForm.zhihu_url" placeholder="https://zhuanlan.zhihu.com/p/xxxxxx"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="fetchZhihu" :loading="zhihuLoading">获取数据</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="toolbar" style="margin-bottom:12px;">
|
|
<span style="font-size:15px;font-weight:600;">已有数据</span>
|
|
<span style="font-size:13px;color:#909399;margin-left:8px;">共 {{ allEntries.length }} 条</span>
|
|
<el-button size="small" style="margin-left:12px;" @click="fetchEntries">刷新</el-button>
|
|
</div>
|
|
<div v-if="entriesLoading" style="text-align:center;padding:20px;color:#909399;">加载中...</div>
|
|
<template v-else-if="allEntries.length === 0">
|
|
<div class="empty-state" style="padding:30px 0;">
|
|
<el-icon style="font-size:48px;color:#c0c4cc;"><IconDashboard /></el-icon>
|
|
<div class="empty-text">暂无数据，请先录入</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="metrics-table">
|
|
<el-table :data="allEntries" stripe size="small" style="width:100%;">
|
|
<el-table-column prop="topic_id" label="选题ID" width="80"></el-table-column>
|
|
<el-table-column label="平台" width="100">
|
|
<template #default="scope">{{ getPlatformName(scope.row.platform) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="views" label="阅读" width="70"></el-table-column>
|
|
<el-table-column prop="likes" label="点赞" width="70"></el-table-column>
|
|
<el-table-column prop="favorites" label="收藏" width="70"></el-table-column>
|
|
<el-table-column prop="comments" label="评论" width="70"></el-table-column>
|
|
<el-table-column prop="shares" label="分享" width="70"></el-table-column>
|
|
<el-table-column label="互动率" width="80">
|
|
<template #default="scope">{{ scope.row.engagement_rate || 0 }}%</template>
|
|
</el-table-column>
|
|
<el-table-column label="获取时间" width="150">
|
|
<template #default="scope">{{ formatDate(scope.row.last_fetched) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="100" fixed="right">
|
|
<template #default="scope">
|
|
<el-button size="small" @click="editEntry(scope.row)">编辑</el-button>
|
|
<el-button size="small" type="danger" @click="deleteEntry(scope.row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="vue.global.prod.js"></script>
|
|
<script src="icon-components.js"></script>
|
|
<script src="element-plus.full.js"></script>
|
|
<script>
|
|
const MetricsApp = {
|
|
data() {
|
|
return {
|
|
currentUser: { username: '' },
|
|
isAdmin: false,
|
|
isLoggedIn: false,
|
|
activeTab: 'dashboard',
|
|
loadingDashboard: false,
|
|
dashboard: { total_topics: 0, topics_by_status: {}, total_published: 0, total_views: 0, total_likes: 0, avg_engagement_rate: 0, top_topics: [], recent_metrics: [] },
|
|
trendDays: 30,
|
|
trendData: [],
|
|
maxViews: 1,
|
|
platformData: [],
|
|
recommendations: [],
|
|
chartInstances: {},
|
|
allTopics: [],
|
|
allEntries: [],
|
|
entriesLoading: false,
|
|
submitting: false,
|
|
zhihuLoading: false,
|
|
entryForm: { topic_id: '', platform: 'zhihu', publish_url: '', views: 0, likes: 0, favorites: 0, comments: 0, shares: 0 },
|
|
zhihuForm: { topic_id: '', zhihu_url: '' },
|
|
editingEntryId: null,
|
|
}
|
|
},
|
|
methods: {
|
|
statusColors(status) {
|
|
return { pending: '#909399', review: '#409eff', ready: '#e6a23c', published: '#67c23a' }[status] || '#909399';
|
|
},
|
|
destroyCharts() {
|
|
Object.values(this.chartInstances).forEach(c => { if (c) c.destroy(); });
|
|
this.chartInstances = {};
|
|
},
|
|
renderCharts() {
|
|
this.$nextTick(() => {
|
|
this.renderTrendChart();
|
|
this.renderStatusChart();
|
|
this.renderPlatformChart();
|
|
});
|
|
},
|
|
renderTrendChart() {
|
|
const canvas = this.$refs.trendChartCanvas;
|
|
if (!canvas) return;
|
|
if (this.chartInstances.trend) this.chartInstances.trend.destroy();
|
|
const data = this.trendData || [];
|
|
if (data.length === 0) return;
|
|
const ctx = canvas.getContext('2d');
|
|
this.chartInstances.trend = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.map(d => d.period),
|
|
datasets: [{
|
|
label: '阅读量',
|
|
data: data.map(d => d.views || 0),
|
|
borderColor: '#409eff',
|
|
backgroundColor: 'rgba(64,158,255,0.1)',
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6,
|
|
}, {
|
|
label: '点赞',
|
|
data: data.map(d => d.likes || 0),
|
|
borderColor: '#67c23a',
|
|
backgroundColor: 'rgba(103,194,58,0.1)',
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { position: 'top' } },
|
|
scales: { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { grid: { display: false } } }
|
|
}
|
|
});
|
|
},
|
|
renderPlatformChart() {
|
|
const canvas = this.$refs.platformChartCanvas;
|
|
if (!canvas) return;
|
|
if (this.chartInstances.platform) this.chartInstances.platform.destroy();
|
|
const data = this.platformData || [];
|
|
if (data.length === 0) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const names = data.map(d => this.getPlatformName(d.platform));
|
|
this.chartInstances.platform = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: names,
|
|
datasets: [
|
|
{ label: '总阅读', data: data.map(d => d.total_views || 0), backgroundColor: 'rgba(64,158,255,0.7)', borderRadius: 4 },
|
|
{ label: '平均阅读', data: data.map(d => Math.round(d.avg_views || 0)), backgroundColor: 'rgba(103,194,58,0.7)', borderRadius: 4 },
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { position: 'top' } },
|
|
scales: { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { grid: { display: false } } }
|
|
}
|
|
});
|
|
},
|
|
renderStatusChart() {
|
|
const canvas = this.$refs.statusChartCanvas;
|
|
if (!canvas) return;
|
|
if (this.chartInstances.status) this.chartInstances.status.destroy();
|
|
const byStatus = this.dashboard.topics_by_status || {};
|
|
const labels = [], data = [], colors = [];
|
|
for (const [status, count] of Object.entries(byStatus)) {
|
|
if (count > 0) { labels.push(this.getStatusLabel(status)); data.push(count); colors.push(this.statusColors(status)); }
|
|
}
|
|
if (data.length === 0) return;
|
|
const ctx = canvas.getContext('2d');
|
|
this.chartInstances.status = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: { labels, datasets: [{ data, backgroundColor: colors, borderWidth: 2, borderColor: '#fff' }] },
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
cutout: '60%'
|
|
}
|
|
});
|
|
},
|
|
handleLogout() { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; },
|
|
redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; },
|
|
checkAuth() {
|
|
const token = localStorage.getItem('authToken');
|
|
if (!token) { window.location.href = '/login.html'; return; }
|
|
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
|
.then(r => r.ok ? r.json() : Promise.reject())
|
|
.then(data => {
|
|
this.currentUser = data.user;
|
|
this.isAdmin = data.user.role === 'admin';
|
|
this.isLoggedIn = true;
|
|
this.fetchDashboard();
|
|
this.fetchTrend();
|
|
this.fetchPlatformData();
|
|
this.fetchRecommendations();
|
|
})
|
|
.catch(() => { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; });
|
|
},
|
|
getStatusLabel(status) {
|
|
const map = { 'pending': '待处理', 'review': '待审查', 'ready': '待发布', 'published': '已发布' };
|
|
return map[status] || status;
|
|
},
|
|
getPlatformName(platform) {
|
|
const map = { 'zhihu': '知乎', 'wechat': '微信公众号', 'xiaohongshu': '小红书' };
|
|
return map[platform] || platform;
|
|
},
|
|
async fetchDashboard() {
|
|
this.loadingDashboard = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/metrics/dashboard?days=' + this.trendDays, { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (res.ok) this.dashboard = await res.json();
|
|
else { const d = await res.json().catch(() => ({})); throw new Error(d.detail || '加载失败'); }
|
|
} catch (e) { console.error(e); this.$message.error('加载概览失败: ' + e.message); }
|
|
finally { this.loadingDashboard = false; this.renderCharts(); }
|
|
},
|
|
async fetchTrend() {
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/metrics/trend?days=' + this.trendDays, { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (res.ok) {
|
|
this.trendData = await res.json();
|
|
} else { const d = await res.json().catch(() => ({})); throw new Error(d.detail || '加载失败'); }
|
|
} catch (e) { console.error(e); this.$message.error('加载趋势失败: ' + e.message); }
|
|
this.renderCharts();
|
|
},
|
|
async fetchPlatformData() {
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/metrics/by-platform', { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (res.ok) this.platformData = await res.json();
|
|
else { const d = await res.json().catch(() => ({})); throw new Error(d.detail || '加载失败'); }
|
|
} catch (e) { console.error(e); this.$message.error('加载平台数据失败: ' + e.message); }
|
|
},
|
|
async fetchRecommendations() {
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/metrics/recommend-topics?limit=10', { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (res.ok) this.recommendations = await res.json();
|
|
else { const d = await res.json().catch(() => ({})); throw new Error(d.detail || '加载失败'); }
|
|
} catch (e) { console.error(e); this.$message.error('加载推荐失败: ' + e.message); }
|
|
},
|
|
async fetchAllTopics() {
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/topics?limit=200', { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (res.ok) { const data = await res.json(); this.allTopics = data.topics || data || []; }
|
|
} catch (e) { console.error(e); }
|
|
},
|
|
async fetchEntries() {
|
|
this.entriesLoading = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/metrics/entries?limit=200', { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (res.ok) this.allEntries = await res.json();
|
|
} catch (e) { console.error(e); this.$message.error('加载数据失败'); }
|
|
finally { this.entriesLoading = false; }
|
|
},
|
|
resetEntryForm() {
|
|
this.entryForm = { topic_id: '', platform: 'zhihu', publish_url: '', views: 0, likes: 0, favorites: 0, comments: 0, shares: 0 };
|
|
this.editingEntryId = null;
|
|
},
|
|
editEntry(row) {
|
|
this.entryForm = { topic_id: row.topic_id, platform: row.platform, publish_url: row.publish_url || '', views: row.views || 0, likes: row.likes || 0, favorites: row.favorites || 0, comments: row.comments || 0, shares: row.shares || 0 };
|
|
this.editingEntryId = row.id;
|
|
this.$message.info('请修改后保存');
|
|
},
|
|
async submitEntry() {
|
|
if (!this.entryForm.topic_id || !this.entryForm.platform) { this.$message.warning('请选择选题和平台'); return; }
|
|
this.submitting = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const body = { topic_id: this.entryForm.topic_id, platform: this.entryForm.platform, publish_url: this.entryForm.publish_url, views: this.entryForm.views, likes: this.entryForm.likes, favorites: this.entryForm.favorites, comments: this.entryForm.comments, shares: this.entryForm.shares };
|
|
if (this.editingEntryId) {
|
|
const res = await fetch('/api/metrics/entries/' + this.editingEntryId, { method: 'PUT', headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
|
|
if (!res.ok) throw new Error('更新失败');
|
|
this.$message.success('已更新');
|
|
} else {
|
|
const res = await fetch('/api/metrics/entries', { method: 'POST', headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
|
|
if (!res.ok) throw new Error('保存失败');
|
|
this.$message.success('已保存');
|
|
}
|
|
this.resetEntryForm();
|
|
this.fetchEntries();
|
|
} catch (e) { console.error(e); this.$message.error(e.message); }
|
|
finally { this.submitting = false; }
|
|
},
|
|
async deleteEntry(id) {
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/metrics/entries/' + id, { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (!res.ok) throw new Error('删除失败');
|
|
this.$message.success('已删除');
|
|
this.fetchEntries();
|
|
} catch (e) { console.error(e); this.$message.error(e.message); }
|
|
},
|
|
async fetchZhihu() {
|
|
if (!this.zhihuForm.topic_id || !this.zhihuForm.zhihu_url) { this.$message.warning('请选择选题并填写知乎链接'); return; }
|
|
this.zhihuLoading = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/metrics/zhihu-fetch', { method: 'POST', headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' }, body: JSON.stringify(this.zhihuForm) });
|
|
if (!res.ok) { const d = await res.json().catch(() => ({ detail: '请求失败' })); throw new Error(d.detail); }
|
|
const result = await res.json();
|
|
this.$message.success('已从知乎获取数据');
|
|
this.fetchEntries();
|
|
if (result.data) {
|
|
this.entryForm.topic_id = result.data.topic_id;
|
|
this.entryForm.platform = result.data.platform;
|
|
this.entryForm.publish_url = result.data.publish_url || '';
|
|
this.entryForm.views = result.data.views || 0;
|
|
this.entryForm.likes = result.data.likes || 0;
|
|
this.entryForm.favorites = result.data.favorites || 0;
|
|
this.entryForm.comments = result.data.comments || 0;
|
|
this.entryForm.shares = result.data.shares || 0;
|
|
}
|
|
} catch (e) { console.error(e); this.$message.error(e.message); }
|
|
finally { this.zhihuLoading = false; }
|
|
},
|
|
formatDate(dt) {
|
|
if (!dt) return '-';
|
|
try { return new Date(dt).toLocaleString('zh-CN'); } catch { return dt; }
|
|
},
|
|
switchToEntry() {
|
|
this.fetchAllTopics();
|
|
this.fetchEntries();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.checkAuth();
|
|
},
|
|
beforeUnmount() {
|
|
this.destroyCharts();
|
|
}
|
|
};
|
|
const app = Vue.createApp(MetricsApp);
|
|
app.use(ElementPlus);
|
|
if (window.installIcons) { window.installIcons(app); }
|
|
if (window.installUniNav) { window.installUniNav(app); }
|
|
app.mount('#app');
|
|
</script>
|
|
<script src="ai-assistant.js"></script>
|
|
</body>
|
|
</html>
|