lt
71cb4c35a8
- 删除 Docker 相关文件 (docker-compose, Dockerfile, nginx.conf, init.sql 等) - 优化 platforms.html 卡片布局和响应式样式 - 优化 users.html 格式和移动端卡片设计 - 优化 admin.html 页面结构和表格布局 - 修复各页面 min-height 和溢出问题 - 更新导航组件样式
249 lines
15 KiB
HTML
249 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>宇之然内容创作平台 - 平台配置</title>
|
|
<link rel="stylesheet" href="element-plus.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f7fa; color: #303133; }
|
|
.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; min-height: calc(100vh - 60px); }
|
|
.sidebar { width: 180px; background: white; padding: 12px; box-shadow: 2px 0 8px rgba(0,0,0,0.05); }
|
|
.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); overflow-x: auto; }
|
|
.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; }
|
|
|
|
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
|
|
.page-title { font-size: 24px; font-weight: 700; color: #303133; display: flex; align-items: center; gap: 8px; }
|
|
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
|
|
.platform-card { border: 1px solid #ebeef5; border-radius: 12px; padding: 20px; margin-bottom: 16px; transition: all 0.3s ease; word-break: break-word; background: #fff; }
|
|
.platform-card:hover { border-color: #409eff; box-shadow: 0 4px 20px rgba(64,158,255,0.12); transform: translateY(-1px); }
|
|
.platform-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; }
|
|
.platform-name { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
|
|
.platform-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
|
|
.platform-badge { padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; }
|
|
.badge-active { background: #f0f9eb; color: #67c23a; }
|
|
.badge-inactive { background: #f4f4f5; color: #909399; }
|
|
.platform-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; color: #606266; margin-bottom: 16px; background: #fafbfc; border-radius: 8px; padding: 12px 16px; }
|
|
.platform-meta-item { display: flex; align-items: center; gap: 6px; }
|
|
.platform-meta-label { color: #909399; }
|
|
.platform-meta-value { color: #303133; font-weight: 500; }
|
|
|
|
.rules-section { margin-top: 12px; }
|
|
.rules-title { font-weight: 600; margin-bottom: 10px; color: #606266; font-size: 14px; display: flex; align-items: center; gap: 6px; }
|
|
.rule-item { padding: 10px 14px; background: #f5f7fa; border-radius: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.6; border-left: 3px solid #409eff; }
|
|
.rule-item strong { color: #303133; }
|
|
.rule-item:last-child { margin-bottom: 0; }
|
|
|
|
.empty-state { text-align: center; padding: 60px 20px; color: #909399; }
|
|
.empty-state-icon { font-size: 56px; margin-bottom: 16px; }
|
|
.empty-state-text { font-size: 16px; }
|
|
|
|
.loading-state { text-align: center; padding: 60px 20px; color: #909399; font-size: 16px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar { display: none; }
|
|
.mobile-nav { display: flex; }
|
|
.content-area { padding: 16px; padding-bottom: 80px; }
|
|
.card { padding: 16px; }
|
|
.platform-card { padding: 16px; }
|
|
.platform-header { flex-direction: column; }
|
|
.platform-actions { align-self: flex-end; }
|
|
.platform-meta { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
<script src="navigation-component.js"></script>
|
|
<script src="navbar-component.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<navbar-component title="平台配置" :username="currentUser.username" :is-admin="isAdmin" @logout="handleLogout"></navbar-component>
|
|
<navigation-component current-page="platforms" :is-admin="isAdmin" @navigate="redirectToPage"></navigation-component>
|
|
<div class="main-content">
|
|
<main class="content-area">
|
|
<div class="page-header">
|
|
<h2 class="page-title">🌐 平台配置</h2>
|
|
<div class="toolbar">
|
|
<el-button-group>
|
|
<el-button :type="showActiveOnly ? 'primary' : ''" @click="showActiveOnly = true; loadPlatforms()">启用中</el-button>
|
|
<el-button :type="!showActiveOnly ? 'primary' : ''" @click="showActiveOnly = false; loadPlatforms()">全部</el-button>
|
|
</el-button-group>
|
|
<el-button @click="loadPlatforms">🔄 刷新</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div v-if="loading" class="loading-state">加载中...</div>
|
|
<div v-else-if="platforms.length === 0" class="empty-state">
|
|
<div class="empty-state-icon">🌐</div>
|
|
<div class="empty-state-text">暂无平台配置</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-for="p in platforms" :key="p.platform" class="platform-card">
|
|
<div class="platform-header">
|
|
<div class="platform-name">
|
|
<span>{{ getPlatformIcon(p.platform) }}</span>
|
|
{{ getPlatformName(p.platform) }}
|
|
</div>
|
|
<div class="platform-actions">
|
|
<span class="platform-badge" :class="p.is_active ? 'badge-active' : 'badge-inactive'">
|
|
{{ p.is_active ? '✓ 启用' : '○ 停用' }}
|
|
</span>
|
|
<el-button size="small" type="primary" @click="editPlatform(p)">编辑</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="platform-meta">
|
|
<div class="platform-meta-item">
|
|
<span class="platform-meta-label">平台标识</span>
|
|
<span class="platform-meta-value">{{ p.platform }}</span>
|
|
</div>
|
|
<div v-if="p.platform_name" class="platform-meta-item">
|
|
<span class="platform-meta-label">平台名称</span>
|
|
<span class="platform-meta-value">{{ p.platform_name }}</span>
|
|
</div>
|
|
<div v-if="p.min_words || p.max_words" class="platform-meta-item">
|
|
<span class="platform-meta-label">字数限制</span>
|
|
<span class="platform-meta-value">{{ p.min_words || 0 }} - {{ p.max_words || '不限' }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="p.format_rules && Object.keys(p.format_rules).length > 0" class="rules-section">
|
|
<div class="rules-title">📋 格式规则</div>
|
|
<div v-for="(rule, key) in p.format_rules" :key="key" class="rule-item">
|
|
<strong>{{ key }}:</strong> {{ typeof rule === 'object' ? JSON.stringify(rule) : rule }}
|
|
</div>
|
|
</div>
|
|
<div v-if="p.compliance_rules && p.compliance_rules.length > 0" class="rules-section">
|
|
<div class="rules-title">⚖️ 合规规则</div>
|
|
<div v-for="(rule, idx) in p.compliance_rules" :key="idx" class="rule-item">{{ rule }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<el-dialog v-model="showEditDialog" :title="isEditing ? '编辑平台' : '新增平台'" width="600px">
|
|
<el-form :model="platformForm" label-width="100px">
|
|
<el-form-item label="平台标识" :required="!isEditing">
|
|
<el-input v-model="platformForm.platform" :disabled="isEditing" placeholder="如: zhihu, wechat, xiaohongshu"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="平台名称">
|
|
<el-input v-model="platformForm.platform_name" placeholder="如: 知乎"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="启用状态">
|
|
<el-switch v-model="platformForm.is_active"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="标题模板">
|
|
<el-input v-model="platformForm.title_template" placeholder="如: 【{{tag}}】{{title}}"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="正文模板">
|
|
<el-input v-model="platformForm.body_template" type="textarea" :rows="4" placeholder="如: {{content}}"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="字数限制">
|
|
<el-input-number v-model="platformForm.min_words" :min="0" placeholder="最少"></el-input-number>
|
|
<span style="margin: 0 8px;">-</span>
|
|
<el-input-number v-model="platformForm.max_words" :min="0" placeholder="最多"></el-input-number>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="showEditDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="savePlatform" :loading="saving">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
<script src="vue.global.prod.js"></script>
|
|
<script src="element-plus.full.js"></script>
|
|
<script>
|
|
const PlatformsApp = {
|
|
data() {
|
|
return {
|
|
currentUser: { username: '' },
|
|
isAdmin: false,
|
|
isLoggedIn: false,
|
|
platforms: [],
|
|
loading: false,
|
|
showActiveOnly: true,
|
|
showEditDialog: false,
|
|
isEditing: false,
|
|
saving: false,
|
|
platformForm: { platform: '', platform_name: '', is_active: true, title_template: '', body_template: '', min_words: null, max_words: null }
|
|
}
|
|
},
|
|
methods: {
|
|
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.loadPlatforms();
|
|
})
|
|
.catch(() => { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; });
|
|
},
|
|
getPlatformIcon(platform) {
|
|
const map = { 'zhihu': '💬', 'wechat': '💌', 'xiaohongshu': '📕', 'weibo': '🌐' };
|
|
return map[platform] || '🌐';
|
|
},
|
|
getPlatformName(platform) {
|
|
const map = { 'zhihu': '知乎', 'wechat': '微信公众号', 'xiaohongshu': '小红书', 'weibo': '微博' };
|
|
return map[platform] || platform;
|
|
},
|
|
async loadPlatforms() {
|
|
this.loading = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const res = await fetch('/api/platform-config?active_only=' + this.showActiveOnly, { headers: { 'Authorization': 'Bearer ' + token } });
|
|
if (res.ok) this.platforms = await res.json();
|
|
} catch (e) { console.error(e); }
|
|
finally { this.loading = false; }
|
|
},
|
|
editPlatform(p) {
|
|
this.isEditing = true;
|
|
this.platformForm = {
|
|
platform: p.platform,
|
|
platform_name: p.platform_name || '',
|
|
is_active: p.is_active,
|
|
title_template: p.title_template || '',
|
|
body_template: p.body_template || '',
|
|
min_words: p.min_words,
|
|
max_words: p.max_words
|
|
};
|
|
this.showEditDialog = true;
|
|
},
|
|
async savePlatform() {
|
|
this.saving = true;
|
|
try {
|
|
const token = localStorage.getItem('authToken');
|
|
const url = this.isEditing ? '/api/platform-config/' + this.platformForm.platform : '/api/platform-config';
|
|
const method = this.isEditing ? 'PUT' : 'POST';
|
|
const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token }, body: JSON.stringify(this.platformForm) });
|
|
if (res.ok) { this.$message.success('保存成功'); this.showEditDialog = false; this.loadPlatforms(); }
|
|
else { const data = await res.json(); throw new Error(data.detail || '保存失败'); }
|
|
} catch (e) { this.$message.error(e.message); }
|
|
finally { this.saving = false; }
|
|
}
|
|
},
|
|
mounted() {
|
|
this.checkAuth();
|
|
}
|
|
};
|
|
const app = Vue.createApp(PlatformsApp);
|
|
app.use(ElementPlus);
|
|
if (window.installNavbar) { window.installNavbar(app); }
|
|
if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); }
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|