github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-23 09:20:44 +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

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

@ -206,14 +206,16 @@
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-content"> <div class="convert-body">
<Input <div class="convert-content">
type="textarea" <Input
class="convert-result" type="textarea"
v-model="recordConvertResult" class="convert-result"
:rows="1" v-model="recordConvertResult"
:autosize="{minRows: 1, maxRows: 5}" :rows="1"
:placeholder="recordConvertStatus === 0 ? '...' : ''"/> :autosize="{minRows: 1, maxRows: 5}"
:placeholder="recordConvertStatus === 0 ? '...' : ''"/>
</div>
</div> </div>
<ul class="convert-footer"> <ul class="convert-footer">
<li @click="recordConvertIng=false"> <li @click="recordConvertIng=false">

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 {

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

@ -744,54 +744,64 @@
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-content { .convert-body {
position: relative; flex: 1;
background-color: $primary-color; width: 100%;
color: #000000; display: flex;
width: 88%; flex-direction: column;
padding: 18px; justify-content: flex-end;
border-radius: 14px; align-items: center;
transform: translateY(-50%); .convert-content {
&:before { position: relative;
content: ""; background-color: $primary-color;
position: absolute; color: #000000;
bottom: -15px; width: 88%;
right: 12%; padding: 18px;
transform: translateX(-50%); border-radius: 14px;
border-width: 8px; transform: translateY(24px);
border-style: solid; &:before {
border-color: $primary-color transparent transparent transparent; content: "";
} position: absolute;
.convert-result { bottom: -15px;
.ivu-input { right: 12%;
font-size: 18px; transform: translateX(-50%);
border: 0; border-width: 8px;
box-shadow: none; border-style: solid;
background: transparent; border-color: $primary-color transparent transparent transparent;
color: #000000; }
border-radius: 0; .convert-result {
outline: none; .ivu-input {
resize: none; font-size: 18px;
&::placeholder { border: 0;
color: rgba(0, 0, 0, 0.7); box-shadow: none;
background: transparent;
color: #000000;
border-radius: 0;
outline: none;
resize: none;
&::placeholder {
color: rgba(0, 0, 0, 0.7);
}
} }
} }
} }
} }
.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;