Skip to content

Commit 033802b

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: Mobile voice conversation new UI
1 parent 08f2949 commit 033802b

File tree

56 files changed

+1091
-190
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

+1091
-190
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: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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">{{ '00:06' }}</el-text>
19+
<span class="lighter" v-else>
20+
{{ message }}
21+
</span>
22+
</p>
23+
<div class="close">
24+
<el-icon><Close /></el-icon>
25+
</div>
26+
<p class="lighter" :style="{ visibility: isTouching ? 'visible' : 'hidden' }">
27+
{{ message }}
28+
</p>
29+
<div class="speech-img flex-center border-r-4 mt-16">
30+
<img v-if="isTouching" src="@/assets/acoustic-color.svg" alt="" />
31+
<img v-else src="@/assets/acoustic.svg" alt="" />
32+
</div>
33+
</el-card>
34+
</transition>
35+
</div>
36+
</template>
37+
38+
<script setup lang="ts">
39+
import { ref } from 'vue'
40+
// 移动端语音
41+
const startY = ref(0)
42+
const isTouching = ref(false)
43+
const dialogVisible = ref(false)
44+
const message = ref('按住说话')
45+
function onTouchStart(event: any) {
46+
isTouching.value = true
47+
startY.value = event.touches[0].clientY
48+
dialogVisible.value = true
49+
message.value = '松开发送，上滑取消'
50+
}
51+
function onTouchMove(event: any) {
52+
if (!isTouching.value) return
53+
// 阻止默认滚动行为
54+
event.preventDefault()
55+
const currentY = event.touches[0].clientY
56+
const deltaY = currentY - startY.value
57+
// 判断是否上滑
58+
if (deltaY < -50) {
59+
// -50 是一个阈值，可以根据需要调整
60+
message.value = '松开取消发送'
61+
isTouching.value = false
62+
}
63+
}
64+
function onTouchEnd() {
65+
if (isTouching.value) {
66+
message.value = '发送成功'
67+
} else {
68+
message.value = '已取消'
69+
}
70+
isTouching.value = false
71+
dialogVisible.value = false
72+
}
73+
</script>
74+
75+
<style lang="scss" scoped>
76+
.custom-speech-card {
77+
position: fixed;
78+
bottom: 10px;
79+
left: 50%; /* 水平居中 */
80+
transform: translateX(-50%);
81+
width: 92%;
82+
background: #ffffff;
83+
border: 1px solid #ffffff;
84+
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
85+
z-index: 999;
86+
text-align: center;
87+
color: var(--app-text-color-secondary);
88+
user-select: none; /* 禁止选中 */
89+
-webkit-user-select: none; /* Safari */
90+
-moz-user-select: none; /* 老版Firefox */
91+
-ms-user-select: none; /* IE 10及以下 */
92+
.close {
93+
box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
94+
border: 1px solid rgba(222, 224, 227, 1);
95+
background: rgba(255, 255, 255, 1);
96+
border-radius: 100px;
97+
display: inline-block;
98+
width: 43px;
99+
height: 43px;
100+
line-height: 50px;
101+
font-size: 1.8rem;
102+
margin: 20px 0;
103+
}
104+
.speech-img {
105+
text-align: center;
106+
background: #ebf1ff;
107+
padding: 8px;
108+
img {
109+
height: 25px;
110+
}
111+
}
112+
&.active {
113+
.close {
114+
background: #f54a45;
115+
color: #ffffff;
116+
width: 50px;
117+
height: 50px;
118+
line-height: 57px;
119+
font-size: 2rem;
120+
}
121+
.speech-img {
122+
background: #eff0f1;
123+
}
124+
}
125+
}
126+
</style>

0 commit comments

Comments
 (0)