CI Test
eb50442296
CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Failing after 23s
CI/CD Pipeline / Unit Tests (pull_request) Failing after 18s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 3m9s
CI/CD Pipeline / Build & Push Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Build Production Runtime Images (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
CI/CD Pipeline / Integration Tests (pull_request) Failing after 28s
- 删除 .xx-card:hover（global.css V21 设计系统已定义） - var(--xx-border) → var(--border-color)（原变量未定义） - var(--xx-text) → var(--text-primary)（原变量未定义） - .ant-card-head padding 修正为 20px 24px（与原 Admin.css 一致） - .ant-card-head-title color 对齐原 Admin.css 的 var(--slate) 语义
555 lines
14 KiB
CSS
555 lines
14 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;
|
|
}
|
|
|
|
/* ============================================================
|
|
Table 表格
|
|
============================================================ */
|
|
.xx-table .ant-table {
|
|
background: var(--bg-primary) !important;
|
|
color: var(--text-primary) !important;
|
|
border-radius: var(--radius-md) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.xx-table .ant-table-thead > tr > th {
|
|
background: var(--bg-secondary) !important;
|
|
color: var(--text-secondary) !important;
|
|
font-weight: var(--font-weight-semibold) !important;
|
|
border-bottom: 1px solid var(--border-color) !important;
|
|
font-size: var(--font-size-sm) !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--letter-spacing-wide);
|
|
}
|
|
|
|
.xx-table .ant-table-tbody > tr > td {
|
|
border-bottom: 1px solid var(--border-light) !important;
|
|
color: var(--text-primary) !important;
|
|
transition: var(--transition-fast) !important;
|
|
}
|
|
|
|
.xx-table .ant-table-tbody > tr:hover > td {
|
|
background: var(--primary-soft) !important;
|
|
}
|
|
|
|
.xx-table .ant-table-tbody > tr:last-child > td {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* 排序图标 */
|
|
.xx-table .ant-table-column-sorter-up.active,
|
|
.xx-table .ant-table-column-sorter-down.active {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* 分页 */
|
|
.xx-table .ant-pagination {
|
|
padding: var(--space-md) 0 !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;
|
|
}
|
|
|
|
/* ============================================================
|
|
Form 表单
|
|
============================================================ */
|
|
.xx-form .ant-form-item-label > label {
|
|
color: var(--text-primary) !important;
|
|
font-weight: var(--font-weight-medium) !important;
|
|
font-size: var(--font-size-base) !important;
|
|
}
|
|
|
|
.xx-form .ant-form-item-explain-error {
|
|
color: var(--error-color) !important;
|
|
font-size: var(--font-size-sm) !important;
|
|
}
|
|
|
|
.xx-form .ant-form-item {
|
|
margin-bottom: var(--space-lg) !important;
|
|
}
|
|
|
|
/* 表单项间距紧凑 */
|
|
.xx-form-compact .ant-form-item {
|
|
margin-bottom: var(--space-md) !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
Pagination 分页
|
|
============================================================ */
|
|
.xx-pagination .ant-pagination-item {
|
|
border-radius: var(--radius-xs) !important;
|
|
border-color: var(--border-color) !important;
|
|
transition: var(--transition-fast) !important;
|
|
}
|
|
|
|
.xx-pagination .ant-pagination-item a {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.xx-pagination .ant-pagination-item:hover {
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-pagination .ant-pagination-item:hover a {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.xx-pagination .ant-pagination-item-active {
|
|
background: var(--gradient-primary) !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.xx-pagination .ant-pagination-item-active a {
|
|
color: var(--text-inverse) !important;
|
|
}
|
|
|
|
.xx-pagination .ant-pagination-prev .ant-pagination-item-link,
|
|
.xx-pagination .ant-pagination-next .ant-pagination-item-link {
|
|
border-radius: var(--radius-xs) !important;
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
.xx-pagination .ant-pagination-disabled .ant-pagination-item-link {
|
|
color: var(--text-disabled) !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;
|
|
}
|
|
|
|
.xx-form .ant-form-item {
|
|
margin-bottom: 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;
|
|
}
|