diff --git a/static/css/REFACTOR_SUMMARY.md b/static/css/REFACTOR_SUMMARY.md
deleted file mode 100644
index 24b94ff..0000000
--- a/static/css/REFACTOR_SUMMARY.md
+++ /dev/null
@@ -1,152 +0,0 @@
-# CSS模块化拆分完成总结
-
-## 拆分概述
-
-成功将原来的单个 `app.css` 文件（1,279行）按功能模块拆分成10个独立的CSS文件，提高了代码的可维护性和模块化程度。
-
-## 拆分结果
-
-### 文件结构
-```
-static/css/
-├── variables.css # CSS变量和根样式 (19行)
-├── layout.css # 布局相关样式 (134行)
-├── components.css # 通用组件样式 (200行)
-├── dashboard.css # 仪表盘样式 (45行)
-├── keywords.css # 关键词管理样式 (200行)
-├── accounts.css # 账号管理样式 (150行)
-├── logs.css # 日志管理样式 (60行)
-├── notifications.css # 通知渠道样式 (40行)
-├── login.css # 登录相关样式 (70行)
-├── utilities.css # 工具类和响应式样式 (120行)
-└── REFACTOR_SUMMARY.md # 本总结文档
-```
-
-### 模块详细说明
-
-#### 1. variables.css - CSS变量和根样式
-- CSS自定义属性（颜色、阴影、间距）
-- 全局body样式
-- 作为其他模块的基础
-
-#### 2. layout.css - 布局相关样式
-- 侧边栏完整样式系统
-- 主内容区域布局
-- 响应式设计和移动端适配
-- 导航菜单样式
-
-#### 3. components.css - 通用组件样式
-- 卡片组件样式
-- 按钮系统（各种类型和状态）
-- 表格样式
-- 表单控件
-- 模态框和Toast通知
-- 加载动画
-
-#### 4. dashboard.css - 仪表盘样式
-- 统计卡片样式
-- 统计图标和数值显示
-- 仪表盘网格布局
-
-#### 5. keywords.css - 关键词管理样式
-- 关键词容器和头部
-- 输入区域和表单
-- 关键词列表和项目
-- 操作按钮和状态
-
-#### 6. accounts.css - 账号管理样式
-- 账号选择器
-- 状态切换开关
-- Cookie值显示
-- 账号状态徽章
-
-#### 7. logs.css - 日志管理样式
-- 日志容器和滚动条
-- 不同级别的日志样式
-- 时间戳和来源显示
-
-#### 8. notifications.css - 通知渠道样式
-- 通知渠道卡片
-- 悬停效果和交互
-- 图标和按钮样式
-
-#### 9. login.css - 登录相关样式
-- 扫码登录按钮
-- 二维码容器
-- 步骤指引
-- 等待提示动画
-
-#### 10. utilities.css - 工具类和响应式样式
-- 移动端响应式调整
-- 表格优化样式
-- 商品管理特定样式
-- 大屏幕优化
-
-## 加载顺序
-
-CSS文件按以下顺序加载，确保样式的正确层叠：
-
-1. `variables.css` - 变量定义（最先加载）
-2. `layout.css` - 布局基础
-3. `components.css` - 通用组件
-4. `dashboard.css` - 仪表盘功能
-5. `keywords.css` - 关键词管理功能
-6. `accounts.css` - 账号管理功能
-7. `logs.css` - 日志管理功能
-8. `notifications.css` - 通知设置功能
-9. `login.css` - 登录功能
-10. `utilities.css` - 工具类（最后加载，优先级最高）
-
-## 主要优势
-
-### 1. 模块化管理
-- ✅ 每个功能模块独立管理
-- ✅ 便于定位和修改特定功能的样式
-- ✅ 减少样式冲突的可能性
-
-### 2. 开发效率
-- ✅ 开发者可以专注于特定模块
-- ✅ 并行开发不同功能模块
-- ✅ 代码审查更加精确
-
-### 3. 维护便利
-- ✅ 修改某个功能不影响其他模块
-- ✅ 便于添加新功能模块
-- ✅ 便于删除不需要的功能
-
-### 4. 性能优化潜力
-- ✅ 可以按需加载特定模块
-- ✅ 便于实现代码分割
-- ✅ 支持条件加载
-
-## 兼容性保证
-
-- ✅ 保持所有原有样式不变
-- ✅ 保持所有功能正常工作
-- ✅ 保持响应式设计完整
-- ✅ 保持动画效果不变
-
-## 后续优化建议
-
-### 短期优化
-- [ ] 为每个模块添加详细的注释文档
-- [ ] 创建样式指南和使用规范
-- [ ] 添加CSS变量的完整文档
-
-### 长期规划
-- [ ] 考虑引入CSS预处理器（Sass/Less）
-- [ ] 实现主题切换功能
-- [ ] 建立组件库文档系统
-- [ ] 添加CSS单元测试
-
-## 总结
-
-通过这次模块化拆分：
-
-1. **代码组织更清晰**: 每个文件职责单一，便于理解和维护
-2. **开发效率提升**: 开发者可以快速定位到相关样式文件
-3. **团队协作友好**: 减少合并冲突，支持并行开发
-4. **扩展性增强**: 新功能可以独立添加CSS模块
-5. **维护成本降低**: 修改影响范围明确，降低回归风险
-
-这次拆分为项目的长期发展和团队协作奠定了坚实的基础。
diff --git a/static/css/accounts.css b/static/css/accounts.css
deleted file mode 100644
index ea0090b..0000000
--- a/static/css/accounts.css
+++ /dev/null
@@ -1,184 +0,0 @@
-/* 账号选择器现代化 */
-.account-selector {
- background: white;
- border-radius: 16px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- padding: 2rem;
- margin-bottom: 2rem;
-}
-
-.selector-header {
- display: flex;
- align-items: center;
- gap: 1rem;
- margin-bottom: 1.5rem;
-}
-
-.selector-icon {
- width: 48px;
- height: 48px;
- background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
- border-radius: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- font-size: 1.25rem;
-}
-
-.selector-title {
- margin: 0;
- color: #1f2937;
- font-weight: 600;
-}
-
-.selector-subtitle {
- margin: 0;
- color: #6b7280;
- font-size: 0.875rem;
-}
-
-.account-select-wrapper {
- position: relative;
-}
-
-.account-select {
- width: 100%;
- padding: 1rem 1.25rem;
- border: 2px solid #e5e7eb;
- border-radius: 12px;
- font-size: 1rem;
- background: white;
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.account-select:focus {
- outline: none;
- border-color: #667eea;
- box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-/* 账号状态样式 */
-.status-toggle {
- position: relative;
- display: inline-block;
- width: 50px;
- height: 24px;
-}
-
-.status-toggle input {
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-.status-slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #ccc;
- transition: .4s;
- border-radius: 24px;
-}
-
-.status-slider:before {
- position: absolute;
- content: "";
- height: 18px;
- width: 18px;
- left: 3px;
- bottom: 3px;
- background-color: white;
- transition: .4s;
- border-radius: 50%;
-}
-
-input:checked + .status-slider {
- background-color: #10b981;
-}
-
-input:checked + .status-slider:before {
- transform: translateX(26px);
-}
-
-.status-badge {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- padding: 0.25rem 0.5rem;
- border-radius: 12px;
- font-size: 0.875rem;
- font-weight: 500;
- min-width: 2rem;
- height: 1.5rem;
-}
-
-.status-badge.enabled {
- background: #dcfce7;
- color: #166534;
- border: 1px solid #bbf7d0;
-}
-
-.status-badge.disabled {
- background: #fef2f2;
- color: #991b1b;
- border: 1px solid #fecaca;
-}
-
-.account-row.disabled {
- opacity: 0.6;
- background-color: #f9fafb;
-}
-
-.account-row.disabled .cookie-value {
- background-color: #f3f4f6;
-}
-
-/* 关键词管理界面的状态提示 */
-.account-badge .badge.bg-warning {
- animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
- 0% { opacity: 1; }
- 50% { opacity: 0.7; }
- 100% { opacity: 1; }
-}
-
-.disabled-account-notice {
- background: #fef3c7;
- border: 1px solid #f59e0b;
- border-radius: 8px;
- padding: 0.75rem;
- margin-bottom: 1rem;
- color: #92400e;
-}
-
-.disabled-account-notice .bi {
- color: #f59e0b;
-}
-
-.cookie-id {
- font-weight: 600;
- color: var(--primary-color);
- font-size: 1rem;
-}
-
-.cookie-value {
- font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
- font-size: 0.85rem;
- background: #f8fafc;
- padding: 0.75rem;
- border-radius: 8px;
- border: 1px solid #e5e7eb;
- word-break: break-all;
- line-height: 1.4;
- max-height: 120px;
- overflow-y: auto;
- white-space: pre-wrap;
-}
diff --git a/static/css/app.css b/static/css/app.css
new file mode 100644
index 0000000..d37c0dd
--- /dev/null
+++ b/static/css/app.css
@@ -0,0 +1,1278 @@
+:root {
+ --primary-color: #4f46e5;
+ --primary-hover: #4338ca;
+ --primary-light: #6366f1;
+ --secondary-color: #6b7280;
+ --success-color: #10b981;
+ --danger-color: #ef4444;
+ --warning-color: #f59e0b;
+ --light-color: #f9fafb;
+ --dark-color: #1f2937;
+ --border-color: #e5e7eb;
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ }
+
+ body {
+ font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: #f8fafc;
+ min-height: 100vh;
+ padding: 0;
+ margin: 0;
+ }
+
+ /* 侧边栏样式 */
+ .sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ width: 250px;
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+ color: white;
+ z-index: 1000;
+ transition: all 0.3s ease;
+ box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
+ .sidebar-header {
+ padding: 1.5rem 1rem;
+ border-bottom: 1px solid rgba(255,255,255,0.1);
+ flex-shrink: 0;
+ }
+
+ .sidebar-brand {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: white;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ }
+
+ .sidebar-nav {
+ padding: 1rem 0;
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+
+ /* 侧边栏滚动条样式 */
+ .sidebar-nav::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ .sidebar-nav::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 3px;
+ }
+
+ .sidebar-nav::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 3px;
+ transition: background 0.3s ease;
+ }
+
+ .sidebar-nav::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ /* Firefox滚动条样式 */
+ .sidebar-nav {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-item {
+ margin: 0.25rem 0;
+ }
+
+ .nav-link {
+ display: flex;
+ align-items: center;
+ padding: 0.75rem 1.5rem;
+ color: rgba(255,255,255,0.8);
+ text-decoration: none;
+ transition: all 0.3s ease;
+ border-left: 3px solid transparent;
+ }
+
+ .nav-link:hover {
+ color: white;
+ background: rgba(255,255,255,0.1);
+ border-left-color: rgba(255,255,255,0.5);
+ }
+
+ .nav-link.active {
+ color: white;
+ background: rgba(255,255,255,0.15);
+ border-left-color: white;
+ }
+
+ .nav-link i {
+ margin-right: 0.75rem;
+ width: 20px;
+ text-align: center;
+ }
+
+ .nav-divider {
+ padding: 0.5rem 1rem;
+ border-top: 1px solid rgba(255,255,255,0.1);
+ margin-top: 0.5rem;
+ }
+
+ .nav-divider small {
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ /* 主内容区域 */
+ .main-content {
+ margin-left: 250px;
+ min-height: 100vh;
+ background: #f8fafc;
+ }
+
+ .content-header {
+ background: white;
+ padding: 1.5rem 2rem;
+ border-bottom: 1px solid var(--border-color);
+ box-shadow: var(--shadow-sm);
+ }
+
+ .content-body {
+ padding: 2rem;
+ }
+
+ /* 响应式设计 */
+ @media (max-width: 768px) {
+ .sidebar {
+ transform: translateX(-100%);
+ }
+
+ .sidebar.show {
+ transform: translateX(0);
+ }
+
+ .main-content {
+ margin-left: 0;
+ }
+
+ .mobile-toggle {
+ display: block !important;
+ }
+ }
+
+ .mobile-toggle {
+ display: none;
+ position: fixed;
+ top: 1rem;
+ left: 1rem;
+ z-index: 1001;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ padding: 0.5rem;
+ box-shadow: var(--shadow-md);
+ }
+
+ /* 仪表盘样式 */
+ .dashboard-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ .stat-card {
+ background: white;
+ border-radius: 12px;
+ padding: 1.5rem;
+ box-shadow: var(--shadow-sm);
+ border: 1px solid var(--border-color);
+ transition: all 0.3s ease;
+ }
+
+ .stat-card:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-md);
+ }
+
+ .stat-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .stat-icon.primary {
+ background: rgba(79, 70, 229, 0.1);
+ color: var(--primary-color);
+ }
+
+ .stat-icon.success {
+ background: rgba(16, 185, 129, 0.1);
+ color: var(--success-color);
+ }
+
+ .stat-icon.warning {
+ background: rgba(245, 158, 11, 0.1);
+ color: var(--warning-color);
+ }
+
+ .stat-number {
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--dark-color);
+ margin-bottom: 0.5rem;
+ }
+
+ .stat-label {
+ color: var(--secondary-color);
+ font-size: 0.875rem;
+ font-weight: 500;
+ }
+
+ /* 内容区域样式 */
+ .content-section {
+ display: none;
+ }
+
+ .content-section.active {
+ display: block;
+ }
+
+ /* 日志管理样式 */
+ .log-container {
+ height: 70vh;
+ overflow-y: auto;
+ background-color: #1e1e1e;
+ color: #d4d4d4;
+ font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+ font-size: 12px;
+ line-height: 1.2;
+ padding: 8px;
+ border-radius: 4px;
+ }
+
+ .log-entry {
+ margin-bottom: 0px;
+ padding: 1px 0;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ line-height: 1.2;
+ }
+
+ .log-entry.DEBUG {
+ color: #9cdcfe;
+ }
+
+ .log-entry.INFO {
+ color: #4ec9b0;
+ }
+
+ .log-entry.WARNING {
+ color: #dcdcaa;
+ }
+
+ .log-entry.ERROR {
+ color: #f48771;
+ }
+
+ .log-entry.CRITICAL {
+ color: #ff6b6b;
+ font-weight: bold;
+ }
+
+ .log-timestamp {
+ color: #808080;
+ }
+
+ .log-level {
+ font-weight: bold;
+ margin: 0 5px;
+ }
+
+ .log-source {
+ color: #569cd6;
+ }
+
+ .log-message {
+ color: inherit;
+ }
+
+ .log-container::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ .log-container::-webkit-scrollbar-track {
+ background: #2d2d30;
+ }
+
+ .log-container::-webkit-scrollbar-thumb {
+ background: #464647;
+ border-radius: 4px;
+ }
+
+ .log-container::-webkit-scrollbar-thumb:hover {
+ background: #5a5a5c;
+ }
+
+ /* 关键词管理现代化样式 */
+ .keyword-container {
+ background: white;
+ border-radius: 16px;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ transition: all 0.3s ease;
+ }
+
+ .keyword-header {
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+ color: white;
+ padding: 1.5rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .keyword-header h3 {
+ margin: 0;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ }
+
+ .keyword-header .account-badge {
+ background: rgba(255, 255, 255, 0.2);
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.875rem;
+ font-weight: 500;
+ }
+
+ .keyword-input-area {
+ padding: 2rem;
+ background: #f8fafc;
+ border-bottom: 1px solid #e5e7eb;
+ }
+
+ .keyword-input-group {
+ display: grid;
+ grid-template-columns: 1fr 2fr 1fr auto;
+ gap: 1rem;
+ align-items: end;
+ }
+
+ .input-field {
+ position: relative;
+ }
+
+ .input-field label {
+ position: absolute;
+ top: -0.5rem;
+ left: 0.75rem;
+ background: #f8fafc;
+ padding: 0 0.5rem;
+ font-size: 0.75rem;
+ font-weight: 500;
+ color: #6b7280;
+ z-index: 1;
+ }
+
+ .input-field input, .input-field select {
+ width: 100%;
+ padding: 1rem 0.75rem 0.75rem;
+ border: 2px solid #e5e7eb;
+ border-radius: 12px;
+ font-size: 0.875rem;
+ transition: all 0.3s ease;
+ background: white;
+ }
+
+ .input-field input:focus {
+ outline: none;
+ border-color: #667eea;
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+ }
+
+ .add-btn {
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+ color: white;
+ border: none;
+ border-radius: 12px;
+ padding: 1rem 1.5rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ .add-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
+ }
+
+ .add-btn:active {
+ transform: translateY(0);
+ }
+
+ .keywords-list {
+ padding: 1.5rem 2rem 2rem;
+ max-height: 500px;
+ overflow-y: auto;
+ }
+
+ .keyword-item {
+ background: white;
+ border: 1px solid #e5e7eb;
+ border-radius: 12px;
+ margin-bottom: 1rem;
+ transition: all 0.3s ease;
+ overflow: hidden;
+ }
+
+ .keyword-item:hover {
+ border-color: #667eea;
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+ transform: translateY(-1px);
+ }
+
+ .keyword-item-header {
+ padding: 1rem 1.5rem;
+ background: #f8fafc;
+ border-bottom: 1px solid #e5e7eb;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .keyword-tag {
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.875rem;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ .keyword-actions {
+ display: flex;
+ gap: 0.5rem;
+ }
+
+ .action-btn {
+ width: 36px;
+ height: 36px;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .edit-btn {
+ background: #f3f4f6;
+ color: #6b7280;
+ }
+
+ .edit-btn:hover {
+ background: #e5e7eb;
+ color: #374151;
+ }
+
+ .delete-btn {
+ background: #fef2f2;
+ color: #ef4444;
+ }
+
+ .delete-btn:hover {
+ background: #fee2e2;
+ color: #dc2626;
+ }
+
+ .keyword-content {
+ padding: 1.5rem;
+ }
+
+ .reply-text {
+ color: #374151;
+ line-height: 1.6;
+ margin: 0;
+ font-size: 0.875rem;
+ }
+
+ .empty-state {
+ text-align: center;
+ padding: 4rem 2rem;
+ color: #6b7280;
+ }
+
+ .empty-state i {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ opacity: 0.5;
+ }
+
+ .empty-state h3 {
+ margin: 0 0 0.5rem;
+ color: #374151;
+ }
+
+ .empty-state p {
+ margin: 0 0 2rem;
+ font-size: 0.875rem;
+ }
+
+ .quick-add-btn {
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+ color: white;
+ border: none;
+ border-radius: 12px;
+ padding: 0.75rem 1.5rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .quick-add-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+ }
+
+ /* 账号选择器现代化 */
+ .account-selector {
+ background: white;
+ border-radius: 16px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 2rem;
+ margin-bottom: 2rem;
+ }
+
+ .selector-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .selector-icon {
+ width: 48px;
+ height: 48px;
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 1.25rem;
+ }
+
+ .selector-title {
+ margin: 0;
+ color: #1f2937;
+ font-weight: 600;
+ }
+
+ .selector-subtitle {
+ margin: 0;
+ color: #6b7280;
+ font-size: 0.875rem;
+ }
+
+ .account-select-wrapper {
+ position: relative;
+ }
+
+ .account-select {
+ width: 100%;
+ padding: 1rem 1.25rem;
+ border: 2px solid #e5e7eb;
+ border-radius: 12px;
+ font-size: 1rem;
+ background: white;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .account-select:focus {
+ outline: none;
+ border-color: #667eea;
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+ }
+
+ /* 账号状态样式 */
+ .status-toggle {
+ position: relative;
+ display: inline-block;
+ width: 50px;
+ height: 24px;
+ }
+
+ .status-toggle input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .status-slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ transition: .4s;
+ border-radius: 24px;
+ }
+
+ .status-slider:before {
+ position: absolute;
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: 3px;
+ bottom: 3px;
+ background-color: white;
+ transition: .4s;
+ border-radius: 50%;
+ }
+
+ input:checked + .status-slider {
+ background-color: #10b981;
+ }
+
+ input:checked + .status-slider:before {
+ transform: translateX(26px);
+ }
+
+ .status-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.25rem 0.5rem;
+ border-radius: 12px;
+ font-size: 0.875rem;
+ font-weight: 500;
+ min-width: 2rem;
+ height: 1.5rem;
+ }
+
+ .status-badge.enabled {
+ background: #dcfce7;
+ color: #166534;
+ border: 1px solid #bbf7d0;
+ }
+
+ .status-badge.disabled {
+ background: #fef2f2;
+ color: #991b1b;
+ border: 1px solid #fecaca;
+ }
+
+ .account-row.disabled {
+ opacity: 0.6;
+ background-color: #f9fafb;
+ }
+
+ .account-row.disabled .cookie-value {
+ background-color: #f3f4f6;
+ }
+
+ /* 关键词管理界面的状态提示 */
+ .account-badge .badge.bg-warning {
+ animation: pulse 2s infinite;
+ }
+
+ @keyframes pulse {
+ 0% { opacity: 1; }
+ 50% { opacity: 0.7; }
+ 100% { opacity: 1; }
+ }
+
+ .disabled-account-notice {
+ background: #fef3c7;
+ border: 1px solid #f59e0b;
+ border-radius: 8px;
+ padding: 0.75rem;
+ margin-bottom: 1rem;
+ color: #92400e;
+ }
+
+ .disabled-account-notice .bi {
+ color: #f59e0b;
+ }
+
+
+
+ /* 响应式设计 */
+ @media (max-width: 768px) {
+ .keyword-input-group {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .keyword-item-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
+ }
+
+ .keyword-actions {
+ align-self: flex-end;
+ }
+
+ .status-toggle {
+ width: 40px;
+ height: 20px;
+ }
+
+ .status-slider:before {
+ height: 14px;
+ width: 14px;
+ left: 3px;
+ bottom: 3px;
+ }
+
+ input:checked + .status-slider:before {
+ transform: translateX(20px);
+ }
+ }
+ .card {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 16px;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+ margin-bottom: 2rem;
+ }
+
+ .card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ }
+
+ .card-header {
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+ color: white;
+ border: none;
+ border-radius: 16px 16px 0 0 !important;
+ font-weight: 600;
+ font-size: 1.1rem;
+ padding: 1.25rem 1.5rem;
+ }
+
+ .card-body {
+ padding: 1.5rem;
+ }
+ .btn {
+ border-radius: 10px;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.5rem 1rem;
+ }
+
+ .btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ }
+
+ .btn-primary {
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+ border: none;
+ }
+
+ .btn-success {
+ background: linear-gradient(135deg, var(--success-color), #059669);
+ border: none;
+ }
+
+ .btn-danger {
+ background: linear-gradient(135deg, var(--danger-color), #dc2626);
+ border: none;
+ }
+
+ .btn-outline-primary {
+ border: 2px solid var(--primary-color);
+ color: var(--primary-color);
+ }
+
+ .btn-outline-primary:hover {
+ background: var(--primary-color);
+ border-color: var(--primary-color);
+ color: white;
+ }
+
+ .btn-outline-success {
+ border: 2px solid var(--success-color);
+ color: var(--success-color);
+ }
+
+ .btn-outline-success:hover {
+ background: var(--success-color);
+ border-color: var(--success-color);
+ color: white;
+ }
+
+ .btn-outline-info {
+ border: 2px solid #0dcaf0;
+ color: #0dcaf0;
+ }
+
+ .btn-outline-info:hover {
+ background: #0dcaf0;
+ border-color: #0dcaf0;
+ color: white;
+ }
+
+ .btn-outline-danger {
+ border: 2px solid var(--danger-color);
+ color: var(--danger-color);
+ }
+
+ .btn-outline-danger:hover {
+ background: var(--danger-color);
+ border-color: var(--danger-color);
+ color: white;
+ }
+
+ .table {
+ margin-bottom: 0;
+ background: transparent;
+ }
+
+ .table th {
+ border-top: none;
+ border-bottom: 2px solid var(--border-color);
+ font-weight: 600;
+ color: var(--dark-color);
+ background: rgba(79, 70, 229, 0.05);
+ padding: 1rem;
+ }
+
+ .table td {
+ padding: 1rem;
+ border-bottom: 1px solid var(--border-color);
+ vertical-align: middle;
+ }
+
+ .table tbody tr:hover {
+ background: rgba(79, 70, 229, 0.02);
+ }
+ .badge {
+ font-weight: 500;
+ padding: 5px 10px;
+ }
+ .form-control:focus {
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+ }
+ .cookie-value {
+ font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+ font-size: 0.85rem;
+ background: #f8fafc;
+ padding: 0.75rem;
+ border-radius: 8px;
+ border: 1px solid #e5e7eb;
+ word-break: break-all;
+ line-height: 1.4;
+ max-height: 120px;
+ overflow-y: auto;
+ white-space: pre-wrap;
+ }
+ .loading {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(255,255,255,0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ }
+ .loading-spinner {
+ width: 3rem;
+ height: 3rem;
+ }
+ .keyword-editor {
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
+ }
+ .modal-content {
+ border-radius: 10px;
+ border: none;
+ }
+ .modal-header {
+ border-bottom: 1px solid rgba(0,0,0,0.05);
+ }
+ .modal-footer {
+ border-top: 1px solid rgba(0,0,0,0.05);
+ }
+ .cookie-id {
+ font-weight: 600;
+ color: var(--primary-color);
+ font-size: 1rem;
+ }
+
+ .empty-state {
+ text-align: center;
+ padding: 3rem 2rem;
+ color: var(--secondary-color);
+ }
+
+ .empty-state i {
+ opacity: 0.5;
+ }
+
+ .form-control, .form-select {
+ border-radius: 10px;
+ border: 2px solid var(--border-color);
+ transition: all 0.3s ease;
+ padding: 0.75rem 1rem;
+ }
+
+ .form-control:focus, .form-select:focus {
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+ transform: translateY(-1px);
+ }
+
+ .form-label {
+ font-weight: 600;
+ color: var(--dark-color);
+ margin-bottom: 0.5rem;
+ }
+
+ .modal-content {
+ border: none;
+ border-radius: 16px;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ }
+
+ .modal-header {
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+ color: white;
+ border: none;
+ border-radius: 16px 16px 0 0;
+ }
+
+ .toast-container {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 9999;
+ }
+
+ .toast {
+ border: none;
+ border-radius: 12px;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ }
+
+ .btn-group .btn {
+ margin-right: 0.25rem;
+ }
+
+ .btn-group .btn:last-child {
+ margin-right: 0;
+ }
+
+ @media (max-width: 768px) {
+ .container {
+ margin-top: 1rem;
+ padding: 0 1rem;
+ }
+
+ .card-body {
+ padding: 1rem;
+ }
+
+ .btn {
+ font-size: 0.875rem;
+ padding: 0.375rem 0.75rem;
+ }
+
+ .cookie-value {
+ font-size: 0.75rem;
+ max-height: 80px;
+ }
+
+ .btn-group {
+ flex-direction: column;
+ }
+
+ .btn-group .btn {
+ margin-right: 0;
+ margin-bottom: 0.25rem;
+ }
+
+ /* 移动端商品表格优化 */
+ #itemsTableBody .btn-group {
+ flex-direction: row;
+ }
+
+ #itemsTableBody .btn-group .btn {
+ padding: 0.2rem 0.4rem;
+ font-size: 0.75rem;
+ }
+ }
+
+ /* 商品管理表格优化 */
+ #itemsTableBody .btn-group {
+ white-space: nowrap;
+ }
+
+ #itemsTableBody .btn-group .btn {
+ padding: 0.25rem 0.5rem;
+ font-size: 0.875rem;
+ border-radius: 0.25rem;
+ }
+
+ #itemsTableBody .btn-group .btn:first-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ #itemsTableBody .btn-group .btn:last-child {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left: 0;
+ }
+
+ #itemsTableBody .btn-group .btn i {
+ font-size: 0.875rem;
+ }
+
+ /* 表格操作列样式 */
+ .table td:last-child {
+ text-align: center;
+ vertical-align: middle;
+ padding: 0.5rem 0.25rem;
+ }
+
+ /* 表格文本截断优化 */
+ .table td {
+ vertical-align: middle;
+ }
+
+ .table td[title] {
+ cursor: help;
+ }
+
+ /* 商品表格特定优化 */
+ #itemsTableBody td:nth-child(4),
+ #itemsTableBody td:nth-child(5) {
+ max-width: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ /* 扫码登录按钮特殊样式 */
+ .qr-login-btn {
+ background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+ border: none;
+ box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .qr-login-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
+ background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
+ }
+
+ .qr-login-btn:active {
+ transform: translateY(0);
+ }
+
+ .qr-login-btn::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+ transition: left 0.5s;
+ }
+
+ .qr-login-btn:hover::before {
+ left: 100%;
+ }
+
+ /* 二维码容器样式 */
+ .qr-code-wrapper {
+ border: 3px solid #28a745;
+ box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ .qr-code-wrapper:hover {
+ box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
+ }
+
+ /* 步骤指引样式 */
+ .step-item {
+ text-align: center;
+ }
+
+ .step-number {
+ font-weight: bold;
+ font-size: 14px;
+ box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
+ }
+
+ /* 手动输入按钮样式 */
+ .manual-input-btn {
+ transition: all 0.3s ease;
+ }
+
+ .manual-input-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
+ }
+
+ /* 等待提示样式 */
+ .bg-light-warning {
+ background-color: #fff3cd !important;
+ }
+
+ .qr-loading-tip {
+ animation: pulse-warning 2s infinite;
+ }
+
+ @keyframes pulse-warning {
+ 0% {
+ opacity: 0.8;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0.8;
+ }
+ }
+
+ /* 通知渠道卡片样式 */
+ .channel-type-card {
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border: 2px solid transparent;
+ min-height: 180px; /* 设置最小高度，让卡片更紧凑 */
+ }
+
+ .channel-type-card .card-body {
+ padding: 1rem; /* 减少内边距 */
+ }
+
+ .channel-type-card .channel-icon {
+ transition: transform 0.3s ease;
+ margin-bottom: 0.75rem !important; /* 减少图标下方间距 */
+ }
+
+ .channel-type-card .channel-icon i {
+ font-size: 2.2rem !important; /* 减小图标大小 */
+ }
+
+ .channel-type-card .card-title {
+ font-size: 1.1rem; /* 减小标题字体 */
+ margin-bottom: 0.5rem;
+ }
+
+ .channel-type-card .card-text {
+ font-size: 0.85rem; /* 减小描述文字 */
+ margin-bottom: 0.75rem;
+ }
+
+ .channel-type-card .btn {
+ transition: all 0.3s ease;
+ font-size: 0.85rem; /* 减小按钮文字 */
+ padding: 0.375rem 0.75rem; /* 减小按钮内边距 */
+ }
+
+ .channel-type-card:hover {
+ transform: translateY(-3px); /* 减少悬停位移 */
+ box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+ border-color: var(--bs-primary);
+ }
+
+ .channel-type-card:hover .channel-icon {
+ transform: scale(1.05); /* 减少悬停缩放 */
+ }
+
+ .channel-type-card:hover .btn {
+ transform: scale(1.02); /* 减少按钮悬停缩放 */
+ }
+
+ /* 响应式调整 */
+ @media (max-width: 768px) {
+ .qr-login-btn, .manual-input-btn {
+ margin-bottom: 10px;
+ font-size: 0.9rem;
+ }
+
+ .step-item {
+ margin-bottom: 15px;
+ }
+
+ .step-number {
+ width: 25px !important;
+ height: 25px !important;
+ font-size: 12px;
+ }
+
+ .channel-type-card {
+ margin-bottom: 10px;
+ min-height: 160px; /* 移动端稍微减小高度 */
+ }
+
+ .channel-type-card .card-body {
+ padding: 0.75rem; /* 移动端减少内边距 */
+ }
+
+ .channel-type-card .channel-icon i {
+ font-size: 2rem !important; /* 移动端图标更小 */
+ }
+
+ .channel-type-card .card-title {
+ font-size: 1rem; /* 移动端标题更小 */
+ }
+
+ .channel-type-card .card-text {
+ font-size: 0.8rem; /* 移动端描述文字更小 */
+ }
+ }
+
+ /* 大屏幕优化 */
+ @media (min-width: 1400px) {
+ .channel-type-card {
+ min-height: 200px; /* 大屏幕稍微增加高度 */
+ }
+ }
\ No newline at end of file
diff --git a/static/css/components.css b/static/css/components.css
deleted file mode 100644
index 21c4991..0000000
--- a/static/css/components.css
+++ /dev/null
@@ -1,234 +0,0 @@
-.card {
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 16px;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- transition: all 0.3s ease;
- margin-bottom: 2rem;
-}
-
-.card:hover {
- transform: translateY(-4px);
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.card-header {
- background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
- color: white;
- border: none;
- border-radius: 16px 16px 0 0 !important;
- font-weight: 600;
- font-size: 1.1rem;
- padding: 1.25rem 1.5rem;
-}
-
-.card-body {
- padding: 1.5rem;
-}
-
-.btn {
- border-radius: 10px;
- font-weight: 500;
- transition: all 0.3s ease;
- padding: 0.5rem 1rem;
-}
-
-.btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.btn-primary {
- background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
- border: none;
-}
-
-.btn-success {
- background: linear-gradient(135deg, var(--success-color), #059669);
- border: none;
-}
-
-.btn-danger {
- background: linear-gradient(135deg, var(--danger-color), #dc2626);
- border: none;
-}
-
-.btn-outline-primary {
- border: 2px solid var(--primary-color);
- color: var(--primary-color);
-}
-
-.btn-outline-primary:hover {
- background: var(--primary-color);
- border-color: var(--primary-color);
- color: white;
-}
-
-.btn-outline-success {
- border: 2px solid var(--success-color);
- color: var(--success-color);
-}
-
-.btn-outline-success:hover {
- background: var(--success-color);
- border-color: var(--success-color);
- color: white;
-}
-
-.btn-outline-info {
- border: 2px solid #0dcaf0;
- color: #0dcaf0;
-}
-
-.btn-outline-info:hover {
- background: #0dcaf0;
- border-color: #0dcaf0;
- color: white;
-}
-
-.btn-outline-danger {
- border: 2px solid var(--danger-color);
- color: var(--danger-color);
-}
-
-.btn-outline-danger:hover {
- background: var(--danger-color);
- border-color: var(--danger-color);
- color: white;
-}
-
-.table {
- margin-bottom: 0;
- background: transparent;
-}
-
-.table th {
- border-top: none;
- border-bottom: 2px solid var(--border-color);
- font-weight: 600;
- color: var(--dark-color);
- background: rgba(79, 70, 229, 0.05);
- padding: 1rem;
-}
-
-.table td {
- padding: 1rem;
- border-bottom: 1px solid var(--border-color);
- vertical-align: middle;
-}
-
-.table tbody tr:hover {
- background: rgba(79, 70, 229, 0.02);
-}
-
-.badge {
- font-weight: 500;
- padding: 5px 10px;
-}
-
-.form-control:focus {
- border-color: var(--primary-color);
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-.loading {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(255,255,255,0.7);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 9999;
-}
-
-.loading-spinner {
- width: 3rem;
- height: 3rem;
-}
-
-.keyword-editor {
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
-}
-
-.modal-content {
- border-radius: 10px;
- border: none;
-}
-
-.modal-header {
- border-bottom: 1px solid rgba(0,0,0,0.05);
-}
-
-.modal-footer {
- border-top: 1px solid rgba(0,0,0,0.05);
-}
-
-.empty-state {
- text-align: center;
- padding: 3rem 2rem;
- color: var(--secondary-color);
-}
-
-.empty-state i {
- opacity: 0.5;
-}
-
-.form-control, .form-select {
- border-radius: 10px;
- border: 2px solid var(--border-color);
- transition: all 0.3s ease;
- padding: 0.75rem 1rem;
-}
-
-.form-control:focus, .form-select:focus {
- border-color: var(--primary-color);
- box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
- transform: translateY(-1px);
-}
-
-.form-label {
- font-weight: 600;
- color: var(--dark-color);
- margin-bottom: 0.5rem;
-}
-
-.modal-content {
- border: none;
- border-radius: 16px;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- backdrop-filter: blur(10px);
-}
-
-.modal-header {
- background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
- color: white;
- border: none;
- border-radius: 16px 16px 0 0;
-}
-
-.toast-container {
- position: fixed;
- bottom: 20px;
- right: 20px;
- z-index: 9999;
-}
-
-.toast {
- border: none;
- border-radius: 12px;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- backdrop-filter: blur(10px);
-}
-
-.btn-group .btn {
- margin-right: 0.25rem;
-}
-
-.btn-group .btn:last-child {
- margin-right: 0;
-}
diff --git a/static/css/dashboard.css b/static/css/dashboard.css
deleted file mode 100644
index 4098244..0000000
--- a/static/css/dashboard.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/* 仪表盘样式 */
-.dashboard-stats {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: 1.5rem;
- margin-bottom: 2rem;
-}
-
-.stat-card {
- background: white;
- border-radius: 12px;
- padding: 1.5rem;
- box-shadow: var(--shadow-sm);
- border: 1px solid var(--border-color);
- transition: all 0.3s ease;
-}
-
-.stat-card:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-md);
-}
-
-.stat-icon {
- width: 48px;
- height: 48px;
- border-radius: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.5rem;
- margin-bottom: 1rem;
-}
-
-.stat-icon.primary {
- background: rgba(79, 70, 229, 0.1);
- color: var(--primary-color);
-}
-
-.stat-icon.success {
- background: rgba(16, 185, 129, 0.1);
- color: var(--success-color);
-}
-
-.stat-icon.warning {
- background: rgba(245, 158, 11, 0.1);
- color: var(--warning-color);
-}
-
-.stat-number {
- font-size: 2rem;
- font-weight: 700;
- color: var(--dark-color);
- margin-bottom: 0.5rem;
-}
-
-.stat-label {
- color: var(--secondary-color);
- font-size: 0.875rem;
- font-weight: 500;
-}
diff --git a/static/css/keywords.css b/static/css/keywords.css
deleted file mode 100644
index ce59331..0000000
--- a/static/css/keywords.css
+++ /dev/null
@@ -1,246 +0,0 @@
-/* 关键词管理现代化样式 */
-.keyword-container {
- background: white;
- border-radius: 16px;
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
- overflow: hidden;
- transition: all 0.3s ease;
-}
-
-.keyword-header {
- background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
- color: white;
- padding: 1.5rem 2rem;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.keyword-header h3 {
- margin: 0;
- font-weight: 600;
- display: flex;
- align-items: center;
-}
-
-.keyword-header .account-badge {
- background: rgba(255, 255, 255, 0.2);
- padding: 0.5rem 1rem;
- border-radius: 20px;
- font-size: 0.875rem;
- font-weight: 500;
-}
-
-.keyword-input-area {
- padding: 2rem;
- background: #f8fafc;
- border-bottom: 1px solid #e5e7eb;
-}
-
-.keyword-input-group {
- display: grid;
- grid-template-columns: 1fr 2fr 1fr auto;
- gap: 1rem;
- align-items: end;
-}
-
-.input-field {
- position: relative;
-}
-
-.input-field label {
- position: absolute;
- top: -0.5rem;
- left: 0.75rem;
- background: #f8fafc;
- padding: 0 0.5rem;
- font-size: 0.75rem;
- font-weight: 500;
- color: #6b7280;
- z-index: 1;
-}
-
-.input-field input, .input-field select {
- width: 100%;
- padding: 1rem 0.75rem 0.75rem;
- border: 2px solid #e5e7eb;
- border-radius: 12px;
- font-size: 0.875rem;
- transition: all 0.3s ease;
- background: white;
-}
-
-.input-field input:focus {
- outline: none;
- border-color: #667eea;
- box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.add-btn {
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
- color: white;
- border: none;
- border-radius: 12px;
- padding: 1rem 1.5rem;
- font-weight: 600;
- cursor: pointer;
- transition: all 0.3s ease;
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.add-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
-}
-
-.add-btn:active {
- transform: translateY(0);
-}
-
-.keywords-list {
- padding: 1.5rem 2rem 2rem;
- max-height: 500px;
- overflow-y: auto;
-}
-
-.keyword-item {
- background: white;
- border: 1px solid #e5e7eb;
- border-radius: 12px;
- margin-bottom: 1rem;
- transition: all 0.3s ease;
- overflow: hidden;
-}
-
-.keyword-item:hover {
- border-color: #667eea;
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
- transform: translateY(-1px);
-}
-
-.keyword-item-header {
- padding: 1rem 1.5rem;
- background: #f8fafc;
- border-bottom: 1px solid #e5e7eb;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.keyword-tag {
- background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
- color: white;
- padding: 0.5rem 1rem;
- border-radius: 20px;
- font-size: 0.875rem;
- font-weight: 500;
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.keyword-actions {
- display: flex;
- gap: 0.5rem;
-}
-
-.action-btn {
- width: 36px;
- height: 36px;
- border: none;
- border-radius: 8px;
- cursor: pointer;
- transition: all 0.3s ease;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.edit-btn {
- background: #f3f4f6;
- color: #6b7280;
-}
-
-.edit-btn:hover {
- background: #e5e7eb;
- color: #374151;
-}
-
-.delete-btn {
- background: #fef2f2;
- color: #ef4444;
-}
-
-.delete-btn:hover {
- background: #fee2e2;
- color: #dc2626;
-}
-
-.keyword-content {
- padding: 1.5rem;
-}
-
-.reply-text {
- color: #374151;
- line-height: 1.6;
- margin: 0;
- font-size: 0.875rem;
-}
-
-.empty-state {
- text-align: center;
- padding: 4rem 2rem;
- color: #6b7280;
-}
-
-.empty-state i {
- font-size: 4rem;
- margin-bottom: 1rem;
- opacity: 0.5;
-}
-
-.empty-state h3 {
- margin: 0 0 0.5rem;
- color: #374151;
-}
-
-.empty-state p {
- margin: 0 0 2rem;
- font-size: 0.875rem;
-}
-
-.quick-add-btn {
- background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
- color: white;
- border: none;
- border-radius: 12px;
- padding: 0.75rem 1.5rem;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.quick-add-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
- .keyword-input-group {
- grid-template-columns: 1fr;
- gap: 1rem;
- }
-
- .keyword-item-header {
- flex-direction: column;
- align-items: flex-start;
- gap: 1rem;
- }
-
- .keyword-actions {
- align-self: flex-end;
- }
-}
diff --git a/static/css/layout.css b/static/css/layout.css
deleted file mode 100644
index d4af213..0000000
--- a/static/css/layout.css
+++ /dev/null
@@ -1,168 +0,0 @@
-/* 侧边栏样式 */
-.sidebar {
- position: fixed;
- top: 0;
- left: 0;
- height: 100vh;
- width: 250px;
- background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
- color: white;
- z-index: 1000;
- transition: all 0.3s ease;
- box-shadow: 2px 0 10px rgba(0,0,0,0.1);
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-
-.sidebar-header {
- padding: 1.5rem 1rem;
- border-bottom: 1px solid rgba(255,255,255,0.1);
- flex-shrink: 0;
-}
-
-.sidebar-brand {
- font-size: 1.25rem;
- font-weight: 700;
- color: white;
- text-decoration: none;
- display: flex;
- align-items: center;
-}
-
-.sidebar-nav {
- padding: 1rem 0;
- flex: 1;
- overflow-y: auto;
- overflow-x: hidden;
-}
-
-/* 侧边栏滚动条样式 */
-.sidebar-nav::-webkit-scrollbar {
- width: 6px;
-}
-
-.sidebar-nav::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 3px;
-}
-
-.sidebar-nav::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.3);
- border-radius: 3px;
- transition: background 0.3s ease;
-}
-
-.sidebar-nav::-webkit-scrollbar-thumb:hover {
- background: rgba(255, 255, 255, 0.5);
-}
-
-/* Firefox滚动条样式 */
-.sidebar-nav {
- scrollbar-width: thin;
- scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
-}
-
-.nav-item {
- margin: 0.25rem 0;
-}
-
-.nav-link {
- display: flex;
- align-items: center;
- padding: 0.75rem 1.5rem;
- color: rgba(255,255,255,0.8);
- text-decoration: none;
- transition: all 0.3s ease;
- border-left: 3px solid transparent;
-}
-
-.nav-link:hover {
- color: white;
- background: rgba(255,255,255,0.1);
- border-left-color: rgba(255,255,255,0.5);
-}
-
-.nav-link.active {
- color: white;
- background: rgba(255,255,255,0.15);
- border-left-color: white;
-}
-
-.nav-link i {
- margin-right: 0.75rem;
- width: 20px;
- text-align: center;
-}
-
-.nav-divider {
- padding: 0.5rem 1rem;
- border-top: 1px solid rgba(255,255,255,0.1);
- margin-top: 0.5rem;
-}
-
-.nav-divider small {
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-/* 主内容区域 */
-.main-content {
- margin-left: 250px;
- min-height: 100vh;
- background: #f8fafc;
-}
-
-.content-header {
- background: white;
- padding: 1.5rem 2rem;
- border-bottom: 1px solid var(--border-color);
- box-shadow: var(--shadow-sm);
-}
-
-.content-body {
- padding: 2rem;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
- .sidebar {
- transform: translateX(-100%);
- }
-
- .sidebar.show {
- transform: translateX(0);
- }
-
- .main-content {
- margin-left: 0;
- }
-
- .mobile-toggle {
- display: block !important;
- }
-}
-
-.mobile-toggle {
- display: none;
- position: fixed;
- top: 1rem;
- left: 1rem;
- z-index: 1001;
- background: var(--primary-color);
- color: white;
- border: none;
- border-radius: 8px;
- padding: 0.5rem;
- box-shadow: var(--shadow-md);
-}
-
-/* 内容区域样式 */
-.content-section {
- display: none;
-}
-
-.content-section.active {
- display: block;
-}
diff --git a/static/css/login.css b/static/css/login.css
deleted file mode 100644
index 0c1ffba..0000000
--- a/static/css/login.css
+++ /dev/null
@@ -1,87 +0,0 @@
-/* 扫码登录按钮特殊样式 */
-.qr-login-btn {
- background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
- border: none;
- box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
- transition: all 0.3s ease;
- position: relative;
- overflow: hidden;
-}
-
-.qr-login-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
- background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
-}
-
-.qr-login-btn:active {
- transform: translateY(0);
-}
-
-.qr-login-btn::before {
- content: '';
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
- transition: left 0.5s;
-}
-
-.qr-login-btn:hover::before {
- left: 100%;
-}
-
-/* 二维码容器样式 */
-.qr-code-wrapper {
- border: 3px solid #28a745;
- box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
- transition: all 0.3s ease;
-}
-
-.qr-code-wrapper:hover {
- box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
-}
-
-/* 步骤指引样式 */
-.step-item {
- text-align: center;
-}
-
-.step-number {
- font-weight: bold;
- font-size: 14px;
- box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
-}
-
-/* 手动输入按钮样式 */
-.manual-input-btn {
- transition: all 0.3s ease;
-}
-
-.manual-input-btn:hover {
- transform: translateY(-1px);
- box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
-}
-
-/* 等待提示样式 */
-.bg-light-warning {
- background-color: #fff3cd !important;
-}
-
-.qr-loading-tip {
- animation: pulse-warning 2s infinite;
-}
-
-@keyframes pulse-warning {
- 0% {
- opacity: 0.8;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- opacity: 0.8;
- }
-}
diff --git a/static/css/logs.css b/static/css/logs.css
deleted file mode 100644
index 5f23392..0000000
--- a/static/css/logs.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* 日志管理样式 */
-.log-container {
- height: 70vh;
- overflow-y: auto;
- background-color: #1e1e1e;
- color: #d4d4d4;
- font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
- font-size: 12px;
- line-height: 1.2;
- padding: 8px;
- border-radius: 4px;
-}
-
-.log-entry {
- margin-bottom: 0px;
- padding: 1px 0;
- word-wrap: break-word;
- white-space: pre-wrap;
- line-height: 1.2;
-}
-
-.log-entry.DEBUG {
- color: #9cdcfe;
-}
-
-.log-entry.INFO {
- color: #4ec9b0;
-}
-
-.log-entry.WARNING {
- color: #dcdcaa;
-}
-
-.log-entry.ERROR {
- color: #f48771;
-}
-
-.log-entry.CRITICAL {
- color: #ff6b6b;
- font-weight: bold;
-}
-
-.log-timestamp {
- color: #808080;
-}
-
-.log-level {
- font-weight: bold;
- margin: 0 5px;
-}
-
-.log-source {
- color: #569cd6;
-}
-
-.log-message {
- color: inherit;
-}
-
-.log-container::-webkit-scrollbar {
- width: 8px;
-}
-
-.log-container::-webkit-scrollbar-track {
- background: #2d2d30;
-}
-
-.log-container::-webkit-scrollbar-thumb {
- background: #464647;
- border-radius: 4px;
-}
-
-.log-container::-webkit-scrollbar-thumb:hover {
- background: #5a5a5c;
-}
diff --git a/static/css/notifications.css b/static/css/notifications.css
deleted file mode 100644
index ceb4a4c..0000000
--- a/static/css/notifications.css
+++ /dev/null
@@ -1,50 +0,0 @@
-/* 通知渠道卡片样式 */
-.channel-type-card {
- cursor: pointer;
- transition: all 0.3s ease;
- border: 2px solid transparent;
- min-height: 180px; /* 设置最小高度，让卡片更紧凑 */
-}
-
-.channel-type-card .card-body {
- padding: 1rem; /* 减少内边距 */
-}
-
-.channel-type-card .channel-icon {
- transition: transform 0.3s ease;
- margin-bottom: 0.75rem !important; /* 减少图标下方间距 */
-}
-
-.channel-type-card .channel-icon i {
- font-size: 2.2rem !important; /* 减小图标大小 */
-}
-
-.channel-type-card .card-title {
- font-size: 1.1rem; /* 减小标题字体 */
- margin-bottom: 0.5rem;
-}
-
-.channel-type-card .card-text {
- font-size: 0.85rem; /* 减小描述文字 */
- margin-bottom: 0.75rem;
-}
-
-.channel-type-card .btn {
- transition: all 0.3s ease;
- font-size: 0.85rem; /* 减小按钮文字 */
- padding: 0.375rem 0.75rem; /* 减小按钮内边距 */
-}
-
-.channel-type-card:hover {
- transform: translateY(-3px); /* 减少悬停位移 */
- box-shadow: 0 6px 20px rgba(0,0,0,0.12);
- border-color: var(--bs-primary);
-}
-
-.channel-type-card:hover .channel-icon {
- transform: scale(1.05); /* 减少悬停缩放 */
-}
-
-.channel-type-card:hover .btn {
- transform: scale(1.02); /* 减少按钮悬停缩放 */
-}
diff --git a/static/css/utilities.css b/static/css/utilities.css
deleted file mode 100644
index 3efa98a..0000000
--- a/static/css/utilities.css
+++ /dev/null
@@ -1,149 +0,0 @@
-@media (max-width: 768px) {
- .container {
- margin-top: 1rem;
- padding: 0 1rem;
- }
-
- .card-body {
- padding: 1rem;
- }
-
- .btn {
- font-size: 0.875rem;
- padding: 0.375rem 0.75rem;
- }
-
- .cookie-value {
- font-size: 0.75rem;
- max-height: 80px;
- }
-
- .btn-group {
- flex-direction: column;
- }
-
- .btn-group .btn {
- margin-right: 0;
- margin-bottom: 0.25rem;
- }
-
- /* 移动端商品表格优化 */
- #itemsTableBody .btn-group {
- flex-direction: row;
- }
-
- #itemsTableBody .btn-group .btn {
- padding: 0.2rem 0.4rem;
- font-size: 0.75rem;
- }
-
- .status-toggle {
- width: 40px;
- height: 20px;
- }
-
- .status-slider:before {
- height: 14px;
- width: 14px;
- left: 3px;
- bottom: 3px;
- }
-
- input:checked + .status-slider:before {
- transform: translateX(20px);
- }
-
- .qr-login-btn, .manual-input-btn {
- margin-bottom: 10px;
- font-size: 0.9rem;
- }
-
- .step-item {
- margin-bottom: 15px;
- }
-
- .step-number {
- width: 25px !important;
- height: 25px !important;
- font-size: 12px;
- }
-
- .channel-type-card {
- margin-bottom: 10px;
- min-height: 160px; /* 移动端稍微减小高度 */
- }
-
- .channel-type-card .card-body {
- padding: 0.75rem; /* 移动端减少内边距 */
- }
-
- .channel-type-card .channel-icon i {
- font-size: 2rem !important; /* 移动端图标更小 */
- }
-
- .channel-type-card .card-title {
- font-size: 1rem; /* 移动端标题更小 */
- }
-
- .channel-type-card .card-text {
- font-size: 0.8rem; /* 移动端描述文字更小 */
- }
-}
-
-/* 商品管理表格优化 */
-#itemsTableBody .btn-group {
- white-space: nowrap;
-}
-
-#itemsTableBody .btn-group .btn {
- padding: 0.25rem 0.5rem;
- font-size: 0.875rem;
- border-radius: 0.25rem;
-}
-
-#itemsTableBody .btn-group .btn:first-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-}
-
-#itemsTableBody .btn-group .btn:last-child {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left: 0;
-}
-
-#itemsTableBody .btn-group .btn i {
- font-size: 0.875rem;
-}
-
-/* 表格操作列样式 */
-.table td:last-child {
- text-align: center;
- vertical-align: middle;
- padding: 0.5rem 0.25rem;
-}
-
-/* 表格文本截断优化 */
-.table td {
- vertical-align: middle;
-}
-
-.table td[title] {
- cursor: help;
-}
-
-/* 商品表格特定优化 */
-#itemsTableBody td:nth-child(4),
-#itemsTableBody td:nth-child(5) {
- max-width: 200px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-/* 大屏幕优化 */
-@media (min-width: 1400px) {
- .channel-type-card {
- min-height: 200px; /* 大屏幕稍微增加高度 */
- }
-}
diff --git a/static/css/variables.css b/static/css/variables.css
deleted file mode 100644
index 5b76aff..0000000
--- a/static/css/variables.css
+++ /dev/null
@@ -1,23 +0,0 @@
-:root {
- --primary-color: #4f46e5;
- --primary-hover: #4338ca;
- --primary-light: #6366f1;
- --secondary-color: #6b7280;
- --success-color: #10b981;
- --danger-color: #ef4444;
- --warning-color: #f59e0b;
- --light-color: #f9fafb;
- --dark-color: #1f2937;
- --border-color: #e5e7eb;
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- }
-
- body {
- font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background: #f8fafc;
- min-height: 100vh;
- padding: 0;
- margin: 0;
- }
diff --git a/static/index.html b/static/index.html
index 1646885..2146ca6 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,17 +6,8 @@
闲鱼自动回复管理系统
-
-
-
-
-
-
-
-
-
-
-
+
+