2315 lines
82 KiB
Vue
2315 lines
82 KiB
Vue
<template>
|
||
<view class="chat-container">
|
||
<!-- 选择模式操作栏 -->
|
||
<view v-if="isSelectMode" class="select-mode-header">
|
||
<view class="select-header-left">
|
||
<view class="select-count">{{ selectedMessages.length }} 条已选择</view>
|
||
<view class="select-all" @click="selectAllMessages">全选</view>
|
||
</view>
|
||
<view class="select-header-right">
|
||
<view class="cancel-btn" @click="exitSelectMode">取消</view>
|
||
<view class="delete-btn" @click="deleteSelectedMessages" :disabled="selectedMessages.length === 0">删除</view>
|
||
</view>
|
||
</view>
|
||
<!-- Tab切换 -->
|
||
<view v-else class="tab-container">
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'policy' }"
|
||
@click="switchTab('policy')"
|
||
>
|
||
政策查询
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'job' }"
|
||
@click="switchTab('job')"
|
||
>
|
||
岗位推荐
|
||
</view>
|
||
</view>
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="chat-background" v-if="!messages.length">
|
||
<image class="backlogo" src="/static/icon/backAI.png"></image>
|
||
<view class="back-rowTitle">嗨！欢迎使用{{ config.appInfo.areaName }}AI智能求职</view>
|
||
<view class="back-rowText">
|
||
我可以根据您的简历和求职需求，帮你精准匹配{{ config.appInfo.areaName }}互联网招聘信息，对比招聘信息的优缺点，提供面试指导等，请把你的任务交给我吧~
|
||
</view>
|
||
<view class="back-rowh3">猜你所想</view>
|
||
<view
|
||
class="back-rowmsg button-click"
|
||
v-for="(item, index) in queries"
|
||
:key="index"
|
||
@click="sendMessageGuess(item)"
|
||
>
|
||
{{ item }}
|
||
</view>
|
||
<view class="chat-item self" v-if="isRecording">
|
||
<view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="chat-background" v-if="!messages.length">
|
||
<image class="backlogo" src="/static/icon/backAI.png"></image>
|
||
<view class="back-rowTitle">嗨！欢迎使用{{ config.appInfo.areaName }}AI智能求职</view>
|
||
<view class="back-rowText">
|
||
我可以根据您的简历和求职需求，帮你精准匹配{{ config.appInfo.areaName }}互联网招聘信息，对比招聘信息的优缺点，提供面试指导等，请把你的任务交给我吧~
|
||
</view>
|
||
<view class="back-rowh3">猜你所想</view>
|
||
<view
|
||
class="back-rowmsg button-click"
|
||
v-for="(item, index) in queries"
|
||
:key="index"
|
||
@click="sendMessageGuess(item)"
|
||
>
|
||
{{ item }}
|
||
</view>
|
||
<view class="chat-item self" v-if="isRecording">
|
||
<view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<scroll-view class="chat-list scrollView" :scroll-top="scrollTop" :scroll-y="true" scroll-with-animation>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="chat-list list-content">
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="chat-list list-content" v-fade:600="messages.length >= 1">
|
||
<!-- #endif -->
|
||
<view
|
||
v-for="(msg, index) in messages"
|
||
v-show="shouldShowMessage(msg)"
|
||
:key="index"
|
||
:id="'msg-' + index"
|
||
class="chat-item"
|
||
:class="{ self: msg.self }"
|
||
@longpress="handleLongPress(msg, index)"
|
||
@click="isSelectMode ? toggleSelectMessage(index) : null"
|
||
>
|
||
<!-- 选择框 -->
|
||
<view v-if="isSelectMode" class="message-checkbox">
|
||
<view class="checkbox" :class="{ checked: selectedMessages.includes(index) }">
|
||
<uni-icons v-if="selectedMessages.includes(index)" type="success" size="24" color="#FFFFFF"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="message" v-if="msg.self">
|
||
<view class="msg-filecontent" v-if="msg.files.length">
|
||
<view
|
||
class="msg-files btn-light"
|
||
v-for="(file, vInex) in msg.files"
|
||
:key="vInex"
|
||
@click="jumpUrl(file)"
|
||
:class="{ 'msg-image-file': isImage(file.type, file.name) }"
|
||
>
|
||
<image
|
||
v-if="isImage(file.type, file.name)"
|
||
class="msg-image-thumbnail"
|
||
:src="file.url"
|
||
mode="aspectFill"
|
||
></image>
|
||
<image
|
||
v-else
|
||
class="msg-file-icon"
|
||
src="/static/icon/Vector2.png"
|
||
></image>
|
||
<text class="msg-file-text">{{ file.name || '附件' }}</text>
|
||
</view>
|
||
</view>
|
||
{{ msg.displayText }}
|
||
</view>
|
||
<view class="message" :class="{ messageNull: !msg.displayText }" v-else>
|
||
<!-- {{ msg.displayText }} -->
|
||
<view class="message-markdown">
|
||
<md-render
|
||
:content="msg.displayText"
|
||
:typing="isTyping && messages.length - 1 === index"
|
||
></md-render>
|
||
<view class="message-controll" v-show="showControll(index) && !isSelectMode">
|
||
<view class="controll-left">
|
||
<image
|
||
class="controll-icon btn-light"
|
||
src="/static/icon/copy.png"
|
||
@click="copyMarkdown(msg.displayText)"
|
||
></image>
|
||
<image
|
||
class="controll-icon mar_le10 btn-light"
|
||
src="/static/icon/feedback.png"
|
||
v-if="!msg.userBadFeedback"
|
||
@click="userGoodFeedback(msg)"
|
||
></image>
|
||
<image
|
||
v-if="isSpeaking && !isPaused && speechIndex === index"
|
||
class="controll-icon mar_le10 btn-light"
|
||
src="/static/icon/stop.png"
|
||
@click="stopMarkdown(msg.displayText, index)"
|
||
></image>
|
||
<image
|
||
class="controll-icon mar_le10 btn-light"
|
||
src="/static/icon/broadcast.png"
|
||
@click="readMarkdown(msg.displayText, index)"
|
||
v-else
|
||
></image>
|
||
</view>
|
||
<view class="controll-right">
|
||
<image
|
||
class="controll-icon mar_ri10 btn-light"
|
||
src="/static/icon/refresh.png"
|
||
@click="refreshMarkdown(index)"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- guess -->
|
||
<view
|
||
class="guess"
|
||
v-if="showGuess && !msg.self && messages.length - 1 === index && msg.displayText && !isSelectMode"
|
||
>
|
||
<view class="gulist">
|
||
<view
|
||
class="guess-list"
|
||
@click="sendMessageGuess(item)"
|
||
v-for="(item, index) in guessList"
|
||
:key="index"
|
||
>
|
||
{{ item }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="chat-item self" v-if="isRecording">
|
||
<view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
|
||
</view>
|
||
<!-- 语音正在识别提示 -->
|
||
<!-- <view>{{isRecognizing}}</view> -->
|
||
<view class="chat-item self" v-if="isRecognizing">
|
||
<view class="message msg-loading">
|
||
<view class="loading-content">
|
||
<view class="ai-loading">
|
||
<view></view>
|
||
<view></view>
|
||
<view></view>
|
||
</view>
|
||
<text class="loading-text">正在识别语音...</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="isTyping" class="self">
|
||
<view class="message msg-loading">
|
||
<view class="loading-content">
|
||
<view class="ai-loading">
|
||
<view></view>
|
||
<view></view>
|
||
<view></view>
|
||
</view>
|
||
<text class="loading-text">AI正在思考中...</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 使用 v-show 保证不销毁事件 -->
|
||
<view class="vio_container" :class="status" v-show="status !== 'idle'">
|
||
<view class="record-tip">{{ statusText }}</view>
|
||
<WaveDisplay
|
||
:background="audiowaveStyle"
|
||
:isActive="isRecording"
|
||
:audioData="audioDataForDisplay"
|
||
:showInfo="isRecording"
|
||
/>
|
||
</view>
|
||
<view class="input-area" v-show="status === 'idle'">
|
||
<view class="areatext">
|
||
<input
|
||
v-model="textInput"
|
||
placeholder-class="inputplaceholder"
|
||
class="input"
|
||
@confirm="sendMessage"
|
||
:disabled="isTyping"
|
||
:adjust-position="true"
|
||
placeholder="请输入您想找的岗位信息或就政策信息【比如:设计师、10000-12000、广州】【比如:今年喀什地区高校毕业生有什么就业政策】"
|
||
v-show="!isVoice"
|
||
/>
|
||
<view
|
||
class="input_vio"
|
||
@touchstart.prevent="handleTouchStart"
|
||
@touchmove="handleTouchMove"
|
||
@touchend="handleTouchEnd"
|
||
@touchcancel="handleTouchCancel"
|
||
v-show="isVoice"
|
||
type="default"
|
||
>
|
||
按住说话
|
||
</view>
|
||
<!-- upload -->
|
||
<view class="btn-box" @click="changeShowFile">
|
||
<image
|
||
class="send-btn"
|
||
:class="{ 'add-file-btn': showfile }"
|
||
src="/static/icon/addGroup.png"
|
||
></image>
|
||
</view>
|
||
<!-- sendmessgae Button-->
|
||
<view class="btn-box purple" v-if="textInput && !isTyping" @click="sendMessage">
|
||
<image class="send-btn" src="/static/icon/send3.png"></image>
|
||
</view>
|
||
<view class="btn-box" v-else-if="!isTyping && !isVoice" @click="changeVoice">
|
||
<image class="send-btn" src="/static/icon/send2x.png"></image>
|
||
</view>
|
||
<view class="btn-box" v-else-if="!isTyping" @click="changeVoice">
|
||
<image class="send-btn" src="/static/icon/send4.png"></image>
|
||
</view>
|
||
<view class="btn-box purple" v-else>
|
||
<view class="btn-box-round"></view>
|
||
</view>
|
||
</view>
|
||
<view class="ai-tips">本服务为AI生成内容，结果仅供参考</view>
|
||
<!-- 文件上传区域 - 使用绝对定位向上展开，避免被tabbar遮挡 -->
|
||
<view class="file-upload-popup" :class="{ show: showfile }">
|
||
<view class="area-tips">
|
||
<uni-icons type="info-filled" color="#ADADAD" size="15"></uni-icons>
|
||
上传后自动解析简历内容
|
||
</view>
|
||
<view class="area-file">
|
||
<view class="file-card" @click="uploadCamera">
|
||
<image class="card-img" src="/static/icon/file1.png"></image>
|
||
<text>拍照上传</text>
|
||
</view>
|
||
<view class="file-card" @click="uploadCamera('album')">
|
||
<image class="card-img" src="/static/icon/file2.png"></image>
|
||
<text>相册上传</text>
|
||
</view>
|
||
<view class="file-card" @click="getUploadFile">
|
||
<image class="card-img" src="/static/icon/file3.png"></image>
|
||
<text>文件上传</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- filelist -->
|
||
<view class="area-uploadfiles" v-if="filesList.length">
|
||
<scroll-view class="uploadfiles-scroll" scroll-x="true">
|
||
<view class="uploadfiles-list">
|
||
<view
|
||
class="file-uploadsend"
|
||
:class="{ 'file-border': isImage(file.type, file.name) }"
|
||
v-for="(file, index) in filesList"
|
||
:key="index"
|
||
>
|
||
<view class="file-thumbnail" @click="jumpUrl(file)">
|
||
<image
|
||
class="file-iconImg"
|
||
v-if="isImage(file.type, file.name) && !file.error"
|
||
:src="file.tempPath || file.url"
|
||
mode="aspectFill"
|
||
@load="onImageLoad(file)"
|
||
@error="onImageError(file)"
|
||
></image>
|
||
<view class="file-doc" v-else-if="!isImage(file.type, file.name)">
|
||
<FileIcon class="doc-icon" :type="file.type"></FileIcon>
|
||
</view>
|
||
<view class="image-loading" v-if="isImage(file.type, file.name) && file.loading">
|
||
<uni-icons type="spinner-cycle" size="30" color="#999"></uni-icons>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
<view class="image-error" v-if="isImage(file.type, file.name) && file.error" @click="retryImageLoad(file)">
|
||
<uni-icons type="info" size="30" color="#ff4444"></uni-icons>
|
||
<text class="error-text">加载失败</text>
|
||
<text class="retry-text">点击重试</text>
|
||
</view>
|
||
<!-- 图片数量标签 -->
|
||
<view class="image-count-badge" v-if="isImage(file.type, file.name) && filesList.filter(f => isImage(f.type, f.name)).length > 1">
|
||
{{ filesList.filter(f => isImage(f.type, f.name)).indexOf(file) + 1 }}/{{ filesList.filter(f => isImage(f.type, f.name)).length }}
|
||
</view>
|
||
</view>
|
||
<view class="file-info">
|
||
<view class="filename-text">{{ file.name }}</view>
|
||
<view class="filerow" v-if="!isImage(file.type, file.name)">
|
||
<FileText :type="file.type"></FileText>
|
||
<view class="row-x"></view>
|
||
<view class="filename-size">{{ file.size }}</view>
|
||
</view>
|
||
<view class="filerow" v-else>
|
||
<text class="file-type-tag">图片</text>
|
||
<view class="row-x"></view>
|
||
<view class="filename-size">{{ file.size }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="file-del" catchtouchmove="true" @click="delfile(file)">
|
||
<uni-icons type="closeempty" color="#FFFFFF" size="10"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<PopupFeeBack ref="feeback" @onSend="confirmFeeBack"></PopupFeeBack>
|
||
<MsgTips ref="feeBackTips" content="已收到反馈，感谢您的关注" title="反馈成功" :icon="successIcon"></MsgTips>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
inject,
|
||
nextTick,
|
||
onMounted,
|
||
onUnmounted,
|
||
toRaw,
|
||
reactive,
|
||
computed,
|
||
watch,
|
||
getCurrentInstance,
|
||
} from 'vue';
|
||
import { storeToRefs } from 'pinia';
|
||
// 移除重复导入，使用从globalFunction注入的config
|
||
import useChatGroupDBStore from '@/stores/userChatGroupStore';
|
||
import MdRender from '@/components/md-render/md-render.vue';
|
||
import PopupFeeBack from './popupbadFeeback.vue';
|
||
import AudioWave from './AudioWave.vue';
|
||
import WaveDisplay from './WaveDisplay.vue';
|
||
import FileIcon from './fileIcon.vue';
|
||
import FileText from './fileText.vue';
|
||
import { useAudioRecorder } from '@/hook/useRealtimeRecorder.js';
|
||
import { useTTSPlayer } from '@/hook/useTTSPlayer.js';
|
||
import successIcon from '@/static/icon/success.png';
|
||
// 全局
|
||
const { $api, navTo, throttle, config } = inject('globalFunction');
|
||
const emit = defineEmits(['onConfirm']);
|
||
const { messages, isTyping, textInput, chatSessionID } = storeToRefs(useChatGroupDBStore());
|
||
// hook
|
||
const {
|
||
isRecording,
|
||
startRecording,
|
||
stopRecording,
|
||
cancelRecording,
|
||
audioDataForDisplay,
|
||
volumeLevel,
|
||
recognizedText,
|
||
lastFinalText,
|
||
recordingDuration,
|
||
isRecognizing,
|
||
reset
|
||
} = useAudioRecorder();
|
||
|
||
// 监听语音识别结果变化，自动发送消息
|
||
watch(
|
||
() => recognizedText.value,
|
||
(newVal) => {
|
||
if (newVal && newVal.trim()) {
|
||
console.log('监听到语音识别结果变化，自动发送消息:', newVal);
|
||
sendMessage(newVal);
|
||
}
|
||
}
|
||
);
|
||
|
||
// 监听isRecognizing状态，显示提示
|
||
watch(
|
||
() => isRecognizing.value,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
$api.msg('正在识别语音...');
|
||
}
|
||
}
|
||
);
|
||
|
||
const { speak, pause, resume, isSpeaking, isPaused, cancelAudio } = useTTSPlayer(config.speechSynthesis);
|
||
|
||
// 获取组件实例（用于小程序 SelectorQuery）
|
||
const instance = getCurrentInstance();
|
||
|
||
// state
|
||
const activeTab = ref('policy'); // 'policy' or 'job'
|
||
const queries = ref([]);
|
||
const guessList = ref([]);
|
||
const scrollTop = ref(0);
|
||
const showGuess = ref(false);
|
||
const showfile = ref(false);
|
||
const filesList = ref([]);
|
||
const bgText = ref(false);
|
||
const isVoice = ref(false);
|
||
const status = ref('idle'); // idle | recording | cancel
|
||
const startY = ref(0);
|
||
const cancelThreshold = 100;
|
||
const speechIndex = ref(0);
|
||
const isAudioPermission = ref(false);
|
||
const feebackData = ref(null);
|
||
// 删除功能相关状态
|
||
const isSelectMode = ref(false);
|
||
const selectedMessages = ref([]);
|
||
// ref for DOM element
|
||
const voiceBtn = ref(null);
|
||
const feeback = ref(null);
|
||
const feeBackTips = ref(null);
|
||
const state = reactive({
|
||
uploadFileTips: '请根据以上附件，帮我推荐岗位。',
|
||
});
|
||
|
||
const statusText = computed(() => {
|
||
switch (status.value) {
|
||
case 'recording':
|
||
return '松手发送，上划取消';
|
||
case 'cancel':
|
||
return '松手取消';
|
||
default:
|
||
return '按住说话';
|
||
}
|
||
});
|
||
|
||
const audiowaveStyle = computed(() => {
|
||
return status.value === 'cancel'
|
||
? '#f54545'
|
||
: status.value === 'recording'
|
||
? 'linear-gradient(to right, #377dff, #9a60ff)'
|
||
: '#f1f1f1';
|
||
});
|
||
|
||
onMounted(async () => {
|
||
changeQueries();
|
||
scrollToBottom();
|
||
isAudioPermission.value = await requestMicPermission();
|
||
reset(); // 重置语音识别状态
|
||
});
|
||
|
||
const requestMicPermission = async () => {
|
||
// #ifdef H5
|
||
try {
|
||
if (typeof navigator !== 'undefined' && navigator.mediaDevices) {
|
||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||
console.log('✅ 麦克风权限已授权');
|
||
|
||
// 立刻停止所有音轨，释放麦克风
|
||
stream.getTracks().forEach((track) => track.stop());
|
||
|
||
return true;
|
||
} else {
|
||
console.warn('❌ 当前环境不支持麦克风');
|
||
return false;
|
||
}
|
||
} catch (err) {
|
||
console.warn('❌ 用户拒绝麦克风权限或不支持:', err);
|
||
return false;
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
try {
|
||
// 微信小程序使用 uni.authorize 请求权限
|
||
const res = await uni.authorize({
|
||
scope: 'scope.record'
|
||
});
|
||
console.log('✅ 麦克风权限已授权');
|
||
return true;
|
||
} catch (err) {
|
||
console.warn('❌ 用户拒绝麦克风权限:', err);
|
||
// 用户拒绝授权，但不影响其他功能
|
||
return false;
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef H5 || MP-WEIXIN
|
||
// 其他平台暂不支持
|
||
console.warn('❌ 当前平台不支持麦克风权限检测');
|
||
return false;
|
||
// #endif
|
||
};
|
||
|
||
function showControll(index) {
|
||
if (index === messages.value.length - 1 && isTyping.value) {
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
const sendMessage = (text) => {
|
||
const values = textInput.value || text;
|
||
showfile.value = false;
|
||
showGuess.value = false;
|
||
if (values.trim()) {
|
||
// 判断是否有对话ID // 没有则创建对话列表
|
||
const callback = () => {
|
||
const normalArr = toRaw(filesList.value); // 转换为普通数组
|
||
filesList.value = [];
|
||
useChatGroupDBStore()
|
||
.getStearm(values, normalArr, scrollToBottom, {
|
||
onDataReceived: (data, message, index) => {
|
||
// 流式朗读：只在内容足够长且包含完整信息时才开始朗读
|
||
if (!message.self && message.displayText && message.displayText.trim()) {
|
||
// 检查是否已经开始朗读这条消息
|
||
if (speechIndex.value !== index) {
|
||
// 延迟TTS，等待内容更完整
|
||
// 只有在内容长度超过50个字符或者包含岗位信息时才开始朗读
|
||
const hasJobInfo = message.displayText.includes('```job-json') ||
|
||
message.displayText.includes('岗位') ||
|
||
message.displayText.includes('公司') ||
|
||
message.displayText.includes('薪资');
|
||
|
||
if (message.displayText.length > 50 || hasJobInfo) {
|
||
console.log('🎵 Starting streaming TTS for message index:', index);
|
||
console.log('📝 Current text length:', message.displayText.length);
|
||
console.log('📝 Has job info:', hasJobInfo);
|
||
|
||
// 开始朗读当前消息
|
||
speechIndex.value = index;
|
||
readMarkdown(message.displayText, index, { immediate: false });
|
||
// 一旦开始朗读，就设置speechIndex，避免重复调用
|
||
speechIndex.value = index;
|
||
} else {
|
||
console.log('⏳ Waiting for more content before TTS, current length:', message.displayText.length);
|
||
}
|
||
} else {
|
||
// 已经开始朗读这条消息，不再重复调用
|
||
console.log('⏭️ Already speaking this message, skipping duplicate TTS call');
|
||
}
|
||
}
|
||
},
|
||
onComplete: () => {
|
||
console.log('🎯 onComplete callback triggered');
|
||
console.log('📊 Messages array length:', messages.value.length);
|
||
|
||
// 确保最后一条AI消息的朗读完成
|
||
const lastMessageIndex = messages.value.length - 1;
|
||
if (lastMessageIndex >= 0) {
|
||
const lastMessage = messages.value[lastMessageIndex];
|
||
if (!lastMessage.self && lastMessage.displayText && lastMessage.displayText.trim()) {
|
||
console.log('🎵 Final TTS for complete message');
|
||
console.log('📝 Final text length:', lastMessage.displayText.length);
|
||
console.log('📝 Final text preview:', lastMessage.displayText.substring(0, 100) + '...');
|
||
|
||
// 停止当前的朗读（如果有的话）
|
||
if (isSpeaking.value) {
|
||
console.log('🛑 Stopping current TTS to start final complete TTS');
|
||
cancelAudio();
|
||
}
|
||
|
||
// 开始朗读完整的内容
|
||
speechIndex.value = lastMessageIndex;
|
||
readMarkdown(lastMessage.displayText, lastMessageIndex, { immediate: true });
|
||
}
|
||
}
|
||
},
|
||
})
|
||
.then(() => {
|
||
getGuess();
|
||
scrollToBottom();
|
||
});
|
||
emit('onConfirm', values);
|
||
textInput.value = '';
|
||
scrollToBottom();
|
||
};
|
||
// 没有对话列表则创建
|
||
if (!chatSessionID.value) {
|
||
useChatGroupDBStore()
|
||
.addTabel(values)
|
||
.then((res) => {
|
||
callback();
|
||
});
|
||
} else {
|
||
callback();
|
||
}
|
||
} else {
|
||
if (filesList.value.length) {
|
||
$api.msg('上传文件请输入想问的问题描述');
|
||
} else {
|
||
$api.msg('请输入职位信息或描述');
|
||
}
|
||
}
|
||
};
|
||
|
||
const sendMessageGuess = (item) => {
|
||
showGuess.value = false;
|
||
textInput.value = item;
|
||
sendMessage(item);
|
||
};
|
||
|
||
const delfile = (file) => {
|
||
uni.showModal({
|
||
content: '确认删除文件？',
|
||
success(res) {
|
||
if (res.confirm) {
|
||
filesList.value = filesList.value.filter((item) => item.url !== file.url);
|
||
if (!filesList.value.length) {
|
||
if (textInput.value === state.uploadFileTips) {
|
||
textInput.value = '';
|
||
}
|
||
}
|
||
$api.msg('附件删除成功');
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
const scrollToBottom = throttle(function () {
|
||
nextTick(() => {
|
||
try {
|
||
let query;
|
||
// #ifdef MP-WEIXIN
|
||
query = uni.createSelectorQuery().in(instance);
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
query = uni.createSelectorQuery();
|
||
// #endif
|
||
|
||
query.select('.scrollView').boundingClientRect();
|
||
query.select('.list-content').boundingClientRect();
|
||
query.exec((res) => {
|
||
if (!res || !res[0] || !res[1]) {
|
||
console.warn('scrollToBottom: 元素未找到或尚未渲染');
|
||
return;
|
||
}
|
||
const scrollViewHeight = res[0].height;
|
||
const scrollContentHeight = res[1].height;
|
||
if (scrollContentHeight > scrollViewHeight) {
|
||
const scrolldistance = scrollContentHeight - scrollViewHeight;
|
||
scrollTop.value = scrolldistance;
|
||
}
|
||
});
|
||
} catch (err) {
|
||
console.warn(err);
|
||
}
|
||
});
|
||
}, 500);
|
||
|
||
function getGuess() {
|
||
// $api.chatRequest('/guest', { sessionId: chatSessionID.value }, 'POST').then((res) => {
|
||
$api.chatRequest('/guest', undefined, 'POST').then((res) => {
|
||
console.log('getGuess ---- res:', res);
|
||
guessList.value = res.data;
|
||
showGuess.value = true;
|
||
nextTick(() => {
|
||
scrollToBottom();
|
||
});
|
||
});
|
||
}
|
||
|
||
// 从文件路径提取文件名
|
||
function getFileNameFromPath(filePath) {
|
||
if (!filePath) return '';
|
||
// 处理反斜杠和正斜杠
|
||
const path = filePath.replace(/\\/g, '/');
|
||
const lastSlashIndex = path.lastIndexOf('/');
|
||
if (lastSlashIndex !== -1) {
|
||
return path.substring(lastSlashIndex + 1);
|
||
}
|
||
return path;
|
||
}
|
||
|
||
// 从文件名推断文件类型
|
||
function getFileTypeFromName(fileName) {
|
||
if (!fileName) return '';
|
||
const lowerName = fileName.toLowerCase();
|
||
if (lowerName.endsWith('.jpg') || lowerName.endsWith('.jpeg')) return 'image/jpeg';
|
||
if (lowerName.endsWith('.png')) return 'image/png';
|
||
if (lowerName.endsWith('.gif')) return 'image/gif';
|
||
if (lowerName.endsWith('.bmp')) return 'image/bmp';
|
||
if (lowerName.endsWith('.webp')) return 'image/webp';
|
||
if (lowerName.endsWith('.svg')) return 'image/svg+xml';
|
||
if (lowerName.endsWith('.pdf')) return 'application/pdf';
|
||
if (lowerName.endsWith('.doc')) return 'application/msword';
|
||
if (lowerName.endsWith('.docx')) return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
||
if (lowerName.endsWith('.ppt')) return 'application/vnd.ms-powerpoint';
|
||
if (lowerName.endsWith('.pptx')) return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
|
||
if (lowerName.endsWith('.xls')) return 'application/vnd.ms-excel';
|
||
if (lowerName.endsWith('.xlsx')) return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
||
if (lowerName.endsWith('.txt')) return 'text/plain';
|
||
if (lowerName.endsWith('.md')) return 'text/markdown';
|
||
if (lowerName.endsWith('.html') || lowerName.endsWith('.htm')) return 'text/html';
|
||
if (lowerName.endsWith('.csv')) return 'text/csv';
|
||
return '';
|
||
}
|
||
|
||
function isImage(type, name) {
|
||
if (!type && !name) return false;
|
||
|
||
const debug = false;
|
||
if (debug) console.log('isImage检查:', { type, name });
|
||
|
||
if (type) {
|
||
const lowerType = type.toLowerCase();
|
||
|
||
if (lowerType.includes('image/')) {
|
||
if (debug) console.log('通过MIME类型识别为图片:', lowerType);
|
||
return true;
|
||
}
|
||
|
||
if (lowerType.includes('image')) {
|
||
if (debug) console.log('通过"image"关键词识别为图片:', lowerType);
|
||
return true;
|
||
}
|
||
|
||
const imageExtensionsInType = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'heic', 'heif', 'tiff', 'tif'];
|
||
for (const ext of imageExtensionsInType) {
|
||
if (lowerType.includes(ext)) {
|
||
if (debug) console.log('通过类型中的扩展名识别为图片:', ext);
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (name) {
|
||
const lowerName = name.toLowerCase();
|
||
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.heic', '.heif', '.tiff', '.tif', '.jfif', '.pjpeg', '.pjp'];
|
||
for (const ext of imageExtensions) {
|
||
if (lowerName.endsWith(ext)) {
|
||
if (debug) console.log('通过文件扩展名识别为图片:', ext);
|
||
return true;
|
||
}
|
||
}
|
||
|
||
const imageExtensionsWithoutDot = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'heic', 'heif', 'tiff', 'tif', 'jfif', 'pjpeg', 'pjp'];
|
||
for (const ext of imageExtensionsWithoutDot) {
|
||
if (lowerName.endsWith('.' + ext)) {
|
||
if (debug) console.log('通过带点的扩展名识别为图片:', ext);
|
||
return true;
|
||
}
|
||
}
|
||
|
||
if (debug) console.log('未识别为图片:', lowerName);
|
||
}
|
||
|
||
if (debug) console.log('不是图片文件');
|
||
return false;
|
||
}
|
||
|
||
function isFile(type) {
|
||
const allowedTypes = config.allowedFileTypes || [];
|
||
if (!allowedTypes.includes(type)) {
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function jumpUrl(file) {
|
||
if (!file.url && !file.tempPath) {
|
||
$api.msg('文件地址丢失');
|
||
return;
|
||
}
|
||
|
||
if (isImage(file.type, file.name)) {
|
||
const imageUrl = file.tempPath || file.url;
|
||
uni.previewImage({ urls: [imageUrl], current: 0 });
|
||
} else {
|
||
window.open(file.url);
|
||
}
|
||
}
|
||
|
||
function VerifyNumberFiles(additionalCount = 1) {
|
||
const currentCount = filesList.value.length;
|
||
const maxCount = config.allowedFileNumber || 9;
|
||
|
||
if (currentCount + additionalCount > maxCount) {
|
||
$api.msg(`最多只能上传${maxCount}个文件，当前已有${currentCount}个`);
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function onImageLoad(file) {
|
||
const index = filesList.value.findIndex(f => f.url === file.url);
|
||
if (index !== -1) {
|
||
filesList.value[index].loading = false;
|
||
filesList.value[index].error = false;
|
||
}
|
||
}
|
||
|
||
function onImageError(file) {
|
||
const index = filesList.value.findIndex(f => f.url === file.url);
|
||
if (index !== -1) {
|
||
filesList.value[index].loading = false;
|
||
filesList.value[index].error = true;
|
||
}
|
||
}
|
||
|
||
function retryImageLoad(file) {
|
||
const index = filesList.value.findIndex(f => f.url === file.url);
|
||
if (index !== -1) {
|
||
filesList.value[index].loading = true;
|
||
filesList.value[index].error = false;
|
||
// 触发重新加载
|
||
setTimeout(() => {
|
||
if (filesList.value[index]) {
|
||
filesList.value[index].loading = false;
|
||
}
|
||
}, 100);
|
||
}
|
||
}
|
||
|
||
function uploadCamera(type = 'camera') {
|
||
// 在微信小程序中检查权限
|
||
// #ifdef MP-WEIXIN
|
||
const scope = type === 'camera' ? 'scope.camera' : 'scope.writePhotosAlbum';
|
||
|
||
uni.getSetting({
|
||
success: (res) => {
|
||
if (!res.authSetting[scope]) {
|
||
// 未授权，发起授权请求
|
||
uni.authorize({
|
||
scope: scope,
|
||
success: () => {
|
||
// 授权成功，执行选择图片
|
||
chooseImageAfterAuth();
|
||
},
|
||
fail: (err) => {
|
||
console.error('授权失败:', err);
|
||
if (err.errMsg && err.errMsg.includes('auth deny')) {
|
||
uni.showModal({
|
||
title: '权限提示',
|
||
content: `需要${type === 'camera' ? '相机' : '相册'}权限才能上传图片，请在设置中开启权限`,
|
||
showCancel: false,
|
||
confirmText: '确定'
|
||
});
|
||
} else {
|
||
$api.msg('授权失败，请重试');
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// 已授权，直接执行选择图片
|
||
chooseImageAfterAuth();
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取设置失败:', err);
|
||
chooseImageAfterAuth(); // 失败时也尝试选择图片
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
// 非微信小程序环境直接选择图片
|
||
chooseImageAfterAuth();
|
||
// #endif
|
||
|
||
function chooseImageAfterAuth() {
|
||
uni.chooseImage({
|
||
count: 9, //支持多选，最多9张
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
// sourceType: [type], // 移除 sourceType 参数，解决微信 "unknown scene" 错误
|
||
success: function (res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
const files = res.tempFiles;
|
||
|
||
// 检查文件数量限制
|
||
if (VerifyNumberFiles(files.length)) return;
|
||
|
||
// 显示上传提示
|
||
$api.msg(`开始上传${files.length}张图片...`);
|
||
|
||
// 上传所有图片
|
||
const uploadPromises = tempFilePaths.map((filePath, index) => {
|
||
return $api.uploadFile(filePath, true).then((resData) => {
|
||
resData = JSON.parse(resData);
|
||
if (resData.code === 200 && resData.filePath) {
|
||
// 从文件对象获取文件信息
|
||
const fileInfo = files[index] || {};
|
||
const fileName = getFileNameFromPath(fileInfo.name || filePath);
|
||
const fileType = fileInfo.type || getFileTypeFromName(fileName);
|
||
const fileSize = fileInfo.size || 0;
|
||
|
||
// 使用统一的文件路径处理函数
|
||
const processedFile = processFilePath(
|
||
resData.filePath, // 原始服务器路径
|
||
fileName,
|
||
fileType,
|
||
fileSize,
|
||
tempFilePaths[index] // 临时路径用于预览
|
||
);
|
||
|
||
// 添加图片加载状态字段
|
||
processedFile.loading = false;
|
||
processedFile.error = false;
|
||
|
||
return processedFile;
|
||
} else {
|
||
throw new Error(resData.msg || '上传失败');
|
||
}
|
||
});
|
||
});
|
||
|
||
Promise.all(uploadPromises).then((uploadedFiles) => {
|
||
// 将所有上传成功的文件添加到filesList，并设置图片加载状态
|
||
uploadedFiles.forEach(file => {
|
||
if (isImage(file.type, file.name)) {
|
||
file.loading = true; // 图片开始加载
|
||
}
|
||
filesList.value.push(file);
|
||
});
|
||
textInput.value = state.uploadFileTips;
|
||
showfile.value = false; // 关闭上传面板
|
||
$api.msg(`成功上传${uploadedFiles.length}张图片`);
|
||
}).catch((error) => {
|
||
$api.msg(error.message || '图片上传失败');
|
||
});
|
||
},
|
||
fail: function (err) {
|
||
console.error('选择图片失败:', err);
|
||
// 专门处理微信 "unknown scene" 错误
|
||
if (err.errMsg && err.errMsg.includes('unknown scene')) {
|
||
$api.msg('选择图片失败，请尝试重新选择或检查权限设置');
|
||
} else if (err.errMsg && err.errMsg.includes('auth deny')) {
|
||
$api.msg('没有相机或相册权限，请在设置中开启');
|
||
} else {
|
||
$api.msg('选择图片失败: ' + (err.errMsg || '未知错误'));
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function getUploadFile(type = 'camera') {
|
||
// 检测是否是微信小程序环境
|
||
const isWeixinMiniProgram = typeof wx !== 'undefined' && wx.chooseMessageFile;
|
||
|
||
console.log('当前环境检测:', {
|
||
isWeixinMiniProgram,
|
||
wxExists: typeof wx !== 'undefined',
|
||
hasChooseMessageFile: typeof wx !== 'undefined' && wx.chooseMessageFile
|
||
});
|
||
|
||
if (isWeixinMiniProgram) {
|
||
console.log('微信小程序环境，使用uni.chooseMessageFile');
|
||
// 微信小程序环境：使用uni.chooseMessageFile
|
||
uni.chooseMessageFile({
|
||
count: 9,
|
||
type: 'file',
|
||
success: (res) => {
|
||
console.log('uni.chooseMessageFile返回的res:', res);
|
||
// uni.chooseMessageFile返回的数据结构不同
|
||
// tempFiles数组中每个对象有path、name、size等属性
|
||
const tempFiles = res.tempFiles || [];
|
||
const tempFilePaths = tempFiles.map(file => file.path);
|
||
const files = tempFiles;
|
||
|
||
console.log('tempFilePaths:', tempFilePaths);
|
||
console.log('tempFiles:', tempFiles);
|
||
if (files && files.length > 0) {
|
||
console.log('第一个文件详情:', files[0]);
|
||
console.log('第一个文件的所有属性:', Object.keys(files[0]));
|
||
// 详细记录每个文件的所有属性
|
||
files.forEach((file, index) => {
|
||
console.log(`文件 ${index} 完整对象:`, JSON.stringify(file));
|
||
console.log(`文件 ${index} 关键属性:`, {
|
||
name: file.name,
|
||
type: file.type,
|
||
path: file.path,
|
||
size: file.size,
|
||
hasType: 'type' in file,
|
||
typeIsString: typeof file.type === 'string',
|
||
typeLength: file.type ? file.type.length : 0
|
||
});
|
||
});
|
||
}
|
||
|
||
// 调用公共的文件处理函数
|
||
handleSelectedFiles(tempFilePaths, files);
|
||
},
|
||
fail: (err) => {
|
||
console.error('uni.chooseMessageFile失败:', err);
|
||
// 微信小程序特定的错误处理
|
||
if (err.errMsg && err.errMsg.includes('cancel')) {
|
||
// 用户取消选择，不提示错误
|
||
console.log('用户取消选择文件');
|
||
} else {
|
||
$api.msg('选择文件失败，请重试');
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
console.log('非微信小程序环境，使用uni.chooseFile');
|
||
// 其他平台：使用uni.chooseFile
|
||
uni.chooseFile({
|
||
count: 9,
|
||
success: (res) => {
|
||
console.log('uni.chooseFile返回的res:', res);
|
||
const tempFilePaths = res.tempFilePaths;
|
||
const files = res.tempFiles;
|
||
|
||
console.log('tempFilePaths:', tempFilePaths);
|
||
console.log('tempFiles:', files);
|
||
if (files && files.length > 0) {
|
||
console.log('第一个文件详情:', files[0]);
|
||
console.log('第一个文件的所有属性:', Object.keys(files[0]));
|
||
// 详细记录每个文件的所有属性
|
||
files.forEach((file, index) => {
|
||
console.log(`文件 ${index} 完整对象:`, JSON.stringify(file));
|
||
console.log(`文件 ${index} 关键属性:`, {
|
||
name: file.name,
|
||
type: file.type,
|
||
path: file.path,
|
||
size: file.size,
|
||
hasType: 'type' in file,
|
||
typeIsString: typeof file.type === 'string',
|
||
typeLength: file.type ? file.type.length : 0
|
||
});
|
||
});
|
||
}
|
||
|
||
// 调用公共的文件处理函数
|
||
handleSelectedFiles(tempFilePaths, files);
|
||
},
|
||
fail: (err) => {
|
||
console.error('uni.chooseFile失败:', err);
|
||
if (err.errMsg && !err.errMsg.includes('cancel')) {
|
||
$api.msg('选择文件失败，请重试');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 处理服务器返回的文件路径，生成正确的显示URL和服务器路径
|
||
function processFilePath(originalFilePath, fileName, fileType, fileSize, tempPath) {
|
||
let displayUrl = originalFilePath; // 用于缩略图显示的URL（外网域名）
|
||
const serverPath = originalFilePath; // 原始服务器路径（内网地址，用于对话接口）
|
||
|
||
console.log('processFilePath原始fileUrl:', originalFilePath);
|
||
|
||
// 如果filePath包含IP地址，替换为配置的域名（用于显示）
|
||
if (displayUrl && displayUrl.includes('://')) {
|
||
// 检查是否是本地临时路径（如http://tmp/），如果是则保持原样
|
||
if (displayUrl.startsWith('http://tmp/')) {
|
||
// 本地临时路径，保持原样
|
||
console.log('本地临时路径，保持原样:', displayUrl);
|
||
} else {
|
||
// 方法1：直接替换域名部分（保持路径结构）- 使用兼容的方法
|
||
// 例如：http://10.98.80.146/file/xxx.jpg -> https://www.xjksly.cn/file/xxx.jpg
|
||
const originalUrl = displayUrl;
|
||
|
||
// 提取协议、域名和路径部分
|
||
let protocol = '';
|
||
let domain = '';
|
||
let path = '';
|
||
|
||
// 分离协议和剩余部分
|
||
const protocolIndex = originalUrl.indexOf('://');
|
||
if (protocolIndex !== -1) {
|
||
protocol = originalUrl.substring(0, protocolIndex + 3);
|
||
const rest = originalUrl.substring(protocolIndex + 3);
|
||
const slashIndex = rest.indexOf('/');
|
||
if (slashIndex !== -1) {
|
||
domain = rest.substring(0, slashIndex);
|
||
path = rest.substring(slashIndex);
|
||
} else {
|
||
domain = rest;
|
||
path = '/';
|
||
}
|
||
}
|
||
|
||
console.log('解析结果:', { protocol, domain, path });
|
||
|
||
// 使用config.baseUrl或config.imgBaseUrl作为新域名
|
||
let baseUrl = config.baseUrl || config.imgBaseUrl;
|
||
// 如果baseUrl以/api/ks结尾，去掉这个部分
|
||
if (baseUrl.endsWith('/api/ks')) {
|
||
baseUrl = baseUrl.substring(0, baseUrl.length - 7);
|
||
}
|
||
|
||
// 构建新URL：使用新域名 + 原路径
|
||
// 确保baseUrl不以/结尾，path以/开头
|
||
let cleanBaseUrl = baseUrl;
|
||
if (cleanBaseUrl.endsWith('/')) {
|
||
cleanBaseUrl = cleanBaseUrl.substring(0, cleanBaseUrl.length - 1);
|
||
}
|
||
if (!path.startsWith('/')) {
|
||
path = '/' + path;
|
||
}
|
||
|
||
displayUrl = cleanBaseUrl + path;
|
||
console.log('替换域名后的displayUrl（用于显示）:', displayUrl);
|
||
}
|
||
} else if (displayUrl && !displayUrl.startsWith('http')) {
|
||
// 如果filePath不是完整的URL，直接添加图片基础URL前缀
|
||
displayUrl = config.imgBaseUrl + displayUrl;
|
||
console.log('非完整URL，添加imgBaseUrl前缀:', displayUrl);
|
||
}
|
||
|
||
return {
|
||
url: displayUrl, // 使用处理后的完整URL（用于缩略图显示）
|
||
serverPath: serverPath, // 原始服务器路径（内网地址，用于对话接口）
|
||
type: fileType,
|
||
name: fileName,
|
||
size: fileSize > 0 ? $api.formatFileSize(fileSize) : '',
|
||
tempPath: tempPath // 保存临时路径用于预览
|
||
};
|
||
}
|
||
|
||
// 处理选择的文件（公共逻辑）
|
||
function handleSelectedFiles(tempFilePaths, files) {
|
||
// 检查文件数量限制
|
||
if (VerifyNumberFiles(files.length)) return;
|
||
|
||
const allowedTypes = config.allowedFileTypes || [];
|
||
|
||
// 调试：在文件类型检查之前记录详细信息
|
||
console.log('=== handleSelectedFiles 文件类型检查开始 ===');
|
||
console.log('allowedTypes配置:', allowedTypes);
|
||
console.log('files数组长度:', files.length);
|
||
files.forEach((file, index) => {
|
||
console.log(`文件 ${index} 检查前详情:`, {
|
||
name: file.name,
|
||
type: file.type,
|
||
hasType: 'type' in file,
|
||
typeValue: file.type,
|
||
typeIsString: typeof file.type === 'string',
|
||
typeLength: file.type ? file.type.length : 0,
|
||
size: file.size,
|
||
path: file.path
|
||
});
|
||
// 尝试从文件名推断类型
|
||
const inferredType = getFileTypeFromName(file.name);
|
||
console.log(`文件 ${index} 从文件名推断的类型:`, inferredType);
|
||
// 检查是否在allowedTypes中
|
||
const isAllowedByType = allowedTypes.includes(file.type);
|
||
const isAllowedByInferred = allowedTypes.includes(inferredType);
|
||
const isImageFile = isImage(file.type, file.name);
|
||
console.log(`文件 ${index} 检查结果:`, {
|
||
isAllowedByType,
|
||
isAllowedByInferred,
|
||
isImageFile,
|
||
finalAllowed: isAllowedByType || isAllowedByInferred || isImageFile
|
||
});
|
||
});
|
||
console.log('=== handleSelectedFiles 文件类型检查结束 ===');
|
||
|
||
// 检查所有文件类型 - 增强版：优先使用file.type，回退到文件名推断
|
||
const invalidFiles = files.filter(file => {
|
||
// 如果文件类型存在且在允许的类型列表中，则通过
|
||
if (file.type && allowedTypes.includes(file.type)) {
|
||
return false;
|
||
}
|
||
|
||
// 尝试从文件名推断类型
|
||
const inferredType = getFileTypeFromName(file.name);
|
||
if (inferredType && allowedTypes.includes(inferredType)) {
|
||
return false;
|
||
}
|
||
|
||
// 如果是图片，也通过
|
||
if (isImage(file.type, file.name)) {
|
||
return false;
|
||
}
|
||
|
||
// 否则，文件无效
|
||
return true;
|
||
});
|
||
|
||
if (invalidFiles.length > 0) {
|
||
// 调试：查看不支持的文件类型
|
||
console.log('不支持的文件类型:', invalidFiles.map(f => ({name: f.name, type: f.type})));
|
||
// 更详细地显示为什么这些文件不被支持
|
||
invalidFiles.forEach((file, index) => {
|
||
const inferredType = getFileTypeFromName(file.name);
|
||
console.log(`无效文件 ${index} 分析:`, {
|
||
name: file.name,
|
||
type: file.type,
|
||
inferredType,
|
||
isImage: isImage(file.type, file.name),
|
||
isInAllowedTypes: allowedTypes.includes(file.type),
|
||
isInferredInAllowedTypes: allowedTypes.includes(inferredType)
|
||
});
|
||
});
|
||
return $api.msg('仅支持 txt md html word doc docx pdf ppt pptx csv excel xlsx 和图片格式');
|
||
}
|
||
|
||
// 显示上传提示
|
||
const imageCount = files.filter(file => isImage(file.type, file.name)).length;
|
||
const otherFileCount = files.length - imageCount;
|
||
let tip = '开始上传';
|
||
if (imageCount > 0) tip += `${imageCount}张图片`;
|
||
if (otherFileCount > 0) {
|
||
if (imageCount > 0) tip += '和';
|
||
tip += `${otherFileCount}个文件`;
|
||
}
|
||
$api.msg(tip + '...');
|
||
|
||
// 上传所有文件
|
||
const uploadPromises = tempFilePaths.map((filePath, index) => {
|
||
return $api.uploadFile(filePath, true).then((resData) => {
|
||
resData = JSON.parse(resData);
|
||
console.log('服务器返回的resData:', resData);
|
||
if (resData.code === 200 && resData.filePath) {
|
||
// 从文件对象或文件路径获取文件信息
|
||
const fileInfo = files[index] || {};
|
||
const fileName = fileInfo.name || getFileNameFromPath(tempFilePaths[index]);
|
||
const fileType = fileInfo.type || getFileTypeFromName(fileName);
|
||
const fileSize = fileInfo.size || 0;
|
||
|
||
// 使用统一的文件路径处理函数
|
||
const processedFile = processFilePath(
|
||
resData.filePath, // 原始服务器路径
|
||
fileName,
|
||
fileType,
|
||
fileSize,
|
||
tempFilePaths[index] // 临时路径用于预览
|
||
);
|
||
|
||
// 调试：记录文件信息
|
||
console.log('上传文件信息:', {
|
||
fileInfo: fileInfo,
|
||
type: fileType,
|
||
name: fileName,
|
||
size: fileSize,
|
||
isImage: isImage(fileType, fileName),
|
||
originalFilePath: resData.filePath,
|
||
displayUrl: processedFile.url,
|
||
serverPath: processedFile.serverPath,
|
||
imgBaseUrl: config.imgBaseUrl
|
||
});
|
||
|
||
return processedFile;
|
||
} else {
|
||
throw new Error(resData.msg || '上传失败');
|
||
}
|
||
});
|
||
});
|
||
|
||
Promise.all(uploadPromises).then((uploadedFiles) => {
|
||
// 将所有上传成功的文件添加到filesList
|
||
uploadedFiles.forEach(file => {
|
||
if (isImage(file.type, file.name)) {
|
||
file.loading = true; // 图片开始加载
|
||
file.error = false;
|
||
}
|
||
filesList.value.push(file);
|
||
});
|
||
textInput.value = state.uploadFileTips;
|
||
showfile.value = false; // 关闭上传面板
|
||
$api.msg(`成功上传${uploadedFiles.length}个文件`);
|
||
}).catch((error) => {
|
||
$api.msg(error.message || '文件上传失败');
|
||
});
|
||
}
|
||
|
||
const tipsPermisson = () => {
|
||
uni.showToast({
|
||
title: '需要授权麦克风权限才能使用语音功能',
|
||
icon: 'none',
|
||
});
|
||
};
|
||
|
||
const handleTouchStart = async (e) => {
|
||
if (!isAudioPermission.value) {
|
||
return tipsPermisson();
|
||
}
|
||
cancelAudio();
|
||
startY.value = e.touches[0].clientY;
|
||
status.value = 'recording';
|
||
showfile.value = false;
|
||
startRecording();
|
||
$api.sleep(1000).then(() => {
|
||
scrollToBottom();
|
||
});
|
||
};
|
||
|
||
const handleTouchMove = (e) => {
|
||
const moveY = e.touches[0].clientY;
|
||
if (startY.value - moveY > cancelThreshold) {
|
||
status.value = 'cancel';
|
||
} else {
|
||
status.value = 'recording';
|
||
}
|
||
};
|
||
|
||
const handleTouchEnd = () => {
|
||
if (status.value === 'cancel') {
|
||
console.log('取消发送');
|
||
cancelRecording();
|
||
status.value = 'idle';
|
||
} else {
|
||
stopRecording();
|
||
if (isAudioPermission.value) {
|
||
// 主要根据录音时长判断，而不是完全依赖识别结果
|
||
// 由于setInterval是异步的，这里需要考虑计时延迟
|
||
const actualDuration = recordingDuration.value > 0 ? recordingDuration.value : (isRecording.value ? 0.5 : 0);
|
||
if (actualDuration < 1) {
|
||
$api.msg('说话时长太短');
|
||
status.value = 'idle';
|
||
} else {
|
||
// 状态管理由useAudioRecorder hook内部处理
|
||
status.value = 'idle';
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleTouchCancel = () => {
|
||
stopRecording();
|
||
status.value = 'idle';
|
||
};
|
||
|
||
function closeGuess() {
|
||
showGuess.value = false;
|
||
}
|
||
|
||
function changeVoice() {
|
||
isVoice.value = !isVoice.value;
|
||
}
|
||
|
||
function changeShowFile() {
|
||
showfile.value = !showfile.value;
|
||
}
|
||
|
||
function closeFile() {
|
||
showfile.value = false;
|
||
}
|
||
|
||
function copyMarkdown(value) {
|
||
$api.copyText(value);
|
||
}
|
||
|
||
function userGoodFeedback(msg) {
|
||
// $api.msg('该功能正在开发中，敬请期待后续更新！');
|
||
feeback.value?.open();
|
||
feebackData.value = msg;
|
||
}
|
||
|
||
function confirmFeeBack(value) {
|
||
useChatGroupDBStore()
|
||
.badFeedback(feebackData.value, value)
|
||
.then(() => {
|
||
feeback.value?.close();
|
||
feeBackTips.value?.open();
|
||
});
|
||
}
|
||
|
||
// 防抖定时器
|
||
let ttsDebounceTimer = null;
|
||
|
||
// 保存上一次调用的文本内容，避免重复调用TTS
|
||
let lastSpeechText = '';
|
||
|
||
function readMarkdown(value, index, options = {}) {
|
||
console.log('🎤 readMarkdown called');
|
||
console.log('📝 Text to speak:', value ? value.substring(0, 100) + '...' : 'No text');
|
||
console.log('🔢 Index:', index);
|
||
console.log('🔢 Current speechIndex:', speechIndex.value);
|
||
console.log('⏸️ Is paused:', isPaused.value);
|
||
console.log('🔊 Is speaking:', isSpeaking.value);
|
||
|
||
// 清除之前的防抖定时器
|
||
if (ttsDebounceTimer) {
|
||
clearTimeout(ttsDebounceTimer);
|
||
}
|
||
|
||
// 总是先停止当前播放，无论是不是同一消息
|
||
console.log('🛑 Always stopping current speech before starting new one');
|
||
speechIndex.value = index;
|
||
|
||
// 立即调用speak，不使用防抖延迟
|
||
const speakNow = () => {
|
||
// 检查文本内容是否发生变化，避免重复调用TTS
|
||
if (value !== lastSpeechText) {
|
||
console.log('🎵 Starting new speech');
|
||
console.log('🎵 Calling speak function with text length:', value ? value.length : 0);
|
||
try {
|
||
speak(value);
|
||
console.log('✅ Speak function called successfully');
|
||
// 更新上一次调用的文本内容
|
||
lastSpeechText = value;
|
||
} catch (error) {
|
||
console.error('❌ Error calling speak function:', error);
|
||
}
|
||
} else {
|
||
console.log('🔄 Same text as last speech, skipping duplicate TTS call');
|
||
}
|
||
};
|
||
|
||
// 改进防抖逻辑，确保在短时间内只调用一次
|
||
if (options.immediate) {
|
||
// 如果是onComplete回调，立即播放
|
||
speakNow();
|
||
} else {
|
||
// 对于流式数据，总是使用防抖，避免频繁调用
|
||
ttsDebounceTimer = setTimeout(speakNow, 500); // 延长防抖时间到500ms
|
||
}
|
||
}
|
||
function stopMarkdown(value, index) {
|
||
console.log('⏸️ stopMarkdown called for index:', index);
|
||
console.log('🔢 Current speechIndex:', speechIndex.value);
|
||
console.log('🔊 Is speaking:', isSpeaking.value);
|
||
console.log('⏸️ Is paused:', isPaused.value);
|
||
|
||
// 清除防抖定时器
|
||
if (ttsDebounceTimer) {
|
||
clearTimeout(ttsDebounceTimer);
|
||
ttsDebounceTimer = null;
|
||
}
|
||
|
||
speechIndex.value = index;
|
||
pause();
|
||
}
|
||
function refreshMarkdown(index) {
|
||
if (isTyping.value) {
|
||
$api.msg('正在生成');
|
||
} else {
|
||
const text = messages.value[index - 1].text;
|
||
sendMessageGuess(text);
|
||
}
|
||
}
|
||
|
||
const jobSearchQueries = [
|
||
'喀什地区有哪些薪资 12K 以上的岗位适合我？',
|
||
'喀什地区 3 年工作经验能找到哪些 12K 以上的工作？',
|
||
'喀什地区哪些公司在招聘，薪资范围在 12K 以上？',
|
||
'喀什地区有哪些企业提供 15K 以上的岗位？',
|
||
'喀什地区哪些公司在招 3-5 年经验的岗位？',
|
||
'我有三年的工作经验，能否推荐一些适合我的喀什地区的国企 岗位？',
|
||
'喀什地区国企目前在招聘哪些岗位？',
|
||
'喀什地区有哪些适合 3 年经验的国企岗位？',
|
||
'喀什地区国企招聘的岗位待遇如何？',
|
||
'喀什地区国企岗位的薪资水平是多少？',
|
||
'喀什地区哪些国企支持双休 & 五险一金完善？',
|
||
'喀什地区有哪些公司支持远程办公？',
|
||
'喀什地区有哪些外企的岗位，薪资 12K 以上的多吗？',
|
||
'喀什地区哪些企业在招聘 Web3.0 相关岗位？',
|
||
'喀什地区哪些岗位支持海外远程？薪资如何？',
|
||
'喀什地区招聘 AI/大数据相关岗位的公司有哪些？',
|
||
];
|
||
|
||
function changeQueries(value) {
|
||
queries.value = getRandomJobQueries(jobSearchQueries);
|
||
}
|
||
|
||
function getRandomJobQueries(queries, count = 2) {
|
||
const shuffled = queries.sort(() => 0.5 - Math.random()); // 随机打乱数组
|
||
return shuffled.slice(0, count); // 取前 count 条
|
||
}
|
||
|
||
// 切换tab
|
||
function switchTab(tab) {
|
||
activeTab.value = tab;
|
||
}
|
||
|
||
// 检查消息是否应该显示在当前tab
|
||
function shouldShowMessage(msg) {
|
||
if (msg.self) {
|
||
return true; // 用户自己的消息总是显示
|
||
}
|
||
|
||
if (activeTab.value === 'policy') {
|
||
// 政策查询tab：显示除了岗位卡片以外的所有内容
|
||
// 岗位卡片通常包含特定的标记，如```job-json或岗位推荐等关键词
|
||
const isJobCard = msg.displayText && (
|
||
msg.displayText.includes('```job-json') ||
|
||
msg.displayText.includes('岗位推荐') ||
|
||
msg.displayText.includes('推荐岗位') ||
|
||
msg.displayText.includes('岗位信息') ||
|
||
(msg.displayText.includes('```') && msg.displayText.includes('公司') && msg.displayText.includes('薪资'))
|
||
);
|
||
return !isJobCard;
|
||
} else {
|
||
// 岗位推荐tab：只显示岗位卡片内容
|
||
const isJobCard = msg.displayText && (
|
||
msg.displayText.includes('```job-json') ||
|
||
msg.displayText.includes('岗位推荐') ||
|
||
msg.displayText.includes('推荐岗位') ||
|
||
msg.displayText.includes('岗位信息') ||
|
||
(msg.displayText.includes('```') && msg.displayText.includes('公司') && msg.displayText.includes('薪资'))
|
||
);
|
||
return isJobCard;
|
||
}
|
||
}
|
||
|
||
// 长按事件处理函数
|
||
function handleLongPress(msg, index) {
|
||
isSelectMode.value = true;
|
||
selectedMessages.value = [index];
|
||
|
||
// 如果长按的是用户消息，同时选中对应的AI回复
|
||
if (msg.self) {
|
||
const nextIndex = index + 1;
|
||
if (nextIndex < messages.value.length && !messages.value[nextIndex].self) {
|
||
selectedMessages.value.push(nextIndex);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 选择/取消选择消息
|
||
function toggleSelectMessage(index) {
|
||
const msg = messages.value[index];
|
||
const idx = selectedMessages.value.indexOf(index);
|
||
|
||
if (idx > -1) {
|
||
// 取消选择
|
||
selectedMessages.value.splice(idx, 1);
|
||
|
||
// 如果取消选择的是用户消息，同时取消选择对应的AI回复
|
||
if (msg.self) {
|
||
const nextIndex = index + 1;
|
||
if (nextIndex < messages.value.length && !messages.value[nextIndex].self) {
|
||
const aiIdx = selectedMessages.value.indexOf(nextIndex);
|
||
if (aiIdx > -1) {
|
||
selectedMessages.value.splice(aiIdx, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (selectedMessages.value.length === 0) {
|
||
isSelectMode.value = false;
|
||
}
|
||
} else {
|
||
// 选择消息
|
||
selectedMessages.value.push(index);
|
||
|
||
// 如果选择的是用户消息，同时选择对应的AI回复
|
||
if (msg.self) {
|
||
const nextIndex = index + 1;
|
||
if (nextIndex < messages.value.length && !messages.value[nextIndex].self) {
|
||
if (!selectedMessages.value.includes(nextIndex)) {
|
||
selectedMessages.value.push(nextIndex);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 退出选择模式
|
||
function exitSelectMode() {
|
||
isSelectMode.value = false;
|
||
selectedMessages.value = [];
|
||
}
|
||
|
||
// 全选消息
|
||
function selectAllMessages() {
|
||
selectedMessages.value = messages.value.map((_, index) => index);
|
||
}
|
||
|
||
// 删除选中消息
|
||
function deleteSelectedMessages() {
|
||
if (selectedMessages.value.length === 0) return;
|
||
|
||
uni.showModal({
|
||
content: `确定删除${selectedMessages.value.length}条消息吗？`,
|
||
success(res) {
|
||
if (res.confirm) {
|
||
// 调用store中的删除方法
|
||
useChatGroupDBStore().deleteMessages(selectedMessages.value);
|
||
// 退出选择模式
|
||
exitSelectMode();
|
||
$api.msg('消息删除成功');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
defineExpose({ scrollToBottom, closeGuess, closeFile, changeQueries, handleTouchCancel, switchTab });
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
/* 过渡样式 */
|
||
.collapse-enter-active,
|
||
.collapse-leave-active {
|
||
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||
}
|
||
|
||
.collapse-enter-from,
|
||
.collapse-leave-to {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.collapse-enter-to,
|
||
.collapse-leave-from {
|
||
max-height: 400rpx; /* 根据你内容最大高度设定 */
|
||
opacity: 1;
|
||
}
|
||
.msg-filecontent
|
||
display: flex
|
||
flex-wrap: wrap
|
||
.msg-files
|
||
overflow: hidden
|
||
margin-right: 10rpx
|
||
height: 30rpx
|
||
max-width: 201rpx
|
||
background: #FFFFFF
|
||
border-radius: 10rpx
|
||
display: flex
|
||
align-items: center
|
||
justify-content: flex-start
|
||
padding: 10rpx
|
||
color: #000000
|
||
margin-bottom: 10rpx
|
||
.msg-file-icon
|
||
width: 29rpx
|
||
height: 26rpx
|
||
padding-right: 10rpx
|
||
.msg-file-text
|
||
flex: 1
|
||
white-space: nowrap
|
||
overflow: hidden
|
||
text-overflow: ellipsis
|
||
color: rgba(96, 96, 96, 1)
|
||
font-size: 24rpx
|
||
.msg-files:active
|
||
background: #e9e9e9
|
||
|
||
// 消息中的图片文件样式
|
||
.msg-image-file
|
||
height: 120rpx
|
||
width: 120rpx
|
||
padding: 4rpx
|
||
flex-direction: column
|
||
justify-content: center
|
||
.msg-image-thumbnail
|
||
width: 100%
|
||
height: 80rpx
|
||
border-radius: 8rpx
|
||
margin-bottom: 8rpx
|
||
.msg-file-text
|
||
font-size: 20rpx
|
||
text-align: center
|
||
white-space: nowrap
|
||
overflow: hidden
|
||
text-overflow: ellipsis
|
||
.guess
|
||
padding: 5rpx 0 10rpx 0
|
||
.guess-list
|
||
padding: 16rpx 24rpx
|
||
margin-top: 28rpx
|
||
font-size: 24rpx
|
||
color: #8c8c8c
|
||
width: 100%;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
.gulist
|
||
display: flex
|
||
flex-wrap: wrap
|
||
position: relative
|
||
image-margin-top = 40rpx
|
||
.chat-container
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
position: relative
|
||
z-index: 1
|
||
background: #FFFFFF
|
||
|
||
.chat-background
|
||
position: absolute
|
||
padding: 44rpx;
|
||
display: flex
|
||
flex-direction: column
|
||
justify-content: flex-start
|
||
align-items: center
|
||
width: calc(100% - 88rpx)
|
||
position: relative
|
||
z-index: 1
|
||
.backlogo
|
||
width: 313rpx;
|
||
height: 190rpx;
|
||
.back-rowTitle
|
||
height: 56rpx;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
line-height: 47rpx;
|
||
margin-top: 40rpx
|
||
.back-rowText
|
||
margin-top: 28rpx
|
||
width: 100%;
|
||
height: 148rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx
|
||
// border-bottom: 2rpx dashed rgba(0, 0, 0, 0.2);
|
||
border-bottom: 2rpx solid transparent;
|
||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 50%, transparent 50%);
|
||
background-size: 10rpx 2rpx; /* 调整虚线宽度和间距 */
|
||
background-repeat: repeat-x;
|
||
background-position: 0 148rpx
|
||
.back-rowh3
|
||
width: 100%;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
margin-top: 28rpx
|
||
.back-rowmsg
|
||
width: calc(100% - 32rpx)
|
||
margin-top: 24rpx
|
||
font-weight: 500;
|
||
color: rgba(51, 51, 51, 1);
|
||
line-height: 28rpx;
|
||
font-size: 24rpx
|
||
background: rgba(246, 246, 246, 1);
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
padding: 32rpx 18rpx;
|
||
|
||
.chat-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
white-space: pre-wrap;
|
||
}
|
||
.list-content {
|
||
padding: 0 44rpx 10rpx 44rpx;
|
||
}
|
||
.chat-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 10rpx;
|
||
width: 100%;
|
||
}
|
||
.chat-item.self {
|
||
justify-content: flex-end;
|
||
}
|
||
.message
|
||
margin-top: 0rpx
|
||
// max-width: 80%;
|
||
width: 100%;
|
||
word-break: break-word;
|
||
color: #333333;
|
||
user-select: text;
|
||
-webkit-user-select: text;
|
||
.message-markdown
|
||
border-radius: 0 20rpx 20rpx 20rpx;
|
||
padding: 20rpx 20rpx 20rpx 20rpx;
|
||
background: #F6F6F6;
|
||
.message-controll
|
||
display: flex
|
||
justify-content: space-between
|
||
align-items: center
|
||
border-top: 2rpx solid #EAEAEA
|
||
padding: 24rpx 0 4rpx 0
|
||
margin-top: 10rpx
|
||
.controll-left
|
||
.controll-right
|
||
.controll-icon
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
|
||
.messageNull
|
||
display: none
|
||
.msg-loading{
|
||
background: #F6F6F6;
|
||
border-radius: 20rpx 0 20rpx 20rpx;
|
||
padding: 20rpx;
|
||
width: fit-content;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.loading-content{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.loading-text{
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.loaded{
|
||
padding-left: 20rpx
|
||
}
|
||
.chat-item.self .message {
|
||
background: linear-gradient( 225deg, #DAE2FE 0%, #E9E3FF 100%);
|
||
border-radius: 20rpx 0 20rpx 20rpx;
|
||
padding: 20rpx;
|
||
width: fit-content;
|
||
}
|
||
.input-area {
|
||
padding: 32rpx 28rpx 24rpx 28rpx;
|
||
/* #ifdef H5 */
|
||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 70rpx);
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
/* 小程序不支持CSS中的本地图片，使用image标签替代 */
|
||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 40rpx - 50rpx);
|
||
/* #endif */
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
|
||
transition: height 2s ease-in-out;
|
||
z-index: 1001;
|
||
}
|
||
.ai-tips{
|
||
font-size: 24rpx;
|
||
color: #8c8c8c;
|
||
line-height: 33rpx;
|
||
margin-top: 18rpx;
|
||
text-align: center;
|
||
}
|
||
.input-area::after
|
||
position: absolute
|
||
content: ''
|
||
top: 0
|
||
left: 0
|
||
width: 100%
|
||
z-index: 1
|
||
box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
|
||
.areatext{
|
||
display: flex;
|
||
}
|
||
.input {
|
||
flex: 1;
|
||
border-radius: 5rpx;
|
||
min-height: 63rpx;
|
||
line-height: 63rpx;
|
||
padding: 4rpx 24rpx;
|
||
position: relative
|
||
background: #F5F5F5;
|
||
border-radius: 60rpx 60rpx 60rpx 60rpx;
|
||
}
|
||
.input_vio
|
||
flex: 1;
|
||
border-radius: 5rpx;
|
||
min-height: 63rpx;
|
||
line-height: 63rpx;
|
||
padding: 4rpx 24rpx;
|
||
// position: relative
|
||
border-radius: 60rpx 60rpx 60rpx 60rpx;
|
||
font-size: 28rpx
|
||
color: #333333
|
||
background: #F5F5F5;
|
||
text-align: center
|
||
font-size: 28rpx
|
||
font-weight: 500
|
||
user-select:none;
|
||
-webkit-touch-callout:none;
|
||
-webkit-user-select:none;
|
||
-khtml-user-select:none;
|
||
-moz-user-select:none;
|
||
-ms-user-select:none;
|
||
touch-action: none; /* 禁用默认滚动 */
|
||
.input_vio:active
|
||
background: #e8e8e8
|
||
.vio_container
|
||
background: transparent
|
||
padding: 28rpx
|
||
text-align: center
|
||
-webkit-touch-callout:none;
|
||
-webkit-user-select:none;
|
||
-khtml-user-select:none;
|
||
-moz-user-select:none;
|
||
-ms-user-select:none;
|
||
touch-action: none; /* 禁用默认滚动 */
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 160rpx; /* 为底部导航栏留出空间 */
|
||
z-index: 9999; /* 确保高于其他元素 */
|
||
.record-tip
|
||
font-weight: 400;
|
||
color: #909090;
|
||
text-align: center;
|
||
padding-bottom: 16rpx
|
||
|
||
|
||
.inputplaceholder {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
line-height: 28rpx;
|
||
opacity: 0.4
|
||
}
|
||
.btn-box
|
||
margin-left: 12rpx;
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
border-radius: 50%
|
||
background: #F5F5F5;
|
||
display: flex
|
||
align-items: center
|
||
justify-content: center
|
||
.send-btn,
|
||
.receive-btn
|
||
transition: transform 0.5s ease;
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
.btn-box-round
|
||
width: 22rpx
|
||
height: 22rpx
|
||
border-radius: 4rpx
|
||
background: #FFFFFF
|
||
.purple
|
||
background: linear-gradient( 225deg, #9E74FD 0%, #256BFA 100%);
|
||
.add-file-btn{
|
||
transform: rotate(45deg)
|
||
transition: transform 0.5s ease;
|
||
}
|
||
.area-tips{
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #434343;
|
||
margin-top: 18rpx
|
||
}
|
||
|
||
/* 文件上传弹窗 - 向上展开，避免被tabbar遮挡 */
|
||
.file-upload-popup {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: #FFFFFF;
|
||
padding: 0 28rpx 24rpx 28rpx;
|
||
box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
|
||
transform: translateY(20rpx);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
z-index: 1002;
|
||
}
|
||
|
||
.file-upload-popup.show {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.area-file
|
||
display: grid
|
||
width: 100%
|
||
grid-template-columns: repeat(3, 1fr)
|
||
grid-gap: 20rpx
|
||
padding: 20rpx 0 0 0;
|
||
.file-card
|
||
display: flex
|
||
flex-direction: column
|
||
align-items: center
|
||
padding: 24rpx 0
|
||
background: #F5F5F5;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
text
|
||
font-size: 24rpx
|
||
font-weight: 500
|
||
color: rgba(0,0,0,.5)
|
||
padding-top: 8rpx
|
||
.card-img
|
||
height: 56rpx
|
||
width: 56rpx
|
||
.file-card:active
|
||
background: #e8e8e8
|
||
|
||
.area-uploadfiles
|
||
position: absolute
|
||
bottom: 100%
|
||
width: calc(100% - 30rpx)
|
||
background: #FFFFFF
|
||
left: 0
|
||
padding: 10rpx 0 10rpx 30rpx
|
||
box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
|
||
z-index: 1003
|
||
.uploadfiles-scroll
|
||
height: 100%
|
||
.uploadfiles-list
|
||
height: 100%
|
||
display: flex
|
||
margin-right: 28rpx
|
||
flex-wrap: nowrap
|
||
.file-doc
|
||
display: flex
|
||
align-items: center
|
||
justify-content: flex-start
|
||
padding: 16rpx 20rpx 18rpx 20rpx
|
||
height: calc(100% - 40rpx)
|
||
.doc-icon
|
||
width: 60rpx
|
||
height: 76rpx
|
||
margin-right: 20rpx
|
||
.doc-con
|
||
flex: 1
|
||
width: 0
|
||
.file-uploadsend
|
||
margin: 10rpx 18rpx 0 0;
|
||
height: 100%
|
||
font-size: 24rpx
|
||
position: relative
|
||
min-width: 200rpx;
|
||
max-width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #E2E2E2;
|
||
overflow: hidden
|
||
display: flex
|
||
flex-direction: column
|
||
&.file-border
|
||
border: 2rpx solid #4A90E2;
|
||
background: #F5F9FF;
|
||
.file-del
|
||
position: absolute
|
||
right: 25rpx
|
||
top: 18rpx
|
||
z-index: 9
|
||
border-radius: 50%
|
||
display: flex
|
||
align-items: center
|
||
justify-content: center
|
||
transform: translate(50%, -10rpx)
|
||
height: 40rpx
|
||
width: 37rpx;
|
||
height: 37rpx;
|
||
background: #4B4B4B;
|
||
border: 2rpx solid #FFFFFF;
|
||
.file-del:active
|
||
background: #e8e8e8
|
||
.filename-text
|
||
overflow: hidden
|
||
text-overflow: ellipsis
|
||
white-space: nowrap
|
||
color: #333333
|
||
font-size: 24rpx
|
||
font-weight: 500
|
||
max-width: 100%
|
||
.filename-size
|
||
overflow: hidden
|
||
text-overflow: ellipsis
|
||
white-space: nowrap
|
||
color: #7B7B7B;
|
||
max-width: 100%
|
||
.file-thumbnail
|
||
flex: 1
|
||
display: flex
|
||
align-items: center
|
||
justify-content: center
|
||
overflow: hidden
|
||
border-radius: 10rpx 10rpx 0 0
|
||
background: #F8F9FA
|
||
.file-iconImg
|
||
height: 100%
|
||
width: 100%
|
||
object-fit: cover
|
||
.file-info
|
||
padding: 12rpx 16rpx
|
||
background: white
|
||
border-top: 1rpx solid #F0F0F0
|
||
.file-type-tag
|
||
font-size: 20rpx
|
||
color: #4A90E2
|
||
background: #F0F7FF
|
||
padding: 4rpx 8rpx
|
||
border-radius: 4rpx
|
||
.image-loading, .image-error
|
||
position: absolute
|
||
top: 0
|
||
left: 0
|
||
right: 0
|
||
bottom: 0
|
||
display: flex
|
||
flex-direction: column
|
||
align-items: center
|
||
justify-content: center
|
||
background: rgba(255, 255, 255, 0.9)
|
||
.loading-text, .error-text
|
||
font-size: 24rpx
|
||
margin-top: 10rpx
|
||
.loading-text
|
||
color: #999
|
||
.error-text
|
||
color: #ff4444
|
||
.retry-text
|
||
font-size: 22rpx
|
||
color: #4A90E2
|
||
margin-top: 5rpx
|
||
text-decoration: underline
|
||
.image-count-badge
|
||
position: absolute
|
||
top: 10rpx
|
||
right: 10rpx
|
||
background: rgba(0, 0, 0, 0.6)
|
||
color: white
|
||
font-size: 20rpx
|
||
padding: 4rpx 8rpx
|
||
border-radius: 12rpx
|
||
z-index: 2
|
||
.filerow
|
||
display: flex
|
||
align-items: center
|
||
margin-top: 7rpx
|
||
.row-x
|
||
margin: 0 18rpx
|
||
height: 20rpx
|
||
width: 2rpx
|
||
background: rgba(226, 226, 226, .9)
|
||
.file-border
|
||
width: 160rpx !important;
|
||
|
||
/* 更美观的loading动画 - 兼容H5和小程序 */
|
||
@keyframes ai-loading-dots {
|
||
0%, 20%, 80%, 100% {
|
||
transform: scale(1);
|
||
opacity: 0.6;
|
||
}
|
||
40% {
|
||
transform: scale(1.2);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 重置默认样式 */
|
||
.ai-loading {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
width: auto;
|
||
height: auto;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 三个点的样式 - 使用标准CSS语法，不使用嵌套 */
|
||
.ai-loading view {
|
||
display: inline-block;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background-color: #256BFA;
|
||
animation: ai-loading-dots 1.4s ease-in-out infinite both;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 为每个点设置不同的动画延迟 */
|
||
.ai-loading view:nth-child(1) {
|
||
animation-delay: -0.32s;
|
||
}
|
||
|
||
.ai-loading view:nth-child(2) {
|
||
animation-delay: -0.16s;
|
||
}
|
||
|
||
.ai-loading view:nth-child(3) {
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
/* Tab切换样式 */
|
||
.tab-container {
|
||
display: flex;
|
||
background: #FFFFFF;
|
||
border-bottom: 2rpx solid #F4F4F4;
|
||
padding: 0 44rpx;
|
||
height: 88rpx;
|
||
align-items: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
line-height: 88rpx;
|
||
height: 88rpx;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #256BFA;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 60rpx;
|
||
height: 4rpx;
|
||
background: #256BFA;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
.tab-item:active {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
/* 选择模式样式 */
|
||
.select-mode-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 44rpx;
|
||
height: 88rpx;
|
||
background: #FFFFFF;
|
||
border-bottom: 2rpx solid #F4F4F4;
|
||
z-index: 10;
|
||
}
|
||
|
||
.select-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.select-count {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.select-all {
|
||
font-size: 28rpx;
|
||
color: #256BFA;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.select-header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.cancel-btn {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.delete-btn {
|
||
font-size: 28rpx;
|
||
color: #FF4444;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.delete-btn:disabled {
|
||
color: #CCCCCC;
|
||
}
|
||
|
||
/* 消息选择框样式 */
|
||
.message-checkbox {
|
||
margin-right: 12rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 2rpx solid #CCCCCC;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.checkbox.checked {
|
||
background-color: #256BFA;
|
||
border-color: #256BFA;
|
||
}
|
||
|
||
/* 调整消息项布局，为选择框留出空间 */
|
||
.chat-item {
|
||
position: relative;
|
||
}
|
||
|
||
.chat-item .message {
|
||
flex: 1;
|
||
}
|
||
</style>
|