优化手机扫码

yangyin

2024-11-29 3c0f2cd6720032f83ab34daff947bf31f3bb96b3

优化手机扫码

 src/components/chat/Chat.vue

@@ -276,7 +276,7 @@
        </div>
        <CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
        <el-dialog title="分享链接" v-model="shareCodeIsShow" width="25%" modal-append-to-body lock-scroll :before-close="closeShareClick">
            <div class="w100 h100 flex justify-center items-center flex-col">
            <div class="w100 h100 flex justify-center items-center flex-col text-center">
                <div class="qrcode h100" ref="qrcodeRef"></div>
                <div class="h100 w100 flex flex-col justify-center items-center">
                    <span class="h100 text-[#8d8e99] text-[12px] mt-2">{{ shareCoderUrl }}</span>

 src/layout/component/sidebar/SidebarOther.vue

@@ -54,7 +54,7 @@
                    <template #default>
                        <div class="relative">
                            <div class="p-0 box-shadow-none rounded-[10px]">
                                <p class="text-center text-[#5e6772] m-0 p-0 leading-5 text-[12px]">温馨提示:请使用手机浏览器扫描二维码</p>
                                <p class="text-center text-[#5e6772] m-0 p-0 leading-5 text-[12px]">请使用手机浏览器扫描二维码</p>
                                <p class="text-center text-[red] m-0 p-0 leading-5 text-[12px]">(不支持微信扫描)</p>
                                <div ref="setPhoneQRCode" class="mt-[8px] mb-[8px]"></div>
                                <p class="text-center text-[#5e6772] m-0 p-0 leading-5">
@@ -312,7 +312,8 @@
const setPhoneQRCode = ref<HTMLElement | null>(null);
// 初始化生成二维码
const initQrcode = () => {
    const url = `${SERVE_URL}ai_html/views/mobileDownload/index.html`;
    let currentTime = new Date().getTime();
    const url = `${SERVE_URL}ai_html/views/mobileDownload/index.html?v=${currentTime}`;
    nextTick(() => {
        (<HTMLElement>setPhoneQRCode.value).innerHTML = '';
        new QRCode(setPhoneQRCode.value, {

 src/layout/component/sidebar/components/ChatRecord.vue

@@ -1,14 +1,38 @@
<template>
    <div class="w100 h100 flex items-center flex-column box-border pr-1">
        <div class="w100 box-border px-[18px] py-0 flex-0">
            <el-button
                @click="newChatRoomClick"
                icon="ele-Plus"
                color="#1c86ff"
                class="flex items-center box-border mb-3 justify-center add_room cursor-pointer w-[124px] h-[32.88px] rounded-s-md text-white opacity-100"
            >
                新建对话
            </el-button>
            <div class="flex items-center justify-between">
                <el-button
                    @click="newChatRoomClick"
                    icon="ele-Plus"
                    color="#1c86ff"
                    class="flex items-center box-border mb-3 justify-center add_room cursor-pointer w-[124px] h-[32.88px] rounded-s-md text-white opacity-100"
                >
                    新建对话
                </el-button>
                <el-popover placement="right-start" :width="136" trigger="hover">
                    <template #reference>
                        <div class="nav__chat">
                            <div class="nav__chat-icon">
                                <span class="chat_img ywifont ywicon-shouji !text-[20px] text-[#fff]"></span>
                            </div>
                        </div>
                    </template>
                    <template #default>
                        <div class="relative">
                            <div class="p-0 box-shadow-none rounded-[10px]">
                                <p class="text-center text-[#5e6772] m-0 p-0 leading-5 text-[12px]">请使用手机浏览器扫描二维码</p>
                                <p class="text-center text-[red] m-0 p-0 leading-5 text-[12px]">(不支持微信扫描)</p>
                                <div ref="setPhoneQRCode" class="mt-[8px] mb-[8px]"></div>
                                <p class="text-center text-[#5e6772] m-0 p-0 leading-5">
                                    扫码下载 <br />
                                    WI 水务智能助手
                                </p>
                            </div>
                        </div>
                    </template>
                </el-popover>
            </div>
        </div>
        <div
            class="flex flex-col flex-auto w-[210.98px] rounded-t-lg box-border mb-3 relative opacity-100 shadow-lg shadow-[[#0e0e0f]-500/50"
@@ -66,9 +90,11 @@
import { Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { computed, onMounted, ref, watch } from 'vue';
import QRCode from 'qrcodejs2-fixes';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import type { ChatRoomItem } from './types';
import { DeleteHistoryGroups, setHistoryGroupTitle } from '/@/api/ai/chat';
import { SERVE_URL } from '/@/constants';
import { useSearch } from '/@/hooks/useSearch';
import { DateFilter, dateFilterMap } from '/@/model/types/date';
import { activeRoomId, chatRoomList, gotoAnswerPage, newChatRoomClick, selectFirstRoom } from '/@/stores/chatRoom';
@@ -168,9 +194,27 @@
    }
);
//#endregion

//#region ====================== 扫码手机端下载 ======================
const setPhoneQRCode = ref<HTMLElement | null>(null);
// 初始化生成二维码
const initQrcode = () => {
    let currentTime = new Date().getTime();
    const url = `${SERVE_URL}ai_html/views/mobileDownload/index.html?v=${currentTime}`;
    nextTick(() => {
        (<HTMLElement>setPhoneQRCode.value).innerHTML = '';
        new QRCode(setPhoneQRCode.value, {
            text: url,
            width: 126,
            height: 126,
            colorDark: '#000000',
            colorLight: '#ffffff',
        });
    });
};
//#endregion
onMounted(async () => {
    selectFirstRoom();
    initQrcode();
});
</script>
<style scoped lang="scss">
@@ -205,4 +249,36 @@
    width: 0;
    color: transparent;
}
.nav__chat {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    &:hover {
        background-color: #41424a;
    }
    .nav__chat-icon {
        background-position: 8px 8px;
        font-size: 25px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        &:hover {
            color: #0084ff;
        }
        .chat_img {
            display: inline-flex;
            align-items: center;
            color: inherit;
            font-style: normal;
            line-height: 0;
            text-align: center;
            text-transform: none;
            height: 40px;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
    }
}
</style>