chore:用户可以自定义选择复制的文字
This commit is contained in:
@@ -33,10 +33,6 @@ export const lang = {
|
|||||||
noContentToCopy: 'No content to copy',
|
noContentToCopy: 'No content to copy',
|
||||||
copySuccess: 'Copied',
|
copySuccess: 'Copied',
|
||||||
copySelected: 'Copied selected content',
|
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',
|
copyFail: 'Copy failed',
|
||||||
copyFailWithReason: 'Copy failed: {reason}',
|
copyFailWithReason: 'Copy failed: {reason}',
|
||||||
openingFile: 'Opening file...',
|
openingFile: 'Opening file...',
|
||||||
|
|||||||
@@ -33,10 +33,6 @@ export const lang = {
|
|||||||
noContentToCopy: '无可复制的内容',
|
noContentToCopy: '无可复制的内容',
|
||||||
copySuccess: '已复制',
|
copySuccess: '已复制',
|
||||||
copySelected: '已复制选中内容',
|
copySelected: '已复制选中内容',
|
||||||
selectTextToCopy: '选取文字复制',
|
|
||||||
selectedText: '已选文字',
|
|
||||||
copyAll: '复制全部',
|
|
||||||
selectTextTip: '长按文字拖动两端手柄,可自由选择复制范围',
|
|
||||||
copyFail: '复制失败',
|
copyFail: '复制失败',
|
||||||
copyFailWithReason: '复制失败:{reason}',
|
copyFailWithReason: '复制失败:{reason}',
|
||||||
openingFile: '打开文件中...',
|
openingFile: '打开文件中...',
|
||||||
|
|||||||
@@ -37,18 +37,9 @@
|
|||||||
<!-- 用户消息 (WorkBuddy 风格: 右对齐 + 浅灰气泡 + 头像在右) -->
|
<!-- 用户消息 (WorkBuddy 风格: 右对齐 + 浅灰气泡 + 头像在右) -->
|
||||||
<view v-if="message.role === 'user'" class="user-message">
|
<view v-if="message.role === 'user'" class="user-message">
|
||||||
<view class="message-content">
|
<view class="message-content">
|
||||||
<view class="message-bubble"
|
<view class="message-bubble">
|
||||||
@contextmenu.prevent="onMessageLongPress(message)"
|
|
||||||
@touchstart="onBubbleTouchStart($event, message)"
|
|
||||||
@touchmove="onBubbleTouchMove"
|
|
||||||
@touchend="onBubbleTouchEnd"
|
|
||||||
@touchcancel="onBubbleTouchEnd">
|
|
||||||
<rich-text v-if="searchKeyword" :nodes="highlightContent(message.content)" class="message-rich-text" />
|
<rich-text v-if="searchKeyword" :nodes="highlightContent(message.content)" class="message-rich-text" />
|
||||||
<text v-else class="message-text" selectable
|
<text v-else class="message-text" selectable>{{ message.content }}</text>
|
||||||
@touchstart.stop
|
|
||||||
@touchmove.stop
|
|
||||||
@touchend.stop
|
|
||||||
@touchcancel.stop>{{ message.content }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="avatar" @tap="showAvatarSelector = true">
|
<view class="avatar" @tap="showAvatarSelector = true">
|
||||||
@@ -74,35 +65,30 @@
|
|||||||
<text class="ai-nickname-text">{{ $lang('ai-chat.index.aiNickname') }}</text>
|
<text class="ai-nickname-text">{{ $lang('ai-chat.index.aiNickname') }}</text>
|
||||||
<text class="message-time">{{ formatTime(message.timestamp) }}</text>
|
<text class="message-time">{{ formatTime(message.timestamp) }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="message-bubble"
|
<view class="message-bubble">
|
||||||
@contextmenu.prevent="onMessageLongPress(message)"
|
<!-- 文本消息:小程序用 text selectable,H5 用可选择的 HTML 渲染 -->
|
||||||
@touchstart="onBubbleTouchStart($event, message)"
|
|
||||||
@touchmove="onBubbleTouchMove"
|
|
||||||
@touchend="onBubbleTouchEnd"
|
|
||||||
@touchcancel="onBubbleTouchEnd">
|
|
||||||
<!-- 文本消息 -->
|
|
||||||
<view v-if="message.type === 'text'" class="text-content">
|
<view v-if="message.type === 'text'" class="text-content">
|
||||||
<!-- 微信小程序: rich-text 不支持选中文本,降级为 text selectable 以支持长按选择部分文字 -->
|
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
<text class="ai-message-text" selectable
|
<text class="ai-message-text" selectable>{{ _stripMarkdown(message.content) }}</text>
|
||||||
@touchstart.stop
|
|
||||||
@touchmove.stop
|
|
||||||
@touchend.stop
|
|
||||||
@touchcancel.stop>{{ _stripMarkdown(message.content) }}</text>
|
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifdef H5 -->
|
<!-- #ifdef H5 -->
|
||||||
<rich-text :nodes="getAIDisplayContent(message.content)" />
|
<view class="ai-message-text selectable-md" v-html="getAIDisplayContent(message.content)"></view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Markdown文档 -->
|
<!-- Markdown文档:小程序用 text selectable,H5 用可选择的 HTML 渲染 -->
|
||||||
<view v-else-if="message.type === 'markdown'" class="markdown-content">
|
<view v-else-if="message.type === 'markdown'" class="markdown-content">
|
||||||
<view class="markdown-header">
|
<view class="markdown-header">
|
||||||
<text class="iconfont icon-markdown"></text>
|
<text class="iconfont icon-markdown"></text>
|
||||||
<text class="markdown-title"></text>
|
<text class="markdown-title"></text>
|
||||||
</view>
|
</view>
|
||||||
<view class="markdown-body">
|
<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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -356,41 +342,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</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>
|
<view class="keyboard-spacer" :style="{ height: keyboardHeight + 'px' }"></view>
|
||||||
|
|
||||||
@@ -506,12 +457,6 @@ export default {
|
|||||||
localUserNickname: '', // 当前用户昵称
|
localUserNickname: '', // 当前用户昵称
|
||||||
defaultNickname: '', // 默认昵称
|
defaultNickname: '', // 默认昵称
|
||||||
showNicknameEditor: false, // 昵称编辑弹窗控制
|
showNicknameEditor: false, // 昵称编辑弹窗控制
|
||||||
// 选取文字复制弹窗
|
|
||||||
showSelectTextModal: false,
|
|
||||||
selectTextValue: '', // 弹窗内文本域当前内容
|
|
||||||
selectStart: 0, // 当前选中起点
|
|
||||||
selectEnd: 0, // 当前选中终点
|
|
||||||
selectedPreview: '', // 选中文字预览
|
|
||||||
// AI头像错误状态
|
// AI头像错误状态
|
||||||
avatarError: false,
|
avatarError: false,
|
||||||
// 当前选中的 AI 模型, 显示在输入框左侧(如 Auto)
|
// 当前选中的 AI 模型, 显示在输入框左侧(如 Auto)
|
||||||
@@ -530,10 +475,6 @@ export default {
|
|||||||
isFetchingHistory: false,
|
isFetchingHistory: false,
|
||||||
keyboardHeight: 0,
|
keyboardHeight: 0,
|
||||||
|
|
||||||
// 手动长按检测相关(touch 计时器)
|
|
||||||
_longPressTimer: null,
|
|
||||||
_longPressMessage: null,
|
|
||||||
|
|
||||||
// 聊天记录搜索状态(由 AiChatSearch 组件事件同步)
|
// 聊天记录搜索状态(由 AiChatSearch 组件事件同步)
|
||||||
showSearchBar: false,
|
showSearchBar: false,
|
||||||
searchKeyword: '',
|
searchKeyword: '',
|
||||||
@@ -1866,207 +1807,6 @@ _handleStreamError(msg) {
|
|||||||
.trim()
|
.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 / 微信小程序)
|
// 复制消息内容到剪贴板(兼容 H5 / 微信小程序)
|
||||||
copyMessage(message) {
|
copyMessage(message) {
|
||||||
let copyText = message.content || ''
|
let copyText = message.content || ''
|
||||||
@@ -4113,158 +3853,26 @@ _handleStreamError(msg) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 选取文字复制弹窗 */
|
// H5 下允许 rich-text / v-html 内容文本选择(鼠标拖选复制)
|
||||||
.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 内容文本选择(鼠标拖选复制)
|
|
||||||
.text-content,
|
.text-content,
|
||||||
.markdown-body {
|
.markdown-body,
|
||||||
|
.selectable-md {
|
||||||
user-select: text;
|
user-select: text;
|
||||||
-webkit-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>)
|
// 用户消息 rich-text 高亮(搜索时替代 <text>)
|
||||||
.message-rich-text {
|
.message-rich-text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user