bhd-components 0.11.13 → 0.11.15

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.
@@ -109,8 +109,6 @@
109
109
  position: relative;
110
110
  width: fit-content;
111
111
  max-width: 100%;
112
- .msgItem-text {
113
- padding: 12px 16px;
114
112
  .copyCode {
115
113
  display: flex;
116
114
  justify-content: flex-end;
@@ -159,169 +157,6 @@
159
157
  }
160
158
  }
161
159
  }
162
- :global {
163
- h1,
164
- h2,
165
- h3,
166
- h4,
167
- h5,
168
- h6,
169
- strong {
170
- color: rgba(0, 0, 0, 0.85);
171
- font-weight: 600;
172
- }
173
- pre::-webkit-scrollbar {
174
- background-color: #eaedf1;
175
- background-color: transparent;
176
- width: 4px;
177
- height: 4px;
178
- }
179
- pre::-webkit-scrollbar-thumb {
180
- border-radius: 4px;
181
- background-color: rgba(0, 0, 0, 0.25);
182
- }
183
- p {
184
- word-break: break-all;
185
- white-space: break-spaces;
186
- }
187
- blockquote {
188
- background: transparent;
189
- border: 0;
190
- font-size: 100%;
191
- margin: 0;
192
- outline: 0;
193
- padding: 0;
194
- vertical-align: baseline;
195
- }
196
- p,
197
- li {
198
- line-height: 1.5;
199
- color: rgba(0, 0, 0, 0.85);
200
- }
201
-
202
- li {
203
- margin-top: 8px;
204
- &:first-child {
205
- margin-top: 0;
206
- }
207
- }
208
- ol {
209
- list-style: decimal;
210
- padding-inline-start: 20px;
211
-
212
- li {
213
- list-style-type: auto;
214
- }
215
-
216
- li p {
217
- // padding: 4px 0;
218
- font-size: 14px;
219
- font-weight: 600;
220
- }
221
- li > ul li {
222
- // padding-bottom: 8px;
223
- list-style: inside;
224
- color: rgba(0, 0, 0, 0.85);
225
- &::marker {
226
- color: #d9d9d9;
227
- }
228
- &:first-child {
229
- padding-top: 8px;
230
- }
231
- }
232
- li > ol li {
233
- // padding-bottom: 8px;
234
- &::marker {
235
- color: rgba(0, 0, 0, 0.45);
236
- }
237
-
238
- &:first-child {
239
- padding-top: 8px;
240
- }
241
- }
242
- > li:last-of-type {
243
- pre {
244
- margin-bottom: 0;
245
- }
246
- }
247
- }
248
-
249
- hr {
250
- height: 0;
251
- padding: 0;
252
- margin: 0;
253
- border: none;
254
- }
255
- table {
256
- width: 100%;
257
- padding: 0;
258
- margin: 8px 0;
259
- border-collapse: separate;
260
- border-top: 1px solid #dfe6ec;
261
- border-left: 1px solid #dfe6ec;
262
- thead tr th {
263
- background-color: #f8f8f9;
264
- padding: 8px;
265
- text-align: center;
266
- border-bottom: 1px solid #dfe6ec;
267
- border-right: 1px solid #dfe6ec;
268
- }
269
- tbody tr td {
270
- padding: 8px;
271
- line-height: 21px;
272
- height: 37px; //设置单元格最小高度
273
- border-bottom: 1px solid #dfe6ec;
274
- border-right: 1px solid #dfe6ec;
275
- }
276
- }
277
-
278
- pre {
279
- background: #fafafa;
280
- border: 1px solid rgba(0, 0, 0, 0.06);
281
- border-top: none;
282
-
283
- padding: 12px;
284
- line-height: 1.5;
285
- margin: 4px 0;
286
- margin-bottom: 8px;
287
- border-radius: 0 0 4px 4px;
288
- }
289
- }
290
-
291
- .msgItem-richText {
292
- & > h3 {
293
- font-size: 16px;
294
- font-weight: 600;
295
- padding: 10px 0;
296
- }
297
- > *:not(pre) {
298
- padding-top: 8px;
299
- padding-bottom: 8px;
300
- &:first-child {
301
- padding-top: 0;
302
- }
303
- &:last-child {
304
- padding-bottom: 0;
305
- }
306
- }
307
- > h3,
308
- > h4 {
309
- padding-top: 8px;
310
- padding-bottom: 4px;
311
- }
312
- > p + p {
313
- padding-top: 4px;
314
- padding-bottom: 4px;
315
- }
316
- > pre:last-of-type {
317
- margin-bottom: 0;
318
-
319
- & + * {
320
- margin-top: 8px;
321
- }
322
- }
323
- }
324
-
325
160
  .msgItem-file {
326
161
  display: flex;
327
162
  align-items: center;
@@ -360,6 +195,407 @@
360
195
  }
361
196
  }
362
197
  }
198
+ .msgItem-text {
199
+ padding: 12px 16px;
200
+ :global {
201
+ h1,
202
+ h2,
203
+ h3,
204
+ h4,
205
+ h5,
206
+ h6,
207
+ strong {
208
+ color: rgba(0, 0, 0, 0.85);
209
+ font-weight: 600;
210
+ }
211
+ pre::-webkit-scrollbar {
212
+ background-color: #eaedf1;
213
+ background-color: transparent;
214
+ width: 4px;
215
+ height: 4px;
216
+ }
217
+ pre::-webkit-scrollbar-thumb {
218
+ border-radius: 4px;
219
+ background-color: rgba(0, 0, 0, 0.25);
220
+ }
221
+ p {
222
+ word-break: break-all;
223
+ white-space: break-spaces;
224
+ }
225
+ blockquote {
226
+ background: transparent;
227
+ border: 0;
228
+ font-size: 100%;
229
+ margin: 0;
230
+ outline: 0;
231
+ padding: 0;
232
+ vertical-align: baseline;
233
+ }
234
+ p,
235
+ li {
236
+ line-height: 1.5;
237
+ color: rgba(0, 0, 0, 0.85);
238
+ }
239
+
240
+ li {
241
+ margin-top: 8px;
242
+ &:first-child {
243
+ margin-top: 0;
244
+ }
245
+ }
246
+ ol {
247
+ list-style: decimal;
248
+ padding-inline-start: 20px;
249
+
250
+ li {
251
+ list-style-type: auto;
252
+ }
253
+
254
+ li p {
255
+ // padding: 4px 0;
256
+ font-size: 14px;
257
+ font-weight: 600;
258
+ }
259
+ li > ul li {
260
+ // padding-bottom: 8px;
261
+ list-style: inside;
262
+ color: rgba(0, 0, 0, 0.85);
263
+ &::marker {
264
+ color: #d9d9d9;
265
+ }
266
+ &:first-child {
267
+ padding-top: 8px;
268
+ }
269
+ }
270
+ li > ol li {
271
+ // padding-bottom: 8px;
272
+ &::marker {
273
+ color: rgba(0, 0, 0, 0.45);
274
+ }
275
+
276
+ &:first-child {
277
+ padding-top: 8px;
278
+ }
279
+ }
280
+ > li:last-of-type {
281
+ pre {
282
+ margin-bottom: 0;
283
+ }
284
+ }
285
+ }
286
+
287
+ hr {
288
+ height: 0;
289
+ padding: 0;
290
+ margin: 0;
291
+ border: none;
292
+ }
293
+ table {
294
+ width: 100%;
295
+ padding: 0;
296
+ margin: 8px 0;
297
+ border-collapse: separate;
298
+ border-top: 1px solid #dfe6ec;
299
+ border-left: 1px solid #dfe6ec;
300
+ thead tr th {
301
+ background-color: #f8f8f9;
302
+ padding: 8px;
303
+ text-align: center;
304
+ border-bottom: 1px solid #dfe6ec;
305
+ border-right: 1px solid #dfe6ec;
306
+ }
307
+ tbody tr td {
308
+ padding: 8px;
309
+ line-height: 21px;
310
+ height: 37px; //设置单元格最小高度
311
+ border-bottom: 1px solid #dfe6ec;
312
+ border-right: 1px solid #dfe6ec;
313
+ }
314
+ }
315
+
316
+ pre {
317
+ background: #fafafa;
318
+ border: 1px solid rgba(0, 0, 0, 0.06);
319
+ border-top: none;
320
+
321
+ padding: 12px;
322
+ line-height: 1.5;
323
+ margin: 4px 0;
324
+ margin-bottom: 8px;
325
+ border-radius: 0 0 4px 4px;
326
+ }
327
+ }
328
+ .msgItem-richText {
329
+ & > h3 {
330
+ font-size: 16px;
331
+ font-weight: 600;
332
+ padding: 10px 0;
333
+ }
334
+ > *:not(pre) {
335
+ padding-top: 8px;
336
+ padding-bottom: 8px;
337
+ &:first-child {
338
+ padding-top: 0;
339
+ }
340
+ &:last-child {
341
+ padding-bottom: 0;
342
+ }
343
+ }
344
+ > h3,
345
+ > h4 {
346
+ padding-top: 8px;
347
+ padding-bottom: 4px;
348
+ }
349
+ > p + p {
350
+ padding-top: 4px;
351
+ padding-bottom: 4px;
352
+ }
353
+ > pre:last-of-type {
354
+ margin-bottom: 0;
355
+
356
+ & + * {
357
+ margin-top: 8px;
358
+ }
359
+ }
360
+ }
361
+ }
362
+ .msgItem-text-aibody{
363
+ color: #1f2a28;
364
+ .msgItem-richText{
365
+ font-size: 13.5px;
366
+ line-height: 1.88;
367
+ color: #1f2a28;
368
+ white-space: normal;
369
+ word-break: break-all;
370
+
371
+ /*
372
+ * AI 内容排版系统
373
+ * 规则:所有间距只用 margin-top,margin-bottom 统一为 0
374
+ * 层级:H2(22px) > H3(16px) > 段落/列表(10px) > 紧跟标签后内容(5px)
375
+ */
376
+ /* 统一重置:所有直接子元素默认上间距 10px,无下间距 */
377
+ & > * {
378
+ margin-top: 10px;
379
+ margin-bottom: 0;
380
+ }
381
+ & > *:first-child {
382
+ margin-top: 0;
383
+ }
384
+ :global {
385
+ --primary: #69c89e;
386
+ --primary-light: #eef8f3;
387
+ --primary-deep: #48b385;
388
+ --primary-soft: #f4fbf7;
389
+ --bg: linear-gradient(180deg, #f7faf7 0%, #eff7f2 100%);
390
+ --card: rgba(255, 255, 255, 0.92);
391
+ --text: #1f2a28;
392
+ --text-light: #7f9089;
393
+ --border: rgba(124, 177, 151, 0.14);
394
+ --shadow: 0 18px 40px rgba(115, 150, 127, 0.08);
395
+ --sidebar-w: 74px;
396
+ --chat-w: 430px;
397
+ --chat-collapsed-w: 64px;
398
+ *{
399
+ margin: 0;
400
+ padding: 0;
401
+ }
402
+ /* H2:大段落标题,上方留足够空间表示新章节 */
403
+ h2 {
404
+ font-size: 15.5px;
405
+ font-weight: 800;
406
+ line-height: 1.35;
407
+ letter-spacing: -0.02em;
408
+ color: var(--text);
409
+ margin-top: 24px;
410
+ padding-top: 16px;
411
+ border-top: 1px solid rgba(120, 161, 138, 0.08);
412
+ }
413
+ h2:first-child {
414
+ margin-top: 0;
415
+ padding-top: 0;
416
+ border-top: none;
417
+ }
418
+ /* H3:分类标签,带左侧标记条 */
419
+ h3 {
420
+ font-size: 13px;
421
+ font-weight: 700;
422
+ letter-spacing: 0.01em;
423
+ color: var(--primary-deep);
424
+ margin-top: 18px;
425
+ padding-left: 10px;
426
+ border-left: 3px solid var(--primary);
427
+ }
428
+ h3:first-child {
429
+ margin-top: 0;
430
+ }
431
+
432
+ /* H4:段内小标题,加粗正文 */
433
+ h4 {
434
+ font-size: 13.5px;
435
+ font-weight: 700;
436
+ color: var(--text);
437
+ margin-top: 14px;
438
+ }
439
+ h4:first-child {
440
+ margin-top: 0;
441
+ }
442
+ /* H2 紧跟 H3:副标题关系 */
443
+ h2 + h3 {
444
+ margin-top: 8px;
445
+ }
446
+ h3 + h4 {
447
+ margin-top: 6px;
448
+ }
449
+ /* H3/H2 之后的内容:紧贴标签,5px 即可 */
450
+ h3 + p,
451
+ h3 + ul,
452
+ h3 + ol {
453
+ margin-top: 5px;
454
+ }
455
+ h2 + p,
456
+ h2 + ul,
457
+ h2 + ol {
458
+ margin-top: 7px;
459
+ }
460
+ h4 + p,
461
+ h4 + ul,
462
+ h4 + ol {
463
+ margin-top: 4px;
464
+ }
465
+ /* 段落 */
466
+ p {
467
+ line-height: 1.88;
468
+ }
469
+ /* 列表 */
470
+ ul {
471
+ padding-left: 20px;
472
+ list-style: disc;
473
+ }
474
+ ol {
475
+ padding-left: 24px;
476
+ list-style: decimal;
477
+ counter-reset: none;
478
+ }
479
+ li {
480
+ margin-top: 6px;
481
+ line-height: 1.82;
482
+ }
483
+ li:first-child {
484
+ margin-top: 0;
485
+ }
486
+ li::marker {
487
+ color: var(--primary-deep);
488
+ font-weight: 600;
489
+ }
490
+ /* 嵌套列表 */
491
+ li > ul,
492
+ li > ol {
493
+ margin-top: 4px;
494
+ }
495
+ ol ol {
496
+ list-style: lower-alpha;
497
+ }
498
+ ul ul {
499
+ list-style: circle;
500
+ }
501
+ /* 内联强调 */
502
+ strong {
503
+ font-weight: 700;
504
+ color: var(--text);
505
+ }
506
+ mark {
507
+ background: #e3f7ee;
508
+ color: #2a9962;
509
+ padding: 1px 6px;
510
+ border-radius: 4px;
511
+ font-weight: 600;
512
+ font-style: normal;
513
+ font-size: 0.95em;
514
+ }
515
+ /* 分隔线:两侧均等留白 */
516
+ hr {
517
+ border: none;
518
+ border-top: 1px solid rgba(120, 161, 138, 0.11);
519
+ margin-top: 16px;
520
+ }
521
+ hr + * {
522
+ margin-top: 14px;
523
+ border-top: none;
524
+ padding-top: 0;
525
+ }
526
+ /* 引用/重点提示:左侧竖线 + 浅底 */
527
+ blockquote {
528
+ background: rgba(0, 125, 101, 0.05);
529
+ border-left: 2px solid var(--primary);
530
+ padding: 10px 14px;
531
+ border-radius: 0 8px 8px 0;
532
+ margin-top: 12px;
533
+ font-size: 13.5px;
534
+ line-height: 1.82;
535
+ color: #1b3d2e;
536
+ }
537
+
538
+ /* 表格 */
539
+ .ai-table-wrap {
540
+ margin-top: 12px;
541
+ overflow-x: auto;
542
+ border: 1px solid rgba(120, 161, 138, 0.12);
543
+ border-radius: 10px;
544
+ }
545
+ table {
546
+ width: max-content;
547
+ min-width: 100%;
548
+ border-collapse: collapse;
549
+ font-size: 13px;
550
+ }
551
+ table thead {
552
+ background: #f5faf7;
553
+ }
554
+ table th {
555
+ text-align: left;
556
+ font-size: 12px;
557
+ font-weight: 700;
558
+ color: var(--text);
559
+ padding: 10px 14px;
560
+ border-bottom: 1.5px solid rgba(120, 161, 138, 0.15);
561
+ }
562
+ table td {
563
+ padding: 10px 14px;
564
+ border-bottom: 1px solid rgba(120, 161, 138, 0.07);
565
+ vertical-align: top;
566
+ line-height: 1.7;
567
+ }
568
+ table tbody tr:last-child td {
569
+ border-bottom: none;
570
+ }
571
+ table tbody tr:hover td {
572
+ // background: #f7fbf9;
573
+ background: rgba(0, 125, 101, 0.05);
574
+ }
575
+ /* 代码块 */
576
+ pre {
577
+ background: #f4f8f5;
578
+ border: 1px solid rgba(120, 161, 138, 0.13);
579
+ border-radius: 10px;
580
+ padding: 14px 16px;
581
+ margin-top: 10px;
582
+ overflow-x: auto;
583
+ }
584
+ pre code {
585
+ font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, monospace;
586
+ font-size: 12.5px;
587
+ line-height: 1.75;
588
+ color: #1a3a28;
589
+ white-space: pre;
590
+ }
591
+ .hljs {
592
+ background: #f4f8f5;
593
+ color: #1a3a28;
594
+ }
595
+ /* 操作按钮组:固定在内容末尾,与上方内容保持明显间距 */
596
+ }
597
+ }
598
+
363
599
  }
364
600
  .msgItem-action {
365
601
  border-top: 1px solid rgba(0, 0, 0, 0.06);
@@ -487,6 +723,9 @@
487
723
  .msgItem-action {
488
724
  border-radius: 0px 0px 20px 20px;
489
725
  }
726
+ .msgItem-text-aibody{
727
+ padding: 0;
728
+ }
490
729
  }
491
730
  .msgItem-action-operate {
492
731
  margin-left: auto;
@@ -514,6 +753,9 @@
514
753
  .msgItem-action {
515
754
  border-radius: 0px 0px 20px 20px;
516
755
  }
756
+ .msgItem-text-aibody{
757
+ padding: 12px 16px;
758
+ }
517
759
  }
518
760
 
519
761
  .msgItem-action-operate {
@@ -44,6 +44,7 @@ export interface msgActionProps {
44
44
 
45
45
  export interface contentConfigProps {
46
46
  className?: string;
47
+ htmlStyle?:"richText"|"ai_body";// markdown转html的样式 内置支持 richText(new_yun) ai_body(bigme)
47
48
  msgAction?: string[] | msgActionProps;
48
49
  // transformItem:(item: any) => dataItemType;
49
50
  getList: (
@@ -54,7 +55,7 @@ export interface contentConfigProps {
54
55
  dataSource: dataItemType[];
55
56
  }>; // 列表数据
56
57
  loadMore?: boolean; // 是否开启加载更多 // 默认为true
57
- showTime:boolean;// 是否显示时间 默认为true
58
+ showTime?:boolean;// 是否显示时间 默认为true
58
59
  helloMsg?: string; //欢迎语
59
60
  pageSize?: number; //每页数量 默认为30
60
61
  coverRenderText?: (
@@ -78,6 +79,9 @@ export interface contentConfigProps {
78
79
  onSendedHelloMsg?: () => void; //发送招呼语之后
79
80
  onInit?: () => void; //组件初始化
80
81
  renderLoading?: (type:"init"|"loadMore",initLoadNode:React.ReactNode,loadMoreNode:React.ReactNode) => React.ReactNode;
82
+ renderItemBottom?: (item: dataItemType) => React.ReactNode;
83
+ renderItemTop?: (item: dataItemType) => React.ReactNode;
84
+
81
85
  }
82
86
 
83
87
  // content props
@@ -93,6 +97,7 @@ export interface contentProps {
93
97
  export interface footerConfigProps {
94
98
  placeholder?: string; // placeholder 默认值为“请输入内容”
95
99
  className?: string;
100
+ textAreaProps?:object;
96
101
  maxLength?: number | ((value: string) => boolean); //字符长度 默认500
97
102
  renderAction?: (
98
103
  sendBtn: React.ReactNode,
@@ -105,7 +110,7 @@ export interface footerConfigProps {
105
110
  renderTopContent?: () => React.ReactNode;
106
111
  inputingText?: string;
107
112
  canStopMessage?: boolean;//是否允许停止消息 默认为true
108
- speed:number;// 控制文字每次输出的速度 默认为0 即不控制
113
+ speed?:number;// 控制文字每次输出的速度 默认为0 即不控制
109
114
  }
110
115
 
111
116
  export interface onOpenProps {
@@ -202,6 +207,7 @@ export interface footerRefProps {
202
207
  stopMessage: () => void; //停止发送消息
203
208
  setReferences: (reference: referenceType) => void; // 添加引用
204
209
  setDisabled: (flag: boolean) => void;// 设置是否禁用发送按钮
210
+ setIsFocus: (flag: boolean) => void;//设置是否聚焦
205
211
  }
206
212
 
207
213
  // sendBtn Props