@qlover/create-app 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/package.json +2 -2
  3. package/templates/react-app/README.md +311 -120
  4. package/templates/react-app/config/Identifier.I18n.ts +170 -0
  5. package/templates/react-app/config/common.ts +13 -0
  6. package/templates/react-app/package.json +6 -2
  7. package/templates/react-app/public/locales/en/common.json +25 -1
  8. package/templates/react-app/public/locales/zh/common.json +25 -1
  9. package/templates/react-app/src/App.tsx +5 -4
  10. package/templates/react-app/src/base/apis/AiApi.ts +4 -4
  11. package/templates/react-app/src/base/apis/feApi/FeApiAdapter.ts +2 -2
  12. package/templates/react-app/src/base/apis/userApi/UserApiAdapter.ts +2 -2
  13. package/templates/react-app/src/base/cases/AppConfig.ts +103 -0
  14. package/templates/react-app/src/base/cases/{appError/AppError.ts → AppError.ts} +0 -3
  15. package/templates/react-app/src/base/cases/DialogHandler.ts +86 -0
  16. package/templates/react-app/src/base/cases/RouterLoader.ts +166 -0
  17. package/templates/react-app/src/base/port/InteractionHubInterface.ts +94 -0
  18. package/templates/react-app/src/base/services/I18nService.ts +19 -0
  19. package/templates/react-app/src/base/types/deprecated-antd.d.ts +60 -0
  20. package/templates/react-app/src/core/IOC.ts +6 -1
  21. package/templates/react-app/src/core/bootstrap.ts +21 -31
  22. package/templates/react-app/src/core/globals.ts +8 -1
  23. package/templates/react-app/src/core/registers/RegisterGlobals.ts +11 -7
  24. package/templates/react-app/src/core/registers/index.ts +1 -2
  25. package/templates/react-app/src/pages/base/About.tsx +114 -1
  26. package/templates/react-app/src/pages/base/Executor.tsx +10 -15
  27. package/templates/react-app/src/styles/css/antd-themes/_default.css +239 -0
  28. package/templates/react-app/src/styles/css/antd-themes/dark.css +176 -0
  29. package/templates/react-app/src/styles/css/antd-themes/index.css +3 -0
  30. package/templates/react-app/src/styles/css/antd-themes/no-context.css +34 -0
  31. package/templates/react-app/src/styles/css/antd-themes/pink.css +199 -0
  32. package/templates/react-app/src/styles/css/index.css +3 -0
  33. package/templates/react-app/src/styles/css/themes/_default.css +10 -181
  34. package/templates/react-app/src/styles/css/themes/dark.css +10 -135
  35. package/templates/react-app/src/styles/css/themes/pink.css +10 -141
  36. package/templates/react-app/src/uikit/components/RouterRenderComponent.tsx +1 -1
  37. package/templates/react-app/src/uikit/controllers/RouterController.ts +1 -1
  38. package/templates/react-app/src/uikit/controllers/UserController.ts +1 -1
  39. package/templates/react-app/tsconfig.json +3 -2
  40. package/templates/react-app/tsconfig.node.json +2 -1
  41. package/templates/react-app/vite.config.ts +70 -2
  42. package/templates/react-app/src/base/cases/router-loader/index.ts +0 -90
  43. package/templates/react-app/src/core/AppConfig.ts +0 -36
package/templates/react-app/src/styles/css/antd-themes/pink.css ADDED
@@ -0,0 +1,199 @@
1
+ [data-theme='pink'],
2
+ [data-theme='pink'] .fe-theme {
3
+ /* Antd 主色调相关变量 - 玫瑰色主题 */
4
+ --fe-color-primary: #f472b6; /* pink-400 */
5
+ --fe-color-primary-hover: #ec4899; /* pink-500 */
6
+ --fe-color-primary-active: #db2777; /* pink-600 */
7
+ --fe-color-primary-bg: rgba(244, 114, 182, 0.1); /* pink-400 with 0.1 opacity */
8
+ --fe-color-primary-border: #f472b6; /* pink-400 */
9
+ --fe-color-primary-text: #f472b6; /* pink-400 */
10
+ --fe-color-primary-text-hover: #ec4899; /* pink-500 */
11
+ --fe-color-primary-text-active: #db2777; /* pink-600 */
12
+ --fe-color-primary-deprecated-bg: #f472b6; /* pink-400 */
13
+ --fe-color-primary-deprecated-border: #f472b6; /* pink-400 */
14
+
15
+ /* 状态色 */
16
+ --fe-color-success: #52c41a;
17
+ --fe-color-warning: #faad14;
18
+ /* 警告信息相关颜色 - 粉色主题 */
19
+ --fe-color-warning-bg: #fff7e6;
20
+ --fe-color-warning-bg-hover: #fff0d9;
21
+ --fe-color-warning-border: #ffd591;
22
+ --fe-color-warning-border-hover: #ffc069;
23
+ --fe-color-warning-hover: #ffc069;
24
+ --fe-color-warning-active: #d4770c;
25
+ --fe-color-warning-text-hover: #ffc53d;
26
+ --fe-color-warning-text: #faad14;
27
+ --fe-color-warning-text-active: #d4770c;
28
+ --fe-color-error: #fb7185; /* rose-400 for error in pink theme */
29
+ --fe-color-info: var(--fe-color-primary);
30
+ --fe-color-link: var(--fe-color-primary);
31
+
32
+ /* Antd 基础变量 */
33
+ --ant-color-bg-container: rgb(255 241 242);
34
+ --ant-color-bg-elevated: rgb(254 205 211);
35
+ --fe-color-text-heading: rgb(159 18 57); /* rose-800 用于粉色主题标题文本 */
36
+ --ant-color-text: rgba(190 18 60 / 0.85);
37
+ --ant-color-text-secondary: rgba(190 18 60 / 0.45);
38
+ --ant-color-text-tertiary: rgba(190 18 60 / 0.35);
39
+ --ant-color-text-quaternary: rgba(190 18 60 / 0.15);
40
+ --ant-color-text-placeholder: rgba(190 18 60 / 0.25);
41
+ --ant-color-border: rgb(254 205 211);
42
+
43
+ /* Antd 图标相关变量 */
44
+ --fe-color-icon: rgba(190, 18, 60, 0.45); /* 粉色主题下的图标颜色 */
45
+ --fe-color-icon-hover: rgba(190, 18, 60, 0.85); /* 粉色主题下图标悬停颜色 */
46
+ --fe-color-icon-active: var(--fe-color-primary); /* 使用主题粉色 */
47
+ --fe-color-icon-disabled: rgba(190, 18, 60, 0.25); /* 粉色主题下禁用状态 */
48
+
49
+ /* Antd Input 组件变量 */
50
+ .ant-input,
51
+ .ant-input-css-var {
52
+ /* Input 背景色 */
53
+ --fe-input-bg: var(--ant-color-bg-container);
54
+ --fe-input-hover-bg: var(--ant-color-bg-elevated);
55
+ --fe-input-active-bg: var(--ant-color-bg-elevated);
56
+ --fe-input-addon-bg: rgba(190 18 60, 0.02);
57
+
58
+ /* Input 边框颜色 */
59
+ --fe-input-border-color: var(--ant-color-border);
60
+ --fe-input-hover-border-color: rgb(var(--color-brand));
61
+ --fe-input-active-border-color: rgb(var(--color-brand));
62
+
63
+ /* Input 阴影效果 */
64
+ --fe-input-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.1);
65
+ }
66
+
67
+ /* Antd Button 组件变量 */
68
+ .ant-btn,
69
+ .ant-btn-css-var {
70
+ /* 玫瑰色主题 */
71
+ --fe-button-primary-color: #fff;
72
+ --fe-button-primary-bg: #f472b6; /* pink-400 */
73
+ --fe-button-primary-hover-bg: #ec4899; /* pink-500 */
74
+ --fe-button-primary-active-bg: #db2777; /* pink-600 */
75
+ --fe-button-primary-shadow: 0 2px 0 rgba(219, 39, 119, 0.15);
76
+
77
+ /* 默认按钮 */
78
+ --fe-button-default-color: rgb(190 18 60);
79
+ --fe-button-default-bg: rgb(255 241 242);
80
+ --fe-button-default-border-color: rgb(254 205 211);
81
+ --fe-button-default-hover-bg: rgb(255 241 242);
82
+ --fe-button-default-hover-color: #f472b6;
83
+ --fe-button-default-hover-border-color: #f472b6;
84
+ --fe-button-default-active-bg: rgb(255 241 242);
85
+ --fe-button-default-active-color: #db2777;
86
+ --fe-button-default-active-border-color: #db2777;
87
+ --fe-button-default-shadow: 0 2px 0 rgba(244, 114, 182, 0.1);
88
+
89
+ /* 其他状态 */
90
+ --fe-button-text-hover-bg: rgba(244, 114, 182, 0.08);
91
+ --fe-button-border-color-disabled: rgb(254 205 211);
92
+ }
93
+
94
+ /* Antd Select 组件变量 */
95
+ .ant-select,
96
+ .ant-select-css-var {
97
+ --fe-select-internal_fixed_item_margin: 2px;
98
+ --fe-select-z-index-popup: 1050;
99
+ --fe-select-option-selected-color: rgba(190, 18, 60, 0.88);
100
+ --fe-select-option-selected-font-weight: 600;
101
+ --fe-select-option-selected-bg: var(--fe-color-primary-bg);
102
+ --fe-select-option-active-bg: rgba(190, 18, 60, 0.04);
103
+ --fe-select-option-padding: 5px 12px;
104
+ --fe-select-option-font-size: 14px;
105
+ --fe-select-option-line-height: 1.5714285714285714;
106
+ --fe-select-option-height: 32px;
107
+ --fe-select-selector-bg: var(--fe-color-bg-container);
108
+ --fe-select-clear-bg: var(--fe-color-bg-container);
109
+ --fe-select-single-item-height-lg: 40px;
110
+ --fe-select-multiple-item-bg: rgba(190, 18, 60, 0.06);
111
+ --fe-select-multiple-item-border-color: transparent;
112
+ --fe-select-multiple-item-height: 24px;
113
+ --fe-select-multiple-item-height-sm: 16px;
114
+ --fe-select-multiple-item-height-lg: 32px;
115
+ --fe-select-multiple-selector-bg-disabled: rgba(190, 18, 60, 0.04);
116
+ --fe-select-multiple-item-color-disabled: rgba(190, 18, 60, 0.25);
117
+ --fe-select-multiple-item-border-color-disabled: transparent;
118
+ --fe-select-show-arrow-padding-inline-end: 18px;
119
+ --fe-select-hover-border-color: var(--fe-color-primary);
120
+ --fe-select-active-border-color: var(--fe-color-primary-active);
121
+ --fe-select-active-outline-color: var(--fe-color-primary-bg);
122
+ --fe-select-select-affix-padding: 4px;
123
+ }
124
+
125
+ /* Antd Tag 组件变量 */
126
+ .ant-tag,
127
+ .ant-tag-css-var {
128
+ --fe-tag-default-bg: var(--fe-color-bg-container);
129
+ --fe-tag-default-color: var(--fe-color-text);
130
+ --fe-tag-default-border-color: var(--fe-color-border);
131
+ --fe-tag-font-size: 12px;
132
+ --fe-tag-line-height: 20px;
133
+ --fe-tag-height: 22px;
134
+ --fe-tag-padding-horizontal: 7px;
135
+ --fe-tag-margin: 0 8px 0 0;
136
+ --fe-tag-border-radius: 4px;
137
+ }
138
+
139
+ /* Antd Progress 组件变量 */
140
+ .ant-progress,
141
+ .ant-progress-css-var {
142
+ --fe-progress-default-color: var(--fe-color-primary);
143
+ --fe-progress-remaining-color: var(--fe-color-bg-elevated);
144
+ --fe-progress-text-color: var(--fe-color-text);
145
+ --fe-progress-line-font-size: 14px;
146
+ --fe-progress-circle-font-size: 14px;
147
+ --fe-progress-circle-text-color: var(--fe-color-text);
148
+ --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
149
+ --fe-progress-circle-stroke-width: 6px;
150
+ --fe-progress-line-stroke-width: 8px;
151
+ }
152
+
153
+ /* Antd Message 组件变量 */
154
+ .ant-message,
155
+ .ant-message-css-var {
156
+ --fe-message-z-index-popup: 2010;
157
+ --fe-message-content-bg: var(--ant-color-bg-container);
158
+ --fe-message-content-padding: 9px 12px;
159
+ --fe-message-notice-content-padding: 10px 16px;
160
+ --fe-message-notice-content-bg: var(--ant-color-bg-container);
161
+ --fe-message-notice-content-shadow:
162
+ 0 6px 16px 0 rgba(244, 114, 182, 0.08),
163
+ 0 3px 6px -4px rgba(244, 114, 182, 0.12),
164
+ 0 9px 28px 8px rgba(244, 114, 182, 0.05);
165
+ --fe-message-success-color: #52c41a;
166
+ --fe-message-error-color: #fb7185; /* rose-400 for error in pink theme */
167
+ --fe-message-warning-color: #faad14;
168
+ --fe-message-info-color: var(--fe-color-primary);
169
+ --fe-message-loading-color: var(--fe-color-primary);
170
+ }
171
+
172
+ /* Antd Modal 组件变量 */
173
+ .ant-modal,
174
+ .ant-modal-css-var {
175
+ --fe-modal-footer-bg: transparent;
176
+ --fe-modal-header-bg: var(--ant-color-bg-container);
177
+ --fe-modal-title-line-height: var(--fe-line-height);
178
+ --fe-modal-title-font-size: 16px;
179
+ --fe-modal-content-bg: var(--ant-color-bg-container);
180
+ --fe-modal-title-color: var(--ant-color-text);
181
+ --fe-modal-content-padding: 20px 24px;
182
+ --fe-modal-header-padding: 16px 24px;
183
+ --fe-modal-header-border-bottom: 1px solid var(--ant-color-border);
184
+ --fe-modal-header-margin-bottom: 8px;
185
+ --fe-modal-body-padding: 0px;
186
+ --fe-modal-footer-padding: 10px 16px;
187
+ --fe-modal-footer-border-top: 1px solid var(--ant-color-border);
188
+ --fe-modal-footer-border-radius: var(--fe-border-radius);
189
+ --fe-modal-footer-margin-top: 12px;
190
+ --fe-modal-confirm-body-padding: 32px 32px 24px;
191
+ --fe-modal-confirm-icon-margin-inline-end: 12px;
192
+ --fe-modal-confirm-btns-margin-top: 12px;
193
+ --fe-modal-box-shadow:
194
+ 0 6px 16px 0 rgba(244, 114, 182, 0.08),
195
+ 0 3px 6px -4px rgba(244, 114, 182, 0.12),
196
+ 0 9px 28px 8px rgba(244, 114, 182, 0.05);
197
+ --fe-modal-mask-bg: rgba(244, 114, 182, 0.45);
198
+ }
199
+ }
package/templates/react-app/src/styles/css/index.css CHANGED
@@ -1,2 +1,5 @@
1
1
  @import './tailwind.css';
2
+
3
+ @import './antd-themes/index.css';
4
+
2
5
  @import './page.css';
package/templates/react-app/src/styles/css/themes/_default.css CHANGED
@@ -5,196 +5,25 @@
5
5
  --color-bg-base: 255 255 255;
6
6
  --color-bg-secondary: 241 245 249; /* slate-100 */
7
7
  --color-bg-elevated: 248 250 252; /* slate-50 */
8
-
8
+
9
9
  /* 文字颜色 */
10
10
  --color-text-primary: 15 23 42; /* slate-900 */
11
11
  --color-text-secondary: 71 85 105; /* slate-600 */
12
12
  --color-text-tertiary: 100 116 139; /* slate-500 */
13
-
13
+
14
14
  /* 边框颜色 */
15
15
  --color-border: 226 232 240; /* slate-200 */
16
-
16
+
17
17
  /* 品牌色 */
18
18
  --color-brand: 37 99 235; /* blue-600 */
19
19
  --color-brand-hover: 59 130 246; /* blue-500 */
20
- }
21
- }
22
-
23
- /* custom variables - for antd and custom css */
24
- html,
25
- .fe-theme {
26
- /* Antd 主色调相关变量 - 浅蓝色主题 */
27
- --fe-color-primary: #60a5fa; /* blue-400 */
28
- --fe-color-primary-hover: #3b82f6; /* blue-500 */
29
- --fe-color-primary-active: #2563eb; /* blue-600 */
30
- --fe-color-primary-bg: rgba(96, 165, 250, 0.1); /* blue-400 with 0.1 opacity */
31
- --fe-color-primary-border: #60a5fa; /* blue-400 */
32
- --fe-color-primary-text: #60a5fa; /* blue-400 */
33
- --fe-color-primary-text-hover: #3b82f6; /* blue-500 */
34
- --fe-color-primary-text-active: #2563eb; /* blue-600 */
35
- --fe-color-primary-deprecated-bg: #60a5fa; /* blue-400 */
36
- --fe-color-primary-deprecated-border: #60a5fa; /* blue-400 */
37
-
38
- /* Antd 基础变量 */
39
- --fe-color-bg-container: rgb(255 255 255);
40
- --fe-color-bg-elevated: rgb(248 250 252);
41
- --fe-color-text: rgba(15 23 42 / 0.85);
42
- --fe-color-text-secondary: rgba(15 23 42 / 0.45);
43
- --fe-color-text-tertiary: rgba(15 23 42 / 0.35);
44
- --fe-color-text-quaternary: rgba(15 23 42 / 0.15);
45
- --fe-color-text-placeholder: rgba(15 23 42 / 0.25);
46
- --fe-color-border: rgb(226 232 240);
47
-
48
- /* Antd 组件通用变量 */
49
- --fe-line-width: 1px;
50
- --fe-line-type: solid;
51
- --fe-border-radius: 6px;
52
- --fe-motion-duration-mid: 0.2s;
53
- --fe-line-height: 1.5715;
54
-
55
- /* Antd Input 组件变量 */
56
- &.ant-input-css-var {
57
- /* Input 内边距 */
58
- --fe-input-padding-block: 4px;
59
- --fe-input-padding-block-sm: 0px;
60
- --fe-input-padding-block-lg: 7px;
61
- --fe-input-padding-inline: 11px;
62
- --fe-input-padding-inline-sm: 7px;
63
- --fe-input-padding-inline-lg: 11px;
64
-
65
- /* Input 字体大小 */
66
- --fe-input-input-font-size: 14px;
67
- --fe-input-input-font-size-lg: 16px;
68
- --fe-input-input-font-size-sm: 14px;
69
-
70
- /* Input 交互状态 */
71
- --fe-input-hover-border-color: #4096ff;
72
- --fe-input-active-border-color: #1677ff;
73
- --fe-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
74
- --fe-input-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
75
- --fe-input-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);
76
- --fe-input-hover-bg: #ffffff;
77
- --fe-input-active-bg: #ffffff;
78
- --fe-input-addon-bg: rgba(0, 0, 0, 0.02);
79
- }
80
-
81
- /* 登录页特定样式 */
82
- --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
83
- --login-input-bg: var(--fe-color-bg-container);
84
- --login-input-border: var(--fe-color-border);
85
- --login-button-text: rgb(255 255 255);
86
- --login-social-button-bg: var(--fe-color-bg-container);
87
- --login-social-button-border: var(--fe-color-border);
88
-
89
- /* Antd Button 组件变量 */
90
- &.ant-btn {
91
- /* 基础样式 */
92
- --fe-button-font-weight: 400;
93
- --fe-button-padding-inline: 15px;
94
- --fe-button-padding-inline-lg: 15px;
95
- --fe-button-padding-inline-sm: 7px;
96
- --fe-button-padding-block: 4px;
97
- --fe-button-padding-block-sm: 0px;
98
- --fe-button-padding-block-lg: 7px;
99
-
100
- /* 字体大小 */
101
- --fe-button-content-font-size: 14px;
102
- --fe-button-content-font-size-sm: 14px;
103
- --fe-button-content-font-size-lg: 16px;
104
- --fe-button-content-line-height: 1.5714285714285714;
105
- --fe-button-content-line-height-sm: 1.5714285714285714;
106
- --fe-button-content-line-height-lg: 1.5;
107
-
108
- /* 浅蓝色主题 */
109
- --fe-button-primary-color: #fff;
110
- --fe-button-primary-bg: #60a5fa; /* blue-400 */
111
- --fe-button-primary-hover-bg: #3b82f6; /* blue-500 */
112
- --fe-button-primary-active-bg: #2563eb; /* blue-600 */
113
- --fe-button-primary-shadow: 0 2px 0 rgba(37, 99, 235, 0.1);
114
-
115
- /* 默认按钮 */
116
- --fe-button-default-color: rgba(0, 0, 0, 0.88);
117
- --fe-button-default-bg: #ffffff;
118
- --fe-button-default-border-color: #d9d9d9;
119
- --fe-button-default-hover-bg: #ffffff;
120
- --fe-button-default-hover-color: #60a5fa;
121
- --fe-button-default-hover-border-color: #60a5fa;
122
- --fe-button-default-active-bg: #ffffff;
123
- --fe-button-default-active-color: #2563eb;
124
- --fe-button-default-active-border-color: #2563eb;
125
- --fe-button-default-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
126
-
127
- /* 其他状态 */
128
- --fe-button-danger-color: #fff;
129
- --fe-button-danger-shadow: 0 2px 0 rgba(255, 38, 5, 0.06);
130
- --fe-button-border-color-disabled: #d9d9d9;
131
- --fe-button-text-hover-bg: rgba(0, 0, 0, 0.04);
132
- }
133
-
134
- /* Antd 图标相关变量 */
135
- --fe-color-icon: rgba(0, 0, 0, 0.45); /* 默认图标颜色 */
136
- --fe-color-icon-hover: rgba(0, 0, 0, 0.88); /* 图标悬停颜色 */
137
- --fe-color-icon-active: var(--fe-color-primary); /* 图标激活颜色 */
138
- --fe-color-icon-disabled: rgba(0, 0, 0, 0.25); /* 禁用状态图标颜色 */
139
-
140
- /* Antd Select 组件变量 */
141
- &.ant-select-css-var {
142
- --fe-select-internal_fixed_item_margin: 2px;
143
- --fe-select-z-index-popup: 1050;
144
- --fe-select-option-selected-color: rgba(0, 0, 0, 0.88);
145
- --fe-select-option-selected-font-weight: 600;
146
- --fe-select-option-selected-bg: var(--fe-color-primary-bg);
147
- --fe-select-option-active-bg: rgba(0, 0, 0, 0.04);
148
- --fe-select-option-padding: 5px 12px;
149
- --fe-select-option-font-size: 14px;
150
- --fe-select-option-line-height: 1.5714285714285714;
151
- --fe-select-option-height: 32px;
152
- --fe-select-selector-bg: var(--fe-color-bg-container);
153
- --fe-select-clear-bg: var(--fe-color-bg-container);
154
- --fe-select-single-item-height-lg: 40px;
155
- --fe-select-multiple-item-bg: rgba(0, 0, 0, 0.06);
156
- --fe-select-multiple-item-border-color: transparent;
157
- --fe-select-multiple-item-height: 24px;
158
- --fe-select-multiple-item-height-sm: 16px;
159
- --fe-select-multiple-item-height-lg: 32px;
160
- --fe-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);
161
- --fe-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);
162
- --fe-select-multiple-item-border-color-disabled: transparent;
163
- --fe-select-show-arrow-padding-inline-end: 18px;
164
- --fe-select-hover-border-color: var(--fe-color-primary);
165
- --fe-select-active-border-color: var(--fe-color-primary-active);
166
- --fe-select-active-outline-color: var(--fe-color-primary-bg);
167
- --fe-select-select-affix-padding: 4px;
168
- }
169
-
170
- /* Antd Tag 组件变量 */
171
- &.ant-tag-css-var {
172
- --fe-tag-default-bg: var(--fe-color-bg-container);
173
- --fe-tag-default-color: var(--fe-color-text);
174
- --fe-tag-default-border-color: var(--fe-color-border);
175
- --fe-tag-font-size: 12px;
176
- --fe-tag-line-height: 20px;
177
- --fe-tag-height: 22px;
178
- --fe-tag-padding-horizontal: 7px;
179
- --fe-tag-margin: 0 8px 0 0;
180
- --fe-tag-border-radius: 4px;
181
- }
182
20
 
183
- /* Antd Progress 组件变量 */
184
- &.ant-progress-css-var {
185
- --fe-progress-default-color: var(--fe-color-primary);
186
- --fe-progress-remaining-color: var(--fe-color-bg-elevated);
187
- --fe-progress-text-color: var(--fe-color-text);
188
- --fe-progress-line-font-size: 14px;
189
- --fe-progress-circle-font-size: 14px;
190
- --fe-progress-circle-text-color: var(--fe-color-text);
191
- --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
192
- --fe-progress-circle-stroke-width: 6px;
193
- --fe-progress-line-stroke-width: 8px;
21
+ /* 登录页特定样式 */
22
+ --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
23
+ --login-input-bg: var(--fe-color-bg-container);
24
+ --login-input-border: var(--fe-color-border);
25
+ --login-button-text: rgb(255 255 255);
26
+ --login-social-button-bg: var(--fe-color-bg-container);
27
+ --login-social-button-border: var(--fe-color-border);
194
28
  }
195
-
196
- /* Motion 动画变量 */
197
- --fe-motion-duration-slow: 0.3s;
198
- --fe-motion-duration-normal: 0.2s;
199
- --fe-motion-duration-fast: 0.1s;
200
29
  }
package/templates/react-app/src/styles/css/themes/dark.css CHANGED
@@ -5,150 +5,25 @@
5
5
  --color-bg-base: 15 23 42; /* slate-900 */
6
6
  --color-bg-secondary: 30 41 59; /* slate-800 */
7
7
  --color-bg-elevated: 51 65 85; /* slate-700 */
8
-
8
+
9
9
  /* 文字颜色 */
10
10
  --color-text-primary: 255 255 255;
11
11
  --color-text-secondary: 148 163 184; /* slate-400 */
12
12
  --color-text-tertiary: 100 116 139; /* slate-500 */
13
-
13
+
14
14
  /* 边框颜色 */
15
15
  --color-border: 51 65 85; /* slate-700 */
16
-
16
+
17
17
  /* 品牌色 */
18
18
  --color-brand: 37 99 235; /* blue-600 */
19
19
  --color-brand-hover: 59 130 246; /* blue-500 */
20
- }
21
- }
22
-
23
- /* custom variables - for antd and custom css */
24
- [data-theme='dark'],
25
- [data-theme='dark'] .fe-theme {
26
- /* Antd 主色调相关变量 - 紫色主题 */
27
- --fe-color-primary: #9333ea; /* purple-600 */
28
- --fe-color-primary-hover: #a855f7; /* purple-500 */
29
- --fe-color-primary-active: #7e22ce; /* purple-700 */
30
- --fe-color-primary-bg: rgba(147, 51, 234, 0.1); /* purple-600 with 0.1 opacity */
31
- --fe-color-primary-border: #9333ea; /* purple-600 */
32
- --fe-color-primary-text: #a855f7; /* purple-500 - 文字用亮一点的紫色 */
33
- --fe-color-primary-text-hover: #c084fc; /* purple-400 */
34
- --fe-color-primary-text-active: #9333ea; /* purple-600 */
35
- --fe-color-primary-deprecated-bg: #9333ea; /* purple-600 */
36
- --fe-color-primary-deprecated-border: #9333ea; /* purple-600 */
37
-
38
- /* Antd 基础变量 */
39
- --fe-color-bg-container: rgb(30 41 59);
40
- --fe-color-bg-elevated: rgb(51 65 85);
41
- --fe-color-text: rgba(255, 255, 255, 0.85);
42
- --fe-color-text-secondary: rgba(255, 255, 255, 0.45);
43
- --fe-color-text-tertiary: rgba(255, 255, 255, 0.35);
44
- --fe-color-text-quaternary: rgba(255, 255, 255, 0.15);
45
- --fe-color-text-placeholder: rgba(255, 255, 255, 0.25);
46
- --fe-color-border: rgb(51 65 85);
47
-
48
- /* Antd Input 组件变量 */
49
- &.ant-input-css-var {
50
- /* Input 交互状态 */
51
- --fe-input-hover-border-color: #4096ff;
52
- --fe-input-active-border-color: #1677ff;
53
- --fe-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.2);
54
- --fe-input-hover-bg: rgb(51 65 85);
55
- --fe-input-active-bg: rgb(51 65 85);
56
- --fe-input-addon-bg: rgba(255, 255, 255, 0.02);
57
- }
58
-
59
- /* 登录页特定样式 */
60
- --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
61
- --login-input-bg: var(--fe-color-bg-container);
62
- --login-input-border: var(--fe-color-border);
63
- --login-button-text: rgb(255 255 255);
64
- --login-social-button-bg: var(--fe-color-bg-container);
65
- --login-social-button-border: var(--fe-color-border);
66
-
67
- /* Antd Button 组件变量 */
68
- &.ant-btn {
69
- /* 紫色主题 */
70
- --fe-button-primary-color: #fff;
71
- --fe-button-primary-bg: #8b5cf6; /* violet-500 */
72
- --fe-button-primary-hover-bg: #7c3aed; /* violet-600 */
73
- --fe-button-primary-active-bg: #6d28d9; /* violet-700 */
74
- --fe-button-primary-shadow: 0 2px 0 rgba(109, 40, 217, 0.2);
75
-
76
- /* 默认按钮 */
77
- --fe-button-default-color: rgba(255, 255, 255, 0.85);
78
- --fe-button-default-bg: rgb(30 41 59); /* slate-800 */
79
- --fe-button-default-border-color: rgb(51 65 85); /* slate-700 */
80
- --fe-button-default-hover-bg: rgb(30 41 59);
81
- --fe-button-default-hover-color: #8b5cf6;
82
- --fe-button-default-hover-border-color: #8b5cf6;
83
- --fe-button-default-active-bg: rgb(30 41 59);
84
- --fe-button-default-active-color: #6d28d9;
85
- --fe-button-default-active-border-color: #6d28d9;
86
- --fe-button-default-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
87
-
88
- /* 其他状态 */
89
- --fe-button-text-hover-bg: rgba(255, 255, 255, 0.08);
90
- --fe-button-border-color-disabled: rgb(51 65 85);
91
- }
92
-
93
- /* Antd 图标相关变量 */
94
- --fe-color-icon: rgba(255, 255, 255, 0.45); /* 暗色主题下的图标颜色 */
95
- --fe-color-icon-hover: rgba(255, 255, 255, 0.85); /* 暗色主题下图标悬停颜色 */
96
- --fe-color-icon-active: var(--fe-color-primary); /* 使用主题紫色 */
97
- --fe-color-icon-disabled: rgba(255, 255, 255, 0.25); /* 暗色主题下禁用状态 */
98
-
99
- /* Antd Select 组件变量 */
100
- &.ant-select-css-var {
101
- --fe-select-internal_fixed_item_margin: 2px;
102
- --fe-select-z-index-popup: 1050;
103
- --fe-select-option-selected-color: rgba(255, 255, 255, 0.88);
104
- --fe-select-option-selected-font-weight: 600;
105
- --fe-select-option-selected-bg: var(--fe-color-primary-bg);
106
- --fe-select-option-active-bg: rgba(255, 255, 255, 0.08);
107
- --fe-select-option-padding: 5px 12px;
108
- --fe-select-option-font-size: 14px;
109
- --fe-select-option-line-height: 1.5714285714285714;
110
- --fe-select-option-height: 32px;
111
- --fe-select-selector-bg: var(--fe-color-bg-container);
112
- --fe-select-clear-bg: var(--fe-color-bg-container);
113
- --fe-select-single-item-height-lg: 40px;
114
- --fe-select-multiple-item-bg: rgba(255, 255, 255, 0.08);
115
- --fe-select-multiple-item-border-color: transparent;
116
- --fe-select-multiple-item-height: 24px;
117
- --fe-select-multiple-item-height-sm: 16px;
118
- --fe-select-multiple-item-height-lg: 32px;
119
- --fe-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);
120
- --fe-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);
121
- --fe-select-multiple-item-border-color-disabled: transparent;
122
- --fe-select-show-arrow-padding-inline-end: 18px;
123
- --fe-select-hover-border-color: var(--fe-color-primary);
124
- --fe-select-active-border-color: var(--fe-color-primary-active);
125
- --fe-select-active-outline-color: var(--fe-color-primary-bg);
126
- --fe-select-select-affix-padding: 4px;
127
- }
128
-
129
- /* Antd Tag 组件变量 */
130
- &.ant-tag-css-var {
131
- --fe-tag-default-bg: var(--fe-color-bg-container);
132
- --fe-tag-default-color: var(--fe-color-text);
133
- --fe-tag-default-border-color: var(--fe-color-border);
134
- --fe-tag-font-size: 12px;
135
- --fe-tag-line-height: 20px;
136
- --fe-tag-height: 22px;
137
- --fe-tag-padding-horizontal: 7px;
138
- --fe-tag-margin: 0 8px 0 0;
139
- --fe-tag-border-radius: 4px;
140
- }
141
20
 
142
- /* Antd Progress 组件变量 */
143
- &.ant-progress-css-var {
144
- --fe-progress-default-color: var(--fe-color-primary);
145
- --fe-progress-remaining-color: var(--fe-color-bg-elevated);
146
- --fe-progress-text-color: var(--fe-color-text);
147
- --fe-progress-line-font-size: 14px;
148
- --fe-progress-circle-font-size: 14px;
149
- --fe-progress-circle-text-color: var(--fe-color-text);
150
- --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
151
- --fe-progress-circle-stroke-width: 6px;
152
- --fe-progress-line-stroke-width: 8px;
21
+ /* 登录页特定样式 */
22
+ --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
23
+ --login-input-bg: var(--fe-color-bg-container);
24
+ --login-input-border: var(--fe-color-border);
25
+ --login-button-text: rgb(255 255 255);
26
+ --login-social-button-bg: var(--fe-color-bg-container);
27
+ --login-social-button-border: var(--fe-color-border);
153
28
  }
154
29
  }