@qlover/create-app 0.3.2 → 0.3.4

package/templates/react-app/src/styles/css/antd-themes/_default.css

@@ -0,0 +1,239 @@
+/* custom variables - for antd and custom css */
+html,
+.fe-theme {
+  /* Antd 主色调相关变量 - 浅蓝色主题 */
+  --fe-color-primary: #60a5fa; /* blue-400 */
+  --fe-color-primary-hover: #3b82f6; /* blue-500 */
+  --fe-color-primary-active: #2563eb; /* blue-600 */
+  --fe-color-primary-bg: rgba(
+    96,
+    165,
+    250,
+    0.1
+  ); /* blue-400 with 0.1 opacity */
+  --fe-color-primary-border: #60a5fa; /* blue-400 */
+  --fe-color-primary-text: #60a5fa; /* blue-400 */
+  --fe-color-primary-text-hover: #3b82f6; /* blue-500 */
+  --fe-color-primary-text-active: #2563eb; /* blue-600 */
+  --fe-color-primary-deprecated-bg: #60a5fa; /* blue-400 */
+  --fe-color-primary-deprecated-border: #60a5fa; /* blue-400 */
+
+  /* 状态色 */
+  --fe-color-success: #52c41a;
+  --fe-color-warning: #faad14;
+  /* 警告信息相关颜色 */
+  --fe-color-warning-bg: #fffbe6;
+  --fe-color-warning-bg-hover: #fff1b8;
+  --fe-color-warning-border: #ffe58f;
+  --fe-color-warning-border-hover: #ffd666;
+  --fe-color-warning-hover: #ffd666;
+  --fe-color-warning-active: #d48806;
+  --fe-color-warning-text-hover: #ffc53d;
+  --fe-color-warning-text: #faad14;
+  --fe-color-warning-text-active: #d48806;
+  --fe-color-error: #ff4d4f;
+  --fe-color-info: var(--fe-color-primary);
+  --fe-color-link: var(--fe-color-primary);
+
+  /* Antd 基础变量 */
+  --fe-color-bg-container: rgb(255 255 255);
+  --fe-color-bg-elevated: rgb(248 250 252);
+  --fe-color-text-heading: rgb(15 23 42); /* slate-900 用于标题文本 */
+  --fe-color-text: rgba(15 23 42 / 0.85);
+  --fe-color-text-secondary: rgba(15 23 42 / 0.45);
+  --fe-color-text-tertiary: rgba(15 23 42 / 0.35);
+  --fe-color-text-quaternary: rgba(15 23 42 / 0.15);
+  --fe-color-text-placeholder: rgba(15 23 42 / 0.25);
+  --fe-color-border: rgb(226 232 240);
+
+  /* Antd 组件通用变量 */
+  --fe-line-width: 1px;
+  --fe-line-type: solid;
+  --fe-border-radius: 6px;
+  --fe-motion-duration-mid: 0.2s;
+  --fe-line-height: 1.5715;
+
+  /* Motion 动画变量 */
+  --fe-motion-duration-slow: 0.3s;
+  --fe-motion-duration-normal: 0.2s;
+  --fe-motion-duration-fast: 0.1s;
+
+  /* Antd 图标相关变量 */
+  --fe-color-icon: rgba(0, 0, 0, 0.45); /* 默认图标颜色 */
+  --fe-color-icon-hover: rgba(0, 0, 0, 0.88); /* 图标悬停颜色 */
+  --fe-color-icon-active: var(--fe-color-primary); /* 图标激活颜色 */
+  --fe-color-icon-disabled: rgba(0, 0, 0, 0.25); /* 禁用状态图标颜色 */
+
+  /* Antd Input 组件变量 */
+  .ant-input,
+  .ant-input-css-var {
+    /* Input 内边距 */
+    --fe-input-padding-block: 4px;
+    --fe-input-padding-block-sm: 0px;
+    --fe-input-padding-block-lg: 7px;
+    --fe-input-padding-inline: 11px;
+    --fe-input-padding-inline-sm: 7px;
+    --fe-input-padding-inline-lg: 11px;
+
+    /* Input 字体大小 */
+    --fe-input-input-font-size: 14px;
+    --fe-input-input-font-size-lg: 16px;
+    --fe-input-input-font-size-sm: 14px;
+
+    /* Input 交互状态 */
+    --fe-input-hover-border-color: #4096ff;
+    --fe-input-active-border-color: #1677ff;
+    --fe-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+    --fe-input-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
+    --fe-input-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);
+    --fe-input-hover-bg: #ffffff;
+    --fe-input-active-bg: #ffffff;
+    --fe-input-addon-bg: rgba(0, 0, 0, 0.02);
+  }
+
+  /* Antd Button 组件变量 */
+  .ant-btn,
+  .ant-btn-css-var {
+    /* 基础样式 */
+    --fe-button-font-weight: 400;
+    --fe-button-padding-inline: 15px;
+    --fe-button-padding-inline-lg: 15px;
+    --fe-button-padding-inline-sm: 7px;
+    --fe-button-padding-block: 4px;
+    --fe-button-padding-block-sm: 0px;
+    --fe-button-padding-block-lg: 7px;
+
+    /* 字体大小 */
+    --fe-button-content-font-size: 14px;
+    --fe-button-content-font-size-sm: 14px;
+    --fe-button-content-font-size-lg: 16px;
+    --fe-button-content-line-height: 1.5714285714285714;
+    --fe-button-content-line-height-sm: 1.5714285714285714;
+    --fe-button-content-line-height-lg: 1.5;
+
+    /* 浅蓝色主题 */
+    --fe-button-primary-color: #fff;
+    --fe-button-primary-bg: #60a5fa; /* blue-400 */
+    --fe-button-primary-hover-bg: #3b82f6; /* blue-500 */
+    --fe-button-primary-active-bg: #2563eb; /* blue-600 */
+    --fe-button-primary-shadow: 0 2px 0 rgba(37, 99, 235, 0.1);
+
+    /* 默认按钮 */
+    --fe-button-default-color: rgba(0, 0, 0, 0.88);
+    --fe-button-default-bg: #ffffff;
+    --fe-button-default-border-color: #d9d9d9;
+    --fe-button-default-hover-bg: #ffffff;
+    --fe-button-default-hover-color: #60a5fa;
+    --fe-button-default-hover-border-color: #60a5fa;
+    --fe-button-default-active-bg: #ffffff;
+    --fe-button-default-active-color: #2563eb;
+    --fe-button-default-active-border-color: #2563eb;
+    --fe-button-default-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+
+    /* 其他状态 */
+    --fe-button-danger-color: #fff;
+    --fe-button-danger-shadow: 0 2px 0 rgba(255, 38, 5, 0.06);
+    --fe-button-border-color-disabled: #d9d9d9;
+    --fe-button-text-hover-bg: rgba(0, 0, 0, 0.04);
+  }
+
+  /* Antd Select 组件变量 */
+  .ant-select,
+  .ant-select-css-var {
+    --fe-select-internal_fixed_item_margin: 2px;
+    --fe-select-z-index-popup: 1050;
+    --fe-select-option-selected-color: rgba(0, 0, 0, 0.88);
+    --fe-select-option-selected-font-weight: 600;
+    --fe-select-option-selected-bg: var(--fe-color-primary-bg);
+    --fe-select-option-active-bg: rgba(0, 0, 0, 0.04);
+    --fe-select-option-padding: 5px 12px;
+    --fe-select-option-font-size: 14px;
+    --fe-select-option-line-height: 1.5714285714285714;
+    --fe-select-option-height: 32px;
+    --fe-select-selector-bg: var(--fe-color-bg-container);
+    --fe-select-clear-bg: var(--fe-color-bg-container);
+    --fe-select-single-item-height-lg: 40px;
+    --fe-select-multiple-item-bg: rgba(0, 0, 0, 0.06);
+    --fe-select-multiple-item-border-color: transparent;
+    --fe-select-multiple-item-height: 24px;
+    --fe-select-multiple-item-height-sm: 16px;
+    --fe-select-multiple-item-height-lg: 32px;
+    --fe-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);
+    --fe-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);
+    --fe-select-multiple-item-border-color-disabled: transparent;
+    --fe-select-show-arrow-padding-inline-end: 18px;
+    --fe-select-hover-border-color: var(--fe-color-primary);
+    --fe-select-active-border-color: var(--fe-color-primary-active);
+    --fe-select-active-outline-color: var(--fe-color-primary-bg);
+    --fe-select-select-affix-padding: 4px;
+  }
+
+  /* Antd Tag 组件变量 */
+  .ant-tag,
+  .ant-tag-css-var {
+    --fe-tag-default-bg: var(--fe-color-bg-container);
+    --fe-tag-default-color: var(--fe-color-text);
+    --fe-tag-default-border-color: var(--fe-color-border);
+    --fe-tag-font-size: 12px;
+    --fe-tag-line-height: 20px;
+    --fe-tag-height: 22px;
+    --fe-tag-padding-horizontal: 7px;
+    --fe-tag-margin: 0 8px 0 0;
+    --fe-tag-border-radius: 4px;
+  }
+
+  /* Antd Progress 组件变量 */
+  .ant-progress,
+  .ant-progress-css-var {
+    --fe-progress-default-color: var(--fe-color-primary);
+    --fe-progress-remaining-color: var(--fe-color-bg-elevated);
+    --fe-progress-text-color: var(--fe-color-text);
+    --fe-progress-line-font-size: 14px;
+    --fe-progress-circle-font-size: 14px;
+    --fe-progress-circle-text-color: var(--fe-color-text);
+    --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
+    --fe-progress-circle-stroke-width: 6px;
+    --fe-progress-line-stroke-width: 8px;
+  }
+
+  /* Antd Modal 组件变量 */
+  .ant-modal,
+  .ant-modal-css-var {
+    --fe-modal-footer-bg: transparent;
+    --fe-modal-header-bg: var(--fe-color-bg-container);
+    --fe-modal-title-line-height: var(--fe-line-height);
+    --fe-modal-title-font-size: 16px;
+    --fe-modal-content-bg: var(--fe-color-bg-container);
+    --fe-modal-title-color: var(--fe-color-text);
+    --fe-modal-content-padding: 20px 24px;
+    --fe-modal-header-padding: 0px;
+    --fe-modal-header-border-bottom: none;
+    --fe-modal-header-margin-bottom: 8px;
+    --fe-modal-body-padding: 0px;
+    --fe-modal-footer-padding: 0px;
+    --fe-modal-footer-border-top: none;
+    --fe-modal-footer-border-radius: var(--fe-border-radius);
+    --fe-modal-footer-margin-top: 12px;
+    --fe-modal-confirm-body-padding: 0px;
+    --fe-modal-confirm-icon-margin-inline-end: 12px;
+    --fe-modal-confirm-btns-margin-top: 12px;
+  }
+
+  /* Antd Message 组件变量 */
+  .ant-message,
+  .ant-message-css-var {
+    --fe-message-z-index-popup: 2010;
+    --fe-message-content-bg: var(--fe-color-bg-container);
+    --fe-message-content-padding: 9px 12px;
+    --fe-message-notice-content-padding: 10px 16px;
+    --fe-message-notice-content-bg: var(--fe-color-bg-container);
+    --fe-message-notice-content-shadow:
+      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    --fe-message-success-color: #52c41a;
+    --fe-message-error-color: #ff4d4f;
+    --fe-message-warning-color: #faad14;
+    --fe-message-info-color: var(--fe-color-primary);
+    --fe-message-loading-color: var(--fe-color-primary);
+  }
+}

package/templates/react-app/src/styles/css/antd-themes/dark.css

@@ -0,0 +1,176 @@
+[data-theme='dark'],
+[data-theme='dark'] .fe-theme {
+  /* Antd 主色调相关变量 - 紫色主题 */
+  --fe-color-primary: #9333ea; /* purple-600 */
+  --fe-color-primary-hover: #a855f7; /* purple-500 */
+  --fe-color-primary-active: #7e22ce; /* purple-700 */
+  --fe-color-primary-bg: rgba(
+    147,
+    51,
+    234,
+    0.1
+  ); /* purple-600 with 0.1 opacity */
+  --fe-color-primary-border: #9333ea; /* purple-600 */
+  --fe-color-primary-text: #a855f7; /* purple-500 - 文字用亮一点的紫色 */
+  --fe-color-primary-text-hover: #c084fc; /* purple-400 */
+  --fe-color-primary-text-active: #9333ea; /* purple-600 */
+  --fe-color-primary-deprecated-bg: #9333ea; /* purple-600 */
+  --fe-color-primary-deprecated-border: #9333ea; /* purple-600 */
+
+  /* 状态色 */
+  --fe-color-success: #52c41a;
+  --fe-color-warning: #faad14;
+  /* 警告信息相关颜色 - 暗色主题 */
+  --fe-color-warning-bg: rgba(250, 173, 20, 0.15);
+  --fe-color-warning-bg-hover: rgba(250, 173, 20, 0.25);
+  --fe-color-warning-border: rgba(250, 173, 20, 0.3);
+  --fe-color-warning-border-hover: #d48806;
+  --fe-color-warning-hover: #d48806;
+  --fe-color-warning-active: #ad6800;
+  --fe-color-warning-text-hover: #ffc53d;
+  --fe-color-warning-text: #faad14;
+  --fe-color-warning-text-active: #d48806;
+  --fe-color-error: #ff4d4f;
+  --fe-color-info: var(--fe-color-primary);
+  --fe-color-link: var(--fe-color-primary);
+
+  /* Antd 基础变量 */
+  --fe-color-bg-container: rgb(30 41 59);
+  --fe-color-bg-elevated: rgb(51 65 85);
+  --fe-color-text-heading: rgb(241 245 249); /* slate-100 用于暗色主题标题文本 */
+  --fe-color-text: rgba(255, 255, 255, 0.85);
+  --fe-color-text-secondary: rgba(255, 255, 255, 0.45);
+  --fe-color-text-tertiary: rgba(255, 255, 255, 0.35);
+  --fe-color-text-quaternary: rgba(255, 255, 255, 0.15);
+  --fe-color-text-placeholder: rgba(255, 255, 255, 0.25);
+  --fe-color-border: rgb(51 65 85);
+
+  /* Antd 图标相关变量 */
+  --fe-color-icon: rgba(255, 255, 255, 0.45); /* 暗色主题下的图标颜色 */
+  --fe-color-icon-hover: rgba(255, 255, 255, 0.85); /* 暗色主题下图标悬停颜色 */
+  --fe-color-icon-active: var(--fe-color-primary); /* 使用主题紫色 */
+  --fe-color-icon-disabled: rgba(255, 255, 255, 0.25); /* 暗色主题下禁用状态 */
+
+  /* Antd Input 组件变量 */
+  .ant-input,
+  .ant-input-css-var {
+    /* Input 交互状态 */
+    --fe-input-hover-border-color: #4096ff;
+    --fe-input-active-border-color: #1677ff;
+    --fe-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.2);
+    --fe-input-hover-bg: rgb(51 65 85);
+    --fe-input-active-bg: rgb(51 65 85);
+    --fe-input-addon-bg: rgba(255, 255, 255, 0.02);
+  }
+
+  /* Antd Button 组件变量 */
+  .ant-btn,
+  .ant-btn-css-var {
+    /* 紫色主题 */
+    --fe-button-primary-color: #fff;
+    --fe-button-primary-bg: #8b5cf6; /* violet-500 */
+    --fe-button-primary-hover-bg: #7c3aed; /* violet-600 */
+    --fe-button-primary-active-bg: #6d28d9; /* violet-700 */
+    --fe-button-primary-shadow: 0 2px 0 rgba(109, 40, 217, 0.2);
+
+    /* 默认按钮 */
+    --fe-button-default-color: rgba(255, 255, 255, 0.85);
+    --fe-button-default-bg: rgb(30 41 59); /* slate-800 */
+    --fe-button-default-border-color: rgb(51 65 85); /* slate-700 */
+    --fe-button-default-hover-bg: rgb(30 41 59);
+    --fe-button-default-hover-color: #8b5cf6;
+    --fe-button-default-hover-border-color: #8b5cf6;
+    --fe-button-default-active-bg: rgb(30 41 59);
+    --fe-button-default-active-color: #6d28d9;
+    --fe-button-default-active-border-color: #6d28d9;
+    --fe-button-default-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
+
+    /* 其他状态 */
+    --fe-button-text-hover-bg: rgba(255, 255, 255, 0.08);
+    --fe-button-border-color-disabled: rgb(51 65 85);
+  }
+
+  /* Antd Select 组件变量 */
+  .ant-select,
+  .ant-select-css-var {
+    --fe-select-internal_fixed_item_margin: 2px;
+    --fe-select-z-index-popup: 1050;
+    --fe-select-option-selected-color: rgba(255, 255, 255, 0.88);
+    --fe-select-option-selected-font-weight: 600;
+    --fe-select-option-selected-bg: var(--fe-color-primary-bg);
+    --fe-select-option-active-bg: rgba(255, 255, 255, 0.08);
+    --fe-select-option-padding: 5px 12px;
+    --fe-select-option-font-size: 14px;
+    --fe-select-option-line-height: 1.5714285714285714;
+    --fe-select-option-height: 32px;
+    --fe-select-selector-bg: var(--fe-color-bg-container);
+    --fe-select-clear-bg: var(--fe-color-bg-container);
+    --fe-select-single-item-height-lg: 40px;
+    --fe-select-multiple-item-bg: rgba(255, 255, 255, 0.08);
+    --fe-select-multiple-item-border-color: transparent;
+    --fe-select-multiple-item-height: 24px;
+    --fe-select-multiple-item-height-sm: 16px;
+    --fe-select-multiple-item-height-lg: 32px;
+    --fe-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);
+    --fe-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);
+    --fe-select-multiple-item-border-color-disabled: transparent;
+    --fe-select-show-arrow-padding-inline-end: 18px;
+    --fe-select-hover-border-color: var(--fe-color-primary);
+    --fe-select-active-border-color: var(--fe-color-primary-active);
+    --fe-select-active-outline-color: var(--fe-color-primary-bg);
+    --fe-select-select-affix-padding: 4px;
+  }
+
+  /* Antd Tag 组件变量 */
+  .ant-tag,
+  .ant-tag-css-var {
+    --fe-tag-default-bg: var(--fe-color-bg-container);
+    --fe-tag-default-color: var(--fe-color-text);
+    --fe-tag-default-border-color: var(--fe-color-border);
+    --fe-tag-font-size: 12px;
+    --fe-tag-line-height: 20px;
+    --fe-tag-height: 22px;
+    --fe-tag-padding-horizontal: 7px;
+    --fe-tag-margin: 0 8px 0 0;
+    --fe-tag-border-radius: 4px;
+  }
+
+  /* Antd Progress 组件变量 */
+  .ant-progress,
+  .ant-progress-css-var {
+    --fe-progress-default-color: var(--fe-color-primary);
+    --fe-progress-remaining-color: var(--fe-color-bg-elevated);
+    --fe-progress-text-color: var(--fe-color-text);
+    --fe-progress-line-font-size: 14px;
+    --fe-progress-circle-font-size: 14px;
+    --fe-progress-circle-text-color: var(--fe-color-text);
+    --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
+    --fe-progress-circle-stroke-width: 6px;
+    --fe-progress-line-stroke-width: 8px;
+  }
+
+  /* Antd Message 组件变量 */
+  .ant-message,
+  .ant-message-css-var {
+    --fe-message-z-index-popup: 2010;
+    --fe-message-content-bg: rgb(51 65 85); /* slate-700，比容器背景色深一点 */
+    --fe-message-content-padding: 9px 12px;
+    --fe-message-notice-content-padding: 10px 16px;
+    --fe-message-notice-content-bg: rgb(51 65 85);
+    --fe-message-notice-content-shadow:
+      0 6px 16px 0 rgba(0, 0, 0, 0.25), 0 3px 6px -4px rgba(0, 0, 0, 0.3),
+      0 9px 28px 8px rgba(0, 0, 0, 0.2);
+    --fe-message-notice-content-border: 1px solid rgb(71 85 105); /* slate-600，添加边框 */
+    --fe-message-success-color: #52c41a;
+    --fe-message-error-color: #ff4d4f;
+    --fe-message-warning-color: #faad14;
+    --fe-message-info-color: var(--fe-color-primary);
+    --fe-message-loading-color: var(--fe-color-primary);
+    --fe-message-text-color: rgba(
+      255,
+      255,
+      255,
+      0.85
+    ); /* 确保文字在深色背景上清晰可见 */
+  }
+}

package/templates/react-app/src/styles/css/antd-themes/index.css

@@ -0,0 +1,3 @@
+@import './_default.css';
+@import './dark.css';
+@import './pink.css';

package/templates/react-app/src/styles/css/antd-themes/no-context.css

@@ -0,0 +1,34 @@
+/*
+  这里是 Antd Message 和 Notification 静态组件变量
+  因为静态组件是全局样式，应用不上antd context样式主题变量，需要在这里覆盖
+ */
+.ant-message:not(.fe-theme) {
+  color: var(--fe-color-text);
+
+  .ant-message-notice-wrapper .ant-message-notice-content {
+    background: var(--fe-message-content-bg);
+  }
+
+  .ant-message-notice-wrapper .ant-message-info > .anticon,
+  .ant-message-notice-wrapper .ant-message-loading > .anticon {
+    color: var(--fe-color-info);
+  }
+}
+
+.ant-notification:not(.fe-theme) {
+  .ant-notification-notice-wrapper {
+    background: var(--fe-color-bg-elevated);
+  }
+
+  .ant-notification-notice-wrapper .ant-notification-notice-close {
+    color: var(--fe-color-icon);
+  }
+
+  .ant-notification-notice-wrapper .ant-notification-notice-message {
+    color: var(--fe-color-text-heading);
+  }
+
+  .ant-notification-notice-wrapper .ant-notification-notice-description {
+    color: var(--fe-color-text);
+  }
+}

package/templates/react-app/src/styles/css/antd-themes/pink.css

@@ -0,0 +1,199 @@
+[data-theme='pink'],
+[data-theme='pink'] .fe-theme {
+  /* Antd 主色调相关变量 - 玫瑰色主题 */
+  --fe-color-primary: #f472b6; /* pink-400 */
+  --fe-color-primary-hover: #ec4899; /* pink-500 */
+  --fe-color-primary-active: #db2777; /* pink-600 */
+  --fe-color-primary-bg: rgba(244, 114, 182, 0.1); /* pink-400 with 0.1 opacity */
+  --fe-color-primary-border: #f472b6; /* pink-400 */
+  --fe-color-primary-text: #f472b6; /* pink-400 */
+  --fe-color-primary-text-hover: #ec4899; /* pink-500 */
+  --fe-color-primary-text-active: #db2777; /* pink-600 */
+  --fe-color-primary-deprecated-bg: #f472b6; /* pink-400 */
+  --fe-color-primary-deprecated-border: #f472b6; /* pink-400 */
+
+  /* 状态色 */
+  --fe-color-success: #52c41a;
+  --fe-color-warning: #faad14;
+  /* 警告信息相关颜色 - 粉色主题 */
+  --fe-color-warning-bg: #fff7e6;
+  --fe-color-warning-bg-hover: #fff0d9;
+  --fe-color-warning-border: #ffd591;
+  --fe-color-warning-border-hover: #ffc069;
+  --fe-color-warning-hover: #ffc069;
+  --fe-color-warning-active: #d4770c;
+  --fe-color-warning-text-hover: #ffc53d;
+  --fe-color-warning-text: #faad14;
+  --fe-color-warning-text-active: #d4770c;
+  --fe-color-error: #fb7185; /* rose-400 for error in pink theme */
+  --fe-color-info: var(--fe-color-primary);
+  --fe-color-link: var(--fe-color-primary);
+
+  /* Antd 基础变量 */
+  --ant-color-bg-container: rgb(255 241 242);
+  --ant-color-bg-elevated: rgb(254 205 211);
+  --fe-color-text-heading: rgb(159 18 57); /* rose-800 用于粉色主题标题文本 */
+  --ant-color-text: rgba(190 18 60 / 0.85);
+  --ant-color-text-secondary: rgba(190 18 60 / 0.45);
+  --ant-color-text-tertiary: rgba(190 18 60 / 0.35);
+  --ant-color-text-quaternary: rgba(190 18 60 / 0.15);
+  --ant-color-text-placeholder: rgba(190 18 60 / 0.25);
+  --ant-color-border: rgb(254 205 211);
+
+  /* Antd 图标相关变量 */
+  --fe-color-icon: rgba(190, 18, 60, 0.45); /* 粉色主题下的图标颜色 */
+  --fe-color-icon-hover: rgba(190, 18, 60, 0.85); /* 粉色主题下图标悬停颜色 */
+  --fe-color-icon-active: var(--fe-color-primary); /* 使用主题粉色 */
+  --fe-color-icon-disabled: rgba(190, 18, 60, 0.25); /* 粉色主题下禁用状态 */
+
+  /* Antd Input 组件变量 */
+  .ant-input,
+  .ant-input-css-var {
+    /* Input 背景色 */
+    --fe-input-bg: var(--ant-color-bg-container);
+    --fe-input-hover-bg: var(--ant-color-bg-elevated);
+    --fe-input-active-bg: var(--ant-color-bg-elevated);
+    --fe-input-addon-bg: rgba(190 18 60, 0.02);
+
+    /* Input 边框颜色 */
+    --fe-input-border-color: var(--ant-color-border);
+    --fe-input-hover-border-color: rgb(var(--color-brand));
+    --fe-input-active-border-color: rgb(var(--color-brand));
+
+    /* Input 阴影效果 */
+    --fe-input-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.1);
+  }
+
+  /* Antd Button 组件变量 */
+  .ant-btn,
+  .ant-btn-css-var {
+    /* 玫瑰色主题 */
+    --fe-button-primary-color: #fff;
+    --fe-button-primary-bg: #f472b6; /* pink-400 */
+    --fe-button-primary-hover-bg: #ec4899; /* pink-500 */
+    --fe-button-primary-active-bg: #db2777; /* pink-600 */
+    --fe-button-primary-shadow: 0 2px 0 rgba(219, 39, 119, 0.15);
+
+    /* 默认按钮 */
+    --fe-button-default-color: rgb(190 18 60);
+    --fe-button-default-bg: rgb(255 241 242);
+    --fe-button-default-border-color: rgb(254 205 211);
+    --fe-button-default-hover-bg: rgb(255 241 242);
+    --fe-button-default-hover-color: #f472b6;
+    --fe-button-default-hover-border-color: #f472b6;
+    --fe-button-default-active-bg: rgb(255 241 242);
+    --fe-button-default-active-color: #db2777;
+    --fe-button-default-active-border-color: #db2777;
+    --fe-button-default-shadow: 0 2px 0 rgba(244, 114, 182, 0.1);
+
+    /* 其他状态 */
+    --fe-button-text-hover-bg: rgba(244, 114, 182, 0.08);
+    --fe-button-border-color-disabled: rgb(254 205 211);
+  }
+
+  /* Antd Select 组件变量 */
+  .ant-select,
+  .ant-select-css-var {
+    --fe-select-internal_fixed_item_margin: 2px;
+    --fe-select-z-index-popup: 1050;
+    --fe-select-option-selected-color: rgba(190, 18, 60, 0.88);
+    --fe-select-option-selected-font-weight: 600;
+    --fe-select-option-selected-bg: var(--fe-color-primary-bg);
+    --fe-select-option-active-bg: rgba(190, 18, 60, 0.04);
+    --fe-select-option-padding: 5px 12px;
+    --fe-select-option-font-size: 14px;
+    --fe-select-option-line-height: 1.5714285714285714;
+    --fe-select-option-height: 32px;
+    --fe-select-selector-bg: var(--fe-color-bg-container);
+    --fe-select-clear-bg: var(--fe-color-bg-container);
+    --fe-select-single-item-height-lg: 40px;
+    --fe-select-multiple-item-bg: rgba(190, 18, 60, 0.06);
+    --fe-select-multiple-item-border-color: transparent;
+    --fe-select-multiple-item-height: 24px;
+    --fe-select-multiple-item-height-sm: 16px;
+    --fe-select-multiple-item-height-lg: 32px;
+    --fe-select-multiple-selector-bg-disabled: rgba(190, 18, 60, 0.04);
+    --fe-select-multiple-item-color-disabled: rgba(190, 18, 60, 0.25);
+    --fe-select-multiple-item-border-color-disabled: transparent;
+    --fe-select-show-arrow-padding-inline-end: 18px;
+    --fe-select-hover-border-color: var(--fe-color-primary);
+    --fe-select-active-border-color: var(--fe-color-primary-active);
+    --fe-select-active-outline-color: var(--fe-color-primary-bg);
+    --fe-select-select-affix-padding: 4px;
+  }
+
+  /* Antd Tag 组件变量 */
+  .ant-tag,
+  .ant-tag-css-var {
+    --fe-tag-default-bg: var(--fe-color-bg-container);
+    --fe-tag-default-color: var(--fe-color-text);
+    --fe-tag-default-border-color: var(--fe-color-border);
+    --fe-tag-font-size: 12px;
+    --fe-tag-line-height: 20px;
+    --fe-tag-height: 22px;
+    --fe-tag-padding-horizontal: 7px;
+    --fe-tag-margin: 0 8px 0 0;
+    --fe-tag-border-radius: 4px;
+  }
+
+  /* Antd Progress 组件变量 */
+  .ant-progress,
+  .ant-progress-css-var {
+    --fe-progress-default-color: var(--fe-color-primary);
+    --fe-progress-remaining-color: var(--fe-color-bg-elevated);
+    --fe-progress-text-color: var(--fe-color-text);
+    --fe-progress-line-font-size: 14px;
+    --fe-progress-circle-font-size: 14px;
+    --fe-progress-circle-text-color: var(--fe-color-text);
+    --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
+    --fe-progress-circle-stroke-width: 6px;
+    --fe-progress-line-stroke-width: 8px;
+  }
+
+  /* Antd Message 组件变量 */
+  .ant-message,
+  .ant-message-css-var {
+    --fe-message-z-index-popup: 2010;
+    --fe-message-content-bg: var(--ant-color-bg-container);
+    --fe-message-content-padding: 9px 12px;
+    --fe-message-notice-content-padding: 10px 16px;
+    --fe-message-notice-content-bg: var(--ant-color-bg-container);
+    --fe-message-notice-content-shadow:
+      0 6px 16px 0 rgba(244, 114, 182, 0.08),
+      0 3px 6px -4px rgba(244, 114, 182, 0.12),
+      0 9px 28px 8px rgba(244, 114, 182, 0.05);
+    --fe-message-success-color: #52c41a;
+    --fe-message-error-color: #fb7185; /* rose-400 for error in pink theme */
+    --fe-message-warning-color: #faad14;
+    --fe-message-info-color: var(--fe-color-primary);
+    --fe-message-loading-color: var(--fe-color-primary);
+  }
+
+  /* Antd Modal 组件变量 */
+  .ant-modal,
+  .ant-modal-css-var {
+    --fe-modal-footer-bg: transparent;
+    --fe-modal-header-bg: var(--ant-color-bg-container);
+    --fe-modal-title-line-height: var(--fe-line-height);
+    --fe-modal-title-font-size: 16px;
+    --fe-modal-content-bg: var(--ant-color-bg-container);
+    --fe-modal-title-color: var(--ant-color-text);
+    --fe-modal-content-padding: 20px 24px;
+    --fe-modal-header-padding: 16px 24px;
+    --fe-modal-header-border-bottom: 1px solid var(--ant-color-border);
+    --fe-modal-header-margin-bottom: 8px;
+    --fe-modal-body-padding: 0px;
+    --fe-modal-footer-padding: 10px 16px;
+    --fe-modal-footer-border-top: 1px solid var(--ant-color-border);
+    --fe-modal-footer-border-radius: var(--fe-border-radius);
+    --fe-modal-footer-margin-top: 12px;
+    --fe-modal-confirm-body-padding: 32px 32px 24px;
+    --fe-modal-confirm-icon-margin-inline-end: 12px;
+    --fe-modal-confirm-btns-margin-top: 12px;
+    --fe-modal-box-shadow:
+      0 6px 16px 0 rgba(244, 114, 182, 0.08),
+      0 3px 6px -4px rgba(244, 114, 182, 0.12),
+      0 9px 28px 8px rgba(244, 114, 182, 0.05);
+    --fe-modal-mask-bg: rgba(244, 114, 182, 0.45);
+  }
+}

package/templates/react-app/src/{uikit/styles → styles}/css/index.css

@@ -1,2 +1,5 @@
 @import './tailwind.css';
+
+@import './antd-themes/index.css';
+
 @import './page.css';

package/templates/react-app/src/styles/css/page.css

@@ -0,0 +1,11 @@
+@theme {
+  --color-primary: rgba(var(--color-bg-base));
+  --color-secondary: rgba(var(--color-bg-secondary));
+  --color-elevated: rgba(var(--color-bg-elevated));
+  --color-text: rgba(var(--color-text-primary));
+  --color-text-secondary: rgba(var(--color-text-secondary));
+  --color-text-tertiary: rgba(var(--color-text-tertiary));
+  --color-border: rgba(var(--color-border));
+  --color-brand: rgba(var(--color-brand));
+  --color-brand-hover: rgba(var(--color-brand-hover));
+}

package/templates/react-app/src/styles/css/tailwind.css

@@ -0,0 +1,5 @@
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
+
+@import './themes/index.css';