github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-23 17:30:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 新增录音转文字

Browse Source
This commit is contained in:
kuaifan 2025-03-05 01:52:37 +08:00
parent 7b1d352c95
commit 567c75830a
3 changed files with 74 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,6 +206,7 @@
class="chat-input-convert-transfer" class="chat-input-convert-transfer"
:style="recordTransferStyle"> :style="recordTransferStyle">
<div class="convert-box"> <div class="convert-box">
<div class="convert-body">
<div class="convert-content"> <div class="convert-content">
<Input <Input
type="textarea" type="textarea"
@ -215,6 +216,7 @@
:autosize="{minRows: 1, maxRows: 5}" :autosize="{minRows: 1, maxRows: 5}"
:placeholder="recordConvertStatus === 0 ? '...' : ''"/> :placeholder="recordConvertStatus === 0 ? '...' : ''"/>
</div> </div>
</div>
<ul class="convert-footer"> <ul class="convert-footer">
<li @click="recordConvertIng=false"> <li @click="recordConvertIng=false">
<i class="taskfont">&#xe637;</i> <i class="taskfont">&#xe637;</i>

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

@ -577,6 +577,24 @@ body.dark-mode-reverse {
} }
} }
.chat-input-convert-transfer {
background-color: rgba(255, 255, 255, 0.9);
.convert-box {
.convert-footer {
color: #000000;
> li {
> i {
&.send,
&.error {
color: #0a7600;
background: #000000;
}
}
}
}
}
}
.chat-emoji-wrapper { .chat-emoji-wrapper {
.chat-emoji-box { .chat-emoji-box {
ul { ul {

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

@ -744,15 +744,22 @@
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
flex-direction: column; flex-direction: column;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(50, 50, 50, 0.9);
.convert-box { .convert-box {
width: 100%; width: 100%;
height: 100%;
max-width: 500px; max-width: 500px;
height: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.convert-body {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
.convert-content { .convert-content {
position: relative; position: relative;
background-color: $primary-color; background-color: $primary-color;
@ -760,7 +767,7 @@
width: 88%; width: 88%;
padding: 18px; padding: 18px;
border-radius: 14px; border-radius: 14px;
transform: translateY(-50%); transform: translateY(24px);
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -787,11 +794,14 @@
} }
} }
} }
}
.convert-footer { .convert-footer {
flex: 1;
width: 88%; width: 88%;
display: flex; display: flex;
align-items: flex-end;
justify-content: space-around; justify-content: space-around;
margin-bottom: 64px; color: #ffffff;
> li { > li {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -802,6 +812,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 64px;
> i { > i {
font-size: 18px; font-size: 18px;
&.voice { &.voice {
@ -816,8 +827,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #0a7600; color: #3fc433;
background: #000000; background: #ffffff;
font-weight: 600; font-weight: 600;
.common-loading { .common-loading {
width: 26px; width: 26px;