1043 lines
22 KiB
JavaScript
1043 lines
22 KiB
JavaScript
/**
|
|
* 设备管理页面样式配置
|
|
* 集中管理所有内联样式对象
|
|
*/
|
|
|
|
import { designTokens } from '../config/theme';
|
|
|
|
const { colors, shadows, borderRadius, transitions, spacing } = designTokens;
|
|
|
|
// 页面容器样式
|
|
export const pageContainerStyle = {
|
|
minHeight: '100vh',
|
|
background: colors.background.secondary,
|
|
padding: spacing.lg,
|
|
};
|
|
|
|
// 头部样式
|
|
export const headerStyle = {
|
|
marginBottom: spacing.lg,
|
|
};
|
|
|
|
// 标题行样式
|
|
export const titleRowStyle = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: spacing.lg,
|
|
flexWrap: 'wrap',
|
|
gap: spacing.md,
|
|
};
|
|
|
|
// 标题区域样式
|
|
export const titleSectionStyle = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: spacing.md,
|
|
};
|
|
|
|
// 标题图标样式
|
|
export const titleIconStyle = {
|
|
width: '44px',
|
|
height: '44px',
|
|
borderRadius: borderRadius.medium,
|
|
background: colors.primary.gradient,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxShadow: shadows.medium,
|
|
};
|
|
|
|
// 标题文本样式
|
|
export const titleTextStyle = {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '2px',
|
|
};
|
|
|
|
// 页面标题样式
|
|
export const pageTitleStyle = {
|
|
fontSize: '22px',
|
|
fontWeight: '700',
|
|
margin: 0,
|
|
color: colors.text.primary,
|
|
lineHeight: 1.2,
|
|
};
|
|
|
|
// 页面副标题样式
|
|
export const pageSubtitleStyle = {
|
|
fontSize: '13px',
|
|
color: colors.text.secondary,
|
|
margin: 0,
|
|
};
|
|
|
|
// 操作按钮基础样式
|
|
export const actionButtonStyle = {
|
|
height: '36px',
|
|
borderRadius: borderRadius.small,
|
|
fontSize: '13px',
|
|
fontWeight: '500',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
};
|
|
|
|
// 主要操作按钮样式
|
|
export const primaryActionStyle = {
|
|
...actionButtonStyle,
|
|
background: colors.primary.gradient,
|
|
border: 'none',
|
|
color: '#ffffff !important',
|
|
boxShadow: shadows.small,
|
|
};
|
|
|
|
// 次要操作按钮样式
|
|
export const secondaryActionStyle = {
|
|
...actionButtonStyle,
|
|
background: colors.background.primary,
|
|
border: `1px solid ${colors.border.light}`,
|
|
color: colors.text.primary,
|
|
};
|
|
|
|
// 危险操作按钮样式
|
|
export const dangerActionStyle = {
|
|
...actionButtonStyle,
|
|
background: colors.error.main,
|
|
border: 'none',
|
|
color: '#ffffff',
|
|
};
|
|
|
|
// 主要按钮样式（大）
|
|
export const primaryButtonStyle = {
|
|
height: '40px',
|
|
borderRadius: borderRadius.small,
|
|
background: colors.primary.gradient,
|
|
border: 'none',
|
|
color: '#ffffff',
|
|
boxShadow: shadows.small,
|
|
fontWeight: '500',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
// 统计卡片行样式
|
|
export const statsRowStyle = {
|
|
display: 'flex',
|
|
gap: spacing.md,
|
|
marginBottom: spacing.lg,
|
|
flexWrap: 'wrap',
|
|
};
|
|
|
|
// 统计卡片基础样式
|
|
export const statCardStyle = {
|
|
flex: 1,
|
|
minWidth: '140px',
|
|
maxWidth: '200px',
|
|
padding: `${spacing.md} ${spacing.lg}`,
|
|
background: colors.background.primary,
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
boxShadow: shadows.small,
|
|
transition: `all ${transitions.fast}`,
|
|
};
|
|
|
|
// 统计数值样式
|
|
export const statValueStyle = {
|
|
fontSize: '24px',
|
|
fontWeight: '700',
|
|
color: colors.text.primary,
|
|
lineHeight: 1.2,
|
|
};
|
|
|
|
// 统计标签样式
|
|
export const statLabelStyle = {
|
|
fontSize: '12px',
|
|
color: colors.text.secondary,
|
|
marginTop: '4px',
|
|
};
|
|
|
|
// 运行中状态统计卡片样式
|
|
export const statCardRunningStyle = {
|
|
...statCardStyle,
|
|
borderLeft: `3px solid ${colors.success.main}`,
|
|
background: `${colors.success.main}08`,
|
|
};
|
|
|
|
// 维护中状态统计卡片样式
|
|
export const statCardMaintenanceStyle = {
|
|
...statCardStyle,
|
|
borderLeft: `3px solid ${colors.warning.main}`,
|
|
background: `${colors.warning.main}08`,
|
|
};
|
|
|
|
// 故障状态统计卡片样式
|
|
export const statCardFaultStyle = {
|
|
...statCardStyle,
|
|
borderLeft: `3px solid ${colors.error.main}`,
|
|
background: `${colors.error.main}08`,
|
|
};
|
|
|
|
// 卡片基础样式
|
|
export const cardStyle = {
|
|
borderRadius: borderRadius.large,
|
|
border: 'none',
|
|
boxShadow: shadows.medium,
|
|
overflow: 'hidden',
|
|
background: colors.background.primary,
|
|
};
|
|
|
|
// 筛选卡片样式
|
|
export const filterCardStyle = {
|
|
borderRadius: borderRadius.medium,
|
|
border: 'none',
|
|
boxShadow: shadows.small,
|
|
background: colors.background.primary,
|
|
marginBottom: spacing.lg,
|
|
};
|
|
|
|
// 模态框头部样式
|
|
export const modalHeaderStyle = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: spacing.sm,
|
|
fontSize: '18px',
|
|
fontWeight: '600',
|
|
};
|
|
|
|
// 表格样式常量
|
|
export const tableStyles = {
|
|
// 表格容器样式
|
|
wrapper: {
|
|
borderRadius: borderRadius.medium,
|
|
overflow: 'hidden',
|
|
},
|
|
|
|
// 空状态样式
|
|
empty: {
|
|
textAlign: 'center',
|
|
padding: '60px 20px',
|
|
color: colors.text.secondary,
|
|
fontSize: '15px',
|
|
},
|
|
|
|
// 空状态图标样式
|
|
emptyIcon: {
|
|
fontSize: '48px',
|
|
marginBottom: '16px',
|
|
color: colors.border.light,
|
|
},
|
|
};
|
|
|
|
// 搜索输入框样式
|
|
export const searchInputStyle = {
|
|
width: '280px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
transition: `all ${transitions.fast}`,
|
|
};
|
|
|
|
// 选择器样式
|
|
export const selectStyle = {
|
|
borderRadius: borderRadius.medium,
|
|
};
|
|
|
|
// 下拉菜单样式
|
|
export const dropdownStyle = {
|
|
borderRadius: borderRadius.medium,
|
|
};
|
|
|
|
// 刷新按钮样式
|
|
export const refreshButtonStyle = {
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
height: '36px',
|
|
};
|
|
|
|
// 搜索按钮样式
|
|
export const searchButtonStyle = {
|
|
height: '36px',
|
|
borderRadius: borderRadius.medium,
|
|
background: colors.primary.gradient,
|
|
border: 'none',
|
|
boxShadow: shadows.small,
|
|
};
|
|
|
|
// 重置按钮样式
|
|
export const resetButtonStyle = {
|
|
height: '36px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
};
|
|
|
|
// 导入模态框样式
|
|
export const importModalStyles = {
|
|
// 说明区域样式
|
|
description: {
|
|
marginBottom: '20px',
|
|
padding: '16px',
|
|
background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
|
|
borderRadius: '12px',
|
|
border: '1px solid #f0f0f0',
|
|
},
|
|
|
|
// 标题样式
|
|
title: {
|
|
fontWeight: '600',
|
|
marginBottom: '8px',
|
|
color: '#333',
|
|
},
|
|
|
|
// 列表样式
|
|
list: {
|
|
paddingLeft: '20px',
|
|
marginBottom: '10px',
|
|
color: '#666',
|
|
fontSize: '13px',
|
|
marginTop: '12px',
|
|
},
|
|
|
|
// 进度容器样式
|
|
progressContainer: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginBottom: '16px',
|
|
},
|
|
|
|
// 进度图标样式
|
|
progressIcon: {
|
|
width: '48px',
|
|
height: '48px',
|
|
borderRadius: '50%',
|
|
background: colors.primary.gradient,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: '16px',
|
|
color: '#fff',
|
|
fontSize: '20px',
|
|
},
|
|
|
|
// 进度信息样式
|
|
progressInfo: {
|
|
title: {
|
|
margin: '0 0 4px 0',
|
|
fontWeight: '600',
|
|
color: '#333',
|
|
fontSize: '16px',
|
|
},
|
|
phase: {
|
|
margin: 0,
|
|
color: colors.primary.main,
|
|
fontSize: '14px',
|
|
},
|
|
},
|
|
|
|
// 结果卡片样式
|
|
resultCard: type => ({
|
|
padding: '12px',
|
|
background:
|
|
type === 'total'
|
|
? colors.primary.gradient
|
|
: type === 'success'
|
|
? 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)'
|
|
: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
|
|
borderRadius: '8px',
|
|
color: '#fff',
|
|
textAlign: 'center',
|
|
}),
|
|
|
|
// 结果数值样式
|
|
resultValue: {
|
|
fontSize: '24px',
|
|
fontWeight: '700',
|
|
},
|
|
|
|
// 结果标签样式
|
|
resultLabel: {
|
|
fontSize: '12px',
|
|
opacity: 0.9,
|
|
},
|
|
};
|
|
|
|
// 详情模态框样式
|
|
export const detailModalStyles = {
|
|
// 信息项样式
|
|
infoItem: {
|
|
label: {
|
|
fontWeight: '500',
|
|
color: '#666',
|
|
},
|
|
value: {
|
|
marginLeft: 8,
|
|
color: '#333',
|
|
},
|
|
},
|
|
|
|
// 描述区域样式
|
|
description: {
|
|
marginTop: '16px',
|
|
},
|
|
|
|
// 描述内容样式
|
|
descriptionContent: {
|
|
marginTop: '8px',
|
|
padding: '12px',
|
|
backgroundColor: '#fafafa',
|
|
borderRadius: '8px',
|
|
color: '#333',
|
|
},
|
|
};
|
|
|
|
// 导出模态框样式
|
|
export const exportModalStyles = {
|
|
// 字段选择区域样式
|
|
fieldSelector: {
|
|
maxHeight: '300px',
|
|
overflow: 'auto',
|
|
border: '1px solid #f0f0f0',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
},
|
|
|
|
// 字段项样式
|
|
fieldItem: {
|
|
marginBottom: '8px',
|
|
},
|
|
};
|
|
|
|
// 空状态样式
|
|
export const emptyStateStyle = {
|
|
textAlign: 'center',
|
|
padding: '60px 20px',
|
|
fontSize: '15px',
|
|
};
|
|
|
|
// 空状态图标样式
|
|
export const emptyStateIconStyle = {
|
|
fontSize: '48px',
|
|
marginBottom: '16px',
|
|
};
|
|
|
|
// 表格容器样式
|
|
export const tableContainerStyle = {
|
|
borderRadius: borderRadius.medium,
|
|
overflow: 'hidden',
|
|
};
|
|
|
|
// ResizableTitle 组件样式
|
|
export const resizableTitleStyles = {
|
|
container: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
width: '100%',
|
|
},
|
|
text: {
|
|
flex: 1,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
},
|
|
resizeHandle: {
|
|
width: '8px',
|
|
height: '20px',
|
|
backgroundColor: '#e0e0e0',
|
|
borderRadius: '4px',
|
|
cursor: 'col-resize',
|
|
marginLeft: '8px',
|
|
flexShrink: 0,
|
|
},
|
|
};
|
|
|
|
// ============================================
|
|
// 输入框统一样式配置
|
|
// ============================================
|
|
|
|
// 输入框基础样式
|
|
export const inputStyles = {
|
|
// 基础输入框样式
|
|
base: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
transition: `all ${transitions.fast}`,
|
|
},
|
|
|
|
// 搜索输入框样式
|
|
search: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
transition: `all ${transitions.fast}`,
|
|
backgroundColor: colors.background.primary,
|
|
},
|
|
|
|
// 表单输入框样式
|
|
form: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
transition: `all ${transitions.fast}`,
|
|
},
|
|
|
|
// 小尺寸输入框
|
|
small: {
|
|
height: '32px',
|
|
borderRadius: borderRadius.small,
|
|
fontSize: '13px',
|
|
},
|
|
|
|
// 大尺寸输入框
|
|
large: {
|
|
height: '48px',
|
|
borderRadius: borderRadius.medium,
|
|
fontSize: '16px',
|
|
},
|
|
|
|
// 禁用状态
|
|
disabled: {
|
|
backgroundColor: colors.background.tertiary,
|
|
color: colors.text.tertiary,
|
|
cursor: 'not-allowed',
|
|
},
|
|
|
|
// 错误状态
|
|
error: {
|
|
borderColor: colors.error.main,
|
|
boxShadow: `0 0 0 2px ${colors.error.main}20`,
|
|
},
|
|
|
|
// 焦点状态
|
|
focus: {
|
|
borderColor: colors.primary.main,
|
|
boxShadow: `0 0 0 3px ${colors.primary.main}15`,
|
|
},
|
|
};
|
|
|
|
// Select 选择器样式
|
|
export const selectStyles = {
|
|
// 基础选择器样式
|
|
base: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
fontSize: '14px',
|
|
},
|
|
|
|
// 小尺寸选择器
|
|
small: {
|
|
height: '32px',
|
|
borderRadius: borderRadius.small,
|
|
fontSize: '13px',
|
|
},
|
|
|
|
// 大尺寸选择器
|
|
large: {
|
|
height: '48px',
|
|
borderRadius: borderRadius.medium,
|
|
fontSize: '16px',
|
|
},
|
|
|
|
// 下拉菜单样式
|
|
dropdown: {
|
|
borderRadius: borderRadius.medium,
|
|
boxShadow: shadows.large,
|
|
border: `1px solid ${colors.border.light}`,
|
|
},
|
|
|
|
// 选项样式
|
|
option: {
|
|
padding: '8px 12px',
|
|
fontSize: '14px',
|
|
transition: `background-color ${transitions.fast}`,
|
|
},
|
|
};
|
|
|
|
// InputNumber 数字输入框样式
|
|
export const inputNumberStyles = {
|
|
// 基础样式
|
|
base: {
|
|
width: '100%',
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
},
|
|
|
|
// 小尺寸
|
|
small: {
|
|
height: '32px',
|
|
borderRadius: borderRadius.small,
|
|
fontSize: '13px',
|
|
},
|
|
|
|
// 大尺寸
|
|
large: {
|
|
height: '48px',
|
|
borderRadius: borderRadius.medium,
|
|
fontSize: '16px',
|
|
},
|
|
};
|
|
|
|
// TextArea 文本域样式
|
|
export const textAreaStyles = {
|
|
// 基础样式
|
|
base: {
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
padding: '10px 12px',
|
|
transition: `all ${transitions.fast}`,
|
|
resize: 'vertical',
|
|
minHeight: '80px',
|
|
},
|
|
|
|
// 小尺寸
|
|
small: {
|
|
fontSize: '13px',
|
|
padding: '8px 10px',
|
|
minHeight: '60px',
|
|
},
|
|
|
|
// 大尺寸
|
|
large: {
|
|
fontSize: '16px',
|
|
padding: '12px 14px',
|
|
minHeight: '100px',
|
|
},
|
|
};
|
|
|
|
// DatePicker 日期选择器样式
|
|
export const datePickerStyles = {
|
|
// 基础样式
|
|
base: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
width: '100%',
|
|
},
|
|
|
|
// 小尺寸
|
|
small: {
|
|
height: '32px',
|
|
borderRadius: borderRadius.small,
|
|
fontSize: '13px',
|
|
},
|
|
|
|
// 大尺寸
|
|
large: {
|
|
height: '48px',
|
|
borderRadius: borderRadius.medium,
|
|
fontSize: '16px',
|
|
},
|
|
|
|
// 范围选择器
|
|
range: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
},
|
|
};
|
|
|
|
// 表单标签样式
|
|
export const formLabelStyles = {
|
|
// 基础标签样式
|
|
base: {
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
color: colors.text.primary,
|
|
marginBottom: '6px',
|
|
display: 'block',
|
|
},
|
|
|
|
// 必填标签样式
|
|
required: {
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
color: colors.text.primary,
|
|
marginBottom: '6px',
|
|
},
|
|
|
|
// 小标签
|
|
small: {
|
|
fontSize: '13px',
|
|
fontWeight: '500',
|
|
color: colors.text.secondary,
|
|
marginBottom: '4px',
|
|
},
|
|
};
|
|
|
|
// 表单项样式
|
|
export const formItemStyles = {
|
|
// 基础表单项
|
|
base: {
|
|
marginBottom: '20px',
|
|
},
|
|
|
|
// 紧凑表单项
|
|
compact: {
|
|
marginBottom: '12px',
|
|
},
|
|
|
|
// 错误状态
|
|
error: {
|
|
marginBottom: '20px',
|
|
},
|
|
|
|
// 错误提示文字
|
|
errorText: {
|
|
color: colors.error.main,
|
|
fontSize: '12px',
|
|
marginTop: '4px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '4px',
|
|
},
|
|
};
|
|
|
|
// 过滤器区域输入框样式
|
|
export const filterInputStyles = {
|
|
// 过滤器输入框容器
|
|
container: {
|
|
marginBottom: '6px',
|
|
fontSize: '13px',
|
|
color: colors.text.secondary,
|
|
fontWeight: '500',
|
|
},
|
|
|
|
// 过滤器输入框
|
|
input: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
border: `1px solid ${colors.border.light}`,
|
|
fontSize: '14px',
|
|
width: '100%',
|
|
},
|
|
|
|
// 过滤器选择器
|
|
select: {
|
|
height: '40px',
|
|
borderRadius: borderRadius.medium,
|
|
fontSize: '14px',
|
|
width: '100%',
|
|
},
|
|
};
|
|
|
|
// 输入框验证规则配置
|
|
export const inputValidationRules = {
|
|
// 必填规则
|
|
required: (message = '此字段为必填项') => ({
|
|
required: true,
|
|
message,
|
|
}),
|
|
|
|
// 最大长度规则
|
|
maxLength: (max, message) => ({
|
|
max,
|
|
message: message || `不能超过${max}个字符`,
|
|
}),
|
|
|
|
// 最小长度规则
|
|
minLength: (min, message) => ({
|
|
min,
|
|
message: message || `不能少于${min}个字符`,
|
|
}),
|
|
|
|
// 数字范围规则
|
|
numberRange: (min, max, message) => ({
|
|
type: 'number',
|
|
min,
|
|
max,
|
|
message: message || `数值应在${min}到${max}之间`,
|
|
}),
|
|
|
|
// 正整数规则
|
|
positiveInteger: () => ({
|
|
pattern: /^\d+$/,
|
|
message: '请输入正整数',
|
|
}),
|
|
|
|
// 价格规则（两位小数）
|
|
price: () => ({
|
|
pattern: /^\d+(\.\d{1,2})?$/,
|
|
message: '请输入有效的价格（最多两位小数）',
|
|
}),
|
|
|
|
// 邮箱规则
|
|
email: () => ({
|
|
type: 'email',
|
|
message: '请输入有效的邮箱地址',
|
|
}),
|
|
|
|
// 手机号规则
|
|
phone: () => ({
|
|
pattern: /^1[3-9]\d{9}$/,
|
|
message: '请输入有效的手机号码',
|
|
}),
|
|
};
|
|
|
|
// 输入框占位符文本配置
|
|
export const inputPlaceholders = {
|
|
// 耗材相关
|
|
consumableName: '请输入耗材名称',
|
|
consumableId: '请输入耗材ID',
|
|
category: '请选择分类',
|
|
unit: '如: 个、盒、卷、箱',
|
|
stock: '请输入库存数量',
|
|
minStock: '请输入最小库存',
|
|
maxStock: '请输入最大库存',
|
|
unitPrice: '请输入单价',
|
|
supplier: '请输入供应商名称',
|
|
location: '如: A柜-01层、B区货架3',
|
|
description: '请输入描述信息',
|
|
operator: '请输入操作人姓名',
|
|
reason: '请输入原因',
|
|
notes: '请输入备注信息',
|
|
snList: '输入SN后按回车添加',
|
|
|
|
// 搜索相关
|
|
search: '搜索...',
|
|
searchConsumable: '搜索耗材ID、名称、分类、供应商',
|
|
searchCategory: '搜索分类名称、描述',
|
|
|
|
// 日期相关
|
|
dateRange: ['开始日期', '结束日期'],
|
|
|
|
// 通用
|
|
select: '请选择',
|
|
input: '请输入',
|
|
};
|
|
|
|
// 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;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
alignItems: center;
|
|
justifyContent: center;
|
|
}
|
|
|
|
.device-modal .ant-modal-close-x {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
display: flex;
|
|
alignItems: center;
|
|
justifyContent: center;
|
|
}
|
|
|
|
.device-table-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-container {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-content {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-thead {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-thead > tr > th {
|
|
white-space: normal !important;
|
|
word-break: break-word !important;
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.4 !important;
|
|
padding: 14px 12px !important;
|
|
background: ${tokens.colors.background.tertiary} !important;
|
|
color: ${tokens.colors.text.primary} !important;
|
|
border-bottom: 1px solid ${tokens.colors.border.light} !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-tbody {
|
|
flex-shrink: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-tbody > tr > td {
|
|
white-space: normal !important;
|
|
word-break: break-word !important;
|
|
line-height: 1.6 !important;
|
|
max-width: 250px !important;
|
|
padding: 12px !important;
|
|
border-bottom: 1px solid ${tokens.colors.border.light} !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-tbody > tr > td .ant-typography,
|
|
.device-table-wrapper .ant-table-tbody > tr > td .ant-typography-expand,
|
|
.device-table-wrapper .ant-table-tbody > tr > td span {
|
|
white-space: normal !important;
|
|
word-break: break-word !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-cell {
|
|
word-break: break-word !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-row-even {
|
|
background-color: ${tokens.colors.background.primary};
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-row-odd {
|
|
background-color: ${tokens.colors.background.secondary};
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-row-selected {
|
|
background-color: ${tokens.colors.primary.main}15 !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-row-selected:hover > td {
|
|
background-color: ${tokens.colors.primary.main}25 !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-tbody > tr:hover > td {
|
|
background-color: ${tokens.colors.background.tertiary} !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-selection-column {
|
|
position: sticky !important;
|
|
left: 0 !important;
|
|
z-index: 2 !important;
|
|
background: inherit !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-tbody > tr > td:last-child {
|
|
min-width: 120px !important;
|
|
max-width: 150px !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-pagination {
|
|
margin: 16px 0 !important;
|
|
flex-wrap: wrap !important;
|
|
justify-content: center !important;
|
|
padding: 12px 16px !important;
|
|
background: ${tokens.colors.background.primary};
|
|
border-radius: ${tokens.borderRadius.medium};
|
|
margin-top: 16px !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-pagination-item-active {
|
|
background: ${tokens.colors.primary.gradient} !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-pagination-item-active a {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-cell-fix-left,
|
|
.device-table-wrapper .ant-table-cell-fix-right {
|
|
background: inherit !important;
|
|
}
|
|
|
|
/* 表单输入框增强样式 */
|
|
.form-input-enhanced:hover {
|
|
border-color: ${tokens.colors.primary.main} !important;
|
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1) !important;
|
|
}
|
|
|
|
.form-input-enhanced:focus,
|
|
.form-input-enhanced.ant-input-focused,
|
|
.form-input-enhanced.ant-select-focused .ant-select-selector,
|
|
.form-input-enhanced.ant-input-number-focused {
|
|
border-color: ${tokens.colors.primary.main} !important;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
|
|
}
|
|
|
|
/* 表单项标签增强 */
|
|
.device-modal .ant-form-item-label > label {
|
|
font-weight: 500;
|
|
color: ${tokens.colors.text.primary};
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 表单项间距优化 */
|
|
.device-modal .ant-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 必填项标识动画 */
|
|
.device-modal .ant-form-item-label > label::after {
|
|
content: '';
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.device-table-wrapper .ant-table-tbody > tr > td {
|
|
max-width: 150px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.device-table-wrapper .ant-table-thead > tr > th {
|
|
font-size: 13px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-header {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
gap: 16px !important;
|
|
}
|
|
|
|
.stat-cards {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-card {
|
|
min-width: calc(50% - 8px) !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.stat-card {
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
.filter-form .ant-form-item {
|
|
margin-bottom: 12px !important;
|
|
}
|
|
}
|
|
`;
|