feat: Phase 4 多租户隔离 + 四阶段升级测试 + CSS 统一化

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
2026-05-17 06:56:53 +08:00
parent 301dc3e438
commit 9c37c9a574
45 changed files with 3707 additions and 1366 deletions
@@ -7,16 +7,6 @@
    <link rel="stylesheet" href="element-plus.css">
    <link rel="stylesheet" href="theme-modern.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; }
-        .main-content { display: flex; flex: 1; max-width: 1400px; margin: 0 auto; min-height: calc(100vh - 60px); }
-        .content-area { flex: 1; padding: 24px; overflow-y: auto; }
-        .card { background: white; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow-x: auto; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
-
-        .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; gap: 8px; flex-wrap: wrap; align-items: center; }
-        .filter-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
        .selected-count { color: #909399; font-size: 14px; margin-left: auto; }

        .status-badge { display: inline-flex; align-items: center; gap: 4px; }
@@ -28,17 +18,7 @@

        .topic-card-list { display: none; }

-        .preview-iframe { box-sizing: border-box; }
-        .preview-dialog-custom.el-dialog { max-height: calc(100vh - 90px); overflow: hidden; display: flex; flex-direction: column; margin-top: 0 !important; }
-        .preview-dialog-custom.el-dialog .el-dialog__header { padding: 8px 12px; margin: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
-        .preview-dialog-custom.el-dialog .el-dialog__body { padding: 12px; overflow: hidden; }
-        .preview-dialog-custom.el-dialog .el-dialog__footer { flex-shrink: 0; padding: 8px 12px; }
-        .preview-dialog-custom.is-fullscreen { z-index: 100001 !important; }
-        body:has(.preview-dialog-custom.is-fullscreen) > [class*="el-overlay"] { z-index: 100000 !important; }
-
        @media (max-width: 768px) {
-            .content-area { padding: 12px; padding-bottom: 80px; }
-            .card { padding: 16px; }
            .el-table { display: none; }
            .topic-card-list { display: block; }
            .topic-card {
@@ -52,41 +32,38 @@
            .topic-card-title { font-size: 16px; font-weight: 600; color: #303133; flex: 1; margin-right: 8px; }
            .topic-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
            .topic-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; color: #606266; margin-bottom: 12px; }
-            .topic-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ebeef5; }
-            .topic-card-actions .el-button { flex: 1; min-width: 60px; }
-            .preview-iframe { max-height: calc(100vh - 250px) !important; }
-        }
-        @media (min-width: 769px) {
-            .preview-iframe { max-height: calc(100vh - 100px) !important; }
-            .preview-dialog-custom { position: relative; left: 90px; }
+            .topic-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ebeef5; }
+            .topic-card-actions .el-button { margin: 0; width: 100%; justify-content: center; }
+            .topic-card-actions .el-button:last-child:nth-child(odd) { grid-column: 1 / -1; }
+            .topic-card.is-checked { border: 2px solid #409eff; box-shadow: 0 0 0 1px rgba(64,158,255,0.2); }
        }
    </style>
-    <script src="navigation-component.js"></script>
-    <script src="navbar-component.js"></script>
+    <script src="uni-nav.js"></script>
 </head>
 <body>
    <div id="app">
-        <navbar-component title="选题管理" :username="currentUser.username" :is-admin="isAdmin" @logout="handleLogout"></navbar-component>
-        <navigation-component current-page="topics" :is-admin="isAdmin" @navigate="redirectToPage"></navigation-component>
+        <uni-nav title="选题管理" :username="currentUser.username" :is-admin="isAdmin" current-page="topics" @navigate="redirectToPage" @logout="handleLogout">
+        </uni-nav>
        <div class="main-content">
            <main class="content-area">
                <div class="card page-fade">
                    <div class="page-header">
-                        <h2 class="page-title">📋 选题管理</h2>
+                        <h2 class="page-title"><el-icon style="vertical-align:-2px;"><IconTopic /></el-icon> 选题管理</h2>
                        <div class="toolbar">
-                            <el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
-                            <el-button type="success" size="small" @click="triggerGenerateSelected" :disabled="selectedTopicIds.length === 0">▶ 批量创作</el-button>
-                            <el-button type="warning" size="small" @click="triggerReviewSelected" :disabled="selectedTopicIds.length === 0">🔍 批量审查</el-button>
+                            <el-button type="primary" size="small" @click="refreshAll"><el-icon style="vertical-align:-2px;"><IconRefresh /></el-icon> 批量刷新</el-button>
+                            <el-button size="small" @click="toggleSelectAll">{{ selectAllLabel }}</el-button>
+                            <el-button type="success" size="small" @click="triggerGenerateSelected" :disabled="selectedTopicIds.length === 0"><el-icon style="vertical-align:-2px;"><IconPlus /></el-icon> 批量创作</el-button>
+                            <el-button type="warning" size="small" @click="triggerReviewSelected" :disabled="selectedTopicIds.length === 0"><el-icon style="vertical-align:-2px;"><IconSearch /></el-icon> 批量审查</el-button>
                            <span v-if="selectedTopicIds.length > 0" class="selected-count">已选 {{ selectedTopicIds.length }} 项</span>
                        </div>
                    </div>
                    <div class="filter-bar">
-                        <el-button size="default" :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''">全部 ({{ topics.length }})</el-button>
-                        <el-button size="default" :type="filterStatus === 'today' ? 'primary' : ''" @click="filterStatus = 'today'">今日新增 ({{ todayCount }})</el-button>
-                        <el-button size="default" :type="filterStatus === 'pending' ? 'primary' : ''" @click="filterStatus = 'pending'">待处理 ({{ statusStats.pending }})</el-button>
-                        <el-button size="default" :type="filterStatus === 'review' ? 'primary' : ''" @click="filterStatus = 'review'">待审查 ({{ statusStats.review }})</el-button>
-                        <el-button size="default" :type="filterStatus === 'ready' ? 'primary' : ''" @click="filterStatus = 'ready'">待发布 ({{ statusStats.ready }})</el-button>
-                        <el-button size="default" :type="filterStatus === 'published' ? 'primary' : ''" @click="filterStatus = 'published'">已发布 ({{ statusStats.published }})</el-button>
+                        <el-button size="default" :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''; fetchTopics()">全部 ({{ topics.length }})</el-button>
+                        <el-button size="default" :type="filterStatus === 'today' ? 'primary' : ''" @click="filterStatus = 'today'; fetchTopics()">今日新增 ({{ todayCount }})</el-button>
+                        <el-button size="default" :type="filterStatus === 'pending' ? 'primary' : ''" @click="filterStatus = 'pending'; fetchTopics()">待处理 ({{ statusStats.pending }})</el-button>
+                        <el-button size="default" :type="filterStatus === 'review' ? 'primary' : ''" @click="filterStatus = 'review'; fetchTopics()">待审查 ({{ statusStats.review }})</el-button>
+                        <el-button size="default" :type="filterStatus === 'ready' ? 'primary' : ''" @click="filterStatus = 'ready'; fetchTopics()">待发布 ({{ statusStats.ready }})</el-button>
+                        <el-button size="default" :type="filterStatus === 'published' ? 'primary' : ''" @click="filterStatus = 'published'; fetchTopics()">已发布 ({{ statusStats.published }})</el-button>
                    </div>
                    <el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event.map(item => item.id)">
                        <el-table-column type="selection" width="55"></el-table-column>
@@ -102,22 +79,26 @@
                        <el-table-column prop="created_at" label="创建时间" width="140"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
                        <el-table-column prop="generated_at" label="创作时间" width="140"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
                        <el-table-column prop="published_at" label="发布时间" width="140"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
-                        <el-table-column label="操作" width="200" fixed="right">
+                        <el-table-column label="操作" width="230" fixed="right">
                            <template #default="scope">
-                                <div style="display: flex; gap: 4px; flex-wrap: wrap;">
-                                    <el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
-                                    <el-button size="small" type="success" :disabled="isStatus(scope.row, 'published')" @click="createTopic(scope.row)">创作</el-button>
-                                    <el-button size="small" type="warning" :disabled="!isStatus(scope.row, 'review')" @click="reviewTopic(scope.row)">审查</el-button>
-                                    <el-button v-if="isStatus(scope.row, 'ready')" size="small" type="primary" @click="handlePublish(scope.row)">发布</el-button>
-                                    <el-button size="small" type="danger" @click="deleteTopic(scope.row.id)">删除</el-button>
+                                <div style="display: flex; gap: 4px; white-space: nowrap;">
+                                    <el-button size="small" @click="openPreview(scope.row)" type="primary" style="padding:5px 8px;">预览</el-button>
+                                    <el-button size="small" type="success" :disabled="isStatus(scope.row, 'published')" @click="createTopic(scope.row)" style="padding:5px 8px;">创作</el-button>
+                                    <el-button size="small" type="warning" :disabled="!isStatus(scope.row, 'review')" @click="reviewTopic(scope.row)" style="padding:5px 8px;">审查</el-button>
+                                    <el-button v-if="isStatus(scope.row, 'ready')" size="small" type="primary" @click="openPublishDialog(scope.row)" style="padding:5px 8px;">发布</el-button>
+                                    <el-button size="small" type="danger" @click="deleteTopic(scope.row.id)" style="padding:5px 8px;">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
+                    <div v-if="!loadingTable && filteredTopics.length === 0" class="empty-state" style="margin-top:20px;"><el-icon style="font-size:48px;color:#c0c4cc;"><IconTopic /></el-icon><div class="empty-text">暂无选题数据</div></div>
                    <div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
-                        <div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
+                        <div v-for="topic in filteredTopics" :key="topic.id" class="topic-card" :class="{ 'is-checked': selectedTopicIds.includes(topic.id) }">
                            <div class="topic-card-header">
-                                <div class="topic-card-title">{{ topic.id }}. {{ topic.title }}</div>
+                                <div class="topic-card-title">
+                                    <el-checkbox :checked="selectedTopicIds.includes(topic.id)" @change="toggleCheck(topic.id)" style="margin-right:6px;"></el-checkbox>
+                                    {{ topic.id }}. {{ topic.title }}
+                                </div>
                                <el-tag :type="getStatusType(topic.status)" size="small">{{ getStatusLabel(topic.status) }}</el-tag>
                            </div>
                            <div class="topic-card-tags">
@@ -133,7 +114,7 @@
                                <el-button size="small" @click="openPreview(topic)" type="primary">预览</el-button>
                                <el-button size="small" type="success" :disabled="isStatus(topic, 'published')" @click="createTopic(topic)">创作</el-button>
                                <el-button size="small" type="warning" :disabled="!isStatus(topic, 'review')" @click="reviewTopic(topic)">审查</el-button>
-                                <el-button v-if="isStatus(topic, 'ready')" size="small" type="primary" @click="handlePublish(topic)">发布</el-button>
+                                <el-button v-if="isStatus(topic, 'ready')" size="small" type="primary" @click="openPublishDialog(topic)">发布</el-button>
                                <el-button size="small" type="danger" @click="deleteTopic(topic.id)">删除</el-button>
                            </div>
                        </div>
@@ -141,6 +122,30 @@
                </div>
            </main>
        </div>
+        <el-dialog v-model="publishDialogVisible" title="发布确认" width="420px" :close-on-click-modal="false">
+            <div v-if="publishTopic">
+                <div style="margin-bottom:16px;">
+                    <div style="font-size:14px;color:#606266;margin-bottom:8px;">选题：</div>
+                    <div style="font-size:15px;font-weight:600;color:#303133;">{{ publishTopic.id }}. {{ publishTopic.title }}</div>
+                </div>
+                <div style="margin-bottom:16px;">
+                    <div style="font-size:14px;color:#606266;margin-bottom:8px;">选择发布平台：</div>
+                    <el-checkbox v-model="publishPlatforms.zhihu" label="zhihu" style="display:block;margin-bottom:8px;">知乎</el-checkbox>
+                    <el-checkbox v-model="publishPlatforms.wechat" label="wechat" style="display:block;margin-bottom:8px;">微信公众号</el-checkbox>
+                    <el-checkbox v-model="publishPlatforms.xiaohongshu" label="xiaohongshu" style="display:block;">小红书</el-checkbox>
+                </div>
+                <div v-if="publishing" style="text-align:center;padding:12px;color:#909399;">
+                    <el-icon class="is-loading" style="margin-right:4px;">
+                        <svg viewBox="0 0 1024 1024" width="16" height="16"><path d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896z" fill="none" stroke="currentColor" stroke-width="64"/></svg>
+                    </el-icon>
+                    正在发布...
+                </div>
+            </div>
+            <template #footer>
+                <el-button @click="publishDialogVisible = false" :disabled="publishing">取消</el-button>
+                <el-button type="primary" @click="confirmPublish" :loading="publishing" :disabled="!publishPlatforms.zhihu && !publishPlatforms.wechat && !publishPlatforms.xiaohongshu">确认发布</el-button>
+            </template>
+        </el-dialog>
        <el-dialog v-model="previewVisible" title="选题预览" width="85%" :modal-props="{ closeOnClickModal: false }" :before-close="() => previewVisible = false" class="preview-dialog-custom" :fullscreen="previewFullscreen" close-on-press-escape>
            <div v-if="previewTopic">
                <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
@@ -181,6 +186,7 @@
        </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 TopicsApp = {
@@ -191,22 +197,15 @@ const TopicsApp = {
            stats: { total: 0, pending: 0, review: 0, ready: 0, published: 0, today: 0 },
            topics: [], todayCount: 0,
            previewVisible: false, previewTopic: null, previewFullscreen: false,
-            previewPlatform: 'zhihu', platformContents: {}
+            previewPlatform: 'zhihu', platformContents: {},
+            publishDialogVisible: false, publishTopic: null,
+            publishPlatforms: { zhihu: true, wechat: true, xiaohongshu: true },
+            publishing: false
        }
    },
    computed: {
        filteredTopics() {
-            if (!this.topics || !this.topics.length) return [];
            if (!this.filterStatus) return this.topics;
-            if (this.filterStatus === 'today') {
-                const today = new Date();
-                const todayStr = today.toISOString().slice(0, 10);
-                return this.topics.filter(t => {
-                    const d = t.created_at;
-                    if (!d) return false;
-                    return d.slice(0, 10) === todayStr;
-                });
-            }
            const map = { 'pending': ['pending','待处理'], 'review': ['review','待审查'], 'ready': ['ready','待发布'], 'published': ['published','已发布'] };
            const allowed = map[this.filterStatus] || [this.filterStatus];
            return this.topics.filter(t => allowed.includes(t.status));
@@ -231,6 +230,12 @@ const TopicsApp = {
                const ending = '<p style="margin-top:24px;padding-top:16px;border-top:1px solid #eee;color:#666;font-size:14px;">感兴趣可以收藏关注我们，欢迎在评论区分享你的实践经验和改进建议！</p>';
                return `<!DOCTYPE html><html><head>${headHtml}</head><body style="margin:0;padding:0;">${bodyHtml}${ending}</body></html>`;
            } catch (e) { console.error('生成预览 HTML 失败:', e); return html; }
+        },
+        selectAllLabel() {
+            const visible = this.filteredTopics.map(t => t.id);
+            if (visible.length === 0) return '全选';
+            const allChecked = visible.every(id => this.selectedTopicIds.includes(id));
+            return allChecked ? '取消全选' : `全选 (${visible.length})`;
        }
    },
    methods: {
@@ -245,7 +250,8 @@ const TopicsApp = {
        async fetchTopics() {
            this.loadingTable = true;
            try {
-                const data = await this.api('/api/topics');
+                const params = this.filterStatus === 'today' ? '?today=true' : '';
+                const data = await this.api('/api/topics' + params);
                this.topics = data || [];
                this.$message.success('选题加载成功');
            } catch (error) {
@@ -258,7 +264,7 @@ const TopicsApp = {
            try {
                const stats = await this.api('/api/topics/stats');
                if (stats) this.todayCount = stats.today_created || 0;
-            } catch (e) { console.error('获取统计失败:', e); }
+            } catch (e) { console.error('获取统计失败:', e); this.$message.error('获取统计失败: ' + e.message); }
        },
        refreshAll() { this.fetchTopics(); this.fetchTodayCount(); this.$message.success('已刷新'); },
        async triggerGenerateSelected() {
@@ -272,7 +278,7 @@ const TopicsApp = {
            }
            this.$message.success(`已提交 ${count}/${this.selectedTopicIds.length} 个创作任务，可在「创作任务」页面查看进度`);
            this.selectedTopicIds = [];
-            setTimeout(() => this.fetchTopics(), 2000);
+            setTimeout(() => { this.fetchTopics(); this.fetchTodayCount(); }, 2000);
        },
        async triggerReviewSelected() {
            if (!this.selectedTopicIds.length) return;
@@ -281,6 +287,7 @@ const TopicsApp = {
                this.$message.success('批量审查完成');
                this.selectedTopicIds = [];
                await this.fetchTopics();
+                await this.fetchTodayCount();
            } catch (error) { this.$message.error(`批量审查失败: ${error.message}`); }
        },
        async openPreview(topic) {
@@ -288,9 +295,10 @@ const TopicsApp = {
            const token = this.getToken();
            if (!token) return;
            const platforms = ['zhihu', 'wechat', 'xiaohongshu'];
+            const names = { zhihu: '知乎', wechat: '微信公众号', xiaohongshu: '小红书' };
            await Promise.all(platforms.map(p =>
                fetch(`/api/articles/${topic.id}/preview?platform=${p}`, { headers: { 'Authorization': 'Bearer ' + token } })
-                    .then(r => r.ok ? r.json() : null).then(d => { if (d && d.html) this.platformContents[p] = d.html; }).catch(e => console.error(`加载${p}预览失败:`, e))
+                    .then(r => r.ok ? r.json() : null).then(d => { if (d && d.html) this.platformContents[p] = d.html; }).catch(e => { console.error(`加载${p}预览失败:`, e); this.$message.error(`加载${names[p]}预览失败`); })
            ));
        },
        togglePreviewFullscreen() {
@@ -321,7 +329,7 @@ const TopicsApp = {
            try {
                const data = await this.api('/api/tasks/run-creator?topic_id=' + topic.id, { method: 'POST' });
                this.$message.success(`创作任务已启动: ${topic.title}，可在「创作任务」页面查看进度`);
-                setTimeout(() => this.fetchTopics(), 2000);
+                setTimeout(() => { this.fetchTopics(); this.fetchTodayCount(); }, 2000);
            } catch (error) { this.$message.error(`创作失败: ${error.message}`); }
        },
        async reviewTopic(topic) {
@@ -330,15 +338,31 @@ const TopicsApp = {
                const data = await this.api('/api/system/review/run', { method: 'POST', body: JSON.stringify({ topic_ids: [topic.id] }) });
                this.$message.success(`审查完成: ${topic.title}`);
                await this.fetchTopics();
+                await this.fetchTodayCount();
            } catch (error) { this.$message.error(`审查失败: ${error.message}`); }
        },
-        async handlePublish(topic) {
+        openPublishDialog(topic) {
            if (!this.isStatus(topic, 'ready')) { this.$message.info('仅待发布选题可发布'); return; }
+            this.publishTopic = topic;
+            this.publishPlatforms = { zhihu: true, wechat: true, xiaohongshu: true };
+            this.publishing = false;
+            this.publishDialogVisible = true;
+        },
+        async confirmPublish() {
+            const selected = Object.entries(this.publishPlatforms).filter(([, v]) => v).map(([k]) => k);
+            if (selected.length === 0) { this.$message.warning('请至少选择一个平台'); return; }
+            this.publishing = true;
            try {
-                const data = await this.api('/api/publishing/create', { method: 'POST', body: JSON.stringify({ topic_id: topic.id }) });
-                this.$message.success(`发布成功: ${topic.title}`);
+                const data = await this.api('/api/publishing/create', {
+                    method: 'POST',
+                    body: JSON.stringify({ topic_id: this.publishTopic.id, platforms: selected })
+                });
+                this.$message.success(`发布完成: ${this.publishTopic.title}`);
+                this.publishDialogVisible = false;
                await this.fetchTopics();
+                await this.fetchTodayCount();
            } catch (error) { this.$message.error(`发布失败: ${error.message}`); }
+            finally { this.publishing = false; }
        },
        async deleteTopic(id) {
            try {
@@ -346,11 +370,30 @@ const TopicsApp = {
                await this.api('/api/topics/' + id, { method: 'DELETE' });
                this.$message.success('删除成功');
                await this.fetchTopics();
+                await this.fetchTodayCount();
            } catch (e) { if (e !== 'cancel') this.$message.error('删除失败'); }
        },
        handleLogout() { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; },
        redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; },
        getStatusLabel(status) { return { 'pending': '待处理', 'review': '待审查', 'ready': '待发布', 'published': '已发布' }[status] || status; },
+        toggleCheck(id) {
+            const idx = this.selectedTopicIds.indexOf(id);
+            if (idx >= 0) {
+                this.selectedTopicIds.splice(idx, 1);
+            } else {
+                this.selectedTopicIds.push(id);
+            }
+        },
+        toggleSelectAll() {
+            const visible = this.filteredTopics.map(t => t.id);
+            const allChecked = visible.every(id => this.selectedTopicIds.includes(id));
+            if (allChecked) {
+                this.selectedTopicIds = this.selectedTopicIds.filter(id => !visible.includes(id));
+            } else {
+                const existing = new Set(this.selectedTopicIds);
+                for (const id of visible) { if (!existing.has(id)) { this.selectedTopicIds.push(id); } }
+            }
+        },
        formatDate(dateStr) {
            if (!dateStr) return '-';
            try { return new Date(dateStr.replace(' ', 'T')).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); }
@@ -362,18 +405,24 @@ const TopicsApp = {
    mounted() {
        const token = localStorage.getItem('authToken');
        if (!token) { window.location.href = '/login.html'; return; }
-        const filter = new URLSearchParams(window.location.search).get('filter');
-        if (filter) this.filterStatus = filter;
+        const urlFilter = new URLSearchParams(window.location.search).get('filter');
+        if (urlFilter) this.filterStatus = urlFilter;
        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.fetchTopics(); this.fetchTodayCount(); })
            .catch(() => { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; });
+    },
+    watch: {
+        topics() {
+            const urlFilter = new URLSearchParams(window.location.search).get('filter');
+            if (urlFilter) this.filterStatus = urlFilter;
+        }
    }
 };
 const app = Vue.createApp(TopicsApp);
 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); }
+if (window.installIcons) { window.installIcons(app); }
+if (window.installUniNav) { window.installUniNav(app); }
 app.mount('#app');
    </script>
 </body>