From 62af0774791cd5da15b5b41cbfa7ffd494c1a79c Mon Sep 17 00:00:00 2001 From: lt Date: Mon, 27 Apr 2026 14:39:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E5=B9=B6=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E6=89=80=E6=9C=89=E8=8F=9C=E5=8D=95=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=9A=84=E5=AE=8C=E6=95=B4=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8C=85?= =?UTF-8?q?=E5=90=AB=E7=9C=9F=E5=AE=9E=E6=95=B0=E6=8D=AE=E3=80=81API?= =?UTF-8?q?=E6=A8=A1=E6=8B=9F=E5=92=8C=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- platform/frontend/logs.html | 594 ++++++++++++++++++++++++---------- platform/frontend/topics.html | 594 ++++++++++++++++++++++++---------- platform/frontend/users.html | 594 ++++++++++++++++++++++++---------- 3 files changed, 1281 insertions(+), 501 deletions(-) diff --git a/platform/frontend/logs.html b/platform/frontend/logs.html index 552acfa..fbd5d93 100644 --- a/platform/frontend/logs.html +++ b/platform/frontend/logs.html @@ -24,6 +24,12 @@ aside button:hover { background-color: #f3f4f6; } @media (max-width: 768px) { main { padding-bottom: 70px; } } .nav-title { text-align: center; } + .status-badge { display: inline-flex; align-items: center; gap: 4px; } + .status-dot { width: 6px; height: 6px; border-radius: 50%; } + .status-dot.pending { background: #E6A23C; } + .status-dot.review { background: #F56C6C; } + .status-dot.ready { background: #67C23A; } + .status-dot.published { background: #409EFF; } @@ -50,9 +56,111 @@

📄 系统日志

- -
- + +
+ +
+
+ 🔄 批量刷新 + ▶ 批量创作 + 🔍 批量优化 + 已选 {{ selectedTopicIds.length }} 项 +
+
+ +
+ 全部 ({{ topics.length }}) + 待处理 ({{ countByStatus("待处理") }}) + 待审查 ({{ countByStatus("待审查") }}) + 待发布 ({{ countByStatus("待发布") }}) + 已发布 ({{ countByStatus("已发布") }}) +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+

📄 系统日志

+
+ + + + + + + 加载日志 +
+ 
{{ logContent }}
 + +
+
+ +
+ +
+

👥 用户管理

+
+

用户列表

+ + 新建用户 +
+ + + + + + + + + + + +
@@ -61,7 +169,7 @@
-

{ loadingText }

+

{{ loadingText }}

@@ -69,182 +177,334 @@ const App = { data() { return { + // 基础数据 isLoggedIn: true, - currentUser: { username: 'admin' }, + currentUser: { username: "admin" }, isAdmin: true, - currentPage: 'logs', - loadingOverlay: false, - loadingText: '' - } - }, - methods: { - showLoading(text) { - this.loadingOverlay = true - this.loadingText = text || '加载中...' - }, - hideLoading() { - this.loadingOverlay = false - this.loadingText = '' - } - }, - mounted() { - // 页面加载完成后显示内容 - setTimeout(() => { - this.generateContent() - }, 100) - - // 监听窗口大小变化，重新调整布局 - window.addEventListener('resize', () => { - // 响应式处理 - }) - }, - methods: { - generateContent() { - const contentDiv = document.getElementById('logs-content') - if (!contentDiv) return + currentPage: "' + page_name + '", - switch('logs') { - case 'topics': - this.generateTopicsContent(contentDiv) - break - case 'logs': - this.generateLogsContent(contentDiv) - break - case 'users': - this.generateUsersContent(contentDiv) - break - default: - contentDiv.innerHTML = '

页面内容加载中...

' + // 相关数据 + status: {}, + topics: [], + filterStatus: "", + selectedTopicIds: [], + generating: false, + optimizing: false, + loadingAll: false, + loadingTable: false, + loadingLogs: false, + loadingUsers: false, + loadingOverlay: false, + loadingText: "", + + // 日志相关 + logType: "creator", + logDate: "", + logContent: "", + + // 用户相关 + users: [], + + // 模态框相关 + createTopicModalVisible: false, + newUserForm: {}, + publishModalVisible: false, + publishForm: { + platform: "zhihu", + url: "", + description: "" + }, + publishTopicId: "", + + // 预览相关 + previewVisible: false, + previewTopic: null, + previewPlatform: "", + previewHtml: "", + fullScreenPreview: false + } + }, + computed: { + filteredTopics() { + if (!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 { + // 模拟API调用 + await new Promise(resolve => setTimeout(resolve, 500)) + this.topics = [ + { + id: "A01", + title: "可持续发展趋势分析", + field: "环保", + status: "pending", + compliance_score: 85, + created_at: "2026-04-27 10:30", + generated_at: "-", + published_at: "-", + updated_at: "2026-04-27 10:30", + priority_score: "高" + }, + { + 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: "-", + updated_at: "2026-04-27 11:45", + priority_score: "中" + }, + { + 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", + updated_at: "2026-04-27 13:00", + priority_score: "高" + } + ] + } catch (error) { + console.error("获取选题失败:", error) + } finally { + this.loadingTable = false } }, - generateTopicsContent(container) { - container.innerHTML = ` -
-
- - - - 已选 0 项 -
- -
- 全部 (3) - 待处理 (1) - 待审查 (1) - 待发布 (1) - 已发布 (0) -
-
+ async fetchLogs() { + this.loadingLogs = true + try { + // 模拟日志数据 + const logs = { + creator: `2026-04-27 11:45:23 | 成功生成选题 B02 - AI在内容创作中的应用 +2026-04-27 11:30:15 | 开始生成选题 C03 - 数字化转型案例研究`, + optimizer: `2026-04-27 12:05:30 | 优化完成选题 C03 - 合规分提升至78 +2026-04-27 11:50:45 | 优化中选题 B02 - 等待人工审核`, + collector: `2026-04-27 10:30:12 | 收集到3个新选题 +2026-04-27 09:45:20 | 更新行业热点数据` + }[this.logType] || "暂无日志数据" -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ID标题领域状态操作
A01可持续发展趋势分析环保待处理 - - - -
B02AI在内容创作中的应用科技待审查 - - - -
-
- ` + this.logContent = `日志类型: ${this.logType} +日期: ${this.logDate || "今天"} - // 添加事件监听器 - document.querySelectorAll('.cursor-pointer').forEach(tag => { - tag.addEventListener('click', function() { - document.querySelectorAll('.cursor-pointer').forEach(t => t.classList.remove('active')) - this.classList.add('active') - }) +${logs}` + } catch (error) { + console.error("获取日志失败:", error) + this.$message.error("获取日志失败") + } finally { + this.loadingLogs = false + } + }, + + async fetchUsers() { + this.loadingUsers = true + try { + // 模拟用户数据 + 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" } + ] + } catch (error) { + console.error("获取用户失败:", error) + } finally { + this.loadingUsers = false + } + }, + + // 批量操作方法 + refreshAll() { + this.$message.info("执行批量刷新操作") + }, + + async triggerGenerateSelected() { + if (!this.selectedTopicIds.length) return + this.loadingOverlay = true + this.loadingText = "正在批量创作..." + try { + for (const t of this.selectedTopicIds) { + await this.triggerGenerate(t.id) + } + this.$message.success("批量创作完成") + this.selectedTopicIds = [] + await this.fetchTopics() + } catch (e) { + this.$message.error("批量创作失败：" + e.message) + } finally { + this.loadingOverlay = false + } + }, + + async triggerOptimizeSelected() { + if (!this.selectedTopicIds.length) return + this.loadingOverlay = true + this.loadingText = "正在批量优化..." + try { + const ids = this.selectedTopicIds.map(t => t.id) + await this.triggerOptimize(ids) + this.$message.success("批量优化完成") + this.selectedTopicIds = [] + await this.fetchTopics() + } catch (e) { + this.$message.error("批量优化失败：" + e.message) + } finally { + this.loadingOverlay = false + } + }, + + // 单个操作方法 + openPreview(topic) { + this.previewTopic = topic + this.previewPlatform = "zhihu" + this.previewVisible = true + this.loadingOverlay = true + this.loadingText = "加载中..." + // 模拟预览加载 + setTimeout(() => { + this.previewHtml = "

选题预览内容

这里是选题的详细内容和格式预览...

" + this.loadingOverlay = false + }, 1000) + }, + + copyPreviewHtml() { + this.$message.success("HTML 已复制到剪贴板") + }, + expandPreview() { + this.fullScreenPreview = !this.fullScreenPreview + }, + + async createTopic(topic) { + if (topic && topic.status === "待处理") { + await this.triggerGenerate([topic.id]) + await this.fetchTopics() + } else { + this.$message.info("仅待处理选题可创作") + } + }, + + async optimizeTopic(topic) { + if (topic && topic.status === "待审查") { + await this.triggerOptimize([topic.id]) + await this.fetchTopics() + } else { + this.$message.info("仅待审查选题可优化") + } + }, + + handlePublish(topic) { + this.publishTopicId = topic.id + this.publishModalVisible = true + }, + + confirmPublish() { + this.$message.success("发布成功") + this.publishModalVisible = false + this.fetchTopics() + }, + + deleteTopic(id) { + this.$confirm("确定删除该选题？删除后无法恢复。", "提示", { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning" + }).then(async () => { + try { + await this.deleteTopicApi(id) + this.$message.success("删除成功") + await this.fetchTopics() + } catch (e) { + this.$message.error("删除失败：" + e.message) + } + }).catch(() => {}) + }, + + openCreateUserModal() { + this.createTopicModalVisible = true + }, + + deleteUser(id) { + if (id === "admin") { + this.$message.warning("不能删除管理员用户") + return + } + this.$confirm("确定删除该用户？", "提示", { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning" + }).then(() => { + this.$message.success("删除用户成功") + this.fetchUsers() + }).catch(() => {}) + }, + + // API 模拟方法 + async triggerGenerate(ids) { + await new Promise(resolve => setTimeout(resolve, 1000)) + console.log("生成选题:", ids) + }, + + async triggerOptimize(ids) { + await new Promise(resolve => setTimeout(resolve, 1000)) + console.log("优化选题:", ids) + }, + + async deleteTopicApi(id) { + await new Promise(resolve => setTimeout(resolve, 500)) + console.log("删除选题:", id) + }, + + // 工具方法 + getPriorityType(score) { + const types = { "高": "danger", "中": "warning", "低": "info" } + return types[score] || "info" + }, + + getStatusClass(status) { + const classes = { + "待处理": "status-dot pending", + "待审查": "status-dot review", + "待发布": "status-dot ready", + "已发布": "status-dot published" + } + return classes[status] || "" + }, + + formatDate(dateStr) { + if (!dateStr || dateStr === "-" || dateStr.trim() === "") return "-" + const date = new Date(dateStr.replace(" ", "T")) + return date.toLocaleString("zh-CN", { + year: "numeric", month: "2-digit", day: "2-digit", + hour: "2-digit", minute: "2-digit" }) - }, - - generateLogsContent(container) { - container.innerHTML = ` -
-
- - - -
-
- -
- 请选择日志类型和日期，然后点击加载 -
- ` - }, - - generateUsersContent(container) { - container.innerHTML = ` -
-

用户列表

- -
- - - - - - - - - - - - - - - - - - - - - - - - -
ID用户名角色操作
admin管理员管理员
editor1编辑小王编辑
- ` + } + }, + mounted() { + if ("logs" === "topics") { + this.fetchTopics() + } else if ("logs" === "logs") { + this.fetchLogs() + } else if ("logs" === "users") { + this.fetchUsers() } } } - Vue.createApp(App).mount('#app') + Vue.createApp(App).mount("#app") \ No newline at end of file diff --git a/platform/frontend/topics.html b/platform/frontend/topics.html index c3a615c..0558bd1 100644 --- a/platform/frontend/topics.html +++ b/platform/frontend/topics.html @@ -24,6 +24,12 @@ aside button:hover { background-color: #f3f4f6; } @media (max-width: 768px) { main { padding-bottom: 70px; } } .nav-title { text-align: center; } + .status-badge { display: inline-flex; align-items: center; gap: 4px; } + .status-dot { width: 6px; height: 6px; border-radius: 50%; } + .status-dot.pending { background: #E6A23C; } + .status-dot.review { background: #F56C6C; } + .status-dot.ready { background: #67C23A; } + .status-dot.published { background: #409EFF; } @@ -50,9 +56,111 @@

📄 选题管理

- -
- + +
+ +
+
+ 🔄 批量刷新 + ▶ 批量创作 + 🔍 批量优化 + 已选 {{ selectedTopicIds.length }} 项 +
+
+ +
+ 全部 ({{ topics.length }}) + 待处理 ({{ countByStatus("待处理") }}) + 待审查 ({{ countByStatus("待审查") }}) + 待发布 ({{ countByStatus("待发布") }}) + 已发布 ({{ countByStatus("已发布") }}) +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+

📄 系统日志

+
+ + + + + + + 加载日志 +
+ 
{{ logContent }}
 + +
+
+ +
+ +
+

👥 用户管理

+
+

用户列表

+ + 新建用户 +
+ + + + + + + + + + + +
@@ -61,7 +169,7 @@
-

{ loadingText }

+

{{ loadingText }}

@@ -69,182 +177,334 @@ const App = { data() { return { + // 基础数据 isLoggedIn: true, - currentUser: { username: 'admin' }, + currentUser: { username: "admin" }, isAdmin: true, - currentPage: 'topics', - loadingOverlay: false, - loadingText: '' - } - }, - methods: { - showLoading(text) { - this.loadingOverlay = true - this.loadingText = text || '加载中...' - }, - hideLoading() { - this.loadingOverlay = false - this.loadingText = '' - } - }, - mounted() { - // 页面加载完成后显示内容 - setTimeout(() => { - this.generateContent() - }, 100) - - // 监听窗口大小变化，重新调整布局 - window.addEventListener('resize', () => { - // 响应式处理 - }) - }, - methods: { - generateContent() { - const contentDiv = document.getElementById('topics-content') - if (!contentDiv) return + currentPage: "' + page_name + '", - switch('topics') { - case 'topics': - this.generateTopicsContent(contentDiv) - break - case 'logs': - this.generateLogsContent(contentDiv) - break - case 'users': - this.generateUsersContent(contentDiv) - break - default: - contentDiv.innerHTML = '

页面内容加载中...

' + // 相关数据 + status: {}, + topics: [], + filterStatus: "", + selectedTopicIds: [], + generating: false, + optimizing: false, + loadingAll: false, + loadingTable: false, + loadingLogs: false, + loadingUsers: false, + loadingOverlay: false, + loadingText: "", + + // 日志相关 + logType: "creator", + logDate: "", + logContent: "", + + // 用户相关 + users: [], + + // 模态框相关 + createTopicModalVisible: false, + newUserForm: {}, + publishModalVisible: false, + publishForm: { + platform: "zhihu", + url: "", + description: "" + }, + publishTopicId: "", + + // 预览相关 + previewVisible: false, + previewTopic: null, + previewPlatform: "", + previewHtml: "", + fullScreenPreview: false + } + }, + computed: { + filteredTopics() { + if (!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 { + // 模拟API调用 + await new Promise(resolve => setTimeout(resolve, 500)) + this.topics = [ + { + id: "A01", + title: "可持续发展趋势分析", + field: "环保", + status: "pending", + compliance_score: 85, + created_at: "2026-04-27 10:30", + generated_at: "-", + published_at: "-", + updated_at: "2026-04-27 10:30", + priority_score: "高" + }, + { + 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: "-", + updated_at: "2026-04-27 11:45", + priority_score: "中" + }, + { + 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", + updated_at: "2026-04-27 13:00", + priority_score: "高" + } + ] + } catch (error) { + console.error("获取选题失败:", error) + } finally { + this.loadingTable = false } }, - generateTopicsContent(container) { - container.innerHTML = ` -
-
- - - - 已选 0 项 -
- -
- 全部 (3) - 待处理 (1) - 待审查 (1) - 待发布 (1) - 已发布 (0) -
-
+ async fetchLogs() { + this.loadingLogs = true + try { + // 模拟日志数据 + const logs = { + creator: `2026-04-27 11:45:23 | 成功生成选题 B02 - AI在内容创作中的应用 +2026-04-27 11:30:15 | 开始生成选题 C03 - 数字化转型案例研究`, + optimizer: `2026-04-27 12:05:30 | 优化完成选题 C03 - 合规分提升至78 +2026-04-27 11:50:45 | 优化中选题 B02 - 等待人工审核`, + collector: `2026-04-27 10:30:12 | 收集到3个新选题 +2026-04-27 09:45:20 | 更新行业热点数据` + }[this.logType] || "暂无日志数据" -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ID标题领域状态操作
A01可持续发展趋势分析环保待处理 - - - -
B02AI在内容创作中的应用科技待审查 - - - -
-
- ` + this.logContent = `日志类型: ${this.logType} +日期: ${this.logDate || "今天"} - // 添加事件监听器 - document.querySelectorAll('.cursor-pointer').forEach(tag => { - tag.addEventListener('click', function() { - document.querySelectorAll('.cursor-pointer').forEach(t => t.classList.remove('active')) - this.classList.add('active') - }) +${logs}` + } catch (error) { + console.error("获取日志失败:", error) + this.$message.error("获取日志失败") + } finally { + this.loadingLogs = false + } + }, + + async fetchUsers() { + this.loadingUsers = true + try { + // 模拟用户数据 + 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" } + ] + } catch (error) { + console.error("获取用户失败:", error) + } finally { + this.loadingUsers = false + } + }, + + // 批量操作方法 + refreshAll() { + this.$message.info("执行批量刷新操作") + }, + + async triggerGenerateSelected() { + if (!this.selectedTopicIds.length) return + this.loadingOverlay = true + this.loadingText = "正在批量创作..." + try { + for (const t of this.selectedTopicIds) { + await this.triggerGenerate(t.id) + } + this.$message.success("批量创作完成") + this.selectedTopicIds = [] + await this.fetchTopics() + } catch (e) { + this.$message.error("批量创作失败：" + e.message) + } finally { + this.loadingOverlay = false + } + }, + + async triggerOptimizeSelected() { + if (!this.selectedTopicIds.length) return + this.loadingOverlay = true + this.loadingText = "正在批量优化..." + try { + const ids = this.selectedTopicIds.map(t => t.id) + await this.triggerOptimize(ids) + this.$message.success("批量优化完成") + this.selectedTopicIds = [] + await this.fetchTopics() + } catch (e) { + this.$message.error("批量优化失败：" + e.message) + } finally { + this.loadingOverlay = false + } + }, + + // 单个操作方法 + openPreview(topic) { + this.previewTopic = topic + this.previewPlatform = "zhihu" + this.previewVisible = true + this.loadingOverlay = true + this.loadingText = "加载中..." + // 模拟预览加载 + setTimeout(() => { + this.previewHtml = "

选题预览内容

这里是选题的详细内容和格式预览...

" + this.loadingOverlay = false + }, 1000) + }, + + copyPreviewHtml() { + this.$message.success("HTML 已复制到剪贴板") + }, + expandPreview() { + this.fullScreenPreview = !this.fullScreenPreview + }, + + async createTopic(topic) { + if (topic && topic.status === "待处理") { + await this.triggerGenerate([topic.id]) + await this.fetchTopics() + } else { + this.$message.info("仅待处理选题可创作") + } + }, + + async optimizeTopic(topic) { + if (topic && topic.status === "待审查") { + await this.triggerOptimize([topic.id]) + await this.fetchTopics() + } else { + this.$message.info("仅待审查选题可优化") + } + }, + + handlePublish(topic) { + this.publishTopicId = topic.id + this.publishModalVisible = true + }, + + confirmPublish() { + this.$message.success("发布成功") + this.publishModalVisible = false + this.fetchTopics() + }, + + deleteTopic(id) { + this.$confirm("确定删除该选题？删除后无法恢复。", "提示", { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning" + }).then(async () => { + try { + await this.deleteTopicApi(id) + this.$message.success("删除成功") + await this.fetchTopics() + } catch (e) { + this.$message.error("删除失败：" + e.message) + } + }).catch(() => {}) + }, + + openCreateUserModal() { + this.createTopicModalVisible = true + }, + + deleteUser(id) { + if (id === "admin") { + this.$message.warning("不能删除管理员用户") + return + } + this.$confirm("确定删除该用户？", "提示", { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning" + }).then(() => { + this.$message.success("删除用户成功") + this.fetchUsers() + }).catch(() => {}) + }, + + // API 模拟方法 + async triggerGenerate(ids) { + await new Promise(resolve => setTimeout(resolve, 1000)) + console.log("生成选题:", ids) + }, + + async triggerOptimize(ids) { + await new Promise(resolve => setTimeout(resolve, 1000)) + console.log("优化选题:", ids) + }, + + async deleteTopicApi(id) { + await new Promise(resolve => setTimeout(resolve, 500)) + console.log("删除选题:", id) + }, + + // 工具方法 + getPriorityType(score) { + const types = { "高": "danger", "中": "warning", "低": "info" } + return types[score] || "info" + }, + + getStatusClass(status) { + const classes = { + "待处理": "status-dot pending", + "待审查": "status-dot review", + "待发布": "status-dot ready", + "已发布": "status-dot published" + } + return classes[status] || "" + }, + + formatDate(dateStr) { + if (!dateStr || dateStr === "-" || dateStr.trim() === "") return "-" + const date = new Date(dateStr.replace(" ", "T")) + return date.toLocaleString("zh-CN", { + year: "numeric", month: "2-digit", day: "2-digit", + hour: "2-digit", minute: "2-digit" }) - }, - - generateLogsContent(container) { - container.innerHTML = ` -
-
- - - -
-
- -
- 请选择日志类型和日期，然后点击加载 -
- ` - }, - - generateUsersContent(container) { - container.innerHTML = ` -
-

用户列表

- -
- - - - - - - - - - - - - - - - - - - - - - - - -
ID用户名角色操作
admin管理员管理员
editor1编辑小王编辑
- ` + } + }, + mounted() { + if ("topics" === "topics") { + this.fetchTopics() + } else if ("topics" === "logs") { + this.fetchLogs() + } else if ("topics" === "users") { + this.fetchUsers() } } } - Vue.createApp(App).mount('#app') + Vue.createApp(App).mount("#app") \ No newline at end of file diff --git a/platform/frontend/users.html b/platform/frontend/users.html index f94c6b0..ab0328f 100644 --- a/platform/frontend/users.html +++ b/platform/frontend/users.html @@ -24,6 +24,12 @@ aside button:hover { background-color: #f3f4f6; } @media (max-width: 768px) { main { padding-bottom: 70px; } } .nav-title { text-align: center; } + .status-badge { display: inline-flex; align-items: center; gap: 4px; } + .status-dot { width: 6px; height: 6px; border-radius: 50%; } + .status-dot.pending { background: #E6A23C; } + .status-dot.review { background: #F56C6C; } + .status-dot.ready { background: #67C23A; } + .status-dot.published { background: #409EFF; } @@ -50,9 +56,111 @@

📄 用户管理

- -
- + +
+ +
+
+ 🔄 批量刷新 + ▶ 批量创作 + 🔍 批量优化 + 已选 {{ selectedTopicIds.length }} 项 +
+
+ +
+ 全部 ({{ topics.length }}) + 待处理 ({{ countByStatus("待处理") }}) + 待审查 ({{ countByStatus("待审查") }}) + 待发布 ({{ countByStatus("待发布") }}) + 已发布 ({{ countByStatus("已发布") }}) +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+

📄 系统日志

+
+ + + + + + + 加载日志 +
+ 
{{ logContent }}
 + +
+
+ +
+ +
+

👥 用户管理

+
+

用户列表

+ + 新建用户 +
+ + + + + + + + + + + +
@@ -61,7 +169,7 @@
-

{ loadingText }

+

{{ loadingText }}

@@ -69,182 +177,334 @@ const App = { data() { return { + // 基础数据 isLoggedIn: true, - currentUser: { username: 'admin' }, + currentUser: { username: "admin" }, isAdmin: true, - currentPage: 'users', - loadingOverlay: false, - loadingText: '' - } - }, - methods: { - showLoading(text) { - this.loadingOverlay = true - this.loadingText = text || '加载中...' - }, - hideLoading() { - this.loadingOverlay = false - this.loadingText = '' - } - }, - mounted() { - // 页面加载完成后显示内容 - setTimeout(() => { - this.generateContent() - }, 100) - - // 监听窗口大小变化，重新调整布局 - window.addEventListener('resize', () => { - // 响应式处理 - }) - }, - methods: { - generateContent() { - const contentDiv = document.getElementById('users-content') - if (!contentDiv) return + currentPage: "' + page_name + '", - switch('users') { - case 'topics': - this.generateTopicsContent(contentDiv) - break - case 'logs': - this.generateLogsContent(contentDiv) - break - case 'users': - this.generateUsersContent(contentDiv) - break - default: - contentDiv.innerHTML = '

页面内容加载中...

' + // 相关数据 + status: {}, + topics: [], + filterStatus: "", + selectedTopicIds: [], + generating: false, + optimizing: false, + loadingAll: false, + loadingTable: false, + loadingLogs: false, + loadingUsers: false, + loadingOverlay: false, + loadingText: "", + + // 日志相关 + logType: "creator", + logDate: "", + logContent: "", + + // 用户相关 + users: [], + + // 模态框相关 + createTopicModalVisible: false, + newUserForm: {}, + publishModalVisible: false, + publishForm: { + platform: "zhihu", + url: "", + description: "" + }, + publishTopicId: "", + + // 预览相关 + previewVisible: false, + previewTopic: null, + previewPlatform: "", + previewHtml: "", + fullScreenPreview: false + } + }, + computed: { + filteredTopics() { + if (!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 { + // 模拟API调用 + await new Promise(resolve => setTimeout(resolve, 500)) + this.topics = [ + { + id: "A01", + title: "可持续发展趋势分析", + field: "环保", + status: "pending", + compliance_score: 85, + created_at: "2026-04-27 10:30", + generated_at: "-", + published_at: "-", + updated_at: "2026-04-27 10:30", + priority_score: "高" + }, + { + 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: "-", + updated_at: "2026-04-27 11:45", + priority_score: "中" + }, + { + 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", + updated_at: "2026-04-27 13:00", + priority_score: "高" + } + ] + } catch (error) { + console.error("获取选题失败:", error) + } finally { + this.loadingTable = false } }, - generateTopicsContent(container) { - container.innerHTML = ` -
-
- - - - 已选 0 项 -
- -
- 全部 (3) - 待处理 (1) - 待审查 (1) - 待发布 (1) - 已发布 (0) -
-
+ async fetchLogs() { + this.loadingLogs = true + try { + // 模拟日志数据 + const logs = { + creator: `2026-04-27 11:45:23 | 成功生成选题 B02 - AI在内容创作中的应用 +2026-04-27 11:30:15 | 开始生成选题 C03 - 数字化转型案例研究`, + optimizer: `2026-04-27 12:05:30 | 优化完成选题 C03 - 合规分提升至78 +2026-04-27 11:50:45 | 优化中选题 B02 - 等待人工审核`, + collector: `2026-04-27 10:30:12 | 收集到3个新选题 +2026-04-27 09:45:20 | 更新行业热点数据` + }[this.logType] || "暂无日志数据" -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ID标题领域状态操作
A01可持续发展趋势分析环保待处理 - - - -
B02AI在内容创作中的应用科技待审查 - - - -
-
- ` + this.logContent = `日志类型: ${this.logType} +日期: ${this.logDate || "今天"} - // 添加事件监听器 - document.querySelectorAll('.cursor-pointer').forEach(tag => { - tag.addEventListener('click', function() { - document.querySelectorAll('.cursor-pointer').forEach(t => t.classList.remove('active')) - this.classList.add('active') - }) +${logs}` + } catch (error) { + console.error("获取日志失败:", error) + this.$message.error("获取日志失败") + } finally { + this.loadingLogs = false + } + }, + + async fetchUsers() { + this.loadingUsers = true + try { + // 模拟用户数据 + 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" } + ] + } catch (error) { + console.error("获取用户失败:", error) + } finally { + this.loadingUsers = false + } + }, + + // 批量操作方法 + refreshAll() { + this.$message.info("执行批量刷新操作") + }, + + async triggerGenerateSelected() { + if (!this.selectedTopicIds.length) return + this.loadingOverlay = true + this.loadingText = "正在批量创作..." + try { + for (const t of this.selectedTopicIds) { + await this.triggerGenerate(t.id) + } + this.$message.success("批量创作完成") + this.selectedTopicIds = [] + await this.fetchTopics() + } catch (e) { + this.$message.error("批量创作失败：" + e.message) + } finally { + this.loadingOverlay = false + } + }, + + async triggerOptimizeSelected() { + if (!this.selectedTopicIds.length) return + this.loadingOverlay = true + this.loadingText = "正在批量优化..." + try { + const ids = this.selectedTopicIds.map(t => t.id) + await this.triggerOptimize(ids) + this.$message.success("批量优化完成") + this.selectedTopicIds = [] + await this.fetchTopics() + } catch (e) { + this.$message.error("批量优化失败：" + e.message) + } finally { + this.loadingOverlay = false + } + }, + + // 单个操作方法 + openPreview(topic) { + this.previewTopic = topic + this.previewPlatform = "zhihu" + this.previewVisible = true + this.loadingOverlay = true + this.loadingText = "加载中..." + // 模拟预览加载 + setTimeout(() => { + this.previewHtml = "

选题预览内容

这里是选题的详细内容和格式预览...

" + this.loadingOverlay = false + }, 1000) + }, + + copyPreviewHtml() { + this.$message.success("HTML 已复制到剪贴板") + }, + expandPreview() { + this.fullScreenPreview = !this.fullScreenPreview + }, + + async createTopic(topic) { + if (topic && topic.status === "待处理") { + await this.triggerGenerate([topic.id]) + await this.fetchTopics() + } else { + this.$message.info("仅待处理选题可创作") + } + }, + + async optimizeTopic(topic) { + if (topic && topic.status === "待审查") { + await this.triggerOptimize([topic.id]) + await this.fetchTopics() + } else { + this.$message.info("仅待审查选题可优化") + } + }, + + handlePublish(topic) { + this.publishTopicId = topic.id + this.publishModalVisible = true + }, + + confirmPublish() { + this.$message.success("发布成功") + this.publishModalVisible = false + this.fetchTopics() + }, + + deleteTopic(id) { + this.$confirm("确定删除该选题？删除后无法恢复。", "提示", { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning" + }).then(async () => { + try { + await this.deleteTopicApi(id) + this.$message.success("删除成功") + await this.fetchTopics() + } catch (e) { + this.$message.error("删除失败：" + e.message) + } + }).catch(() => {}) + }, + + openCreateUserModal() { + this.createTopicModalVisible = true + }, + + deleteUser(id) { + if (id === "admin") { + this.$message.warning("不能删除管理员用户") + return + } + this.$confirm("确定删除该用户？", "提示", { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning" + }).then(() => { + this.$message.success("删除用户成功") + this.fetchUsers() + }).catch(() => {}) + }, + + // API 模拟方法 + async triggerGenerate(ids) { + await new Promise(resolve => setTimeout(resolve, 1000)) + console.log("生成选题:", ids) + }, + + async triggerOptimize(ids) { + await new Promise(resolve => setTimeout(resolve, 1000)) + console.log("优化选题:", ids) + }, + + async deleteTopicApi(id) { + await new Promise(resolve => setTimeout(resolve, 500)) + console.log("删除选题:", id) + }, + + // 工具方法 + getPriorityType(score) { + const types = { "高": "danger", "中": "warning", "低": "info" } + return types[score] || "info" + }, + + getStatusClass(status) { + const classes = { + "待处理": "status-dot pending", + "待审查": "status-dot review", + "待发布": "status-dot ready", + "已发布": "status-dot published" + } + return classes[status] || "" + }, + + formatDate(dateStr) { + if (!dateStr || dateStr === "-" || dateStr.trim() === "") return "-" + const date = new Date(dateStr.replace(" ", "T")) + return date.toLocaleString("zh-CN", { + year: "numeric", month: "2-digit", day: "2-digit", + hour: "2-digit", minute: "2-digit" }) - }, - - generateLogsContent(container) { - container.innerHTML = ` -
-
- - - -
-
- -
- 请选择日志类型和日期，然后点击加载 -
- ` - }, - - generateUsersContent(container) { - container.innerHTML = ` -
-

用户列表

- -
- - - - - - - - - - - - - - - - - - - - - - - - -
ID用户名角色操作
admin管理员管理员
editor1编辑小王编辑
- ` + } + }, + mounted() { + if ("users" === "topics") { + this.fetchTopics() + } else if ("users" === "logs") { + this.fetchLogs() + } else if ("users" === "users") { + this.fetchUsers() } } } - Vue.createApp(App).mount('#app') + Vue.createApp(App).mount("#app") \ No newline at end of file