This commit is contained in:
Your Name
2026-06-09 09:42:29 +08:00
parent 0be6d06544
commit bd7002e176
2 changed files with 52 additions and 8 deletions
+24 -4
View File
@@ -193,19 +193,26 @@
<view class="st-float-close" @click="floatAskClosed = true"> <view class="st-float-close" @click="floatAskClosed = true">
<text class="st-float-close-icon">×</text> <text class="st-float-close-icon">×</text>
</view> </view>
<view class="st-float-inner"> <view class="st-float-inner" :class="{ 'is-expanded': dietAiAskExpanded }">
<view class="st-float-icon"> <view class="st-float-icon">
<TongjiIcon name="sparkles" size="sm" color="#006c49" /> <TongjiIcon name="sparkles" size="sm" color="#006c49" />
</view> </view>
<input <textarea
class="st-float-input" class="st-float-input"
type="text"
:value="dietAiAskText" :value="dietAiAskText"
placeholder="长按麦克风说话,或输入文字咨询 AI..." placeholder="输入或语音咨询 AI"
placeholder-class="st-float-placeholder" placeholder-class="st-float-placeholder"
:maxlength="-1"
auto-height
:show-confirm-bar="false"
:disable-default-padding="true"
:cursor-spacing="24"
confirm-type="send" confirm-type="send"
:confirm-hold="false"
@input="onDietAiAskInput" @input="onDietAiAskInput"
@confirm="askDietAiFood" @confirm="askDietAiFood"
@focus="onDietAiAskFocus"
@blur="onDietAiAskBlur"
/> />
<view <view
class="st-float-mic" class="st-float-mic"
@@ -519,6 +526,19 @@ const {
/** 底部 AI 浮动卡片是否被用户收起 */ /** 底部 AI 浮动卡片是否被用户收起 */
const floatAskClosed = ref(false) const floatAskClosed = ref(false)
/** AI 输入框是否聚焦:聚焦时输入框变大 */
const dietAiAskFocused = ref(false)
function onDietAiAskFocus() {
dietAiAskFocused.value = true
}
function onDietAiAskBlur() {
dietAiAskFocused.value = false
}
/** 聚焦或已有内容时展开为多行输入(内容多则自动增高) */
const dietAiAskExpanded = computed(
() => dietAiAskFocused.value || String(dietAiAskText.value || '').length > 0
)
/** 键盘高度(px):录入弹窗据此整体上移,避免输入框被键盘遮挡 */ /** 键盘高度(px):录入弹窗据此整体上移,避免输入框被键盘遮挡 */
const keyboardHeight = ref(0) const keyboardHeight = ref(0)
function onKeyboardHeightChange(res) { function onKeyboardHeightChange(res) {
@@ -740,13 +740,22 @@
.weekly-page .st-float-inner { .weekly-page .st-float-inner {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24rpx; gap: 16rpx;
padding: 16rpx 16rpx 16rpx 40rpx; padding: 16rpx 16rpx 16rpx 28rpx;
border-radius: 999rpx; border-radius: 999rpx;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
border: 1rpx solid rgba(0, 108, 73, 0.1); border: 1rpx solid rgba(0, 108, 73, 0.1);
box-shadow: var(--st-shadow-float); box-shadow: var(--st-shadow-float);
transition: border-radius 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}
/* 聚焦/有内容时展开:底部对齐让输入框向上增高,圆角收敛为圆角矩形 */
.weekly-page .st-float-inner.is-expanded {
align-items: flex-end;
border-radius: 32rpx;
padding: 18rpx 16rpx 18rpx 32rpx;
border-color: rgba(0, 108, 73, 0.28);
} }
.weekly-page .st-float-icon { .weekly-page .st-float-icon {
@@ -763,15 +772,30 @@
.weekly-page .st-float-input { .weekly-page .st-float-input {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
height: 64rpx; width: 100%;
min-height: 64rpx;
max-height: 240rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx;
color: var(--on-surface); color: var(--on-surface);
background: transparent; background: transparent;
padding: 12rpx 0;
box-sizing: border-box;
transition: min-height 0.2s ease;
}
/* 聚焦时输入框变大;内容超长时由 auto-height 继续向上增高,超过上限可滚动 */
.weekly-page .st-float-inner.is-expanded .st-float-input {
min-height: 104rpx;
} }
.weekly-page .st-float-placeholder { .weekly-page .st-float-placeholder {
color: rgba(60, 74, 66, 0.6); color: rgba(60, 74, 66, 0.6);
font-size: 28rpx; font-size: 26rpx;
line-height: 40rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.weekly-page .st-float-mic { .weekly-page .st-float-mic {