CI Bot
8f446eef08
CI/CD Pipeline / Validate Code Quality And Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Lint (push) Has been cancelled
Deploy / Deploy Staging (push) Has been cancelled
Deploy / Build Production Runtime Images (push) Has been cancelled
Deploy / Deploy Production (push) Has been cancelled
Deploy / Production Browser E2E (push) Has been cancelled
封装 10 个 V21 设计系统基础组件，统一使用 CSS 变量： - Button: 6 种变体 (primary/secondary/ghost/text/danger/link) + 3 种尺寸 - Input: 支持 error 状态，含 Search/TextArea/Password 子组件 - Select: V21 圆角下拉样式 - Modal: 含 confirm/info/success/error/warning 快捷方法 - Table: V21 表格样式 - Card: 支持悬浮动效变体 - Tag/Badge: 5 种语义变体 (primary/success/warning/error/info) - Tooltip/Popover: V21 气泡样式 - Form: 支持 compact 紧凑模式 - Pagination: V21 分页样式 所有组件使用 CSS 变量（无硬编码值），支持暗色/亮色主题切换， 响应式布局适配移动端。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
535 lines
14 KiB
CSS
535 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;
|
|
}
|
|
}
|