felix/miniprogram-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: felix:dc65893293b8703ff429dd3625e240548adedcf5
Branches Tags
felix:main felix:lisa-feat
...
compare: felix:5bab1d76fcfaaa59cc6065b72151554f1a9b75ba
Branches Tags
felix:main felix:lisa-feat

2 Commits
dc65893293 ... 5bab1d76fc

Author SHA1 Message Date
Felix
5bab1d76fc fix code 2026-01-27 19:57:56 +08:00
Felix
2a3d47e3c9 add microphone bar 2026-01-27 11:25:10 +08:00
3 changed files with 157 additions and 11 deletions
Expand all files Collapse all files

16
miniprogram/pages/qa_exercise/qa_exercise.ts
View File

@@ -136,6 +136,7 @@ interface IData {
chatSuggestions: Array<{ label: string; text: string }>
inputBottom: number
isRecording: boolean
isMicrophoneMode: boolean
}
interface IPageInstance {
@@ -233,6 +234,8 @@ interface IPageInstance {
onSendMessage: (e: any) => void
onChatInput: (e: any) => void
onChatBlur: (e: any) => void
switchToVoiceMode: () => void
switchToTextMode: () => void
onChatCloseTap: (e: any) => void
updateConversationMessages: (detail: any, lang: string, append?: boolean) => void
showChatInput: () => void
@@ -264,6 +267,7 @@ Page<IData, IPageInstance>({
clozeSentenceTokens: [],
modeAnim: '',
isChatInputVisible: false,
isMicrophoneMode: false,
scrollIntoView: '',
isModeSwitching: false,
progressText: '',
@@ -2087,7 +2091,9 @@ Page<IData, IPageInstance>({
onChatBlur(e: any) {
if (this.isSuggestionTouching) return
this.stopSuggestionTimer()
this.setData({ isChatInputVisible: false, scrollIntoView: '', chatPlaceholder: '请输入...' })
// 移除自动隐藏逻辑，保留输入框
// this.setData({ isChatInputVisible: false, scrollIntoView: '', chatPlaceholder: '请输入...' })
this.setData({ scrollIntoView: '', chatPlaceholder: '请输入...' })
if (this.placeholderTimer) {
clearTimeout(this.placeholderTimer)
this.placeholderTimer = undefined
@@ -2097,6 +2103,14 @@ Page<IData, IPageInstance>({
}, 300)
},
switchToVoiceMode() {
this.setData({ isMicrophoneMode: true, isChatInputVisible: true })
},
switchToTextMode() {
this.setData({ isMicrophoneMode: false, isChatInputVisible: true })
},
showChatInput() {
if (!this.data.conversationLatestSession || this.data.conversationViewMode === 'setup') {
return

48
miniprogram/pages/qa_exercise/qa_exercise.wxml
View File

@@ -14,7 +14,7 @@
<view class="type-container" wx:if="{{fixedMode}}">
<view class="type-item {{fixedMode === 'cloze' ? 'active' : ''}}" hover-class="type-item-hover" bindtap="switchMode" data-mode="cloze">填空</view>
<view class="type-item {{fixedMode === 'choice' ? 'active' : ''}}" hover-class="type-item-hover" bindtap="switchMode" data-mode="choice">问答</view>
<view class="type-item {{fixedMode === 'variation' ? 'active' : ''}}" hover-class="type-item-hover" bindtap="switchMode" data-mode="variation">识图</view>
<!-- <view class="type-item {{fixedMode === 'variation' ? 'active' : ''}}" hover-class="type-item-hover" bindtap="switchMode" data-mode="variation">识图</view> -->
<view class="type-item {{fixedMode === 'conversation' ? 'active' : ''}}" hover-class="type-item-hover" bindtap="switchMode" data-mode="conversation">对话</view>
</view>
@@ -24,7 +24,7 @@
<view class="process-dot {{processDotClasses[index]}} {{index === currentIndex ? 'current' : ''}}"></view>
</block>
</view>
<view class="question-scroll-wrapper {{questionMode === 'conversation' && conversationViewMode === 'chat' && isChatInputVisible ? 'chat-input-mode-scroll' : 'chat-mode-scroll'}}">
<view class="question-scroll-wrapper {{questionMode === 'conversation' && conversationViewMode === 'chat' && isChatInputVisible && !isMicrophoneMode ? 'chat-input-mode-scroll' : 'chat-mode-scroll'}}">
<scroll-view class="inner-scroll" scroll-y >
<view class="image-card" wx:if="{{questionMode !== 'variation'}}">
<image wx:if="{{imageLocalUrl}}" class="image" src="{{imageLocalUrl}}" mode="aspectFill" bindtap="previewImage" bindload="onImageLoad" binderror="onImageError"></image>
@@ -313,9 +313,24 @@
</scroll-view>
</t-drawer>
<view wx:if="{{isRecording}}" class="microphone-mask">
<view class="microphone-bars">
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
</view>
</view>
<view class="chat-sender-wrapper {{isChatInputVisible ? 'show' : ''}}" style="bottom: {{inputBottom}}px" wx:if="{{questionMode === 'conversation' && conversationViewMode === 'chat'}}">
<view class="suggestion-bar {{showChatSuggestions ? 'show' : ''}}"
wx:if="{{chatSuggestions.length > 0}}"
wx:if="{{chatSuggestions.length > 0 && !isMicrophoneMode}}"
bind:touchstart="handleSuggestionTouchStart"
bind:touchend="handleSuggestionTouchEnd">
<scroll-view scroll-x class="suggestion-scroll" enable-flex>
@@ -325,6 +340,7 @@
</scroll-view>
</view>
<t-chat-sender
wx:if="{{!isMicrophoneMode}}"
value="{{chatInputValue}}"
placeholder="{{chatPlaceholder}}"
loading="{{replyLoading}}"
@@ -335,23 +351,39 @@
bind:blur="onChatBlur"
>
<view slot="footer-prefix" class="footer-prefix">
<view class="chat-icon-block" bind:tap="onChatCloseTap" style="margin-right: 16rpx;">
<view class="chat-icon-block" bind:tap="onChatCloseTap">
<t-icon name="close-circle" size="64rpx" color="#dcdcdc"/>
</view>
<view class="chat-icon-block" bind:touchstart="handleRecordStart" bind:touchend="handleRecordEnd">
<t-icon name="microphone-1" size="64rpx" color="{{isRecording ? '#0052d9' : '#dcdcdc'}}"/>
</view>
<!-- <view class="chat-icon-block" bind:tap="switchToVoiceMode">
<t-icon name="microphone-1" size="64rpx" color="#dcdcdc"/>
</view> -->
</view>
</t-chat-sender>
<view class="voice-mode-panel" wx:if="{{isMicrophoneMode}}">
<view class="voice-panel-controls">
<view class="chat-icon-block" bind:tap="switchToTextMode">
<t-icon name="keyboard" size="64rpx" color="#666"/>
</view>
<view class="microphone-btn {{isRecording ? 'recording' : ''}}"
bind:touchstart="handleRecordStart"
bind:touchend="handleRecordEnd">
{{isRecording ? '松开发送' : '按住说话'}}
</view>
<view class="chat-icon-block" bind:tap="onChatCloseTap">
<t-icon name="close-circle" size="64rpx" color="#666"/>
</view>
</view>
</view>
</view>
<view class="bottom-bar {{contentVisible && !isChatInputVisible ? 'show' : ''}}" wx:if="{{questionMode === 'conversation'}}">
<view class="bottom-btn bottom-button-img-wrap" bind:tap="toggleConversationSceneLang">
<t-icon name="translate" class="trans-button left-half {{conversationSceneLang === 'en' ? 'trans-active' : 'trans-deactive'}}" size="48rpx" />
<t-icon name="translate" class="trans-button right-half {{conversationSceneLang === 'zh' ? 'trans-active' : 'trans-deactive'}}" size="48rpx" />
</view>
<t-icon name="microphone-1" class="bottom-btn {{conversationLatestSession && conversationViewMode !== 'setup' ? '' : 'disabled'}}" size="48rpx" bind:tap="switchToVoiceMode" />
<t-icon name="keyboard" class="bottom-btn {{conversationLatestSession && conversationViewMode !== 'setup' ? '' : 'disabled'}}" size="48rpx" bind:tap="showChatInput" />
<t-icon name="{{conversationLatestSession && conversationViewMode === 'chat' ? 'chat-bubble-add' : 'chat-bubble-1'}}" class="bottom-btn {{conversationLatestSession ? '' : 'disabled'}}" size="48rpx" bind:tap="toggleConversationView" />
<t-icon name="fact-check" class="bottom-btn {{resultDisplayed ? '' : 'disabled'}}" size="48rpx" bind:tap="" />
<!-- <t-icon name="fact-check" class="bottom-btn {{resultDisplayed ? '' : 'disabled'}}" size="48rpx" bind:tap="" /> -->
<t-icon name="chat-bubble-history" class="bottom-btn" size="48rpx" bind:tap="onHistoryTap" />
</view>

104
miniprogram/pages/qa_exercise/qa_exercise.wxss
View File

@@ -6,7 +6,31 @@
overflow: hidden;
}
.status-text { font-size: 28rpx; color: #666666; }
.page-loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 1000; }
.page-loading-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.microphone-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
}
.loading-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 16rpx; }
.container {
width: 100%;
@@ -864,4 +888,80 @@
.trans-button.trans-deactive {
color: #666;
}
}
.microphone-bars {
display: flex;
justify-content: center;
align-items: center;
}
.microphone-bar {
background: #0096fa;
bottom: 2rpx;
height: 60rpx;
width: 20rpx;
margin: 0px 8rpx;
border-radius: 10rpx;
animation: sound 0ms -600ms linear infinite alternate;
}
@keyframes sound {
0% {
opacity: .35;
height: 40rpx;
}
100% {
opacity: 1;
height: 140rpx;
}
}
.microphone-bar:nth-child(1) { left: 2rpx; animation-duration: 474ms; }
.microphone-bar:nth-child(2) { left: 30rpx; animation-duration: 433ms; }
.microphone-bar:nth-child(3) { left: 58rpx; animation-duration: 407ms; }
.microphone-bar:nth-child(4) { left: 86rpx; animation-duration: 458ms; }
.microphone-bar:nth-child(5) { left: 114rpx; animation-duration: 400ms; }
.microphone-bar:nth-child(6) { left: 142rpx; animation-duration: 427ms; }
.microphone-bar:nth-child(7) { left: 170rpx; animation-duration: 441ms; }
.microphone-bar:nth-child(8) { left: 198rpx; animation-duration: 419ms; }
.microphone-bar:nth-child(9) { left: 226rpx; animation-duration: 487ms; }
.microphone-bar:nth-child(10) { left: 254rpx; animation-duration: 442ms; }
.voice-mode-panel {
background: #fff;
padding: 24rpx;
border-top: 1rpx solid #eee;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
width: 100%;
box-sizing: border-box;
}
.voice-panel-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
gap: 32rpx;
}
.microphone-btn {
flex: 1;
height: 88rpx;
background: #f2f3f5;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 32rpx;
font-weight: 600;
transition: all 0.2s;
}
.microphone-btn:active, .microphone-btn.recording {
background: #e5e6eb;
}
.microphone-btn.recording {
background: #d54941;
color: #fff;
}