<template>
|
<el-dialog title="分享链接" v-model="shareCodeIsShow" width="12%" modal-append-to-body lock-scroll :before-close="closeShareClick">
|
<div class="w100 h100 flex justify-center items-center flex-col text-center">
|
<div class="h100" ref="qrcodeRef"></div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts" name="ShareLinkDlg">
|
import { unrefElement } from '@vueuse/core';
|
import QRCode from 'qrcodejs2-fixes';
|
import { nextTick, ref } from 'vue';
|
import type { ChatMessage } from '../../model/types';
|
import { shareChatHistoryByPost } from '/@/api/ai/chat';
|
import { SHARE_URL } from '/@/constants';
|
import { ElMessage } from 'element-plus';
|
import useClipboard from 'vue-clipboard3';
|
|
const shareCodeIsShow = ref(false);
|
|
const closeShareClick = (item: ChatMessage) => {
|
shareCodeIsShow.value = false;
|
};
|
const qrcodeRef = ref<HTMLDivElement>(null);
|
|
const generateShareUrl = async (item: ChatMessage) => {
|
const historyId = item.historyId;
|
|
const res = await shareChatHistoryByPost({
|
history_ids: historyId,
|
share_days: 1,
|
});
|
|
if (!res.values) return;
|
const shareId = Object.values(res.values)[0];
|
if (!shareId) return;
|
const shareLink = `${SHARE_URL}?id=${shareId}`;
|
return shareLink;
|
};
|
const url = ref('');
|
const openShare = async (item: ChatMessage) => {
|
shareCodeIsShow.value = true;
|
url.value = await generateShareUrl(item);
|
copyShareCodeClick(url.value);
|
const qrCodeEle = unrefElement(qrcodeRef);
|
nextTick(() => {
|
qrCodeEle.innerHTML = '';
|
|
new QRCode(qrCodeEle, {
|
text: url,
|
width: 100,
|
height: 100,
|
colorDark: '#000000',
|
colorLight: '#ffffff',
|
});
|
});
|
};
|
const { toClipboard } = useClipboard();
|
|
const copyShareCodeClick = (url) => {
|
if (!url) return;
|
toClipboard(url);
|
ElMessage.success('已复制分享链接');
|
};
|
|
defineExpose({
|
openShare,
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
