Yuzhiran Dev
9c37c9a574
Phase 4: org_id 注入 JWT/API 过滤/组织管理 CRUD/前端组织列 测试: tests/test_phase_upgrades.py 97项全覆盖 CSS: theme-modern.css 共享 mobile-card-list/status-dot/search-bar 等模式 修复: initial_data.py LLM配置 NOT NULL 约束, TopicResponse 含 org_id
225 lines
13 KiB
HTML
225 lines
13 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 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"><el-icon style="vertical-align:-2px;"><IconTopic /></el-icon> 格式规则</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"><el-icon style="vertical-align:-2px;"><IconWarning /></el-icon> 合规规则</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="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: '', 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': '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,
|
|
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.installIcons) { window.installIcons(app); }
|
|
if (window.installUniNav) { window.installUniNav(app); }
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|