@pnt-team/pnt-component-frontend 0.0.34

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 (78) hide show
  1. package/README.md +34 -0
  2. package/lib/cjs/api/index.d.ts +17 -0
  3. package/lib/cjs/api/index.js +45 -0
  4. package/lib/cjs/assets/css/tdesign-theme.css +584 -0
  5. package/lib/cjs/assets/images/uploadImg.png +0 -0
  6. package/lib/cjs/assets/svg/inputSearch.svg +4 -0
  7. package/lib/cjs/assets/svg/inputTip.svg +5 -0
  8. package/lib/cjs/assets/svg/inputWarnTip.svg +5 -0
  9. package/lib/cjs/components/PntCopyData/index.d.ts +91 -0
  10. package/lib/cjs/components/PntCopyData/index.js +81 -0
  11. package/lib/cjs/components/PntCopyData/index.scss +5 -0
  12. package/lib/cjs/components/PntImagePreview/index.d.ts +75 -0
  13. package/lib/cjs/components/PntImagePreview/index.js +91 -0
  14. package/lib/cjs/components/PntImagePreview/index.scss +54 -0
  15. package/lib/cjs/components/PntSecureBox/index.d.ts +69 -0
  16. package/lib/cjs/components/PntSecureBox/index.js +65 -0
  17. package/lib/cjs/components/PntSecureBox/index.scss +19 -0
  18. package/lib/cjs/configs/host.d.ts +12 -0
  19. package/lib/cjs/configs/host.js +39 -0
  20. package/lib/cjs/configs/token.d.ts +2 -0
  21. package/lib/cjs/configs/token.js +25 -0
  22. package/lib/cjs/global.d.ts +30 -0
  23. package/lib/cjs/hooks/useBtnPermission.d.ts +67 -0
  24. package/lib/cjs/hooks/useBtnPermission.js +57 -0
  25. package/lib/cjs/hooks/useHighSecurity.d.ts +6 -0
  26. package/lib/cjs/hooks/useHighSecurity.js +51 -0
  27. package/lib/cjs/hooks/useOsPlatformList.d.ts +68 -0
  28. package/lib/cjs/hooks/useOsPlatformList.js +104 -0
  29. package/lib/cjs/hooks/usePagination.d.ts +72 -0
  30. package/lib/cjs/hooks/usePagination.js +71 -0
  31. package/lib/cjs/index.d.ts +10 -0
  32. package/lib/cjs/index.js +57 -0
  33. package/lib/cjs/utils/const.d.ts +13 -0
  34. package/lib/cjs/utils/const.js +51 -0
  35. package/lib/cjs/utils/index.d.ts +6 -0
  36. package/lib/cjs/utils/index.js +43 -0
  37. package/lib/cjs/utils/request.d.ts +8 -0
  38. package/lib/cjs/utils/request.js +82 -0
  39. package/lib/esm/api/index.d.ts +17 -0
  40. package/lib/esm/api/index.js +11 -0
  41. package/lib/esm/assets/css/tdesign-theme.css +584 -0
  42. package/lib/esm/assets/images/uploadImg.png +0 -0
  43. package/lib/esm/assets/svg/inputSearch.svg +4 -0
  44. package/lib/esm/assets/svg/inputTip.svg +5 -0
  45. package/lib/esm/assets/svg/inputWarnTip.svg +5 -0
  46. package/lib/esm/components/PntCopyData/index.d.ts +91 -0
  47. package/lib/esm/components/PntCopyData/index.js +51 -0
  48. package/lib/esm/components/PntCopyData/index.scss +5 -0
  49. package/lib/esm/components/PntImagePreview/index.d.ts +75 -0
  50. package/lib/esm/components/PntImagePreview/index.js +61 -0
  51. package/lib/esm/components/PntImagePreview/index.scss +54 -0
  52. package/lib/esm/components/PntSecureBox/index.d.ts +69 -0
  53. package/lib/esm/components/PntSecureBox/index.js +35 -0
  54. package/lib/esm/components/PntSecureBox/index.scss +19 -0
  55. package/lib/esm/configs/host.d.ts +12 -0
  56. package/lib/esm/configs/host.js +19 -0
  57. package/lib/esm/configs/token.d.ts +2 -0
  58. package/lib/esm/configs/token.js +5 -0
  59. package/lib/esm/global.d.ts +30 -0
  60. package/lib/esm/hooks/useBtnPermission.d.ts +67 -0
  61. package/lib/esm/hooks/useBtnPermission.js +31 -0
  62. package/lib/esm/hooks/useHighSecurity.d.ts +6 -0
  63. package/lib/esm/hooks/useHighSecurity.js +27 -0
  64. package/lib/esm/hooks/useOsPlatformList.d.ts +68 -0
  65. package/lib/esm/hooks/useOsPlatformList.js +68 -0
  66. package/lib/esm/hooks/usePagination.d.ts +72 -0
  67. package/lib/esm/hooks/usePagination.js +47 -0
  68. package/lib/esm/index.d.ts +10 -0
  69. package/lib/esm/index.js +17 -0
  70. package/lib/esm/utils/const.d.ts +13 -0
  71. package/lib/esm/utils/const.js +26 -0
  72. package/lib/esm/utils/index.d.ts +6 -0
  73. package/lib/esm/utils/index.js +19 -0
  74. package/lib/esm/utils/request.d.ts +8 -0
  75. package/lib/esm/utils/request.js +52 -0
  76. package/lib/umd/pnt-component-frontend.min.css +1 -0
  77. package/lib/umd/pnt-component-frontend.min.js +1 -0
  78. package/package.json +94 -0
@@ -0,0 +1,584 @@
1
+ /*
2
+ * tdesign theme style
3
+ * 注意: 请按照以下风格规范,调整对应组件样式
4
+ */
5
+ :root,
6
+ :root[theme-mode='light'] {
7
+ --td-brand-color-1: #f2f9ff;
8
+ --td-brand-color-2: #d9edff;
9
+ --td-brand-color-3: #b2d9ff;
10
+ --td-brand-color-4: #66a8ff;
11
+ --td-brand-color-5: #3f8cff;
12
+ --td-brand-color-6: #2164d9;
13
+ --td-brand-color-7: #005bbf;
14
+ --td-brand-color-8: #004492;
15
+ --td-brand-color-9: #002f6a;
16
+ --td-brand-color-10: #001e49;
17
+ --td-warning-color-1: #fff7e8;
18
+ --td-warning-color-2: #ffedcd;
19
+ --td-warning-color-3: #ffe1ab;
20
+ --td-warning-color-4: #ffd589;
21
+ --td-warning-color-5: #ffc866;
22
+ --td-warning-color-6: #ff9d29;
23
+ --td-warning-color-7: #ba431b;
24
+ --td-warning-color-8: #9e3610;
25
+ --td-warning-color-9: #842b0b;
26
+ --td-warning-color-10: #5a1907;
27
+ --td-error-color-1: #faeae8;
28
+ --td-error-color-2: #fecebf;
29
+ --td-error-color-3: #feae96;
30
+ --td-error-color-4: #f78d94;
31
+ --td-error-color-5: #ff8e6c;
32
+ --td-error-color-6: #ff754c;
33
+ --td-error-color-7: #e65225;
34
+ --td-error-color-8: #b11f26;
35
+ --td-error-color-9: #951114;
36
+ --td-error-color-10: #680506;
37
+ --td-success-color-1: #e5f6ea;
38
+ --td-success-color-2: #bbecce;
39
+ --td-success-color-3: #91e1b2;
40
+ --td-success-color-4: #67d795;
41
+ --td-success-color-5: #3dcc79;
42
+ --td-success-color-6: #18aa57;
43
+ --td-success-color-7: #067945;
44
+ --td-success-color-8: #056334;
45
+ --td-success-color-9: #044f2a;
46
+ --td-success-color-10: #033017;
47
+ --td-gray-color-1: #f3f3f4;
48
+ --td-gray-color-2: #f3f3f4;
49
+ --td-gray-color-3: #e8e8ea;
50
+ --td-gray-color-4: #f0f3f6;
51
+ --td-gray-color-5: #c5c5c5;
52
+ --td-gray-color-6: #bbbbbf;
53
+ --td-gray-color-7: #8b8b8b;
54
+ --td-gray-color-8: #777;
55
+ --td-gray-color-9: #5e5e5e;
56
+ --td-gray-color-10: #4b4b4b;
57
+ --td-gray-color-11: #383838;
58
+ --td-gray-color-12: #2c2c2c;
59
+ --td-gray-color-13: #242424;
60
+ --td-gray-color-14: #181818;
61
+ --td-font-white-1: #fff;
62
+ --td-font-white-2: rgba(255, 255, 255, 55%);
63
+ --td-font-white-3: rgba(255, 255, 255, 35%);
64
+ --td-font-white-4: rgba(255, 255, 255, 22%);
65
+ --td-font-gray-1: #333;
66
+ --td-font-gray-2: rgba(0, 0, 0, 60%);
67
+ --td-font-gray-3: #808191;
68
+ --td-font-gray-4: rgba(0, 0, 0, 26%);
69
+ --td-brand-color: var(--td-brand-color-5);
70
+ --td-warning-color: var(--td-warning-color-5);
71
+ --td-error-color: var(--td-error-color-6);
72
+ --td-success-color: var(--td-success-color-5);
73
+ --td-brand-color-light: var(--td-brand-color-1);
74
+ --td-brand-color-focus: var(--td-brand-color-2);
75
+ --td-brand-color-disabled: var(--td-brand-color-3);
76
+ --td-brand-color-hover: var(--td-brand-color-4);
77
+ --td-brand-color-active: var(--td-brand-color-6);
78
+ --td-warning-color-hover: var(--td-warning-color-4);
79
+ --td-warning-color-focus: var(--td-warning-color-2);
80
+ --td-warning-color-active: var(--td-warning-color-6);
81
+ --td-warning-color-disabled: var(--td-warning-color-3);
82
+ --td-warning-color-light: var(--td-warning-color-1);
83
+ --td-error-color-hover: var(--td-error-color-5);
84
+ --td-error-color-focus: var(--td-error-color-2);
85
+ --td-error-color-active: var(--td-error-color-7);
86
+ --td-error-color-disabled: var(--td-error-color-3);
87
+ --td-error-color-light: var(--td-error-color-1);
88
+ --td-success-color-hover: var(--td-success-color-4);
89
+ --td-success-color-focus: var(--td-success-color-2);
90
+ --td-success-color-active: var(--td-success-color-6);
91
+ --td-success-color-disabled: var(--td-success-color-3);
92
+ --td-success-color-light: var(--td-success-color-1);
93
+ --td-mask-active: rgba(0, 0, 0, 80%);
94
+ --td-mask-disabled: rgba(255, 255, 255, 60%);
95
+ --td-bg-color-page: #ebeef2;
96
+ --td-bg-color-container: #fff;
97
+ --td-bg-color-container-hover: var(--td-gray-color-2);
98
+ --td-bg-color-container-active: var(--td-gray-color-3);
99
+ --td-bg-color-container-select: #fff;
100
+ --td-bg-color-secondarycontainer: var(--td-gray-color-1);
101
+ --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
102
+ --td-bg-color-secondarycontainer-active: var(--td-gray-color-3);
103
+ --td-bg-color-component: var(--td-gray-color-2);
104
+ --td-bg-color-component-hover: var(--td-gray-color-3);
105
+ --td-bg-color-component-active: var(--td-gray-color-4);
106
+ --td-bg-color-component-disabled: var(--td-gray-color-2);
107
+ --td-bg-color-secondarycomponent: var(--td-gray-color-3);
108
+ --td-bg-color-secondarycomponent-hover: var(--td-gray-color-4);
109
+ --td-bg-color-secondarycomponent-active: var(--td-gray-color-5);
110
+ --td-bg-color-specialcomponent: #fff;
111
+ --td-text-color-primary: var(--td-font-gray-1);
112
+ --td-text-color-secondary: var(--td-font-gray-2);
113
+ --td-text-color-placeholder: var(--td-font-gray-3);
114
+ --td-text-color-disabled: var(--td-font-gray-4);
115
+ --td-text-color-anti: #fff;
116
+ --td-text-color-brand: var(--td-brand-color-6);
117
+ --td-text-color-link: var(--td-brand-color-6);
118
+ --td-border-level-1-color: var(--td-gray-color-2);
119
+ --td-component-stroke: var(--td-gray-color-2);
120
+ --td-border-level-2-color: #f8f8f8;
121
+ --td-component-border: var(--td-gray-color-3);
122
+ --td-shadow-1: 0 2px 3px rgba(0, 0, 0, 20%);
123
+ --td-shadow-2: 0 2px 4px 0 rgba(54, 58, 80, 32%);
124
+ --td-shadow-3: 0 0 20px 0 rgba(19, 41, 75, 20%);
125
+ --td-shadow-inset-top: inset 0 0.5px 0 #e7eaef;
126
+ --td-shadow-inset-right: inset 0.5px 0 0 #e7eaef;
127
+ --td-shadow-inset-bottom: inset 0 -0.5px 0 #e7eaef;
128
+ --td-shadow-inset-left: inset -0.5px 0 0 #e7eaef;
129
+ --td-table-shadow-color: rgba(0, 0, 0, 8%);
130
+ --td-scrollbar-color: rgba(0, 0, 0, 10%);
131
+ --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
132
+ --td-scroll-track-color: #fff;
133
+ --td-radius-small: 0;
134
+ --td-radius-default: 4px;
135
+ --td-radius-medium: 6px;
136
+ --td-radius-large: 8px;
137
+ --td-radius-extraLarge: 12px;
138
+ --td-radius-round: 999px;
139
+ --td-radius-circle: 50%;
140
+ --td-font-family: pingfang sc, microsoft yahei, arial regular;
141
+ --td-font-family-medium: pingfang sc, microsoft yahei, arial medium;
142
+ --td-font-size-link-small: 12px;
143
+ --td-font-size-link-medium: 12px;
144
+ --td-font-size-link-large: 14px;
145
+ --td-font-size-mark-small: 12px;
146
+ --td-font-size-mark-medium: 12px;
147
+ --td-font-size-body-small: 12px;
148
+ --td-font-size-body-medium: 14px;
149
+ --td-font-size-body-large: 16px;
150
+ --td-font-size-title-small: 12px;
151
+ --td-font-size-title-medium: 14px;
152
+ --td-font-size-title-large: 16px;
153
+ --td-font-size-headline-small: 24px;
154
+ --td-font-size-headline-medium: 28px;
155
+ --td-font-size-headline-large: 36px;
156
+ --td-font-size-display-medium: 48px;
157
+ --td-font-size-display-large: 64px;
158
+ --td-line-height-link-small: 20px;
159
+ --td-line-height-link-medium: 20px;
160
+ --td-line-height-link-large: 22px;
161
+ --td-line-height-mark-small: 20px;
162
+ --td-line-height-mark-medium: 22px;
163
+ --td-line-height-body-small: 20px;
164
+ --td-line-height-body-medium: 20px;
165
+ --td-line-height-body-large: 22px;
166
+ --td-line-height-title-small: 20px;
167
+ --td-line-height-title-medium: 22px;
168
+ --td-line-height-title-large: 24px;
169
+ --td-line-height-headline-small: 32px;
170
+ --td-line-height-headline-medium: 36px;
171
+ --td-line-height-headline-large: 44px;
172
+ --td-line-height-display-medium: 56px;
173
+ --td-line-height-display-large: 72px;
174
+ --td-font-link-small: 400 var(--td-font-size-link-small) /
175
+ var(--td-line-height-link-small) var(--td-font-family);
176
+ --td-font-link-medium: 400 var(--td-font-size-link-medium) /
177
+ var(--td-line-height-link-medium) var(--td-font-family);
178
+ --td-font-link-large: 400 var(--td-font-size-link-large) /
179
+ var(--td-line-height-link-large) var(--td-font-family);
180
+ --td-font-mark-small: 600 var(--td-font-size-mark-small) /
181
+ var(--td-line-height-mark-small) var(--td-font-family);
182
+ --td-font-mark-medium: 600 var(--td-font-size-mark-medium) /
183
+ var(--td-line-height-mark-medium) var(--td-font-family);
184
+ --td-font-body-small: 400 var(--td-font-size-body-small) /
185
+ var(--td-line-height-body-small) var(--td-font-family);
186
+ --td-font-body-medium: 400 var(--td-font-size-body-medium) /
187
+ var(--td-line-height-body-medium) var(--td-font-family);
188
+ --td-font-body-large: 400 var(--td-font-size-body-large) /
189
+ var(--td-line-height-body-large) var(--td-font-family);
190
+ --td-font-title-small: 600 var(--td-font-size-title-small) /
191
+ var(--td-line-height-title-small) var(--td-font-family);
192
+ --td-font-title-medium: 600 var(--td-font-size-title-medium) /
193
+ var(--td-line-height-title-medium) var(--td-font-family);
194
+ --td-font-title-large: 600 var(--td-font-size-title-large) /
195
+ var(--td-line-height-title-large) var(--td-font-family);
196
+ --td-font-headline-small: 600 var(--td-font-size-headline-small) /
197
+ var(--td-line-height-headline-small) var(--td-font-family);
198
+ --td-font-headline-medium: 600 var(--td-font-size-headline-medium) /
199
+ var(--td-line-height-headline-medium) var(--td-font-family);
200
+ --td-font-headline-large: 600 var(--td-font-size-headline-large) /
201
+ var(--td-line-height-headline-large) var(--td-font-family);
202
+ --td-font-display-medium: 600 var(--td-font-size-display-medium) /
203
+ var(--td-line-height-display-medium) var(--td-font-family);
204
+ --td-font-display-large: 600 var(--td-font-size-display-large) /
205
+ var(--td-line-height-display-large) var(--td-font-family);
206
+ --td-size-1: 2px;
207
+ --td-size-2: 3px;
208
+ --td-size-3: 5px;
209
+ --td-size-4: 10px;
210
+ --td-size-5: 12px;
211
+ --td-size-6: 16px;
212
+ --td-size-7: 20px;
213
+ --td-size-8: 25px;
214
+ --td-size-9: 28px;
215
+ --td-size-10: 36px;
216
+ --td-size-11: 35px;
217
+ --td-size-12: 40px;
218
+ --td-size-13: 48px;
219
+ --td-size-14: 56px;
220
+ --td-size-15: 64px;
221
+ --td-size-16: 72px;
222
+ --td-comp-size-xxxs: var(--td-size-6);
223
+ --td-comp-size-xxs: var(--td-size-7);
224
+ --td-comp-size-xs: var(--td-size-8);
225
+ --td-comp-size-s: var(--td-size-9);
226
+ --td-comp-size-m: var(--td-size-10);
227
+ --td-comp-size-l: var(--td-size-11);
228
+ --td-comp-size-xl: var(--td-size-12);
229
+ --td-comp-size-xxl: var(--td-size-13);
230
+ --td-comp-size-xxxl: var(--td-size-14);
231
+ --td-comp-size-xxxxl: var(--td-size-15);
232
+ --td-comp-size-xxxxxl: var(--td-size-16);
233
+ --td-pop-padding-s: 0;
234
+ --td-pop-padding-m: 4px;
235
+ --td-pop-padding-l: 0;
236
+ --td-pop-padding-xl: var(--td-size-5);
237
+ --td-pop-padding-xxl: var(--td-size-6);
238
+ --td-comp-paddingLR-xxs: var(--td-size-1);
239
+ --td-comp-paddingLR-xs: var(--td-size-3);
240
+ --td-comp-paddingLR-s: var(--td-size-4);
241
+ --td-comp-paddingLR-m: var(--td-size-5);
242
+ --td-comp-paddingLR-l: var(--td-size-7);
243
+ --td-comp-paddingLR-xl: var(--td-size-8);
244
+ --td-comp-paddingLR-xxl: var(--td-size-8);
245
+ --td-comp-paddingTB-xxs: var(--td-size-1);
246
+ --td-comp-paddingTB-xs: var(--td-size-3);
247
+ --td-comp-paddingTB-s: var(--td-size-4);
248
+ --td-comp-paddingTB-m: var(--td-size-5);
249
+ --td-comp-paddingTB-l: var(--td-size-7);
250
+ --td-comp-paddingTB-xl: var(--td-size-8);
251
+ --td-comp-paddingTB-xxl: var(--td-size-8);
252
+ --td-comp-margin-xxs: var(--td-size-1);
253
+ --td-comp-margin-xs: var(--td-size-2);
254
+ --td-comp-margin-s: var(--td-size-4);
255
+ --td-comp-margin-m: var(--td-size-5);
256
+ --td-comp-margin-l: var(--td-size-6);
257
+ --td-comp-margin-xl: var(--td-size-7);
258
+ --td-comp-margin-xxl: var(--td-size-8);
259
+ --td-comp-margin-xxxl: var(--td-size-10);
260
+ --td-comp-margin-xxxxl: var(--td-size-12);
261
+ }
262
+
263
+ /* form style start */
264
+ .t-form.t-form-inline {
265
+ row-gap: 24px;
266
+ }
267
+
268
+ .t-form.t-form-inline .t-form__item {
269
+ width: 360px;
270
+ margin-right: 40px;
271
+ }
272
+
273
+ .t-form .t-form__item {
274
+ font-size: 14px;
275
+ }
276
+
277
+ .t-form .t-form__item .t-form__label {
278
+ color: #808191;
279
+ font-style: normal;
280
+ font-weight: 400;
281
+ min-height: 20px;
282
+ }
283
+
284
+ .t-form .t-form__item .t-form__label label {
285
+ position: relative;
286
+ }
287
+
288
+ .t-form .t-form__item .t-form__label label::before {
289
+ position: absolute;
290
+ right: -14px;
291
+ }
292
+
293
+ .t-form .t-form__item .t-form__label--top {
294
+ margin-bottom: 8px;
295
+ line-height: 20px;
296
+ }
297
+
298
+ .t-form .t-form__item .t-form__controls .t-input__inner {
299
+ color: #333;
300
+ font-size: 14px;
301
+ font-weight: 400;
302
+ }
303
+
304
+ .t-form .t-form__item .t-form__controls .t-select {
305
+ margin: 0 2px;
306
+ width: calc(100% - 4px);
307
+ }
308
+
309
+ .t-form .t-form__item .t-form__controls .t-textarea {
310
+ width: 100%;
311
+ }
312
+
313
+ .t-form .t-form__item .t-form__controls .t-textarea .t-textarea__inner {
314
+ margin-left: 2px;
315
+ margin-bottom: 2px;
316
+ width: calc(100% - 4px);
317
+ height: 36px;
318
+ padding: 5px 16px;
319
+ border-radius: 4px;
320
+ color: #333;
321
+ font-size: 14px;
322
+ }
323
+
324
+ .t-form .t-form__item .t-form__controls .t-radio-group .t-radio {
325
+ margin-right: 16px;
326
+ }
327
+
328
+ .t-form
329
+ .t-form__item
330
+ .t-form__controls
331
+ .t-radio-group
332
+ .t-radio
333
+ .t-radio__label {
334
+ margin-left: 8px;
335
+ color: #333;
336
+ font-size: 14px;
337
+ font-weight: 400;
338
+ }
339
+
340
+ /* form style end */
341
+
342
+ /* portal dialog style start */
343
+ .t-portal-wrapper .t-select__dropdown .t-select__dropdown-inner {
344
+ border-radius: 4px;
345
+ }
346
+
347
+ .t-portal-wrapper
348
+ .t-select__dropdown
349
+ .t-select__dropdown-inner
350
+ .t-select-option {
351
+ height: 36px;
352
+ color: #333;
353
+ font-size: 14px;
354
+ font-style: normal;
355
+ font-weight: 400;
356
+ line-height: 20px;
357
+ }
358
+
359
+ .t-portal-wrapper .t-dialog {
360
+ padding: 32px 24px;
361
+ border-radius: 8px;
362
+ }
363
+
364
+ .t-portal-wrapper .t-dialog .t-dialog__header {
365
+ color: #333;
366
+ font-size: 20px;
367
+ font-weight: 600;
368
+ line-height: 24px;
369
+ }
370
+
371
+ .t-portal-wrapper .t-dialog .t-dialog__header .t-dialog__close {
372
+ width: 32px;
373
+ height: 32px;
374
+ border-radius: 4px;
375
+ border: 1px solid #eee;
376
+ justify-content: center;
377
+ align-items: center;
378
+ }
379
+
380
+ .t-portal-wrapper .t-dialog .t-dialog__header .t-dialog__close .t-icon {
381
+ color: #333;
382
+ }
383
+
384
+ .t-portal-wrapper .t-dialog .t-dialog__body {
385
+ padding-top: 24px;
386
+ padding-bottom: 0;
387
+ }
388
+
389
+ .t-portal-wrapper .t-dialog .t-dialog__footer {
390
+ padding-top: 24px;
391
+ }
392
+
393
+ .t-portal-wrapper .t-dialog .t-dialog__footer .t-button + .t-button {
394
+ margin-left: 16px;
395
+ }
396
+
397
+ .t-portal-wrapper .dialog-confirm {
398
+ padding-top: 40px;
399
+ border-radius: 4px;
400
+ width: 520px;
401
+ }
402
+
403
+ .t-portal-wrapper .dialog-confirm .t-dialog__body {
404
+ padding-top: 16px;
405
+ padding-bottom: 0;
406
+ }
407
+
408
+ /* portal dialog style end */
409
+
410
+ /* input style start */
411
+ .t-input__wrap .t-input {
412
+ background-color: #f8f8f8;
413
+ }
414
+
415
+ .t-input__wrap .t-input:hover {
416
+ background-color: #f1f1f1;
417
+ border-color: #f1f1f1;
418
+ }
419
+
420
+ .t-input__wrap .t-input.t-input--focused {
421
+ box-shadow: 0 0 0 2px rgba(63, 140, 255, 20%);
422
+ }
423
+
424
+ .t-input__wrap .t-input.t-is-success:hover {
425
+ border-color: var(--td-success-color);
426
+ }
427
+
428
+ .t-input__wrap .t-input.t-is-success.t-input--focused {
429
+ border-color: var(--td-success-color);
430
+ }
431
+
432
+ .t-input__wrap .t-input.t-is-error:hover {
433
+ border-color: var(--td-error-color);
434
+ }
435
+
436
+ .t-input__wrap .t-input.t-is-error.t-input--focused {
437
+ border-color: var(--td-error-color);
438
+ }
439
+
440
+ .t-input__wrap .t-input.t-is-warning:hover {
441
+ border-color: var(--td-warning-color);
442
+ }
443
+
444
+ .t-input__wrap .t-input.t-is-warning.t-input--focused {
445
+ border-color: var(--td-warning-color);
446
+ }
447
+
448
+ .t-input__wrap .t-input.t-input--focused {
449
+ border-color: var(--td-brand-color);
450
+ background-color: #fff;
451
+ }
452
+
453
+ .t-input__wrap .t-input--focused {
454
+ box-shadow: unset;
455
+ }
456
+
457
+ .t-input__wrap input:-webkit-autofill {
458
+ transition: background-color 5000s ease-in-out 0s;
459
+ }
460
+
461
+ .t-is-error .t-form__controls-content .t-input--focused {
462
+ border-color: var(--td-error-color);
463
+ }
464
+
465
+ .t-input .t-input__limit-number {
466
+ background: transparent;
467
+ }
468
+
469
+ .t-input.t-is-disabled,
470
+ .t-input-number.t-is-disabled .t-input:hover,
471
+ .t-input.t-is-disabled:hover {
472
+ border: 1px solid #80819180;
473
+ }
474
+
475
+ /* input style end */
476
+
477
+ /* tag style start */
478
+ .t-select .t-tag--default {
479
+ background: rgba(63, 140, 255, 10.2%);
480
+ padding: 2px 2px 2px 6px;
481
+ border-radius: 2px;
482
+ height: auto;
483
+ }
484
+
485
+ /* tag style end */
486
+
487
+ /* textarea style start */
488
+ .t-textarea .t-textarea__inner {
489
+ background-color: #f8f8f8;
490
+ }
491
+
492
+ .t-textarea .t-textarea__inner:hover {
493
+ background-color: #f1f1f1;
494
+ border-color: #f1f1f1;
495
+ }
496
+
497
+ .t-textarea .t-textarea__inner:focus {
498
+ border-color: var(--td-brand-color);
499
+ background-color: #fff;
500
+ }
501
+
502
+ /* textarea style end */
503
+
504
+ /* checkbox style start */
505
+ .t-checkbox .t-checkbox__input {
506
+ border-color: #dcdce6;
507
+ background-color: #dcdce6;
508
+ }
509
+
510
+ .t-checkbox.t-is-disabled .t-checkbox__input {
511
+ border-color: var(--td-bg-color-component-disabled);
512
+ }
513
+
514
+ /* checkbox style end */
515
+
516
+ /* radio style start */
517
+ .t-radio {
518
+ display: flex;
519
+ align-items: center;
520
+ }
521
+
522
+ .t-radio .t-radio__input {
523
+ border-color: #dcdce6;
524
+ background-color: #dcdce6;
525
+ }
526
+
527
+ .t-radio.t-is-disabled .t-radio__input {
528
+ border-color: var(--td-bg-color-component-disabled);
529
+ }
530
+
531
+ .t-radio.t-is-disabled:hover .t-radio__input {
532
+ border-color: var(--td-bg-color-component-disabled);
533
+ }
534
+
535
+ .t-radio.t-is-checked .t-radio__input {
536
+ background: var(--td-brand-color);
537
+ }
538
+
539
+ .t-radio.t-is-checked .t-radio__input::after {
540
+ background-color: white;
541
+ }
542
+
543
+ .t-radio.t-is-disabled.t-is-checked .t-radio__input {
544
+ background: var(--td-bg-color-component-disabled);
545
+ }
546
+
547
+ .t-radio.t-is-disabled.t-is-checked .t-radio__input::after {
548
+ background-color: #ccc;
549
+ }
550
+
551
+ /* radio style end */
552
+
553
+ /* badge style start */
554
+ .t-badge .t-badge--circle {
555
+ font-size: 10px;
556
+ font-weight: 700;
557
+ padding: 0;
558
+ background: linear-gradient(0deg, #ff544d 0%, #ff754c 100%);
559
+ }
560
+
561
+ /* badge style end */
562
+
563
+ /* message tip style start */
564
+ .t-message__list .t-message {
565
+ word-break: normal;
566
+ }
567
+
568
+ /* message tip style end */
569
+
570
+ /* message tip style start */
571
+ .t-popup__content {
572
+ font-size: 12px;
573
+ }
574
+
575
+ .t-popup__content .t-popup__arrow::before {
576
+ top: -1px;
577
+ }
578
+
579
+ /* message tip style end */
580
+
581
+ .t-table .t-table__ellipsis {
582
+ max-width: 100%;
583
+ width: auto;
584
+ }
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11.5 17C14.5376 17 17 14.5376 17 11.5C17 8.46243 14.5376 6 11.5 6C8.46243 6 6 8.46243 6 11.5C6 14.5376 8.46243 17 11.5 17Z" stroke="#808191" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"/>
3
+ <path d="M17 18L15 16" stroke="#808191" stroke-width="2" stroke-miterlimit="16" stroke-linecap="round" stroke-linejoin="bevel"/>
4
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" fill="#808191" fill-opacity="0.5"/>
3
+ <path d="M11 14.5V11.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M11 8.33203H11.0071" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" fill="#ff9d29" fill-opacity="0.5"/>
3
+ <path d="M11 14.5V11.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M11 8.33203H11.0071" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>
@@ -0,0 +1,91 @@
1
+ import { FunctionComponent, ReactNode } from 'react';
2
+ import { PopupPlacement } from 'tdesign-react';
3
+ import './index.scss';
4
+ /**
5
+ * 复制触发元素的渲染属性
6
+ * @description 由组件内部构造,需绑定到触发元素上
7
+ */
8
+ interface CopyTriggerProps {
9
+ /**
10
+ * 触发复制
11
+ * @description 绑定到触发元素的点击事件,点击后执行复制逻辑
12
+ */
13
+ onClick: () => void;
14
+ /**
15
+ * 鼠标移出回调
16
+ * @description 绑定到触发元素的 mouseleave 事件,用于延迟关闭提示气泡
17
+ */
18
+ onMouseLeave: () => void;
19
+ }
20
+ interface PntCopyDataProps {
21
+ /**
22
+ * 自定义类名
23
+ * @description 用于添加额外的样式类名到 Popup 弹层根元素
24
+ */
25
+ className?: string;
26
+ /**
27
+ * 需要复制的数据
28
+ * @description 支持直接传入字符串,或传入异步函数返回字符串(如需请求接口获取)
29
+ */
30
+ data: string | (() => Promise<string>);
31
+ /**
32
+ * Popup 弹出位置
33
+ * @description 提示气泡弹出的方位,如 top / bottom / left / right 等,默认值由 tdesign Popup 决定
34
+ */
35
+ placement?: PopupPlacement;
36
+ /**
37
+ * 提示内容渲染函数
38
+ * @description 根据复制状态渲染气泡提示内容
39
+ * @param isCopy - 是否复制成功
40
+ * @param isFail - 是否复制失败
41
+ */
42
+ tips: (isCopy: boolean, isFail: boolean) => ReactNode;
43
+ /**
44
+ * 触发元素渲染函数
45
+ * @description 渲染点击触发复制的元素,入参为需要绑定到触发元素的事件回调
46
+ */
47
+ contentFn: (props: CopyTriggerProps) => ReactNode;
48
+ }
49
+ /**
50
+ * 数据复制组件
51
+ * @description 点击触发元素后将数据复制到剪贴板,并通过 Popup 气泡提示复制结果。
52
+ * 优先使用 navigator.clipboard 写入剪贴板,非安全上下文自动降级为
53
+ * document.execCommand('copy') 兜底,无额外第三方依赖。
54
+ * 注意:本组件为受控可见的 Popup,触发元素的鼠标移出后约 200ms 自动关闭提示
55
+ * @param {PntCopyDataProps} props - 组件属性
56
+ * @param {string} [props.className] - 自定义类名
57
+ * @param {string | (() => Promise<string>)} props.data - 需要复制的数据,支持字符串或异步函数
58
+ * @param {PopupPlacement} [props.placement] - Popup 弹出位置
59
+ * @param {function} props.tips - 提示内容渲染函数 (isCopy, isFail) => ReactNode
60
+ * @param {function} props.contentFn - 触发元素渲染函数,入参为 { onClick, onMouseLeave }
61
+ *
62
+ * @example
63
+ * ```tsx
64
+ * // 基础用法
65
+ * <PntCopyData
66
+ * data="这是一段需要复制的文本"
67
+ * tips={(isCopy, isFail) => (isFail ? '复制失败' : '复制成功')}
68
+ * contentFn={({ onClick, onMouseLeave }) => (
69
+ * <Button onClick={onClick} onMouseLeave={onMouseLeave}>
70
+ * 复制
71
+ * </Button>
72
+ * )}
73
+ * />
74
+ *
75
+ * // 异步获取数据(如从接口获取密码)
76
+ * <PntCopyData
77
+ * data={async () => await fetchSecret()}
78
+ * placement="top"
79
+ * tips={(isCopy, isFail) => (isFail ? '获取失败' : '已复制到剪贴板')}
80
+ * contentFn={({ onClick, onMouseLeave }) => (
81
+ * <Link onClick={onClick} onMouseLeave={onMouseLeave}>
82
+ * 查看密码
83
+ * </Link>
84
+ * )}
85
+ * />
86
+ * ```
87
+ *
88
+ * @returns {ReactElement} 数据复制组件
89
+ */
90
+ declare const PntCopyData: FunctionComponent<PntCopyDataProps>;
91
+ export default PntCopyData;