xiaoxia
20f6e64847
CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Failing after 11s
CI/CD Pipeline / Unit Tests (pull_request) Failing after 11s
CI/CD Pipeline / Integration Tests (pull_request) Failing after 4s
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 1m38s
CI/CD Pipeline / Build Production Runtime Images (pull_request) Has been skipped
CI/CD Pipeline / Build & Push Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
删除已移除组件的关联样式： - .xx-table 全节（9个规则） - .xx-form / .xx-form-compact 全节（4个规则） - .xx-pagination 全节（8个规则） - 响应式中 .xx-form 规则 全项目 grep 确认零引用后删除
445 lines
11 KiB
CSS
445 lines
11 KiB
CSS
/**
|
|
* V21 UI 组件库 - 组件样式
|
|
* 统一使用 CSS 变量，支持深色/浅色主题自动切换
|
|
*/
|
|
|
|
/* ============================================================
|
|
Button 按钮
|
|
============================================================ */
|
|
.xx-btn {
|
|
border-radius: var(--radius-md) !important;
|
|
font-weight: var(--font-weight-extrabold) !important;
|
|
transition: var(--transition-all) !important;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.xx-btn-primary {
|
|
background: var(--gradient-primary) !important;
|
|
color: var(--text-inverse) !important;
|
|
border: none !important;
|
|
box-shadow: var(--shadow-primary) !important;
|
|
}
|
|
|
|
.xx-btn-primary:hover,
|
|
.xx-btn-primary:focus {
|
|
background: var(--gradient-primary) !important;
|
|
box-shadow: var(--shadow-hover) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.xx-btn-secondary {
|
|
background: var(--secondary-color) !important;
|
|
color: var(--text-inverse) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.xx-btn-secondary:hover,
|
|
.xx-btn-secondary:focus {
|
|
background: var(--secondary-hover) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.xx-btn-ghost {
|
|
background: var(--bg-primary) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.xx-btn-ghost:hover,
|
|
.xx-btn-ghost:focus {
|
|
border-color: var(--primary-color) !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-btn-text {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
color: var(--text-secondary) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.xx-btn-text:hover,
|
|
.xx-btn-text:focus {
|
|
background: var(--primary-soft) !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-btn-danger {
|
|
background: var(--error-color) !important;
|
|
color: var(--text-inverse) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.xx-btn-danger:hover,
|
|
.xx-btn-danger:focus {
|
|
background: var(--error-hover) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.xx-btn-link {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
color: var(--text-link) !important;
|
|
box-shadow: none !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.xx-btn-link:hover,
|
|
.xx-btn-link:focus {
|
|
color: var(--text-link-hover) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 尺寸 */
|
|
.xx-btn-sm {
|
|
padding: 6px 14px !important;
|
|
font-size: var(--font-size-sm) !important;
|
|
}
|
|
|
|
.xx-btn-md {
|
|
padding: 10px 20px !important;
|
|
font-size: var(--font-size-base) !important;
|
|
}
|
|
|
|
.xx-btn-lg {
|
|
padding: 14px 28px !important;
|
|
font-size: var(--font-size-md) !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
Input 输入框
|
|
============================================================ */
|
|
.xx-input .ant-input,
|
|
.xx-input.ant-input {
|
|
border-radius: var(--radius-sm) !important;
|
|
border-color: var(--border-color) !important;
|
|
color: var(--text-primary) !important;
|
|
background: var(--bg-primary) !important;
|
|
transition: var(--transition-colors) !important;
|
|
font-size: var(--font-size-base) !important;
|
|
}
|
|
|
|
.xx-input .ant-input:hover,
|
|
.xx-input.ant-input:hover {
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-input .ant-input:focus,
|
|
.xx-input.ant-input:focus,
|
|
.xx-input .ant-input-focused,
|
|
.xx-input.ant-input-focused {
|
|
border-color: var(--primary-color) !important;
|
|
box-shadow: 0 0 0 3px var(--primary-soft) !important;
|
|
}
|
|
|
|
.xx-input .ant-input::placeholder,
|
|
.xx-input.ant-input::placeholder {
|
|
color: var(--text-tertiary) !important;
|
|
}
|
|
|
|
/* 错误状态 */
|
|
.xx-input-error .ant-input,
|
|
.xx-input-error.ant-input {
|
|
border-color: var(--error-color) !important;
|
|
}
|
|
|
|
.xx-input-error .ant-input:focus,
|
|
.xx-input-error.ant-input:focus {
|
|
box-shadow: 0 0 0 3px var(--error-soft) !important;
|
|
}
|
|
|
|
/* 前缀/后缀图标 */
|
|
.xx-input .ant-input-prefix,
|
|
.xx-input .ant-input-suffix {
|
|
color: var(--text-tertiary) !important;
|
|
}
|
|
|
|
/* 搜索框 */
|
|
.xx-input-search .ant-input-search-button {
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
|
|
background: var(--gradient-primary) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
Select 选择器
|
|
============================================================ */
|
|
.xx-select .ant-select-selector {
|
|
border-radius: var(--radius-sm) !important;
|
|
border-color: var(--border-color) !important;
|
|
background: var(--bg-primary) !important;
|
|
color: var(--text-primary) !important;
|
|
transition: var(--transition-colors) !important;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.xx-select .ant-select-selector:hover {
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-select.ant-select-focused .ant-select-selector {
|
|
border-color: var(--primary-color) !important;
|
|
box-shadow: 0 0 0 3px var(--primary-soft) !important;
|
|
}
|
|
|
|
.xx-select .ant-select-selection-placeholder {
|
|
color: var(--text-tertiary) !important;
|
|
}
|
|
|
|
/* 下拉菜单 */
|
|
.xx-select-dropdown .ant-select-item {
|
|
border-radius: var(--radius-xs) !important;
|
|
color: var(--text-primary) !important;
|
|
transition: var(--transition-fast) !important;
|
|
}
|
|
|
|
.xx-select-dropdown .ant-select-item-option-active {
|
|
background: var(--primary-soft) !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-select-dropdown .ant-select-item-option-selected {
|
|
background: var(--primary-soft) !important;
|
|
color: var(--primary-color) !important;
|
|
font-weight: var(--font-weight-semibold) !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
Modal 对话框
|
|
============================================================ */
|
|
.xx-modal .ant-modal-content {
|
|
border-radius: var(--radius-xl) !important;
|
|
background: var(--bg-elevated) !important;
|
|
box-shadow: var(--shadow-lg) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.xx-modal .ant-modal-header {
|
|
background: transparent !important;
|
|
border-bottom: 1px solid var(--border-light) !important;
|
|
padding: var(--space-lg) var(--space-xl) !important;
|
|
}
|
|
|
|
.xx-modal .ant-modal-title {
|
|
font-size: var(--font-size-lg) !important;
|
|
font-weight: var(--font-weight-bold) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.xx-modal .ant-modal-close {
|
|
color: var(--text-tertiary) !important;
|
|
transition: var(--transition-fast) !important;
|
|
}
|
|
|
|
.xx-modal .ant-modal-close:hover {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.xx-modal .ant-modal-body {
|
|
padding: var(--space-xl) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.xx-modal .ant-modal-footer {
|
|
border-top: 1px solid var(--border-light) !important;
|
|
padding: var(--space-md) var(--space-xl) !important;
|
|
}
|
|
|
|
/* 确认对话框 */
|
|
.xx-modal-confirm .ant-modal-content {
|
|
border-radius: var(--radius-xl) !important;
|
|
}
|
|
|
|
.xx-modal-confirm .ant-modal-confirm-body > .anticon {
|
|
font-size: 24px !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
Card 卡片
|
|
============================================================ */
|
|
.xx-card-v21 {
|
|
background: var(--bg-primary) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
border-radius: var(--radius-xl) !important;
|
|
box-shadow: var(--shadow-card) !important;
|
|
transition: var(--transition-all) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.xx-card-v21 .ant-card-head {
|
|
border-bottom: 1px solid var(--border-light) !important;
|
|
padding: 0 var(--space-xl) !important;
|
|
min-height: 56px !important;
|
|
}
|
|
|
|
.xx-card-v21 .ant-card-head-title {
|
|
font-size: var(--font-size-lg) !important;
|
|
font-weight: var(--font-weight-bold) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.xx-card-v21 .ant-card-body {
|
|
padding: var(--space-xl) !important;
|
|
}
|
|
|
|
.xx-card-v21 .ant-card-actions {
|
|
border-top: 1px solid var(--border-light) !important;
|
|
background: var(--bg-secondary) !important;
|
|
}
|
|
|
|
.xx-card-v21 .ant-card-actions > li {
|
|
margin: var(--space-sm) 0 !important;
|
|
}
|
|
|
|
/* 悬浮卡片 */
|
|
.xx-card-hover:hover {
|
|
box-shadow: var(--shadow-md) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ============================================================
|
|
Tag 标签 / Badge 徽标
|
|
============================================================ */
|
|
.xx-tag {
|
|
border-radius: var(--radius-xs) !important;
|
|
font-size: var(--font-size-sm) !important;
|
|
font-weight: var(--font-weight-medium) !important;
|
|
padding: 2px 10px !important;
|
|
line-height: 1.6 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.xx-tag-primary {
|
|
background: var(--primary-soft) !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-tag-success {
|
|
background: var(--success-soft) !important;
|
|
color: var(--success-color) !important;
|
|
}
|
|
|
|
.xx-tag-warning {
|
|
background: var(--warning-soft) !important;
|
|
color: var(--warning-color) !important;
|
|
}
|
|
|
|
.xx-tag-error {
|
|
background: var(--error-soft) !important;
|
|
color: var(--error-color) !important;
|
|
}
|
|
|
|
.xx-tag-info {
|
|
background: var(--info-soft) !important;
|
|
color: var(--info-color) !important;
|
|
}
|
|
|
|
/* Badge */
|
|
.xx-badge .ant-badge-count {
|
|
background: var(--gradient-primary) !important;
|
|
box-shadow: var(--shadow-primary) !important;
|
|
}
|
|
|
|
.xx-badge .ant-badge-status-dot {
|
|
width: 8px !important;
|
|
height: 8px !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
Tooltip 文字提示 / Popover 气泡卡片
|
|
============================================================ */
|
|
.xx-tooltip .ant-tooltip-inner {
|
|
background: var(--color-gray-800) !important;
|
|
color: var(--text-inverse) !important;
|
|
border-radius: var(--radius-sm) !important;
|
|
padding: var(--space-xs) var(--space-sm) !important;
|
|
font-size: var(--font-size-sm) !important;
|
|
box-shadow: var(--shadow-sm) !important;
|
|
}
|
|
|
|
.xx-tooltip .ant-tooltip-arrow::before {
|
|
background: var(--color-gray-800) !important;
|
|
}
|
|
|
|
/* Popover */
|
|
.xx-popover .ant-popover-inner {
|
|
background: var(--bg-elevated) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
border-radius: var(--radius-md) !important;
|
|
box-shadow: var(--shadow-md) !important;
|
|
}
|
|
|
|
.xx-popover .ant-popover-inner-content {
|
|
color: var(--text-primary) !important;
|
|
padding: var(--space-md) !important;
|
|
}
|
|
|
|
.xx-popover .ant-popover-title {
|
|
color: var(--text-primary) !important;
|
|
font-weight: var(--font-weight-semibold) !important;
|
|
border-bottom: 1px solid var(--border-light) !important;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
响应式
|
|
============================================================ */
|
|
@media (max-width: 768px) {
|
|
.xx-btn-lg {
|
|
padding: 12px 20px !important;
|
|
font-size: var(--font-size-base) !important;
|
|
}
|
|
|
|
.xx-card-v21 .ant-card-body {
|
|
padding: var(--space-md) !important;
|
|
}
|
|
|
|
.xx-card-v21 .ant-card-head {
|
|
padding: 0 var(--space-md) !important;
|
|
}
|
|
|
|
.xx-modal .ant-modal-body {
|
|
padding: var(--space-md) !important;
|
|
}
|
|
|
|
.xx-modal .ant-modal-header {
|
|
padding: var(--space-md) !important;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.xx-btn-lg {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.xx-btn-md {
|
|
padding: 8px 16px !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* ── xx-card antd 子元素覆盖样式（从 Admin.css 迁移） ── */
|
|
/* AdminComingSoon 等页面使用 <Card className="xx-card"> 时需要 */
|
|
/* .xx-card 基础样式和 :hover 已在 global.css 中定义（V21 设计系统） */
|
|
|
|
.xx-card .ant-card-head {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 20px 24px;
|
|
}
|
|
|
|
.xx-card .ant-card-head-title {
|
|
font-weight: 800;
|
|
font-size: 17px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.xx-card .ant-card-body {
|
|
padding: 24px;
|
|
}
|