admin/yunrui_asset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 集中管理配置常量并优化样式一致性

Browse Source
This commit is contained in:
zhang1106
2026-03-06 14:39:52 +08:00
parent 0cd0107008
commit 885ac47fd2
19 changed files with 348 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/index.js
+3 -4
View File
@@ -1,10 +1,9 @@
import axios from 'axios';
const API_BASE_URL = '/api';
import { API_CONFIG } from '../config/api';
const api = axios.create({
baseURL: API_BASE_URL,
timeout: 30000,
baseURL: API_CONFIG.baseURL,
timeout: API_CONFIG.timeout,
headers: {
'Content-Type': 'application/json',
},
frontend/src/config/api.js
+25
View File
@@ -0,0 +1,25 @@
/**
* API 相关配置
* 集中管理 API 超时、分页、防抖等配置
*/
export const API_CONFIG = {
timeout: parseInt(import.meta.env.VITE_API_TIMEOUT, 10) || 30000,
baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
pagination: {
defaultPageSize: 10,
maxPageSize: 1000,
pageSizeOptions: [10, 20, 30, 50, 100],
},
debounceDelay: 300,
retry: {
maxRetries: 3,
retryDelay: 1000,
},
};
export default API_CONFIG;
frontend/src/config/theme.js
+20
View File
@@ -89,6 +89,26 @@ export const designTokens = {
lg: '24px',
xl: '32px',
},
typography: {
xs: '12px',
sm: '13px',
base: '14px',
md: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '32px',
'4xl': '40px',
},
zIndex: {
dropdown: 1000,
sticky: 1020,
fixed: 1030,
modalBackdrop: 1040,
modal: 1050,
popover: 1060,
tooltip: 1070,
},
};
export default designTokens;
frontend/src/hooks/useDebounce.js
+3 -2
View File
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react';
import { API_CONFIG } from '../config/api';
/**
* 防抖 Hook
@@ -15,7 +16,7 @@ import { useState, useEffect } from 'react';
* fetchData(debouncedKeyword);
* }, [debouncedKeyword]);
*/
export function useDebounce(value, delay = 300) {
export function useDebounce(value, delay = API_CONFIG.debounceDelay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
@@ -44,7 +45,7 @@ export function useDebounce(value, delay = 300) {
*
* <Input onChange={e => debouncedSearch(e.target.value)} />
*/
export function useDebouncedCallback(callback, delay = 300) {
export function useDebouncedCallback(callback, delay = API_CONFIG.debounceDelay) {
const [timeoutId, setTimeoutId] = useState(null);
const debouncedFn = (...args) => {
frontend/src/pages/DeviceManagement.jsx
+36 -12
View File
@@ -1620,7 +1620,7 @@ function DeviceManagement() {
<Modal
title={
<div style={modalHeaderStyle}>
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
{editingDevice ? (
<EditOutlined style={{ color: '#667eea' }} />
) : (
@@ -1635,7 +1635,11 @@ function DeviceManagement() {
width={700}
style={{ borderRadius: '16px' }}
styles={{
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 50px 16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
body: { padding: '24px' },
}}
className="device-modal"
@@ -1941,7 +1945,7 @@ function DeviceManagement() {
<Modal
title={
<div style={modalHeaderStyle}>
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
<SettingOutlined style={{ color: '#667eea' }} />
字段配置
</div>
@@ -1951,7 +1955,11 @@ function DeviceManagement() {
footer={null}
width={600}
styles={{
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
body: { padding: '24px' },
}}
>
@@ -2036,7 +2044,7 @@ function DeviceManagement() {
<Modal
title={
<div style={modalHeaderStyle}>
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
<UploadOutlined style={{ color: '#667eea' }} />
导入设备
</div>
@@ -2053,7 +2061,11 @@ function DeviceManagement() {
width={650}
destroyOnHidden
styles={{
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
body: { padding: '24px' },
}}
>
@@ -2369,7 +2381,7 @@ function DeviceManagement() {
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '18px', fontWeight: 600 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '18px', fontWeight: 600, paddingRight: '32px' }}>
<AppstoreOutlined style={{ color: '#667eea' }} />
设备详情
</div>
@@ -2434,7 +2446,11 @@ function DeviceManagement() {
width={700}
destroyOnHidden
styles={{
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
body: { padding: '0', overflow: 'auto' },
}}
>
@@ -2599,7 +2615,7 @@ function DeviceManagement() {
<Modal
title={
<div style={modalHeaderStyle}>
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
<ReloadOutlined style={{ color: '#52c41a' }} />
批量状态变更
</div>
@@ -2637,7 +2653,11 @@ function DeviceManagement() {
]}
destroyOnHidden
styles={{
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
body: { padding: '24px' },
}}
>
@@ -2664,7 +2684,7 @@ function DeviceManagement() {
<Modal
title={
<div style={modalHeaderStyle}>
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
<ExportOutlined style={{ color: '#fa8c16' }} />
导出设备数据
</div>
@@ -2702,7 +2722,11 @@ function DeviceManagement() {
]}
destroyOnHidden
styles={{
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
body: { padding: '24px' },
}}
width={600}
frontend/src/pages/RackManagement.jsx
+32 -4
View File
@@ -755,6 +755,23 @@ function RackManagement() {
return (
<div style={containerStyle}>
<style>{`
.ant-modal-close {
top: 16px !important;
right: 16px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
.ant-modal-close-x {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
`}</style>
<div style={headerStyle}>
<div
style={{
@@ -969,7 +986,7 @@ function RackManagement() {
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '32px' }}>
<div
style={{
width: '4px',
@@ -988,9 +1005,16 @@ function RackManagement() {
destroyOnHidden
styles={{
body: { padding: '24px' },
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 50px 16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
}}
style={{ borderRadius: '16px' }}
classNames={{
header: 'modal-header-fix',
}}
>
<Form form={form} layout="vertical" onFinish={handleSubmit}>
<Row gutter={16}>
@@ -1231,7 +1255,7 @@ function RackManagement() {
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '32px' }}>
<div
style={{
width: '4px',
@@ -1256,7 +1280,11 @@ function RackManagement() {
destroyOnHidden
styles={{
body: { padding: '24px' },
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
}}
style={{ borderRadius: '16px' }}
>
frontend/src/pages/RoomManagement.jsx
+23 -2
View File
@@ -591,6 +591,23 @@ function RoomManagement() {
return (
<div style={containerStyle}>
<style>{`
.ant-modal-close {
top: 16px !important;
right: 16px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
.ant-modal-close-x {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
`}</style>
<div style={headerStyle}>
<div
style={{
@@ -765,7 +782,7 @@ function RoomManagement() {
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '32px' }}>
<div
style={{
width: '4px',
@@ -784,7 +801,11 @@ function RoomManagement() {
destroyOnHidden
styles={{
body: { padding: '24px' },
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
}}
style={{ borderRadius: '16px' }}
>
frontend/src/styles/deviceManagementStyles.js
+18
View File
@@ -815,6 +815,24 @@ export const inputPlaceholders = {
// CSS-in-JS 样式字符串生成函数
export const generateGlobalStyles = tokens => `
/* Modal 关闭按钮通用修复 */
.ant-modal-close {
top: 16px !important;
right: 16px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
.ant-modal-close-x {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.device-modal .ant-modal-close {
top: 16px;
right: 24px;