github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-16 14:12:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化发送语音效果

Browse Source
This commit is contained in:
kuaifan 2025-03-09 19:54:09 +08:00
parent 0ff1ac7743
commit 4521cea3b4
4 changed files with 97 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/assets/js/pages/manage/components/ChatInput/index.vue
View File

@ -172,7 +172,18 @@
</ul> </ul>
<!-- 录音效果 --> <!-- 录音效果 -->
<div class="chat-record"><div ref="recwave"></div></div> <div class="chat-record" :class="recordClassName">
<div class="record-convert">
<i class="taskfont">&#xe628;</i>
</div>
<div class="record-recwave">
<div ref="recwave"></div>
</div>
<div class="record-remove">
<i class="taskfont">&#xe787;</i>
<i class="taskfont">&#xe702;</i>
</div>
</div>
<!-- 覆盖层 --> <!-- 覆盖层 -->
<div class="chat-cover" @click.stop="onClickCover"></div> <div class="chat-cover" @click.stop="onClickCover"></div>

20
resources/assets/sass/dark.scss vendored
View File

@ -567,6 +567,26 @@ body.dark-mode-reverse {
} }
} }
} }
.chat-record {
&.convert {
.record-convert {
background-color: #2db7f5;
color: #000000;
}
}
&.cancel {
.record-remove {
background-color: #ff6565;
color: #000000;
}
}
.record-convert,
.record-remove {
color: #000000;
background-color: #c7c7c7;
}
}
} }
} }

62
resources/assets/sass/pages/components/chat-input.scss vendored
View File

@ -367,19 +367,75 @@
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; align-items: center;
justify-content: flex-end;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
&.convert {
.record-convert {
background-color: #2db7f5;
color: #ffffff;
}
}
&.cancel {
.record-remove {
background-color: #ff6565;
color: #ffffff;
}
}
.record-convert,
.record-remove {
color: #ffffff;
background-color: #a7a7a7;
}
.record-convert {
margin-right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
> i {
font-size: 18px;
}
}
.record-recwave {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
> div { > div {
flex: 1; flex: 1;
width: 100%; width: 100%;
max-height: 46px; max-height: 46px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: center;
}
}
.record-remove {
position: absolute;
bottom: 118px;
width: 34px;
right: 9px;
z-index: 3;
padding: 10px 0;
border-radius: 16px;
display: flex;
gap: 4px;
justify-content: center;
align-items: center;
flex-direction: column;
> i {
font-size: 18px;
&:last-child {
font-size: 12px;
opacity: 0.5;
}
}
} }
} }

5
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -2846,9 +2846,10 @@ body.window-portrait {
.chat-input-wrapper { .chat-input-wrapper {
background-color: #ffffff; background-color: #ffffff;
.chat-record { .chat-record {
margin-left: -10px;
width: calc(100% + 20px);
background-color: #f8f8f8; background-color: #f8f8f8;
.record-convert {
margin-left: 8px;
}
} }
} }
.chat-emoji-wrapper { .chat-emoji-wrapper {