Skip to content

Commit 0eebbb0

Browse files
wangdan-fit2cloudwangdan-fit2cloud
authored
feat: Optimize the mobile voice interaction experience
* fix: Optimize small screen dialogue style * feat: Mobile voice conversation new UI * feat: Optimize the mobile voice interaction experience * feat: Optimize the mobile voice interaction experience
1 parent 2faabbe commit 0eebbb0

File tree

56 files changed

+564
-203
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+564
-203
lines changed

‎ui/public/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,
8+
viewport-fit=cover"
9+
/>
10+
<title>111</title>
11+
</head>
12+
<body style="margin: 0; padding: 0; height: 100vh">
13+
<script
14+
async
15+
defer
16+
src="http://localhost:3000/api/application/embed?protocol=http&host=localhost:3000&token=7ca95a6b12571284">
17+
</script>
18+
19+
</body>
20+
</html>

‎ui/src/assets/acoustic-color.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎ui/src/assets/acoustic.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎ui/src/components/ai-chat/KnowledgeSource.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const uniqueParagraphList = computed(() => {
112112
})
113113
</script>
114114
<style lang="scss" scoped>
115-
@media only screen and (max-width: 430px) {
115+
@media only screen and (max-width: 420px) {
116116
.chat-knowledge-source {
117117
.execution-details {
118118
display: block;

‎ui/src/components/ai-chat/component/answer-content/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<div class="item-content mb-16 lighter">
33
<template v-for="(answer_text, index) in answer_text_list" :key="index">
44
<div class="avatar">
5-
<img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
6-
<LogoIcon v-else height="32px" width="32px" />
5+
<img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
6+
<LogoIcon v-else height="28px" width="28px" />
77
</div>
88
<div class="content" @mouseup="openControl">
99
<el-card shadow="always" class="mb-8 border-r-8" style="--el-card-padding: 6px 16px">

‎ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<template>
2+
<div class="touch-chat w-full mr-8">
3+
<el-button
4+
text
5+
bg
6+
class="microphone-button w-full mt-8 ml-8 mb-8"
7+
style="font-size: 1rem; padding: 1.2rem 0 !important; background-color: #eff0f1"
8+
@touchstart="onTouchStart"
9+
@touchmove="onTouchMove"
10+
@touchend="onTouchEnd"
11+
>
12+
按住说话
13+
</el-button>
14+
<!-- 使用 custom-class 自定义样式 -->
15+
<transition name="el-fade-in-linear">
16+
<el-card class="custom-speech-card" :class="isTouching ? '' : 'active'" v-if="dialogVisible">
17+
<p>
18+
<el-text type="info" v-if="isTouching"
19+
>00:{{ props.time < 10 ? `0${props.time}` : props.time }}</el-text
20+
>
21+
<span class="lighter" v-else>
22+
{{ message }}
23+
</span>
24+
</p>
25+
<div class="close">
26+
<el-icon><Close /></el-icon>
27+
</div>
28+
<p class="lighter" :style="{ visibility: isTouching ? 'visible' : 'hidden' }">
29+
{{ message }}
30+
</p>
31+
<div class="speech-img flex-center border-r-4 mt-16">
32+
<img v-if="isTouching" src="@/assets/acoustic-color.svg" alt="" />
33+
<img v-else src="@/assets/acoustic.svg" alt="" />
34+
</div>
35+
</el-card>
36+
</transition>
37+
</div>
38+
</template>
39+
40+
<script setup lang="ts">
41+
import { el } from 'element-plus/es/locale'
42+
import { ref, watch } from 'vue'
43+
const props = defineProps({
44+
time: {
45+
type: Number,
46+
default: 0
47+
},
48+
start: {
49+
type: Boolean,
50+
default: false
51+
}
52+
})
53+
const emit = defineEmits(['TouchStart', 'TouchEnd'])
54+
// 移动端语音
55+
const startY = ref(0)
56+
const isTouching = ref(false)
57+
const dialogVisible = ref(false)
58+
const message = ref('按住说话')
59+
60+
watch(
61+
() => props.time,
62+
(val) => {
63+
if (val && val === 60) {
64+
dialogVisible.value = false
65+
emit('TouchEnd', isTouching.value)
66+
isTouching.value = false
67+
}
68+
}
69+
)
70+
watch(
71+
() => props.start,
72+
(val) => {
73+
if (val) {
74+
isTouching.value = true
75+
dialogVisible.value = true
76+
message.value = '松开发送，上滑取消'
77+
} else {
78+
dialogVisible.value = false
79+
isTouching.value = false
80+
}
81+
}
82+
)
83+
84+
function onTouchStart(event: any) {
85+
emit('TouchStart')
86+
startY.value = event.touches[0].clientY
87+
// 阻止默认滚动行为
88+
event.preventDefault()
89+
}
90+
function onTouchMove(event: any) {
91+
if (!isTouching.value) return
92+
// 阻止默认滚动行为
93+
event.preventDefault()
94+
const currentY = event.touches[0].clientY
95+
const deltaY = currentY - startY.value
96+
// 判断是否上滑
97+
if (deltaY < -50) {
98+
// -50 是一个阈值，可以根据需要调整
99+
message.value = '松开取消发送'
100+
isTouching.value = false
101+
}
102+
}
103+
function onTouchEnd() {
104+
emit('TouchEnd', isTouching.value)
105+
}
106+
</script>
107+
108+
<style lang="scss" scoped>
109+
.custom-speech-card {
110+
position: fixed;
111+
bottom: 10px;
112+
left: 50%; /* 水平居中 */
113+
transform: translateX(-50%);
114+
width: 92%;
115+
background: #ffffff;
116+
border: 1px solid #ffffff;
117+
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
118+
z-index: 999;
119+
text-align: center;
120+
color: var(--app-text-color-secondary);
121+
-webkit-touch-callout: none;
122+
-webkit-user-select: none;
123+
-khtml-user-select: none;
124+
-moz-user-select: none;
125+
-ms-user-select: none;
126+
user-select: none;
127+
.close {
128+
box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
129+
border: 1px solid rgba(222, 224, 227, 1);
130+
background: rgba(255, 255, 255, 1);
131+
border-radius: 100px;
132+
display: inline-block;
133+
width: 43px;
134+
height: 43px;
135+
line-height: 50px;
136+
font-size: 1.8rem;
137+
margin: 20px 0;
138+
}
139+
.speech-img {
140+
text-align: center;
141+
background: #ebf1ff;
142+
padding: 8px;
143+
img {
144+
height: 25px;
145+
}
146+
}
147+
&.active {
148+
.close {
149+
background: #f54a45;
150+
color: #ffffff;
151+
width: 50px;
152+
height: 50px;
153+
line-height: 57px;
154+
font-size: 2rem;
155+
}
156+
.speech-img {
157+
background: #eff0f1;
158+
}
159+
}
160+
}
161+
</style>

0 commit comments

Comments
 (0)