advance-semi-theme 1.0.0

package/dist/antd/styles/dark.css

@@ -0,0 +1,533 @@
+/**
+ * antd-semi-theme Dark Mode
+ * 深色模式完整样式覆盖
+ * 
+ * Usage:
+ * import 'antd-semi-theme/styles/dark'
+ * 
+ * 然后在根元素添加以下任一属性/类名：
+ * - [theme-mode="dark"]
+ * - [data-theme="dark"]
+ * - .semi-dark
+ * - .dark
+ */
+
+/* ========== 深色模式 CSS 变量 ========== */
+:root[theme-mode="dark"],
+[data-theme="dark"],
+.semi-dark,
+.dark {
+  /* 深色模式颜色变量 */
+  --semi-blue-5: 84, 169, 255;
+  --semi-green-5: 93, 194, 100;
+  --semi-red-5: 252, 114, 102;
+  --semi-orange-5: 255, 166, 51;
+  --semi-yellow-5: 255, 214, 51;
+  --semi-purple-5: 189, 108, 255;
+  --semi-grey-7: 79, 81, 89;
+  --semi-grey-8: 255, 255, 255;
+  --semi-grey-9: 249, 249, 249;
+  
+  /* 语义颜色（深色模式调亮） */
+  --semi-color-primary: rgb(var(--semi-blue-5));
+  --semi-color-primary-hover: #7FC1FF;
+  --semi-color-primary-active: #A9D9FF;
+  --semi-color-primary-light: rgba(0, 100, 250, 0.2);
+  
+  --semi-color-success: rgb(var(--semi-green-5));
+  --semi-color-danger: rgb(var(--semi-red-5));
+  --semi-color-warning: rgb(var(--semi-orange-5));
+  
+  /* 填充色 */
+  --semi-color-fill-0: rgba(255, 255, 255, 0.12);
+  --semi-color-fill-1: rgba(255, 255, 255, 0.16);
+  --semi-color-fill-2: rgba(255, 255, 255, 0.20);
+  
+  /* 文本色 */
+  --semi-color-text-0: rgba(249, 249, 249, 1);
+  --semi-color-text-1: rgba(249, 249, 249, 0.8);
+  --semi-color-text-2: rgba(249, 249, 249, 0.6);
+  --semi-color-text-3: rgba(249, 249, 249, 0.35);
+  
+  /* 背景色 */
+  --semi-color-bg-0: #16161A;
+  --semi-color-bg-1: #232429;
+  --semi-color-bg-2: #35363C;
+  --semi-color-bg-3: #43444A;
+  --semi-color-bg-4: #4F5159;
+  
+  /* 边框 */
+  --semi-color-border: rgba(255, 255, 255, 0.08);
+  
+  /* 阴影 */
+  --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.25);
+  
+  /* AI 渐变（深色模式版本） */
+  --semi-color-ai-gradient: linear-gradient(135deg, #BD6CFF 0%, #54A9FF 50%, #00C6FF 100%);
+}
+
+/* ========================================================================== */
+/* ============================= 深色模式覆盖 ================================ */
+/* ========================================================================== */
+
+/* ========== 下拉面板 ========== */
+:root[theme-mode="dark"] .ant-select-dropdown,
+[data-theme="dark"] .ant-select-dropdown,
+.semi-dark .ant-select-dropdown,
+.dark .ant-select-dropdown,
+:root[theme-mode="dark"] .ant-dropdown-menu,
+[data-theme="dark"] .ant-dropdown-menu,
+.semi-dark .ant-dropdown-menu,
+.dark .ant-dropdown-menu,
+:root[theme-mode="dark"] .ant-popover-inner,
+[data-theme="dark"] .ant-popover-inner,
+.semi-dark .ant-popover-inner,
+.dark .ant-popover-inner,
+:root[theme-mode="dark"] .ant-picker-dropdown,
+[data-theme="dark"] .ant-picker-dropdown,
+.semi-dark .ant-picker-dropdown,
+.dark .ant-picker-dropdown,
+:root[theme-mode="dark"] .ant-cascader-menus,
+[data-theme="dark"] .ant-cascader-menus,
+.semi-dark .ant-cascader-menus,
+.dark .ant-cascader-menus,
+:root[theme-mode="dark"] .ant-tree-select-dropdown,
+[data-theme="dark"] .ant-tree-select-dropdown,
+.semi-dark .ant-tree-select-dropdown,
+.dark .ant-tree-select-dropdown,
+:root[theme-mode="dark"] .ant-mentions-dropdown,
+[data-theme="dark"] .ant-mentions-dropdown,
+.semi-dark .ant-mentions-dropdown,
+.dark .ant-mentions-dropdown {
+  background: var(--semi-color-bg-2) !important;
+}
+
+/* ========== 表格 ========== */
+:root[theme-mode="dark"] .ant-table,
+[data-theme="dark"] .ant-table,
+.semi-dark .ant-table,
+.dark .ant-table {
+  background: var(--semi-color-bg-1) !important;
+}
+
+:root[theme-mode="dark"] .ant-table-thead > tr > th,
+[data-theme="dark"] .ant-table-thead > tr > th,
+.semi-dark .ant-table-thead > tr > th,
+.dark .ant-table-thead > tr > th {
+  background: rgba(255, 255, 255, 0.04) !important;
+  color: var(--semi-color-text-2) !important;
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-table-tbody > tr > td,
+[data-theme="dark"] .ant-table-tbody > tr > td,
+.semi-dark .ant-table-tbody > tr > td,
+.dark .ant-table-tbody > tr > td {
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-table-tbody > tr:hover > td,
+[data-theme="dark"] .ant-table-tbody > tr:hover > td,
+.semi-dark .ant-table-tbody > tr:hover > td,
+.dark .ant-table-tbody > tr:hover > td {
+  background: var(--semi-color-fill-0) !important;
+}
+
+:root[theme-mode="dark"] .ant-table-filter-dropdown,
+[data-theme="dark"] .ant-table-filter-dropdown,
+.semi-dark .ant-table-filter-dropdown,
+.dark .ant-table-filter-dropdown {
+  background: var(--semi-color-bg-2) !important;
+}
+
+/* ========== 卡片 ========== */
+:root[theme-mode="dark"] .ant-card,
+[data-theme="dark"] .ant-card,
+.semi-dark .ant-card,
+.dark .ant-card {
+  background: var(--semi-color-bg-2) !important;
+  border-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-card-head,
+[data-theme="dark"] .ant-card-head,
+.semi-dark .ant-card-head,
+.dark .ant-card-head {
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-card-actions,
+[data-theme="dark"] .ant-card-actions,
+.semi-dark .ant-card-actions,
+.dark .ant-card-actions {
+  background: rgba(255, 255, 255, 0.04) !important;
+  border-top-color: var(--semi-color-border) !important;
+}
+
+/* ========== 模态框 ========== */
+:root[theme-mode="dark"] .ant-modal-content,
+[data-theme="dark"] .ant-modal-content,
+.semi-dark .ant-modal-content,
+.dark .ant-modal-content {
+  background: var(--semi-color-bg-2) !important;
+}
+
+:root[theme-mode="dark"] .ant-modal-header,
+[data-theme="dark"] .ant-modal-header,
+.semi-dark .ant-modal-header,
+.dark .ant-modal-header {
+  background: var(--semi-color-bg-2) !important;
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-modal-footer,
+[data-theme="dark"] .ant-modal-footer,
+.semi-dark .ant-modal-footer,
+.dark .ant-modal-footer {
+  border-top-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-modal-confirm-body,
+[data-theme="dark"] .ant-modal-confirm-body,
+.semi-dark .ant-modal-confirm-body,
+.dark .ant-modal-confirm-body {
+  background: var(--semi-color-bg-2) !important;
+}
+
+/* ========== 抽屉 ========== */
+:root[theme-mode="dark"] .ant-drawer-content,
+[data-theme="dark"] .ant-drawer-content,
+.semi-dark .ant-drawer-content,
+.dark .ant-drawer-content {
+  background: var(--semi-color-bg-2) !important;
+}
+
+:root[theme-mode="dark"] .ant-drawer-header,
+[data-theme="dark"] .ant-drawer-header,
+.semi-dark .ant-drawer-header,
+.dark .ant-drawer-header {
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-drawer-footer,
+[data-theme="dark"] .ant-drawer-footer,
+.semi-dark .ant-drawer-footer,
+.dark .ant-drawer-footer {
+  border-top-color: var(--semi-color-border) !important;
+}
+
+/* ========== 消息和通知 ========== */
+:root[theme-mode="dark"] .ant-message-notice-content,
+[data-theme="dark"] .ant-message-notice-content,
+.semi-dark .ant-message-notice-content,
+.dark .ant-message-notice-content {
+  background: var(--semi-color-bg-3) !important;
+  color: var(--semi-color-text-0) !important;
+}
+
+:root[theme-mode="dark"] .ant-notification-notice,
+[data-theme="dark"] .ant-notification-notice,
+.semi-dark .ant-notification-notice,
+.dark .ant-notification-notice {
+  background: var(--semi-color-bg-3) !important;
+  color: var(--semi-color-text-0) !important;
+}
+
+/* ========== 折叠面板 ========== */
+:root[theme-mode="dark"] .ant-collapse,
+[data-theme="dark"] .ant-collapse,
+.semi-dark .ant-collapse,
+.dark .ant-collapse {
+  background: var(--semi-color-bg-1) !important;
+  border-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-collapse > .ant-collapse-item,
+[data-theme="dark"] .ant-collapse > .ant-collapse-item,
+.semi-dark .ant-collapse > .ant-collapse-item,
+.dark .ant-collapse > .ant-collapse-item {
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-collapse-content,
+[data-theme="dark"] .ant-collapse-content,
+.semi-dark .ant-collapse-content,
+.dark .ant-collapse-content {
+  background: var(--semi-color-bg-1) !important;
+  border-top-color: var(--semi-color-border) !important;
+}
+
+/* ========== Tooltip ========== */
+:root[theme-mode="dark"] .ant-tooltip-inner,
+[data-theme="dark"] .ant-tooltip-inner,
+.semi-dark .ant-tooltip-inner,
+.dark .ant-tooltip-inner {
+  background: var(--semi-color-bg-4) !important;
+}
+
+:root[theme-mode="dark"] .ant-tooltip-arrow::before,
+[data-theme="dark"] .ant-tooltip-arrow::before,
+.semi-dark .ant-tooltip-arrow::before,
+.dark .ant-tooltip-arrow::before {
+  background: var(--semi-color-bg-4) !important;
+}
+
+/* ========== 菜单 ========== */
+:root[theme-mode="dark"] .ant-menu,
+[data-theme="dark"] .ant-menu,
+.semi-dark .ant-menu,
+.dark .ant-menu {
+  background: transparent !important;
+  color: var(--semi-color-text-0) !important;
+}
+
+:root[theme-mode="dark"] .ant-menu-item,
+[data-theme="dark"] .ant-menu-item,
+.semi-dark .ant-menu-item,
+.dark .ant-menu-item,
+:root[theme-mode="dark"] .ant-menu-submenu-title,
+[data-theme="dark"] .ant-menu-submenu-title,
+.semi-dark .ant-menu-submenu-title,
+.dark .ant-menu-submenu-title {
+  color: var(--semi-color-text-1) !important;
+}
+
+:root[theme-mode="dark"] .ant-menu-submenu-popup .ant-menu,
+[data-theme="dark"] .ant-menu-submenu-popup .ant-menu,
+.semi-dark .ant-menu-submenu-popup .ant-menu,
+.dark .ant-menu-submenu-popup .ant-menu {
+  background: var(--semi-color-bg-2) !important;
+}
+
+/* ========== Tabs 卡片式 ========== */
+:root[theme-mode="dark"] .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
+[data-theme="dark"] .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
+.semi-dark .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
+.dark .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
+  background: rgba(255, 255, 255, 0.04) !important;
+  border-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
+[data-theme="dark"] .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
+.semi-dark .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
+.dark .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
+  background: var(--semi-color-bg-2) !important;
+}
+
+/* ========== Segmented ========== */
+:root[theme-mode="dark"] .ant-segmented-item-selected,
+[data-theme="dark"] .ant-segmented-item-selected,
+.semi-dark .ant-segmented-item-selected,
+.dark .ant-segmented-item-selected {
+  background: var(--semi-color-bg-4) !important;
+}
+
+/* ========== Alert ========== */
+:root[theme-mode="dark"] .ant-alert-info,
+[data-theme="dark"] .ant-alert-info,
+.semi-dark .ant-alert-info,
+.dark .ant-alert-info {
+  background: rgba(0, 100, 250, 0.15) !important;
+}
+
+:root[theme-mode="dark"] .ant-alert-success,
+[data-theme="dark"] .ant-alert-success,
+.semi-dark .ant-alert-success,
+.dark .ant-alert-success {
+  background: rgba(59, 179, 70, 0.15) !important;
+}
+
+:root[theme-mode="dark"] .ant-alert-warning,
+[data-theme="dark"] .ant-alert-warning,
+.semi-dark .ant-alert-warning,
+.dark .ant-alert-warning {
+  background: rgba(252, 136, 0, 0.15) !important;
+}
+
+:root[theme-mode="dark"] .ant-alert-error,
+[data-theme="dark"] .ant-alert-error,
+.semi-dark .ant-alert-error,
+.dark .ant-alert-error {
+  background: rgba(249, 57, 32, 0.15) !important;
+}
+
+/* ========== 骨架屏 ========== */
+:root[theme-mode="dark"] .ant-skeleton-element .ant-skeleton-avatar,
+:root[theme-mode="dark"] .ant-skeleton-element .ant-skeleton-button,
+:root[theme-mode="dark"] .ant-skeleton-element .ant-skeleton-input,
+:root[theme-mode="dark"] .ant-skeleton-content .ant-skeleton-title,
+:root[theme-mode="dark"] .ant-skeleton-content .ant-skeleton-paragraph > li,
+[data-theme="dark"] .ant-skeleton-element .ant-skeleton-avatar,
+[data-theme="dark"] .ant-skeleton-element .ant-skeleton-button,
+[data-theme="dark"] .ant-skeleton-element .ant-skeleton-input,
+[data-theme="dark"] .ant-skeleton-content .ant-skeleton-title,
+[data-theme="dark"] .ant-skeleton-content .ant-skeleton-paragraph > li,
+.semi-dark .ant-skeleton-element .ant-skeleton-avatar,
+.semi-dark .ant-skeleton-element .ant-skeleton-button,
+.semi-dark .ant-skeleton-element .ant-skeleton-input,
+.semi-dark .ant-skeleton-content .ant-skeleton-title,
+.semi-dark .ant-skeleton-content .ant-skeleton-paragraph > li,
+.dark .ant-skeleton-element .ant-skeleton-avatar,
+.dark .ant-skeleton-element .ant-skeleton-button,
+.dark .ant-skeleton-element .ant-skeleton-input,
+.dark .ant-skeleton-content .ant-skeleton-title,
+.dark .ant-skeleton-content .ant-skeleton-paragraph > li {
+  background: linear-gradient(90deg, 
+    rgba(255, 255, 255, 0.11) 25%, 
+    rgba(255, 255, 255, 0.05) 37%, 
+    rgba(255, 255, 255, 0.11) 63%
+  ) !important;
+}
+
+/* ========== Descriptions ========== */
+:root[theme-mode="dark"] .ant-descriptions-bordered .ant-descriptions-item-label,
+[data-theme="dark"] .ant-descriptions-bordered .ant-descriptions-item-label,
+.semi-dark .ant-descriptions-bordered .ant-descriptions-item-label,
+.dark .ant-descriptions-bordered .ant-descriptions-item-label {
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+
+:root[theme-mode="dark"] .ant-descriptions-bordered .ant-descriptions-view,
+:root[theme-mode="dark"] .ant-descriptions-bordered .ant-descriptions-row,
+:root[theme-mode="dark"] .ant-descriptions-bordered .ant-descriptions-item-label,
+:root[theme-mode="dark"] .ant-descriptions-bordered .ant-descriptions-item-content,
+[data-theme="dark"] .ant-descriptions-bordered .ant-descriptions-view,
+[data-theme="dark"] .ant-descriptions-bordered .ant-descriptions-row,
+[data-theme="dark"] .ant-descriptions-bordered .ant-descriptions-item-label,
+[data-theme="dark"] .ant-descriptions-bordered .ant-descriptions-item-content,
+.semi-dark .ant-descriptions-bordered .ant-descriptions-view,
+.semi-dark .ant-descriptions-bordered .ant-descriptions-row,
+.semi-dark .ant-descriptions-bordered .ant-descriptions-item-label,
+.semi-dark .ant-descriptions-bordered .ant-descriptions-item-content,
+.dark .ant-descriptions-bordered .ant-descriptions-view,
+.dark .ant-descriptions-bordered .ant-descriptions-row,
+.dark .ant-descriptions-bordered .ant-descriptions-item-label,
+.dark .ant-descriptions-bordered .ant-descriptions-item-content {
+  border-color: var(--semi-color-border) !important;
+}
+
+/* ========== Transfer ========== */
+:root[theme-mode="dark"] .ant-transfer-list,
+[data-theme="dark"] .ant-transfer-list,
+.semi-dark .ant-transfer-list,
+.dark .ant-transfer-list {
+  background: var(--semi-color-bg-1) !important;
+  border-color: var(--semi-color-border) !important;
+}
+
+:root[theme-mode="dark"] .ant-transfer-list-header,
+[data-theme="dark"] .ant-transfer-list-header,
+.semi-dark .ant-transfer-list-header,
+.dark .ant-transfer-list-header {
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+/* ========== Timeline ========== */
+:root[theme-mode="dark"] .ant-timeline-item-head,
+[data-theme="dark"] .ant-timeline-item-head,
+.semi-dark .ant-timeline-item-head,
+.dark .ant-timeline-item-head {
+  background: var(--semi-color-bg-1) !important;
+}
+
+:root[theme-mode="dark"] .ant-timeline-item-tail,
+[data-theme="dark"] .ant-timeline-item-tail,
+.semi-dark .ant-timeline-item-tail,
+.dark .ant-timeline-item-tail {
+  border-left-color: rgba(255, 255, 255, 0.15) !important;
+}
+
+/* ========== Steps ========== */
+:root[theme-mode="dark"] .ant-steps-item-wait .ant-steps-item-icon,
+[data-theme="dark"] .ant-steps-item-wait .ant-steps-item-icon,
+.semi-dark .ant-steps-item-wait .ant-steps-item-icon,
+.dark .ant-steps-item-wait .ant-steps-item-icon {
+  background: rgba(255, 255, 255, 0.12) !important;
+  border-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+:root[theme-mode="dark"] .ant-steps-item-title::after,
+[data-theme="dark"] .ant-steps-item-title::after,
+.semi-dark .ant-steps-item-title::after,
+.dark .ant-steps-item-title::after {
+  background: var(--semi-color-border) !important;
+}
+
+/* ========== Progress ========== */
+:root[theme-mode="dark"] .ant-progress-inner,
+[data-theme="dark"] .ant-progress-inner,
+.semi-dark .ant-progress-inner,
+.dark .ant-progress-inner {
+  background: rgba(255, 255, 255, 0.12) !important;
+}
+
+:root[theme-mode="dark"] .ant-progress-circle-trail,
+[data-theme="dark"] .ant-progress-circle-trail,
+.semi-dark .ant-progress-circle-trail,
+.dark .ant-progress-circle-trail {
+  stroke: rgba(255, 255, 255, 0.12) !important;
+}
+
+/* ========== List ========== */
+:root[theme-mode="dark"] .ant-list-item,
+[data-theme="dark"] .ant-list-item,
+.semi-dark .ant-list-item,
+.dark .ant-list-item {
+  border-bottom-color: var(--semi-color-border) !important;
+}
+
+/* ========== Avatar Group ========== */
+:root[theme-mode="dark"] .ant-avatar-group .ant-avatar,
+[data-theme="dark"] .ant-avatar-group .ant-avatar,
+.semi-dark .ant-avatar-group .ant-avatar,
+.dark .ant-avatar-group .ant-avatar {
+  border-color: var(--semi-color-bg-1) !important;
+}
+
+/* ========== 滚动条 ========== */
+:root[theme-mode="dark"] ::-webkit-scrollbar-thumb,
+[data-theme="dark"] ::-webkit-scrollbar-thumb,
+.semi-dark ::-webkit-scrollbar-thumb,
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+:root[theme-mode="dark"] ::-webkit-scrollbar-thumb:hover,
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
+.semi-dark ::-webkit-scrollbar-thumb:hover,
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* ========== Tour ========== */
+:root[theme-mode="dark"] .ant-tour .ant-tour-inner,
+[data-theme="dark"] .ant-tour .ant-tour-inner,
+.semi-dark .ant-tour .ant-tour-inner,
+.dark .ant-tour .ant-tour-inner {
+  background: var(--semi-color-bg-2) !important;
+}
+
+/* ========== Calendar ========== */
+:root[theme-mode="dark"] .ant-picker-calendar,
+[data-theme="dark"] .ant-picker-calendar,
+.semi-dark .ant-picker-calendar,
+.dark .ant-picker-calendar {
+  background: var(--semi-color-bg-1) !important;
+}
+
+/* ========== Tree ========== */
+:root[theme-mode="dark"] .ant-tree,
+[data-theme="dark"] .ant-tree,
+.semi-dark .ant-tree,
+.dark .ant-tree {
+  background: transparent !important;
+}
+
+/* ========== Form ========== */
+:root[theme-mode="dark"] .ant-form-item-explain-error,
+[data-theme="dark"] .ant-form-item-explain-error,
+.semi-dark .ant-form-item-explain-error,
+.dark .ant-form-item-explain-error {
+  color: var(--semi-color-danger) !important;
+}

package/dist/antd/styles/index.css

@@ -0,0 +1,115 @@
+/**
+ * Semi Theme for Ant Design Vue - 主样式入口
+ * 
+ * 使用方式：
+ * 
+ * 1. 全局模式（推荐）
+ *    import { createSemiTheme } from 'semi-theme/antd'
+ *    import 'semi-theme/antd/styles'
+ *    app.use(createSemiTheme())
+ * 
+ * 2. 组件模式
+ *    import { createSemiTheme } from 'semi-theme/antd'
+ *    import 'semi-theme/antd/styles'
+ *    app.use(createSemiTheme({ components: ['Button', 'Input'] }))
+ * 
+ * 原理：
+ * - 插件会在 body 上添加 .semi 类名和 data-semi 属性
+ * - CSS 通过选择器 .semi[data-semi="all"] 或 .semi[data-semi-{component}] 控制
+ * - 无需手动添加任何类名，使用 Ant Design Vue 原生 API 即可
+ */
+
+/* ========== 基础样式和变量 ========== */
+@import './base.css';
+
+/* ========== 组件样式 ========== */
+/* 通用 */
+@import './components/button.css';
+@import './components/divider.css';
+@import './components/space.css';
+@import './components/icon.css';
+@import './components/typography.css';
+@import './components/flex.css';
+
+/* 布局 */
+@import './components/grid.css';
+@import './components/layout.css';
+
+/* 数据录入 */
+@import './components/input.css';
+@import './components/textArea.css';
+@import './components/inputnumber.css';
+@import './components/select.css';
+@import './components/cascader.css';
+@import './components/autocomplete.css';
+@import './components/mentions.css';
+@import './components/checkbox.css';
+@import './components/radio.css';
+@import './components/switch.css';
+@import './components/slider.css';
+@import './components/rate.css';
+@import './components/datepicker.css';
+@import './components/timepicker.css';
+@import './components/colorpicker.css';
+@import './components/upload.css';
+@import './components/transfer.css';
+@import './components/treeselect.css';
+@import './components/form.css';
+
+/* 数据展示 */
+@import './components/table.css';
+@import './components/card.css';
+@import './components/tag.css';
+@import './components/checkableTag.css';
+@import './components/tabs.css';
+@import './components/collapse.css';
+@import './components/list.css';
+@import './components/avatar.css';
+@import './components/badge.css';
+@import './components/timeline.css';
+@import './components/tree.css';
+@import './components/tooltip.css';
+@import './components/popover.css';
+@import './components/popconfirm.css';
+@import './components/descriptions.css';
+@import './components/statistic.css';
+@import './components/empty.css';
+@import './components/skeleton.css';
+@import './components/image.css';
+@import './components/carousel.css';
+@import './components/calendar.css';
+@import './components/segmented.css';
+@import './components/qrcode.css';
+@import './components/tour.css';
+
+/* 反馈 */
+@import './components/modal.css';
+@import './components/drawer.css';
+@import './components/message.css';
+@import './components/notification.css';
+@import './components/progress.css';
+@import './components/alert.css';
+@import './components/spin.css';
+@import './components/result.css';
+
+/* 导航 */
+@import './components/steps.css';
+@import './components/pagination.css';
+@import './components/menu.css';
+@import './components/dropdown.css';
+@import './components/breadcrumb.css';
+@import './components/anchor.css';
+@import './components/backtop.css';
+@import './components/pageheader.css';
+@import './components/affix.css';
+
+/* 其他 */
+@import './components/app.css';
+@import './components/configprovider.css';
+@import './components/floatbutton.css';
+@import './components/watermark.css';
+@import './components/scrollbar.css';
+
+/* 特殊样式 */
+@import './components/ai.css';
+@import './overrides.css';