Yuzhiran Dev
41b0f694ee
- PlatformConfig模型新增requires_image、image_count_min/max、image_width/height、min_words/max_words - schemas.py同步PlatformConfigBase/Create/Update/Response新字段 - initial_data.py为三大平台填充初始值（微信需配图、字数800-1500等） - database.py添加新列ALTER TABLE迁移 - platforms.html重写编辑弹窗（正确字段名+配图/字数设置） - writer.py微信公众号文章正文h1后插入<img>占位 - compliance_checker.py接受platform_config参数，从DB读取规则替代硬编码 - compliance_optimizer.py启动时加载DB平台配置传入checker
251 lines
15 KiB
HTML
251 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">
|
|
<link rel="stylesheet" href="theme-modern.css">
|
|
<style>
|
|
.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; }
|
|
|
|
@media (max-width: 768px) {
|
|
.toolbar { width: 100%; }
|
|
.toolbar .el-button { flex: 1; justify-content: center; }
|
|
.platform-card { padding: 16px; }
|
|
.platform-header { flex-direction: column; }
|
|
.platform-actions { align-self: flex-end; width: 100%; display: flex; justify-content: flex-end; }
|
|
.platform-meta { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
<script src="uni-nav.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<uni-nav title="平台配置" :username="currentUser.username" :is-admin="isAdmin" current-page="platforms" @navigate="redirectToPage" @logout="handleLogout">
|
|
</uni-nav>
|
|
<div class="main-content">
|
|
<main class="content-area">
|
|
<div class="page-header">
|
|
<h2 class="page-title"><el-icon style="vertical-align:-2px;"><IconGlobe /></el-icon> 平台配置</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-icon style="vertical-align:-2px;"><IconRefresh /></el-icon> 刷新</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="card page-fade">
|
|
<div v-if="loading" class="loading-state">加载中...</div>
|
|
<div v-else-if="platforms.length === 0" class="empty-state">
|
|
<el-icon style="font-size:48px;color:#c0c4cc;"><IconGlobe /></el-icon>
|
|
<div class="empty-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">
|
|
<el-icon><component :is="getPlatformIcon(p.platform)" /></el-icon>
|
|
{{ 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 class="platform-meta-item">
|
|
<span class="platform-meta-label">平台名称</span>
|
|
<span class="platform-meta-value">{{ p.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 class="platform-meta-item">
|
|
<span class="platform-meta-label">需要配图</span>
|
|
<span class="platform-meta-value">{{ p.requires_image ? '是' : '否' }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="p.format_template && Object.keys(p.format_template).length > 0" class="rules-section">
|
|
<div class="rules-title"><el-icon style="vertical-align:-2px;"><IconTopic /></el-icon> 格式模板</div>
|
|
<div v-for="(rule, key) in p.format_template" :key="key" class="rule-item">
|
|
<strong>{{ key }}:</strong> {{ typeof rule === 'object' ? JSON.stringify(rule) : rule }}
|
|
</div>
|
|
</div>
|
|
<div v-if="p.compliance_rules && Object.keys(p.compliance_rules).length > 0" class="rules-section">
|
|
<div class="rules-title"><el-icon style="vertical-align:-2px;"><IconWarning /></el-icon> 合规规则</div>
|
|
<div v-for="(val, key) in p.compliance_rules" :key="key" class="rule-item">
|
|
<strong>{{ key }}:</strong> {{ typeof val === 'object' ? JSON.stringify(val) : val }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<el-dialog v-model="showEditDialog" :title="isEditing ? '编辑平台' : '新增平台'" width="650px">
|
|
<el-form :model="platformForm" label-width="120px">
|
|
<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.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.default_format" type="textarea" :rows="2" placeholder="如: 公众号图文，800-1500字，亲切口语化"></el-input>
|
|
</el-form-item>
|
|
<el-divider content-position="left">字数与配图</el-divider>
|
|
<el-form-item label="最少字数">
|
|
<el-input-number v-model="platformForm.min_words" :min="0" :max="100000"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="最多字数">
|
|
<el-input-number v-model="platformForm.max_words" :min="0" :max="100000"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="需要配图">
|
|
<el-switch v-model="platformForm.requires_image"></el-switch>
|
|
</el-form-item>
|
|
<template v-if="platformForm.requires_image">
|
|
<el-form-item label="最少图片数">
|
|
<el-input-number v-model="platformForm.image_count_min" :min="0" :max="20"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="最多图片数">
|
|
<el-input-number v-model="platformForm.image_count_max" :min="0" :max="20"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="图片宽度(px)">
|
|
<el-input-number v-model="platformForm.image_width" :min="0" :max="4096" :step="1"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="图片高度(px)">
|
|
<el-input-number v-model="platformForm.image_height" :min="0" :max="4096" :step="1"></el-input-number>
|
|
</el-form-item>
|
|
</template>
|
|
</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="icon-components.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: '', name: '', is_active: true, default_format: '', requires_image: false, image_count_min: 0, image_count_max: 0, image_width: 0, image_height: 0, min_words: 0, max_words: 0 }
|
|
}
|
|
},
|
|
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': 'IconTopic', 'wechat': 'IconDocument', 'xiaohongshu': 'IconPicture', 'weibo': 'IconGlobe' };
|
|
return map[platform] || 'IconGlobe';
|
|
},
|
|
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();
|
|
else { const d = await res.json(); throw new Error(d.detail || '加载失败'); }
|
|
} catch (e) { console.error(e); this.$message.error('加载平台配置失败: ' + e.message); }
|
|
finally { this.loading = false; }
|
|
},
|
|
editPlatform(p) {
|
|
this.isEditing = true;
|
|
this.platformForm = {
|
|
platform: p.platform,
|
|
name: p.name || '',
|
|
is_active: p.is_active,
|
|
default_format: p.default_format || '',
|
|
requires_image: p.requires_image || false,
|
|
image_count_min: p.image_count_min || 0,
|
|
image_count_max: p.image_count_max || 0,
|
|
image_width: p.image_width || 0,
|
|
image_height: p.image_height || 0,
|
|
min_words: p.min_words || 0,
|
|
max_words: p.max_words || 0
|
|
};
|
|
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.installIcons) { window.installIcons(app); }
|
|
if (window.installUniNav) { window.installUniNav(app); }
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|