chore:用户可以自定义选择复制的文字

This commit is contained in:
2026-09-11 17:14:42 +08:00
parent 2daaa258a0
commit 4cb34bf28e
3 changed files with 29 additions and 429 deletions

View File

@@ -33,10 +33,6 @@ export const lang = {
noContentToCopy: 'No content to copy',
copySuccess: 'Copied',
copySelected: 'Copied selected content',
selectTextToCopy: 'Select text to copy',
selectedText: 'Selected',
copyAll: 'Copy all',
selectTextTip: 'Long press and drag the handles to choose any range',
copyFail: 'Copy failed',
copyFailWithReason: 'Copy failed: {reason}',
openingFile: 'Opening file...',

View File

@@ -33,10 +33,6 @@ export const lang = {
noContentToCopy: '无可复制的内容',
copySuccess: '已复制',
copySelected: '已复制选中内容',
selectTextToCopy: '选取文字复制',
selectedText: '已选文字',
copyAll: '复制全部',
selectTextTip: '长按文字拖动两端手柄,可自由选择复制范围',
copyFail: '复制失败',
copyFailWithReason: '复制失败:{reason}',
openingFile: '打开文件中...',

View File

@@ -37,18 +37,9 @@
<!-- 用户消息 (WorkBuddy 风格: 右对齐 + 浅灰气泡 + 头像在右) -->
<view v-if="message.role === 'user'" class="user-message">
<view class="message-content">
<view class="message-bubble"
@contextmenu.prevent="onMessageLongPress(message)"
@touchstart="onBubbleTouchStart($event, message)"
@touchmove="onBubbleTouchMove"
@touchend="onBubbleTouchEnd"
@touchcancel="onBubbleTouchEnd">
<view class="message-bubble">
<rich-text v-if="searchKeyword" :nodes="highlightContent(message.content)" class="message-rich-text" />
<text v-else class="message-text" selectable
@touchstart.stop
@touchmove.stop
@touchend.stop
@touchcancel.stop>{{ message.content }}</text>
<text v-else class="message-text" selectable>{{ message.content }}</text>
</view>
</view>
<view class="avatar" @tap="showAvatarSelector = true">
@@ -74,35 +65,30 @@
<text class="ai-nickname-text">{{ $lang('ai-chat.index.aiNickname') }}</text>
<text class="message-time">{{ formatTime(message.timestamp) }}</text>
</view>
<view class="message-bubble"
@contextmenu.prevent="onMessageLongPress(message)"
@touchstart="onBubbleTouchStart($event, message)"
@touchmove="onBubbleTouchMove"
@touchend="onBubbleTouchEnd"
@touchcancel="onBubbleTouchEnd">
<!-- 文本消息 -->
<view class="message-bubble">
<!-- 文本消息:小程序用 text selectable,H5 用可选择的 HTML 渲染 -->
<view v-if="message.type === 'text'" class="text-content">
<!-- 微信小程序: rich-text 不支持选中文本,降级为 text selectable 以支持长按选择部分文字 -->
<!-- #ifdef MP-WEIXIN -->
<text class="ai-message-text" selectable
@touchstart.stop
@touchmove.stop
@touchend.stop
@touchcancel.stop>{{ _stripMarkdown(message.content) }}</text>
<text class="ai-message-text" selectable>{{ _stripMarkdown(message.content) }}</text>
<!-- #endif -->
<!-- #ifdef H5 -->
<rich-text :nodes="getAIDisplayContent(message.content)" />
<view class="ai-message-text selectable-md" v-html="getAIDisplayContent(message.content)"></view>
<!-- #endif -->
</view>
<!-- Markdown文档 -->
<!-- Markdown文档:小程序用 text selectable,H5 用可选择的 HTML 渲染 -->
<view v-else-if="message.type === 'markdown'" class="markdown-content">
<view class="markdown-header">
<text class="iconfont icon-markdown"></text>
<text class="markdown-title"></text>
</view>
<view class="markdown-body">
<rich-text :nodes="getAIDisplayContent(message.content)" />
<!-- #ifdef MP-WEIXIN -->
<text class="ai-message-text" selectable>{{ _stripMarkdown(message.content) }}</text>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="selectable-md" v-html="getAIDisplayContent(message.content)"></view>
<!-- #endif -->
</view>
</view>
@@ -356,41 +342,6 @@
</view>
</view>
<!-- 选取文字复制弹窗:长按文字后可自由选取任意范围(含单个字符/标点)复制 -->
<view v-if="showSelectTextModal" class="select-text-popup">
<view class="select-text-mask" @click="closeSelectTextModal"></view>
<view class="select-text-panel">
<view class="select-text-header">
<text>{{ $lang('ai-chat.index.selectTextToCopy', '选取文字复制') }}</text>
<button class="close-btn" @click="closeSelectTextModal">
<text>×</text>
</button>
</view>
<view class="select-text-tip">{{ $lang('ai-chat.index.selectTextTip', '长按文字拖动两端手柄,可自由选择复制范围') }}</view>
<textarea
class="select-text-textarea"
:value="selectTextValue"
:maxlength="20000"
:auto-height="false"
:show-confirm-bar="false"
:adjust-position="true"
:focus="true"
:selection-start="selectStart"
:selection-end="selectEnd"
@input="onTextInput"
@selectionchange="onTextSelectionChange"
@blur="onTextBlur" />
<view class="select-text-preview" v-if="selectedPreview">
<text class="select-text-preview-label">{{ $lang('ai-chat.index.selectedText', '已选文字') }}:</text>
<text class="select-text-preview-content">{{ selectedPreview }}</text>
</view>
<view class="select-text-footer">
<button class="select-text-copy-btn" @click="copySelectedText">{{ selectedPreview ? $lang('ai-chat.index.copySelected', '已复制选中内容') : $lang('ai-chat.index.copyAll', '复制全部') }}</button>
<button class="select-text-close-btn" @click="closeSelectTextModal">{{ $lang('ai-chat.index.cancel', '关闭') }}</button>
</view>
</view>
</view>
<!-- 键盘垫高层:键盘弹出时平滑撑开空间将输入框上推 -->
<view class="keyboard-spacer" :style="{ height: keyboardHeight + 'px' }"></view>
@@ -506,12 +457,6 @@ export default {
localUserNickname: '', // 当前用户昵称
defaultNickname: '', // 默认昵称
showNicknameEditor: false, // 昵称编辑弹窗控制
// 选取文字复制弹窗
showSelectTextModal: false,
selectTextValue: '', // 弹窗内文本域当前内容
selectStart: 0, // 当前选中起点
selectEnd: 0, // 当前选中终点
selectedPreview: '', // 选中文字预览
// AI头像错误状态
avatarError: false,
// 当前选中的 AI 模型, 显示在输入框左侧(如 Auto)
@@ -530,10 +475,6 @@ export default {
isFetchingHistory: false,
keyboardHeight: 0,
// 手动长按检测相关(touch 计时器)
_longPressTimer: null,
_longPressMessage: null,
// 聊天记录搜索状态(由 AiChatSearch 组件事件同步)
showSearchBar: false,
searchKeyword: '',
@@ -1866,207 +1807,6 @@ _handleStreamError(msg) {
.trim()
},
// 长按/右键消息 → 弹出操作菜单(复制 / 分享 / 选取文字复制)
onMessageLongPress(message) {
// loading 消息不允许操作
if (message.type === 'loading') return
// #ifdef MP-WEIXIN
// 微信小程序:震动反馈提升手感(小米等 Android 设备也可用)
try {
wx.vibrateShort({ type: 'medium' })
} catch (e) { /* 不支持震动的设备忽略 */ }
// #endif
this.openMessageMenu(message)
},
// 打开消息操作菜单:复制 / 分享 / 选取文字复制
openMessageMenu(message) {
const text = message && message.content ? message.content : ''
if (!text) return
// #ifdef H5
// H5 优先使用原生浏览器上下文菜单体验(右键已出系统菜单时避免重复弹层)
// 仍提供底部操作菜单,保持与小程序一致
// #endif
uni.showActionSheet({
itemList: ['复制', '分享', this.$lang('ai-chat.index.selectTextToCopy', '选取文字复制')],
success: (res) => {
if (res.tapIndex === 0) {
this.copyMessage(message)
} else if (res.tapIndex === 1) {
this.shareMessage(message)
} else if (res.tapIndex === 2) {
this.openSelectTextModal(message)
}
},
fail: () => { /* 用户取消 */ }
})
},
// 分享消息内容(兼容微信小程序与 H5)
shareMessage(message) {
const text = message && message.content ? message.content : ''
if (!text) return
// #ifdef MP-WEIXIN
// 微信小程序:调起分享功能
try {
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
} catch (e) {
// 若当前页面未配置分享,降级为提示复制
uni.showToast({ title: '请长按使用系统分享', icon: 'none' })
}
// #endif
// #ifdef H5
// H5:调用 Web Share API,降级为复制到剪贴板
if (navigator.share) {
navigator.share({
title: '聊天记录',
text: text
}).catch(() => { /* 用户取消分享 */ })
} else {
this.copyMessage(message)
uni.showToast({ title: '已复制,可直接粘贴分享', icon: 'none' })
}
// #endif
},
// 打开"选取文字复制"弹窗:长按后可自由选取任意范围(含单个字符/标点)复制
openSelectTextModal(message) {
const text = message && message.content ? message.content : ''
if (!text) return
this.selectTextValue = text
this.selectStart = 0
this.selectEnd = 0
this.selectedPreview = ''
this.showSelectTextModal = true
// 下一帧自动全选,方便用户直接拖动手柄缩小范围(H5 / 微信小程序均适用)
this.$nextTick(() => {
this.selectStart = 0
this.selectEnd = text.length
// H5:绑定 textarea DOM 选区变化事件,实时同步选中范围
// #ifdef H5
try {
const el = document.querySelector('.select-text-textarea textarea') || document.querySelector('.select-text-textarea')
if (el) {
const sync = () => {
try {
const s = el.selectionStart || 0
const e = el.selectionEnd || 0
this.selectStart = s
this.selectEnd = e
this.selectedPreview = (el.value || '').substring(s, e)
} catch (err) { /* noop */ }
}
el.addEventListener('select', sync)
el.addEventListener('keyup', sync)
el.addEventListener('mouseup', sync)
el.addEventListener('touchend', sync)
el.focus()
el.select && el.select()
el.setSelectionRange && el.setSelectionRange(0, el.value.length)
sync()
}
} catch (e) { /* 部分环境不支持 */ }
// #endif
})
},
// 文本域输入:同步内容(用户若误编辑也能拿到最新文本)
onTextInput(event) {
const val = (event && event.detail && event.detail.value) || (event && event.target && event.target.value) || ''
this.selectTextValue = val
},
// 微信小程序:文本域选区变化(拖动两端手柄选择范围)
onTextSelectionChange(event) {
try {
const detail = event && event.detail
if (detail) {
this.selectStart = detail.start || 0
this.selectEnd = detail.end || 0
this.selectedPreview = (this.selectTextValue || '').substring(this.selectStart, this.selectEnd)
}
} catch (e) { /* noop */ }
},
// 失焦时兜底同步一次选区(H5 拖选结束时)
onTextBlur(event) {
try {
// #ifdef H5
const el = document.querySelector('.select-text-textarea textarea') || document.querySelector('.select-text-textarea')
if (el) {
const s = el.selectionStart || 0
const e = el.selectionEnd || 0
this.selectStart = s
this.selectEnd = e
this.selectedPreview = (el.value || '').substring(s, e)
}
// #endif
} catch (e) { /* noop */ }
},
// 复制选中范围(未选则复制全部)
copySelectedText() {
const text = this.selectTextValue || ''
if (!text) {
uni.showToast({ title: this.$lang('ai-chat.index.noContentToCopy'), icon: 'none' })
return
}
const start = Math.min(this.selectStart, this.selectEnd)
const end = Math.max(this.selectStart, this.selectEnd)
const selected = start < end ? text.substring(start, end) : ''
const copyText = selected || text
this.copyMessage({ content: copyText, _selected: !!selected })
this.closeSelectTextModal()
},
// 关闭"选取文字复制"弹窗
closeSelectTextModal() {
this.showSelectTextModal = false
this.selectTextValue = ''
this.selectStart = 0
this.selectEnd = 0
this.selectedPreview = ''
},
// 手动长按检测(touch 事件方案,兼容所有平台)
// 在 H5 desktop 上用 @contextmenu 触发,
// 在 H5 mobile / 小米微信小程序等场景靠 touch 计时器兜底
onBubbleTouchStart(event, message) {
// 单指长按才触发,忽略多点触控
if (event.touches && event.touches.length > 1) return
this._longPressMessage = message
this._longPressTimer = setTimeout(() => {
this._longPressTimer = null
this.onMessageLongPress(message)
}, 500) // 和系统长按接近的 500ms
},
onBubbleTouchMove() {
// 手指移动(滚动列表)→ 取消长按
if (this._longPressTimer) {
clearTimeout(this._longPressTimer)
this._longPressTimer = null
}
this._longPressMessage = null
},
onBubbleTouchEnd() {
// 手指提前松开 → 取消长按
if (this._longPressTimer) {
clearTimeout(this._longPressTimer)
this._longPressTimer = null
}
this._longPressMessage = null
},
// 复制消息内容到剪贴板(兼容 H5 / 微信小程序)
copyMessage(message) {
let copyText = message.content || ''
@@ -4113,158 +3853,26 @@ _handleStreamError(msg) {
}
}
/* 选取文字复制弹窗 */
.select-text-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
.select-text-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.select-text-panel {
position: relative;
width: 100%;
height: 70%;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
overflow: hidden;
.select-text-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
border-bottom: 1rpx solid #e5e5e5;
background-color: #f9f9f9;
text {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.close-btn {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 0;
text {
font-size: 48rpx;
color: #999;
line-height: 1;
}
}
}
.select-text-tip {
padding: 16rpx 32rpx 0;
font-size: 24rpx;
color: #999;
background-color: #f9f9f9;
}
.select-text-textarea {
flex: 1;
width: 100%;
padding: 32rpx;
font-size: 30rpx;
line-height: 1.6;
color: #333;
background-color: #fff;
border: none;
box-sizing: border-box;
}
.select-text-preview {
max-height: 200rpx;
overflow-y: auto;
padding: 20rpx 32rpx;
border-top: 1rpx dashed #e5e5e5;
background-color: #f6f8fa;
font-size: 26rpx;
color: #555;
word-break: break-all;
.select-text-preview-label {
color: #999;
margin-right: 8rpx;
}
.select-text-preview-content {
color: #07c160;
font-weight: 500;
}
}
.select-text-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 32rpx;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
border-top: 1rpx solid #e5e5e5;
background-color: #f9f9f9;
.select-text-copy-btn {
flex: 1;
height: 80rpx;
border-radius: 40rpx;
background-color: #07c160;
color: #fff;
font-size: 28rpx;
font-weight: 500;
border: none;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.select-text-close-btn {
width: 160rpx;
height: 80rpx;
border-radius: 40rpx;
background-color: #f2f2f2;
color: #666;
font-size: 28rpx;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
// H5 下允许 rich-text 内容文本选择(鼠标拖选复制)
// H5 下允许 rich-text / v-html 内容文本选择(鼠标拖选复制)
.text-content,
.markdown-body {
.markdown-body,
.selectable-md {
user-select: text;
-webkit-user-select: text;
}
.selectable-md {
font-size: 28rpx;
line-height: 1.7;
color: #333;
// 保证 v-html 内部段落、列表等不影响选择
p, ul, ol, li, h1, h2, h3, h4, h5, h6, code, pre {
user-select: text;
-webkit-user-select: text;
}
}
// 用户消息 rich-text 高亮(搜索时替代 <text>)
.message-rich-text {
font-size: 28rpx;