chore:用户可以自定义选择复制的文字
This commit is contained in:
@@ -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...',
|
||||
|
||||
@@ -33,10 +33,6 @@ export const lang = {
|
||||
noContentToCopy: '无可复制的内容',
|
||||
copySuccess: '已复制',
|
||||
copySelected: '已复制选中内容',
|
||||
selectTextToCopy: '选取文字复制',
|
||||
selectedText: '已选文字',
|
||||
copyAll: '复制全部',
|
||||
selectTextTip: '长按文字拖动两端手柄,可自由选择复制范围',
|
||||
copyFail: '复制失败',
|
||||
copyFailWithReason: '复制失败:{reason}',
|
||||
openingFile: '打开文件中...',
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user