590 lines
21 KiB
Vue
590 lines
21 KiB
Vue
<template>
|
|
<view class="tools-popup" v-if="visible">
|
|
<view class="tools-mask" @click="hideToolsPanel"></view>
|
|
<view class="tools-panel">
|
|
<view class="tools-header">
|
|
<text>{{ $lang('ai-chat.index.moreFunctions') }}</text>
|
|
<button class="close-btn" @click="hideToolsPanel">
|
|
<text class="iconfont icon-close"></text>
|
|
</button>
|
|
</view>
|
|
<view class="tools-grid">
|
|
<!-- PR-CHAT-UI-CONFIG (2026-09-20): 每个附件 tab 由 attachmentTypes 控制显隐
|
|
支持的 kind: image / file / audio / video, 缺失的 kind 自动隐藏
|
|
location 不属于附件, 不受此开关控制 -->
|
|
<view v-if="isTypeEnabled('image')" class="tool-item tool-item-new tool-item-image" @click="selectImage">
|
|
<view class="tool-icon">
|
|
<view class="image-icon"></view>
|
|
</view>
|
|
<text class="tool-text">{{ $lang('ai-chat.index.image') }}</text>
|
|
</view>
|
|
<view v-if="isTypeEnabled('video')" class="tool-item tool-item-new tool-item-video" @click="selectVideo">
|
|
<view class="tool-icon">
|
|
<text class="icondiy icon-system-video"></text>
|
|
</view>
|
|
<!-- 第二个参数是 $lang 的默认值: 后端 bundle 尚未下发该 key 时也不会显示 raw key -->
|
|
<text class="tool-text">{{ $lang('ai-chat.index.video', '视频/音频') }}</text>
|
|
</view>
|
|
<view v-if="isTypeEnabled('file')" class="tool-item tool-item-new tool-item-file" @click="selectFile">
|
|
<view class="tool-icon">
|
|
<view class="paperclip-icon"></view>
|
|
</view>
|
|
<text class="tool-text">添加文件</text>
|
|
</view>
|
|
<!-- 更多功能里的语音入口暂时隐藏 -->
|
|
<view v-if="false" class="tool-item" @click="selectVoiceOrAudio">
|
|
<view class="tool-icon">
|
|
<text class="icondiy icon-system-chat-voice-line"></text>
|
|
</view>
|
|
<text class="tool-text">{{ $lang('ai-chat.index.voice') }}</text>
|
|
</view>
|
|
<view v-if="false" class="tool-item tool-item-new tool-item-location" @click="selectLocation">
|
|
<view class="tool-icon">
|
|
<text class="icondiy icon-system-map-pin-line"></text>
|
|
</view>
|
|
<text class="tool-text">{{ $lang('ai-chat.index.location') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { uploadImage, uploadMedia } from '@/common/js/media-upload.js'
|
|
/**
|
|
* ai-chat-tools-panel - 更多工具面板组件
|
|
*
|
|
* Props:
|
|
* visible: Boolean - 控制显示/隐藏
|
|
* attachmentTypes: Array<String> - PR-CHAT-UI-CONFIG (2026-09-20) 可启用的附件 kind 列表
|
|
* 默认 ['image','file','audio','video'], 后端 chat_ui_config.ui_enable_attachment_types 可裁剪
|
|
* location 不属于附件, 不受此 prop 影响
|
|
*
|
|
* Events:
|
|
* update:visible - 同步关闭状态
|
|
* image-selected - 选择图片，参数：图片消息对象
|
|
* file-selected - 选择文件/视频/音频，参数：消息对象 (type: 'file' | 'video' | 'audio')
|
|
* voice-start - 开始语音
|
|
* location-selected - 选择位置，参数：位置消息对象
|
|
*/
|
|
export default {
|
|
name: 'AiChatToolsPanel',
|
|
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
attachmentTypes: {
|
|
type: Array,
|
|
default: function () {
|
|
return ['image', 'file', 'audio', 'video']
|
|
}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
messageId: 0
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
hideToolsPanel() {
|
|
this.$emit('update:visible', false)
|
|
},
|
|
|
|
// PR-CHAT-UI-CONFIG (2026-09-20): 判断某个附件 kind 是否启用
|
|
// undefined/空数组 → 兜底全部启用 (保留老调用方的体感)
|
|
isTypeEnabled(kind) {
|
|
if (!this.attachmentTypes || !this.attachmentTypes.length) return true
|
|
return this.attachmentTypes.indexOf(kind) !== -1
|
|
},
|
|
|
|
selectImage() {
|
|
const that = this
|
|
uni.chooseImage({
|
|
count: 9,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
that.hideToolsPanel()
|
|
// 新交互: 选图后不直接进聊天区, 交给父组件作为输入框附件预览,
|
|
// 用户可继续输入文字, 点发送时图文一起发出
|
|
that.$emit('image-picked', res.tempFilePaths || [])
|
|
},
|
|
fail: (err) => {
|
|
if (err.errMsg && !err.errMsg.includes('cancel')) {
|
|
uni.showToast({ title: '选图失败', icon: 'none' })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
selectFile() {
|
|
const that = this
|
|
// #ifdef H5
|
|
const input = document.createElement('input')
|
|
input.type = 'file'
|
|
input.accept = '*/*'
|
|
input.onchange = async (e) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
that.hideToolsPanel()
|
|
await that._uploadOneFile(file, file.type.startsWith('image/') ? 'image' : 'file')
|
|
}
|
|
input.click()
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 微信小程序需要用 wx.chooseMessageFile
|
|
// 原代码 selectFile 只有 H5 + APP-PLUS 分支, 微信小程序里 "文件" 按钮是死按钮
|
|
// uni-app 3.x 暴露了 uni.chooseMessageFile; 老版本/部分编译目标只有 wx.chooseMessageFile, 都兼容
|
|
const chooseFileApi = (typeof uni.chooseMessageFile === 'function')
|
|
? uni.chooseMessageFile
|
|
: (typeof wx !== 'undefined' ? wx.chooseMessageFile : null)
|
|
if (!chooseFileApi) {
|
|
uni.showToast({ title: '当前平台不支持文件选择', icon: 'none' })
|
|
return
|
|
}
|
|
chooseFileApi({
|
|
count: 1,
|
|
type: 'all', // 'all' | 'video' | 'image' | 'file' — 'all' 最宽松, 用户可发任何文件
|
|
success: async (res) => {
|
|
that.hideToolsPanel()
|
|
// wx.chooseMessageFile 返回 tempFiles; uni 端 res.tempFiles 兼容
|
|
const file = (res.tempFiles && res.tempFiles[0]) || (res.tempFilePaths && res.tempFiles[0])
|
|
if (!file) return
|
|
// 微信选文件返回 path + size + name (无 type); 用 ext 推断
|
|
const ext = (file.name || file.path || '').split('.').pop().toLowerCase()
|
|
const kind = ['jpg','jpeg','png','gif','webp','heic','heif','avif','bmp','tif','tiff'].includes(ext) ? 'image' : 'file'
|
|
await that._uploadOneFile(file, kind)
|
|
},
|
|
fail: (err) => {
|
|
if (err.errMsg && !err.errMsg.includes('cancel')) {
|
|
uni.showToast({ title: '选文件失败', icon: 'none' })
|
|
}
|
|
},
|
|
})
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS
|
|
uni.chooseFile({
|
|
count: 1,
|
|
success: async (res) => {
|
|
that.hideToolsPanel()
|
|
const file = res.tempFiles[0]
|
|
await that._uploadOneFile(file, 'file')
|
|
}
|
|
})
|
|
// #endif
|
|
},
|
|
|
|
// 选择「视频/音频」并上传 (H5 / 微信小程序 / App)
|
|
// PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): 原来 H5 只写 accept='video/*',
|
|
// 系统文件选择器会把本地 .mp3/.wav 等音频文件全部过滤掉, 用户看不到也选不了音频。
|
|
// 现在 accept 同时包含 audio/*, 选中后按 mime / 扩展名自动判定 kind (video | audio)。
|
|
selectVideo() {
|
|
const that = this
|
|
// #ifdef H5
|
|
const mediaInput = document.createElement('input')
|
|
mediaInput.type = 'file'
|
|
mediaInput.accept = 'video/*,audio/*'
|
|
mediaInput.onchange = async (e) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
that.hideToolsPanel()
|
|
await that._uploadOneFile(file, that._guessMediaKind(file))
|
|
}
|
|
mediaInput.click()
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|
// 小程序/App 没有"音视频二合一"的选择器, 用二次弹窗让用户明确选视频还是音频
|
|
uni.showActionSheet({
|
|
itemList: [
|
|
that.$lang('ai-chat.index.pickVideo', '选择视频'),
|
|
that.$lang('ai-chat.index.pickAudio', '选择音频')
|
|
],
|
|
success: (res) => {
|
|
if (res.tapIndex === 0) that._chooseVideo()
|
|
else if (res.tapIndex === 1) that.selectAudio()
|
|
},
|
|
fail: () => {}
|
|
})
|
|
// #endif
|
|
},
|
|
|
|
// 按 mime / 扩展名判断选中的文件是视频还是音频
|
|
_guessMediaKind(file) {
|
|
const type = (file && file.type ? file.type : '').toLowerCase()
|
|
if (type.indexOf('audio/') === 0) return 'audio'
|
|
if (type.indexOf('video/') === 0) return 'video'
|
|
const ext = String((file && file.name) || '').split('.').pop().toLowerCase()
|
|
// PR-AV-FULL-SUPPORT (2026-09-24): 与后端 MediaUploadPolicy::allowedUploadExtensions 音频段对齐
|
|
const audioExt = ['mp3', 'wav', 'aac', 'm4a', 'flac', 'ogg', 'oga', 'amr', 'wma', 'aiff', 'aif', 'opus', 'ape', 'mid', 'midi', 'caf', 'mka', 'ac3']
|
|
if (audioExt.indexOf(ext) !== -1) return 'audio'
|
|
// 兜底: mime 为空且扩展名不认识的 (如 Windows 未关联的音频) 交给后端按 URL 判断, 先按音频走
|
|
return type ? 'video' : 'audio'
|
|
},
|
|
|
|
// 选视频 (微信小程序 / App 共用)
|
|
_chooseVideo() {
|
|
const that = this
|
|
uni.chooseVideo({
|
|
sourceType: ['album', 'camera'],
|
|
compressed: true,
|
|
maxDuration: 60,
|
|
success: async (res) => {
|
|
that.hideToolsPanel()
|
|
await that._uploadOneFile({
|
|
path: res.tempFilePath,
|
|
size: res.size || 0,
|
|
duration: res.duration || 0,
|
|
name: 'video_' + Date.now() + '.mp4',
|
|
type: 'video/mp4'
|
|
}, 'video')
|
|
},
|
|
fail: (err) => {
|
|
if (err && err.errMsg && !err.errMsg.includes('cancel')) {
|
|
uni.showToast({ title: that.$lang('ai-chat.index.chooseVideoFail'), icon: 'none' })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// “语音/音频”: 提供 录制语音 / 上传音频 两种方式
|
|
selectVoiceOrAudio() {
|
|
uni.showActionSheet({
|
|
itemList: [
|
|
this.$lang('ai-chat.index.recordVoice'),
|
|
this.$lang('ai-chat.index.uploadAudio')
|
|
],
|
|
success: (res) => {
|
|
if (res.tapIndex === 0) {
|
|
this.startRecord()
|
|
} else if (res.tapIndex === 1) {
|
|
this.selectAudio()
|
|
}
|
|
},
|
|
fail: () => {}
|
|
})
|
|
},
|
|
|
|
// 选择音频文件并上传 (H5 / 微信小程序 / App)
|
|
selectAudio() {
|
|
const that = this
|
|
// #ifdef H5
|
|
const audioInput = document.createElement('input')
|
|
audioInput.type = 'file'
|
|
audioInput.accept = 'audio/*'
|
|
audioInput.onchange = async (e) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
that.hideToolsPanel()
|
|
await that._uploadOneFile(file, 'audio')
|
|
}
|
|
audioInput.click()
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
// 微信小程序没有专门的音频选择 API, 用 chooseMessageFile 选文件后按扩展名过滤
|
|
const chooseFileApi = (typeof uni.chooseMessageFile === 'function')
|
|
? uni.chooseMessageFile
|
|
: (typeof wx !== 'undefined' ? wx.chooseMessageFile : null)
|
|
if (!chooseFileApi) {
|
|
uni.showToast({ title: that.$lang('ai-chat.index.chooseAudioFail'), icon: 'none' })
|
|
return
|
|
}
|
|
chooseFileApi({
|
|
count: 1,
|
|
type: 'file',
|
|
extension: ['mp3', 'wav', 'aac', 'm4a', 'flac', 'ogg', 'oga', 'amr', 'wma', 'aiff', 'aif', 'opus', 'ape', 'mid', 'midi', 'caf', 'mka', 'ac3'],
|
|
success: async (res) => {
|
|
const file = (res.tempFiles && res.tempFiles[0]) || null
|
|
if (!file) return
|
|
that.hideToolsPanel()
|
|
await that._uploadOneFile(file, 'audio')
|
|
},
|
|
fail: (err) => {
|
|
if (err && err.errMsg && !err.errMsg.includes('cancel')) {
|
|
uni.showToast({ title: that.$lang('ai-chat.index.chooseAudioFail'), icon: 'none' })
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS
|
|
uni.chooseFile({
|
|
count: 1,
|
|
extension: ['mp3', 'wav', 'aac', 'm4a', 'flac', 'ogg', 'oga', 'amr', 'wma', 'aiff', 'aif', 'opus', 'ape', 'mid', 'midi', 'caf', 'mka', 'ac3'],
|
|
success: async (res) => {
|
|
const file = res.tempFiles[0]
|
|
if (!file) return
|
|
that.hideToolsPanel()
|
|
await that._uploadOneFile(file, 'audio')
|
|
}
|
|
})
|
|
// #endif
|
|
},
|
|
|
|
async _uploadOneFile(file, kind) {
|
|
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): Blob URL 生命周期管理
|
|
// 原代码 URL.createObjectURL 出的 blob URL 永不释放, 长期跑会泄漏
|
|
// 统一: H5 创建 blob URL 用于预览, 上传完 (成功/失败都) revoke
|
|
let blobUrl = ''
|
|
let displayPath = ''
|
|
// #ifdef H5
|
|
// H5 file 对象没有 .path, 用 blob URL 给 imageUrl 预览, 并把 file 本身传给 uploadImage
|
|
blobUrl = file.name ? URL.createObjectURL(file) : ''
|
|
displayPath = blobUrl
|
|
// #endif
|
|
// #ifndef H5
|
|
// MP-WEIXIN / APP-PLUS 都用 file.path (tempFilePath)
|
|
displayPath = file.path || ''
|
|
// #endif
|
|
|
|
const pending = {
|
|
id: ++this.messageId,
|
|
role: 'user',
|
|
type: kind,
|
|
content: '',
|
|
fileName: file.name || (file.path ? file.path.split('/').pop() : ''),
|
|
fileSize: file.size || 0,
|
|
fileType: file.type || '',
|
|
// url 供音频/视频播放器使用; imageUrl 供图片/视频封面预览
|
|
url: displayPath,
|
|
duration: file.duration || 0,
|
|
// 音频播放状态 (audio 气泡点击播放/暂停需要, 预先声明保证响应式)
|
|
playing: false,
|
|
currentTime: 0,
|
|
imageUrl: displayPath,
|
|
uploading: true,
|
|
uploadError: null,
|
|
uploaded: null,
|
|
timestamp: Date.now()
|
|
}
|
|
this.$emit('file-selected', pending)
|
|
try {
|
|
// 传给 uploadImage/uploadMedia: H5 传 file 对象 (media-upload 内部 pathToFile 转),
|
|
// 非 H5 传 file.path (uni.uploadFile 需要)
|
|
const inputArg = blobUrl || file.path || file
|
|
// PR-FRONTEND-MEDIA-ACCEPT (2026-09-17): H5 传的是 blob URL (无扩展名),
|
|
// 把原始 name/mime/size 传给 media-upload, 保证 STS 上传 key 保留 .mp3/.mp4 后缀,
|
|
// 否则云端存成 .bin + application/octet-stream, 音频/视频播放器拿不到正确 Content-Type
|
|
const uploaded = kind === 'image'
|
|
? await uploadImage(inputArg)
|
|
: await uploadMedia(inputArg, kind, { name: file.name, mime: file.type, size: file.size })
|
|
this.$set(pending, 'uploading', false)
|
|
this.$set(pending, 'uploaded', uploaded)
|
|
if (uploaded.url) {
|
|
this.$set(pending, 'imageUrl', uploaded.url)
|
|
this.$set(pending, 'url', uploaded.url)
|
|
}
|
|
} catch (e) {
|
|
this.$set(pending, 'uploading', false)
|
|
this.$set(pending, 'uploadError', e.message || '上传失败')
|
|
uni.showToast({ title: '上传失败: ' + (e.message || ''), icon: 'none' })
|
|
} finally {
|
|
// PR-FRONTEND-MEDIA-UPLOAD-FIX: blob URL 用完即释放 (无论成败)
|
|
if (blobUrl) {
|
|
try { URL.revokeObjectURL(blobUrl) } catch (e) {}
|
|
}
|
|
}
|
|
},
|
|
|
|
startRecord() {
|
|
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 仅作转发, 真正的录音由 ai-chat-voice-panel.vue 接管
|
|
// (panel 现在已经接通 common/js/voice-recorder.js, 这里不用直接调用 recorder)
|
|
this.$emit('voice-start')
|
|
this.hideToolsPanel()
|
|
},
|
|
|
|
selectLocation() {
|
|
uni.chooseLocation({
|
|
success: (res) => {
|
|
const locationMessage = {
|
|
id: ++this.messageId,
|
|
role: 'user',
|
|
type: 'location',
|
|
content: '',
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
address: res.address,
|
|
name: res.name,
|
|
timestamp: Date.now()
|
|
}
|
|
this.hideToolsPanel()
|
|
this.$emit('location-selected', locationMessage)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
/* 引入图标字体: 由 main.wxss 全局提供, 不再重复 import */
|
|
/* 引入全局变量 */
|
|
@import '../styles/ai-chat-global.scss';
|
|
|
|
.tools-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
|
|
.tools-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.tools-panel {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: $bg-card;
|
|
border-radius: $radius-lg $radius-lg 0 0;
|
|
padding: 32rpx;
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.tools-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
border-bottom: 2rpx solid #f0f4f8;
|
|
padding-bottom: 16rpx;
|
|
position: relative; // 为 .close-btn 绝对定位提供参考
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
background-color: $bg-main;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
position: absolute; // 绝对定位: 紧贴 panel 顶部、放在"位置"图标左上方
|
|
top: -8rpx;
|
|
right: 10rpx; //
|
|
.iconfont {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24rpx;
|
|
|
|
.tool-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 24rpx 16rpx;
|
|
border-radius: $radius-md;
|
|
background-color: $bg-main;
|
|
|
|
.tool-icon {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 50%;
|
|
background-color: $bg-card;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16rpx;
|
|
box-shadow: $shadow-sm;
|
|
|
|
.iconfont,
|
|
.icondiy {
|
|
font-size: 48rpx;
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
.tool-text {
|
|
font-size: 24rpx;
|
|
color: $color-text;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// 新样式: 图片 / 添加文件 大卡片, 一比一还原参考图
|
|
.tool-item-new {
|
|
background-color: #f2f3f5;
|
|
border-radius: 28rpx;
|
|
padding: 36rpx 0;
|
|
|
|
.tool-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
margin-bottom: 6rpx;
|
|
line-height: 1;
|
|
|
|
.iconfont,
|
|
.icondiy {
|
|
font-size: 48rpx;
|
|
line-height: 1;
|
|
color: #333;
|
|
}
|
|
|
|
// 图片图标: 左上角开口 + 大四角星在开口处 + 右侧实心圆点 (参考图样式)
|
|
.image-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTEuNCA1IEgxNy41IEEzLjUgMy41IDAgMCAxIDIxIDguNSBWMTUuNSBBMy41IDMuNSAwIDAgMSAxNy41IDE5IEg2LjUgQTMuNSAzLjUgMCAwIDEgMyAxNS41IFY4LjUiLz48cGF0aCBkPSJNNS4yIDEuMyBRNS45IDQuMzUgOC45IDUgUTUuOSA1LjY1IDUuMiA4LjcgUTQuNSA1LjY1IDEuNSA1IFE0LjUgNC4zNSA1LjIgMS4zIFoiIGZpbGw9IiMzMzMiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iOS44IiByPSIxLjUiIGZpbGw9IiMzMzMiIHN0cm9rZT0ibm9uZSIvPjxwYXRoIGQ9Ik01LjUgMTEuNiBRMTAgOS42IDE0LjUgMTYuNCIvPjwvc3ZnPg==");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
// 添加文件图标: 斜向回形针 (参考图样式)
|
|
.paperclip-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEuNDQgMTEuMDUgMTIuMjUgMjAuMjRhNiA2IDAgMCAxLTguNDktOC40OWw4LjU3LTguNTdhNCA0IDAgMSAxIDUuNjYgNS42NmwtOC41OSA4LjU3YTIgMiAwIDAgMS0yLjgzLTIuODNsOC40OS04LjQ4Ii8+PC9zdmc+");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
.tool-text {
|
|
font-size: 26rpx;
|
|
line-height: 1;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 视频/音频图标小一号 (tool-item-video 与该元素同级, 必须用 & 连接)
|
|
&.tool-item-video .tool-icon .icondiy {
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|