best-unit 0.0.38 → 0.0.39
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.
- package/dist/best-unit.cjs +6 -6
- package/dist/best-unit.js +936 -845
- package/package.json +1 -1
- package/src/components/business/recharge-sdk/components/OfflineTransferForm.tsx +6 -3
- package/src/components/business/recharge-sdk/components/OnlineRechargeForm.tsx +6 -2
- package/src/components/business/recharge-sdk/components/Recharge.tsx +7 -8
- package/src/components/business/recharge-sdk/index.tsx +0 -5
- package/src/components/business/statistical-balance/index.tsx +113 -61
- package/src/components/common/HoverPopover.tsx +43 -8
- package/src/components/common/Upload.tsx +90 -37
- package/src/demo/App.tsx +182 -25
package/src/demo/App.tsx
CHANGED
|
@@ -4,53 +4,92 @@ import { BestUnit } from "../components/business/recharge-sdk";
|
|
|
4
4
|
import { initFundUnit } from "../main";
|
|
5
5
|
import StatisticalBalance from "../components/business/statistical-balance";
|
|
6
6
|
import { t } from "../local";
|
|
7
|
-
import { Locale } from "../types";
|
|
7
|
+
import { Locale, Theme } from "../types";
|
|
8
8
|
|
|
9
9
|
export default function DemoApp() {
|
|
10
10
|
const [currentLocale, setCurrentLocale] = useState<Locale>(Locale.ZH);
|
|
11
|
+
const [currentTheme, setCurrentTheme] = useState<Theme>(Theme.WHITE);
|
|
11
12
|
|
|
12
|
-
const initApp = (locale: Locale) => {
|
|
13
|
+
const initApp = ({ locale, theme }: { locale?: Locale; theme?: Theme }) => {
|
|
13
14
|
initFundUnit({
|
|
14
15
|
token:
|
|
15
16
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTM0MTM1MjksIm1lcmNoYW50X2lkIjoxMTI4LCJ0aW1lc3RhbXAiOjE3NTMxNTQzMjl9.UAvzq0P4HCnbJR1Ga3CgF6q3vk2RHiZRvnAFohBTHpw",
|
|
16
17
|
merchant_id: "1128",
|
|
17
18
|
biz_type: "ad",
|
|
18
19
|
locale: locale as Locale,
|
|
20
|
+
theme: theme ?? Theme.WHITE,
|
|
19
21
|
});
|
|
20
22
|
};
|
|
21
23
|
|
|
22
24
|
// 初始化应用
|
|
23
|
-
initApp(currentLocale);
|
|
25
|
+
initApp({ locale: currentLocale, theme: currentTheme });
|
|
24
26
|
|
|
25
27
|
const handleLocaleChange = (locale: Locale) => {
|
|
26
28
|
setCurrentLocale(locale);
|
|
27
29
|
// 重新初始化以更新语言设置
|
|
28
|
-
initApp(locale);
|
|
30
|
+
initApp({ locale, theme: currentTheme });
|
|
29
31
|
};
|
|
30
32
|
|
|
33
|
+
const handleThemeChange = (theme: Theme) => {
|
|
34
|
+
setCurrentTheme(theme);
|
|
35
|
+
initApp({ locale: currentLocale, theme });
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const isDark = currentTheme === Theme.DARK;
|
|
39
|
+
|
|
31
40
|
return (
|
|
32
|
-
<div
|
|
33
|
-
|
|
41
|
+
<div
|
|
42
|
+
style={{
|
|
43
|
+
background: isDark ? "#181A20" : "#fff",
|
|
44
|
+
minHeight: "100vh",
|
|
45
|
+
transition: "background 0.3s",
|
|
46
|
+
color: isDark ? "#F5F6FA" : "#111827",
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<h2
|
|
50
|
+
style={{
|
|
51
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
52
|
+
background: isDark ? "#23262F" : undefined,
|
|
53
|
+
padding: isDark ? 8 : undefined,
|
|
54
|
+
borderRadius: isDark ? 8 : undefined,
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
组件库可视化测试
|
|
58
|
+
</h2>
|
|
34
59
|
|
|
35
60
|
{/* 国际化切换区域 */}
|
|
36
61
|
<div
|
|
37
62
|
style={{
|
|
38
63
|
marginBottom: 20,
|
|
39
64
|
padding: 16,
|
|
40
|
-
border: "1px solid #e5e7eb",
|
|
65
|
+
border: isDark ? "1px solid #23262F" : "1px solid #e5e7eb",
|
|
41
66
|
borderRadius: 8,
|
|
42
|
-
backgroundColor: "#f9fafb",
|
|
67
|
+
backgroundColor: isDark ? "#23262F" : "#f9fafb",
|
|
43
68
|
}}
|
|
44
69
|
>
|
|
45
|
-
<h3
|
|
70
|
+
<h3
|
|
71
|
+
style={{
|
|
72
|
+
marginTop: 0,
|
|
73
|
+
marginBottom: 12,
|
|
74
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
75
|
+
}}
|
|
76
|
+
>
|
|
77
|
+
国际化测试：
|
|
78
|
+
</h3>
|
|
46
79
|
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
|
|
47
80
|
<span>当前语言：</span>
|
|
48
81
|
<button
|
|
49
82
|
onClick={() => handleLocaleChange("zh" as Locale)}
|
|
50
83
|
style={{
|
|
51
84
|
padding: "8px 16px",
|
|
52
|
-
backgroundColor:
|
|
53
|
-
|
|
85
|
+
backgroundColor:
|
|
86
|
+
currentLocale === "zh"
|
|
87
|
+
? "#155EEF"
|
|
88
|
+
: isDark
|
|
89
|
+
? "#23262F"
|
|
90
|
+
: "#fff",
|
|
91
|
+
color:
|
|
92
|
+
currentLocale === "zh" ? "#fff" : isDark ? "#F5F6FA" : "#333",
|
|
54
93
|
border: "1px solid #155EEF",
|
|
55
94
|
borderRadius: 6,
|
|
56
95
|
cursor: "pointer",
|
|
@@ -63,8 +102,14 @@ export default function DemoApp() {
|
|
|
63
102
|
onClick={() => handleLocaleChange("en" as Locale)}
|
|
64
103
|
style={{
|
|
65
104
|
padding: "8px 16px",
|
|
66
|
-
backgroundColor:
|
|
67
|
-
|
|
105
|
+
backgroundColor:
|
|
106
|
+
currentLocale === "en"
|
|
107
|
+
? "#155EEF"
|
|
108
|
+
: isDark
|
|
109
|
+
? "#23262F"
|
|
110
|
+
: "#fff",
|
|
111
|
+
color:
|
|
112
|
+
currentLocale === "en" ? "#fff" : isDark ? "#F5F6FA" : "#333",
|
|
68
113
|
border: "1px solid #155EEF",
|
|
69
114
|
borderRadius: 6,
|
|
70
115
|
cursor: "pointer",
|
|
@@ -73,7 +118,13 @@ export default function DemoApp() {
|
|
|
73
118
|
>
|
|
74
119
|
English
|
|
75
120
|
</button>
|
|
76
|
-
<span
|
|
121
|
+
<span
|
|
122
|
+
style={{
|
|
123
|
+
marginLeft: 12,
|
|
124
|
+
fontSize: 14,
|
|
125
|
+
color: isDark ? "#B5B8BE" : "#666",
|
|
126
|
+
}}
|
|
127
|
+
>
|
|
77
128
|
{currentLocale === "zh"
|
|
78
129
|
? "当前显示中文"
|
|
79
130
|
: "Currently showing English"}
|
|
@@ -82,18 +133,95 @@ export default function DemoApp() {
|
|
|
82
133
|
</div>
|
|
83
134
|
|
|
84
135
|
<div>
|
|
85
|
-
<h3
|
|
136
|
+
<h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>
|
|
137
|
+
BestUnit 主题切换：
|
|
138
|
+
</h3>
|
|
139
|
+
<button
|
|
140
|
+
onClick={() => handleThemeChange(Theme.WHITE)}
|
|
141
|
+
style={{
|
|
142
|
+
padding: "8px 16px",
|
|
143
|
+
backgroundColor:
|
|
144
|
+
currentTheme === Theme.WHITE
|
|
145
|
+
? "#155EEF"
|
|
146
|
+
: isDark
|
|
147
|
+
? "#23262F"
|
|
148
|
+
: "#fff",
|
|
149
|
+
color:
|
|
150
|
+
currentTheme === Theme.WHITE
|
|
151
|
+
? "#fff"
|
|
152
|
+
: isDark
|
|
153
|
+
? "#F5F6FA"
|
|
154
|
+
: "#333",
|
|
155
|
+
border: "1px solid #155EEF",
|
|
156
|
+
borderRadius: 6,
|
|
157
|
+
cursor: "pointer",
|
|
158
|
+
fontWeight: currentTheme === Theme.WHITE ? "bold" : "normal",
|
|
159
|
+
marginRight: 8,
|
|
160
|
+
}}
|
|
161
|
+
>
|
|
162
|
+
白色主题
|
|
163
|
+
</button>
|
|
164
|
+
<button
|
|
165
|
+
onClick={() => handleThemeChange(Theme.DARK)}
|
|
166
|
+
style={{
|
|
167
|
+
padding: "8px 16px",
|
|
168
|
+
backgroundColor:
|
|
169
|
+
currentTheme === Theme.DARK
|
|
170
|
+
? "#155EEF"
|
|
171
|
+
: isDark
|
|
172
|
+
? "#23262F"
|
|
173
|
+
: "#fff",
|
|
174
|
+
color:
|
|
175
|
+
currentTheme === Theme.DARK
|
|
176
|
+
? "#fff"
|
|
177
|
+
: isDark
|
|
178
|
+
? "#F5F6FA"
|
|
179
|
+
: "#333",
|
|
180
|
+
border: "1px solid #155EEF",
|
|
181
|
+
borderRadius: 6,
|
|
182
|
+
cursor: "pointer",
|
|
183
|
+
fontWeight: currentTheme === Theme.DARK ? "bold" : "normal",
|
|
184
|
+
}}
|
|
185
|
+
>
|
|
186
|
+
暗黑主题
|
|
187
|
+
</button>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<div>
|
|
191
|
+
<h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>
|
|
192
|
+
BestUnit 组件演示：
|
|
193
|
+
</h3>
|
|
86
194
|
<BestUnit />
|
|
87
195
|
</div>
|
|
196
|
+
|
|
88
197
|
<div>
|
|
89
|
-
<h3>方法演示：</h3>
|
|
90
|
-
<button
|
|
198
|
+
<h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>方法演示：</h3>
|
|
199
|
+
<button
|
|
200
|
+
onClick={npmTest}
|
|
201
|
+
style={{
|
|
202
|
+
marginRight: 10,
|
|
203
|
+
background: isDark ? "#23262F" : undefined,
|
|
204
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
205
|
+
border: isDark ? "1px solid #444C5C" : undefined,
|
|
206
|
+
}}
|
|
207
|
+
>
|
|
91
208
|
调用 npmTest()
|
|
92
209
|
</button>
|
|
93
|
-
<button
|
|
210
|
+
<button
|
|
211
|
+
onClick={printCurrentTime}
|
|
212
|
+
style={{
|
|
213
|
+
background: isDark ? "#23262F" : undefined,
|
|
214
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
215
|
+
border: isDark ? "1px solid #444C5C" : undefined,
|
|
216
|
+
}}
|
|
217
|
+
>
|
|
218
|
+
调用 printCurrentTime()
|
|
219
|
+
</button>
|
|
94
220
|
</div>
|
|
95
221
|
<div style={{ textAlign: "center" }}>
|
|
96
|
-
<h3
|
|
222
|
+
<h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>
|
|
223
|
+
余额卡片组件演示：
|
|
224
|
+
</h3>
|
|
97
225
|
<StatisticalBalance />
|
|
98
226
|
</div>
|
|
99
227
|
|
|
@@ -102,12 +230,20 @@ export default function DemoApp() {
|
|
|
102
230
|
style={{
|
|
103
231
|
marginTop: 20,
|
|
104
232
|
padding: 16,
|
|
105
|
-
border: "1px solid #e5e7eb",
|
|
233
|
+
border: isDark ? "1px solid #23262F" : "1px solid #e5e7eb",
|
|
106
234
|
borderRadius: 8,
|
|
107
|
-
backgroundColor: "#f9fafb",
|
|
235
|
+
backgroundColor: isDark ? "#23262F" : "#f9fafb",
|
|
108
236
|
}}
|
|
109
237
|
>
|
|
110
|
-
<h3
|
|
238
|
+
<h3
|
|
239
|
+
style={{
|
|
240
|
+
marginTop: 0,
|
|
241
|
+
marginBottom: 12,
|
|
242
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
243
|
+
}}
|
|
244
|
+
>
|
|
245
|
+
国际化文本测试：
|
|
246
|
+
</h3>
|
|
111
247
|
<div
|
|
112
248
|
style={{
|
|
113
249
|
display: "grid",
|
|
@@ -115,7 +251,14 @@ export default function DemoApp() {
|
|
|
115
251
|
gap: 12,
|
|
116
252
|
}}
|
|
117
253
|
>
|
|
118
|
-
<div
|
|
254
|
+
<div
|
|
255
|
+
style={{
|
|
256
|
+
padding: 8,
|
|
257
|
+
backgroundColor: isDark ? "#181A20" : "#fff",
|
|
258
|
+
borderRadius: 4,
|
|
259
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
260
|
+
}}
|
|
261
|
+
>
|
|
119
262
|
<strong>余额相关：</strong>
|
|
120
263
|
<br />
|
|
121
264
|
{t("余额详情")}
|
|
@@ -126,7 +269,14 @@ export default function DemoApp() {
|
|
|
126
269
|
<br />
|
|
127
270
|
{t("总可用")}
|
|
128
271
|
</div>
|
|
129
|
-
<div
|
|
272
|
+
<div
|
|
273
|
+
style={{
|
|
274
|
+
padding: 8,
|
|
275
|
+
backgroundColor: isDark ? "#181A20" : "#fff",
|
|
276
|
+
borderRadius: 4,
|
|
277
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
278
|
+
}}
|
|
279
|
+
>
|
|
130
280
|
<strong>充值相关：</strong>
|
|
131
281
|
<br />
|
|
132
282
|
{t("充值 / 转账")}
|
|
@@ -137,7 +287,14 @@ export default function DemoApp() {
|
|
|
137
287
|
<br />
|
|
138
288
|
{t("去支付")}
|
|
139
289
|
</div>
|
|
140
|
-
<div
|
|
290
|
+
<div
|
|
291
|
+
style={{
|
|
292
|
+
padding: 8,
|
|
293
|
+
backgroundColor: isDark ? "#181A20" : "#fff",
|
|
294
|
+
borderRadius: 4,
|
|
295
|
+
color: isDark ? "#F5F6FA" : undefined,
|
|
296
|
+
}}
|
|
297
|
+
>
|
|
141
298
|
<strong>按钮文本：</strong>
|
|
142
299
|
<br />
|
|
143
300
|
{t("充值/转账")}
|