feat(components): 在图片组件中添加长按显示菜单功能

This commit is contained in:
2026-05-07 15:12:59 +08:00
parent 2f24661cd9
commit d113d6125b
125 changed files with 622 additions and 368 deletions

View File

@@ -18,8 +18,8 @@
<!-- 消息列表 -->
<view
v-for="(message, index) in messages.filter(msg => msg.content && msg.content.trim() !== '')"
:key="`msg-${message.id || message.timestamp}-${index}`"
:id="`msg-${message.id || message.timestamp}-${index}`"
:key="getMessageKey(message, index)"
:id="getMessageKey(message, index)"
class="message-item"
:class="[message.role, { 'first-message': index === 0 }]">
@@ -27,7 +27,7 @@
<view v-if="message.role === 'user'" class="user-message">
<view class="avatar" @tap="openAvatarSelector">
<!-- 绑定本地用户头像,支持实时更新 -->
<image :src="localUserAvatar" mode="aspectFill" />
<image :src="localUserAvatar" mode="aspectFill" show-menu-by-longpress/>
</view>
<view class="message-content">
<!-- 新增:显示用户昵称 -->
@@ -54,7 +54,7 @@
:src="aiAvatarUrl"
mode="aspectFill"
@error="handleAvatarError"
/>
show-menu-by-longpress/>
<text v-else class="avatar-emoji">🤖</text>
</view>
<view class="message-content">
@@ -148,7 +148,7 @@
<view v-else-if="message.type === 'link'" class="link-content">
<view class="link-card" @click="openLink(message)">
<view class="link-image" v-if="message.image">
<image :src="message.image" mode="aspectFill" />
<image :src="message.image" mode="aspectFill" show-menu-by-longpress/>
</view>
<view class="link-info">
<text class="link-title">{{ message.title }}</text>
@@ -361,7 +361,7 @@
<view class="avatar-selector-content">
<!-- 预览当前头像 -->
<view class="current-avatar-preview">
<image :src="localUserAvatar" mode="aspectFill" />
<image :src="localUserAvatar" mode="aspectFill" show-menu-by-longpress/>
</view>
<view class="avatar-selector-actions">
<button class="avatar-select-action" @click="chooseAvatarFromAlbum">
@@ -590,6 +590,12 @@ export default {
}
},
methods: {
// 生成消息的唯一 key(兼容非 H5 平台)
getMessageKey(message, index) {
const id = message.id || message.timestamp || index;
return 'msg-' + id + '-' + index;
},
// 更新键盘高度
updateKeyboardHeight(height) {
this.keyboardHeight = height;