@myun/gimi-chat 0.0.3 → 0.0.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.
- package/dist/apis/fetch.d.ts +64 -0
- package/dist/apis/fetch.js +512 -0
- package/dist/apis/useApi.d.ts +57 -0
- package/dist/apis/useApi.js +378 -0
- package/dist/assets/image/Subtract.png +0 -0
- package/dist/assets/image/ai-logo.png +0 -0
- package/dist/assets/image/copyIcon.png +0 -0
- package/dist/assets/image/deepthinkActive.png +0 -0
- package/dist/assets/image/empty-img-dark.png +0 -0
- package/dist/assets/image/empty-img.png +0 -0
- package/dist/assets/image/like_active.png +0 -0
- package/dist/assets/image/love.png +0 -0
- package/dist/assets/image/retry.png +0 -0
- package/dist/assets/image/soundOut.png +0 -0
- package/dist/assets/image/unlike_active.png +0 -0
- package/dist/assets/image/unlove.png +0 -0
- package/dist/assets/lottie/ai-bg.json +1704 -0
- package/dist/assets/lottie/ai-loading.json +192 -0
- package/dist/assets/lottie/ai-output-loading.json +272 -0
- package/dist/assets/lottie/ai-output-normal.json +17694 -0
- package/dist/assets/lottie/ai-output-strengthen.json +17321 -0
- package/dist/assets/lottie/ai-voice-play.json +1 -0
- package/dist/assets/lottie/living.json +705 -0
- package/dist/assets/lottie/myun-living.json +726 -0
- package/dist/assets/lottie/myun-loading.json +530 -0
- package/dist/components/ai-chat-dialogue/index.d.ts +16 -0
- package/dist/components/ai-chat-dialogue/index.js +1056 -0
- package/dist/components/ai-chat-dialogue/index.module.css +230 -0
- package/dist/components/ai-chat-dialogue/message-parser.d.ts +36 -0
- package/dist/components/ai-chat-dialogue/message-parser.js +52 -0
- package/dist/components/ai-chat-dialogue/tlv.d.ts +7 -0
- package/dist/components/ai-chat-dialogue/tlv.js +32 -0
- package/dist/components/ai-chat-dialogue/volc-voice-call-client.d.ts +47 -0
- package/dist/components/ai-chat-dialogue/volc-voice-call-client.js +246 -0
- package/dist/components/ai-correction/index.d.ts +5 -0
- package/dist/components/ai-correction/index.js +45 -0
- package/dist/components/ai-loading/index.d.ts +3 -0
- package/dist/components/ai-loading/index.js +14 -0
- package/dist/components/ai-loading/index.module.css +11 -0
- package/dist/components/answer-item/index.d.ts +27 -0
- package/dist/components/answer-item/index.js +194 -0
- package/dist/components/answer-item/index.module.css +266 -0
- package/dist/components/ask-card/index.d.ts +10 -0
- package/dist/components/ask-card/index.js +76 -0
- package/dist/components/ask-card/index.module.css +122 -0
- package/dist/components/chat-input/index.d.ts +31 -0
- package/dist/components/chat-input/index.js +433 -0
- package/dist/components/chat-input/index.module.css +42 -0
- package/dist/components/chat-voice/VoiceCommunication.d.ts +7 -0
- package/dist/components/chat-voice/VoiceCommunication.js +69 -0
- package/dist/components/chat-voice/VoiceRecord.d.ts +7 -0
- package/dist/components/chat-voice/VoiceRecord.js +34 -0
- package/dist/components/conversation-delete/index.d.ts +5 -0
- package/dist/components/conversation-delete/index.js +24 -0
- package/dist/components/dots-loading/index.d.ts +2 -0
- package/dist/components/dots-loading/index.js +11 -0
- package/dist/components/dots-loading/index.module.css +41 -0
- package/dist/components/empty/index.d.ts +9 -0
- package/dist/components/empty/index.js +32 -0
- package/dist/components/empty/index.module.css +24 -0
- package/dist/components/excel-components/ExcelCard.d.ts +11 -0
- package/dist/components/excel-components/ExcelCard.js +35 -0
- package/dist/components/excel-components/ExcelExcuting.d.ts +10 -0
- package/dist/components/excel-components/ExcelExcuting.js +263 -0
- package/dist/components/excel-components/ExcelFailCard.d.ts +9 -0
- package/dist/components/excel-components/ExcelFailCard.js +20 -0
- package/dist/components/excel-components/ExcelSuccessCard.d.ts +5 -0
- package/dist/components/excel-components/ExcelSuccessCard.js +50 -0
- package/dist/components/excel-components/index.module.css +212 -0
- package/dist/components/excel-components/styles.module.css +178 -0
- package/dist/components/file-card/fileCardSidebar.d.ts +8 -0
- package/dist/components/file-card/fileCardSidebar.js +56 -0
- package/dist/components/file-card/index.d.ts +15 -0
- package/dist/components/file-card/index.js +97 -0
- package/dist/components/file-card/index.module.css +139 -0
- package/dist/components/file-preview/index.d.ts +3 -0
- package/dist/components/file-preview/index.js +227 -0
- package/dist/components/file-preview/index.module.css +83 -0
- package/dist/components/file-upload/index.d.ts +16 -0
- package/dist/components/file-upload/index.js +238 -0
- package/dist/components/file-upload/uploadV1.d.ts +16 -0
- package/dist/components/file-upload/uploadV1.js +267 -0
- package/dist/components/gimi-sidebar/index.d.ts +17 -0
- package/dist/components/gimi-sidebar/index.js +41 -0
- package/dist/components/gimi-sidebar/index.module.css +118 -0
- package/dist/components/header/index.d.ts +5 -0
- package/dist/components/header/index.js +20 -0
- package/dist/components/header/index.module.css +19 -0
- package/dist/components/iconfont-com/index.d.ts +11 -0
- package/dist/components/iconfont-com/index.js +29 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/knowledge-trace/KnowledgeIconComponent.d.ts +7 -0
- package/dist/components/knowledge-trace/KnowledgeIconComponent.js +101 -0
- package/dist/components/knowledge-trace/classList.d.ts +6 -0
- package/dist/components/knowledge-trace/classList.js +72 -0
- package/dist/components/knowledge-trace/documentList.d.ts +6 -0
- package/dist/components/knowledge-trace/documentList.js +75 -0
- package/dist/components/knowledge-trace/index.d.ts +18 -0
- package/dist/components/knowledge-trace/index.js +155 -0
- package/dist/components/knowledge-trace/index.module.css +254 -0
- package/dist/components/knowledge-trace/interfaces.d.ts +166 -0
- package/dist/components/knowledge-trace/interfaces.js +1 -0
- package/dist/components/knowledge-trace/videoList.d.ts +6 -0
- package/dist/components/knowledge-trace/videoList.js +91 -0
- package/dist/components/lottie-img/index.d.ts +8 -0
- package/dist/components/lottie-img/index.js +99 -0
- package/dist/components/message-actions/CopyButton.d.ts +7 -0
- package/dist/components/message-actions/CopyButton.js +33 -0
- package/dist/components/message-actions/LikeButton.d.ts +7 -0
- package/dist/components/message-actions/LikeButton.js +34 -0
- package/dist/components/message-actions/RegenerateButton.d.ts +5 -0
- package/dist/components/message-actions/RegenerateButton.js +27 -0
- package/dist/components/message-actions/UnLikeButton.d.ts +7 -0
- package/dist/components/message-actions/UnLikeButton.js +34 -0
- package/dist/components/message-actions/VoicePlay.d.ts +10 -0
- package/dist/components/message-actions/VoicePlay.js +74 -0
- package/dist/components/message-list/index.d.ts +19 -0
- package/dist/components/message-list/index.js +164 -0
- package/dist/components/message-list/index.module.css +261 -0
- package/dist/components/no-microphone-root/index.d.ts +6 -0
- package/dist/components/no-microphone-root/index.js +36 -0
- package/dist/components/no-microphone-root/index.module.css +48 -0
- package/dist/components/preset-agent-content/index.d.ts +8 -0
- package/dist/components/preset-agent-content/index.js +24 -0
- package/dist/components/preset-agent-content/index.module.css +46 -0
- package/dist/components/quoted-content/index.d.ts +0 -0
- package/dist/components/quoted-content/index.js +171 -0
- package/dist/components/quoted-content/index.module.css +80 -0
- package/dist/components/reasoning-content/index.d.ts +6 -0
- package/dist/components/reasoning-content/index.js +116 -0
- package/dist/components/reasoning-content/index.module.css +169 -0
- package/dist/components/reference-content/index.d.ts +28 -0
- package/dist/components/reference-content/index.js +125 -0
- package/dist/components/reference-content/index.module.css +84 -0
- package/dist/components/templates/CommonChat.d.ts +5 -0
- package/dist/components/templates/CommonChat.js +218 -0
- package/dist/components/templates/GimiChatComponent.d.ts +4 -0
- package/dist/components/templates/GimiChatComponent.js +23 -0
- package/dist/components/templates/demo/demo.d.ts +2 -0
- package/dist/components/templates/demo/demo.js +109 -0
- package/dist/components/templates/index.module.css +109 -0
- package/dist/components/upload-list/index.d.ts +15 -0
- package/dist/components/upload-list/index.js +90 -0
- package/dist/components/upload-list/index.module.css +119 -0
- package/dist/components/voice-bars/index.d.ts +4 -0
- package/dist/components/voice-bars/index.js +174 -0
- package/dist/components/voice-check-dialog/index.d.ts +8 -0
- package/dist/components/voice-check-dialog/index.js +163 -0
- package/dist/components/voice-check-dialog/index.module.css +9 -0
- package/dist/components/voice-recording/index.d.ts +9 -0
- package/dist/components/voice-recording/index.js +54 -0
- package/dist/components/voice-recording/index.module.css +41 -0
- package/dist/components/work-flow-content/demo.d.ts +3 -0
- package/dist/components/work-flow-content/demo.js +11 -0
- package/dist/components/work-flow-content/index.d.ts +6 -0
- package/dist/components/work-flow-content/index.js +55 -0
- package/dist/components/work-flow-content/index.module.css +24 -0
- package/dist/constants.d.ts +24 -0
- package/dist/constants.js +24 -0
- package/dist/hooks/useChatActions.d.ts +12 -0
- package/dist/hooks/useChatActions.js +207 -0
- package/dist/hooks/useChatHistory.d.ts +8 -0
- package/dist/hooks/useChatHistory.js +225 -0
- package/dist/hooks/useChatMessage.d.ts +49 -0
- package/dist/hooks/useChatMessage.js +87 -0
- package/dist/hooks/useChatRecommend.d.ts +8 -0
- package/dist/hooks/useChatRecommend.js +126 -0
- package/dist/hooks/useChatStream.d.ts +20 -0
- package/dist/hooks/useChatStream.js +244 -0
- package/dist/hooks/useChatUI.d.ts +32 -0
- package/dist/hooks/useChatUI.js +134 -0
- package/dist/hooks/useChatVoice.d.ts +11 -0
- package/dist/hooks/useChatVoice.js +379 -0
- package/dist/hooks/useCommonChatAPI.d.ts +27 -0
- package/dist/hooks/useCommonChatAPI.js +1276 -0
- package/dist/hooks/useFile.d.ts +13 -0
- package/dist/hooks/useFile.js +288 -0
- package/dist/hooks/useKnowledgeService.d.ts +17 -0
- package/dist/hooks/useKnowledgeService.js +210 -0
- package/dist/hooks/useLastEventId.d.ts +8 -0
- package/dist/hooks/useLastEventId.js +66 -0
- package/dist/hooks/useLongPoll.d.ts +3 -0
- package/dist/hooks/useLongPoll.js +111 -0
- package/dist/hooks/useScroll.d.ts +4 -0
- package/dist/hooks/useScroll.js +172 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/interfaces/chatMessage.d.ts +139 -0
- package/dist/interfaces/fileInterface.d.ts +10 -0
- package/dist/interfaces/fileInterface.js +11 -0
- package/dist/interfaces/knowledgeTrace.d.ts +177 -0
- package/dist/store/hooks.d.ts +4 -0
- package/dist/store/hooks.js +3 -0
- package/dist/store/index.d.ts +7 -0
- package/dist/store/index.js +7 -0
- package/dist/store/slices/gimiMenuSlice.d.ts +95 -0
- package/dist/store/slices/gimiMenuSlice.js +251 -0
- package/dist/utils/chatInputUtil.d.ts +19 -0
- package/dist/utils/chatInputUtil.js +45 -0
- package/dist/utils/tools.d.ts +50 -0
- package/dist/utils/tools.js +474 -0
- package/dist/utils/voice-stream.d.ts +119 -0
- package/dist/utils/voice-stream.js +1162 -0
- package/package.json +5 -6
- package/LICENSE +0 -21
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import GimiChatComponent from "../GimiChatComponent";
|
|
2
|
+
import React from "react";
|
|
3
|
+
export default function Demo() {
|
|
4
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
5
|
+
style: {
|
|
6
|
+
height: '600px'
|
|
7
|
+
}
|
|
8
|
+
}, /*#__PURE__*/React.createElement(GimiChatComponent, {
|
|
9
|
+
baseUrl: 't-mgateway.gaodunwangxiao.com',
|
|
10
|
+
businessType: "correction",
|
|
11
|
+
token: 'eyJhZ2VuY3kiOjk1NTU1LCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJHYW9kdW4iLCJpYXQiOjE3Njg4OTEyMzIsInN1YiI6IjE1Mjg4NzQiLCJpc3MiOiJHYW9kdW4iLCJleHAiOjE3NzE0ODMyMzJ9.6JpEbaJnxMKiER78Ko5irwVpGFfKOP1zxYSUYXPL00Y',
|
|
12
|
+
platform: "myun",
|
|
13
|
+
agentId: 79
|
|
14
|
+
// bussinessParams={
|
|
15
|
+
// {
|
|
16
|
+
// "ANSWER_ID": 19923,
|
|
17
|
+
// "QUESTION_ID": 77595
|
|
18
|
+
// }
|
|
19
|
+
// }
|
|
20
|
+
// agentDetail={{
|
|
21
|
+
// "agentIcon": "https://mstatic.gaodunwangxiao.com/image/2025/09/24/Excel建模-1758706152601.png",
|
|
22
|
+
// "agentId": 65,
|
|
23
|
+
// "agentIntroduce": "帮你智能搭建财务数据表格信息",
|
|
24
|
+
// "agentMode": "workflow",
|
|
25
|
+
// "agentName": "智能Excel建模",
|
|
26
|
+
// "agentState": 1,
|
|
27
|
+
// "agentType": "product",
|
|
28
|
+
// "botId": "BOT1757402118115",
|
|
29
|
+
// "botInstructionId": 0,
|
|
30
|
+
// "characterSetting": null,
|
|
31
|
+
// "conversationType": 2,
|
|
32
|
+
// "customizeInstructContent": null,
|
|
33
|
+
// "defaultPrompt": "我要生成一个{{输入模板名称,如PVM模板}},用于{{输入使用场景,如分析收入增长主要驱动力}}。关键数据:{{输入数据}}",
|
|
34
|
+
// "inputPrompt": "",
|
|
35
|
+
// "isCustomizeInstruct": 0,
|
|
36
|
+
// "isEnableRelated": 1,
|
|
37
|
+
// "isEnableVoiceCall": 0,
|
|
38
|
+
// "maxLength": null,
|
|
39
|
+
// "modeType": null,
|
|
40
|
+
// "openUploadFile": 1,
|
|
41
|
+
// "productId": 36842,
|
|
42
|
+
// "prologue": "帮你智能搭建财务数据表格信息",
|
|
43
|
+
// "questionList": [
|
|
44
|
+
// {
|
|
45
|
+
// "id": 127,
|
|
46
|
+
// "question": "会计是现代社会经济活动开展的重要基础,也是推动国际经贸往来的重要保障"
|
|
47
|
+
// },
|
|
48
|
+
// {
|
|
49
|
+
// "id": 128,
|
|
50
|
+
// "question": "全面预算的执行和监控中可以采用什么方式做好业务支持和预算管控?"
|
|
51
|
+
// }
|
|
52
|
+
// ],
|
|
53
|
+
// "showName": "智能Excel建模",
|
|
54
|
+
// "showNameStatus": 1,
|
|
55
|
+
// "sourceModelId": null,
|
|
56
|
+
// "temperature": null,
|
|
57
|
+
// "voiceConfigs": [
|
|
58
|
+
// {
|
|
59
|
+
// "emotions": [
|
|
60
|
+
// {
|
|
61
|
+
// "name": "悲伤",
|
|
62
|
+
// "param": "sad"
|
|
63
|
+
// },
|
|
64
|
+
// {
|
|
65
|
+
// "name": "恐惧",
|
|
66
|
+
// "param": "fear"
|
|
67
|
+
// },
|
|
68
|
+
// {
|
|
69
|
+
// "name": "厌恶",
|
|
70
|
+
// "param": "hate"
|
|
71
|
+
// },
|
|
72
|
+
// {
|
|
73
|
+
// "name": "中性",
|
|
74
|
+
// "param": "neutral"
|
|
75
|
+
// }
|
|
76
|
+
// ],
|
|
77
|
+
// "gender": "female",
|
|
78
|
+
// "isSupportMix": 0,
|
|
79
|
+
// "languageCode": "zh-CN",
|
|
80
|
+
// "languageId": 1,
|
|
81
|
+
// "languageName": "中文",
|
|
82
|
+
// "scene": "多情感",
|
|
83
|
+
// "toneId": 2,
|
|
84
|
+
// "toneName": "甜心小美(多情感)",
|
|
85
|
+
// "voiceType": "zh_female_tianxinxiaomei_emo_v2_mars_bigtts"
|
|
86
|
+
// }
|
|
87
|
+
// ],
|
|
88
|
+
// "workflowList": [
|
|
89
|
+
// {
|
|
90
|
+
// "botFlowId": "MC-2CDBD8AB38B6410A8C14EE503C9ADBCE",
|
|
91
|
+
// "workflowId": 315,
|
|
92
|
+
// "workflowName": "excel生成926(第3版)"
|
|
93
|
+
// }
|
|
94
|
+
// ]
|
|
95
|
+
// }}
|
|
96
|
+
,
|
|
97
|
+
showPrologue: true,
|
|
98
|
+
model: 'fullscreen',
|
|
99
|
+
conversationId: 8394,
|
|
100
|
+
chatInputConfig: {
|
|
101
|
+
enableFileUpload: true,
|
|
102
|
+
enableVoiceChat: true,
|
|
103
|
+
enableVoiceRecord: true
|
|
104
|
+
},
|
|
105
|
+
messageConfig: {
|
|
106
|
+
enableRegenerate: true
|
|
107
|
+
}
|
|
108
|
+
}));
|
|
109
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
.main {
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
display: flex;
|
|
6
|
+
gap: 20px;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.chat_content {
|
|
12
|
+
flex: 1;
|
|
13
|
+
height: 100%;
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
min-width: 0;
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.scroll_wrapper {
|
|
21
|
+
flex: 1;
|
|
22
|
+
position: relative;
|
|
23
|
+
width: 100%;
|
|
24
|
+
min-height: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.scroll_container {
|
|
28
|
+
height: 100%;
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
overflow-x: hidden;
|
|
31
|
+
width: 100%;
|
|
32
|
+
position: relative;
|
|
33
|
+
}
|
|
34
|
+
.scroll_container::-webkit-scrollbar {
|
|
35
|
+
width: 6px;
|
|
36
|
+
height: 6px;
|
|
37
|
+
}
|
|
38
|
+
.scroll_container::-webkit-scrollbar-thumb {
|
|
39
|
+
border-radius: 6px;
|
|
40
|
+
background: transparent;
|
|
41
|
+
}
|
|
42
|
+
.scroll_container::-webkit-scrollbar-track {
|
|
43
|
+
background: transparent;
|
|
44
|
+
border-radius: 6px;
|
|
45
|
+
}
|
|
46
|
+
.scroll_container.scrolling::-webkit-scrollbar-thumb {
|
|
47
|
+
background: rgba(144, 147, 153, 0.3);
|
|
48
|
+
}
|
|
49
|
+
.scroll_container::-webkit-scrollbar-thumb:hover {
|
|
50
|
+
background: rgba(144, 147, 153, 0.5);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.backBottomBtn {
|
|
54
|
+
position: absolute;
|
|
55
|
+
bottom: 20px;
|
|
56
|
+
right: 20px;
|
|
57
|
+
width: 40px;
|
|
58
|
+
height: 40px;
|
|
59
|
+
background: #fff;
|
|
60
|
+
border-radius: 50%;
|
|
61
|
+
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
z-index: 10;
|
|
67
|
+
transition: all 0.3s;
|
|
68
|
+
color: #1c1f23;
|
|
69
|
+
}
|
|
70
|
+
.backBottomBtn:hover {
|
|
71
|
+
background: #f2f3f5;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.content_header {
|
|
75
|
+
width: 100%;
|
|
76
|
+
height: 50px;
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
font-family: PingFangSC, PingFang SC;
|
|
81
|
+
font-weight: 500;
|
|
82
|
+
font-size: 16px;
|
|
83
|
+
color: #2e394c;
|
|
84
|
+
line-height: 22px;
|
|
85
|
+
text-align: center;
|
|
86
|
+
font-style: normal;
|
|
87
|
+
position: relative;
|
|
88
|
+
}
|
|
89
|
+
.content_header .content_header_title {
|
|
90
|
+
width: 340px;
|
|
91
|
+
height: 100%;
|
|
92
|
+
line-height: 50px;
|
|
93
|
+
overflow: hidden;
|
|
94
|
+
/* 隐藏溢出内容 */
|
|
95
|
+
white-space: nowrap;
|
|
96
|
+
/* 强制文本不换行 */
|
|
97
|
+
text-overflow: ellipsis;
|
|
98
|
+
/* 超出部分显示省略号 */
|
|
99
|
+
}
|
|
100
|
+
.content_header .text_shanow {
|
|
101
|
+
z-index: 5;
|
|
102
|
+
pointer-events: none;
|
|
103
|
+
background: linear-gradient(rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
|
104
|
+
width: 97%;
|
|
105
|
+
height: 32px;
|
|
106
|
+
position: absolute;
|
|
107
|
+
top: 100%;
|
|
108
|
+
left: 1px;
|
|
109
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FileStatus } from '../../interfaces/fileInterface';
|
|
3
|
+
interface UploadFileProps {
|
|
4
|
+
file: {
|
|
5
|
+
fileType?: string;
|
|
6
|
+
fileName?: string;
|
|
7
|
+
status: FileStatus;
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
};
|
|
10
|
+
handleDelFile?: () => void;
|
|
11
|
+
handleReTry?: (file: any) => void;
|
|
12
|
+
showDel?: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare const UploadFile: React.FC<UploadFileProps>;
|
|
15
|
+
export default UploadFile;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styles from "./index.module.css";
|
|
3
|
+
import reTry from "../../assets/image/retry.png";
|
|
4
|
+
import { FileStatus } from "../../interfaces/fileInterface";
|
|
5
|
+
import { formatSizeToKB } from "../../utils/tools";
|
|
6
|
+
var UploadFile = function UploadFile(_ref) {
|
|
7
|
+
var file = _ref.file,
|
|
8
|
+
handleDelFile = _ref.handleDelFile,
|
|
9
|
+
handleReTry = _ref.handleReTry,
|
|
10
|
+
_ref$showDel = _ref.showDel,
|
|
11
|
+
showDel = _ref$showDel === void 0 ? true : _ref$showDel;
|
|
12
|
+
// 使用useMemo缓存icon,避免每次渲染重新计算
|
|
13
|
+
var _React$useMemo = React.useMemo(function () {
|
|
14
|
+
var _file$fileName, _file$name;
|
|
15
|
+
if (!file) return {};
|
|
16
|
+
var fileType = file.fileName ? ((_file$fileName = file.fileName) === null || _file$fileName === void 0 ? void 0 : _file$fileName.split('.').pop()) || '' : ((_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.split('.').pop()) || '';
|
|
17
|
+
var fileName = file.fileName ? file.fileName : file.name;
|
|
18
|
+
var fileSize = formatSizeToKB(file.fileSize || file.size);
|
|
19
|
+
var iconMap = {
|
|
20
|
+
txt: 'https://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202509/17/b46c7_20250917144926.png',
|
|
21
|
+
xlsx: 'https://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202509/17/0094f_20250917144837.png'
|
|
22
|
+
};
|
|
23
|
+
return {
|
|
24
|
+
fileIcon: iconMap[fileType.toLowerCase()] || '',
|
|
25
|
+
fileName: fileName,
|
|
26
|
+
fileSize: fileSize
|
|
27
|
+
};
|
|
28
|
+
}, [file]),
|
|
29
|
+
fileIcon = _React$useMemo.fileIcon,
|
|
30
|
+
fileName = _React$useMemo.fileName,
|
|
31
|
+
fileSize = _React$useMemo.fileSize; // 更精确的依赖
|
|
32
|
+
|
|
33
|
+
// 缓存事件处理函数
|
|
34
|
+
var handleRetryClick = React.useCallback(function () {
|
|
35
|
+
if (handleReTry && file) {
|
|
36
|
+
handleReTry(file);
|
|
37
|
+
}
|
|
38
|
+
}, [handleReTry, file]);
|
|
39
|
+
var handleDeleteClick = React.useCallback(function () {
|
|
40
|
+
if (handleDelFile) {
|
|
41
|
+
handleDelFile();
|
|
42
|
+
}
|
|
43
|
+
}, [handleDelFile]);
|
|
44
|
+
if (!file) return null; // 空状态处理
|
|
45
|
+
|
|
46
|
+
var isError = file.status === FileStatus.UPLOAD_FAILED || file.status === FileStatus.ANALYSE_FAILED || file.status === FileStatus.NETWORK_ERROR;
|
|
47
|
+
var isLoading = [FileStatus.PADDING, FileStatus.RETRING, FileStatus.UPLOADING].includes(file.status);
|
|
48
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
49
|
+
className: styles.uploadBox
|
|
50
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
className: styles.uploadIcon
|
|
52
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
53
|
+
src: fileIcon,
|
|
54
|
+
alt: "file-icon"
|
|
55
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
56
|
+
className: styles.uploadName
|
|
57
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
58
|
+
className: styles.uploadfileName
|
|
59
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
className: styles.fileName
|
|
61
|
+
}, fileName)), (fileSize || isError) && /*#__PURE__*/React.createElement("div", {
|
|
62
|
+
className: styles.sizeText
|
|
63
|
+
}, fileSize && !isError && /*#__PURE__*/React.createElement("span", {
|
|
64
|
+
className: styles.size
|
|
65
|
+
}, fileSize), isError && /*#__PURE__*/React.createElement("span", {
|
|
66
|
+
className: styles.errorText
|
|
67
|
+
}, file.status === FileStatus.UPLOAD_FAILED ? '上传失败' : file.status === FileStatus.NETWORK_ERROR ? '网络错误' : '解析失败'))), isLoading && /*#__PURE__*/React.createElement("div", {
|
|
68
|
+
className: styles.uploadLoading
|
|
69
|
+
}, /*#__PURE__*/React.createElement("span", null, file.status === FileStatus.PADDING ? '解析中...' : file.status === FileStatus.UPLOADING ? '上传中...' : '重试中...'), /*#__PURE__*/React.createElement("img", {
|
|
70
|
+
src: "https://simg01.gaodunwangxiao.com/uploadfiles/tmp/upload/202509/07/0a0fa_20250907093927.gif",
|
|
71
|
+
alt: "loading"
|
|
72
|
+
})), isError && /*#__PURE__*/React.createElement("div", {
|
|
73
|
+
className: styles.uploadError,
|
|
74
|
+
onClick: handleRetryClick
|
|
75
|
+
}, "\u91CD\u8BD5", /*#__PURE__*/React.createElement("img", {
|
|
76
|
+
src: reTry,
|
|
77
|
+
alt: "",
|
|
78
|
+
style: {
|
|
79
|
+
width: 16,
|
|
80
|
+
height: 16
|
|
81
|
+
}
|
|
82
|
+
})), showDel && /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: styles.delIcon,
|
|
84
|
+
onClick: handleDeleteClick
|
|
85
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
86
|
+
src: "https://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202509/12/6fa3e_20250912145501.png",
|
|
87
|
+
alt: "delete"
|
|
88
|
+
})));
|
|
89
|
+
};
|
|
90
|
+
export default UploadFile;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
.uploadBox {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
min-width: 228px; /* 最小宽度保证 */
|
|
6
|
+
max-width: 380px; /* 最大宽度限制 */
|
|
7
|
+
width: fit-content; /* 自动适应内容宽度 */
|
|
8
|
+
flex-shrink: 0;
|
|
9
|
+
border-radius: 12px;
|
|
10
|
+
background: var(---, #f2f3f7);
|
|
11
|
+
padding: 14px 16px 14px 12px;
|
|
12
|
+
margin-bottom: 12px;
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.uploadIcon img {
|
|
17
|
+
width: 24px;
|
|
18
|
+
height: 22px;
|
|
19
|
+
margin-right: 8px;
|
|
20
|
+
}
|
|
21
|
+
.uploadIcon img img {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
object-fit: cover;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.uploadName {
|
|
28
|
+
flex: 1; /* 让文件名占满剩余空间 */
|
|
29
|
+
color: #2e394c;
|
|
30
|
+
font-family: "PingFang SC";
|
|
31
|
+
font-size: 14px;
|
|
32
|
+
font-style: normal;
|
|
33
|
+
font-weight: 400;
|
|
34
|
+
line-height: normal;
|
|
35
|
+
min-width: 0; /* 关键:允许flex子元素缩小到内容尺寸以下 */
|
|
36
|
+
}
|
|
37
|
+
.uploadName .uploadfileName {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
max-width: 100%; /* 限制整个文件名区域宽度 */
|
|
41
|
+
}
|
|
42
|
+
.uploadName .uploadfileName .fileName {
|
|
43
|
+
/* 动态计算可用宽度,减去扩展名和间距 */
|
|
44
|
+
flex: 1;
|
|
45
|
+
min-width: 0; /* 允许文件名进一步缩小 */
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
text-overflow: ellipsis;
|
|
49
|
+
margin-right: 4px; /* 与扩展名保持一点距离 */
|
|
50
|
+
}
|
|
51
|
+
.uploadName .uploadfileName .fileExtension {
|
|
52
|
+
white-space: nowrap; /* 确保扩展名不换行 */
|
|
53
|
+
color: #717F94; /* 可以给扩展名一个不同的颜色区分 */
|
|
54
|
+
}
|
|
55
|
+
.uploadName .sizeText .size {
|
|
56
|
+
margin-right: 4px;
|
|
57
|
+
font-size: 12px; /* 修复之前的语法错误,添加单位px */
|
|
58
|
+
color: #717F94;
|
|
59
|
+
}
|
|
60
|
+
.uploadName .sizeText .errorText {
|
|
61
|
+
color: #f33;
|
|
62
|
+
font-family: "PingFang SC";
|
|
63
|
+
font-size: 12px;
|
|
64
|
+
font-style: normal;
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
line-height: normal;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.uploadStatus,
|
|
70
|
+
.uploadLoading {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
margin-left: 8px;
|
|
74
|
+
font-size: 14px;
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
color: #717F94;
|
|
77
|
+
}
|
|
78
|
+
.uploadStatus img,
|
|
79
|
+
.uploadLoading img {
|
|
80
|
+
width: 18px;
|
|
81
|
+
height: 18px;
|
|
82
|
+
object-fit: cover;
|
|
83
|
+
margin-left: 5px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.delIcon {
|
|
87
|
+
position: absolute;
|
|
88
|
+
right: -7px;
|
|
89
|
+
top: -5px;
|
|
90
|
+
width: 14px;
|
|
91
|
+
height: 14px;
|
|
92
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
93
|
+
color: white;
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
background-color: white;
|
|
100
|
+
}
|
|
101
|
+
.delIcon img {
|
|
102
|
+
width: 100%;
|
|
103
|
+
height: 100%;
|
|
104
|
+
object-fit: cover;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.uploadError {
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
color: #4086ff;
|
|
110
|
+
text-align: right;
|
|
111
|
+
font-family: "PingFang SC";
|
|
112
|
+
font-size: 14px;
|
|
113
|
+
font-style: normal;
|
|
114
|
+
font-weight: 400;
|
|
115
|
+
line-height: normal;
|
|
116
|
+
margin-left: 20px;
|
|
117
|
+
display: flex;
|
|
118
|
+
align-items: center;
|
|
119
|
+
}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
3
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
4
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
import React from 'react';
|
|
12
|
+
export default function VoiceBars(_ref) {
|
|
13
|
+
var _ref$parentWidth = _ref.parentWidth,
|
|
14
|
+
parentWidth = _ref$parentWidth === void 0 ? undefined : _ref$parentWidth;
|
|
15
|
+
var containerWidth = parentWidth !== null && parentWidth !== void 0 ? parentWidth : 0;
|
|
16
|
+
var total = containerWidth > 0 ? Math.floor(containerWidth / 12) : 20;
|
|
17
|
+
var _React$useState = React.useState(function () {
|
|
18
|
+
return Array(total).fill(8);
|
|
19
|
+
}),
|
|
20
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
21
|
+
volumes = _React$useState2[0],
|
|
22
|
+
setVolumes = _React$useState2[1];
|
|
23
|
+
var totalRef = React.useRef(total);
|
|
24
|
+
React.useEffect(function () {
|
|
25
|
+
totalRef.current = total;
|
|
26
|
+
setVolumes(function (prev) {
|
|
27
|
+
return prev.length === total ? prev : Array(total).fill(8);
|
|
28
|
+
});
|
|
29
|
+
}, [total]);
|
|
30
|
+
React.useEffect(function () {
|
|
31
|
+
var stream = null;
|
|
32
|
+
var audioContext = null;
|
|
33
|
+
var animationFrameId = null;
|
|
34
|
+
var gainNode = null;
|
|
35
|
+
var stopped = false;
|
|
36
|
+
var lastUpdateTime = 0;
|
|
37
|
+
var removeResumeListener = null;
|
|
38
|
+
var start = /*#__PURE__*/function () {
|
|
39
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
40
|
+
var _navigator$mediaDevic, AudioContextCtor, tryResume, source, analyser, dataArray, loop;
|
|
41
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
42
|
+
while (1) switch (_context.prev = _context.next) {
|
|
43
|
+
case 0:
|
|
44
|
+
_context.prev = 0;
|
|
45
|
+
if ((_navigator$mediaDevic = navigator.mediaDevices) !== null && _navigator$mediaDevic !== void 0 && _navigator$mediaDevic.getUserMedia) {
|
|
46
|
+
_context.next = 3;
|
|
47
|
+
break;
|
|
48
|
+
}
|
|
49
|
+
return _context.abrupt("return");
|
|
50
|
+
case 3:
|
|
51
|
+
_context.next = 5;
|
|
52
|
+
return navigator.mediaDevices.getUserMedia({
|
|
53
|
+
audio: {
|
|
54
|
+
echoCancellation: true,
|
|
55
|
+
noiseSuppression: true,
|
|
56
|
+
autoGainControl: true
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
case 5:
|
|
60
|
+
stream = _context.sent;
|
|
61
|
+
AudioContextCtor = window.AudioContext || window.webkitAudioContext;
|
|
62
|
+
if (AudioContextCtor) {
|
|
63
|
+
_context.next = 9;
|
|
64
|
+
break;
|
|
65
|
+
}
|
|
66
|
+
return _context.abrupt("return");
|
|
67
|
+
case 9:
|
|
68
|
+
audioContext = new AudioContextCtor();
|
|
69
|
+
tryResume = function tryResume() {
|
|
70
|
+
if (audioContext && audioContext.state === 'suspended') {
|
|
71
|
+
audioContext.resume().catch(function () {});
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
tryResume();
|
|
75
|
+
window.addEventListener('pointerdown', tryResume);
|
|
76
|
+
source = audioContext.createMediaStreamSource(stream);
|
|
77
|
+
analyser = audioContext.createAnalyser();
|
|
78
|
+
analyser.fftSize = 1024;
|
|
79
|
+
analyser.smoothingTimeConstant = 0.85;
|
|
80
|
+
dataArray = new Uint8Array(analyser.frequencyBinCount);
|
|
81
|
+
gainNode = audioContext.createGain();
|
|
82
|
+
gainNode.gain.value = 0;
|
|
83
|
+
source.connect(analyser);
|
|
84
|
+
analyser.connect(gainNode);
|
|
85
|
+
gainNode.connect(audioContext.destination);
|
|
86
|
+
loop = function loop(t) {
|
|
87
|
+
if (stopped) return;
|
|
88
|
+
if (t - lastUpdateTime >= 33) {
|
|
89
|
+
analyser.getByteFrequencyData(dataArray);
|
|
90
|
+
var sum = 0;
|
|
91
|
+
for (var i = 0; i < dataArray.length; i++) {
|
|
92
|
+
sum += dataArray[i];
|
|
93
|
+
}
|
|
94
|
+
var avg = sum / dataArray.length;
|
|
95
|
+
var level = Math.min(1, Math.max(0, (avg - 10) / 70));
|
|
96
|
+
var count = totalRef.current;
|
|
97
|
+
var baseHeight = 8;
|
|
98
|
+
var maxExtra = 28;
|
|
99
|
+
var newBars = Array(count).fill(0).map(function (_, i) {
|
|
100
|
+
var phase = t / 180 + i * 0.9;
|
|
101
|
+
var shape = 0.25 + 0.75 * Math.abs(Math.sin(phase));
|
|
102
|
+
return baseHeight + maxExtra * level * shape;
|
|
103
|
+
});
|
|
104
|
+
setVolumes(newBars);
|
|
105
|
+
lastUpdateTime = t;
|
|
106
|
+
}
|
|
107
|
+
animationFrameId = requestAnimationFrame(loop);
|
|
108
|
+
};
|
|
109
|
+
animationFrameId = requestAnimationFrame(loop);
|
|
110
|
+
return _context.abrupt("return", function () {
|
|
111
|
+
window.removeEventListener('pointerdown', tryResume);
|
|
112
|
+
});
|
|
113
|
+
case 28:
|
|
114
|
+
_context.prev = 28;
|
|
115
|
+
_context.t0 = _context["catch"](0);
|
|
116
|
+
return _context.abrupt("return");
|
|
117
|
+
case 31:
|
|
118
|
+
case "end":
|
|
119
|
+
return _context.stop();
|
|
120
|
+
}
|
|
121
|
+
}, _callee, null, [[0, 28]]);
|
|
122
|
+
}));
|
|
123
|
+
return function start() {
|
|
124
|
+
return _ref2.apply(this, arguments);
|
|
125
|
+
};
|
|
126
|
+
}();
|
|
127
|
+
start().then(function (cleanup) {
|
|
128
|
+
if (typeof cleanup === 'function') {
|
|
129
|
+
removeResumeListener = cleanup;
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
return function () {
|
|
133
|
+
var _removeResumeListener;
|
|
134
|
+
stopped = true;
|
|
135
|
+
if (animationFrameId !== null) {
|
|
136
|
+
cancelAnimationFrame(animationFrameId);
|
|
137
|
+
}
|
|
138
|
+
(_removeResumeListener = removeResumeListener) === null || _removeResumeListener === void 0 || _removeResumeListener();
|
|
139
|
+
if (stream) {
|
|
140
|
+
stream.getTracks().forEach(function (track) {
|
|
141
|
+
return track.stop();
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
if (audioContext) {
|
|
145
|
+
audioContext.close();
|
|
146
|
+
}
|
|
147
|
+
if (gainNode) {
|
|
148
|
+
try {
|
|
149
|
+
gainNode.disconnect();
|
|
150
|
+
} catch (_unused2) {}
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
}, []);
|
|
154
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
155
|
+
style: {
|
|
156
|
+
display: 'flex',
|
|
157
|
+
alignItems: 'center',
|
|
158
|
+
justifyContent: 'center',
|
|
159
|
+
height: 40,
|
|
160
|
+
gap: 6
|
|
161
|
+
}
|
|
162
|
+
}, volumes.map(function (h, i) {
|
|
163
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
164
|
+
key: i,
|
|
165
|
+
style: {
|
|
166
|
+
width: 6,
|
|
167
|
+
height: h,
|
|
168
|
+
background: '#4f8cff',
|
|
169
|
+
borderRadius: 4,
|
|
170
|
+
transition: 'height 0.1s ease-out'
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
})));
|
|
174
|
+
}
|