chore: 清理 Docker 相关文件并优化前端布局

- 删除 Docker 相关文件 (docker-compose, Dockerfile, nginx.conf, init.sql 等)
- 优化 platforms.html 卡片布局和响应式样式
- 优化 users.html 格式和移动端卡片设计
- 优化 admin.html 页面结构和表格布局
- 修复各页面 min-height 和溢出问题
- 更新导航组件样式

platform/frontend/platforms.html

@@ -7,31 +7,57 @@
     <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; }
+        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; width: 100%; }
+        .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); }
+        .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; }
-        .platform-card { border: 1px solid #ebeef5; border-radius: 12px; padding: 20px; margin-bottom: 16px; transition: all 0.3s; }
-        .platform-card:hover { border-color: #409eff; box-shadow: 0 2px 12px rgba(64,158,255,0.15); }
-        .platform-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+
+        .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-badge { padding: 4px 12px; border-radius: 16px; font-size: 12px; }
-        .active-badge { background: #f0f9eb; color: #67c23a; }
-        .inactive-badge { background: #f4f4f5; color: #909399; }
-        .platform-info { font-size: 14px; color: #606266; margin-bottom: 12px; }
-        .rule-item { padding: 8px 12px; background: #f5f7fa; border-radius: 4px; margin-bottom: 8px; font-size: 13px; }
+        .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>
@@ -43,19 +69,21 @@
         <navigation-component current-page="platforms" :is-admin="isAdmin" @navigate="redirectToPage"></navigation-component>
         <div class="main-content">
             <main class="content-area">
-                <h2 style="font-size: 24px; font-weight: 700; margin-bottom: 24px; color: #303133;">🌐 平台配置</h2>
-                <div class="card">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px;">
+                <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 v-if="loading" style="text-align: center; padding: 40px;">加载中...</div>
-                    <div v-else-if="platforms.length === 0" style="text-align: center; padding: 40px; color: #909399;">
-                        <div style="font-size: 48px; margin-bottom: 16px;">🌐</div>
-                        <div>暂无平台配置</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">
@@ -64,25 +92,35 @@
                                     <span>{{ getPlatformIcon(p.platform) }}</span>
                                     {{ getPlatformName(p.platform) }}
                                 </div>
-                                <div style="display: flex; gap: 8px; align-items: center;">
-                                    <span class="platform-badge" :class="p.is_active ? 'active-badge' : 'inactive-badge'">
+                                <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-info">
-                                <div style="margin-bottom: 4px;">平台标识: {{ p.platform }}</div>
-                                <div v-if="p.platform_name">平台名称: {{ p.platform_name }}</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">
-                                <div style="font-weight: 600; margin-bottom: 8px;">格式规则:</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">
-                                <div style="font-weight: 600; margin-bottom: 8px;">合规规则:</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>
@@ -138,8 +176,21 @@ const PlatformsApp = {
         }
     },
     methods: {
-        handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
-        redirectToPage(page) { window.location.href = page; },
+        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] || '🌐';
@@ -184,17 +235,7 @@ const PlatformsApp = {
         }
     },
     mounted() {
-        const token = localStorage.getItem('authToken');
-        if (!token) { window.location.href = '/'; 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'); window.location.href = '/'; });
+        this.checkAuth();
     }
 };
 const app = Vue.createApp(PlatformsApp);