refactor: 大量前端页面/组件样式从硬编码颜色迁移到 antd token 主题变量

This commit is contained in:
xiamuceer-j
2026-03-06 14:14:57 +08:00
parent 7c9716b485
commit f1d7975ea4
40 changed files with 1755 additions and 1375 deletions
+12 -11
View File
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from 'react';
import { useParams } from 'react-router-dom';
import { Card, Table, Tag, Button, Space, message, Modal, Form, Select, InputNumber, Input, Descriptions, Drawer } from 'antd';
import { Card, Table, Tag, Button, Space, message, Modal, Form, Select, InputNumber, Input, Descriptions, Drawer, theme } from 'antd';
import { PlusOutlined, UserOutlined, EditOutlined, DeleteOutlined, UnorderedListOutlined, BankOutlined } from '@ant-design/icons';
import { useStore } from '../store';
import { useCharacterSync } from '../store/hooks';
@@ -58,6 +58,7 @@ export default function Organizations() {
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
const [modal, contextHolder] = Modal.useModal();
const [orgListVisible, setOrgListVisible] = useState(false);
const { token } = theme.useToken();
useEffect(() => {
const handleResize = () => {
@@ -310,7 +311,7 @@ export default function Organizations() {
<div style={{
padding: '16px 0',
marginBottom: 16,
borderBottom: '1px solid #f0f0f0'
borderBottom: `1px solid ${token.colorBorderSecondary}`
}}>
<h2 style={{ margin: 0, fontSize: 24 }}>
<BankOutlined style={{ marginRight: 8 }} />
@@ -335,7 +336,7 @@ export default function Organizations() {
loading={loading}
>
{organizations.length === 0 ? (
<div style={{ textAlign: 'center', padding: '40px 20px', color: '#999' }}>
<div style={{ textAlign: 'center', padding: '40px 20px', color: token.colorTextTertiary }}>
</div>
) : (
@@ -347,15 +348,15 @@ export default function Organizations() {
hoverable
style={{
cursor: 'pointer',
border: selectedOrg?.id === org.id ? '2px solid #1890ff' : '1px solid #d9d9d9',
background: selectedOrg?.id === org.id ? '#e6f7ff' : 'transparent'
border: selectedOrg?.id === org.id ? `2px solid ${token.colorPrimary}` : `1px solid ${token.colorBorder}`,
background: selectedOrg?.id === org.id ? token.colorPrimaryBg : 'transparent'
}}
onClick={() => handleSelectOrganization(org)}
>
<Space direction="vertical" size="small" style={{ width: '100%' }}>
<strong style={{ fontSize: 14 }}>{org.name}</strong>
<Tag color="blue">{org.type}</Tag>
<div style={{ fontSize: '12px', color: '#666' }}>
<div style={{ fontSize: '12px', color: token.colorTextSecondary }}>
: {org.member_count} | : {org.power_level}
</div>
</Space>
@@ -377,7 +378,7 @@ export default function Organizations() {
styles={{ body: { padding: 0 } }}
>
{organizations.length === 0 ? (
<div style={{ textAlign: 'center', padding: '40px 20px', color: '#999' }}>
<div style={{ textAlign: 'center', padding: '40px 20px', color: token.colorTextTertiary }}>
</div>
) : (
@@ -389,8 +390,8 @@ export default function Organizations() {
hoverable
style={{
cursor: 'pointer',
border: selectedOrg?.id === org.id ? '2px solid #1890ff' : '1px solid #d9d9d9',
background: selectedOrg?.id === org.id ? '#e6f7ff' : 'transparent'
border: selectedOrg?.id === org.id ? `2px solid ${token.colorPrimary}` : `1px solid ${token.colorBorder}`,
background: selectedOrg?.id === org.id ? token.colorPrimaryBg : 'transparent'
}}
onClick={() => {
handleSelectOrganization(org);
@@ -400,7 +401,7 @@ export default function Organizations() {
<Space direction="vertical" size="small" style={{ width: '100%' }}>
<strong style={{ fontSize: 14 }}>{org.name}</strong>
<Tag color="blue">{org.type}</Tag>
<div style={{ fontSize: '12px', color: '#666' }}>
<div style={{ fontSize: '12px', color: token.colorTextSecondary }}>
: {org.member_count} | : {org.power_level}
</div>
</Space>
@@ -415,7 +416,7 @@ export default function Organizations() {
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
{!selectedOrg ? (
<Card style={{ height: '100%' }}>
<div style={{ textAlign: 'center', padding: '100px 20px', color: '#999' }}>
<div style={{ textAlign: 'center', padding: '100px 20px', color: token.colorTextTertiary }}>
{isMobile && organizations.length > 0 && (
<Button
type="primary"