增加自动亮色/暗色主题切换 + 清理 pyc 文件

- 新建 store/theme.tsx: 亮色/暗色/跟随系统三种模式 - App.tsx: ThemeProvider + ConfigProvider 暗色算法 - MainLayout: 侧边栏主题切换按钮，Sider/Content 随主题变化 - 所有页面硬编码颜色替换为 antd token - AssignmentsPage: Tag 用预设颜色名适配暗色，未选中背景用 colorBgContainer - LoginPage: 暗色深色渐变背景 - 从 git 移除所有 __pycache__/*.pyc 文件 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-22 20:09:57 +08:00
parent 2f9b1a8eb2
commit 4522421293
26 changed files with 212 additions and 73 deletions
@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import {
  Card, Table, Button, Select, Input, Tag, Row, Col, Statistic,
-  message, Space, Tabs, Typography, Badge,
+  message, Space, Tabs, Typography, Badge, theme,
 } from 'antd';
 import {
  UserOutlined, CheckCircleOutlined, TeamOutlined,
@@ -28,6 +28,7 @@ interface AccountItem {
 }

 export default function AssignmentsPage() {
+  const { token } = theme.useToken();
  const [accounts, setAccounts] = useState<AccountItem[]>([]);
  const [supportUsers, setSupportUsers] = useState<SupportUser[]>([]);
  const [selectedUser, setSelectedUser] = useState<SupportUser | null>(null);
@@ -219,12 +220,12 @@ export default function AssignmentsPage() {
        </Col>
        <Col span={6}>
          <Card size="small">
-            <Statistic title="已分配" value={assignedCount} valueStyle={{ color: '#3f8600' }} prefix={<CheckCircleOutlined />} />
+            <Statistic title="已分配" value={assignedCount} valueStyle={{ color: token.colorSuccess }} prefix={<CheckCircleOutlined />} />
          </Card>
        </Col>
        <Col span={6}>
          <Card size="small">
-            <Statistic title="未分配" value={unassignedCount} valueStyle={{ color: '#cf1322' }} prefix={<SwapOutlined />} />
+            <Statistic title="未分配" value={unassignedCount} valueStyle={{ color: token.colorError }} prefix={<SwapOutlined />} />
          </Card>
        </Col>
        <Col span={6}>
@@ -258,22 +259,22 @@ export default function AssignmentsPage() {
                      padding: '10px 14px',
                      borderRadius: 6,
                      cursor: 'pointer',
-                      border: `1px solid ${isSelected ? '#1677ff' : '#f0f0f0'}`,
-                      background: isSelected ? '#e6f4ff' : '#fff',
+                      border: `1px solid ${isSelected ? token.colorPrimary : token.colorBorderSecondary}`,
+                      background: isSelected ? token.colorPrimaryBg : token.colorBgContainer,
                      transition: 'all 0.2s',
                    }}
                    onMouseEnter={(e) => {
-                      if (!isSelected) (e.currentTarget as HTMLElement).style.borderColor = '#1677ff';
+                      if (!isSelected) (e.currentTarget as HTMLElement).style.borderColor = token.colorPrimary;
                    }}
                    onMouseLeave={(e) => {
-                      if (!isSelected) (e.currentTarget as HTMLElement).style.borderColor = '#f0f0f0';
+                      if (!isSelected) (e.currentTarget as HTMLElement).style.borderColor = token.colorBorderSecondary;
                    }}
                  >
                    <Space>
-                      <UserOutlined style={{ color: '#1677ff' }} />
+                      <UserOutlined style={{ color: token.colorPrimary }} />
                      <Text strong>{user.username}</Text>
                    </Space>
-                    <Badge count={user.assigned_count} showZero style={{ backgroundColor: '#1677ff' }} />
+                    <Badge count={user.assigned_count} showZero style={{ backgroundColor: token.colorPrimary }} />
                  </div>
                );
              })}
@@ -295,7 +296,7 @@ export default function AssignmentsPage() {
                {selectedUser ? (
                  <>
                    <span>已选中客服：</span>
-                    <Tag color="#1677ff" style={{ fontSize: 14, padding: '2px 10px' }}>
+                    <Tag color="blue" style={{ fontSize: 14, padding: '2px 10px' }}>
                      {selectedUser.username}（已分配 {selectedUser.assigned_count} 个）
                    </Tag>
                  </>
@@ -308,7 +309,7 @@ export default function AssignmentsPage() {
            bodyStyle={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, padding: 0 }}
          >
            {/* 筛选栏 */}
-            <div style={{ padding: '8px 16px', borderBottom: '1px solid #f0f0f0', display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0 }}>
+            <div style={{ padding: '8px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}`, display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0 }}>
              <Input.Search
                placeholder="搜索用户名"
                allowClear
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Table, Button, Card, Row, Col, Statistic, message, Tag, Popconfirm, Space, Typography, Input } from 'antd';
+import { Table, Button, Card, Row, Col, Statistic, message, Tag, Popconfirm, Space, Typography, Input, theme } from 'antd';
 import { DownloadOutlined, DeleteOutlined, CopyOutlined, SearchOutlined } from '@ant-design/icons';
 import { cookieApi } from '../api/modules';
 import { getUser, hasPerm } from '../store/auth';
@@ -8,6 +8,7 @@ import { formatTime } from '../utils/time';
 const { Text } = Typography;

 export default function CookiePage() {
+  const { token } = theme.useToken();
  const [cookies, setCookies] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -184,7 +185,7 @@ export default function CookiePage() {
            <Statistic
              title="已分配"
              value={assignedCount}
-              valueStyle={{ color: '#3f8600' }}
+              valueStyle={{ color: token.colorSuccess }}
            />
          </Card>
        </Col>
@@ -193,7 +194,7 @@ export default function CookiePage() {
            <Statistic
              title="未分配"
              value={unassignedCount}
-              valueStyle={{ color: '#cf1322' }}
+              valueStyle={{ color: token.colorError }}
            />
          </Card>
        </Col>
@@ -1,8 +1,9 @@
-import { Card, Col, Row, Statistic } from 'antd';
+import { Card, Col, Row, Statistic, theme } from 'antd';
 import { useEffect, useState } from 'react';
 import { accountApi, loginApi } from '../api/modules';

 export default function DashboardPage() {
+  const { token } = theme.useToken();
  const [stats, setStats] = useState({ accounts: 0, tasks: 0, success: 0, failed: 0 });

  useEffect(() => {
@@ -34,12 +35,12 @@ export default function DashboardPage() {
        </Col>
        <Col span={6}>
          <Card>
-            <Statistic title="成功" value={stats.success} valueStyle={{ color: '#3f8600' }} />
+            <Statistic title="成功" value={stats.success} valueStyle={{ color: token.colorSuccess }} />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
-            <Statistic title="失败" value={stats.failed} valueStyle={{ color: '#cf1322' }} />
+            <Statistic title="失败" value={stats.failed} valueStyle={{ color: token.colorError }} />
          </Card>
        </Col>
      </Row>
@@ -4,12 +4,14 @@ import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { authApi } from '../api/modules';
 import { setAuth, type AuthUser } from '../store/auth';
+import { useTheme } from '../store/theme';

 const { Title } = Typography;

 export default function LoginPage({ onLogin }: { onLogin?: () => void }) {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
+  const { isDark } = useTheme();

  const onFinish = async (values: { username: string; password: string }) => {
    setLoading(true);
@@ -38,9 +40,11 @@ export default function LoginPage({ onLogin }: { onLogin?: () => void }) {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      background: isDark
+        ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    }}>
-      <Card style={{ width: 380, boxShadow: '0 8px 24px rgba(0,0,0,0.15)' }}>
+      <Card style={{ width: 380, boxShadow: isDark ? '0 8px 24px rgba(0,0,0,0.4)' : '0 8px 24px rgba(0,0,0,0.15)' }}>
        <Title level={3} style={{ textAlign: 'center', marginBottom: 32 }}>
          斗鱼批量登录后台
        </Title>
@@ -57,7 +61,7 @@ export default function LoginPage({ onLogin }: { onLogin?: () => void }) {
            </Button>
          </Form.Item>
        </Form>
-        <div style={{ textAlign: 'center', color: '#999', fontSize: 12 }}>
+        <div style={{ textAlign: 'center', fontSize: 12 }}>
          默认管理员: admin / admin123
        </div>
      </Card>
@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
 import {
-  Table, Button, Select, message, Tag, Space, Spin, InputNumber, Tooltip, Popconfirm,
+  Table, Button, Select, message, Tag, Space, Spin, InputNumber, Tooltip, Popconfirm, theme,
 } from 'antd';
 import { PlayCircleOutlined, StopOutlined, FilterOutlined, ThunderboltOutlined, ReloadOutlined, DownOutlined, UpOutlined, DeleteOutlined } from '@ant-design/icons';
 import { accountApi, loginApi } from '../api/modules';
@@ -39,6 +39,8 @@ export default function LoginTasksPage() {
  const logEndRef = useRef<HTMLDivElement | null>(null);
  const user = getUser();

+  const { token } = theme.useToken();
+
  const canBatch = hasPerm(user, 'login:batch');

  // 从账号中提取所有标签
@@ -259,7 +261,7 @@ export default function LoginTasksPage() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* 标题 + 筛选栏 */}
-      <div style={{ flexShrink: 0, paddingBottom: 8, borderBottom: '1px solid #f0f0f0' }}>
+      <div style={{ flexShrink: 0, paddingBottom: 8, borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
        <h2 style={{ marginTop: 0, marginBottom: 6 }}>登录任务</h2>
        {canBatch && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
@@ -314,7 +316,7 @@ export default function LoginTasksPage() {
              }}
              dropdownRender={(menu) => (
                <>
-                  <div style={{ padding: '4px 8px', borderBottom: '1px solid #f0f0f0', display: 'flex', gap: 8 }}>
+                  <div style={{ padding: '4px 8px', borderBottom: `1px solid ${token.colorBorderSecondary}`, display: 'flex', gap: 8 }}>
                    <Button size="small" type="link" onClick={() => { setSelectedIds(accounts.map((a) => a.id)); setSelectedTags([]); }}>
                      全选 ({accounts.length})
                    </Button>
@@ -327,13 +329,13 @@ export default function LoginTasksPage() {
              )}
            />
            {selectedTags.length > 0 && (
-              <span style={{ color: '#888', fontSize: 12, whiteSpace: 'nowrap' }}>
+              <span style={{ color: token.colorTextSecondary, fontSize: 12, whiteSpace: 'nowrap' }}>
                标签选中 {accounts.filter((a) => selectedTags.includes((a.tag || '').trim())).length} 个
              </span>
            )}
            <Tooltip title="同时登录的账号数，1为顺序执行">
              <Space size={4}>
-                <ThunderboltOutlined style={{ color: '#888' }} />
+                <ThunderboltOutlined style={{ color: token.colorTextSecondary }} />
                <InputNumber
                  min={1}
                  max={10}
@@ -366,10 +368,10 @@ export default function LoginTasksPage() {
      {/* 概览 + 任务列表区域 */}
      <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', paddingTop: 6 }}>
        {/* 概览 */}
-        <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 16, fontSize: 13, color: '#666', padding: '4px 0' }}>
+        <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 16, fontSize: 13, color: token.colorTextSecondary, padding: '4px 0' }}>
          <span>共 <b>{tasks.length}</b> 个任务</span>
-          <span>成功 <b style={{ color: '#3f8600' }}>{successCount}</b></span>
-          <span>失败 <b style={{ color: '#cf1322' }}>{failedCount}</b></span>
+          <span>成功 <b style={{ color: token.colorSuccess }}>{successCount}</b></span>
+          <span>失败 <b style={{ color: token.colorError }}>{failedCount}</b></span>
          {batchId && <span>批次: <b>{batchId}</b></span>}
          <div style={{ flex: 1 }} />
          {selectedRowKeys.length > 0 && (
@@ -410,14 +412,14 @@ export default function LoginTasksPage() {
      </div>

      {/* 实时日志 - 底部可折叠 */}
-      <div style={{ flexShrink: 0, borderTop: '1px solid #f0f0f0', marginTop: 4 }}>
+      <div style={{ flexShrink: 0, borderTop: `1px solid ${token.colorBorderSecondary}`, marginTop: 4 }}>
        <div
          style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', padding: '4px 0', userSelect: 'none' }}
          onClick={() => setLogVisible((v) => !v)}
        >
          <span style={{ fontWeight: 500, fontSize: 13 }}>实时日志</span>
          {logVisible ? <UpOutlined style={{ marginLeft: 6, fontSize: 10 }} /> : <DownOutlined style={{ marginLeft: 6, fontSize: 10 }} />}
-          {logs.length > 0 && <span style={{ marginLeft: 8, fontSize: 12, color: '#999' }}>{logs.length} 条</span>}
+          {logs.length > 0 && <span style={{ marginLeft: 8, fontSize: 12, color: token.colorTextTertiary }}>{logs.length} 条</span>}
          {wsConnected && <Tag color="processing" style={{ marginLeft: 8 }}>连接中</Tag>}
        </div>
        {logVisible && (
@@ -428,7 +430,7 @@ export default function LoginTasksPage() {
              fontFamily: 'monospace',
              fontSize: 12,
              padding: 4,
-              backgroundColor: '#fafafa',
+              backgroundColor: token.colorBgLayout,
              borderRadius: 4,
            }}
          >
@@ -440,10 +442,10 @@ export default function LoginTasksPage() {
                  key={i}
                  style={{
                    color:
-                      log.level === 'error' ? '#ff4d4f' :
-                      log.level === 'success' ? '#52c41a' :
-                      log.level === 'warning' ? '#fa8c16' :
-                      'rgba(0,0,0,0.65)',
+                      log.level === 'error' ? token.colorError :
+                      log.level === 'success' ? token.colorSuccess :
+                      log.level === 'warning' ? token.colorWarning :
+                      token.colorText,
                  }}
                >
                  {log.message}
@@ -1,10 +1,11 @@
 import { useEffect, useState, useRef } from 'react';
-import { Form, Input, Switch, Button, Card, message, Row, Col } from 'antd';
+import { Form, Input, Switch, Button, Card, message, Row, Col, theme } from 'antd';
 import { proxyApi } from '../api/modules';

 const WS_BASE = `ws://${window.location.hostname}:8000`;

 export default function ProxyPage() {
+  const { token } = theme.useToken();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [testing, setTesting] = useState(false);
@@ -100,10 +101,10 @@ export default function ProxyPage() {


  const logColors: Record<string, string> = {
-    error: '#ff4d4f',
-    success: '#52c41a',
-    warning: '#faad14',
-    info: '#333',
+    error: token.colorError,
+    success: token.colorSuccess,
+    warning: token.colorWarning,
+    info: token.colorText,
  };

  return (
@@ -171,10 +172,10 @@ export default function ProxyPage() {
        styles={{ body: { height: '100%', overflow: 'auto', fontFamily: 'monospace', fontSize: 12, padding: '8px 16px' } }}
      >
        {logs.length === 0 ? (
-          <span style={{ color: '#999' }}>点击"测试代理"或"测试白名单"查看日志</span>
+          <span style={{ color: token.colorTextTertiary }}>点击"测试代理"或"测试白名单"查看日志</span>
        ) : (
          logs.map((log, i) => (
-            <div key={i} style={{ color: logColors[log.level] || '#333', lineHeight: '20px' }}>
+            <div key={i} style={{ color: logColors[log.level] || token.colorText, lineHeight: '20px' }}>
              {log.message}
            </div>
          ))