ks-app-employment-service/pages/chat/components/ai-paging.vue

<template>
    <view class="chat-container">
        <!-- #ifdef MP-WEIXIN -->
         <view class="chat-background">
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view class="chat-background" v-fade:600="!messages.length">
        <!-- #endif -->
            <image class="backlogo" src="/static/icon/backAI.png"></image>
            <view class="back-rowTitle">嗨！欢迎使用青岛AI智能求职</view>
            <view class="back-rowText">
                我可以根据您的简历和求职需求，帮你精准匹配青岛市互联网招聘信息，对比招聘信息的优缺点，提供面试指导等，请把你的任务交给我吧~
            </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>
        <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"
                    :key="index"
                    :id="'msg-' + index"
                    class="chat-item"
                    :class="{ self: msg.self }"
                >
                    <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)"
                            >
                                <image 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)">
                                <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"
                        >
                            <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 v-if="isTyping" class="self">
                    <text class="message msg-loading">
                        <span class="ai-loading"></span>
                    </text>
                </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="false"
                    placeholder="请输入您的职位名称、薪资要求、岗位地址"
                    v-show="!isVoice"
                />
                <view
                    class="input_vio"
                    @touchstart.prevent="handleTouchStart"
                    @touchmove="handleTouchMove"
                    @touchend="handleTouchEnd"
                    @touchcancel="handleTouchCancel"
                    :catchtouchstart="true"
                    :catchtouchmove="true"
                    :catchtouchend="true"
                    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>
            <!-- btn -->
            <CollapseTransition :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>
            </CollapseTransition>

            <!-- 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) }"
                            v-for="(file, index) in filesList"
                            :key="index"
                        >
                            <image
                                class="file-iconImg"
                                @click="jumpUrl(file)"
                                v-if="isImage(file.type)"
                                :src="file.url"
                            ></image>
                            <view class="file-doc" @click="jumpUrl(file)" v-else>
                                <FileIcon class="doc-icon" :type="file.type"></FileIcon>
                                <view class="doc-con">
                                    <view class="filename-text">{{ file.name }}</view>
                                    <view class="filerow">
                                        <FileText :type="file.type"></FileText>
                                        <view class="row-x"></view>
                                        <view class="filename-size">{{ file.size }}</view>
                                    </view>
                                </view>
                                <!-- <image class="file-icon" @click="jumpUrl(file)" :src=""></image> -->
                            </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,
    defineProps,
    defineEmits,
    onMounted,
    onUnmounted,
    toRaw,
    reactive,
    computed,
    watch,
} from 'vue';
import { storeToRefs } from 'pinia';
import config from '@/config.js';
import useChatGroupDBStore from '@/stores/userChatGroupStore';
import MdRender from '@/components/md-render/md-render.vue';
import CollapseTransition from '@/components/CollapseTransition/CollapseTransition.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';
// 全局
const { $api, navTo, throttle } = inject('globalFunction');
const emit = defineEmits(['onConfirm']);
const { messages, isTyping, textInput, chatSessionID } = storeToRefs(useChatGroupDBStore());
import successIcon from '@/static/icon/success.png';
// hook
const {
    isRecording,
    startRecording,
    stopRecording,
    cancelRecording,
    audioDataForDisplay,
    volumeLevel,
    recognizedText,
    lastFinalText,
} = useAudioRecorder();

const { speak, pause, resume, isSpeaking, isPaused, cancelAudio } = useTTSPlayer(config.speechSynthesis);

// state
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);
// 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();
});

const requestMicPermission = async () => {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        console.log('✅ 麦克风权限已授权');

        // 立刻停止所有音轨，释放麦克风
        stream.getTracks().forEach((track) => track.stop());

        return true;
    } catch (err) {
        console.warn('❌ 用户拒绝麦克风权限或不支持:', err);
        return false;
    }
};

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, {
                    onComplete: () => console.log('Display complete'),
                })
                .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 {
            const query = uni.createSelectorQuery();
            query.select('.scrollView').boundingClientRect();
            query.select('.list-content').boundingClientRect();
            query.exec((res) => {
                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) => {
        guessList.value = res.data;
        showGuess.value = true;
        nextTick(() => {
            scrollToBottom();
        });
    });
}

function isImage(type) {
    return new RegExp('image').test(type);
}

function isFile(type) {
    const allowedTypes = config.allowedFileTypes || [];
    if (!allowedTypes.includes(type)) {
        return false;
    }
    return true;
}

function jumpUrl(file) {
    if (file.url) {
        window.open(file.url);
    } else {
        $api.msg('文件地址丢失');
    }
}

function VerifyNumberFiles(num) {
    if (filesList.value.length >= config.allowedFileNumber) {
        $api.msg(`最大上传文件数量 ${config.allowedFileNumber} 个`);
        return true;
    } else {
        return false;
    }
}

function uploadCamera(type = 'camera') {
    if (VerifyNumberFiles()) return;
    uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: [type], //从相册选择
        success: function (res) {
            const tempFilePaths = res.tempFilePaths;
            const file = res.tempFiles[0];
            // 继续上传
            $api.uploadFile(tempFilePaths[0], true).then((resData) => {
                resData = JSON.parse(resData);
                if (isImage(file.type)) {
                    filesList.value.push({
                        url: resData.msg,
                        type: file.type,
                        name: file.name,
                    });
                    textInput.value = state.uploadFileTips;
                }
            });
        },
    });
}

function getUploadFile(type = 'camera') {
    if (VerifyNumberFiles()) return;
    uni.chooseFile({
        count: 1,
        success: (res) => {
            const tempFilePaths = res.tempFilePaths;
            const file = res.tempFiles[0];
            const allowedTypes = config.allowedFileTypes || [];
            const size = $api.formatFileSize(file.size);
            if (!allowedTypes.includes(file.type)) {
                return $api.msg('仅支持 txt md html word pdf ppt csv excel 格式类型');
            }
            // 继续上传
            $api.uploadFile(tempFilePaths[0], true).then((resData) => {
                resData = JSON.parse(resData);
                filesList.value.push({
                    url: resData.msg,
                    type: file.type,
                    name: file.name,
                    size: size,
                });
                textInput.value = state.uploadFileTips;
            });
        },
    });
}

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();
    } else {
        stopRecording();
        if (isAudioPermission.value) {
            if (recognizedText.value) {
                sendMessage(recognizedText.value);
            } else {
                $api.msg('说话时长太短');
            }
        }
    }
    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 colseFile() {
    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();
        });
}

function readMarkdown(value, index) {
    speechIndex.value = index;
    if (speechIndex.value !== index) {
        speak(value);
        return;
    }
    if (isPaused.value) {
        resume();
    } else {
        speak(value);
    }
}
function stopMarkdown(value, index) {
    pause(value);
    speechIndex.value = index;
}
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 条
}

defineExpose({ scrollToBottom, closeGuess, colseFile, changeQueries, handleTouchCancel });
</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
.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 44rpx 44rpx;
}
.chat-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;
    width: 100%;
}
.chat-item.self {
    justify-content: flex-end;
}
.message
    margin-top: 40rpx
    // 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: transparent;
    font-size: 24rpx;
    color: #8f8d8e;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.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;
    position: relative;
    background: #FFFFFF;
    box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
    transition: height 2s ease-in-out;
}
.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; /* 禁用默认滚动 */
    .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
}
.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
    top: -180rpx
    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);
    .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: 460rpx;
                height: 160rpx;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                border: 2rpx solid #E2E2E2;
                overflow: hidden
                .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-iconImg
                    height: 100%
                    width: 100%
                .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;

@keyframes ai-circle {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.ai-loading
    display: inline-flex;
    vertical-align: middle;
    width: 28rpx;
    height: 28rpx;
    background: 0 0;
    border-radius: 50%;
    border: 4rpx solid;
    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
    -webkit-animation: ai-circle 1s linear infinite;
    animation: ai-circle 1s linear infinite;
</style>