Compare commits
10 Commits
markdown
...
1eca2cb273
| Author | SHA1 | Date | |
|---|---|---|---|
|
1eca2cb273 | ||
|
|
28452b4c07 | ||
|
|
340e2016d6 | ||
|
|
5dfaead60e | ||
|
|
c8acb12e4a | ||
|
|
5fbcb8cbd9 | ||
|
|
fd8d4399d3 | ||
|
|
63490484e9 | ||
|
|
6f1efafd86 | ||
|
|
2714a507d9 |
@@ -113,7 +113,7 @@
|
||||
<!-- 加载动画容器 -->
|
||||
<div id="yixinai-loader" class="loader-container">
|
||||
<div class="loader-title">意心Ai 2.8</div>
|
||||
<div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div>
|
||||
<div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒，无需梯子</div>
|
||||
<div class="loader-logo">
|
||||
<div class="pulse-box"></div>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,29 @@
|
||||
"vue": "^3.5.17",
|
||||
"vue-element-plus-x": "1.3.7",
|
||||
"vue-router": "4",
|
||||
"xlsx": "^0.18.5"
|
||||
"xlsx": "^0.18.5",
|
||||
"@shikijs/transformers": "^3.7.0",
|
||||
"chatarea": "^6.0.3",
|
||||
"deepmerge": "^4.3.1",
|
||||
"dompurify": "^3.2.6",
|
||||
"github-markdown-css": "^5.8.1",
|
||||
"highlight.js": "^11.11.1",
|
||||
"lodash": "^4.17.21",
|
||||
"mermaid": "11.12.0",
|
||||
"prismjs": "^1.30.0",
|
||||
"property-information": "^7.1.0",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"rehype-sanitize": "^6.0.0",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"remark-math": "^6.0.0",
|
||||
"remark-parse": "^11.0.0",
|
||||
"remark-rehype": "^11.1.2",
|
||||
"shiki": "^3.7.0",
|
||||
"ts-md5": "^2.0.1",
|
||||
"unified": "^11.0.5",
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^4.16.2",
|
||||
@@ -90,7 +112,37 @@
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-env-typed": "^0.0.2",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^3.0.1"
|
||||
"vue-tsc": "^3.0.1",
|
||||
"@chromatic-com/storybook": "^3.2.7",
|
||||
"@jsonlee_12138/markdown-it-mermaid": "0.0.6",
|
||||
"@storybook/addon-essentials": "^8.6.14",
|
||||
"@storybook/addon-onboarding": "^8.6.14",
|
||||
"@storybook/addons": "^7.6.17",
|
||||
"@storybook/api": "^7.6.17",
|
||||
"@storybook/blocks": "^8.6.14",
|
||||
"@storybook/experimental-addon-test": "^8.6.14",
|
||||
"@storybook/manager-api": "^8.6.14",
|
||||
"@storybook/test": "^8.6.14",
|
||||
"@storybook/theming": "^8.6.14",
|
||||
"@storybook/vue3": "^8.6.14",
|
||||
"@storybook/vue3-vite": "^8.6.14",
|
||||
"@types/dom-speech-recognition": "^0.0.4",
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/prismjs": "^1.26.5",
|
||||
"@vitest/browser": "^3.2.4",
|
||||
"@vitest/coverage-v8": "^3.2.4",
|
||||
"esno": "^4.8.0",
|
||||
"fast-glob": "^3.3.3",
|
||||
"playwright": "^1.53.2",
|
||||
"rimraf": "^6.0.1",
|
||||
"sass": "^1.89.2",
|
||||
"storybook": "^8.6.14",
|
||||
"storybook-dark-mode": "^4.0.2",
|
||||
"terser": "^5.43.1",
|
||||
"vite-plugin-dts": "^4.5.4",
|
||||
"vite-plugin-lib-inject-css": "^2.2.2",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
|
||||
4725
Yi.Ai.Vue3/pnpm-lock.yaml
generated
4725
Yi.Ai.Vue3/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
BIN
Yi.Ai.Vue3/publish_aihub_02.zip
Normal file
BIN
Yi.Ai.Vue3/publish_aihub_02.zip
Normal file
Binary file not shown.
355
Yi.Ai.Vue3/src/components/ChatMessageList/index.vue
Normal file
355
Yi.Ai.Vue3/src/components/ChatMessageList/index.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="chat-message-list" :style="{ maxHeight }">
|
||||
<div ref="scrollContainer" class="chat-message-list__container">
|
||||
<div class="chat-message-list__content">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="item.key || index"
|
||||
class="chat-message-item"
|
||||
:class="{
|
||||
'chat-message-item--user': item.placement === 'end',
|
||||
'chat-message-item--assistant': item.placement === 'start'
|
||||
}"
|
||||
>
|
||||
<!-- 消息头部 -->
|
||||
<div v-if="$slots.header" class="chat-message-item__header">
|
||||
<slot name="header" :item="item" :index="index" />
|
||||
</div>
|
||||
|
||||
<!-- 消息主体 -->
|
||||
<div class="chat-message-item__body">
|
||||
<!-- 头像 -->
|
||||
<div v-if="item.avatar" class="chat-message-item__avatar">
|
||||
<img
|
||||
:src="item.avatar"
|
||||
:style="{
|
||||
width: item.avatarSize || '40px',
|
||||
height: item.avatarSize || '40px'
|
||||
}"
|
||||
alt="avatar"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<div
|
||||
class="chat-message-item__content"
|
||||
:class="{
|
||||
'chat-message-item__content--no-style': item.noStyle
|
||||
}"
|
||||
>
|
||||
<slot name="content" :item="item" :index="index">
|
||||
{{ item.content }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息底部 -->
|
||||
<div v-if="$slots.footer" class="chat-message-item__footer">
|
||||
<slot name="footer" :item="item" :index="index" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
interface MessageItem {
|
||||
key?: number;
|
||||
avatar?: string;
|
||||
avatarSize?: string;
|
||||
placement?: 'start' | 'end';
|
||||
content?: string;
|
||||
noStyle?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
list: MessageItem[];
|
||||
maxHeight?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
list: () => [],
|
||||
maxHeight: '100%'
|
||||
});
|
||||
|
||||
const scrollContainer = ref<HTMLDivElement | null>(null);
|
||||
const autoScroll = ref(true); // 是否自动滚动到底部
|
||||
const isUserScrolling = ref(false); // 用户是否正在手动滚动
|
||||
let scrollTimeout: any = null;
|
||||
let mutationObserver: MutationObserver | null = null;
|
||||
let scrollRAF: number | null = null; // 用于存储 requestAnimationFrame ID
|
||||
|
||||
/**
|
||||
* 检查是否滚动到底部
|
||||
* 允许一定的误差范围（5px）
|
||||
*/
|
||||
function isScrolledToBottom(): boolean {
|
||||
if (!scrollContainer.value) return false;
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value;
|
||||
return scrollHeight - scrollTop - clientHeight < 5;
|
||||
}
|
||||
|
||||
/**
|
||||
* 立即滚动到底部（用于内容快速变化时）
|
||||
*/
|
||||
function scrollToBottomImmediate() {
|
||||
if (!scrollContainer.value || !autoScroll.value) return;
|
||||
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* 平滑滚动到底部（使用 RAF 避免过度调用）
|
||||
*/
|
||||
function scrollToBottomSmooth() {
|
||||
if (!scrollContainer.value || !autoScroll.value) return;
|
||||
|
||||
// 取消之前的 RAF，避免重复调用
|
||||
if (scrollRAF !== null) {
|
||||
cancelAnimationFrame(scrollRAF);
|
||||
}
|
||||
|
||||
scrollRAF = requestAnimationFrame(() => {
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
|
||||
}
|
||||
scrollRAF = null;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动到底部（立即）
|
||||
*/
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (scrollContainer.value) {
|
||||
autoScroll.value = true; // 重新启用自动滚动
|
||||
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理滚动事件
|
||||
* 检测用户是否手动滚动离开底部
|
||||
*/
|
||||
function handleScroll() {
|
||||
if (!scrollContainer.value) return;
|
||||
|
||||
// 清除之前的定时器
|
||||
if (scrollTimeout) {
|
||||
clearTimeout(scrollTimeout);
|
||||
}
|
||||
|
||||
// 标记用户正在滚动
|
||||
isUserScrolling.value = true;
|
||||
|
||||
// 检查是否在底部
|
||||
const atBottom = isScrolledToBottom();
|
||||
|
||||
if (atBottom) {
|
||||
// 如果滚动到底部，启用自动滚动
|
||||
autoScroll.value = true;
|
||||
} else {
|
||||
// 如果不在底部，禁用自动滚动
|
||||
autoScroll.value = false;
|
||||
}
|
||||
|
||||
// 300ms 后标记用户停止滚动
|
||||
scrollTimeout = setTimeout(() => {
|
||||
isUserScrolling.value = false;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听内容变化，自动滚动到底部
|
||||
*/
|
||||
function observeContentChanges() {
|
||||
if (!scrollContainer.value) return;
|
||||
|
||||
const contentElement = scrollContainer.value.querySelector('.chat-message-list__content');
|
||||
if (!contentElement) return;
|
||||
|
||||
// 创建 MutationObserver 监听内容变化
|
||||
mutationObserver = new MutationObserver((mutations) => {
|
||||
// 如果启用了自动滚动且用户没有在滚动，则滚动到底部
|
||||
if (autoScroll.value && !isUserScrolling.value) {
|
||||
// 检查是否有文本内容变化（characterData），这通常是 SSE 流式输出
|
||||
const hasCharacterDataChange = mutations.some(
|
||||
mutation => mutation.type === 'characterData'
|
||||
);
|
||||
|
||||
if (hasCharacterDataChange) {
|
||||
// SSE 流式输出时使用立即滚动，避免跳动
|
||||
scrollToBottomImmediate();
|
||||
} else {
|
||||
// 其他情况使用平滑滚动
|
||||
scrollToBottomSmooth();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听子元素的变化和文本内容的变化
|
||||
mutationObserver.observe(contentElement, {
|
||||
childList: true, // 监听子元素的添加/删除
|
||||
subtree: true, // 监听所有后代元素
|
||||
characterData: true, // 监听文本内容变化
|
||||
attributes: false // 不监听属性变化
|
||||
});
|
||||
}
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.addEventListener('scroll', handleScroll, { passive: true });
|
||||
}
|
||||
|
||||
// 初始化时滚动到底部
|
||||
nextTick(() => {
|
||||
scrollToBottom();
|
||||
// 开始监听内容变化
|
||||
observeContentChanges();
|
||||
});
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.removeEventListener('scroll', handleScroll);
|
||||
}
|
||||
if (scrollTimeout) {
|
||||
clearTimeout(scrollTimeout);
|
||||
}
|
||||
if (scrollRAF !== null) {
|
||||
cancelAnimationFrame(scrollRAF);
|
||||
}
|
||||
if (mutationObserver) {
|
||||
mutationObserver.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
// 暴露方法给父组件调用
|
||||
defineExpose({
|
||||
scrollToBottom
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-message-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* 美化滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-message-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 12px 16px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&--no-style {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding-left: 52px; /* 头像宽度 + gap */
|
||||
}
|
||||
|
||||
/* 用户消息样式 */
|
||||
&--user {
|
||||
.chat-message-item__body {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.chat-message-item__content {
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chat-message-item__footer {
|
||||
padding-left: 0;
|
||||
padding-right: 52px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* 助手消息样式 */
|
||||
&--assistant {
|
||||
.chat-message-item__body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.chat-message-item__content {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,8 +6,6 @@ import { ElMessage } from 'element-plus';
|
||||
import mammoth from 'mammoth';
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
import * as XLSX from 'xlsx';
|
||||
import Popover from '@/components/Popover/index.vue';
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
import { useFilesStore } from '@/stores/modules/files';
|
||||
|
||||
// 配置 PDF.js worker - 使用稳定的 CDN
|
||||
@@ -413,49 +411,73 @@ onChange(async (files) => {
|
||||
// 处理图片文件
|
||||
if (isImage) {
|
||||
try {
|
||||
// 多级压缩策略：逐步降低质量和分辨率
|
||||
const compressionLevels = [
|
||||
{ maxWidth: 800, maxHeight: 800, quality: 0.6 },
|
||||
{ maxWidth: 600, maxHeight: 600, quality: 0.5 },
|
||||
{ maxWidth: 400, maxHeight: 400, quality: 0.4 },
|
||||
];
|
||||
// 控制参数：是否开启图片压缩
|
||||
const enableImageCompression = true; // 这里可以设置为变量或从配置读取
|
||||
|
||||
let compressedBlob: Blob | null = null;
|
||||
let finalBlob: Blob = file;
|
||||
let base64 = '';
|
||||
let compressionLevel = 0;
|
||||
|
||||
// 尝试不同级别的压缩
|
||||
for (const level of compressionLevels) {
|
||||
compressionLevel++;
|
||||
compressedBlob = await compressImage(file, level.maxWidth, level.maxHeight, level.quality);
|
||||
base64 = await blobToBase64(compressedBlob);
|
||||
|
||||
// 检查是否满足总长度限制
|
||||
const estimatedLength = Math.floor(base64.length * 0.5);
|
||||
if (totalContentLength + estimatedLength <= MAX_TOTAL_CONTENT_LENGTH) {
|
||||
// 满足限制，使用当前压缩级别
|
||||
totalContentLength += estimatedLength;
|
||||
break;
|
||||
}
|
||||
|
||||
// 如果是最后一级压缩仍然超限，则跳过
|
||||
if (compressionLevel === compressionLevels.length) {
|
||||
const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
|
||||
ElMessage.error(`${file.name} (${fileSizeMB}MB) 即使压缩后仍超过总内容限制，已跳过`);
|
||||
compressedBlob = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果压缩失败，跳过此文件
|
||||
if (!compressedBlob) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// 计算压缩比例
|
||||
const originalSize = (file.size / 1024).toFixed(2);
|
||||
const compressedSize = (compressedBlob.size / 1024).toFixed(2);
|
||||
console.log(`图片压缩: ${file.name} - 原始: ${originalSize}KB, 压缩后: ${compressedSize}KB (级别${compressionLevel})`);
|
||||
let finalSize = originalSize;
|
||||
|
||||
if (enableImageCompression) {
|
||||
// 多级压缩策略：逐步降低质量和分辨率
|
||||
const compressionLevels = [
|
||||
{ maxWidth: 800, maxHeight: 800, quality: 0.6 },
|
||||
{ maxWidth: 600, maxHeight: 600, quality: 0.5 },
|
||||
{ maxWidth: 400, maxHeight: 400, quality: 0.4 },
|
||||
];
|
||||
|
||||
let compressedBlob: Blob | null = null;
|
||||
|
||||
// 尝试不同级别的压缩
|
||||
for (const level of compressionLevels) {
|
||||
compressionLevel++;
|
||||
compressedBlob = await compressImage(file, level.maxWidth, level.maxHeight, level.quality);
|
||||
base64 = await blobToBase64(compressedBlob);
|
||||
|
||||
// 检查是否满足总长度限制
|
||||
const estimatedLength = Math.floor(base64.length * 0.5);
|
||||
if (totalContentLength + estimatedLength <= MAX_TOTAL_CONTENT_LENGTH) {
|
||||
// 满足限制，使用当前压缩级别
|
||||
totalContentLength += estimatedLength;
|
||||
finalBlob = compressedBlob;
|
||||
break;
|
||||
}
|
||||
|
||||
// 如果是最后一级压缩仍然超限，则跳过
|
||||
if (compressionLevel === compressionLevels.length) {
|
||||
const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
|
||||
ElMessage.error(`${file.name} 图片内容过大，请压缩后上传`);
|
||||
compressedBlob = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果压缩失败，跳过此文件
|
||||
if (!compressedBlob) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// 计算压缩比例
|
||||
finalSize = (finalBlob.size / 1024).toFixed(2);
|
||||
console.log(`图片压缩: ${file.name} - 原始: ${originalSize}KB, 压缩后: ${finalSize}KB (级别${compressionLevel})`);
|
||||
}
|
||||
else {
|
||||
// 不开启压缩时，直接转换原始文件
|
||||
base64 = await blobToBase64(file);
|
||||
|
||||
// 检查总长度限制
|
||||
const estimatedLength = Math.floor(base64.length * 0.5);
|
||||
if (totalContentLength + estimatedLength > MAX_TOTAL_CONTENT_LENGTH) {
|
||||
const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
|
||||
ElMessage.error(`${file.name} (${fileSizeMB}MB) 超过总长度限制，已跳过`);
|
||||
continue;
|
||||
}
|
||||
|
||||
totalContentLength += estimatedLength;
|
||||
console.log(`图片未压缩: ${file.name} - 大小: ${originalSize}KB`);
|
||||
}
|
||||
|
||||
arr.push({
|
||||
uid: crypto.randomUUID(),
|
||||
@@ -473,8 +495,8 @@ onChange(async (files) => {
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
console.error('压缩图片失败:', error);
|
||||
ElMessage.error(`${file.name} 压缩失败`);
|
||||
console.error('处理图片失败:', error);
|
||||
ElMessage.error(`${file.name} 处理失败`);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
@@ -493,9 +515,10 @@ onChange(async (files) => {
|
||||
// 至少保留1000字符才有意义
|
||||
finalContent = result.content.substring(0, remainingSpace);
|
||||
wasTruncated = true;
|
||||
} else if (remainingSpace <= 1000) {
|
||||
}
|
||||
else if (remainingSpace <= 1000) {
|
||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制，已跳过`);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制，已跳过`);
|
||||
continue;
|
||||
}
|
||||
|
||||
@@ -542,9 +565,10 @@ onChange(async (files) => {
|
||||
if (result.content.length > remainingSpace && remainingSpace > 1000) {
|
||||
finalContent = result.content.substring(0, remainingSpace);
|
||||
wasTruncated = true;
|
||||
} else if (remainingSpace <= 1000) {
|
||||
}
|
||||
else if (remainingSpace <= 1000) {
|
||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制，已跳过`);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制，已跳过`);
|
||||
continue;
|
||||
}
|
||||
|
||||
@@ -591,9 +615,10 @@ onChange(async (files) => {
|
||||
if (result.content.length > remainingSpace && remainingSpace > 1000) {
|
||||
finalContent = result.content.substring(0, remainingSpace);
|
||||
wasTruncated = true;
|
||||
} else if (remainingSpace <= 1000) {
|
||||
}
|
||||
else if (remainingSpace <= 1000) {
|
||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制，已跳过`);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制，已跳过`);
|
||||
continue;
|
||||
}
|
||||
|
||||
@@ -645,9 +670,10 @@ onChange(async (files) => {
|
||||
if (finalContent.length > remainingSpace && remainingSpace > 1000) {
|
||||
finalContent = finalContent.substring(0, remainingSpace);
|
||||
truncated = true;
|
||||
} else if (remainingSpace <= 1000) {
|
||||
}
|
||||
else if (remainingSpace <= 1000) {
|
||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制，已跳过`);
|
||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制，已跳过`);
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
@@ -42,12 +42,8 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="layout === 'blankPage'">
|
||||
<LayoutBlankPage />
|
||||
<!-- <component :is="LayoutComponent[layout]" /> -->
|
||||
</div>
|
||||
<div v-show="layout !== 'blankPage'">
|
||||
<LayoutVertical />
|
||||
<div>
|
||||
<component :is="LayoutComponent[layout]" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { AnyObject } from 'typescript-api-pro';
|
||||
import type { BubbleProps } from 'vue-element-plus-x/types/Bubble';
|
||||
import type { BubbleListInstance } from 'vue-element-plus-x/types/BubbleList';
|
||||
import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
|
||||
import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
|
||||
import { ArrowLeftBold, ArrowRightBold, Document, Loading } from '@element-plus/icons-vue';
|
||||
@@ -13,6 +12,8 @@ import { Sender } from 'vue-element-plus-x';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { send } from '@/api';
|
||||
import ModelSelect from '@/components/ModelSelect/index.vue';
|
||||
import YMarkdown from '@/vue-element-plus-y/components/XMarkdown/index.vue';
|
||||
import ChatMessageList from '@/components/ChatMessageList/index.vue';
|
||||
import { useGuideTourStore } from '@/stores';
|
||||
import { useChatStore } from '@/stores/modules/chat';
|
||||
import { useFilesStore } from '@/stores/modules/files';
|
||||
@@ -49,7 +50,7 @@ const avatar = computed(() => {
|
||||
const inputValue = ref('');
|
||||
const senderRef = ref<InstanceType<typeof Sender> | null>(null);
|
||||
const bubbleItems = ref<MessageItem[]>([]);
|
||||
const bubbleListRef = ref<BubbleListInstance | null>(null);
|
||||
const bubbleListRef = ref<InstanceType<typeof ChatMessageList> | null>(null);
|
||||
const isSending = ref(false);
|
||||
|
||||
const { stream, loading: isLoading, cancel } = useHookFetch({
|
||||
@@ -445,7 +446,7 @@ function handleImagePreview(url: string) {
|
||||
<template>
|
||||
<div class="chat-with-id-container">
|
||||
<div class="chat-warp">
|
||||
<BubbleList ref="bubbleListRef" :list="bubbleItems" max-height="calc(100vh - 240px)">
|
||||
<ChatMessageList ref="bubbleListRef" :list="bubbleItems" max-height="calc(100vh - 240px)">
|
||||
<template #header="{ item }">
|
||||
<Thinking
|
||||
v-if="item.reasoning_content" v-model="item.thinlCollapse" :content="item.reasoning_content"
|
||||
@@ -455,7 +456,7 @@ function handleImagePreview(url: string) {
|
||||
<!-- 自定义气泡内容 -->
|
||||
<template #content="{ item }">
|
||||
<!-- chat 内容走 markdown -->
|
||||
<XMarkdown v-if="item.content && (item.role === 'assistant' || item.role === 'system')" class="markdown-body" :markdown="item.content" :themes="{ light: 'github-light', dark: 'github-dark' }" default-theme-mode="dark" />
|
||||
<YMarkdown v-if="item.content && (item.role === 'assistant' || item.role === 'system')" class="markdown-body" :markdown="item.content" :themes="{ light: 'github-light', dark: 'github-dark' }" default-theme-mode="dark" />
|
||||
<!-- user 内容 纯文本 + 图片 + 文件 -->
|
||||
<div v-if="item.role === 'user'" class="user-content-wrapper">
|
||||
<!-- 图片列表 -->
|
||||
@@ -502,7 +503,7 @@ function handleImagePreview(url: string) {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BubbleList>
|
||||
</ChatMessageList>
|
||||
|
||||
<Sender
|
||||
ref="senderRef" v-model="inputValue" class="chat-defaul-sender" data-tour="chat-sender" :auto-size="{
|
||||
@@ -576,10 +577,10 @@ function handleImagePreview(url: string) {
|
||||
}
|
||||
}
|
||||
:deep() {
|
||||
.el-bubble-list {
|
||||
.chat-message-list {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.el-bubble {
|
||||
.chat-message-item {
|
||||
padding: 0 12px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
705
Yi.Ai.Vue3/src/vue-element-plus-y/assets/mock.ts
Normal file
705
Yi.Ai.Vue3/src/vue-element-plus-y/assets/mock.ts
Normal file
@@ -0,0 +1,705 @@
|
||||
import type { BubbleProps } from '@components/Bubble/types';
|
||||
import type { BubbleListProps } from '@components/BubbleList/types';
|
||||
import type { FilesType } from '@components/FilesCard/types';
|
||||
|
||||
import type { ThinkingStatus } from '@components/Thinking/types';
|
||||
|
||||
// 头像1
|
||||
export const avatar1: string =
|
||||
'https://avatars.githubusercontent.com/u/76239030?v=4';
|
||||
|
||||
// 头像2
|
||||
export const avatar2: string =
|
||||
'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
|
||||
|
||||
// md 普通内容
|
||||
export const mdContent = `
|
||||
### 行内公式
|
||||
1. 欧拉公式：$e^{i\\pi} + 1 = 0$
|
||||
2. 二次方程求根公式：$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$
|
||||
3. 向量点积：$\\vec{a} \\cdot \\vec{b} = a_x b_x + a_y b_y + a_z b_z$
|
||||
### []包裹公式
|
||||
\\[ e^{i\\pi} + 1 = 0 \\]
|
||||
|
||||
\\[\\boxed{boxed包裹}\\]
|
||||
|
||||
### 块级公式
|
||||
1. 傅里叶变换：
|
||||
$$
|
||||
F(\\omega) = \\int_{-\\infty}^{\\infty} f(t) e^{-i\\omega t} dt
|
||||
$$
|
||||
|
||||
2. 矩阵乘法：
|
||||
$$
|
||||
\\begin{bmatrix}
|
||||
a & b \\\\
|
||||
c & d
|
||||
\\end{bmatrix}
|
||||
\\begin{bmatrix}
|
||||
x \\\\
|
||||
y
|
||||
\\end{bmatrix}
|
||||
=
|
||||
\\begin{bmatrix}
|
||||
ax + by \\\\
|
||||
cx + dy
|
||||
\\end{bmatrix}
|
||||
$$
|
||||
|
||||
3. 泰勒级数展开：
|
||||
$$
|
||||
f(x) = \\sum_{n=0}^{\\infty} \\frac{f^{(n)}(a)}{n!} (x - a)^n
|
||||
$$
|
||||
|
||||
4. 拉普拉斯方程：
|
||||
$$
|
||||
\\nabla^2 u = \\frac{\\partial^2 u}{\\partial x^2} + \\frac{\\partial^2 u}{\\partial y^2} + \\frac{\\partial^2 u}{\\partial z^2} = 0
|
||||
$$
|
||||
|
||||
5. 概率密度函数（正态分布）：
|
||||
$$
|
||||
f(x) = \\frac{1}{\\sqrt{2\\pi\\sigma^2}} e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}}
|
||||
$$
|
||||
|
||||
# 标题
|
||||
这是一个 Markdown 示例。
|
||||
- 列表项 1
|
||||
- 列表项 2
|
||||
**粗体文本** 和 *斜体文本*
|
||||
|
||||
- [x] Add some task
|
||||
- [ ] Do some task
|
||||
`.trim();
|
||||
|
||||
// md 代码块高亮
|
||||
export const highlightMdContent = `
|
||||
#### 切换右侧的secureViewCode进行安全预览或者不启用安全预览模式下 会呈现不同的网页预览效果
|
||||
##### 通过enableCodeLineNumber属性开启代码行号
|
||||
\`\`\`html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>炫酷文字动效</title>
|
||||
<style>
|
||||
body { margin: 0; overflow: hidden; }
|
||||
canvas { display: block; }
|
||||
.text-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: clamp(2rem, 8vw, 5rem);
|
||||
margin: 0;
|
||||
color: white;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.3);
|
||||
opacity: 0;
|
||||
animation: fadeIn 3s forwards 0.5s;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="text-container">
|
||||
<h1 id="main-text">AWESOME TEXT</h1>
|
||||
</div>
|
||||
<script>
|
||||
const canvas = document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
const text = document.getElementById('main-text');
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 3 + 1;
|
||||
this.speedX = Math.random() * 3 - 1.5;
|
||||
this.speedY = Math.random() * 3 - 1.5;
|
||||
this.color = \`hsl(\${Math.random() * 360}, 70%, 60%)\`;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.size > 0.2) this.size -= 0.01;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = this.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
let particles = [];
|
||||
function init() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 200; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
particles[i].update();
|
||||
particles[i].draw();
|
||||
for (let j = i; j < particles.length; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
if (distance < 100) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = \`rgba(255,255,255,\${0.1 - distance/1000})\`;
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
});
|
||||
|
||||
// 自定义文字功能
|
||||
text.addEventListener('click', () => {
|
||||
const newText = prompt('输入新文字:', text.textContent);
|
||||
if (newText) {
|
||||
text.textContent = newText;
|
||||
text.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
text.style.opacity = 1;
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
\`\`\`
|
||||
\`\`\`html
|
||||
<div class="product-card">
|
||||
<div class="badge">新品</div>
|
||||
<img src="https://picsum.photos/300/200?product" alt="产品图片">
|
||||
|
||||
<div class="content">
|
||||
<h3>无线蓝牙耳机 Pro</h3>
|
||||
<p class="description">主动降噪技术，30小时续航，IPX5防水等级</p>
|
||||
|
||||
<div class="rating">
|
||||
<span>★★★★☆</span>
|
||||
<span class="reviews">(124条评价)</span>
|
||||
</div>
|
||||
|
||||
<div class="price-container">
|
||||
<span class="price">¥499</span>
|
||||
<span class="original-price">¥699</span>
|
||||
<span class="discount">7折</span>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="cart-btn">加入购物车</button>
|
||||
<button class="fav-btn">❤️</button>
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<span>✓ 次日达</span>
|
||||
<span>✓ 7天无理由</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.product-card {
|
||||
width: 280px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
background: white;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 8px 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 8px 0 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
color: #ffb300;
|
||||
}
|
||||
|
||||
.reviews {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.discount {
|
||||
background: #fff200;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 16px 0 12px;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
flex: 1;
|
||||
background: #5352ed;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.cart-btn:hover {
|
||||
background: #3742fa;
|
||||
}
|
||||
|
||||
.fav-btn {
|
||||
width: 42px;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.fav-btn:hover {
|
||||
border-color: #ff6b6b;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 13px;
|
||||
color: #2ed573;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
\`\`\`
|
||||
###### 非\`commonMark\`语法，dom多个
|
||||
<pre>
|
||||
<code class="language-java">
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, world!");
|
||||
}
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
\`\`\`echarts
|
||||
use codeXRender for echarts render
|
||||
\`\`\`
|
||||
### javascript
|
||||
\`\`\`javascript
|
||||
console.log('Hello, world!');
|
||||
\`\`\`
|
||||
### java
|
||||
\`\`\`java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, world!");
|
||||
}
|
||||
}
|
||||
\`\`\`
|
||||
\`\`\`typescript
|
||||
import {
|
||||
ArrowDownBold,
|
||||
CopyDocument,
|
||||
Moon,
|
||||
Sunny
|
||||
} from '@element-plus/icons-vue';
|
||||
import { ElButton, ElSpace } from 'element-plus';
|
||||
import { h } from 'vue';
|
||||
|
||||
/* ----------------------------------- 按钮组 ---------------------------------- */
|
||||
|
||||
/**
|
||||
* @description 描述 language标签
|
||||
* @date 2025-06-25 17:48:15
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param language
|
||||
*/
|
||||
export function languageEle(language: string) {
|
||||
return h(
|
||||
ElSpace,
|
||||
{},
|
||||
{}
|
||||
);
|
||||
}
|
||||
\`\`\`
|
||||
`.trim();
|
||||
|
||||
// md 美人鱼图表
|
||||
export const mermaidMdContent = `
|
||||
|
||||
### mermaid 饼状图
|
||||
\`\`\`mermaid
|
||||
pie
|
||||
"传媒及文化相关" : 35
|
||||
"广告与市场营销" : 8
|
||||
"游戏开发" : 15
|
||||
"影视动画与特效" : 12
|
||||
"互联网产品设计" : 10
|
||||
"VR/AR开发" : 5
|
||||
"其他" : 15
|
||||
\`\`\`
|
||||
|
||||
`;
|
||||
|
||||
// md 数学公式
|
||||
export const mathMdContent = `
|
||||
### mermaid 流程图
|
||||
\`\`\`mermaid
|
||||
graph LR
|
||||
1 --> 2
|
||||
2 --> 3
|
||||
3 --> 4
|
||||
2 --> 1
|
||||
2-3 --> 1-3
|
||||
\`\`\`
|
||||
\`\`\`mermaid
|
||||
flowchart TD
|
||||
Start[开始] --> Check[是否通过？]
|
||||
Check -- 是 --> Pass[流程继续]
|
||||
Check -- 否 --> Reject[流程结束]
|
||||
\`\`\`
|
||||
\`\`\`mermaid
|
||||
flowchart TD
|
||||
%% 前端专项四层结构
|
||||
A["战略层
|
||||
【提升用户体验】"]
|
||||
--> B["架构层
|
||||
【微前端方案选型】"]
|
||||
--> C["框架层
|
||||
【React+TS技术栈】"]
|
||||
--> D["实现层
|
||||
【组件库开发】"]
|
||||
style A fill:#FFD700,stroke:#FFA500
|
||||
style B fill:#87CEFA,stroke:#1E90FF
|
||||
style C fill:#9370DB,stroke:#663399
|
||||
style D fill:#FF6347,stroke:#CD5C5C
|
||||
|
||||
\`\`\`
|
||||
### mermaid 数学公式
|
||||
\`\`\`mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
participant 1 as $$alpha$$
|
||||
participant 2 as $$beta$$
|
||||
1->>2: Solve: $$\sqrt{2+2}$$
|
||||
2-->>1: Answer: $$2$$
|
||||
\`\`\`
|
||||
|
||||
`;
|
||||
export const customAttrContent = `
|
||||
<a href="https://element-plus-x.com/">element-plus-x</a>
|
||||
<h1>标题1</h1>
|
||||
<h2>标题2</h2>
|
||||
`;
|
||||
export type MessageItem = BubbleProps & {
|
||||
key: number;
|
||||
role: 'ai' | 'user' | 'system';
|
||||
avatar: string;
|
||||
thinkingStatus?: ThinkingStatus;
|
||||
expanded?: boolean;
|
||||
};
|
||||
|
||||
// md 复杂图表
|
||||
export const mermaidComplexMdContent = `
|
||||
### Mermaid 渲染复杂图表案例
|
||||
\`\`\`mermaid
|
||||
graph LR
|
||||
A[用户] -->|请求交互| B[前端应用]
|
||||
B -->|API调用| C[API网关]
|
||||
C -->|认证请求| D[认证服务]
|
||||
C -->|业务请求| E[业务服务]
|
||||
E -->|数据读写| F[数据库]
|
||||
E -->|缓存操作| G[缓存服务]
|
||||
E -->|消息发布| H[消息队列]
|
||||
H -->|触发任务| I[后台任务]
|
||||
|
||||
subgraph "微服务集群"
|
||||
D[认证服务]
|
||||
E[业务服务]
|
||||
I[后台任务]
|
||||
end
|
||||
|
||||
subgraph "数据持久层"
|
||||
F[数据库]
|
||||
G[缓存服务]
|
||||
end
|
||||
|
||||
`;
|
||||
// animateTestMdContent 为动画测试的 markdown 内容，包含唐代王勃《滕王阁序》并做了格式优化
|
||||
// animateTestMdContent 为动画测试的 markdown 内容，包含唐代王勃《滕王阁序》并做了格式优化（部分内容采用表格样式展示）
|
||||
export const animateTestMdContent = `
|
||||
### 唐代：王勃《滕王阁序》
|
||||
|
||||
| 章节 | 内容 |
|
||||
| ---- | ---- |
|
||||
| 开篇 | 豫章故郡，洪都新府。<br>星分翼轸，地接衡庐。<br>襟三江而带五湖，控蛮荆而引瓯越。<br>物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。<br>雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。<br>都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。<br>十旬休假，胜友如云；千里逢迎，高朋满座。<br>腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。<br>家君作宰，路出名区；童子何知，躬逢胜饯。 |
|
||||
| 九月三秋 | 时维九月，序属三秋。<br>潦水尽而寒潭清，烟光凝而暮山紫。<br>俨骖騑于上路，访风景于崇阿。<br>临帝子之长洲，得天人之旧馆。<br>层峦耸翠，上出重霄；飞阁流丹，下临无地。<br>鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。 |
|
||||
| 山川景色 | 披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。<br>闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。<br>云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。<br>渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。 |
|
||||
| 兴致抒怀 | 遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。<br>睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。<br>四美具，二难并。穷睇眄于中天，极娱游于暇日。<br>天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。<br>望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<br>关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。<br>怀帝阍而不见，奉宣室以何年？ |
|
||||
| 感慨身世 | 嗟乎！时运不齐，命途多舛。<br>冯唐易老，李广难封。<br>屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？<br>所赖君子见机，达人知命。<br>老当益壮，宁移白首之心？<br>穷且益坚，不坠青云之志。<br>酌贪泉而觉爽，处涸辙以犹欢。<br>北海虽赊，扶摇可接；东隅已逝，桑榆非晚。<br>孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！ |
|
||||
| 自述 | 勃，三尺微命，一介书生。<br>无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。<br>舍簪笏于百龄，奉晨昏于万里。<br>非谢家之宝树，接孟氏之芳邻。<br>他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。<br>杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？ |
|
||||
| 结尾 | 呜呼！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。<br>临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。<br>敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。<br>请洒潘江，各倾陆海云尔。 |
|
||||
|
||||
---
|
||||
|
||||
### 滕王阁诗
|
||||
|
||||
> 滕王高阁临江渚，佩玉鸣鸾罢歌舞。
|
||||
> 画栋朝飞南浦云，珠帘暮卷西山雨。
|
||||
> 闲云潭影日悠悠，物换星移几度秋。
|
||||
> 阁中帝子今何在？槛外长江空自流。
|
||||
`;
|
||||
export const messageArr: BubbleListProps<MessageItem>['list'] = [
|
||||
{
|
||||
key: 1,
|
||||
role: 'ai',
|
||||
placement: 'start',
|
||||
content: '欢迎使用 Element Plus X .'.repeat(5),
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'filled',
|
||||
isMarkdown: false,
|
||||
typing: { step: 2, suffix: '💗' },
|
||||
avatar: avatar2,
|
||||
avatarSize: '32px'
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
role: 'user',
|
||||
placement: 'end',
|
||||
content: '这是用户的消息',
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'outlined',
|
||||
isMarkdown: false,
|
||||
avatar: avatar1,
|
||||
avatarSize: '32px'
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
role: 'ai',
|
||||
placement: 'start',
|
||||
content: '欢迎使用 Element Plus X .'.repeat(5),
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'filled',
|
||||
isMarkdown: false,
|
||||
typing: { step: 2, suffix: '💗' },
|
||||
avatar: avatar2,
|
||||
avatarSize: '32px'
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
role: 'user',
|
||||
placement: 'end',
|
||||
content: '这是用户的消息',
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'outlined',
|
||||
isMarkdown: false,
|
||||
avatar: avatar1,
|
||||
avatarSize: '32px'
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
role: 'ai',
|
||||
placement: 'start',
|
||||
content: '欢迎使用 Element Plus X .'.repeat(5),
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'filled',
|
||||
isMarkdown: false,
|
||||
typing: { step: 2, suffix: '💗' },
|
||||
avatar: avatar2,
|
||||
avatarSize: '32px'
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
role: 'user',
|
||||
placement: 'end',
|
||||
content: '这是用户的消息',
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'outlined',
|
||||
isMarkdown: false,
|
||||
avatar: avatar1,
|
||||
avatarSize: '32px'
|
||||
},
|
||||
{
|
||||
key: 7,
|
||||
role: 'ai',
|
||||
placement: 'start',
|
||||
content: '欢迎使用 Element Plus X .'.repeat(5),
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'filled',
|
||||
isMarkdown: false,
|
||||
typing: { step: 2, suffix: '💗', isRequestEnd: true },
|
||||
avatar: avatar2,
|
||||
avatarSize: '32px'
|
||||
},
|
||||
{
|
||||
key: 8,
|
||||
role: 'user',
|
||||
placement: 'end',
|
||||
content: '这是用户的消息',
|
||||
loading: true,
|
||||
shape: 'corner',
|
||||
variant: 'outlined',
|
||||
isMarkdown: false,
|
||||
avatar: avatar1,
|
||||
avatarSize: '32px'
|
||||
}
|
||||
];
|
||||
|
||||
// 模拟自定义文件卡片数据
|
||||
// 内置样式
|
||||
export const colorMap: Record<FilesType, string> = {
|
||||
word: '#0078D4',
|
||||
excel: '#00C851',
|
||||
ppt: '#FF5722',
|
||||
pdf: '#E53935',
|
||||
txt: '#424242',
|
||||
mark: '#6C6C6C',
|
||||
image: '#FF80AB',
|
||||
audio: '#FF7878',
|
||||
video: '#8B72F7',
|
||||
three: '#29B6F6',
|
||||
code: '#00008B',
|
||||
database: '#FF9800',
|
||||
link: '#2962FF',
|
||||
zip: '#673AB7',
|
||||
file: '#FFC757',
|
||||
unknown: '#6E9DA4'
|
||||
};
|
||||
|
||||
// 自己定义文件颜色
|
||||
export const colorMap1: Record<FilesType, string> = {
|
||||
word: '#5E74A8',
|
||||
excel: '#4A6B4A',
|
||||
ppt: '#C27C40',
|
||||
pdf: '#5A6976',
|
||||
txt: '#D4C58C',
|
||||
mark: '#FFA500',
|
||||
image: '#8E7CC3',
|
||||
audio: '#A67B5B',
|
||||
video: '#4A5568',
|
||||
three: '#5F9E86',
|
||||
code: '#4B636E',
|
||||
database: '#4A5A6B',
|
||||
link: '#5D7CBA',
|
||||
zip: '#8B5E3C',
|
||||
file: '#AAB2BF',
|
||||
unknown: '#888888'
|
||||
};
|
||||
|
||||
// 自己定义文件颜色1
|
||||
export const colorMap2: Record<FilesType, string> = {
|
||||
word: '#0078D4',
|
||||
excel: '#4CB050',
|
||||
ppt: '#FF9933',
|
||||
pdf: '#E81123',
|
||||
txt: '#666666',
|
||||
mark: '#FFA500',
|
||||
image: '#B490F3',
|
||||
audio: '#00B2EE',
|
||||
video: '#2EC4B6',
|
||||
three: '#00C8FF',
|
||||
code: '#00589F',
|
||||
database: '#F5A623',
|
||||
link: '#007BFF',
|
||||
zip: '#888888',
|
||||
file: '#F0D9B5',
|
||||
unknown: '#D8D8D8'
|
||||
};
|
||||
17
Yi.Ai.Vue3/src/vue-element-plus-y/components.ts
Normal file
17
Yi.Ai.Vue3/src/vue-element-plus-y/components.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// Auto-Element-Plus-X by auto-export-all-components script
|
||||
export { default as Attachments } from './components/Attachments/index.vue';
|
||||
export { default as Bubble } from './components/Bubble/index.vue';
|
||||
export { default as BubbleList } from './components/BubbleList/index.vue';
|
||||
export { default as ConfigProvider } from './components/ConfigProvider/index.vue';
|
||||
export { default as Conversations } from './components/Conversations/index.vue';
|
||||
export { default as EditorSender } from './components/EditorSender/index.vue';
|
||||
export { default as FilesCard } from './components/FilesCard/index.vue';
|
||||
export { default as MentionSender } from './components/MentionSender/index.vue';
|
||||
export { default as Prompts } from './components/Prompts/index.vue';
|
||||
export { default as Sender } from './components/Sender/index.vue';
|
||||
export { default as Thinking } from './components/Thinking/index.vue';
|
||||
export { default as ThoughtChain } from './components/ThoughtChain/index.vue';
|
||||
export { default as Typewriter } from './components/Typewriter/index.vue';
|
||||
export { default as Welcome } from './components/Welcome/index.vue';
|
||||
export { default as XMarkdown } from './components/XMarkdown/index.vue';
|
||||
export { default as XMarkdownAsync } from './components/XMarkdownAsync/index.vue';
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts" setup>
|
||||
import type { MarkdownProps } from '../XMarkdownCore/shared/types';
|
||||
import { useShiki } from '@components/XMarkdownCore/hooks/useShiki';
|
||||
import { MarkdownRenderer } from '../XMarkdownCore';
|
||||
import { useMarkdownContext } from '../XMarkdownCore/components/MarkdownProvider';
|
||||
import { DEFAULT_PROPS } from '../XMarkdownCore/shared/constants';
|
||||
|
||||
const props = withDefaults(defineProps<MarkdownProps>(), DEFAULT_PROPS);
|
||||
|
||||
const slots = useSlots();
|
||||
const customComponents = useMarkdownContext();
|
||||
const colorReplacementsComputed = computed(() => {
|
||||
return props.colorReplacements;
|
||||
});
|
||||
const needViewCodeBtnComputed = computed(() => {
|
||||
return props.needViewCodeBtn;
|
||||
});
|
||||
useShiki();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="elx-xmarkdown-container">
|
||||
<MarkdownRenderer
|
||||
v-bind="props"
|
||||
:color-replacements="colorReplacementsComputed"
|
||||
:need-view-code-btn="needViewCodeBtnComputed"
|
||||
>
|
||||
<template
|
||||
v-for="(slot, name) in customComponents"
|
||||
:key="name"
|
||||
#[name]="slotProps"
|
||||
>
|
||||
<component :is="slot" v-bind="slotProps" />
|
||||
</template>
|
||||
<template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
|
||||
<slot :name="name" v-bind="slotProps" />
|
||||
</template>
|
||||
</MarkdownRenderer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
import { defineComponent, h } from 'vue';
|
||||
import {
|
||||
MarkdownProvider,
|
||||
useMarkdownContext
|
||||
} from '../components/MarkdownProvider';
|
||||
import { VueMarkdown, VueMarkdownAsync } from '../core';
|
||||
import { useComponents } from '../hooks';
|
||||
import { MARKDOWN_CORE_PROPS } from '../shared/constants';
|
||||
|
||||
const InnerRenderer = defineComponent({
|
||||
name: 'InnerMarkdownRenderer',
|
||||
setup(_, { slots }) {
|
||||
const context = useMarkdownContext();
|
||||
const components = useComponents();
|
||||
return () =>
|
||||
h(VueMarkdown, context.value as any, {
|
||||
...components,
|
||||
...slots
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const InnerRendererAsync = defineComponent({
|
||||
name: 'InnerMarkdownRendererAsync',
|
||||
setup(_, { slots }) {
|
||||
const context: any = useMarkdownContext();
|
||||
const components = useComponents();
|
||||
|
||||
return () =>
|
||||
h(VueMarkdownAsync, context.value, {
|
||||
...components,
|
||||
...slots
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const MarkdownRenderer = defineComponent({
|
||||
name: 'MarkdownRenderer',
|
||||
props: MARKDOWN_CORE_PROPS,
|
||||
setup(props, { slots }) {
|
||||
return () =>
|
||||
h(MarkdownProvider, props, {
|
||||
default: () => h(InnerRenderer, {}, slots)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const MarkdownRendererAsync = defineComponent({
|
||||
name: 'MarkdownRendererAsync',
|
||||
props: MARKDOWN_CORE_PROPS,
|
||||
setup(props, { slots }) {
|
||||
return () =>
|
||||
h(MarkdownProvider, props, {
|
||||
default: () => h(InnerRendererAsync, {}, slots)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export { MarkdownRenderer, MarkdownRendererAsync };
|
||||
@@ -0,0 +1,63 @@
|
||||
# 使用
|
||||
|
||||
```vue
|
||||
import {MarkdownRenderer,MarkdownRendererAsync} from '@/components/Markdown';
|
||||
|
||||
<template>
|
||||
// 同步渲染
|
||||
<MarkdownRenderer class="markdown-render" :markdown="content" />
|
||||
|
||||
// 异步渲染
|
||||
<Suspense>
|
||||
<MarkdownRendererAsync class="markdown-render" :markdown="content" />
|
||||
</Suspense>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 属性
|
||||
|
||||
### customAttrs 自定义属性支持
|
||||
|
||||
通过 `customAttrs` 可以对 Markdown 渲染的节点动态添加自定义属性：
|
||||
|
||||
```ts
|
||||
const customAttrs = {
|
||||
heading: (node, { level }) => ({
|
||||
class: ['heading', `heading-${level}`]
|
||||
}),
|
||||
a: node => ({
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer'
|
||||
})
|
||||
};
|
||||
```
|
||||
|
||||
### 插槽
|
||||
|
||||
> 组件提供了多个插槽，可以自定义渲染，标签即为插槽,你可以接管任何插槽，自定义渲染逻辑。
|
||||
|
||||
**请注意：组件内部拦截了code标签的渲染，支持高亮代码块，mermaid图表等。如果你需要自定义渲染，可以接管code插槽。**
|
||||
|
||||
```vue
|
||||
<header></header>
|
||||
|
||||
<MarkdownRenderer>
|
||||
<template #heading="{ node, level }">
|
||||
可自定义标题渲染
|
||||
</template>
|
||||
</MarkdownRenderer>
|
||||
```
|
||||
|
||||
### 代码块渲染
|
||||
|
||||
组件内置了代码块渲染器，支持高亮代码块，mermaid图表等。
|
||||
codeXSlot自定义代码块顶部
|
||||
可通过 codeXRender 属性自定义代码块语言渲染器，如下可以自定义 echarts 渲染器：
|
||||
|
||||
```text
|
||||
codeXRender: {
|
||||
echarts: (props) => {
|
||||
return h()
|
||||
},
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import { CopyDocument, Select } from '@element-plus/icons-vue';
|
||||
import { ElButton } from 'element-plus';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
onCopy: () => void;
|
||||
}>();
|
||||
|
||||
const copied = ref(false);
|
||||
|
||||
function handleClick() {
|
||||
if (!copied.value) {
|
||||
props.onCopy();
|
||||
copied.value = true;
|
||||
setTimeout(() => {
|
||||
copied.value = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElButton
|
||||
class="shiki-header-button markdown-elxLanguage-header-button"
|
||||
@click="handleClick"
|
||||
>
|
||||
<component
|
||||
:is="copied ? Select : CopyDocument"
|
||||
class="markdown-elxLanguage-header-button-text"
|
||||
:class="[copied && 'copied']"
|
||||
/>
|
||||
</ElButton>
|
||||
</template>
|
||||
@@ -0,0 +1,269 @@
|
||||
<script lang="ts" setup>
|
||||
import type { GlobalShiki } from '@components/XMarkdownCore/hooks/useShiki';
|
||||
import type { BundledLanguage } from 'shiki';
|
||||
import type { ElxRunCodeProps } from '../RunCode/type';
|
||||
import type { CodeBlockExpose } from './shiki-header';
|
||||
import type { RawProps } from './types';
|
||||
import {
|
||||
transformerNotationDiff,
|
||||
transformerNotationErrorLevel,
|
||||
transformerNotationFocus,
|
||||
transformerNotationHighlight,
|
||||
transformerNotationWordHighlight
|
||||
} from '@shikijs/transformers';
|
||||
import { computed, h, reactive, ref, toValue, watch, onUnmounted } from 'vue';
|
||||
import { debounce } from 'lodash-es';
|
||||
import HighLightCode from '../../components/HighLightCode/index.vue';
|
||||
import { SHIKI_SUPPORT_LANGS, shikiThemeDefault } from '../../shared';
|
||||
import { useMarkdownContext } from '../MarkdownProvider';
|
||||
import RunCode from '../RunCode/index.vue';
|
||||
import {
|
||||
controlEle,
|
||||
controlHasRunCodeEle,
|
||||
copyCode,
|
||||
isDark,
|
||||
languageEle,
|
||||
toggleExpand,
|
||||
toggleTheme
|
||||
} from './shiki-header';
|
||||
import '../../style/shiki.scss';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
raw?: RawProps;
|
||||
}>(),
|
||||
{
|
||||
raw: () => ({})
|
||||
}
|
||||
);
|
||||
|
||||
const context = useMarkdownContext();
|
||||
const { codeXSlot, customAttrs, globalShiki } = toValue(context) || {};
|
||||
const renderLines = ref<string[]>([]);
|
||||
const preStyle = ref<any | null>(null);
|
||||
const preClass = ref<string | null>(null);
|
||||
const themes = computed(() => context?.value?.themes ?? shikiThemeDefault);
|
||||
const colorReplacements = computed(() => context?.value?.colorReplacements);
|
||||
const nowViewBtnShow = computed(() => context?.value?.needViewCodeBtn ?? false);
|
||||
const viewCodeModalOptions = computed(
|
||||
() => context?.value?.viewCodeModalOptions
|
||||
);
|
||||
const isExpand = ref(true);
|
||||
const nowCodeLanguage = ref<BundledLanguage>();
|
||||
const codeAttrs =
|
||||
typeof customAttrs?.code === 'function'
|
||||
? customAttrs.code(props.raw)
|
||||
: customAttrs?.code || {};
|
||||
const shikiTransformers = [
|
||||
transformerNotationDiff(),
|
||||
transformerNotationErrorLevel(),
|
||||
transformerNotationFocus(),
|
||||
transformerNotationHighlight(),
|
||||
transformerNotationWordHighlight()
|
||||
];
|
||||
|
||||
const { codeToHtml } = globalShiki as GlobalShiki;
|
||||
// 生成高亮HTML
|
||||
async function generateHtml() {
|
||||
let { language = 'text', content = '' } = props.raw || {};
|
||||
if (!(SHIKI_SUPPORT_LANGS as readonly string[]).includes(language)) {
|
||||
language = 'text';
|
||||
}
|
||||
nowCodeLanguage.value = language as BundledLanguage;
|
||||
const html = await codeToHtml(content.trim(), {
|
||||
lang: language as BundledLanguage,
|
||||
themes: themes.value,
|
||||
colorReplacements: colorReplacements.value,
|
||||
transformers: shikiTransformers
|
||||
});
|
||||
const parse = new DOMParser();
|
||||
const doc = parse.parseFromString(html, 'text/html');
|
||||
const preElement = doc.querySelector('pre');
|
||||
preStyle.value = preElement?.getAttribute('style');
|
||||
const preClassNames = preElement?.className;
|
||||
preClass.value = preClassNames ?? '';
|
||||
const codeElement = doc.querySelector('pre code');
|
||||
if (codeElement) {
|
||||
const lines = codeElement.querySelectorAll('.line'); // 获取所有代码行
|
||||
renderLines.value = Array.from(lines).map(line => line.outerHTML); // 存储每行HTML
|
||||
}
|
||||
}
|
||||
|
||||
// 使用防抖优化代码块渲染，避免SSE流式更新时频繁高亮
|
||||
const debouncedGenerateHtml = debounce(generateHtml, 100, {
|
||||
leading: false,
|
||||
trailing: true,
|
||||
maxWait: 200
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.raw?.content,
|
||||
async content => {
|
||||
if (content) {
|
||||
debouncedGenerateHtml();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 清理防抖定时器
|
||||
onUnmounted(() => {
|
||||
debouncedGenerateHtml.cancel();
|
||||
});
|
||||
|
||||
|
||||
const runCodeOptions = reactive<ElxRunCodeProps>({
|
||||
code: [],
|
||||
content: '',
|
||||
visible: false,
|
||||
lang: '',
|
||||
preClass: '',
|
||||
preStyle: {}
|
||||
});
|
||||
function viewCode(renderLines: string[]) {
|
||||
if (!renderLines?.length) return;
|
||||
|
||||
Object.assign(runCodeOptions, {
|
||||
code: renderLines,
|
||||
content: props.raw?.content ?? '',
|
||||
lang: nowCodeLanguage.value || 'html',
|
||||
preClass: preClass.value || 'pre-md',
|
||||
preStyle: preStyle.value || {},
|
||||
visible: true
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => renderLines.value,
|
||||
val => {
|
||||
if (runCodeOptions.visible) {
|
||||
runCodeOptions.code = val;
|
||||
runCodeOptions.content = props.raw.content ?? '';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 渲染插槽函数
|
||||
function renderSlot(slotName: string) {
|
||||
if (!codeXSlot) {
|
||||
return 'div';
|
||||
}
|
||||
const slotFn = codeXSlot[slotName];
|
||||
if (typeof slotFn === 'function') {
|
||||
return slotFn({
|
||||
...props,
|
||||
renderLines: renderLines.value,
|
||||
isDark,
|
||||
isExpand,
|
||||
nowViewBtnShow: nowViewBtnShow.value,
|
||||
toggleExpand,
|
||||
toggleTheme,
|
||||
copyCode,
|
||||
viewCode
|
||||
} satisfies CodeBlockExpose);
|
||||
}
|
||||
|
||||
return h(slotFn as any, {
|
||||
...props,
|
||||
renderLines: renderLines.value,
|
||||
isDark,
|
||||
isExpand,
|
||||
nowViewBtnShow: nowViewBtnShow.value,
|
||||
toggleExpand,
|
||||
toggleTheme,
|
||||
copyCode,
|
||||
viewCode
|
||||
} satisfies CodeBlockExpose);
|
||||
}
|
||||
|
||||
function handleHeaderLanguageClick() {
|
||||
isExpand.value = !isExpand.value;
|
||||
}
|
||||
|
||||
// 计算属性
|
||||
const computedClass = computed(() => `pre-md ${preClass.value} is-expanded`);
|
||||
const codeClass = computed(() => `language-${props.raw?.language || 'text'}`);
|
||||
const RunCodeComputed = computed(() => {
|
||||
return nowCodeLanguage.value === 'html' && nowViewBtnShow.value
|
||||
? RunCode
|
||||
: undefined;
|
||||
});
|
||||
const codeControllerEleComputed = computed(() => {
|
||||
if (nowCodeLanguage.value === 'html' && nowViewBtnShow.value) {
|
||||
return controlHasRunCodeEle(
|
||||
() => {
|
||||
copyCode(renderLines.value);
|
||||
},
|
||||
() => {
|
||||
viewCode(renderLines.value);
|
||||
}
|
||||
);
|
||||
}
|
||||
return controlEle(() => {
|
||||
copyCode(renderLines.value);
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => nowViewBtnShow.value,
|
||||
v => {
|
||||
if (!v) {
|
||||
runCodeOptions.visible = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 获取是否显示行号
|
||||
const enableCodeLineNumber = computed(() => {
|
||||
return context?.value?.codeXProps?.enableCodeLineNumber ?? false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :key="props.raw?.key" :class="computedClass" :style="preStyle">
|
||||
<div class="markdown-elxLanguage-header-div is-always-shadow">
|
||||
<component
|
||||
:is="renderSlot('codeHeader')"
|
||||
v-if="codeXSlot?.codeHeader && renderSlot('codeHeader')"
|
||||
/>
|
||||
<template v-else>
|
||||
<component
|
||||
:is="
|
||||
codeXSlot?.codeHeaderLanguage
|
||||
? renderSlot('codeHeaderLanguage')
|
||||
: languageEle(props.raw?.language ?? 'text')
|
||||
"
|
||||
@click="handleHeaderLanguageClick"
|
||||
/>
|
||||
<component
|
||||
:is="
|
||||
codeXSlot?.codeHeaderControl
|
||||
? renderSlot('codeHeaderControl')
|
||||
: codeControllerEleComputed
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<code
|
||||
:class="codeClass"
|
||||
:style="{
|
||||
display: 'block',
|
||||
overflowX: 'auto'
|
||||
}"
|
||||
v-bind="codeAttrs"
|
||||
>
|
||||
<HighLightCode
|
||||
:enable-code-line-number="enableCodeLineNumber"
|
||||
:lang="props.raw?.language ?? 'text'"
|
||||
:code="renderLines"
|
||||
/>
|
||||
</code>
|
||||
<!-- run-code -->
|
||||
<component
|
||||
:is="RunCodeComputed"
|
||||
v-bind="{ ...viewCodeModalOptions, ...runCodeOptions }"
|
||||
v-model:visible="runCodeOptions.visible"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { View } from '@element-plus/icons-vue';
|
||||
import { ElButton } from 'element-plus';
|
||||
|
||||
const props = defineProps<{
|
||||
onView: () => void;
|
||||
}>();
|
||||
|
||||
function handleClick() {
|
||||
props.onView();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElButton
|
||||
class="shiki-header-button markdown-elxLanguage-header-button"
|
||||
@click="handleClick"
|
||||
>
|
||||
<View />
|
||||
</ElButton>
|
||||
</template>
|
||||
@@ -0,0 +1,491 @@
|
||||
import type { Component, Ref, VNode } from 'vue';
|
||||
import type { MermaidExposeProps } from '../Mermaid/types';
|
||||
import type {
|
||||
ElxRunCodeCloseBtnExposeProps,
|
||||
ElxRunCodeContentExposeProps,
|
||||
ElxRunCodeExposeProps
|
||||
} from '../RunCode/type';
|
||||
import type { RawProps } from './types';
|
||||
import { useMarkdownContext } from '@components/XMarkdownCore/components/MarkdownProvider';
|
||||
import { ArrowDownBold, Moon, Sunny } from '@element-plus/icons-vue';
|
||||
import { ElButton, ElMessage, ElSpace } from 'element-plus';
|
||||
import { h, ref } from 'vue';
|
||||
import CopyCodeButton from './copy-code-button.vue';
|
||||
import RunCodeButton from './run-code-button.vue';
|
||||
|
||||
export interface CodeBlockExpose {
|
||||
/**
|
||||
* 代码块传入的代码原始数据属性
|
||||
*/
|
||||
raw: RawProps;
|
||||
/**
|
||||
* 渲染的行
|
||||
*/
|
||||
renderLines: Array<string>;
|
||||
/**
|
||||
* 当前主题色是否是暗色
|
||||
*/
|
||||
isDark: Ref<boolean>;
|
||||
/**
|
||||
* 当前代码块是否展开
|
||||
*/
|
||||
isExpand: Ref<boolean>;
|
||||
/**
|
||||
* 是否显示预览代码按钮
|
||||
*/
|
||||
nowViewBtnShow: boolean;
|
||||
/**
|
||||
* 切换展开折叠
|
||||
* @param ev MouseEvent
|
||||
* @returns
|
||||
*/
|
||||
toggleExpand: (ev: MouseEvent) => { isExpand: boolean };
|
||||
/**
|
||||
* 切换主题
|
||||
* @returns
|
||||
*/
|
||||
toggleTheme: () => boolean;
|
||||
/**
|
||||
* 复制代码
|
||||
* @param value
|
||||
*/
|
||||
copyCode: (value: string | Array<string>) => void;
|
||||
/**
|
||||
* 查看代码
|
||||
* @param value
|
||||
*/
|
||||
viewCode: (value: Array<string>) => void;
|
||||
}
|
||||
|
||||
export type ComponentRenderer<T> = Component<T>;
|
||||
|
||||
export type ComponentFunctionRenderer<T> = (props: T) => VNode;
|
||||
|
||||
/**
|
||||
* @description 代码块头部渲染器
|
||||
*/
|
||||
export type CodeBlockHeaderRenderer = ComponentRenderer<CodeBlockExpose>;
|
||||
export type CodeBlockHeaderFunctionRenderer =
|
||||
ComponentFunctionRenderer<CodeBlockExpose>;
|
||||
/**
|
||||
* @description 查看代码头部渲染器
|
||||
*/
|
||||
export type ViewCodeHeadRender = ComponentRenderer<ElxRunCodeExposeProps>;
|
||||
export type ViewCodeHeadFunctionRender =
|
||||
ComponentFunctionRenderer<ElxRunCodeExposeProps>;
|
||||
/**
|
||||
* @description 查看代码头部关闭按钮渲染器
|
||||
*/
|
||||
export type ViewCodeCloseBtnRender =
|
||||
ComponentRenderer<ElxRunCodeCloseBtnExposeProps>;
|
||||
export type ViewCodeCloseBtnFunctionRender =
|
||||
ComponentFunctionRenderer<ElxRunCodeCloseBtnExposeProps>;
|
||||
/**
|
||||
* @description 查看代码内容渲染器
|
||||
*/
|
||||
export type ViewCodeContentRender =
|
||||
ComponentRenderer<ElxRunCodeContentExposeProps>;
|
||||
export type ViewCodeContentFunctionRender =
|
||||
ComponentFunctionRenderer<ElxRunCodeContentExposeProps>;
|
||||
/**
|
||||
* @description Mermaid头部插槽渲染器
|
||||
*/
|
||||
export type MermaidHeaderControlRender = ComponentRenderer<MermaidExposeProps>;
|
||||
export type MermaidHeaderControlFunctionRender =
|
||||
ComponentFunctionRenderer<MermaidExposeProps>;
|
||||
|
||||
export interface CodeBlockHeaderExpose {
|
||||
/**
|
||||
* 代码块自定义头部（包括语言和复制按钮等）
|
||||
* 当有此属性时，将不会显示默认的代码头部 和 codeHeaderLanguage codeHeaderControl 插槽里面的内容
|
||||
*/
|
||||
codeHeader?: CodeBlockHeaderRenderer;
|
||||
/**
|
||||
* 代码块语言插槽
|
||||
*/
|
||||
codeHeaderLanguage?: CodeBlockHeaderRenderer;
|
||||
/**
|
||||
* 代码块右侧插槽
|
||||
*/
|
||||
codeHeaderControl?: CodeBlockHeaderRenderer;
|
||||
/**
|
||||
* 代码块查看代码弹窗的头部插槽
|
||||
*/
|
||||
viewCodeHeader?: ViewCodeHeadRender;
|
||||
/**
|
||||
* 代码块查看代码弹窗的关闭按钮插槽
|
||||
*/
|
||||
viewCodeCloseBtn?: ViewCodeCloseBtnRender;
|
||||
/**
|
||||
* 代码块查看代码弹窗的代码内容插槽
|
||||
*/
|
||||
viewCodeContent?: ViewCodeContentRender;
|
||||
/**
|
||||
* 代码块mermaid头部插槽
|
||||
*/
|
||||
codeMermaidHeaderControl?: MermaidHeaderControlRender;
|
||||
}
|
||||
|
||||
export interface CodeBlockHeaderFunctionExpose {
|
||||
/**
|
||||
* 代码块自定义头部（包括语言和复制按钮等）
|
||||
* 当有此属性时，将不会显示默认的代码头部 和 codeHeaderLanguage codeHeaderControl 插槽里面的内容
|
||||
*/
|
||||
codeHeader?: CodeBlockHeaderFunctionRenderer;
|
||||
/**
|
||||
* 代码块语言插槽
|
||||
*/
|
||||
codeHeaderLanguage?: CodeBlockHeaderFunctionRenderer;
|
||||
/**
|
||||
* 代码块右侧插槽
|
||||
*/
|
||||
codeHeaderControl?: CodeBlockHeaderFunctionRenderer;
|
||||
/**
|
||||
* 代码块查看代码弹窗的头部插槽
|
||||
*/
|
||||
viewCodeHeader?: ViewCodeHeadFunctionRender;
|
||||
/**
|
||||
* 代码块查看代码弹窗的关闭按钮插槽
|
||||
*/
|
||||
viewCodeCloseBtn?: ViewCodeCloseBtnFunctionRender;
|
||||
/**
|
||||
* 代码块查看代码弹窗的代码内容插槽
|
||||
*/
|
||||
viewCodeContent?: ViewCodeContentFunctionRender;
|
||||
/**
|
||||
* 代码块mermaid头部插槽
|
||||
*/
|
||||
codeMermaidHeaderControl?: MermaidHeaderControlFunctionRender;
|
||||
}
|
||||
|
||||
let copyCodeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// 记录当前是否暗色模式
|
||||
export const isDark = ref(document.body.classList.contains('dark'));
|
||||
|
||||
/* ----------------------------------- 按钮组 ---------------------------------- */
|
||||
|
||||
/**
|
||||
* @description 描述 language标签
|
||||
* @date 2025-06-25 17:48:15
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param language
|
||||
*/
|
||||
export function languageEle(language: string) {
|
||||
return h(
|
||||
ElSpace,
|
||||
{
|
||||
class: `markdown-elxLanguage-header-space markdown-elxLanguage-header-space-start markdown-elxLanguage-header-span`,
|
||||
direction: 'horizontal',
|
||||
onClick: (ev: MouseEvent) => {
|
||||
toggleExpand(ev);
|
||||
}
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
class: 'markdown-elxLanguage-header-span is-always-shadow'
|
||||
},
|
||||
language || ''
|
||||
),
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
class: 'shiki-header-button shiki-header-button-expand'
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
h(ArrowDownBold, {
|
||||
class:
|
||||
'markdown-elxLanguage-header-toggle markdown-elxLanguage-header-toggle-expand '
|
||||
})
|
||||
]
|
||||
}
|
||||
)
|
||||
]
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 语言头部操作按钮
|
||||
* @date 2025-06-25 17:49:04
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param {() => void} copy
|
||||
*/
|
||||
export function controlEle(copy: () => void) {
|
||||
return h(
|
||||
ElSpace,
|
||||
{
|
||||
class: `markdown-elxLanguage-header-space`,
|
||||
direction: 'horizontal'
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
toggleThemeEle(),
|
||||
h(CopyCodeButton, { onCopy: copy }) // ✅ 改为组件形式
|
||||
]
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 语言头部操作按钮(带预览代码按钮)
|
||||
* @date 2025-07-09 11:15:27
|
||||
* @author tingfeng
|
||||
* @param copy
|
||||
* @param view
|
||||
*/
|
||||
export function controlHasRunCodeEle(copy: () => void, view: () => void) {
|
||||
const context = useMarkdownContext();
|
||||
const { codeXProps } = toValue(context) || {};
|
||||
return h(
|
||||
ElSpace,
|
||||
{
|
||||
class: `markdown-elxLanguage-header-space`,
|
||||
direction: 'horizontal'
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
codeXProps?.enableCodePreview
|
||||
? h(RunCodeButton, { onView: view })
|
||||
: null,
|
||||
codeXProps?.enableThemeToggle ? toggleThemeEle() : null,
|
||||
codeXProps?.enableCodeCopy ? h(CopyCodeButton, { onCopy: copy }) : null // ✅ 改为组件形式
|
||||
]
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 主题按钮
|
||||
* @date 2025-06-25 17:49:53
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
*/
|
||||
export function toggleThemeEle() {
|
||||
return h(
|
||||
ElButton,
|
||||
{
|
||||
class: 'shiki-header-button markdown-elxLanguage-header-toggle',
|
||||
onClick: () => {
|
||||
toggleTheme();
|
||||
}
|
||||
},
|
||||
{
|
||||
default: () =>
|
||||
h(!isDark.value ? Moon : Sunny, {
|
||||
class: 'markdown-elxLanguage-header-toggle'
|
||||
})
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/* ----------------------------------- 方法 ----------------------------------- */
|
||||
|
||||
/**
|
||||
* @description 描述 展开代码
|
||||
* @date 2025-07-01 11:33:32
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param elem
|
||||
*/
|
||||
export function expand(elem: HTMLElement) {
|
||||
elem.classList.add('is-expanded');
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 折叠代码
|
||||
* @date 2025-07-01 11:33:49
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param elem
|
||||
*/
|
||||
export function collapse(elem: HTMLElement) {
|
||||
elem.classList.remove('is-expanded');
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 复制代码内容到剪贴板
|
||||
* @date 2025-03-28 14:03:22
|
||||
* @author tingfeng
|
||||
*
|
||||
* @async
|
||||
* @param v
|
||||
* @returns void
|
||||
*/
|
||||
async function copy(v: string) {
|
||||
try {
|
||||
// 现代浏览器 Clipboard API
|
||||
if (navigator.clipboard) {
|
||||
await navigator.clipboard.writeText(v);
|
||||
ElMessage({
|
||||
message: '复制成功',
|
||||
type: 'success'
|
||||
});
|
||||
return; // 复制成功直接返回
|
||||
}
|
||||
|
||||
// 兼容旧浏览器的 execCommand 方案
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = v.trim();
|
||||
textarea.style.position = 'fixed'; // 避免滚动到文本框位置
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
|
||||
// 执行复制命令
|
||||
const success = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
if (success) {
|
||||
ElMessage({
|
||||
message: '复制成功',
|
||||
type: 'success'
|
||||
});
|
||||
return; // 复制成功直接返回
|
||||
}
|
||||
if (!success) {
|
||||
throw new Error('复制失败，请检查浏览器权限');
|
||||
}
|
||||
} catch (err) {
|
||||
throw new Error(
|
||||
`复制失败: ${err instanceof Error ? err.message : String(err)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 将源代码行数转换可复制的string
|
||||
* @date 2025-06-25 17:50:42
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param lines
|
||||
*/
|
||||
export function extractCodeFromHtmlLines(lines: string[]): string {
|
||||
const container = document.createElement('div');
|
||||
const output: string[] = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
container.innerHTML = lines[i];
|
||||
const text = container.textContent?.trimEnd();
|
||||
output.push(text ?? '');
|
||||
}
|
||||
|
||||
container.remove();
|
||||
container.innerHTML = ''; // 清空引用内容
|
||||
container.textContent = null;
|
||||
|
||||
return output.join('\n');
|
||||
}
|
||||
|
||||
let isToggling = false;
|
||||
|
||||
/**
|
||||
* @description 描述 切换展开状态
|
||||
* @date 2025-06-26 21:29:50
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param ev
|
||||
*/
|
||||
export function toggleExpand(ev: MouseEvent): { isExpand: boolean } {
|
||||
if (isToggling) return { isExpand: false }; // 防抖保护
|
||||
isToggling = true;
|
||||
|
||||
const ele = ev.currentTarget as HTMLElement;
|
||||
const preMd = ele.closest('.pre-md') as HTMLElement | null;
|
||||
|
||||
if (preMd) {
|
||||
setTimeout(() => {
|
||||
isToggling = false;
|
||||
}, 250);
|
||||
|
||||
if (preMd.classList.contains('is-expanded')) {
|
||||
collapse(preMd);
|
||||
return { isExpand: false };
|
||||
} else {
|
||||
expand(preMd);
|
||||
return { isExpand: true };
|
||||
}
|
||||
}
|
||||
|
||||
isToggling = false;
|
||||
return { isExpand: false };
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 切换主题
|
||||
* @date 2025-06-26 21:58:56
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
*/
|
||||
export function toggleTheme() {
|
||||
const theme = document.body.classList.contains('dark') ? 'light' : 'dark';
|
||||
isDark.value = theme === 'dark';
|
||||
if (isDark.value) {
|
||||
document.body.classList.add('dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
}
|
||||
return isDark.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 初始化主题模式
|
||||
* @date 2025-07-08 13:43:19
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param defaultThemeMode
|
||||
*/
|
||||
export function initThemeMode(defaultThemeMode: 'light' | 'dark') {
|
||||
const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
|
||||
if (theme !== defaultThemeMode) {
|
||||
isDark.value = defaultThemeMode === 'dark';
|
||||
if (defaultThemeMode === 'dark') {
|
||||
document.body.classList.add('dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 描述 复制代码
|
||||
* @date 2025-06-26 22:02:57
|
||||
* @author tingfeng
|
||||
*
|
||||
* @export
|
||||
* @param codeText
|
||||
*/
|
||||
export function copyCode(codeText: string | string[]) {
|
||||
try {
|
||||
if (copyCodeTimer) return false; // 阻止重复点击
|
||||
|
||||
if (Array.isArray(codeText)) {
|
||||
const code = extractCodeFromHtmlLines(codeText);
|
||||
copy(code);
|
||||
} else {
|
||||
copy(codeText);
|
||||
}
|
||||
|
||||
copyCodeTimer = setTimeout(() => {
|
||||
copyCodeTimer = null;
|
||||
}, 800);
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ copyCode ~ error:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
5
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/CodeBlock/types.d.ts
vendored
Normal file
5
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/CodeBlock/types.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
export interface RawProps {
|
||||
language?: string;
|
||||
content?: string;
|
||||
key?: string | number;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import type { CodeLineProps } from './types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = withDefaults(defineProps<CodeLineProps>(), {
|
||||
raw: () => ({}),
|
||||
content: ''
|
||||
});
|
||||
|
||||
// 获取实际内容
|
||||
const content = computed(() => {
|
||||
const result = props.raw?.content || props.content || '';
|
||||
return result;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="inline-code-tag">
|
||||
{{ content }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.inline-code-tag {
|
||||
display: inline;
|
||||
background: #d7e2f8;
|
||||
color: #376fde;
|
||||
padding: 0 4px;
|
||||
margin: 0 4px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
border: 1px solid #d7e2f8;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
line-height: 2;
|
||||
}
|
||||
</style>
|
||||
7
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/CodeLine/types.d.ts
vendored
Normal file
7
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/CodeLine/types.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
export interface CodeLineProps {
|
||||
raw?: {
|
||||
content?: string;
|
||||
inline?: boolean;
|
||||
};
|
||||
content?: string;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, toValue } from 'vue';
|
||||
import { CodeBlock, CodeLine, Mermaid } from '../index';
|
||||
import { useMarkdownContext } from '../MarkdownProvider';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
raw: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const context = useMarkdownContext();
|
||||
const { codeXRender } = toValue(context);
|
||||
return (): ReturnType<typeof h> | null => {
|
||||
if (props.raw.inline) {
|
||||
if (codeXRender && codeXRender.inline) {
|
||||
const renderer = codeXRender.inline;
|
||||
if (typeof renderer === 'function') {
|
||||
return renderer(props);
|
||||
}
|
||||
return h(renderer, props);
|
||||
}
|
||||
return h(CodeLine, { raw: props.raw });
|
||||
}
|
||||
const { language } = props.raw;
|
||||
if (codeXRender && codeXRender[language]) {
|
||||
const renderer = codeXRender[language];
|
||||
if (typeof renderer === 'function') {
|
||||
return renderer(props);
|
||||
}
|
||||
return h(renderer, props);
|
||||
}
|
||||
if (language === 'mermaid') {
|
||||
return h(Mermaid, props);
|
||||
}
|
||||
|
||||
return h(CodeBlock, props);
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts" setup>
|
||||
import { ElScrollbar } from 'element-plus';
|
||||
import { computed } from 'vue';
|
||||
|
||||
export interface HighLightCodeProps {
|
||||
code: string[];
|
||||
lang: string;
|
||||
enableCodeLineNumber: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<HighLightCodeProps>();
|
||||
|
||||
const codeClass = computed(() => `language-${props.lang || 'text'}`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="elx-highlight-code-wrapper">
|
||||
<div v-if="props.enableCodeLineNumber" class="line-numbers">
|
||||
<span
|
||||
v-for="(_line, index) in props.code"
|
||||
:key="index"
|
||||
class="line-number"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
</div>
|
||||
<ElScrollbar class="elx-highlight-code-scrollbar">
|
||||
<div class="code-lines" :class="codeClass">
|
||||
<span
|
||||
v-for="(line, index) in props.code"
|
||||
:key="index"
|
||||
class="line-content"
|
||||
v-html="line"
|
||||
/>
|
||||
</div>
|
||||
</ElScrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./style.scss"></style>
|
||||
@@ -0,0 +1,41 @@
|
||||
.elx-highlight-code-wrapper {
|
||||
display: flex;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
|
||||
.line-numbers {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-right: 1rem;
|
||||
.line-number {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
padding: 0 0 0 0.3em;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.elx-highlight-code-scrollbar {
|
||||
.code-lines {
|
||||
white-space: pre;
|
||||
& > span {
|
||||
width: max-content;
|
||||
display: block;
|
||||
.line {
|
||||
width: max-content;
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import type { GlobalShiki } from '@components/XMarkdownCore/hooks/useShiki';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { MarkdownContext } from './types';
|
||||
import deepmerge from 'deepmerge';
|
||||
|
||||
import { computed, defineComponent, h, inject, provide } from 'vue';
|
||||
import {
|
||||
useDarkModeWatcher,
|
||||
usePlugins,
|
||||
useProcessMarkdown
|
||||
} from '../../hooks';
|
||||
import { GLOBAL_SHIKI_KEY, MARKDOWN_PROVIDER_KEY } from '../../shared';
|
||||
import { MARKDOWN_CORE_PROPS } from '../../shared/constants';
|
||||
import { initThemeMode } from '../CodeBlock/shiki-header';
|
||||
import '../../style/index.scss';
|
||||
|
||||
const MarkdownProvider = defineComponent({
|
||||
name: 'MarkdownProvider',
|
||||
props: MARKDOWN_CORE_PROPS,
|
||||
setup(props, { slots, attrs }) {
|
||||
const { rehypePlugins, remarkPlugins } = usePlugins(props);
|
||||
const { isDark } = useDarkModeWatcher();
|
||||
const globalShiki = inject<GlobalShiki>(GLOBAL_SHIKI_KEY);
|
||||
const markdown = computed(() => {
|
||||
if (props.enableLatex) {
|
||||
return useProcessMarkdown(props.markdown);
|
||||
} else {
|
||||
return props.markdown;
|
||||
}
|
||||
});
|
||||
const processProps = computed(() => {
|
||||
return {
|
||||
...props,
|
||||
codeXProps: Object.assign(
|
||||
{},
|
||||
MARKDOWN_CORE_PROPS.codeXProps.default(),
|
||||
props.codeXProps
|
||||
),
|
||||
markdown: markdown.value
|
||||
};
|
||||
});
|
||||
watch(
|
||||
() => props.defaultThemeMode,
|
||||
v => {
|
||||
if (v) {
|
||||
initThemeMode(v);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const contextProps = computed(() => {
|
||||
return deepmerge(
|
||||
{
|
||||
rehypePlugins: toValue(rehypePlugins),
|
||||
remarkPlugins: toValue(remarkPlugins),
|
||||
isDark: toValue(isDark),
|
||||
globalShiki: toValue(globalShiki)
|
||||
},
|
||||
processProps.value
|
||||
);
|
||||
});
|
||||
provide(MARKDOWN_PROVIDER_KEY, contextProps);
|
||||
return () =>
|
||||
h(
|
||||
'div',
|
||||
{ class: 'elx-xmarkdown-provider', ...attrs },
|
||||
slots.default && slots.default()
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
function useMarkdownContext(): Ref<MarkdownContext> {
|
||||
const context = inject<Ref<MarkdownContext>>(
|
||||
MARKDOWN_PROVIDER_KEY,
|
||||
computed(() => ({}))
|
||||
);
|
||||
if (!context) {
|
||||
return computed(() => ({})) as unknown as Ref<MarkdownContext>;
|
||||
}
|
||||
return context;
|
||||
}
|
||||
export { MarkdownProvider, useMarkdownContext };
|
||||
@@ -0,0 +1,58 @@
|
||||
import type { GlobalShiki } from '@components/XMarkdownCore/hooks/useShiki';
|
||||
import type { InitShikiOptions } from '../../shared';
|
||||
import type { ElxRunCodeOptions } from '../RunCode/type';
|
||||
|
||||
export interface MarkdownContext {
|
||||
// markdown 字符串内容
|
||||
markdown?: string;
|
||||
// 是否允许 HTML
|
||||
allowHtml?: boolean;
|
||||
// 是否启用代码行号
|
||||
enableCodeLineNumber?: boolean;
|
||||
// 是否启用 LaTeX 支持
|
||||
enableLatex?: boolean;
|
||||
// 是否开启动画
|
||||
enableAnimate?: boolean;
|
||||
// 是否启用换行符转 <br>
|
||||
enableBreaks?: boolean;
|
||||
// 自定义代码块渲染函数
|
||||
codeXRender?: Record<string, any>;
|
||||
// 自定义代码块插槽
|
||||
codeXSlot?: Record<string, any>;
|
||||
// 自定义代码块属性
|
||||
codeXProps?: Record<string, any>;
|
||||
// 自定义代码高亮主题
|
||||
codeHighlightTheme?: builtinTheme;
|
||||
// 自定义属性对象
|
||||
customAttrs?: CustomAttrs;
|
||||
// remark 插件列表
|
||||
remarkPlugins?: PluggableList;
|
||||
remarkPluginsAhead?: PluggableList;
|
||||
// rehype 插件列表
|
||||
rehypePlugins?: PluggableList;
|
||||
rehypePluginsAhead?: PluggableList;
|
||||
// rehype 配置项
|
||||
rehypeOptions?: Record<string, any>;
|
||||
// 是否启用内容清洗
|
||||
sanitize?: boolean;
|
||||
// 清洗选项
|
||||
sanitizeOptions?: SanitizeOptions;
|
||||
// Mermaid 配置对象
|
||||
mermaidConfig?: Record<string, any>;
|
||||
// 主题配置
|
||||
themes?: InitShikiOptions['themes'];
|
||||
// 默认主题模式
|
||||
defaultThemeMode?: 'light' | 'dark';
|
||||
// 是否是暗黑模式(代码高亮块)
|
||||
isDarkMode?: boolean;
|
||||
// 自定义当前主题下的代码颜色配置
|
||||
colorReplacements?: InitShikiOptions['colorReplacements'];
|
||||
// 是否显示查看代码按钮
|
||||
needViewCodeBtn?: boolean;
|
||||
// 是否是安全模式预览html
|
||||
secureViewCode?: boolean;
|
||||
// 预览代码弹窗部分配置
|
||||
viewCodeModalOptions?: ElxRunCodeOptions;
|
||||
// 全局shiki
|
||||
globalShiki?: GlobalShiki;
|
||||
}
|
||||
@@ -0,0 +1,480 @@
|
||||
<script setup lang="ts">
|
||||
import type { MermaidToolbarConfig, MermaidToolbarEmits } from './types';
|
||||
import {
|
||||
Aim,
|
||||
Check,
|
||||
CopyDocument,
|
||||
Download,
|
||||
FullScreen,
|
||||
ZoomIn,
|
||||
ZoomOut
|
||||
} from '@element-plus/icons-vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
interface MermaidToolbarInternalProps {
|
||||
toolbarConfig?: MermaidToolbarConfig;
|
||||
isSourceCodeMode?: boolean;
|
||||
sourceCode?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<MermaidToolbarInternalProps>(), {
|
||||
toolbarConfig: () => ({}),
|
||||
isSourceCodeMode: false,
|
||||
sourceCode: ''
|
||||
});
|
||||
|
||||
const emit = defineEmits<MermaidToolbarEmits>();
|
||||
|
||||
// 复制成功状态
|
||||
const isCopySuccess = ref(false);
|
||||
|
||||
// 当前激活的 tab
|
||||
const activeTab = computed({
|
||||
get: () => (props.isSourceCodeMode ? 'code' : 'diagram'),
|
||||
set: (value: string) => {
|
||||
if (value === 'code' && !props.isSourceCodeMode) {
|
||||
handleToggleCode();
|
||||
} else if (value === 'diagram' && props.isSourceCodeMode) {
|
||||
handleToggleCode();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 合并默认配置
|
||||
const config = computed(() => {
|
||||
return {
|
||||
showToolbar: true,
|
||||
showFullscreen: true,
|
||||
showZoomIn: true,
|
||||
showZoomOut: true,
|
||||
showReset: true,
|
||||
showDownload: true,
|
||||
toolbarStyle: {},
|
||||
toolbarClass: '',
|
||||
iconColor: undefined,
|
||||
tabTextColor: undefined,
|
||||
hoverBackgroundColor: undefined,
|
||||
tabActiveBackgroundColor: undefined,
|
||||
...props.toolbarConfig
|
||||
};
|
||||
});
|
||||
|
||||
// 动态图标颜色
|
||||
const iconColorStyle = computed(() => {
|
||||
const style: Record<string, string> = {};
|
||||
|
||||
if (config.value.iconColor) {
|
||||
style.color = config.value.iconColor;
|
||||
style['--custom-icon-color'] = config.value.iconColor;
|
||||
}
|
||||
|
||||
// 设置hover背景色
|
||||
if (config.value.hoverBackgroundColor) {
|
||||
style['--custom-hover-bg'] = config.value.hoverBackgroundColor;
|
||||
} else if (config.value.iconColor) {
|
||||
// 如果设置了图标颜色但没有设置hover背景色，使用稍暗的背景
|
||||
style['--custom-hover-bg'] = 'rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
// 动态 tab 文字颜色
|
||||
const tabTextColorStyle = computed(() => {
|
||||
const style: Record<string, string> = {};
|
||||
|
||||
if (config.value.tabTextColor) {
|
||||
style['--tab-text-color'] = config.value.tabTextColor;
|
||||
}
|
||||
|
||||
// 设置tab激活状态背景色
|
||||
if (config.value.tabActiveBackgroundColor) {
|
||||
style['--tab-active-bg'] = config.value.tabActiveBackgroundColor;
|
||||
} else if (config.value.tabTextColor) {
|
||||
// 如果设置了文字颜色但没有设置激活背景色，使用稍暗的背景
|
||||
style['--tab-active-bg'] = 'rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
function handleZoomIn(event: Event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
emit('onZoomIn');
|
||||
}
|
||||
|
||||
function handleZoomOut(event: Event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
emit('onZoomOut');
|
||||
}
|
||||
|
||||
function handleReset(event: Event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
emit('onReset');
|
||||
}
|
||||
|
||||
function handleFullscreen(event: Event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
emit('onFullscreen');
|
||||
}
|
||||
|
||||
function handleToggleCode(event?: Event) {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
emit('onToggleCode');
|
||||
}
|
||||
|
||||
function handleDownload(event: Event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
emit('onDownload');
|
||||
}
|
||||
|
||||
async function handleCopyCode(event: Event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
// 如果正在显示成功状态，不执行复制操作
|
||||
if (isCopySuccess.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!props.sourceCode) {
|
||||
emit('onCopyCode');
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用现代剪贴板 API
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(props.sourceCode);
|
||||
} else {
|
||||
// 降级方案：使用传统方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = props.sourceCode;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
textArea.style.top = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
textArea.remove();
|
||||
}
|
||||
|
||||
// 设置复制成功状态
|
||||
isCopySuccess.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
isCopySuccess.value = false;
|
||||
}, 1500);
|
||||
|
||||
emit('onCopyCode');
|
||||
} catch (err) {
|
||||
console.error('Failed to copy code: ', err);
|
||||
// 如果复制失败，也通知父组件，让父组件决定如何处理
|
||||
emit('onCopyCode');
|
||||
}
|
||||
}
|
||||
|
||||
function handleToolbarClick(event: Event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function handleTabClick(tabName: string) {
|
||||
activeTab.value = tabName;
|
||||
}
|
||||
|
||||
interface TabClickEvent {
|
||||
paneName: string;
|
||||
}
|
||||
|
||||
function handleTabClickEvent(pane: TabClickEvent) {
|
||||
handleTabClick(pane.paneName);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 正常状态：显示工具栏 -->
|
||||
<div
|
||||
v-if="config.showToolbar"
|
||||
class="mermaid-toolbar"
|
||||
:class="config.toolbarClass"
|
||||
:style="config.toolbarStyle"
|
||||
@click="handleToolbarClick"
|
||||
>
|
||||
<!-- 左侧 Tabs -->
|
||||
<div class="toolbar-left" :style="tabTextColorStyle">
|
||||
<el-tabs
|
||||
:model-value="activeTab"
|
||||
class="toolbar-tabs"
|
||||
@tab-click="handleTabClickEvent"
|
||||
>
|
||||
<el-tab-pane label="图片" name="diagram" />
|
||||
<el-tab-pane label="代码" name="code" />
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 右侧按钮组 -->
|
||||
<div class="toolbar-right">
|
||||
<!-- 代码视图：只显示复制按钮 -->
|
||||
<template v-if="props.isSourceCodeMode">
|
||||
<div
|
||||
class="toolbar-action-btn"
|
||||
:class="{ 'copy-success': isCopySuccess }"
|
||||
:style="iconColorStyle"
|
||||
@click="handleCopyCode($event)"
|
||||
>
|
||||
<el-icon :size="16">
|
||||
<Check v-if="isCopySuccess" />
|
||||
<CopyDocument v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 图片视图：显示所有操作按钮 -->
|
||||
<template v-else>
|
||||
<!-- 下载按钮 -->
|
||||
<div
|
||||
v-if="config.showDownload"
|
||||
class="toolbar-action-btn"
|
||||
:style="iconColorStyle"
|
||||
@click="handleDownload($event)"
|
||||
>
|
||||
<el-icon :size="16">
|
||||
<Download />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<div v-if="config.showDownload" class="toolbar-divider" />
|
||||
|
||||
<!-- 缩小按钮 -->
|
||||
<div
|
||||
v-if="config.showZoomOut"
|
||||
class="toolbar-action-btn"
|
||||
:style="iconColorStyle"
|
||||
@click="handleZoomOut($event)"
|
||||
>
|
||||
<el-icon :size="16">
|
||||
<ZoomOut />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 放大按钮 -->
|
||||
<div
|
||||
v-if="config.showZoomIn"
|
||||
class="toolbar-action-btn"
|
||||
:style="iconColorStyle"
|
||||
@click="handleZoomIn($event)"
|
||||
>
|
||||
<el-icon :size="16">
|
||||
<ZoomIn />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 适应按钮 (重置) -->
|
||||
<div
|
||||
v-if="config.showReset"
|
||||
class="toolbar-action-btn"
|
||||
:style="iconColorStyle"
|
||||
@click="handleReset($event)"
|
||||
>
|
||||
<el-icon :size="16">
|
||||
<Aim />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 全屏按钮 -->
|
||||
<div
|
||||
v-if="config.showFullscreen"
|
||||
class="toolbar-action-btn"
|
||||
:style="iconColorStyle"
|
||||
@click="handleFullscreen($event)"
|
||||
>
|
||||
<el-icon :size="16">
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mermaid-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
background: #ebecef;
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: 0 12px;
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.toolbar-left {
|
||||
flex: 1;
|
||||
|
||||
.toolbar-tabs {
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav) {
|
||||
background: #dddee1;
|
||||
padding: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
color: var(--tab-text-color, var(--el-text-color-regular));
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-active {
|
||||
color: var(--tab-text-color, var(--el-text-color-primary));
|
||||
background: var(--tab-active-bg, rgba(255, 255, 255, 0.8));
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&:hover:not(.is-active) {
|
||||
color: var(--tab-text-color, var(--el-text-color-primary));
|
||||
background: #d1d2d5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
|
||||
.toolbar-action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--el-text-color-regular);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
color: var(--custom-icon-color, var(--el-text-color-primary));
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #dddee1;
|
||||
border-radius: 4px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not(.disabled) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
&.toolbar-action-btn-last {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.copy-success {
|
||||
cursor: default;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: var(--el-border-color);
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 父容器悬停时显示工具栏 */
|
||||
:global(.markdown-mermaid:hover .mermaid-toolbar) {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 全屏状态下的样式调整 */
|
||||
:global(.markdown-mermaid:fullscreen .mermaid-toolbar) {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.toolbar-left .toolbar-tabs {
|
||||
:deep(.el-tabs__item) {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
&.is-active {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:hover:not(.is-active) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
.toolbar-action-btn {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
// 复制到剪贴板
|
||||
export async function copyToClipboard(content: string): Promise<boolean> {
|
||||
if (!content)
|
||||
return false;
|
||||
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(content);
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = content;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
textArea.style.top = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
textArea.remove();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error('复制失败: ', err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// SVG下载功能
|
||||
export function downloadSvgAsPng(svg: string): void {
|
||||
if (!svg)
|
||||
return;
|
||||
|
||||
try {
|
||||
const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d', { willReadFrequently: false });
|
||||
if (!ctx)
|
||||
return;
|
||||
|
||||
const scale = 2;
|
||||
canvas.width = img.width * scale;
|
||||
canvas.height = img.height * scale;
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
|
||||
// 白色背景
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 绘制SVG
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 下载
|
||||
const timestamp = new Date()
|
||||
.toISOString()
|
||||
.slice(0, 19)
|
||||
.replace(/:/g, '-');
|
||||
|
||||
try {
|
||||
canvas.toBlob(
|
||||
blob => {
|
||||
if (!blob)
|
||||
return;
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `mermaid-diagram-${timestamp}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
},
|
||||
'image/png',
|
||||
0.95
|
||||
);
|
||||
}
|
||||
catch (toBlobError) {
|
||||
console.error('toBlobError:', toBlobError);
|
||||
// 降级方案
|
||||
try {
|
||||
const dataUrl = canvas.toDataURL('image/png', 0.95);
|
||||
const link = document.createElement('a');
|
||||
link.href = dataUrl;
|
||||
link.download = `mermaid-diagram-${timestamp}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
catch (dataUrlError) {
|
||||
console.error('dataUrlError:', dataUrlError);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (canvasError) {
|
||||
console.error('Canvas操作失败:', canvasError);
|
||||
}
|
||||
};
|
||||
|
||||
img.onerror = error => {
|
||||
console.error('Image load error:', error);
|
||||
};
|
||||
|
||||
img.src = svgDataUrl;
|
||||
}
|
||||
catch (error) {
|
||||
console.error('下载失败:', error);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import type { MdComponent } from '../types';
|
||||
import type { MermaidExposeProps, MermaidToolbarConfig } from './types';
|
||||
import { debounce } from 'radash';
|
||||
import { computed, nextTick, ref, toValue, watch } from 'vue';
|
||||
import { useMermaid, useMermaidZoom } from '../../hooks';
|
||||
import { useMarkdownContext } from '../MarkdownProvider';
|
||||
import { copyToClipboard, downloadSvgAsPng } from './composables';
|
||||
import MermaidToolbar from './MermaidToolbar.vue';
|
||||
|
||||
interface MermaidProps extends MdComponent {
|
||||
toolbarConfig?: MermaidToolbarConfig;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<MermaidProps>(), {
|
||||
raw: () => ({}),
|
||||
toolbarConfig: () => ({})
|
||||
});
|
||||
|
||||
const mermaidContent = computed(() => props.raw?.content || '');
|
||||
const mermaidResult = useMermaid(mermaidContent, {
|
||||
id: `mermaid-${props.raw?.key || 'default'}`
|
||||
});
|
||||
|
||||
const svg = ref('');
|
||||
const isLoading = computed(
|
||||
() => !mermaidResult.data.value && !mermaidResult.error.value
|
||||
);
|
||||
|
||||
// 获取插槽上下文
|
||||
const context = useMarkdownContext();
|
||||
const { codeXSlot } = toValue(context);
|
||||
|
||||
// 计算工具栏配置，合并默认值
|
||||
const toolbarConfig = computed(() => {
|
||||
const contextMermaidConfig = toValue(context)?.mermaidConfig || {};
|
||||
return {
|
||||
showToolbar: true,
|
||||
showFullscreen: true,
|
||||
showZoomIn: true,
|
||||
showZoomOut: true,
|
||||
showReset: true,
|
||||
...contextMermaidConfig,
|
||||
...props.toolbarConfig
|
||||
};
|
||||
});
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null);
|
||||
const showSourceCode = ref(false);
|
||||
|
||||
// 初始化缩放功能
|
||||
const zoomControls = useMermaidZoom({
|
||||
container: containerRef,
|
||||
scaleStep: 0.2,
|
||||
minScale: 0.1,
|
||||
maxScale: 5
|
||||
});
|
||||
|
||||
const debouncedInitialize = debounce({ delay: 500 }, onContentTransitionEnter);
|
||||
watch(
|
||||
() => mermaidResult.data.value,
|
||||
newSvg => {
|
||||
if (newSvg) {
|
||||
svg.value = newSvg;
|
||||
debouncedInitialize();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(svg, newSvg => {
|
||||
if (newSvg) {
|
||||
debouncedInitialize();
|
||||
}
|
||||
});
|
||||
|
||||
// 工具栏事件处理
|
||||
function handleZoomIn() {
|
||||
if (!showSourceCode.value) {
|
||||
zoomControls?.zoomIn();
|
||||
}
|
||||
}
|
||||
|
||||
function handleZoomOut() {
|
||||
if (!showSourceCode.value) {
|
||||
zoomControls?.zoomOut();
|
||||
}
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
if (!showSourceCode.value) {
|
||||
zoomControls?.reset();
|
||||
}
|
||||
}
|
||||
|
||||
function handleFullscreen() {
|
||||
if (!showSourceCode.value) {
|
||||
zoomControls?.fullscreen();
|
||||
zoomControls?.reset();
|
||||
}
|
||||
}
|
||||
|
||||
function handleToggleCode() {
|
||||
showSourceCode.value = !showSourceCode.value;
|
||||
}
|
||||
|
||||
async function handleCopyCode() {
|
||||
if (!props.raw.content) {
|
||||
return;
|
||||
}
|
||||
copyToClipboard(props.raw.content);
|
||||
}
|
||||
|
||||
function handleDownload() {
|
||||
downloadSvgAsPng(svg.value);
|
||||
}
|
||||
// 处理图表内容过渡完成事件
|
||||
function onContentTransitionEnter() {
|
||||
// 只在图表模式下初始化缩放功能
|
||||
if (!showSourceCode.value) {
|
||||
// 使用 nextTick 确保 DOM 完全更新
|
||||
nextTick(() => {
|
||||
if (containerRef.value) {
|
||||
zoomControls.initialize();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 创建暴露给插槽的方法对象
|
||||
const exposedMethods = computed(() => {
|
||||
return {
|
||||
// 基础属性
|
||||
showSourceCode: showSourceCode.value,
|
||||
svg: svg.value,
|
||||
rawContent: props.raw.content || '',
|
||||
toolbarConfig: toolbarConfig.value,
|
||||
isLoading: isLoading.value,
|
||||
|
||||
// 缩放控制方法
|
||||
zoomIn: handleZoomIn,
|
||||
zoomOut: handleZoomOut,
|
||||
reset: handleReset,
|
||||
fullscreen: handleFullscreen,
|
||||
|
||||
// 其他操作方法
|
||||
toggleCode: handleToggleCode,
|
||||
copyCode: handleCopyCode,
|
||||
download: handleDownload,
|
||||
|
||||
// 原始 props（除了重复的 toolbarConfig）
|
||||
raw: props.raw
|
||||
} satisfies MermaidExposeProps;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="containerRef" :key="props.raw.key" class="markdown-mermaid">
|
||||
<!-- 工具栏 -->
|
||||
<Transition name="toolbar" appear>
|
||||
<div class="toolbar-container">
|
||||
<!-- 自定义完整头部插槽 -->
|
||||
<component
|
||||
:is="codeXSlot.codeMermaidHeader"
|
||||
v-if="codeXSlot?.codeMermaidHeader"
|
||||
v-bind="exposedMethods"
|
||||
/>
|
||||
<!-- 默认工具栏 + 自定义操作插槽 -->
|
||||
<template v-else>
|
||||
<!-- 自定义操作按钮插槽 -->
|
||||
<component
|
||||
:is="codeXSlot.codeMermaidHeaderControl"
|
||||
v-if="codeXSlot?.codeMermaidHeaderControl"
|
||||
v-bind="exposedMethods"
|
||||
/>
|
||||
<!-- 默认工具栏 -->
|
||||
<MermaidToolbar
|
||||
v-else
|
||||
:toolbar-config="toolbarConfig"
|
||||
:is-source-code-mode="showSourceCode"
|
||||
:source-code="props.raw.content"
|
||||
@on-zoom-in="handleZoomIn"
|
||||
@on-zoom-out="handleZoomOut"
|
||||
@on-reset="handleReset"
|
||||
@on-fullscreen="handleFullscreen"
|
||||
@on-toggle-code="handleToggleCode"
|
||||
@on-copy-code="handleCopyCode"
|
||||
@on-download="handleDownload"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition
|
||||
name="content"
|
||||
mode="out-in"
|
||||
@after-enter="onContentTransitionEnter"
|
||||
>
|
||||
<pre v-if="showSourceCode" key="source" class="mermaid-source-code">{{
|
||||
props.raw.content
|
||||
}}</pre>
|
||||
<div v-else class="mermaid-content" v-html="svg" />
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style src="./style.scss"></style>
|
||||
@@ -0,0 +1,181 @@
|
||||
.markdown-mermaid {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 工具栏容器样式
|
||||
.toolbar-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
background: white;
|
||||
|
||||
// 确保自定义头部插槽正确显示
|
||||
.custom-mermaid-header {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
// 默认工具栏的基础样式
|
||||
.mermaid-language-tag {
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #e0f2fe;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #0891b2;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
// 简单默认工具栏样式
|
||||
.mermaid-default-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: white;
|
||||
|
||||
.toolbar-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
color: #374151;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mermaid-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
// max-height: 80vh;
|
||||
cursor: grab;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden; // 防止未缩放的大图表溢出
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
svg {
|
||||
transform-origin: center center; // SVG 的变换原点
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// 渲染状态时的加载效果
|
||||
&.rendering {
|
||||
svg {
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全屏
|
||||
&:fullscreen {
|
||||
.mermaid-content {
|
||||
max-height: 100vh;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
.mermaid-content {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
&.zoom-limit {
|
||||
.mermaid-content {
|
||||
transform-origin: center center;
|
||||
}
|
||||
}
|
||||
|
||||
.mermaid-source-code {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容切换过渡 - 减少闪烁，优化为淡入淡出
|
||||
.content-enter-active {
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
.content-leave-active {
|
||||
transition: opacity 0.15s ease-in;
|
||||
}
|
||||
|
||||
.content-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.content-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 工具栏过渡
|
||||
.toolbar-enter-active,
|
||||
.toolbar-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.toolbar-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.toolbar-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
80
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/Mermaid/types.d.ts
vendored
Normal file
80
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/Mermaid/types.d.ts
vendored
Normal file
@@ -0,0 +1,80 @@
|
||||
export interface MermaidToolbarConfig {
|
||||
showToolbar?: boolean;
|
||||
showFullscreen?: boolean;
|
||||
showZoomIn?: boolean;
|
||||
showZoomOut?: boolean;
|
||||
showReset?: boolean;
|
||||
showDownload?: boolean;
|
||||
toolbarStyle?: Record<string, any>;
|
||||
toolbarClass?: string;
|
||||
iconColor?: string;
|
||||
tabTextColor?: string;
|
||||
hoverBackgroundColor?: string;
|
||||
tabActiveBackgroundColor?: string;
|
||||
}
|
||||
|
||||
export interface MermaidToolbarProps extends MermaidToolbarConfig {}
|
||||
|
||||
export interface MermaidZoomControls {
|
||||
zoomIn: () => void;
|
||||
zoomOut: () => void;
|
||||
reset: () => void;
|
||||
fullscreen: () => void;
|
||||
destroy: () => void;
|
||||
initialize: () => void;
|
||||
}
|
||||
|
||||
export interface UseMermaidZoomOptions {
|
||||
container: Ref<HTMLElement | null>;
|
||||
scaleStep?: number;
|
||||
minScale?: number;
|
||||
maxScale?: number;
|
||||
}
|
||||
|
||||
export interface MermaidToolbarEmits {
|
||||
onZoomIn: [];
|
||||
onZoomOut: [];
|
||||
onReset: [];
|
||||
onFullscreen: [];
|
||||
onEdit: [];
|
||||
onToggleCode: [];
|
||||
onCopyCode: [];
|
||||
onDownload: [];
|
||||
}
|
||||
|
||||
// Mermaid 组件暴露给插槽的方法接口
|
||||
export interface MermaidExposedMethods {
|
||||
zoomIn: () => void;
|
||||
zoomOut: () => void;
|
||||
reset: () => void;
|
||||
fullscreen: () => void;
|
||||
toggleCode: () => void;
|
||||
copyCode: () => void;
|
||||
download: () => void;
|
||||
svg: import('vue').Ref<string>;
|
||||
showSourceCode: import('vue').Ref<boolean>;
|
||||
toolbarConfig: import('vue').ComputedRef<MermaidToolbarConfig>;
|
||||
rawContent: string;
|
||||
}
|
||||
|
||||
export interface MermaidExposeProps {
|
||||
showSourceCode: boolean;
|
||||
svg: string;
|
||||
rawContent: any;
|
||||
toolbarConfig: MermaidToolbarConfig;
|
||||
isLoading: boolean;
|
||||
|
||||
// 缩放控制方法
|
||||
zoomIn: () => void;
|
||||
zoomOut: () => void;
|
||||
reset: () => void;
|
||||
fullscreen: () => void;
|
||||
|
||||
// 其他操作方法
|
||||
toggleCode: () => void;
|
||||
copyCode: () => Promise<void>;
|
||||
download: () => void;
|
||||
|
||||
// 原始 props（除了重复的 toolbarConfig）
|
||||
raw: any;
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="dot-spinner">
|
||||
<div class="dot-spinner__dot" />
|
||||
<div class="dot-spinner__dot" />
|
||||
<div class="dot-spinner__dot" />
|
||||
<div class="dot-spinner__dot" />
|
||||
<div class="dot-spinner__dot" />
|
||||
<div class="dot-spinner__dot" />
|
||||
<div class="dot-spinner__dot" />
|
||||
<div class="dot-spinner__dot" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dot-spinner {
|
||||
--uib-size: 2.8rem;
|
||||
--uib-speed: 0.9s;
|
||||
--uib-color: var(--el-color-primary);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: var(--uib-size);
|
||||
width: var(--uib-size);
|
||||
}
|
||||
|
||||
.dot-spinner__dot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dot-spinner__dot::before {
|
||||
content: '';
|
||||
height: 20%;
|
||||
width: 20%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--uib-color);
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
animation: pulse0112 calc(var(--uib-speed) * 1.311) ease-in-out infinite;
|
||||
box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(2) {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(2)::before {
|
||||
animation-delay: calc(var(--uib-speed) * -0.875);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(3) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(3)::before {
|
||||
animation-delay: calc(var(--uib-speed) * -0.75);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(4) {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(4)::before {
|
||||
animation-delay: calc(var(--uib-speed) * -0.625);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(5) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(5)::before {
|
||||
animation-delay: calc(var(--uib-speed) * -0.5);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(6) {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(6)::before {
|
||||
animation-delay: calc(var(--uib-speed) * -0.375);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(7) {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(7)::before {
|
||||
animation-delay: calc(var(--uib-speed) * -0.25);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(8) {
|
||||
transform: rotate(315deg);
|
||||
}
|
||||
|
||||
.dot-spinner__dot:nth-child(8)::before {
|
||||
animation-delay: calc(var(--uib-speed) * -0.125);
|
||||
}
|
||||
|
||||
@keyframes pulse0112 {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
export enum SELECT_OPTIONS_ENUM {
|
||||
'CODE' = '代码',
|
||||
'VIEW' = '预览'
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ElxRunCodeContentProps } from '../type';
|
||||
import DOMPurify from 'dompurify';
|
||||
import _ from 'lodash';
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||
import HighLightCode from '../../HighLightCode/index.vue';
|
||||
import { useMarkdownContext } from '../../MarkdownProvider';
|
||||
import CustomLoading from './custom-loading.vue';
|
||||
import { SELECT_OPTIONS_ENUM } from './options';
|
||||
|
||||
const props = defineProps<ElxRunCodeContentProps>();
|
||||
|
||||
const computedClass = computed(() => `pre-md ${props.preClass}`);
|
||||
|
||||
const codeClass = computed(() => `language-${props.lang || 'text'}`);
|
||||
|
||||
const iframeRef = ref<HTMLIFrameElement>();
|
||||
|
||||
const allHtml = computed(() => props.content);
|
||||
|
||||
const codeContainerRef = ref<HTMLElement>();
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const context = useMarkdownContext();
|
||||
|
||||
const isSafeViewCode = computed(() => {
|
||||
return context.value.secureViewCode;
|
||||
});
|
||||
const enableCodeLineNumber = computed(() => {
|
||||
return context.value?.enableCodeLineNumber || false;
|
||||
});
|
||||
function doRenderIframe() {
|
||||
const iframe = iframeRef.value;
|
||||
if (!iframe)
|
||||
return;
|
||||
|
||||
isLoading.value = true;
|
||||
|
||||
const rawHtml = allHtml.value || '';
|
||||
let sanitizedHtml = rawHtml;
|
||||
|
||||
// 安全模式过滤
|
||||
if (isSafeViewCode.value) {
|
||||
sanitizedHtml = DOMPurify.sanitize(rawHtml, {
|
||||
WHOLE_DOCUMENT: true,
|
||||
FORBID_TAGS: ['script', 'iframe', 'object', 'embed'],
|
||||
FORBID_ATTR: ['onerror', 'onclick', 'onload', 'style']
|
||||
});
|
||||
}
|
||||
|
||||
// 检查 <head> 中是否有 UTF-8 charset
|
||||
let finalHtml = sanitizedHtml;
|
||||
const hasHead = /<head[^>]*>/i.test(sanitizedHtml);
|
||||
const hasUtf8Meta =
|
||||
/<head[^>]*>[\s\S]*?<meta\s[^>]*charset=["']?utf-8["']?/i.test(
|
||||
sanitizedHtml
|
||||
);
|
||||
|
||||
if (hasHead) {
|
||||
if (!hasUtf8Meta) {
|
||||
finalHtml = sanitizedHtml.replace(
|
||||
/<head[^>]*>/i,
|
||||
match => `${match}<meta charset="UTF-8">`
|
||||
);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// 没有 <head>，插入 <head><meta charset="UTF-8"></head> 到 <html> 或最前
|
||||
if (/<html[^>]*>/i.test(sanitizedHtml)) {
|
||||
finalHtml = sanitizedHtml.replace(
|
||||
/<html[^>]*>/i,
|
||||
match => `${match}<head><meta charset="UTF-8"></head>`
|
||||
);
|
||||
}
|
||||
else {
|
||||
// 甚至没有 <html>，包一层完整结构
|
||||
finalHtml = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><meta charset="UTF-8"></head>
|
||||
<body>${sanitizedHtml}</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
const blob = new Blob([finalHtml], { type: 'text/html' });
|
||||
|
||||
if (iframe.src && iframe.src.startsWith('blob:')) {
|
||||
URL.revokeObjectURL(iframe.src);
|
||||
}
|
||||
|
||||
iframe.src = URL.createObjectURL(blob);
|
||||
|
||||
const onLoad = () => {
|
||||
setTimeout(() => {
|
||||
isLoading.value = false;
|
||||
}, 300);
|
||||
iframe.removeEventListener('load', onLoad);
|
||||
};
|
||||
iframe.addEventListener('load', onLoad);
|
||||
}
|
||||
|
||||
const renderIframe = _.debounce(() => {
|
||||
doRenderIframe();
|
||||
}, 300);
|
||||
|
||||
function startRender() {
|
||||
if (props.nowView === SELECT_OPTIONS_ENUM.VIEW) {
|
||||
isLoading.value = true;
|
||||
renderIframe();
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.nowView, isSafeViewCode.value],
|
||||
() => {
|
||||
startRender();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
watch(
|
||||
() => props.code,
|
||||
() => {
|
||||
startRender();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
startRender();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar
|
||||
ref="codeContainerRef"
|
||||
class="elx-run-code-content-scrollbar"
|
||||
:style="preStyle"
|
||||
>
|
||||
<div
|
||||
v-show="props.nowView === SELECT_OPTIONS_ENUM.CODE"
|
||||
class="elx-xmarkdown-container elx-run-code-content"
|
||||
>
|
||||
<pre>
|
||||
<div
|
||||
:class="computedClass"
|
||||
:style="preStyle"
|
||||
>
|
||||
<code
|
||||
class="elx-run-code-content-code"
|
||||
:class="codeClass"
|
||||
>
|
||||
<HighLightCode
|
||||
:enable-code-line-number="enableCodeLineNumber"
|
||||
:lang="props.lang"
|
||||
:code="props.code"
|
||||
/>
|
||||
</code>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div
|
||||
v-show="props.nowView === SELECT_OPTIONS_ENUM.VIEW"
|
||||
style="position: relative; width: 100%; height: 100%"
|
||||
class="elx-run-code-content-view"
|
||||
>
|
||||
<div v-if="isLoading" class="iframe-loading-mask">
|
||||
<CustomLoading />
|
||||
</div>
|
||||
<div v-show="!isLoading" class="elx-run-code-content-view-iframe">
|
||||
<iframe
|
||||
ref="iframeRef"
|
||||
sandbox="allow-scripts"
|
||||
style="border: 0; width: 100%; height: 79.5vh"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style src="./style/index.scss"></style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ElxRunCodeHeaderTypes } from '../type';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { SELECT_OPTIONS_ENUM } from './options';
|
||||
|
||||
interface ElxRunCodeProps {
|
||||
value: ElxRunCodeHeaderTypes['options'];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ElxRunCodeProps>(), {});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'changeSelect', val: string): void;
|
||||
(e: 'update:value'): void;
|
||||
}>();
|
||||
|
||||
const options = Object.values(SELECT_OPTIONS_ENUM);
|
||||
|
||||
const selectValue = useVModel(props, 'value', emit);
|
||||
|
||||
function change(val: string) {
|
||||
emit('changeSelect', val);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom-style">
|
||||
<el-segmented v-model="selectValue" :options="options" @change="change" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style src="./style/index.scss"></style>
|
||||
@@ -0,0 +1,61 @@
|
||||
.custom-style .el-segmented {
|
||||
--el-segmented-item-selected-color: white;
|
||||
--el-border-radius-base: var(--shiki-custom-brr);
|
||||
}
|
||||
|
||||
body.dark {
|
||||
.custom-style .el-segmented {
|
||||
--el-segmented-item-selected-bg-color: #409eff;
|
||||
--el-segmented-item-selected-color: white;
|
||||
--el-segmented-item-hover-bg-color: #4e4e4e;
|
||||
--el-segmented-item-active-bg-color: #4e4e4e;
|
||||
--el-fill-color-light: #39393a;
|
||||
.el-segmented__item-label {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.elx-run-code-content-scrollbar {
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.elx-run-code-content-scrollbar {
|
||||
background-color: var(--shiki-bg) !important;
|
||||
}
|
||||
|
||||
.elx-run-code-content {
|
||||
width: 100%;
|
||||
height: 80vh !important;
|
||||
padding: 0 !important;
|
||||
.elx-run-code-content-code {
|
||||
overflow: visible !important;
|
||||
padding: 10px 0;
|
||||
}
|
||||
pre {
|
||||
white-space: nowrap !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
pre div.pre-md {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.code-line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.line-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.iframe-loading-mask {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 79.8vh;
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ElxRunCodeHeaderTypes, ElxRunCodeProps } from './type';
|
||||
import { CloseBold } from '@element-plus/icons-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { computed, h, ref, toValue } from 'vue';
|
||||
import { useMarkdownContext } from '../MarkdownProvider';
|
||||
import { SELECT_OPTIONS_ENUM } from './components/options';
|
||||
import RunCodeContent from './components/run-code-content.vue';
|
||||
import RunCodeHeader from './components/run-code-header.vue';
|
||||
|
||||
const props = withDefaults(defineProps<ElxRunCodeProps>(), {
|
||||
code: () => [],
|
||||
lang: '',
|
||||
mode: 'drawer'
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible'): void;
|
||||
}>();
|
||||
const drawer = useVModel(props, 'visible', emit);
|
||||
|
||||
const selectValue = ref<ElxRunCodeHeaderTypes['options']>(
|
||||
SELECT_OPTIONS_ENUM.VIEW
|
||||
);
|
||||
|
||||
const isView = computed(() => selectValue.value === SELECT_OPTIONS_ENUM.VIEW);
|
||||
const context = useMarkdownContext();
|
||||
const { codeXSlot } = toValue(context) || {};
|
||||
|
||||
function changeSelectValue(val: ElxRunCodeHeaderTypes['options']) {
|
||||
selectValue.value = val;
|
||||
}
|
||||
|
||||
function close() {
|
||||
drawer.value = false;
|
||||
}
|
||||
|
||||
// 渲染插槽函数
|
||||
function renderSlot(slotName: string) {
|
||||
if (!codeXSlot) {
|
||||
return 'div';
|
||||
}
|
||||
const slotFn = codeXSlot[slotName];
|
||||
if (typeof slotFn === 'function') {
|
||||
return slotFn({
|
||||
...props,
|
||||
value: selectValue.value,
|
||||
close,
|
||||
changeSelectValue
|
||||
});
|
||||
}
|
||||
|
||||
return h(slotFn as any, {
|
||||
...props,
|
||||
value: selectValue.value,
|
||||
close,
|
||||
changeSelectValue
|
||||
});
|
||||
}
|
||||
|
||||
const RunCodeCloseBtnComputed = computed(() => {
|
||||
if (codeXSlot?.viewCodeCloseBtn) {
|
||||
return renderSlot('viewCodeCloseBtn');
|
||||
}
|
||||
return CloseBold;
|
||||
});
|
||||
const RunCodeHeaderComputed = computed(() => {
|
||||
if (codeXSlot?.viewCodeHeader) {
|
||||
return renderSlot('viewCodeHeader');
|
||||
}
|
||||
return RunCodeHeader;
|
||||
});
|
||||
|
||||
const RunCodeContentComputed = computed(() => {
|
||||
if (codeXSlot?.viewCodeContent) {
|
||||
return renderSlot('viewCodeContent');
|
||||
}
|
||||
return null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-if="props.mode === 'dialog'"
|
||||
v-model="drawer"
|
||||
:class="`${props.customClass} ${isView ? 'elx-run-code-dialog-view' : ''}`"
|
||||
:close-on-click-modal="props.dialogOptions?.closeOnClickModal ?? true"
|
||||
:close-on-press-escape="props.dialogOptions?.closeOnPressEscape ?? true"
|
||||
:show-close="false"
|
||||
class="elx-run-code-dialog"
|
||||
align-center
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
>
|
||||
<template #header>
|
||||
<component :is="RunCodeHeaderComputed" v-model:value="selectValue" />
|
||||
<el-button class="view-code-close-btn" @click="close">
|
||||
<component :is="RunCodeCloseBtnComputed" />
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<component :is="RunCodeContentComputed" v-if="RunCodeContentComputed" />
|
||||
<RunCodeContent v-else v-bind="props" :now-view="selectValue" />
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-drawer
|
||||
v-if="props.mode === 'drawer'"
|
||||
v-model="drawer"
|
||||
:class="`${props.customClass} ${isView ? 'elx-run-code-drawer-view' : ''}`"
|
||||
:close-on-click-modal="props.drawerOptions?.closeOnClickModal ?? true"
|
||||
:close-on-press-escape="props.drawerOptions?.closeOnPressEscape ?? true"
|
||||
:show-close="false"
|
||||
class="elx-run-code-drawer"
|
||||
align-center
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
>
|
||||
<template #header>
|
||||
<component :is="RunCodeHeaderComputed" v-model:value="selectValue" />
|
||||
<el-button
|
||||
class="view-code-close-btn"
|
||||
:class="{ customCloseBtn: !!codeXSlot?.viewCodeCloseBtn }"
|
||||
@click="close"
|
||||
>
|
||||
<component :is="RunCodeCloseBtnComputed" />
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<component :is="RunCodeContentComputed" v-if="RunCodeContentComputed" />
|
||||
<RunCodeContent v-else v-bind="props" :now-view="selectValue" />
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style src="./style.scss"></style>
|
||||
@@ -0,0 +1,86 @@
|
||||
.elx-run-code-dialog,
|
||||
.elx-run-code-drawer {
|
||||
width: 75% !important;
|
||||
background-color: var(--shiki-code-header-bg) !important;
|
||||
.el-dialog__body {
|
||||
overflow: auto;
|
||||
border-radius: var(--shiki-custom-brr);
|
||||
}
|
||||
.el-drawer__body {
|
||||
overflow: auto;
|
||||
border-radius: var(--shiki-custom-brr);
|
||||
}
|
||||
.el-drawer__header {
|
||||
position: relative;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.el-dialog__headerbtn,
|
||||
.el-drawer__close-btn {
|
||||
color: var(--shiki-code-header-span-color);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
right: 10px;
|
||||
top: 15px;
|
||||
font-size: 20px;
|
||||
border-radius: var(--shiki-custom-brr);
|
||||
&:hover {
|
||||
background-color: var(--shiki-code-header-btn-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.view-code-close-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
span {
|
||||
color: var(--shiki-code-header-span-color);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
right: 10px;
|
||||
top: 15px;
|
||||
font-size: 20px;
|
||||
border-radius: var(--shiki-custom-brr);
|
||||
&:hover {
|
||||
background-color: var(--shiki-code-header-btn-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.customCloseBtn {
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 媒体查询
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.elx-run-code-dialog,
|
||||
.elx-run-code-drawer {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.elx-run-code-content-view-iframe {
|
||||
height: 713px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.elx-run-code-dialog-view {
|
||||
.el-dialog__body {
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
.el-drawer__body {
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
}
|
||||
116
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/RunCode/type.d.ts
vendored
Normal file
116
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/RunCode/type.d.ts
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
import type { SELECT_OPTIONS_ENUM } from './components/options';
|
||||
|
||||
export interface ElxRunCodeHeaderTypes {
|
||||
/**
|
||||
* 视图 code 代码 view 预览
|
||||
*/
|
||||
options: SELECT_OPTIONS_ENUM.CODE | SELECT_OPTIONS_ENUM.VIEW;
|
||||
}
|
||||
|
||||
export interface DialogOptions {
|
||||
/**
|
||||
* 点击遮罩层是否可以关闭
|
||||
*/
|
||||
closeOnClickModal?: boolean;
|
||||
/**
|
||||
* 是否可以通过按下 ESC 键关闭 Dialog
|
||||
*/
|
||||
closeOnPressEscape?: boolean;
|
||||
}
|
||||
|
||||
export interface DrawerOptions extends DialogOptions {
|
||||
/**
|
||||
* 抽屉的方向
|
||||
*/
|
||||
direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
|
||||
}
|
||||
|
||||
export interface ElxRunCodeProps {
|
||||
/**
|
||||
* 代码块内容(高亮后的代码块内容)
|
||||
*/
|
||||
code: string[];
|
||||
/**
|
||||
* 代码块内容(原文)
|
||||
*/
|
||||
content: string;
|
||||
/**
|
||||
* 高亮后pre标签的类名
|
||||
*/
|
||||
preClass: string;
|
||||
/**
|
||||
* 高亮后pre标签的样式
|
||||
*/
|
||||
preStyle: any;
|
||||
/**
|
||||
* 语言
|
||||
*/
|
||||
lang: string;
|
||||
/**
|
||||
* 是否可见
|
||||
*/
|
||||
visible: boolean;
|
||||
/**
|
||||
* 自定义类名
|
||||
*/
|
||||
customClass?: string;
|
||||
/**
|
||||
* 弹窗模式
|
||||
*/
|
||||
mode?: 'dialog' | 'drawer';
|
||||
/**
|
||||
* 弹窗主题（暂时不支持）
|
||||
*/
|
||||
theme?: string;
|
||||
/**
|
||||
* 弹窗选项
|
||||
*/
|
||||
dialogOptions?: DialogOptions;
|
||||
/**
|
||||
* 抽屉选项
|
||||
*/
|
||||
drawerOptions?: DrawerOptions;
|
||||
}
|
||||
|
||||
export type ElxRunCodeOptions = Pick<
|
||||
ElxRunCodeProps,
|
||||
'mode' | 'customClass' | 'dialogOptions' | 'drawerOptions'
|
||||
>;
|
||||
|
||||
export type OmitOfElxRunCodeContent = Omit<
|
||||
ElxRunCodeProps,
|
||||
'visible' | 'customClass' | 'dialogOptions' | 'drawerOptions'
|
||||
>;
|
||||
|
||||
export interface ElxRunCodeContentProps extends OmitOfElxRunCodeContent {
|
||||
/**
|
||||
* 当前内容区域显示的视图
|
||||
*/
|
||||
nowView: ElxRunCodeHeaderTypes['options'];
|
||||
}
|
||||
|
||||
export interface ElxRunCodeExposeProps extends ElxRunCodeProps {
|
||||
/**
|
||||
* 当前选中的视图
|
||||
*/
|
||||
value: ElxRunCodeHeaderTypes['options'];
|
||||
/**
|
||||
* 切换视图
|
||||
*/
|
||||
changeSelectValue: (value: ElxRunCodeHeaderTypes['options']) => void;
|
||||
}
|
||||
|
||||
export interface ElxRunCodeContentExposeProps extends ElxRunCodeContentProps {
|
||||
/**
|
||||
* 当前选中的视图
|
||||
*/
|
||||
value: ElxRunCodeHeaderTypes['options'];
|
||||
/**
|
||||
* 当前内容区域显示的视图
|
||||
*/
|
||||
nowView: ElxRunCodeHeaderTypes['options'];
|
||||
}
|
||||
|
||||
export interface ElxRunCodeCloseBtnExposeProps {
|
||||
close: () => void;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import CodeBlock from './CodeBlock/index.vue';
|
||||
import CodeLine from './CodeLine/index.vue';
|
||||
import CodeX from './CodeX/index.vue';
|
||||
import Mermaid from './Mermaid/index.vue';
|
||||
|
||||
export { CodeBlock, CodeLine, CodeX, Mermaid };
|
||||
23
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/types.d.ts
vendored
Normal file
23
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/types.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
// import type { CustomAttrs } from './core'
|
||||
|
||||
// export type * from './core/types'
|
||||
import type { BuiltinTheme } from 'shiki';
|
||||
import type { Component } from 'vue';
|
||||
|
||||
export interface MdComponent {
|
||||
raw: any;
|
||||
}
|
||||
export type codeXRenderer =
|
||||
| ((params: { language?: string; content: string }) => VNodeChild)
|
||||
| Component;
|
||||
export type codeXSlot = ((params: any) => VNodeChild) | Component;
|
||||
export interface HighlightProps {
|
||||
theme?: BuiltinTheme | null;
|
||||
isDark?: boolean;
|
||||
language?: string;
|
||||
content?: string;
|
||||
}
|
||||
// 定义颜色替换的类型
|
||||
export interface ColorReplacements {
|
||||
[theme: string]: Record<string, string>;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import type { Root } from 'hast';
|
||||
import type { Options as TRehypeOptions } from 'mdast-util-to-hast';
|
||||
import type { PluggableList } from 'unified';
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
import type { CustomAttrs, SanitizeOptions, TVueMarkdown } from './types';
|
||||
import { defineComponent, shallowRef, toRefs, watch, onUnmounted } from 'vue';
|
||||
// import { useMarkdownContext } from '../components/MarkdownProvider';
|
||||
import { render } from './hast-to-vnode';
|
||||
import { useMarkdownProcessor } from './useProcessor';
|
||||
import { debounce } from 'lodash-es';
|
||||
|
||||
export type { CustomAttrs, SanitizeOptions, TVueMarkdown };
|
||||
|
||||
const sharedProps = {
|
||||
markdown: {
|
||||
type: String as PropType<string>,
|
||||
default: ''
|
||||
},
|
||||
customAttrs: {
|
||||
type: Object as PropType<CustomAttrs>,
|
||||
default: () => ({})
|
||||
},
|
||||
remarkPlugins: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypePlugins: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypeOptions: {
|
||||
type: Object as PropType<Omit<TRehypeOptions, 'file'>>,
|
||||
default: () => ({})
|
||||
},
|
||||
sanitize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sanitizeOptions: {
|
||||
type: Object as PropType<SanitizeOptions>,
|
||||
default: () => ({})
|
||||
}
|
||||
};
|
||||
const vueMarkdownImpl = defineComponent({
|
||||
name: 'VueMarkdown',
|
||||
props: sharedProps,
|
||||
setup(props, { slots, attrs }) {
|
||||
const {
|
||||
markdown,
|
||||
remarkPlugins,
|
||||
rehypePlugins,
|
||||
rehypeOptions,
|
||||
sanitize,
|
||||
sanitizeOptions,
|
||||
customAttrs
|
||||
} = toRefs(props);
|
||||
|
||||
const { processor } = useMarkdownProcessor({
|
||||
remarkPlugins,
|
||||
rehypePlugins,
|
||||
rehypeOptions,
|
||||
sanitize,
|
||||
sanitizeOptions
|
||||
});
|
||||
|
||||
return () => {
|
||||
const mdast = processor.value.parse(markdown.value);
|
||||
const hast = processor.value.runSync(mdast) as Root;
|
||||
return render(hast, attrs, slots, customAttrs.value);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const vueMarkdownAsyncImpl = defineComponent({
|
||||
name: 'VueMarkdownAsync',
|
||||
props: sharedProps,
|
||||
async setup(props, { slots, attrs }) {
|
||||
const {
|
||||
markdown,
|
||||
remarkPlugins,
|
||||
rehypePlugins,
|
||||
rehypeOptions,
|
||||
sanitize,
|
||||
sanitizeOptions,
|
||||
customAttrs
|
||||
} = toRefs(props);
|
||||
const { processor } = useMarkdownProcessor({
|
||||
remarkPlugins,
|
||||
rehypePlugins,
|
||||
rehypeOptions,
|
||||
sanitize,
|
||||
sanitizeOptions
|
||||
});
|
||||
|
||||
const hast = shallowRef<Root | null>(null);
|
||||
const isProcessing = shallowRef(false);
|
||||
|
||||
const process = async (): Promise<void> => {
|
||||
// 避免重复处理
|
||||
if (isProcessing.value) return;
|
||||
isProcessing.value = true;
|
||||
|
||||
try {
|
||||
const mdast = processor.value.parse(markdown.value);
|
||||
hast.value = (await processor.value.run(mdast)) as Root;
|
||||
} finally {
|
||||
isProcessing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 使用防抖优化SSE流式更新场景
|
||||
// trailing: true 确保最后一次更新会执行
|
||||
// leading: false 避免首次触发两次渲染
|
||||
const debouncedProcess = debounce(process, 50, {
|
||||
leading: false,
|
||||
trailing: true,
|
||||
maxWait: 200 // 最长等待200ms，避免延迟过大
|
||||
});
|
||||
|
||||
watch(
|
||||
() => [markdown.value, processor.value],
|
||||
() => {
|
||||
debouncedProcess();
|
||||
},
|
||||
{ flush: 'post' } // 改为post，在DOM更新后执行，避免阻塞UI
|
||||
);
|
||||
|
||||
// 清理防抖定时器
|
||||
onUnmounted(() => {
|
||||
debouncedProcess.cancel();
|
||||
});
|
||||
|
||||
await process();
|
||||
|
||||
return () => {
|
||||
return hast.value
|
||||
? render(hast.value, attrs, slots, customAttrs.value)
|
||||
: null;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// export the public type for h/tsx inference
|
||||
// also to avoid inline import() in generated d.ts files
|
||||
export const VueMarkdown: TVueMarkdown = vueMarkdownImpl as any;
|
||||
|
||||
// export the public type for h/tsx inference
|
||||
// also to avoid inline import() in generated d.ts files
|
||||
export const VueMarkdownAsync: TVueMarkdown = vueMarkdownAsyncImpl as any;
|
||||
@@ -0,0 +1,237 @@
|
||||
import type { Element, Root, RootContent, Text } from 'hast';
|
||||
import type { MaybeRefOrGetter, Slots, VNode, VNodeArrayChildren } from 'vue';
|
||||
import type {
|
||||
AliasList,
|
||||
Attributes,
|
||||
Context,
|
||||
CustomAttrs,
|
||||
CustomAttrsObjectResult
|
||||
} from './types';
|
||||
import { find, html, svg } from 'property-information';
|
||||
import { h, toValue } from 'vue';
|
||||
|
||||
export function render(
|
||||
hast: Root,
|
||||
attrs: Record<string, unknown>,
|
||||
slots?: Slots,
|
||||
customAttrs?: MaybeRefOrGetter<CustomAttrs>
|
||||
): VNode {
|
||||
return h(
|
||||
'div',
|
||||
attrs,
|
||||
renderChildren(
|
||||
hast.children,
|
||||
{ listDepth: -1, listOrdered: false, listItemIndex: -1, svg: false },
|
||||
hast,
|
||||
slots ?? {},
|
||||
toValue(customAttrs) ?? {}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export function renderChildren(
|
||||
nodeList: (RootContent | Root)[],
|
||||
ctx: Context,
|
||||
parent: Element | Root,
|
||||
slots: Slots,
|
||||
customAttrs: CustomAttrs
|
||||
): VNodeArrayChildren {
|
||||
const keyCounter: {
|
||||
[key: string]: number;
|
||||
} = {};
|
||||
|
||||
return nodeList.map(node => {
|
||||
switch (node.type) {
|
||||
case 'text':
|
||||
return node.value;
|
||||
case 'raw':
|
||||
return node.value;
|
||||
case 'root':
|
||||
return renderChildren(node.children, ctx, parent, slots, customAttrs);
|
||||
case 'element': {
|
||||
const { attrs, context, aliasList, vnodeProps } = getVNodeInfos(
|
||||
node,
|
||||
parent,
|
||||
ctx,
|
||||
keyCounter,
|
||||
customAttrs
|
||||
);
|
||||
for (let i = aliasList.length - 1; i >= 0; i--) {
|
||||
const targetSlot = slots[aliasList[i]];
|
||||
if (typeof targetSlot === 'function') {
|
||||
return targetSlot({
|
||||
...vnodeProps,
|
||||
...attrs,
|
||||
children: () =>
|
||||
renderChildren(node.children, context, node, slots, customAttrs)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return h(
|
||||
node.tagName,
|
||||
attrs,
|
||||
renderChildren(node.children, context, node, slots, customAttrs)
|
||||
);
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getVNodeInfos(
|
||||
node: RootContent,
|
||||
parent: Element | Root,
|
||||
context: Context,
|
||||
keyCounter: Record<string, number>,
|
||||
customAttrs: CustomAttrs
|
||||
): {
|
||||
attrs: Record<string, unknown>;
|
||||
context: Context;
|
||||
aliasList: AliasList;
|
||||
vnodeProps: Record<string, any>;
|
||||
} {
|
||||
const aliasList: AliasList = [];
|
||||
|
||||
let attrs: Record<string, unknown> = {};
|
||||
const vnodeProps: Record<string, any> = {};
|
||||
const ctx = { ...context };
|
||||
|
||||
if (node.type === 'element') {
|
||||
aliasList.push(node.tagName);
|
||||
keyCounter[node.tagName] =
|
||||
node.tagName in keyCounter ? keyCounter[node.tagName] + 1 : 0;
|
||||
vnodeProps.key = `${node.tagName}-${keyCounter[node.tagName]}`;
|
||||
node.properties = node.properties || {};
|
||||
|
||||
if (node.tagName === 'svg') {
|
||||
ctx.svg = true;
|
||||
}
|
||||
|
||||
attrs = Object.entries(node.properties).reduce<Record<string, any>>(
|
||||
(acc, [hastKey, value]) => {
|
||||
const attrInfo = find(ctx.svg ? svg : html, hastKey);
|
||||
acc[attrInfo.attribute] = value;
|
||||
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
switch (node.tagName) {
|
||||
case 'h1':
|
||||
case 'h2':
|
||||
case 'h3':
|
||||
case 'h4':
|
||||
case 'h5':
|
||||
case 'h6':
|
||||
vnodeProps.level = Number.parseFloat(node.tagName.slice(1));
|
||||
aliasList.push('heading');
|
||||
break;
|
||||
// TODO: maybe use <pre> instead for customizing from <pre> not <code> ?
|
||||
case 'code':
|
||||
vnodeProps.languageOriginal = Array.isArray(attrs.class)
|
||||
? attrs.class.find(cls => cls.startsWith('language-'))
|
||||
: '';
|
||||
vnodeProps.language = vnodeProps.languageOriginal
|
||||
? vnodeProps.languageOriginal.replace('language-', '')
|
||||
: '';
|
||||
vnodeProps.inline = 'tagName' in parent && parent.tagName !== 'pre';
|
||||
|
||||
// when tagName is code, it definitely has children and the first child is text
|
||||
// https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
|
||||
vnodeProps.content = (node.children[0] as unknown as Text)?.value ?? '';
|
||||
|
||||
aliasList.push(vnodeProps.inline ? 'inline-code' : 'block-code');
|
||||
break;
|
||||
case 'thead':
|
||||
case 'tbody':
|
||||
ctx.currentContext = node.tagName;
|
||||
break;
|
||||
case 'td':
|
||||
case 'th':
|
||||
case 'tr':
|
||||
vnodeProps.isHead = context.currentContext === 'thead';
|
||||
break;
|
||||
|
||||
case 'ul':
|
||||
case 'ol':
|
||||
ctx.listDepth = context.listDepth + 1;
|
||||
ctx.listOrdered = node.tagName === 'ol';
|
||||
ctx.listItemIndex = -1;
|
||||
vnodeProps.ordered = ctx.listOrdered;
|
||||
vnodeProps.depth = ctx.listDepth;
|
||||
|
||||
aliasList.push('list');
|
||||
break;
|
||||
|
||||
case 'li':
|
||||
ctx.listItemIndex++;
|
||||
|
||||
vnodeProps.ordered = ctx.listOrdered;
|
||||
vnodeProps.depth = ctx.listDepth;
|
||||
vnodeProps.index = ctx.listItemIndex;
|
||||
aliasList.push('list-item');
|
||||
|
||||
break;
|
||||
case 'slot':
|
||||
if (typeof node.properties['slot-name'] === 'string') {
|
||||
aliasList.push(`${node.properties['slot-name']}`);
|
||||
delete node.properties['slot-name'];
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
attrs = computeAttrs(
|
||||
node,
|
||||
aliasList,
|
||||
vnodeProps,
|
||||
{ ...attrs } as Attributes, // TODO: fix this
|
||||
customAttrs
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
attrs,
|
||||
context: ctx,
|
||||
aliasList,
|
||||
vnodeProps
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO:
|
||||
* @param node - hast node
|
||||
* @param aliasList - html tag list. The earlier alias has higher priority. ?
|
||||
* @param attrs - attrs
|
||||
* @param customAttrs - custom attrs object
|
||||
* @returns attrs
|
||||
*/
|
||||
function computeAttrs(
|
||||
node: Element,
|
||||
aliasList: AliasList,
|
||||
vnodeProps: Record<string, any>,
|
||||
attrs: Attributes,
|
||||
customAttrs: CustomAttrs
|
||||
): CustomAttrsObjectResult {
|
||||
const result: CustomAttrsObjectResult = {
|
||||
...attrs
|
||||
};
|
||||
for (let i = aliasList.length - 1; i >= 0; i--) {
|
||||
const name = aliasList[i];
|
||||
// console.log(Object.keys(customAttrs))
|
||||
if (name in customAttrs) {
|
||||
const customAttr = customAttrs[name];
|
||||
return {
|
||||
...result,
|
||||
...(typeof customAttr === 'function'
|
||||
? customAttr(node, { ...attrs, ...vnodeProps })
|
||||
: customAttr)
|
||||
};
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// shunnNet has the rights under the MIT license
|
||||
export { VueMarkdown, VueMarkdownAsync } from './components';
|
||||
export { getVNodeInfos, render, renderChildren } from './hast-to-vnode';
|
||||
export type * from './types';
|
||||
export { createProcessor, useMarkdownProcessor } from './useProcessor';
|
||||
389
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/core/types.d.ts
vendored
Normal file
389
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/core/types.d.ts
vendored
Normal file
@@ -0,0 +1,389 @@
|
||||
import type { Options as DeepMergeOptions } from 'deepmerge';
|
||||
import type { Element } from 'hast';
|
||||
import type { Options as TRehypeOptions } from 'mdast-util-to-hast';
|
||||
import type { Options } from 'rehype-sanitize';
|
||||
import type { PluggableList } from 'unified';
|
||||
import type {
|
||||
AllowedComponentProps,
|
||||
ComponentCustomProps,
|
||||
VNode,
|
||||
VNodeArrayChildren,
|
||||
VNodeProps
|
||||
} from 'vue';
|
||||
|
||||
export interface Context {
|
||||
listDepth: number;
|
||||
listOrdered: boolean;
|
||||
listItemIndex: number;
|
||||
currentContext?: string;
|
||||
svg: boolean;
|
||||
}
|
||||
export type Attributes = Record<string, string>;
|
||||
|
||||
interface TTableProps {
|
||||
/** whether it is in head */
|
||||
isHead: boolean;
|
||||
}
|
||||
|
||||
interface THeadingProps {
|
||||
/** heading level */
|
||||
level: number;
|
||||
}
|
||||
|
||||
interface TListProps {
|
||||
/** depth of the list */
|
||||
depth: number;
|
||||
/** whether it is ordered list */
|
||||
ordered: boolean;
|
||||
}
|
||||
|
||||
interface TCodeProps {
|
||||
/** language name original @example 'language-js' */
|
||||
languageOriginal: string;
|
||||
|
||||
/** language name @example 'js' */
|
||||
language: string;
|
||||
|
||||
/** code content */
|
||||
content: string;
|
||||
|
||||
/** whether it is inline code */
|
||||
inline: boolean;
|
||||
}
|
||||
|
||||
// https://www.google.com/search?q=record%3Cstring,+any%3E+vs+record%3Cstring,+unknown%3E&sourceid=chrome&ie=UTF-8
|
||||
export type CustomAttrsObjectResult = Record<string, unknown>;
|
||||
|
||||
type CustomAttrsFunctionValue<T> = (
|
||||
/**
|
||||
* hast node
|
||||
*
|
||||
* Please refer to the source code at the following URL to understand the possible attributes for each element.
|
||||
*
|
||||
* @see https://github.com/syntax-tree/mdast-util-to-hast/tree/main/lib/handlers
|
||||
*/
|
||||
node: Element,
|
||||
/**
|
||||
* Properties of the current element.
|
||||
*
|
||||
* Except for the basic properties provided from hast, it also includes custom properties such as `level`, `ordered`, `depth`, `index` etc.
|
||||
*/
|
||||
combinedAttrs: T | Attributes
|
||||
) => Record<string, unknown>;
|
||||
|
||||
type CustomAttrsValue<
|
||||
T extends Record<string, unknown> = Record<string, unknown>
|
||||
> = CustomAttrsObjectResult | CustomAttrsFunctionValue<T>;
|
||||
|
||||
type TBasicHTMLTagNames = keyof Omit<
|
||||
HTMLElementTagNameMap,
|
||||
| 'h1'
|
||||
| 'h2'
|
||||
| 'h3'
|
||||
| 'h4'
|
||||
| 'h5'
|
||||
| 'h6'
|
||||
| 'ul'
|
||||
| 'ol'
|
||||
| 'li'
|
||||
| 'code'
|
||||
| 'td'
|
||||
| 'th'
|
||||
| 'tr'
|
||||
>;
|
||||
export type CustomAttrs = {
|
||||
[key in TBasicHTMLTagNames]?: CustomAttrsValue; // << dynamic properties
|
||||
} & {
|
||||
[key: string]:
|
||||
| CustomAttrsValue
|
||||
| CustomAttrsValue<THeadingProps>
|
||||
| CustomAttrsValue<TListProps>
|
||||
| CustomAttrsValue<TCodeProps>
|
||||
| CustomAttrsValue<TTableProps>
|
||||
| undefined;
|
||||
['h1']?: CustomAttrsValue<THeadingProps>; // << static properties
|
||||
['h2']?: CustomAttrsValue<THeadingProps>;
|
||||
['h3']?: CustomAttrsValue<THeadingProps>;
|
||||
['h4']?: CustomAttrsValue<THeadingProps>;
|
||||
['h5']?: CustomAttrsValue<THeadingProps>;
|
||||
['h6']?: CustomAttrsValue<THeadingProps>;
|
||||
['heading']?: CustomAttrsValue<THeadingProps>;
|
||||
['ul']?: CustomAttrsValue<TListProps>;
|
||||
['ol']?: CustomAttrsValue<TListProps>;
|
||||
['list']?: CustomAttrsValue<TListProps>;
|
||||
['li']?: CustomAttrsValue<TListProps>;
|
||||
['list-item']?: CustomAttrsValue<TListProps>;
|
||||
['code']?: CustomAttrsValue<TCodeProps>;
|
||||
['inline-code']?: CustomAttrsValue<TCodeProps>;
|
||||
['block-code']?: CustomAttrsValue<TCodeProps>;
|
||||
['td']?: CustomAttrsValue<TTableProps>;
|
||||
['th']?: CustomAttrsValue<TTableProps>;
|
||||
['tr']?: CustomAttrsValue<TTableProps>;
|
||||
};
|
||||
|
||||
export type AliasList = string[];
|
||||
export type TagList = AliasList;
|
||||
|
||||
export interface SanitizeOptions {
|
||||
/**
|
||||
* Options for `rehype-sanitize`
|
||||
*
|
||||
* @see https://github.com/rehypejs/rehype-sanitize
|
||||
*/
|
||||
sanitizeOptions?: Options;
|
||||
/**
|
||||
* Options for `deepmerge`
|
||||
*/
|
||||
mergeOptions?: DeepMergeOptions;
|
||||
}
|
||||
|
||||
export interface TVueMarkdownProps {
|
||||
/**
|
||||
* Markdown content
|
||||
*
|
||||
* @default '''
|
||||
*/
|
||||
markdown: string;
|
||||
/**
|
||||
* You can set custom attributes for each element, such as `href`, `target`, `rel`, `lazyload`, etc.
|
||||
*
|
||||
* The key is the HTML tag name, and the value can either be an object or a function that returns an object.
|
||||
*
|
||||
* The value will be passed to Vue's `h` function. You can refer to Vue's official documentation to learn how to configure `h`.
|
||||
*
|
||||
* @see https://vuejs.org/guide/extras/render-function.html#render-functions-jsx
|
||||
*
|
||||
* @default {}
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* {
|
||||
* a: { target: '_blank', rel: 'noopener' },
|
||||
* img: { lazyload: true },
|
||||
* h1: (node, combinedAttrs) => {
|
||||
* return { class: ['title', 'mb-2'] }
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
customAttrs?: CustomAttrs;
|
||||
/**
|
||||
* Remark plugins
|
||||
*
|
||||
* These plugins will be used between `remark-parse` and `remark-rehype`.
|
||||
*
|
||||
* @see https://github.com/remarkjs/remark?tab=readme-ov-file#plugins
|
||||
*
|
||||
* @default []
|
||||
*/
|
||||
remarkPlugins?: PluggableList;
|
||||
/**
|
||||
* rehype plugins
|
||||
*
|
||||
* These plugins will be used after `remark-rehype` but before `rehype-sanitize`.
|
||||
*
|
||||
* @see https://github.com/remarkjs/remark-rehype?tab=readme-ov-file#related
|
||||
*
|
||||
* @default []
|
||||
*/
|
||||
rehypePlugins?: PluggableList;
|
||||
/**
|
||||
* Whether to sanitize the HTML content. (use `rehype-sanitize`)
|
||||
*
|
||||
* You need disable this option if you want to render `<slot>` in markdown content.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
sanitize?: boolean;
|
||||
/**
|
||||
* Options for `rehype-sanitize`
|
||||
*
|
||||
* @see https://github.com/rehypejs/rehype-sanitize?tab=readme-ov-file#options
|
||||
*
|
||||
* @default { allowDangerousHtml: true }
|
||||
*/
|
||||
sanitizeOptions?: SanitizeOptions;
|
||||
|
||||
/**
|
||||
* Options for `rehype-parse`
|
||||
*
|
||||
* @see https://github.com/remarkjs/remark-rehype?tab=readme-ov-file#options
|
||||
*
|
||||
* @default {}
|
||||
*/
|
||||
rehypeOptions?: Omit<TRehypeOptions, 'file'>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typed version of the `VueMarkdown` component.
|
||||
*
|
||||
* Copy from vue-router
|
||||
*/
|
||||
export interface TVueMarkdown {
|
||||
new (): {
|
||||
$props: AllowedComponentProps &
|
||||
ComponentCustomProps &
|
||||
VNodeProps &
|
||||
TVueMarkdownProps;
|
||||
|
||||
$slots: TBaseSlots & {
|
||||
/**
|
||||
* Customize `<h1>` tag
|
||||
* @scope `level` heading level
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['h1']?: THeadingSlot;
|
||||
/**
|
||||
* Customize `<h2>` tag
|
||||
* @scope `level` heading level
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['h2']?: THeadingSlot;
|
||||
/**
|
||||
* Customize `<h3>` tag
|
||||
* @scope `level` heading level
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['h3']?: THeadingSlot;
|
||||
/**
|
||||
* Customize `<h4>` tag
|
||||
* @scope `level` heading level
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['h4']?: THeadingSlot;
|
||||
/**
|
||||
* Customize `<h5>` tag
|
||||
* @scope `level` heading level
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['h5']?: THeadingSlot;
|
||||
/**
|
||||
* Customize `<h6>` tag
|
||||
* @scope `level` heading level
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['h6']?: THeadingSlot;
|
||||
/**
|
||||
* Customize `<h1>` ~ `<h6>` tag
|
||||
* @scope `level` heading level
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['heading']?: THeadingSlot;
|
||||
|
||||
/**
|
||||
* Customize inline and block code.
|
||||
* @scope `languageOriginal` language name original
|
||||
* @scope `language` language name
|
||||
* @scope `content` code content
|
||||
* @scope `inline` whether it is inline code
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['code']?: TCodeSlot;
|
||||
/**
|
||||
* Customize inline code.
|
||||
* @scope `languageOriginal` language name original
|
||||
* @scope `language` language name
|
||||
* @scope `content` code content
|
||||
* @scope `inline` whether it is inline code
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['inline-code']?: TCodeSlot;
|
||||
/**
|
||||
* Customize block code.
|
||||
* @scope `languageOriginal` language name original
|
||||
* @scope `language` language name
|
||||
* @scope `content` code content
|
||||
* @scope `inline` whether it is inline code
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['block-code']?: TCodeSlot;
|
||||
|
||||
/**
|
||||
* Customize unordered list
|
||||
* @scope `depth` depth of the list
|
||||
* @scope `ordered` whether it is ordered list
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['ul']?: TListSlot;
|
||||
|
||||
/**
|
||||
* Customize ordered list
|
||||
* @scope `depth` depth of the list
|
||||
* @scope `ordered` whether it is ordered list
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['ol']?: TListSlot;
|
||||
/**
|
||||
* Customize ordered and unordered list
|
||||
* @scope `depth` depth of the list
|
||||
* @scope `ordered` whether it is ordered list
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['list']?: TListSlot;
|
||||
|
||||
/**
|
||||
* Customize list item
|
||||
* @scope `depth` depth of the list
|
||||
* @scope `ordered` whether it is ordered list
|
||||
* @scope `index` index of the list item
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['li']?: TListSlot;
|
||||
|
||||
/**
|
||||
* Customize list item
|
||||
* @scope `depth` depth of the list
|
||||
* @scope `ordered` whether it is ordered list
|
||||
* @scope `index` index of the list item
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['list-item']?: TListSlot;
|
||||
|
||||
/**
|
||||
* Customize table element: td
|
||||
*
|
||||
* @scope `isHead` whether it is in head
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['td']?: TTableElementSlot;
|
||||
|
||||
/**
|
||||
* Customize table element: th
|
||||
*
|
||||
* @scope `isHead` whether it is in head
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['th']?: TTableElementSlot;
|
||||
|
||||
/**
|
||||
* Customize table element: tr
|
||||
*
|
||||
* @scope `isHead` whether it is in head
|
||||
* @scope `children` Functional component, child elements.
|
||||
*/
|
||||
['tr']?: TTableElementSlot;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
type TTableElementSlot = TCustomSlot<TTableProps>;
|
||||
type TListSlot = TCustomSlot<TListProps>;
|
||||
type THeadingSlot = TCustomSlot<THeadingProps>;
|
||||
type TCodeSlot = TCustomSlot<TCodeProps>;
|
||||
|
||||
type HtmlTagNames = keyof HTMLElementTagNameMap;
|
||||
type TBaseSlots = {
|
||||
// An index signature parameter type cannot be a literal type or generic type. Consider using a mapped object type instead.ts(1337)
|
||||
// [key: HtmlTagNames]: (scope: Record<string, any>) => VNode[] | VNode
|
||||
[key in HtmlTagNames]?: (scope: TBaseSlotScope) => VNode[] | VNode;
|
||||
} & {
|
||||
[key: string]: (scope: TBaseSlotScope) => VNode[] | VNode;
|
||||
};
|
||||
|
||||
type TBaseSlotScope = TElementChild & Attributes;
|
||||
interface TElementChild {
|
||||
/** Functional component, child elements. */
|
||||
children: () => VNodeArrayChildren;
|
||||
}
|
||||
|
||||
type TCustomSlot<T> = (scope: TBaseSlotScope & T) => VNode[] | VNode;
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { Root } from 'hast';
|
||||
import type { Root as MdastRoot } from 'mdast';
|
||||
import type { Options as TRehypeOptions } from 'mdast-util-to-hast';
|
||||
import type { PluggableList, Processor } from 'unified';
|
||||
import type { ComputedRef, MaybeRefOrGetter } from 'vue';
|
||||
import type { SanitizeOptions } from './types';
|
||||
import deepmerge from 'deepmerge';
|
||||
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
|
||||
import remarkParse from 'remark-parse';
|
||||
import remarkRehype from 'remark-rehype';
|
||||
import { unified } from 'unified';
|
||||
import { computed, toValue } from 'vue';
|
||||
|
||||
export interface TUseMarkdownProcessorOptions {
|
||||
remarkPlugins?: MaybeRefOrGetter<PluggableList>;
|
||||
rehypePlugins?: MaybeRefOrGetter<PluggableList>;
|
||||
rehypeOptions?: MaybeRefOrGetter<Omit<TRehypeOptions, 'file'>>;
|
||||
sanitize?: MaybeRefOrGetter<boolean>;
|
||||
sanitizeOptions?: MaybeRefOrGetter<SanitizeOptions>;
|
||||
}
|
||||
export function useMarkdownProcessor(options?: TUseMarkdownProcessorOptions): {
|
||||
processor: ComputedRef<
|
||||
Processor<MdastRoot, MdastRoot, Root, undefined, undefined>
|
||||
>;
|
||||
} {
|
||||
const processor = computed(() => {
|
||||
return createProcessor({
|
||||
prePlugins: [remarkParse, ...(toValue(options?.remarkPlugins) ?? [])],
|
||||
rehypePlugins: toValue(options?.rehypePlugins),
|
||||
rehypeOptions: toValue(options?.rehypeOptions),
|
||||
sanitize: toValue(options?.sanitize),
|
||||
sanitizeOptions: toValue(options?.sanitizeOptions)
|
||||
});
|
||||
});
|
||||
return { processor };
|
||||
}
|
||||
|
||||
export function createProcessor(options?: {
|
||||
prePlugins?: PluggableList;
|
||||
rehypePlugins?: PluggableList;
|
||||
rehypeOptions?: Omit<TRehypeOptions, 'file'>;
|
||||
sanitize?: boolean;
|
||||
sanitizeOptions?: SanitizeOptions;
|
||||
// TODO: fix types
|
||||
}): Processor<any, any, any, any, any> {
|
||||
return unified()
|
||||
.use(options?.prePlugins ?? [])
|
||||
.use(remarkRehype, {
|
||||
allowDangerousHtml: true,
|
||||
...(options?.rehypeOptions || {})
|
||||
})
|
||||
.use(options?.rehypePlugins ?? [])
|
||||
.use(
|
||||
options?.sanitize
|
||||
? [
|
||||
[
|
||||
rehypeSanitize,
|
||||
deepmerge(
|
||||
defaultSchema,
|
||||
options?.sanitizeOptions?.sanitizeOptions || {},
|
||||
options?.sanitizeOptions?.mergeOptions || {}
|
||||
)
|
||||
]
|
||||
]
|
||||
: []
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export * from './useComponents';
|
||||
export * from './useMarkdown';
|
||||
export * from './useMermaid';
|
||||
export * from './useMermaidZoom';
|
||||
export * from './usePlugins';
|
||||
export * from './useThemeMode';
|
||||
@@ -0,0 +1,11 @@
|
||||
import { h } from 'vue';
|
||||
import { CodeX } from '../components/index';
|
||||
|
||||
function useComponents() {
|
||||
const components = {
|
||||
code: (raw: any) => h(CodeX, { raw })
|
||||
};
|
||||
return components;
|
||||
}
|
||||
|
||||
export { useComponents };
|
||||
@@ -0,0 +1,42 @@
|
||||
import { flow } from 'lodash-es';
|
||||
|
||||
export function useProcessMarkdown(markdown: string) {
|
||||
return preprocessLaTeX(markdown);
|
||||
}
|
||||
|
||||
export function preprocessLaTeX(markdown: string) {
|
||||
if (typeof markdown !== 'string') return markdown;
|
||||
|
||||
const codeBlockRegex = /```[\s\S]*?```/g;
|
||||
const codeBlocks = markdown.match(codeBlockRegex) || [];
|
||||
const escapeReplacement = (str: string) => str.replace(/\$/g, '_ELX_DOLLAR_');
|
||||
let processedMarkdown = markdown.replace(
|
||||
codeBlockRegex,
|
||||
'ELX_CODE_BLOCK_PLACEHOLDER'
|
||||
);
|
||||
|
||||
processedMarkdown = flow([
|
||||
(str: string) =>
|
||||
str.replace(/\\\[(.*?)\\\]/g, (_, equation) => `$$${equation}$$`),
|
||||
(str: string) =>
|
||||
str.replace(/\\\[([\s\S]*?)\\\]/g, (_, equation) => `$$${equation}$$`),
|
||||
(str: string) =>
|
||||
str.replace(/\\\((.*?)\\\)/g, (_, equation) => `$$${equation}$$`),
|
||||
(str: string) =>
|
||||
str.replace(
|
||||
/(^|[^\\])\$(.+?)\$/g,
|
||||
(_, prefix, equation) => `${prefix}$${equation}$`
|
||||
)
|
||||
])(processedMarkdown);
|
||||
|
||||
codeBlocks.forEach(block => {
|
||||
processedMarkdown = processedMarkdown.replace(
|
||||
'ELX_CODE_BLOCK_PLACEHOLDER',
|
||||
escapeReplacement(block)
|
||||
);
|
||||
});
|
||||
|
||||
processedMarkdown = processedMarkdown.replace(/_ELX_DOLLAR_/g, '$');
|
||||
|
||||
return processedMarkdown;
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import type { Ref } from 'vue';
|
||||
import { throttle } from 'lodash-es';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
interface UseMermaidOptions {
|
||||
id?: string;
|
||||
theme?: 'default' | 'dark' | 'forest' | 'neutral' | string;
|
||||
config?: any;
|
||||
}
|
||||
|
||||
async function loadMermaid() {
|
||||
if (typeof window === 'undefined') return null;
|
||||
const mermaidModule = await import('mermaid');
|
||||
return mermaidModule.default;
|
||||
}
|
||||
|
||||
let mermaidContainer: HTMLElement | null = null;
|
||||
|
||||
function getMermaidContainer(): HTMLElement {
|
||||
if (!mermaidContainer) {
|
||||
mermaidContainer = document.querySelector(
|
||||
'.elx-markdown-mermaid-container'
|
||||
) as HTMLElement;
|
||||
if (!mermaidContainer) {
|
||||
mermaidContainer = document.createElement('div') as HTMLElement;
|
||||
mermaidContainer.ariaHidden = 'true';
|
||||
mermaidContainer.style.maxHeight = '0';
|
||||
mermaidContainer.style.opacity = '0';
|
||||
mermaidContainer.style.overflow = 'hidden';
|
||||
mermaidContainer.classList.add('elx-markdown-mermaid-container');
|
||||
document.body.append(mermaidContainer);
|
||||
}
|
||||
}
|
||||
return mermaidContainer;
|
||||
}
|
||||
|
||||
export function useMermaid(
|
||||
content: string | Ref<string>,
|
||||
options: UseMermaidOptions = {}
|
||||
) {
|
||||
const { id = 'mermaid', theme = 'default', config = {} } = options;
|
||||
const mermaidConfig = computed(() => ({
|
||||
suppressErrorRendering: true,
|
||||
startOnLoad: false,
|
||||
securityLevel: 'loose',
|
||||
theme,
|
||||
...config
|
||||
}));
|
||||
const data = ref('');
|
||||
const error = ref<unknown>(null);
|
||||
const throttledRender = throttle(
|
||||
async () => {
|
||||
const contentValue =
|
||||
typeof content === 'string' ? content : content.value;
|
||||
if (!contentValue?.trim()) {
|
||||
data.value = '';
|
||||
error.value = null;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 动态加载 mermaid 库
|
||||
const mermaidInstance = await loadMermaid();
|
||||
if (!mermaidInstance) {
|
||||
data.value = contentValue;
|
||||
error.value = null;
|
||||
return;
|
||||
}
|
||||
// 语法校验
|
||||
const isValid = await mermaidInstance.parse(contentValue.trim());
|
||||
if (!isValid) {
|
||||
console.log('Mermaid parse error: Invalid syntax');
|
||||
data.value = '';
|
||||
error.value = new Error('Mermaid parse error: Invalid syntax');
|
||||
return;
|
||||
}
|
||||
// 初始化 mermaid 配置
|
||||
mermaidInstance.initialize(mermaidConfig.value);
|
||||
const renderId = `${id}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
const container = getMermaidContainer();
|
||||
const { svg } = await mermaidInstance.render(
|
||||
renderId,
|
||||
contentValue,
|
||||
container
|
||||
);
|
||||
data.value = svg;
|
||||
error.value = null;
|
||||
} catch (err) {
|
||||
console.log('Mermaid render error:', err);
|
||||
data.value = '';
|
||||
error.value = err;
|
||||
}
|
||||
},
|
||||
300,
|
||||
{ trailing: true, leading: true }
|
||||
);
|
||||
|
||||
// 监听内容变化，自动触发渲染
|
||||
watch(
|
||||
() => (typeof content === 'string' ? content : content.value),
|
||||
() => {
|
||||
throttledRender();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
return {
|
||||
data,
|
||||
error
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import type {
|
||||
MermaidZoomControls,
|
||||
UseMermaidZoomOptions
|
||||
} from '../components/Mermaid/types';
|
||||
import { onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
export function useMermaidZoom(
|
||||
options: UseMermaidZoomOptions
|
||||
): MermaidZoomControls {
|
||||
const { container } = options;
|
||||
|
||||
const scale = ref(1);
|
||||
const posX = ref(0);
|
||||
const posY = ref(0);
|
||||
const isDragging = ref(false);
|
||||
|
||||
let removeEvents: (() => void) | null = null;
|
||||
|
||||
// 获取SVG元素
|
||||
const getSvg = () =>
|
||||
container.value?.querySelector('.mermaid-content svg') as HTMLElement;
|
||||
|
||||
// 更新变换
|
||||
const updateTransform = (svg: HTMLElement) => {
|
||||
svg.style.transformOrigin = 'center center';
|
||||
svg.style.transform = `translate(${posX.value}px, ${posY.value}px) scale(${scale.value})`;
|
||||
};
|
||||
|
||||
// 重置状态
|
||||
const resetState = () => {
|
||||
scale.value = 1;
|
||||
posX.value = 0;
|
||||
posY.value = 0;
|
||||
isDragging.value = false;
|
||||
};
|
||||
|
||||
// 添加拖拽事件
|
||||
const addDragEvents = (content: HTMLElement) => {
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
|
||||
const onStart = (clientX: number, clientY: number) => {
|
||||
isDragging.value = true;
|
||||
startX = clientX - posX.value;
|
||||
startY = clientY - posY.value;
|
||||
document.body.style.userSelect = 'none';
|
||||
};
|
||||
|
||||
const onMove = (clientX: number, clientY: number) => {
|
||||
if (isDragging.value) {
|
||||
posX.value = clientX - startX;
|
||||
posY.value = clientY - startY;
|
||||
updateTransform(content);
|
||||
}
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
isDragging.value = false;
|
||||
document.body.style.userSelect = '';
|
||||
};
|
||||
|
||||
// 鼠标事件
|
||||
const onMouseDown = (e: MouseEvent) => {
|
||||
if (e.button !== 0)
|
||||
return; // ⭐️ 只响应鼠标左键
|
||||
e.preventDefault();
|
||||
onStart(e.clientX, e.clientY);
|
||||
};
|
||||
const onMouseMove = (e: MouseEvent) => onMove(e.clientX, e.clientY);
|
||||
|
||||
// 触摸事件
|
||||
const onTouchStart = (e: TouchEvent) => {
|
||||
if (e.touches.length === 1) {
|
||||
onStart(e.touches[0].clientX, e.touches[0].clientY);
|
||||
}
|
||||
};
|
||||
const onTouchMove = (e: TouchEvent) => {
|
||||
if (e.touches.length === 1) {
|
||||
e.preventDefault();
|
||||
onMove(e.touches[0].clientX, e.touches[0].clientY);
|
||||
}
|
||||
};
|
||||
|
||||
// 绑定事件
|
||||
content.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onEnd);
|
||||
content.addEventListener('touchstart', onTouchStart, { passive: false });
|
||||
document.addEventListener('touchmove', onTouchMove, { passive: false });
|
||||
document.addEventListener('touchend', onEnd);
|
||||
|
||||
return () => {
|
||||
content.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onEnd);
|
||||
content.removeEventListener('touchstart', onTouchStart);
|
||||
document.removeEventListener('touchmove', onTouchMove);
|
||||
document.removeEventListener('touchend', onEnd);
|
||||
document.body.style.userSelect = '';
|
||||
};
|
||||
};
|
||||
|
||||
// 缩放功能
|
||||
const zoomIn = () => {
|
||||
const svg = getSvg();
|
||||
if (svg) {
|
||||
scale.value = Math.min(scale.value + 0.2, 10);
|
||||
updateTransform(svg);
|
||||
}
|
||||
};
|
||||
|
||||
const zoomOut = () => {
|
||||
const svg = getSvg();
|
||||
if (svg) {
|
||||
scale.value = Math.max(scale.value - 0.2, 0.1);
|
||||
updateTransform(svg);
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
const svg = getSvg();
|
||||
if (svg) {
|
||||
resetState();
|
||||
updateTransform(svg);
|
||||
}
|
||||
};
|
||||
|
||||
const fullscreen = () => {
|
||||
if (!container.value)
|
||||
return;
|
||||
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
else {
|
||||
container.value.requestFullscreen?.();
|
||||
}
|
||||
};
|
||||
|
||||
const initialize = () => {
|
||||
if (!container.value)
|
||||
return;
|
||||
|
||||
resetState();
|
||||
|
||||
const svg = getSvg();
|
||||
if (svg) {
|
||||
removeEvents = addDragEvents(svg);
|
||||
updateTransform(svg);
|
||||
}
|
||||
};
|
||||
|
||||
const destroy = () => {
|
||||
removeEvents?.();
|
||||
removeEvents = null;
|
||||
resetState();
|
||||
};
|
||||
|
||||
// 监听容器变化
|
||||
watch(
|
||||
() => container.value,
|
||||
() => {
|
||||
destroy();
|
||||
resetState();
|
||||
}
|
||||
);
|
||||
|
||||
// 组件卸载时清理
|
||||
onUnmounted(destroy);
|
||||
|
||||
return {
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
reset,
|
||||
fullscreen,
|
||||
destroy,
|
||||
initialize
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import type { Pluggable } from 'unified';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import remarkBreaks from 'remark-breaks';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkMath from 'remark-math';
|
||||
import { computed, toRefs } from 'vue';
|
||||
import { rehypeAnimatedPlugin } from '../plugins/rehypePlugin';
|
||||
|
||||
function usePlugins(props: any) {
|
||||
const {
|
||||
allowHtml,
|
||||
enableAnimate,
|
||||
enableLatex,
|
||||
enableBreaks,
|
||||
rehypePlugins,
|
||||
remarkPlugins,
|
||||
rehypePluginsAhead,
|
||||
remarkPluginsAhead
|
||||
} = toRefs(props);
|
||||
|
||||
const rehype = computed(() => {
|
||||
return [
|
||||
...(rehypePluginsAhead.value as Pluggable[]),
|
||||
allowHtml.value && rehypeRaw,
|
||||
enableLatex.value && rehypeKatex,
|
||||
enableAnimate.value && rehypeAnimatedPlugin,
|
||||
...(rehypePlugins.value as Pluggable[])
|
||||
].filter(Boolean) as Pluggable[];
|
||||
});
|
||||
|
||||
const remark = computed(() => {
|
||||
const base: (Pluggable | { plugins: Pluggable[] })[] = [
|
||||
enableLatex.value && remarkMath,
|
||||
enableBreaks.value && remarkBreaks
|
||||
].filter(Boolean) as (Pluggable | { plugins: Pluggable[] })[];
|
||||
|
||||
return [
|
||||
[remarkGfm, { singleTilde: false }],
|
||||
...(remarkPluginsAhead.value as (Pluggable | { plugins: Pluggable[] })[]),
|
||||
...base,
|
||||
...(remarkPlugins.value as (Pluggable | { plugins: Pluggable[] })[])
|
||||
];
|
||||
});
|
||||
|
||||
return {
|
||||
rehypePlugins: rehype,
|
||||
remarkPlugins: remark
|
||||
};
|
||||
}
|
||||
export { usePlugins };
|
||||
@@ -0,0 +1,168 @@
|
||||
import type { Root } from 'hast';
|
||||
import type {
|
||||
BundledHighlighterOptions,
|
||||
CodeToHastOptions,
|
||||
CodeToTokensBaseOptions,
|
||||
CodeToTokensOptions,
|
||||
CodeToTokensWithThemesOptions,
|
||||
GrammarState,
|
||||
HighlighterGeneric,
|
||||
RequireKeys,
|
||||
ThemedToken,
|
||||
ThemedTokenWithVariants,
|
||||
TokensResult
|
||||
} from 'shiki';
|
||||
import { GLOBAL_SHIKI_KEY } from '@components/XMarkdownCore/shared';
|
||||
import {
|
||||
createdBundledHighlighter,
|
||||
createOnigurumaEngine,
|
||||
createSingletonShorthands
|
||||
} from 'shiki';
|
||||
import { onUnmounted, provide, ref } from 'vue';
|
||||
import { languageLoaders, themeLoaders } from '../../../hooks/shiki-loader';
|
||||
|
||||
export interface GlobalShiki {
|
||||
codeToHtml: (
|
||||
code: string,
|
||||
options: CodeToHastOptions<string, string>
|
||||
) => Promise<string>;
|
||||
codeToHast: (
|
||||
code: string,
|
||||
options: CodeToHastOptions<string, string>
|
||||
) => Promise<Root>;
|
||||
codeToTokensBase: (
|
||||
code: string,
|
||||
options: RequireKeys<
|
||||
CodeToTokensBaseOptions<string, string>,
|
||||
'theme' | 'lang'
|
||||
>
|
||||
) => Promise<ThemedToken[][]>;
|
||||
codeToTokens: (
|
||||
code: string,
|
||||
options: CodeToTokensOptions<string, string>
|
||||
) => Promise<TokensResult>;
|
||||
codeToTokensWithThemes: (
|
||||
code: string,
|
||||
options: RequireKeys<
|
||||
CodeToTokensWithThemesOptions<string, string>,
|
||||
'lang' | 'themes'
|
||||
>
|
||||
) => Promise<ThemedTokenWithVariants[][]>;
|
||||
getSingletonHighlighter: (
|
||||
options?: Partial<BundledHighlighterOptions<string, string>>
|
||||
) => Promise<HighlighterGeneric<string, string>>;
|
||||
getLastGrammarState:
|
||||
| ((element: ThemedToken[][] | Root) => GrammarState)
|
||||
| ((
|
||||
code: string,
|
||||
options: CodeToTokensBaseOptions<string, string>
|
||||
) => Promise<GrammarState>);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Shiki 管理器（单例 + 懒初始化）
|
||||
*/
|
||||
class ShikiManager {
|
||||
private static instance: ShikiManager | null = null;
|
||||
|
||||
private shikiInstance: GlobalShiki | null = null;
|
||||
|
||||
private constructor() {}
|
||||
|
||||
static getInstance(): ShikiManager {
|
||||
if (!ShikiManager.instance) {
|
||||
ShikiManager.instance = new ShikiManager();
|
||||
}
|
||||
return ShikiManager.instance;
|
||||
}
|
||||
|
||||
public getShiki(): GlobalShiki {
|
||||
if (this.shikiInstance) return this.shikiInstance;
|
||||
|
||||
const highlighterFactory = createdBundledHighlighter({
|
||||
langs: languageLoaders,
|
||||
themes: themeLoaders,
|
||||
engine: () => createOnigurumaEngine(import('shiki/wasm'))
|
||||
});
|
||||
|
||||
const {
|
||||
codeToHtml,
|
||||
codeToHast,
|
||||
codeToTokensBase,
|
||||
codeToTokens,
|
||||
codeToTokensWithThemes,
|
||||
getSingletonHighlighter,
|
||||
getLastGrammarState
|
||||
} = createSingletonShorthands(highlighterFactory);
|
||||
|
||||
this.shikiInstance = {
|
||||
codeToHtml,
|
||||
codeToHast,
|
||||
codeToTokensBase,
|
||||
codeToTokens,
|
||||
codeToTokensWithThemes,
|
||||
getSingletonHighlighter,
|
||||
getLastGrammarState
|
||||
};
|
||||
return this.shikiInstance;
|
||||
}
|
||||
|
||||
public dispose() {
|
||||
this.shikiInstance = null;
|
||||
ShikiManager.instance = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 全局状态管理
|
||||
let globalShikiInstance: GlobalShiki | undefined;
|
||||
let globalShikiManager: ShikiManager | undefined;
|
||||
let referenceCount = 0;
|
||||
|
||||
const shikiIsCreated = ref(false);
|
||||
const shikiInstance = ref<GlobalShiki>();
|
||||
const shikiManager = ref<ShikiManager>();
|
||||
|
||||
/**
|
||||
* @description 在 Vue 中提供 Shiki 实例（支持多组件实例）
|
||||
*/
|
||||
export function useShiki(): GlobalShiki {
|
||||
// 增加引用计数
|
||||
referenceCount++;
|
||||
|
||||
// ✅ 注册 onUnmounted 钩子
|
||||
onUnmounted(() => {
|
||||
referenceCount--;
|
||||
console.log(`shiki reference count: ${referenceCount}`);
|
||||
|
||||
// 只有当所有组件都卸载时才清理
|
||||
if (referenceCount === 0) {
|
||||
console.log('shiki destroyed - all references removed');
|
||||
shikiIsCreated.value = false;
|
||||
shikiInstance.value = undefined;
|
||||
shikiManager.value?.dispose();
|
||||
globalShikiManager?.dispose();
|
||||
globalShikiInstance = undefined;
|
||||
globalShikiManager = undefined;
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ 仅在首次时初始化
|
||||
if (!globalShikiInstance) {
|
||||
console.log('shiki created');
|
||||
globalShikiManager = ShikiManager.getInstance();
|
||||
globalShikiInstance = globalShikiManager.getShiki();
|
||||
|
||||
shikiManager.value = globalShikiManager;
|
||||
shikiInstance.value = globalShikiInstance;
|
||||
|
||||
provide(GLOBAL_SHIKI_KEY, shikiInstance);
|
||||
shikiIsCreated.value = true;
|
||||
} else {
|
||||
// 为后续组件实例提供相同的实例
|
||||
shikiManager.value = globalShikiManager;
|
||||
shikiInstance.value = globalShikiInstance;
|
||||
provide(GLOBAL_SHIKI_KEY, shikiInstance);
|
||||
}
|
||||
|
||||
return globalShikiInstance;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import type {
|
||||
BundledLanguage,
|
||||
BundledTheme,
|
||||
HighlighterGeneric,
|
||||
ThemeRegistrationResolved
|
||||
} from 'shiki';
|
||||
import type { InitShikiOptions } from '../shared';
|
||||
import { createHighlighter } from 'shiki';
|
||||
import { shikiThemeDefault } from '../shared';
|
||||
import { useDarkModeWatcher } from './useThemeMode';
|
||||
|
||||
interface UseShikiOptions {
|
||||
themes?: InitShikiOptions['themes'];
|
||||
}
|
||||
|
||||
const highlighter =
|
||||
shallowRef<HighlighterGeneric<BundledLanguage, BundledTheme>>();
|
||||
const shikiThemeColor = ref<ThemeRegistrationResolved>();
|
||||
const hasCreated = ref(false);
|
||||
const oldThemes = ref<InitShikiOptions['themes']>();
|
||||
|
||||
export function useGlobalShikiHighlighter(options?: UseShikiOptions) {
|
||||
const { isDark } = useDarkModeWatcher();
|
||||
|
||||
const themeArr = computed(() => {
|
||||
if (options?.themes) {
|
||||
return Object.keys(options.themes).map(key => options.themes![key]);
|
||||
}
|
||||
return [shikiThemeDefault.light, shikiThemeDefault.dark];
|
||||
});
|
||||
|
||||
const updateThemeColor = () => {
|
||||
if (!highlighter.value || !hasCreated.value)
|
||||
return;
|
||||
|
||||
const themeName = isDark.value ? themeArr.value[1] : themeArr.value[0];
|
||||
|
||||
shikiThemeColor.value = highlighter.value.getTheme(themeName as any);
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
if (
|
||||
hasCreated.value &&
|
||||
JSON.stringify(oldThemes.value) === JSON.stringify(options?.themes)
|
||||
) {
|
||||
updateThemeColor();
|
||||
return;
|
||||
}
|
||||
|
||||
const themes = [...themeArr.value];
|
||||
if (!themes.length)
|
||||
return;
|
||||
|
||||
const newHighlighter = await createHighlighter({
|
||||
themes: themes as any[],
|
||||
langs: []
|
||||
});
|
||||
|
||||
highlighter.value?.dispose?.();
|
||||
highlighter.value = newHighlighter;
|
||||
oldThemes.value = options?.themes;
|
||||
hasCreated.value = true;
|
||||
|
||||
updateThemeColor();
|
||||
};
|
||||
|
||||
watch(isDark, updateThemeColor, { immediate: true });
|
||||
|
||||
const destroy = () => {
|
||||
hasCreated.value = false;
|
||||
highlighter.value?.dispose?.();
|
||||
};
|
||||
|
||||
return {
|
||||
highlighter,
|
||||
shikiThemeColor,
|
||||
isDark,
|
||||
init,
|
||||
destroy
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
export function useDarkModeWatcher() {
|
||||
const isDark = ref(document.body.classList.contains('dark'));
|
||||
|
||||
let observer: MutationObserver;
|
||||
|
||||
onMounted(() => {
|
||||
observer = new MutationObserver(() => {
|
||||
isDark.value = document.body.classList.contains('dark');
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class'] // 只监听 class 变化
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
observer && observer.disconnect();
|
||||
});
|
||||
|
||||
return {
|
||||
isDark
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './core';
|
||||
export * from './MarkdownRender';
|
||||
@@ -0,0 +1,53 @@
|
||||
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
||||
// SPDX-License-Identifier: MIT
|
||||
import type { Element, ElementContent, Root } from 'hast';
|
||||
import type { BuildVisitor } from 'unist-util-visit';
|
||||
import { visit } from 'unist-util-visit';
|
||||
|
||||
export function rehypeAnimatedPlugin() {
|
||||
return (tree: Root) => {
|
||||
visit(tree, 'element', ((node: Element) => {
|
||||
if (
|
||||
[
|
||||
'p',
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'li',
|
||||
'strong',
|
||||
'th',
|
||||
'td'
|
||||
].includes(node.tagName) &&
|
||||
node.children
|
||||
) {
|
||||
const newChildren: Array<ElementContent> = [];
|
||||
for (const child of node.children) {
|
||||
if (child.type === 'text') {
|
||||
// @ts-expect-error Segmenter is not available in all environments
|
||||
const segmenter = new Intl.Segmenter('zh', { granularity: 'word' });
|
||||
const segments = segmenter.segment(child.value);
|
||||
const words = [...segments]
|
||||
.map(segment => segment.segment)
|
||||
.filter(Boolean);
|
||||
words.forEach((word: string) => {
|
||||
newChildren.push({
|
||||
children: [{ type: 'text', value: word }],
|
||||
properties: {
|
||||
className: 'x-markdown-animated-word'
|
||||
},
|
||||
tagName: 'span',
|
||||
type: 'element'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
newChildren.push(child);
|
||||
}
|
||||
}
|
||||
node.children = newChildren;
|
||||
}
|
||||
}) as BuildVisitor<Root, 'element'>);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
import type { GlobalShiki } from '@components/XMarkdownCore/hooks/useShiki';
|
||||
import type { CodeXProps } from '@components/XMarkdownCore/shared/types';
|
||||
import type { BuiltinTheme } from 'shiki';
|
||||
import type { PluggableList } from 'unified';
|
||||
import type { MermaidToolbarConfig } from '../components/Mermaid/types';
|
||||
import type { ElxRunCodeOptions } from '../components/RunCode/type';
|
||||
import type { CustomAttrs, SanitizeOptions } from '../core';
|
||||
import type { InitShikiOptions } from './shikiHighlighter';
|
||||
|
||||
export const shikiThemeDefault: InitShikiOptions['themes'] = {
|
||||
light: 'vitesse-light',
|
||||
dark: 'vitesse-dark'
|
||||
};
|
||||
|
||||
export const DEFAULT_PROPS = {
|
||||
markdown: '',
|
||||
allowHtml: false,
|
||||
enableLatex: true,
|
||||
enableAnimate: false,
|
||||
enableBreaks: true,
|
||||
codeXProps: () => ({}),
|
||||
codeXRender: () => ({}),
|
||||
codeXSlot: () => ({}),
|
||||
codeHighlightTheme: null,
|
||||
customAttrs: () => ({}),
|
||||
remarkPlugins: () => [],
|
||||
remarkPluginsAhead: () => [],
|
||||
rehypePlugins: () => [],
|
||||
rehypePluginsAhead: () => [],
|
||||
rehypeOptions: () => ({}),
|
||||
sanitize: false,
|
||||
sanitizeOptions: () => ({}),
|
||||
mermaidConfig: () => ({}),
|
||||
langs: () => [],
|
||||
defaultThemeMode: '' as 'light' | 'dark',
|
||||
themes: () => ({ ...shikiThemeDefault }),
|
||||
colorReplacements: () => ({}),
|
||||
needViewCodeBtn: true,
|
||||
secureViewCode: false,
|
||||
viewCodeModalOptions: () => ({})
|
||||
};
|
||||
|
||||
export const MARKDOWN_CORE_PROPS = {
|
||||
markdown: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
allowHtml: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enableLatex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableAnimate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enableBreaks: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
codeXProps: {
|
||||
type: Object as PropType<CodeXProps>,
|
||||
default: () => ({
|
||||
enableCodePreview: false, // 启动代码预览功能
|
||||
enableCodeCopy: true, // 启动代码复制功能
|
||||
enableThemeToggle: false, // 启动主题切换
|
||||
enableCodeLineNumber: false
|
||||
})
|
||||
},
|
||||
codeXRender: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
codeXSlot: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
codeHighlightTheme: {
|
||||
type: Object as PropType<BuiltinTheme | null>,
|
||||
default: () => null
|
||||
},
|
||||
customAttrs: {
|
||||
type: Object as PropType<CustomAttrs>,
|
||||
default: () => ({})
|
||||
},
|
||||
remarkPlugins: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
remarkPluginsAhead: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypePlugins: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypePluginsAhead: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypeOptions: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => ({})
|
||||
},
|
||||
sanitize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sanitizeOptions: {
|
||||
type: Object as PropType<SanitizeOptions>,
|
||||
default: () => ({})
|
||||
},
|
||||
mermaidConfig: {
|
||||
type: Object as PropType<Partial<MermaidToolbarConfig>>,
|
||||
default: () => ({})
|
||||
},
|
||||
langs: {
|
||||
type: Array as PropType<InitShikiOptions['langs']>,
|
||||
default: () => []
|
||||
},
|
||||
defaultThemeMode: {
|
||||
type: String as PropType<'light' | 'dark'>,
|
||||
default: 'light'
|
||||
},
|
||||
themes: {
|
||||
type: Object as PropType<InitShikiOptions['themes']>,
|
||||
default: () =>
|
||||
({
|
||||
...shikiThemeDefault
|
||||
}) satisfies InitShikiOptions['themes']
|
||||
},
|
||||
colorReplacements: {
|
||||
type: Object as PropType<InitShikiOptions['colorReplacements']>,
|
||||
default: () => ({})
|
||||
},
|
||||
needViewCodeBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
secureViewCode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
viewCodeModalOptions: {
|
||||
type: Object as PropType<ElxRunCodeOptions>,
|
||||
default: () => ({})
|
||||
},
|
||||
isDark: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
globalShiki: {
|
||||
type: Object as PropType<GlobalShiki>,
|
||||
default: () => ({})
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './markdownProvider';
|
||||
// export * from './markdownRenderer';
|
||||
export * from './shikiHighlighter';
|
||||
@@ -0,0 +1,6 @@
|
||||
const MARKDOWN_PROVIDER_KEY = Symbol('vue-element-plus-x-markdown-provider');
|
||||
const GLOBAL_SHIKI_KEY = Symbol('vue-element-plus-x-markdown-shiki-provider');
|
||||
|
||||
const MERMAID_CACHE_KEY_LENGTH = 10000;
|
||||
|
||||
export { GLOBAL_SHIKI_KEY, MARKDOWN_PROVIDER_KEY, MERMAID_CACHE_KEY_LENGTH };
|
||||
@@ -0,0 +1,97 @@
|
||||
import type { BuiltinTheme } from 'shiki';
|
||||
import type { PluggableList } from 'unified';
|
||||
import type { MermaidToolbarConfig } from '../components/Mermaid/types';
|
||||
import type { CustomAttrs, SanitizeOptions } from '../core';
|
||||
import type { InitShikiOptions } from './shikiHighlighter';
|
||||
import { shikiThemeDefault } from './shikiHighlighter';
|
||||
|
||||
const MarkdownProps = {
|
||||
markdown: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
allowHtml: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enableCodeLineNumber: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enableLatex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableAnimate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enableBreaks: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
codeXRender: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
codeXSlot: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
codeHighlightTheme: {
|
||||
type: Object as PropType<BuiltinTheme | null>,
|
||||
default: () => null
|
||||
},
|
||||
customAttrs: {
|
||||
type: Object as PropType<CustomAttrs>,
|
||||
default: () => ({})
|
||||
},
|
||||
remarkPlugins: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
remarkPluginsAhead: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypePlugins: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypePluginsAhead: {
|
||||
type: Array as PropType<PluggableList>,
|
||||
default: () => []
|
||||
},
|
||||
rehypeOptions: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => ({})
|
||||
},
|
||||
sanitize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sanitizeOptions: {
|
||||
type: Object as PropType<SanitizeOptions>,
|
||||
default: () => ({})
|
||||
},
|
||||
mermaidConfig: {
|
||||
type: Object as PropType<Partial<MermaidToolbarConfig>>,
|
||||
default: () => ({})
|
||||
},
|
||||
langs: {
|
||||
type: Array as PropType<InitShikiOptions['langs']>,
|
||||
default: () => []
|
||||
},
|
||||
defaultThemeMode: {
|
||||
type: String as PropType<'light' | 'dark'>,
|
||||
default: 'light'
|
||||
},
|
||||
themes: {
|
||||
type: Object as PropType<InitShikiOptions['themes']>,
|
||||
default: () =>
|
||||
({
|
||||
...shikiThemeDefault
|
||||
}) satisfies InitShikiOptions['themes']
|
||||
}
|
||||
};
|
||||
export { MarkdownProps };
|
||||
@@ -0,0 +1,270 @@
|
||||
import type {
|
||||
BundledLanguage,
|
||||
BundledTheme,
|
||||
LanguageInput,
|
||||
StringLiteralUnion,
|
||||
ThemeRegistrationAny
|
||||
} from 'shiki';
|
||||
|
||||
// 初始化Shiki 高亮器配置
|
||||
export interface InitShikiOptions {
|
||||
// 语言列表
|
||||
langs: Array<LanguageInput | BundledLanguage> | undefined;
|
||||
// 主题列表
|
||||
themes: Partial<
|
||||
Record<
|
||||
string | 'light' | 'dark',
|
||||
ThemeRegistrationAny | StringLiteralUnion<BundledTheme, string>
|
||||
>
|
||||
>;
|
||||
/**
|
||||
* 自定义当前主题下的代码颜色配置
|
||||
*
|
||||
* 一个颜色名称到新颜色值的映射表。
|
||||
*
|
||||
* 注意: 颜色的键必须以 `#` 开头，并且应为小写格式 ,否则不生效。
|
||||
*
|
||||
* 如果主题本身也定义了 `colorReplacements`，这个映射会与其合并。
|
||||
*
|
||||
* 最好和当前主题对应着修改
|
||||
*
|
||||
* @template
|
||||
* ```typescript
|
||||
* {
|
||||
* "vitesse-light": {
|
||||
* "#ab5959": "#ff66ff"
|
||||
* },
|
||||
* "vitesse-dark": {
|
||||
* "#cb7676": "#ff0066"
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
colorReplacements: Record<string, string | Record<string, string>>;
|
||||
}
|
||||
|
||||
export const shikiThemeDefault: InitShikiOptions['themes'] = {
|
||||
light: 'vitesse-light',
|
||||
dark: 'vitesse-dark'
|
||||
};
|
||||
|
||||
export const SHIKI_SUPPORT_LANGS = [
|
||||
'abap',
|
||||
'actionscript-3',
|
||||
'ada',
|
||||
'apache',
|
||||
'apex',
|
||||
'apl',
|
||||
'applescript',
|
||||
'ara',
|
||||
'asm',
|
||||
'astro',
|
||||
'awk',
|
||||
'ballerina',
|
||||
'bat',
|
||||
'beancount',
|
||||
'berry',
|
||||
'bibtex',
|
||||
'bicep',
|
||||
'blade',
|
||||
'c',
|
||||
'cadence',
|
||||
'clarity',
|
||||
'clojure',
|
||||
'cmake',
|
||||
'cobol',
|
||||
'codeql',
|
||||
'coffee',
|
||||
'cpp',
|
||||
'crystal',
|
||||
'csharp',
|
||||
'css',
|
||||
'cue',
|
||||
'cypher',
|
||||
'd',
|
||||
'dart',
|
||||
'dax',
|
||||
'diff',
|
||||
'docker',
|
||||
'dream-maker',
|
||||
'elixir',
|
||||
'elm',
|
||||
'erb',
|
||||
'erlang',
|
||||
'fish',
|
||||
'fsharp',
|
||||
'gdresource',
|
||||
'gdscript',
|
||||
'gdshader',
|
||||
'gherkin',
|
||||
'git-commit',
|
||||
'git-rebase',
|
||||
'glimmer-js',
|
||||
'glimmer-ts',
|
||||
'glsl',
|
||||
'gnuplot',
|
||||
'go',
|
||||
'graphql',
|
||||
'groovy',
|
||||
'hack',
|
||||
'haml',
|
||||
'handlebars',
|
||||
'haskell',
|
||||
'hcl',
|
||||
'hjson',
|
||||
'hlsl',
|
||||
'html',
|
||||
'http',
|
||||
'imba',
|
||||
'ini',
|
||||
'java',
|
||||
'javascript',
|
||||
'jinja-html',
|
||||
'jison',
|
||||
'json',
|
||||
'json5',
|
||||
'jsonc',
|
||||
'jsonl',
|
||||
'jsonnet',
|
||||
'jssm',
|
||||
'jsx',
|
||||
'julia',
|
||||
'kotlin',
|
||||
'kusto',
|
||||
'latex',
|
||||
'less',
|
||||
'liquid',
|
||||
'lisp',
|
||||
'logo',
|
||||
'lua',
|
||||
'make',
|
||||
'markdown',
|
||||
'marko',
|
||||
'matlab',
|
||||
'mdc',
|
||||
'mdx',
|
||||
'mermaid',
|
||||
'mojo',
|
||||
'narrat',
|
||||
'nextflow',
|
||||
'nginx',
|
||||
'nim',
|
||||
'nix',
|
||||
'objective-c',
|
||||
'objective-cpp',
|
||||
'ocaml',
|
||||
'pascal',
|
||||
'perl',
|
||||
'php',
|
||||
'plsql',
|
||||
'postcss',
|
||||
'powerquery',
|
||||
'powershell',
|
||||
'prisma',
|
||||
'prolog',
|
||||
'proto',
|
||||
'pug',
|
||||
'puppet',
|
||||
'purescript',
|
||||
'python',
|
||||
'r',
|
||||
'raku',
|
||||
'razor',
|
||||
'reg',
|
||||
'rel',
|
||||
'riscv',
|
||||
'rst',
|
||||
'ruby',
|
||||
'rust',
|
||||
'sas',
|
||||
'sass',
|
||||
'scala',
|
||||
'scheme',
|
||||
'scss',
|
||||
'shaderlab',
|
||||
'shellscript',
|
||||
'shellsession',
|
||||
'smalltalk',
|
||||
'solidity',
|
||||
'sparql',
|
||||
'splunk',
|
||||
'sql',
|
||||
'ssh-config',
|
||||
'stata',
|
||||
'stylus',
|
||||
'svelte',
|
||||
'swift',
|
||||
'system-verilog',
|
||||
'tasl',
|
||||
'tcl',
|
||||
'tex',
|
||||
'toml',
|
||||
'tsx',
|
||||
'turtle',
|
||||
'twig',
|
||||
'typescript',
|
||||
'v',
|
||||
'vb',
|
||||
'verilog',
|
||||
'vhdl',
|
||||
'viml',
|
||||
'vue',
|
||||
'vue-html',
|
||||
'vyper',
|
||||
'wasm',
|
||||
'wenyan',
|
||||
'wgsl',
|
||||
'wolfram',
|
||||
'xml',
|
||||
'xsl',
|
||||
'yaml',
|
||||
'zenscript',
|
||||
'zig',
|
||||
'bash',
|
||||
'batch',
|
||||
'be',
|
||||
'c#',
|
||||
'cdc',
|
||||
'clj',
|
||||
'cmd',
|
||||
'console',
|
||||
'cql',
|
||||
'cs',
|
||||
'dockerfile',
|
||||
'erl',
|
||||
'f#',
|
||||
'fs',
|
||||
'fsl',
|
||||
'gjs',
|
||||
'gts',
|
||||
'hbs',
|
||||
'hs',
|
||||
'jade',
|
||||
'js',
|
||||
'kql',
|
||||
'makefile',
|
||||
'md',
|
||||
'nar',
|
||||
'nf',
|
||||
'objc',
|
||||
'perl6',
|
||||
'properties',
|
||||
'ps',
|
||||
'ps1',
|
||||
'py',
|
||||
'ql',
|
||||
'rb',
|
||||
'rs',
|
||||
'sh',
|
||||
'shader',
|
||||
'shell',
|
||||
'spl',
|
||||
'styl',
|
||||
'ts',
|
||||
'vim',
|
||||
'vimscript',
|
||||
'vy',
|
||||
'yml',
|
||||
'zsh',
|
||||
'文言'
|
||||
] as const;
|
||||
42
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/shared/types.d.ts
vendored
Normal file
42
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/shared/types.d.ts
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
import type { TVueMarkdownProps } from '../';
|
||||
import type { CodeBlockHeaderExpose } from '../components/CodeBlock/shiki-header';
|
||||
import type { ElxRunCodeOptions } from '../components/RunCode/type';
|
||||
import type { InitShikiOptions } from './shikiHighlighter';
|
||||
|
||||
export type MarkdownProps = {
|
||||
allowHtml?: boolean;
|
||||
enableLatex?: boolean;
|
||||
enableAnimate?: boolean;
|
||||
enableBreaks?: boolean;
|
||||
codeXProps?: CodeXProps;
|
||||
codeXRender?: Record<string, any>;
|
||||
codeXSlot?: CodeBlockHeaderExpose & Record<string, any>;
|
||||
codeHighlightTheme?: BuiltinTheme | null;
|
||||
remarkPluginsAhead?: PluggableList;
|
||||
rehypePluginsAhead?: PluggableList;
|
||||
defaultThemeMode?: 'light' | 'dark';
|
||||
needViewCodeBtn?: boolean;
|
||||
secureViewCode?: boolean;
|
||||
viewCodeModalOptions?: ElxRunCodeOptions;
|
||||
mermaidConfig?: Partial<MermaidToolbarConfig>;
|
||||
} & Partial<Pick<InitShikiOptions, 'langs' | 'themes' | 'colorReplacements'>> &
|
||||
Pick<
|
||||
TVueMarkdownProps,
|
||||
| 'markdown'
|
||||
| 'customAttrs'
|
||||
| 'remarkPlugins'
|
||||
| 'rehypePlugins'
|
||||
| 'sanitize'
|
||||
| 'sanitizeOptions'
|
||||
| 'rehypeOptions'
|
||||
>;
|
||||
|
||||
export type MarkdownProviderProps = Omit<MarkdownProps, 'markdown'> &
|
||||
Partial<Pick<MarkdownProps, 'markdown'>>;
|
||||
|
||||
export interface CodeXProps {
|
||||
enableCodePreview?: boolean; // 启动代码预览功能
|
||||
enableCodeCopy?: boolean; // 启动代码复制功能
|
||||
enableThemeToggle?: boolean; // 启动主题切换
|
||||
enableCodeLineNumber?: boolean; // 开启行号
|
||||
}
|
||||
12
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/style/animate.scss
vendored
Normal file
12
Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/style/animate.scss
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.x-markdown-animated-word {
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import url('./katex.scss');
|
||||
@import url('./animate.scss');
|
||||
@@ -0,0 +1,7 @@
|
||||
.katex-error {
|
||||
color: var(--el-text-color-secondary) !important;
|
||||
}
|
||||
.katex-html {
|
||||
overflow: auto hidden;
|
||||
padding: 3px;
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
// // 媒体查询：当用户系统主题为暗色时 基于浏览器的主题色
|
||||
// @media (prefers-color-scheme: light) {
|
||||
// body {
|
||||
// --shiki-custom-brr-mini: 3px;
|
||||
// --shiki-custom-brr: 5px;
|
||||
// --shiki-custom-blur: 10px;
|
||||
// --shiki-code-header-bg: #fafafa;
|
||||
// --shiki-code-header-span-color: #575757;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 媒体查询：当用户系统主题为暗色时
|
||||
// @media (prefers-color-scheme: dark) {
|
||||
// body {
|
||||
// --shiki-custom-brr-mini: 3px;
|
||||
// --shiki-custom-brr: 5px;
|
||||
// --shiki-custom-blur: 10px;
|
||||
// --shiki-code-header-bg: #272727;
|
||||
// --shiki-code-header-span-color: #fafafa;
|
||||
// }
|
||||
|
||||
// .shiki,
|
||||
// .shiki span {
|
||||
// color: var(--shiki-dark) !important;
|
||||
// background-color: var(--shiki-dark-bg) !important;
|
||||
// /* 可选，用于定义字体样式 */
|
||||
// font-style: var(--shiki-dark-font-style) !important;
|
||||
// font-weight: var(--shiki-dark-font-weight) !important;
|
||||
// text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
body {
|
||||
--shiki-custom-brr-mini: 3px;
|
||||
--shiki-custom-brr: 5px;
|
||||
--shiki-custom-blur: 10px;
|
||||
--shiki-code-header-bg: #fafafa;
|
||||
--shiki-code-header-span-color: #575757;
|
||||
--shiki-code-header-btn-bg: #ebedf0;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--shiki-custom-brr-mini: 3px;
|
||||
--shiki-custom-brr: 5px;
|
||||
--shiki-custom-blur: 10px;
|
||||
--shiki-code-header-bg: #272727;
|
||||
--shiki-code-header-span-color: #fafafa;
|
||||
--shiki-code-header-btn-bg: #3b3b3b;
|
||||
}
|
||||
|
||||
body.dark .shiki,
|
||||
body.dark .shiki span {
|
||||
color: var(--shiki-dark) !important;
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
/* 可选，用于定义字体样式 */
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
|
||||
.shiki {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.elx-xmarkdown-container {
|
||||
// background-color: var(--el-fill-color);
|
||||
color: black;
|
||||
padding: 5px 10px;
|
||||
border-radius: var(--shiki-custom-brr);
|
||||
|
||||
/* 表格整体边框 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* 表头样式 */
|
||||
th {
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 表格行样式 */
|
||||
td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:nth-child(even) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
pre code {
|
||||
text-shadow: none !important;
|
||||
// 设置代码字体样式
|
||||
span {
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
text-align: left;
|
||||
// white-space: pre-wrap;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
}
|
||||
|
||||
pre div.pre-md {
|
||||
position: relative;
|
||||
border-radius: var(--shiki-custom-brr-mini);
|
||||
border: 1px solid var(--el-border-color);
|
||||
min-width: 180px !important;
|
||||
.markdown-elxLanguage-header-div {
|
||||
box-sizing: content-box !important;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 5px 5px 5px 8px;
|
||||
border-radius: var(--shiki-custom-brr-mini);
|
||||
-webkit-backdrop-filter: blur(var(--shiki-custom-blur));
|
||||
backdrop-filter: blur(var(--shiki-custom-blur));
|
||||
margin: 0;
|
||||
background-color: var(--shiki-code-header-bg);
|
||||
z-index: 1;
|
||||
span {
|
||||
box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.markdown-elxLanguage-header-span {
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
color: var(--shiki-code-header-span-color) !important;
|
||||
font-weight: bold !important;
|
||||
background-color: transparent !important;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-elxLanguage-header-space-start,
|
||||
.markdown-elxLanguage-header-space {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.markdown-elxLanguage-header-space-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.shiki-header-button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--shiki-custom-brr);
|
||||
background-color: transparent;
|
||||
width: fit-content !important;
|
||||
padding: 0px 3px;
|
||||
height: 24px;
|
||||
opacity: 1;
|
||||
transition: color 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
.el-icon {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.el-icon,
|
||||
span {
|
||||
background-color: transparent !important;
|
||||
color: var(--shiki-code-header-span-color) !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--shiki-code-header-btn-bg);
|
||||
}
|
||||
}
|
||||
// 按钮图标的大小
|
||||
.shiki-header-button {
|
||||
span {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.shiki-header-button-expand {
|
||||
span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-elxLanguage-header-toggle-expand {
|
||||
margin: 2px 0 0 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.copied {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre div.is-expanded {
|
||||
height: auto !important;
|
||||
code {
|
||||
padding: 8px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.markdown-elxLanguage-header-toggle-expand {
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
Yi.Ai.Vue3/src/vue-element-plus-y/dom-speech-recognition-env.d.ts
vendored
Normal file
44
Yi.Ai.Vue3/src/vue-element-plus-y/dom-speech-recognition-env.d.ts
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
/// <reference types="dom-speech-recognition" />
|
||||
|
||||
declare interface SpeechRecognition {
|
||||
continuous: boolean;
|
||||
interimResults: boolean;
|
||||
lang: string;
|
||||
onresult: (event: SpeechRecognitionEvent) => void;
|
||||
onstart: () => void;
|
||||
onend: () => void;
|
||||
onerror: (event: SpeechRecognitionError) => void;
|
||||
start: () => void;
|
||||
stop: () => void;
|
||||
}
|
||||
|
||||
declare interface SpeechRecognitionEvent {
|
||||
results: SpeechRecognitionResultList;
|
||||
resultIndex: number;
|
||||
}
|
||||
|
||||
declare interface SpeechRecognitionResultList {
|
||||
[index: number]: SpeechRecognitionResult;
|
||||
length: number;
|
||||
}
|
||||
|
||||
declare interface SpeechRecognitionResult {
|
||||
[index: number]: SpeechRecognitionAlternative;
|
||||
length: number;
|
||||
isFinal: boolean;
|
||||
}
|
||||
|
||||
declare interface SpeechRecognitionAlternative {
|
||||
confidence: number;
|
||||
transcript: string;
|
||||
}
|
||||
|
||||
declare interface SpeechRecognitionError {
|
||||
error: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
declare const webkitSpeechRecognition: {
|
||||
new (): SpeechRecognition;
|
||||
prototype: SpeechRecognition;
|
||||
};
|
||||
187
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/XRequest.ts
Normal file
187
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/XRequest.ts
Normal file
@@ -0,0 +1,187 @@
|
||||
type OnError = (eventSource: EventSource, event: Event) => void;
|
||||
|
||||
type BaseFetchOptions = Omit<RequestInit, 'headers' | 'signal'> & {
|
||||
headers?: HeadersInit | Headers;
|
||||
};
|
||||
|
||||
type Transformer<T> = (message: string) => T;
|
||||
|
||||
interface BaseSSEProps<T = string> {
|
||||
baseURL?: string;
|
||||
type?: SSEType;
|
||||
onFinish?: (data: T[]) => void;
|
||||
onAbort?: (data: T[]) => void;
|
||||
transformer?: Transformer<T>;
|
||||
onMessage?: (message: T) => void;
|
||||
}
|
||||
|
||||
interface SSEWithFetchProps {
|
||||
baseOptions?: BaseFetchOptions;
|
||||
onError?: (e: unknown) => void;
|
||||
}
|
||||
|
||||
interface SSEWithSSEProps {
|
||||
baseOptions?: EventSourceInit;
|
||||
onError?: OnError;
|
||||
onOpen?: () => void;
|
||||
}
|
||||
|
||||
type SSEType = 'fetch' | 'sse' | 'sip';
|
||||
|
||||
/**
|
||||
* @deprecated 已经废弃, 请使用 hook-fetch 代替
|
||||
* @deprecated This class has been deprecated, please use hook-fetch instead.
|
||||
*
|
||||
* @see {@link https://jsonlee12138.github.io/hook-fetch/ | hook-fetch 官方文档}
|
||||
* @see {@link https://jsonlee12138.github.io/hook-fetch/ | hook-fetch Document}
|
||||
*/
|
||||
export type SSEProps<T> = BaseSSEProps<T> &
|
||||
(SSEWithSSEProps | SSEWithFetchProps);
|
||||
|
||||
/**
|
||||
* @deprecated 已经废弃, 请使用 hook-fetch 代替
|
||||
* @deprecated This class has been deprecated, please use hook-fetch instead.
|
||||
*
|
||||
* @see {@link https://jsonlee12138.github.io/hook-fetch/ | hook-fetch 官方文档}
|
||||
* @see {@link https://jsonlee12138.github.io/hook-fetch/ | hook-fetch Document}
|
||||
*/
|
||||
export class XRequest<T> {
|
||||
#instance: EventSource | null = null;
|
||||
#transformer?: Transformer<T>;
|
||||
#baseURL: string;
|
||||
#baseOptions?: EventSourceInit | BaseFetchOptions;
|
||||
#onAbort?: BaseSSEProps<T>['onAbort'];
|
||||
#onMessage?: BaseSSEProps<T>['onMessage'];
|
||||
#onError?: SSEWithSSEProps['onError'] | SSEWithFetchProps['onError'];
|
||||
#onOpen?: () => void;
|
||||
#type: SSEType = 'sse';
|
||||
#controller: AbortController | null = null;
|
||||
#onFinish?: BaseSSEProps<T>['onFinish'];
|
||||
#messages: T[] = [];
|
||||
constructor({
|
||||
baseURL,
|
||||
onAbort,
|
||||
onMessage,
|
||||
onError,
|
||||
baseOptions,
|
||||
transformer,
|
||||
type,
|
||||
onFinish,
|
||||
...props
|
||||
}: SSEProps<T> = {}) {
|
||||
this.#baseURL = baseURL ?? '';
|
||||
this.#baseOptions = baseOptions ?? {};
|
||||
onAbort && (this.#onAbort = onAbort);
|
||||
onMessage && (this.#onMessage = onMessage);
|
||||
onError && (this.#onError = onError);
|
||||
onFinish && (this.#onFinish = onFinish);
|
||||
(props as SSEWithSSEProps).onOpen &&
|
||||
(this.#onOpen = (props as SSEWithSSEProps).onOpen);
|
||||
transformer && (this.#transformer = transformer);
|
||||
type && (this.#type = type);
|
||||
this.abort = this.abort.bind(this);
|
||||
this.send = this.send.bind(this);
|
||||
}
|
||||
|
||||
#sendWithFetch(url: string, options: BaseFetchOptions = {}) {
|
||||
this.#controller = new AbortController();
|
||||
const signal = this.#controller.signal;
|
||||
const fetchOptions = {
|
||||
...options,
|
||||
signal
|
||||
} as RequestInit;
|
||||
return fetch(this.#baseURL + url, fetchOptions)
|
||||
.then(res => res.body)
|
||||
.then(async body => {
|
||||
if (!body) {
|
||||
return Promise.reject(
|
||||
new Error('Response body is null in stream mode')
|
||||
);
|
||||
}
|
||||
const reader = body.getReader();
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
let done = false;
|
||||
while (!done) {
|
||||
const { value, done: streamDone } = await reader.read();
|
||||
done = streamDone;
|
||||
if (streamDone) {
|
||||
this.#onFinish?.(this.#messages);
|
||||
return;
|
||||
}
|
||||
if (value) {
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
const chunkUse = chunk.startsWith('data: ')
|
||||
? chunk.slice(6)
|
||||
: chunk;
|
||||
try {
|
||||
const res = this.#transformer
|
||||
? (this.#transformer as Transformer<T>)(chunkUse)
|
||||
: (chunkUse as T);
|
||||
this.#messages.push(res);
|
||||
this.#onMessage?.(res);
|
||||
}
|
||||
catch (error) {
|
||||
(this.#onError as SSEWithFetchProps['onError'])?.(error);
|
||||
this.#controller?.abort();
|
||||
return Promise.reject(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.name === 'AbortError') {
|
||||
this.#onAbort?.(this.#messages);
|
||||
return;
|
||||
}
|
||||
(this.#onError as SSEWithFetchProps['onError'])?.(err);
|
||||
this.#controller?.abort();
|
||||
});
|
||||
}
|
||||
|
||||
#sendWithSSE(url: string, options: EventSourceInit = {}) {
|
||||
const es = new EventSource(this.#baseURL + url, {
|
||||
...this.#baseOptions,
|
||||
...options
|
||||
});
|
||||
es.onmessage = e => {
|
||||
const res = this.#transformer
|
||||
? this.#transformer(e.data)
|
||||
: (e as MessageEvent<T>);
|
||||
this.#onMessage?.(res as T);
|
||||
};
|
||||
es.onopen = () => {
|
||||
this.#onOpen?.();
|
||||
};
|
||||
es.onerror = (ev: Event) => {
|
||||
if (es.readyState === EventSource.CLOSED) {
|
||||
this.#onFinish?.(this.#messages);
|
||||
}
|
||||
else {
|
||||
this.#onError?.(es, ev);
|
||||
}
|
||||
this.abort();
|
||||
};
|
||||
this.#instance = es;
|
||||
return es;
|
||||
}
|
||||
|
||||
public send(url: string, options: EventSourceInit | BaseFetchOptions = {}) {
|
||||
switch (this.#type) {
|
||||
case 'fetch':
|
||||
this.#sendWithFetch(url, options as BaseFetchOptions);
|
||||
break;
|
||||
default:
|
||||
this.#sendWithSSE(url, options as EventSourceInit);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
public abort() {
|
||||
this.#instance?.close?.();
|
||||
this.#instance = null;
|
||||
this.#controller?.abort();
|
||||
this.#controller = null;
|
||||
this.#onAbort?.(this.#messages);
|
||||
this.#messages = [];
|
||||
}
|
||||
}
|
||||
5
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/index.ts
Normal file
5
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export * from './usePrism';
|
||||
export * from './useRecord';
|
||||
export * from './useSend';
|
||||
export * from './useXStream';
|
||||
export * from './XRequest';
|
||||
298
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/shiki-loader.ts
Normal file
298
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/shiki-loader.ts
Normal file
@@ -0,0 +1,298 @@
|
||||
// 支持的语言映射表（你可以根据实际支持的语言增删）
|
||||
export const languageLoaders: Record<string, () => Promise<any>> = {
|
||||
abap: () => import('shiki/dist/langs/abap.mjs'),
|
||||
'actionscript-3': () => import('shiki/dist/langs/actionscript-3.mjs'),
|
||||
ada: () => import('shiki/dist/langs/ada.mjs'),
|
||||
apache: () => import('shiki/dist/langs/apache.mjs'),
|
||||
apex: () => import('shiki/dist/langs/apex.mjs'),
|
||||
apl: () => import('shiki/dist/langs/apl.mjs'),
|
||||
applescript: () => import('shiki/dist/langs/applescript.mjs'),
|
||||
ara: () => import('shiki/dist/langs/ara.mjs'),
|
||||
asm: () => import('shiki/dist/langs/asm.mjs'),
|
||||
astro: () => import('shiki/dist/langs/astro.mjs'),
|
||||
awk: () => import('shiki/dist/langs/awk.mjs'),
|
||||
ballerina: () => import('shiki/dist/langs/ballerina.mjs'),
|
||||
bash: () => import('shiki/dist/langs/bash.mjs'),
|
||||
bat: () => import('shiki/dist/langs/bat.mjs'),
|
||||
batch: () => import('shiki/dist/langs/batch.mjs'),
|
||||
be: () => import('shiki/dist/langs/be.mjs'),
|
||||
beancount: () => import('shiki/dist/langs/beancount.mjs'),
|
||||
berry: () => import('shiki/dist/langs/berry.mjs'),
|
||||
bibtex: () => import('shiki/dist/langs/bibtex.mjs'),
|
||||
bicep: () => import('shiki/dist/langs/bicep.mjs'),
|
||||
blade: () => import('shiki/dist/langs/blade.mjs'),
|
||||
c: () => import('shiki/dist/langs/c.mjs'),
|
||||
'c#': () => import('shiki/dist/langs/csharp.mjs'),
|
||||
cadence: () => import('shiki/dist/langs/cadence.mjs'),
|
||||
cdc: () => import('shiki/dist/langs/cdc.mjs'),
|
||||
clarity: () => import('shiki/dist/langs/clarity.mjs'),
|
||||
clj: () => import('shiki/dist/langs/clj.mjs'),
|
||||
clojure: () => import('shiki/dist/langs/clojure.mjs'),
|
||||
cmake: () => import('shiki/dist/langs/cmake.mjs'),
|
||||
cmd: () => import('shiki/dist/langs/cmd.mjs'),
|
||||
cobol: () => import('shiki/dist/langs/cobol.mjs'),
|
||||
codeql: () => import('shiki/dist/langs/codeql.mjs'),
|
||||
coffee: () => import('shiki/dist/langs/coffee.mjs'),
|
||||
console: () => import('shiki/dist/langs/console.mjs'),
|
||||
cpp: () => import('shiki/dist/langs/cpp.mjs'),
|
||||
cql: () => import('shiki/dist/langs/cql.mjs'),
|
||||
crystal: () => import('shiki/dist/langs/crystal.mjs'),
|
||||
cs: () => import('shiki/dist/langs/cs.mjs'),
|
||||
csharp: () => import('shiki/dist/langs/csharp.mjs'),
|
||||
css: () => import('shiki/dist/langs/css.mjs'),
|
||||
cue: () => import('shiki/dist/langs/cue.mjs'),
|
||||
cypher: () => import('shiki/dist/langs/cypher.mjs'),
|
||||
d: () => import('shiki/dist/langs/d.mjs'),
|
||||
dart: () => import('shiki/dist/langs/dart.mjs'),
|
||||
dax: () => import('shiki/dist/langs/dax.mjs'),
|
||||
diff: () => import('shiki/dist/langs/diff.mjs'),
|
||||
docker: () => import('shiki/dist/langs/docker.mjs'),
|
||||
dockerfile: () => import('shiki/dist/langs/dockerfile.mjs'),
|
||||
'dream-maker': () => import('shiki/dist/langs/dream-maker.mjs'),
|
||||
elixir: () => import('shiki/dist/langs/elixir.mjs'),
|
||||
elm: () => import('shiki/dist/langs/elm.mjs'),
|
||||
erb: () => import('shiki/dist/langs/erb.mjs'),
|
||||
erl: () => import('shiki/dist/langs/erl.mjs'),
|
||||
erlang: () => import('shiki/dist/langs/erlang.mjs'),
|
||||
'f#': () => import('shiki/dist/langs/fsharp.mjs'),
|
||||
fish: () => import('shiki/dist/langs/fish.mjs'),
|
||||
fs: () => import('shiki/dist/langs/fs.mjs'),
|
||||
fsharp: () => import('shiki/dist/langs/fsharp.mjs'),
|
||||
fsl: () => import('shiki/dist/langs/fsl.mjs'),
|
||||
gdresource: () => import('shiki/dist/langs/gdresource.mjs'),
|
||||
gdscript: () => import('shiki/dist/langs/gdscript.mjs'),
|
||||
gdshader: () => import('shiki/dist/langs/gdshader.mjs'),
|
||||
gherkin: () => import('shiki/dist/langs/gherkin.mjs'),
|
||||
'git-commit': () => import('shiki/dist/langs/git-commit.mjs'),
|
||||
'git-rebase': () => import('shiki/dist/langs/git-rebase.mjs'),
|
||||
gjs: () => import('shiki/dist/langs/gjs.mjs'),
|
||||
'glimmer-js': () => import('shiki/dist/langs/glimmer-js.mjs'),
|
||||
'glimmer-ts': () => import('shiki/dist/langs/glimmer-ts.mjs'),
|
||||
glsl: () => import('shiki/dist/langs/glsl.mjs'),
|
||||
gnuplot: () => import('shiki/dist/langs/gnuplot.mjs'),
|
||||
go: () => import('shiki/dist/langs/go.mjs'),
|
||||
graphql: () => import('shiki/dist/langs/graphql.mjs'),
|
||||
groovy: () => import('shiki/dist/langs/groovy.mjs'),
|
||||
gts: () => import('shiki/dist/langs/gts.mjs'),
|
||||
hack: () => import('shiki/dist/langs/hack.mjs'),
|
||||
haml: () => import('shiki/dist/langs/haml.mjs'),
|
||||
handlebars: () => import('shiki/dist/langs/handlebars.mjs'),
|
||||
haskell: () => import('shiki/dist/langs/haskell.mjs'),
|
||||
hbs: () => import('shiki/dist/langs/hbs.mjs'),
|
||||
hcl: () => import('shiki/dist/langs/hcl.mjs'),
|
||||
hjson: () => import('shiki/dist/langs/hjson.mjs'),
|
||||
hlsl: () => import('shiki/dist/langs/hlsl.mjs'),
|
||||
hs: () => import('shiki/dist/langs/hs.mjs'),
|
||||
html: () => import('shiki/dist/langs/html.mjs'),
|
||||
http: () => import('shiki/dist/langs/http.mjs'),
|
||||
imba: () => import('shiki/dist/langs/imba.mjs'),
|
||||
ini: () => import('shiki/dist/langs/ini.mjs'),
|
||||
jade: () => import('shiki/dist/langs/jade.mjs'),
|
||||
java: () => import('shiki/dist/langs/java.mjs'),
|
||||
javascript: () => import('shiki/dist/langs/javascript.mjs'),
|
||||
'jinja-html': () => import('shiki/dist/langs/jinja-html.mjs'),
|
||||
jison: () => import('shiki/dist/langs/jison.mjs'),
|
||||
js: () => import('shiki/dist/langs/js.mjs'),
|
||||
json: () => import('shiki/dist/langs/json.mjs'),
|
||||
json5: () => import('shiki/dist/langs/json5.mjs'),
|
||||
jsonc: () => import('shiki/dist/langs/jsonc.mjs'),
|
||||
jsonl: () => import('shiki/dist/langs/jsonl.mjs'),
|
||||
jsonnet: () => import('shiki/dist/langs/jsonnet.mjs'),
|
||||
jssm: () => import('shiki/dist/langs/jssm.mjs'),
|
||||
jsx: () => import('shiki/dist/langs/jsx.mjs'),
|
||||
julia: () => import('shiki/dist/langs/julia.mjs'),
|
||||
kotlin: () => import('shiki/dist/langs/kotlin.mjs'),
|
||||
kql: () => import('shiki/dist/langs/kql.mjs'),
|
||||
kusto: () => import('shiki/dist/langs/kusto.mjs'),
|
||||
latex: () => import('shiki/dist/langs/latex.mjs'),
|
||||
less: () => import('shiki/dist/langs/less.mjs'),
|
||||
liquid: () => import('shiki/dist/langs/liquid.mjs'),
|
||||
lisp: () => import('shiki/dist/langs/lisp.mjs'),
|
||||
logo: () => import('shiki/dist/langs/logo.mjs'),
|
||||
lua: () => import('shiki/dist/langs/lua.mjs'),
|
||||
make: () => import('shiki/dist/langs/make.mjs'),
|
||||
makefile: () => import('shiki/dist/langs/makefile.mjs'),
|
||||
markdown: () => import('shiki/dist/langs/markdown.mjs'),
|
||||
marko: () => import('shiki/dist/langs/marko.mjs'),
|
||||
matlab: () => import('shiki/dist/langs/matlab.mjs'),
|
||||
md: () => import('shiki/dist/langs/md.mjs'),
|
||||
mdc: () => import('shiki/dist/langs/mdc.mjs'),
|
||||
mdx: () => import('shiki/dist/langs/mdx.mjs'),
|
||||
mermaid: () => import('shiki/dist/langs/mermaid.mjs'),
|
||||
mojo: () => import('shiki/dist/langs/mojo.mjs'),
|
||||
nar: () => import('shiki/dist/langs/nar.mjs'),
|
||||
narrat: () => import('shiki/dist/langs/narrat.mjs'),
|
||||
nextflow: () => import('shiki/dist/langs/nextflow.mjs'),
|
||||
nf: () => import('shiki/dist/langs/nf.mjs'),
|
||||
nginx: () => import('shiki/dist/langs/nginx.mjs'),
|
||||
nim: () => import('shiki/dist/langs/nim.mjs'),
|
||||
nix: () => import('shiki/dist/langs/nix.mjs'),
|
||||
objc: () => import('shiki/dist/langs/objc.mjs'),
|
||||
'objective-c': () => import('shiki/dist/langs/objective-c.mjs'),
|
||||
'objective-cpp': () => import('shiki/dist/langs/objective-cpp.mjs'),
|
||||
ocaml: () => import('shiki/dist/langs/ocaml.mjs'),
|
||||
pascal: () => import('shiki/dist/langs/pascal.mjs'),
|
||||
perl: () => import('shiki/dist/langs/perl.mjs'),
|
||||
perl6: () => import('shiki/dist/langs/perl6.mjs'),
|
||||
php: () => import('shiki/dist/langs/php.mjs'),
|
||||
plsql: () => import('shiki/dist/langs/plsql.mjs'),
|
||||
postcss: () => import('shiki/dist/langs/postcss.mjs'),
|
||||
powerquery: () => import('shiki/dist/langs/powerquery.mjs'),
|
||||
powershell: () => import('shiki/dist/langs/powershell.mjs'),
|
||||
prisma: () => import('shiki/dist/langs/prisma.mjs'),
|
||||
prolog: () => import('shiki/dist/langs/prolog.mjs'),
|
||||
properties: () => import('shiki/dist/langs/properties.mjs'),
|
||||
proto: () => import('shiki/dist/langs/proto.mjs'),
|
||||
ps: () => import('shiki/dist/langs/ps.mjs'),
|
||||
ps1: () => import('shiki/dist/langs/ps1.mjs'),
|
||||
pug: () => import('shiki/dist/langs/pug.mjs'),
|
||||
puppet: () => import('shiki/dist/langs/puppet.mjs'),
|
||||
purescript: () => import('shiki/dist/langs/purescript.mjs'),
|
||||
py: () => import('shiki/dist/langs/py.mjs'),
|
||||
python: () => import('shiki/dist/langs/python.mjs'),
|
||||
ql: () => import('shiki/dist/langs/ql.mjs'),
|
||||
r: () => import('shiki/dist/langs/r.mjs'),
|
||||
raku: () => import('shiki/dist/langs/raku.mjs'),
|
||||
razor: () => import('shiki/dist/langs/razor.mjs'),
|
||||
rb: () => import('shiki/dist/langs/rb.mjs'),
|
||||
reg: () => import('shiki/dist/langs/reg.mjs'),
|
||||
rel: () => import('shiki/dist/langs/rel.mjs'),
|
||||
riscv: () => import('shiki/dist/langs/riscv.mjs'),
|
||||
rs: () => import('shiki/dist/langs/rs.mjs'),
|
||||
rst: () => import('shiki/dist/langs/rst.mjs'),
|
||||
ruby: () => import('shiki/dist/langs/ruby.mjs'),
|
||||
rust: () => import('shiki/dist/langs/rust.mjs'),
|
||||
sas: () => import('shiki/dist/langs/sas.mjs'),
|
||||
sass: () => import('shiki/dist/langs/sass.mjs'),
|
||||
scala: () => import('shiki/dist/langs/scala.mjs'),
|
||||
scheme: () => import('shiki/dist/langs/scheme.mjs'),
|
||||
scss: () => import('shiki/dist/langs/scss.mjs'),
|
||||
sh: () => import('shiki/dist/langs/sh.mjs'),
|
||||
shader: () => import('shiki/dist/langs/shader.mjs'),
|
||||
shaderlab: () => import('shiki/dist/langs/shaderlab.mjs'),
|
||||
shell: () => import('shiki/dist/langs/shell.mjs'),
|
||||
shellscript: () => import('shiki/dist/langs/shellscript.mjs'),
|
||||
shellsession: () => import('shiki/dist/langs/shellsession.mjs'),
|
||||
smalltalk: () => import('shiki/dist/langs/smalltalk.mjs'),
|
||||
solidity: () => import('shiki/dist/langs/solidity.mjs'),
|
||||
sparql: () => import('shiki/dist/langs/sparql.mjs'),
|
||||
spl: () => import('shiki/dist/langs/spl.mjs'),
|
||||
splunk: () => import('shiki/dist/langs/splunk.mjs'),
|
||||
sql: () => import('shiki/dist/langs/sql.mjs'),
|
||||
'ssh-config': () => import('shiki/dist/langs/ssh-config.mjs'),
|
||||
stata: () => import('shiki/dist/langs/stata.mjs'),
|
||||
styl: () => import('shiki/dist/langs/styl.mjs'),
|
||||
stylus: () => import('shiki/dist/langs/stylus.mjs'),
|
||||
svelte: () => import('shiki/dist/langs/svelte.mjs'),
|
||||
swift: () => import('shiki/dist/langs/swift.mjs'),
|
||||
'system-verilog': () => import('shiki/dist/langs/system-verilog.mjs'),
|
||||
tasl: () => import('shiki/dist/langs/tasl.mjs'),
|
||||
tcl: () => import('shiki/dist/langs/tcl.mjs'),
|
||||
tex: () => import('shiki/dist/langs/tex.mjs'),
|
||||
toml: () => import('shiki/dist/langs/toml.mjs'),
|
||||
ts: () => import('shiki/dist/langs/ts.mjs'),
|
||||
tsx: () => import('shiki/dist/langs/tsx.mjs'),
|
||||
turtle: () => import('shiki/dist/langs/turtle.mjs'),
|
||||
twig: () => import('shiki/dist/langs/twig.mjs'),
|
||||
typescript: () => import('shiki/dist/langs/typescript.mjs'),
|
||||
v: () => import('shiki/dist/langs/v.mjs'),
|
||||
vb: () => import('shiki/dist/langs/vb.mjs'),
|
||||
verilog: () => import('shiki/dist/langs/verilog.mjs'),
|
||||
vhdl: () => import('shiki/dist/langs/vhdl.mjs'),
|
||||
vim: () => import('shiki/dist/langs/vim.mjs'),
|
||||
viml: () => import('shiki/dist/langs/viml.mjs'),
|
||||
vimscript: () => import('shiki/dist/langs/vimscript.mjs'),
|
||||
vue: () => import('shiki/dist/langs/vue.mjs'),
|
||||
'vue-html': () => import('shiki/dist/langs/vue-html.mjs'),
|
||||
vy: () => import('shiki/dist/langs/vy.mjs'),
|
||||
vyper: () => import('shiki/dist/langs/vyper.mjs'),
|
||||
wasm: () => import('shiki/dist/langs/wasm.mjs'),
|
||||
wenyan: () => import('shiki/dist/langs/wenyan.mjs'),
|
||||
wgsl: () => import('shiki/dist/langs/wgsl.mjs'),
|
||||
wolfram: () => import('shiki/dist/langs/wolfram.mjs'),
|
||||
xml: () => import('shiki/dist/langs/xml.mjs'),
|
||||
xsl: () => import('shiki/dist/langs/xsl.mjs'),
|
||||
yaml: () => import('shiki/dist/langs/yaml.mjs'),
|
||||
yml: () => import('shiki/dist/langs/yml.mjs'),
|
||||
zenscript: () => import('shiki/dist/langs/zenscript.mjs'),
|
||||
zig: () => import('shiki/dist/langs/zig.mjs'),
|
||||
zsh: () => import('shiki/dist/langs/zsh.mjs'),
|
||||
文言: () => import('shiki/dist/langs/wenyan.mjs')
|
||||
};
|
||||
|
||||
export const themeLoaders: Record<string, () => Promise<any>> = {
|
||||
andromeeda: () => import('shiki/dist/themes/andromeeda.mjs'),
|
||||
'aurora-x': () => import('shiki/dist/themes/aurora-x.mjs'),
|
||||
'ayu-dark': () => import('shiki/dist/themes/ayu-dark.mjs'),
|
||||
'catppuccin-frappe': () => import('shiki/dist/themes/catppuccin-frappe.mjs'),
|
||||
'catppuccin-latte': () => import('shiki/dist/themes/catppuccin-latte.mjs'),
|
||||
'catppuccin-macchiato': () =>
|
||||
import('shiki/dist/themes/catppuccin-macchiato.mjs'),
|
||||
'catppuccin-mocha': () => import('shiki/dist/themes/catppuccin-mocha.mjs'),
|
||||
'dark-plus': () => import('shiki/dist/themes/dark-plus.mjs'),
|
||||
dracula: () => import('shiki/dist/themes/dracula.mjs'),
|
||||
'dracula-soft': () => import('shiki/dist/themes/dracula-soft.mjs'),
|
||||
'everforest-dark': () => import('shiki/dist/themes/everforest-dark.mjs'),
|
||||
'everforest-light': () => import('shiki/dist/themes/everforest-light.mjs'),
|
||||
'github-dark': () => import('shiki/dist/themes/github-dark.mjs'),
|
||||
'github-dark-default': () =>
|
||||
import('shiki/dist/themes/github-dark-default.mjs'),
|
||||
'github-dark-dimmed': () =>
|
||||
import('shiki/dist/themes/github-dark-dimmed.mjs'),
|
||||
'github-dark-high-contrast': () =>
|
||||
import('shiki/dist/themes/github-dark-high-contrast.mjs'),
|
||||
'github-light': () => import('shiki/dist/themes/github-light.mjs'),
|
||||
'github-light-default': () =>
|
||||
import('shiki/dist/themes/github-light-default.mjs'),
|
||||
'github-light-high-contrast': () =>
|
||||
import('shiki/dist/themes/github-light-high-contrast.mjs'),
|
||||
'gruvbox-dark-hard': () => import('shiki/dist/themes/gruvbox-dark-hard.mjs'),
|
||||
'gruvbox-dark-medium': () =>
|
||||
import('shiki/dist/themes/gruvbox-dark-medium.mjs'),
|
||||
'gruvbox-dark-soft': () => import('shiki/dist/themes/gruvbox-dark-soft.mjs'),
|
||||
'gruvbox-light-hard': () =>
|
||||
import('shiki/dist/themes/gruvbox-light-hard.mjs'),
|
||||
'gruvbox-light-medium': () =>
|
||||
import('shiki/dist/themes/gruvbox-light-medium.mjs'),
|
||||
'gruvbox-light-soft': () =>
|
||||
import('shiki/dist/themes/gruvbox-light-soft.mjs'),
|
||||
houston: () => import('shiki/dist/themes/houston.mjs'),
|
||||
'kanagawa-dragon': () => import('shiki/dist/themes/kanagawa-dragon.mjs'),
|
||||
'kanagawa-lotus': () => import('shiki/dist/themes/kanagawa-lotus.mjs'),
|
||||
'kanagawa-wave': () => import('shiki/dist/themes/kanagawa-wave.mjs'),
|
||||
laserwave: () => import('shiki/dist/themes/laserwave.mjs'),
|
||||
'light-plus': () => import('shiki/dist/themes/light-plus.mjs'),
|
||||
'material-theme': () => import('shiki/dist/themes/material-theme.mjs'),
|
||||
'material-theme-darker': () =>
|
||||
import('shiki/dist/themes/material-theme-darker.mjs'),
|
||||
'material-theme-lighter': () =>
|
||||
import('shiki/dist/themes/material-theme-lighter.mjs'),
|
||||
'material-theme-ocean': () =>
|
||||
import('shiki/dist/themes/material-theme-ocean.mjs'),
|
||||
'material-theme-palenight': () =>
|
||||
import('shiki/dist/themes/material-theme-palenight.mjs'),
|
||||
'min-dark': () => import('shiki/dist/themes/min-dark.mjs'),
|
||||
'min-light': () => import('shiki/dist/themes/min-light.mjs'),
|
||||
monokai: () => import('shiki/dist/themes/monokai.mjs'),
|
||||
'night-owl': () => import('shiki/dist/themes/night-owl.mjs'),
|
||||
nord: () => import('shiki/dist/themes/nord.mjs'),
|
||||
'one-dark-pro': () => import('shiki/dist/themes/one-dark-pro.mjs'),
|
||||
'one-light': () => import('shiki/dist/themes/one-light.mjs'),
|
||||
plastic: () => import('shiki/dist/themes/plastic.mjs'),
|
||||
poimandres: () => import('shiki/dist/themes/poimandres.mjs'),
|
||||
red: () => import('shiki/dist/themes/red.mjs'),
|
||||
'rose-pine': () => import('shiki/dist/themes/rose-pine.mjs'),
|
||||
'rose-pine-dawn': () => import('shiki/dist/themes/rose-pine-dawn.mjs'),
|
||||
'rose-pine-moon': () => import('shiki/dist/themes/rose-pine-moon.mjs'),
|
||||
'slack-dark': () => import('shiki/dist/themes/slack-dark.mjs'),
|
||||
'slack-ochin': () => import('shiki/dist/themes/slack-ochin.mjs'),
|
||||
'snazzy-light': () => import('shiki/dist/themes/snazzy-light.mjs'),
|
||||
'solarized-dark': () => import('shiki/dist/themes/solarized-dark.mjs'),
|
||||
'solarized-light': () => import('shiki/dist/themes/solarized-light.mjs'),
|
||||
'synthwave-84': () => import('shiki/dist/themes/synthwave-84.mjs'),
|
||||
'tokyo-night': () => import('shiki/dist/themes/tokyo-night.mjs'),
|
||||
vesper: () => import('shiki/dist/themes/vesper.mjs'),
|
||||
'vitesse-black': () => import('shiki/dist/themes/vitesse-black.mjs'),
|
||||
'vitesse-dark': () => import('shiki/dist/themes/vitesse-dark.mjs'),
|
||||
'vitesse-light': () => import('shiki/dist/themes/vitesse-light.mjs')
|
||||
};
|
||||
17
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/usePrism.ts
Normal file
17
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/usePrism.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import Prism from 'prismjs';
|
||||
|
||||
export function usePrism() {
|
||||
const highlight = (code: string, lang: string) => {
|
||||
try {
|
||||
const grammar = Prism.languages[lang];
|
||||
if (grammar) {
|
||||
return Prism.highlight(code, grammar, lang);
|
||||
}
|
||||
return code;
|
||||
}
|
||||
catch {
|
||||
return code;
|
||||
}
|
||||
};
|
||||
return highlight;
|
||||
}
|
||||
141
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/useRecord.ts
Normal file
141
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/useRecord.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
export interface UseRecordError {
|
||||
code: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface UseRecordProps {
|
||||
onError?: (err: SpeechRecognitionErrorEvent | UseRecordError) => void;
|
||||
onStart?: () => void;
|
||||
onEnd?: (v: string) => void;
|
||||
onResult?: (result: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Provides a hook for speech recognition, allowing voice input and handling various events such as start, end, result, and errors.
|
||||
* @description 提供语音识别的钩子，允许语音输入并处理开始、结束、结果及错误等各种事件。
|
||||
*
|
||||
* @interface UseRecordError
|
||||
* Represents the structure of an error object for useRecord.
|
||||
* 表示 useRecord 的错误对象结构。
|
||||
*
|
||||
* @property {number} code - The error code.
|
||||
* @property {number} code - 错误代码。
|
||||
*
|
||||
* @property {string} message - The error message.
|
||||
* @property {string} message - 错误信息。
|
||||
*
|
||||
* @interface UseRecordProps
|
||||
* Represents the configuration options for useRecord.
|
||||
* 表示 useRecord 的配置选项。
|
||||
*
|
||||
* @property {Function} [onError] - Callback function triggered when an error occurs.
|
||||
* @property {Function} [onError] - 当发生错误时触发的回调函数。
|
||||
*
|
||||
* @property {Function} [onStart] - Callback function triggered when voice recognition starts.
|
||||
* @property {Function} [onStart] - 当语音识别开始时触发的回调函数。
|
||||
*
|
||||
* @property {Function} [onEnd] - Callback function triggered when voice recognition ends, providing the final recognized text.
|
||||
* @property {Function} [onEnd] - 当语音识别结束时触发的回调函数，并提供最终识别的文本。
|
||||
*
|
||||
* @property {Function} [onResult] - Callback function triggered when intermediate recognition results are available.
|
||||
* @property {Function} [onResult] - 当有中间识别结果时触发的回调函数。
|
||||
*
|
||||
* @function useRecord
|
||||
* Initializes the speech recognition functionality and returns state and control functions.
|
||||
* 初始化语音识别功能并返回状态和控制函数。
|
||||
*
|
||||
* @param {UseRecordProps} [props] - Configuration options for the hook.
|
||||
* @param {UseRecordProps} [props] - 钩子的配置选项。
|
||||
*
|
||||
* @returns {object} - An object containing the state and methods for speech recognition.
|
||||
* @returns {object} - 包含语音识别状态和方法的对象。
|
||||
*
|
||||
* @property {Ref<boolean>} loading - Indicates whether speech recognition is currently active.
|
||||
* @property {Ref<boolean>} loading - 指示语音识别是否正在进行。
|
||||
*
|
||||
* @property {Function} start - Starts the speech recognition process.
|
||||
* @property {Function} start - 开始语音识别过程。
|
||||
*
|
||||
* @property {Function} stop - Stops the speech recognition process.
|
||||
* @property {Function} stop - 停止语音识别过程。
|
||||
*
|
||||
* @property {Ref<string>} value - Holds the recognized text.
|
||||
* @property {Ref<string>} value - 保存识别的文本。
|
||||
*
|
||||
* @example
|
||||
* const { loading, start, stop, value } = useRecord({
|
||||
* onStart: () => console.log('Recognition started'),
|
||||
* onEnd: (result) => console.log('Recognition ended with result:', result),
|
||||
* onResult: (result) => console.log('Intermediate result:', result),
|
||||
* onError: (error) => console.error('Error:', error),
|
||||
* });
|
||||
*
|
||||
* start(); // Start voice recognition
|
||||
* stop(); // Stop voice recognition
|
||||
* console.log(value.value); // Access the recognized text
|
||||
*/
|
||||
export function useRecord({
|
||||
onError,
|
||||
onStart,
|
||||
onEnd,
|
||||
onResult,
|
||||
}: UseRecordProps = {}) {
|
||||
const loading = ref<boolean>(false);
|
||||
const recognition = ref<null | SpeechRecognition>(null);
|
||||
const value = ref<string>('');
|
||||
|
||||
const start = () => {
|
||||
if ('webkitSpeechRecognition' in window) {
|
||||
recognition.value = new webkitSpeechRecognition();
|
||||
recognition.value!.continuous = true;
|
||||
recognition.value.interimResults = true;
|
||||
recognition.value.lang = 'zh-CN';
|
||||
recognition.value.onstart = () => {
|
||||
loading.value = true;
|
||||
value.value = '';
|
||||
onStart?.();
|
||||
};
|
||||
recognition.value.onend = () => {
|
||||
loading.value = false;
|
||||
onEnd?.(value.value);
|
||||
};
|
||||
recognition.value.onerror = (e) => {
|
||||
loading.value = false;
|
||||
onError?.(e);
|
||||
};
|
||||
recognition.value.onresult = (e) => {
|
||||
let results = '';
|
||||
for (let i = 0; i <= e.resultIndex; i++) {
|
||||
results += e.results[i][0].transcript;
|
||||
}
|
||||
value.value = results;
|
||||
onResult?.(results);
|
||||
};
|
||||
recognition.value.start();
|
||||
}
|
||||
else {
|
||||
onError?.({
|
||||
code: -1,
|
||||
message: 'The current browser does not support voice recognition',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const stop = () => {
|
||||
if (recognition.value) {
|
||||
recognition.value.stop();
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
stop();
|
||||
recognition.value = null;
|
||||
});
|
||||
|
||||
return {
|
||||
loading,
|
||||
start,
|
||||
stop,
|
||||
value,
|
||||
};
|
||||
}
|
||||
74
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/useSend.ts
Normal file
74
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/useSend.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
export interface UseSendProps {
|
||||
onAbort?: () => void;
|
||||
sendHandler?: (...args: any[]) => void;
|
||||
abortHandler?: () => void;
|
||||
finishHandler?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description A utility function for handling the request status of send operation management, supporting optional abort functionality, as well as Promise and Server-Sent Events (SSE).
|
||||
* @description 一个用于处理发送操作管理请求状态的实用函数，支持可选的中止功能，同时支持 Promise 和 SSE（服务端事件）。
|
||||
*
|
||||
* @typedef {object} WithAbortProps
|
||||
* @property {(signal: AbortSignal) => Promise<any>} promise - A function that returns a promise and accepts an `AbortSignal` for cancellation.
|
||||
* @property {(signal: AbortSignal) => Promise<any>} promise - 一个返回 Promise 的函数，接受一个用于取消的 `AbortSignal`。
|
||||
*
|
||||
* @typedef {object} WithSSEProps
|
||||
* @property {EventSource} eventSource - An `EventSource` instance for handling Server-Sent Events.
|
||||
* @property {EventSource} eventSource - 用于处理服务端事件的 `EventSource` 实例。
|
||||
*
|
||||
* @typedef {object} UseSendProps
|
||||
* @property {WithAbortProps | WithSSEProps} props - Either `WithAbortProps` or `WithSSEProps`, depending on the use case.
|
||||
* @property {WithAbortProps | WithSSEProps} props - 根据使用场景，传入 `WithAbortProps` 或 `WithSSEProps`。
|
||||
* @property {() => void} [onAbort] - Optional callback triggered when the operation is aborted.
|
||||
* @property {() => void} [onAbort] - 可选的回调函数，在操作被中止时触发。
|
||||
* @property {(...args: any[]) => void} [sendHandler] - Optional handler function invoked before sending starts.
|
||||
* @property {(...args: any[]) => void} [sendHandler] - 可选的处理函数，在发送开始前调用。
|
||||
*
|
||||
* @param {UseSendProps} props - Configuration options for the `useSend` function.
|
||||
* @param {UseSendProps} props - `useSend` 函数的配置选项。
|
||||
*
|
||||
* @returns {object} - Returns an object containing utility methods and state.
|
||||
* @returns {object} - 返回一个包含实用方法和状态的对象。
|
||||
*
|
||||
* @property {Ref<boolean>} loading - A reactive reference indicating whether a send operation is in progress.
|
||||
* @property {Ref<boolean>} loading - 一个响应式引用，指示是否正在执行发送操作。
|
||||
*
|
||||
* @property {Promise<any> | undefined} promise - The promise returned by the `promise` function, if provided.
|
||||
* @property {Promise<any> | undefined} promise - 如果提供了 `promise` 函数，则返回的 Promise。
|
||||
*
|
||||
* @property {() => void} abort - A function to abort the ongoing operation, either by aborting the promise or closing the EventSource.
|
||||
* @property {() => void} abort - 一个用于中止当前操作的函数，可以中止 Promise 或关闭 EventSource。
|
||||
*
|
||||
* @property {(...args: any[]) => void} send - A function to initiate the send operation, invoking the `sendHandler` if provided.
|
||||
* @property {(...args: any[]) => void} send - 一个用于启动发送操作的函数，如果提供了 `sendHandler` 则会调用。
|
||||
*/
|
||||
export function useSend(
|
||||
{ onAbort, sendHandler, abortHandler }: UseSendProps = {} as UseSendProps
|
||||
) {
|
||||
const loading = ref<boolean>(false);
|
||||
|
||||
const handleSend = (...args: any[]) => {
|
||||
if (loading.value)
|
||||
return;
|
||||
sendHandler?.(...args);
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
const handleAbort = () => {
|
||||
loading.value = false;
|
||||
abortHandler?.();
|
||||
onAbort?.();
|
||||
};
|
||||
|
||||
const handleFinish = () => {
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
loading,
|
||||
abort: handleAbort,
|
||||
send: handleSend,
|
||||
finish: handleFinish
|
||||
};
|
||||
}
|
||||
159
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/useXStream.ts
Normal file
159
Yi.Ai.Vue3/src/vue-element-plus-y/hooks/useXStream.ts
Normal file
@@ -0,0 +1,159 @@
|
||||
const DEFAULT_STREAM_SEPARATOR = '\n\n';
|
||||
const DEFAULT_PART_SEPARATOR = '\n';
|
||||
const DEFAULT_KV_SEPARATOR = ':';
|
||||
|
||||
// 工具函数
|
||||
const isValidString = (str: string) => (str ?? '').trim() !== '';
|
||||
|
||||
// TransformStream 实现
|
||||
function splitStream() {
|
||||
let buffer = '';
|
||||
|
||||
return new TransformStream<string, string>({
|
||||
transform(chunk, controller) {
|
||||
buffer += chunk;
|
||||
const parts = buffer.split(DEFAULT_STREAM_SEPARATOR);
|
||||
parts.slice(0, -1).forEach((part) => {
|
||||
if (isValidString(part))
|
||||
controller.enqueue(part);
|
||||
});
|
||||
buffer = parts[parts.length - 1];
|
||||
},
|
||||
flush(controller) {
|
||||
if (isValidString(buffer))
|
||||
controller.enqueue(buffer);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function splitPart() {
|
||||
return new TransformStream<string, SSEOutput>({
|
||||
transform(partChunk, controller) {
|
||||
const lines = partChunk.split(DEFAULT_PART_SEPARATOR);
|
||||
const sseEvent = lines.reduce<SSEOutput>((acc, line) => {
|
||||
const sepIndex = line.indexOf(DEFAULT_KV_SEPARATOR);
|
||||
if (sepIndex === -1)
|
||||
return acc;
|
||||
|
||||
const key = line.slice(0, sepIndex);
|
||||
if (!isValidString(key))
|
||||
return acc;
|
||||
|
||||
const value = line.slice(sepIndex + 1);
|
||||
return { ...acc, [key]: value };
|
||||
}, {});
|
||||
|
||||
if (Object.keys(sseEvent).length > 0)
|
||||
controller.enqueue(sseEvent);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 类型定义
|
||||
export type SSEFields = 'data' | 'event' | 'id' | 'retry';
|
||||
export type SSEOutput = Partial<Record<SSEFields, any>>;
|
||||
|
||||
export interface XStreamOptions<Output = SSEOutput> {
|
||||
readableStream: ReadableStream<Uint8Array>;
|
||||
transformStream?: TransformStream<string, Output>;
|
||||
}
|
||||
|
||||
// 可读流类型，支持异步迭代和中断
|
||||
type XReadableStream<R = SSEOutput> = ReadableStream<R> & {
|
||||
[Symbol.asyncIterator]: () => AsyncGenerator<R>;
|
||||
reader?: ReadableStreamDefaultReader<R>;
|
||||
};
|
||||
|
||||
// 核心流处理函数（支持中断）
|
||||
function XStream<Output = SSEOutput>(
|
||||
options: XStreamOptions<Output>,
|
||||
signal?: AbortSignal,
|
||||
): XReadableStream<Output> {
|
||||
const { readableStream, transformStream } = options;
|
||||
if (!(readableStream instanceof ReadableStream)) {
|
||||
throw new TypeError('options.readableStream 必须是 ReadableStream 的实例。');
|
||||
}
|
||||
|
||||
const decoderStream = new TextDecoderStream();
|
||||
const processedStream = transformStream
|
||||
? readableStream
|
||||
.pipeThrough(decoderStream)
|
||||
.pipeThrough(transformStream)
|
||||
: readableStream
|
||||
.pipeThrough(decoderStream)
|
||||
.pipeThrough(splitStream())
|
||||
.pipeThrough(splitPart()) as XReadableStream<Output>;
|
||||
|
||||
// 为流添加异步迭代器并处理中断信号
|
||||
(processedStream as XReadableStream<Output>)[Symbol.asyncIterator] = async function* () {
|
||||
const reader = this.getReader();
|
||||
(this as XReadableStream<Output>).reader = reader; // 保存读取器引用
|
||||
try {
|
||||
while (true) {
|
||||
if (signal?.aborted) {
|
||||
await reader.cancel(); // 主动取消 reader
|
||||
break;
|
||||
}
|
||||
const { done, value } = await reader.read();
|
||||
if (done)
|
||||
break;
|
||||
if (value)
|
||||
yield value;
|
||||
}
|
||||
}
|
||||
finally {
|
||||
reader.releaseLock(); // 释放锁
|
||||
}
|
||||
};
|
||||
|
||||
return processedStream as XReadableStream<Output>;
|
||||
}
|
||||
|
||||
// Vue3 Hooks 实现
|
||||
export function useXStream() {
|
||||
const data = ref<SSEOutput[]>([]);
|
||||
const error = ref<Error | null>(null);
|
||||
const isLoading = ref<boolean>(false);
|
||||
const abortController = shallowRef<AbortController | null>(null);
|
||||
const currentStream = shallowRef<XReadableStream<SSEOutput> | null>(null);
|
||||
|
||||
// 启动流式请求
|
||||
const startStream = async (options: XStreamOptions<SSEOutput>) => {
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
data.value = [];
|
||||
abortController.value = new AbortController();
|
||||
currentStream.value = XStream(options, abortController.value.signal);
|
||||
|
||||
try {
|
||||
for await (const item of currentStream.value!) {
|
||||
data.value.push(item);
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
if (err instanceof Error) {
|
||||
error.value = err;
|
||||
}
|
||||
}
|
||||
finally {
|
||||
isLoading.value = false;
|
||||
currentStream.value = null; // 释放流引用
|
||||
abortController.value = null; // 释放控制器
|
||||
}
|
||||
};
|
||||
|
||||
// 中断流式请求（强制关闭流）
|
||||
const cancel = () => {
|
||||
if (abortController.value) {
|
||||
abortController.value.abort();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
startStream,
|
||||
cancel, // 新增中断方法
|
||||
data,
|
||||
error,
|
||||
isLoading,
|
||||
};
|
||||
}
|
||||
43
Yi.Ai.Vue3/src/vue-element-plus-y/index.ts
Normal file
43
Yi.Ai.Vue3/src/vue-element-plus-y/index.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import type { App, Plugin } from 'vue';
|
||||
import Attachments from './components/Attachments/index.vue';
|
||||
import Bubble from './components/Bubble/index.vue';
|
||||
import BubbleList from './components/BubbleList/index.vue';
|
||||
import ConfigProvider from './components/ConfigProvider/index.vue';
|
||||
import Conversations from './components/Conversations/index.vue';
|
||||
import EditorSender from './components/EditorSender/index.vue';
|
||||
import FilesCard from './components/FilesCard/index.vue';
|
||||
import MentionSender from './components/MentionSender/index.vue';
|
||||
import Prompts from './components/Prompts/index.vue';
|
||||
import Sender from './components/Sender/index.vue';
|
||||
import Thinking from './components/Thinking/index.vue';
|
||||
import ThoughtChain from './components/ThoughtChain/index.vue';
|
||||
import Typewriter from './components/Typewriter/index.vue';
|
||||
import Welcome from './components/Welcome/index.vue';
|
||||
import XMarkdown from './components/XMarkdown/index.vue';
|
||||
import XMarkdownAsync from './components/XMarkdownAsync/index.vue';
|
||||
|
||||
export * from './components';
|
||||
export * from './hooks';
|
||||
|
||||
const ElementPlusX: Plugin = {
|
||||
install(app: App) {
|
||||
app.component('Attachments', Attachments);
|
||||
app.component('Bubble', Bubble);
|
||||
app.component('BubbleList', BubbleList);
|
||||
app.component('ConfigProvider', ConfigProvider);
|
||||
app.component('Conversations', Conversations);
|
||||
app.component('EditorSender', EditorSender);
|
||||
app.component('FilesCard', FilesCard);
|
||||
app.component('MentionSender', MentionSender);
|
||||
app.component('Prompts', Prompts);
|
||||
app.component('Sender', Sender);
|
||||
app.component('Thinking', Thinking);
|
||||
app.component('ThoughtChain', ThoughtChain);
|
||||
app.component('Typewriter', Typewriter);
|
||||
app.component('Welcome', Welcome);
|
||||
app.component('XMarkdown', XMarkdown);
|
||||
app.component('XMarkdownAsync', XMarkdownAsync);
|
||||
}
|
||||
};
|
||||
|
||||
export default ElementPlusX;
|
||||
407
Yi.Ai.Vue3/src/vue-element-plus-y/utils/index.ts
Normal file
407
Yi.Ai.Vue3/src/vue-element-plus-y/utils/index.ts
Normal file
@@ -0,0 +1,407 @@
|
||||
import type { FilesType } from '../components/FilesCard/types.d.ts';
|
||||
import { prefix } from '../components/Typewriter/config/index.ts';
|
||||
|
||||
/* 公共 相关 开始 */
|
||||
/* 公共 相关 结束 */
|
||||
|
||||
/* FileCard 组件相关 开始 */
|
||||
// 更据文件后缀名获取文件类型
|
||||
export function getFileType(fileExtension: string): {
|
||||
lowerCase: FilesType;
|
||||
upperCase: string;
|
||||
} {
|
||||
// 去除后缀名开头的点，并转换为小写
|
||||
const cleanExtension = fileExtension.replace('.', '').toLowerCase();
|
||||
if (!cleanExtension) {
|
||||
return { lowerCase: 'unknown', upperCase: 'Unknown' };
|
||||
}
|
||||
const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'];
|
||||
const wordExtensions = ['doc', 'docx'];
|
||||
const excelExtensions = ['xls', 'xlsx'];
|
||||
const pptExtensions = ['ppt', 'pptx'];
|
||||
const audioExtensions = ['mp3', 'wav', 'ogg', 'flac'];
|
||||
const videoExtensions = ['mp4', 'avi', 'mov', 'mkv'];
|
||||
const codeExtensions = [
|
||||
'js',
|
||||
'ts',
|
||||
'html',
|
||||
'css',
|
||||
'py',
|
||||
'java',
|
||||
'c',
|
||||
'cpp',
|
||||
'json',
|
||||
'php'
|
||||
];
|
||||
const databaseExtensions = ['sql', 'db', 'sqlite'];
|
||||
const zipExtensions = ['zip', 'rar', '7z'];
|
||||
const markExtensions = ['md', 'mdx'];
|
||||
|
||||
if (imageExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'image', upperCase: 'Image' };
|
||||
}
|
||||
if (wordExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'word', upperCase: 'Word' };
|
||||
}
|
||||
if (excelExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'excel', upperCase: 'Excel' };
|
||||
}
|
||||
if (pptExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'ppt', upperCase: 'Ppt' };
|
||||
}
|
||||
if (cleanExtension === 'pdf') {
|
||||
return { lowerCase: 'pdf', upperCase: 'Pdf' };
|
||||
}
|
||||
if (cleanExtension === 'txt') {
|
||||
return { lowerCase: 'txt', upperCase: 'Txt' };
|
||||
}
|
||||
if (markExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'mark', upperCase: 'Markdown' };
|
||||
}
|
||||
if (audioExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'audio', upperCase: 'Audio' };
|
||||
}
|
||||
if (videoExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'video', upperCase: 'Video' };
|
||||
}
|
||||
if (codeExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'code', upperCase: 'Code' };
|
||||
}
|
||||
if (databaseExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'database', upperCase: 'Database' };
|
||||
}
|
||||
if (cleanExtension === 'lnk') {
|
||||
return { lowerCase: 'link', upperCase: 'Link' };
|
||||
}
|
||||
if (zipExtensions.includes(cleanExtension)) {
|
||||
return { lowerCase: 'zip', upperCase: 'Zip' };
|
||||
}
|
||||
if (
|
||||
cleanExtension === 'obj' ||
|
||||
cleanExtension === 'fbx' ||
|
||||
cleanExtension === 'glb'
|
||||
) {
|
||||
return { lowerCase: 'three', upperCase: '3D' };
|
||||
}
|
||||
return { lowerCase: 'file', upperCase: 'File' };
|
||||
}
|
||||
|
||||
// 获取文件大小
|
||||
export function getSize(size: number) {
|
||||
let retSize = size;
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
|
||||
let unitIndex = 0;
|
||||
|
||||
while (retSize >= 1024 && unitIndex < units.length - 1) {
|
||||
retSize /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${retSize.toFixed(0)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
// 通过文件流，生成图片预览
|
||||
// Follow code is copy from `antd/components/upload/utils.ts`:
|
||||
export function isImageFileType(type: string): boolean {
|
||||
return type.indexOf('image/') === 0;
|
||||
}
|
||||
const MEASURE_SIZE = 200;
|
||||
export function previewImage(file: File | Blob): Promise<string> {
|
||||
return new Promise<string>(resolve => {
|
||||
if (!file || !file.type || !isImageFileType(file.type)) {
|
||||
resolve('');
|
||||
return;
|
||||
}
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const { width, height } = img;
|
||||
|
||||
const ratio = width / height;
|
||||
const MEASURE_SIZE_WIDTH =
|
||||
ratio > 1 ? MEASURE_SIZE : MEASURE_SIZE * ratio;
|
||||
const MEASURE_SIZE_HEIGHT =
|
||||
ratio > 1 ? MEASURE_SIZE / ratio : MEASURE_SIZE;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = MEASURE_SIZE_WIDTH;
|
||||
canvas.height = MEASURE_SIZE_HEIGHT;
|
||||
canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE_WIDTH}px; height: ${MEASURE_SIZE_HEIGHT}px; z-index: 9999; display: none;`;
|
||||
document.body.appendChild<HTMLCanvasElement>(canvas);
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
ctx!.drawImage(img, 0, 0, MEASURE_SIZE_WIDTH, MEASURE_SIZE_HEIGHT);
|
||||
const dataURL = canvas.toDataURL();
|
||||
document.body.removeChild(canvas);
|
||||
window.URL.revokeObjectURL(img.src);
|
||||
resolve(dataURL);
|
||||
};
|
||||
img.crossOrigin = 'anonymous';
|
||||
if (file.type.startsWith('image/svg+xml')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
if (reader.result && typeof reader.result === 'string') {
|
||||
img.src = reader.result;
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
else if (file.type.startsWith('image/gif')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
if (reader.result) {
|
||||
resolve(reader.result as string);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
else {
|
||||
img.src = window.URL.createObjectURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* FileCard 组件相关 结束 */
|
||||
|
||||
/* Typewrite 组件相关 开始 */
|
||||
/**
|
||||
* 对代码块添加行号
|
||||
*
|
||||
* @param code 代码html内容
|
||||
* @returns string
|
||||
*/
|
||||
export function generateCodeRowNumber(code: string, source: string) {
|
||||
if (!code) {
|
||||
return code;
|
||||
}
|
||||
|
||||
const list = source.split('\n');
|
||||
// 行号html代码拼接列表
|
||||
const rowNumberList = ['<span rn-wrapper aria-hidden="true">'];
|
||||
list.forEach(() => {
|
||||
rowNumberList.push('<span></span>');
|
||||
});
|
||||
rowNumberList.push('</span>');
|
||||
return `<span class="${prefix}-code-block">${code}</span>${rowNumberList.join('')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 缩放、拖拽mermaid模块
|
||||
*/
|
||||
export const zoomMermaid = (() => {
|
||||
const addEvent = (container: HTMLElement | null) => {
|
||||
if (!container) {
|
||||
return () => {};
|
||||
}
|
||||
const content = container.firstChild as HTMLElement;
|
||||
|
||||
let scale = 1;
|
||||
let posX = 0;
|
||||
let posY = 0;
|
||||
let isDragging = false;
|
||||
let startX: number, startY: number;
|
||||
let initialDistance: number;
|
||||
let initialScale = 1;
|
||||
|
||||
const updateTransform = () => {
|
||||
content.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
|
||||
};
|
||||
|
||||
// 处理拖拽和单指移动
|
||||
const onTouchStart = (event: TouchEvent) => {
|
||||
if (event.touches.length === 1) {
|
||||
isDragging = true;
|
||||
startX = event.touches[0].clientX - posX;
|
||||
startY = event.touches[0].clientY - posY;
|
||||
}
|
||||
else if (event.touches.length === 2) {
|
||||
initialDistance = Math.hypot(
|
||||
event.touches[0].clientX - event.touches[1].clientX,
|
||||
event.touches[0].clientY - event.touches[1].clientY
|
||||
);
|
||||
initialScale = scale;
|
||||
}
|
||||
};
|
||||
|
||||
const onTouchMove = (event: TouchEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (isDragging && event.touches.length === 1) {
|
||||
posX = event.touches[0].clientX - startX;
|
||||
posY = event.touches[0].clientY - startY;
|
||||
updateTransform();
|
||||
}
|
||||
else if (event.touches.length === 2) {
|
||||
const newDistance = Math.hypot(
|
||||
event.touches[0].clientX - event.touches[1].clientX,
|
||||
event.touches[0].clientY - event.touches[1].clientY
|
||||
);
|
||||
const scaleChange = newDistance / initialDistance;
|
||||
const previousScale = scale;
|
||||
scale = initialScale * (1 + (scaleChange - 1)); // 调整缩放速度
|
||||
|
||||
// 计算双指中心点
|
||||
const centerX =
|
||||
(event.touches[0].clientX + event.touches[1].clientX) / 2;
|
||||
const centerY =
|
||||
(event.touches[0].clientY + event.touches[1].clientY) / 2;
|
||||
|
||||
// 获取内容区域的边界
|
||||
const rect = content.getBoundingClientRect();
|
||||
// 计算相对位置
|
||||
const relativeX = (centerX - rect.left) / previousScale;
|
||||
const relativeY = (centerY - rect.top) / previousScale;
|
||||
|
||||
// 调整 posX 和 posY 使得缩放发生在双指中心
|
||||
posX -= relativeX * (scale - previousScale);
|
||||
posY -= relativeY * (scale - previousScale);
|
||||
|
||||
updateTransform();
|
||||
}
|
||||
};
|
||||
|
||||
const onTouchEnd = () => {
|
||||
isDragging = false;
|
||||
};
|
||||
|
||||
// PC 端缩放功能
|
||||
const onWheel = (event: WheelEvent) => {
|
||||
event.preventDefault();
|
||||
const scaleAmount = 0.02; // 缩放速度
|
||||
const previousScale = scale;
|
||||
|
||||
if (event.deltaY < 0) {
|
||||
scale += scaleAmount;
|
||||
}
|
||||
else {
|
||||
scale = Math.max(0.1, scale - scaleAmount);
|
||||
}
|
||||
|
||||
// 计算鼠标相对于内容的位置
|
||||
const rect = content.getBoundingClientRect();
|
||||
const mouseX = event.clientX - rect.left;
|
||||
const mouseY = event.clientY - rect.top;
|
||||
|
||||
// 调整 posX 和 posY，以使缩放中心为鼠标位置
|
||||
posX -= (mouseX / previousScale) * (scale - previousScale);
|
||||
posY -= (mouseY / previousScale) * (scale - previousScale);
|
||||
|
||||
updateTransform();
|
||||
};
|
||||
|
||||
// PC 端拖拽功能
|
||||
const onMouseDown = (event: MouseEvent) => {
|
||||
isDragging = true;
|
||||
startX = event.clientX - posX;
|
||||
startY = event.clientY - posY;
|
||||
};
|
||||
|
||||
const onMouseMove = (event: MouseEvent) => {
|
||||
if (isDragging) {
|
||||
posX = event.clientX - startX;
|
||||
posY = event.clientY - startY;
|
||||
updateTransform();
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseUp = () => {
|
||||
isDragging = false;
|
||||
};
|
||||
|
||||
const onMouseLeave = () => {
|
||||
isDragging = false;
|
||||
};
|
||||
|
||||
container.addEventListener('touchstart', onTouchStart, { passive: false });
|
||||
container.addEventListener('touchmove', onTouchMove, { passive: false });
|
||||
container.addEventListener('touchend', onTouchEnd);
|
||||
container.addEventListener('wheel', onWheel, { passive: false });
|
||||
container.addEventListener('mousedown', onMouseDown);
|
||||
container.addEventListener('mousemove', onMouseMove);
|
||||
container.addEventListener('mouseup', onMouseUp);
|
||||
container.addEventListener('mouseleave', onMouseLeave);
|
||||
|
||||
// 返回一个函数用于注销所有事件
|
||||
return () => {
|
||||
container.removeEventListener('touchstart', onTouchStart);
|
||||
container.removeEventListener('touchmove', onTouchMove);
|
||||
container.removeEventListener('touchend', onTouchEnd);
|
||||
container.removeEventListener('wheel', onWheel);
|
||||
container.removeEventListener('mousedown', onMouseDown);
|
||||
container.removeEventListener('mousemove', onMouseMove);
|
||||
container.removeEventListener('mouseup', onMouseUp);
|
||||
container.removeEventListener('mouseleave', onMouseLeave);
|
||||
};
|
||||
};
|
||||
|
||||
const handler = (
|
||||
containers: NodeListOf<HTMLElement>,
|
||||
options: {
|
||||
// customIcon: CustomIconCustomIcon
|
||||
customIcon: any;
|
||||
}
|
||||
) => {
|
||||
console.log('handler', containers);
|
||||
console.log('options', options);
|
||||
console.log('addEvent', addEvent);
|
||||
|
||||
// const removeEventsMap = new Map<
|
||||
// HTMLElement,
|
||||
// { removeEvent?: () => void, removeClick?: () => void }
|
||||
// >()
|
||||
|
||||
// console.log('containers', containers)
|
||||
|
||||
// containers?.forEach((mm) => {
|
||||
// let actionDiv = mm.querySelector(`.${prefix}-mermaid-action`)
|
||||
|
||||
// if (!actionDiv) {
|
||||
// mm.insertAdjacentHTML(
|
||||
// 'beforeend',
|
||||
// `<div class="${prefix}-mermaid-action">${StrIcon('pin-off', options.customIcon)}</div>`,
|
||||
// )
|
||||
|
||||
// actionDiv = mm.querySelector(`.${prefix}-mermaid-action`)!
|
||||
// }
|
||||
|
||||
// const onClick = () => {
|
||||
// const current = removeEventsMap.get(mm)
|
||||
|
||||
// if (current?.removeEvent) {
|
||||
// // 如果有事件，则注销并移除
|
||||
// current.removeEvent()
|
||||
// mm.removeAttribute('data-grab')
|
||||
// removeEventsMap.set(mm, { removeClick: current.removeClick })
|
||||
// actionDiv.innerHTML = StrIcon('pin-off', options.customIcon) // 取消固定
|
||||
// }
|
||||
// else {
|
||||
// // 添加事件并记录
|
||||
// const removeEvent = addEvent(mm)
|
||||
// mm.setAttribute('data-grab', '')
|
||||
// removeEventsMap.set(mm, { removeEvent, removeClick: current?.removeClick })
|
||||
// actionDiv.innerHTML = StrIcon('pin', options.customIcon) // 固定
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 绑定点击事件
|
||||
// actionDiv.addEventListener('click', onClick)
|
||||
|
||||
// // 将 `click` 事件也放入 Map 中，以便未来注销
|
||||
// removeEventsMap.set(mm, {
|
||||
// removeClick: () => actionDiv.removeEventListener('click', onClick),
|
||||
// })
|
||||
// })
|
||||
|
||||
// // 返回一个函数，用于注销所有事件（包括 click 和 addEvent）
|
||||
// return () => {
|
||||
// removeEventsMap.forEach(({ removeEvent, removeClick }) => {
|
||||
// removeEvent?.()
|
||||
// removeClick?.()
|
||||
// })
|
||||
// removeEventsMap.clear()
|
||||
// }
|
||||
};
|
||||
|
||||
return handler;
|
||||
})();
|
||||
/* Typewrite 组件相关 结束 */
|
||||
25
Yi.Ai.Vue3/src/vue-element-plus-y/utils/useFileNameParser.ts
Normal file
25
Yi.Ai.Vue3/src/vue-element-plus-y/utils/useFileNameParser.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import type { Ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
|
||||
export default function useFileNameParser(name: Ref<string | undefined>) {
|
||||
const namePrefix = computed(() => {
|
||||
const nameStr = name.value || '';
|
||||
const lastDotIndex = nameStr.lastIndexOf('.');
|
||||
return lastDotIndex === -1 ? nameStr : nameStr.slice(0, lastDotIndex);
|
||||
});
|
||||
|
||||
const nameSuffix = computed(() => {
|
||||
const nameStr = name.value || '';
|
||||
const lastDotIndex = nameStr.lastIndexOf('.');
|
||||
if (lastDotIndex === -1 && nameStr.length - lastDotIndex > 10) {
|
||||
// 文件名长度超过10个字符 显示.file
|
||||
return '.file';
|
||||
}
|
||||
return lastDotIndex === -1 ? '' : nameStr.slice(lastDotIndex);
|
||||
});
|
||||
|
||||
return {
|
||||
namePrefix,
|
||||
nameSuffix
|
||||
};
|
||||
}
|
||||
29
Yi.Ai.Vue3/src/vue-element-plus-y/utils/useScrollDetector.ts
Normal file
29
Yi.Ai.Vue3/src/vue-element-plus-y/utils/useScrollDetector.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
// useScrollDetector.ts
|
||||
import type { Ref } from 'vue';
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
|
||||
export default (elementRef: Ref<HTMLElement | null | undefined>) => {
|
||||
const hasVertical = ref(false);
|
||||
const hasHorizontal = ref(false);
|
||||
|
||||
const check = () => {
|
||||
const el = elementRef.value;
|
||||
if (!el)
|
||||
return;
|
||||
hasVertical.value = el.scrollHeight > el.clientHeight;
|
||||
hasHorizontal.value = el.scrollWidth > el.clientWidth;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
check();
|
||||
const observer = new ResizeObserver(check);
|
||||
observer.observe(elementRef.value!);
|
||||
onBeforeUnmount(() => observer.disconnect());
|
||||
});
|
||||
|
||||
return {
|
||||
hasVertical, // 是否有纵向滚动条
|
||||
hasHorizontal, // 是否有横向滚动条
|
||||
check, // 检查滚动条状态
|
||||
};
|
||||
};
|
||||
1
Yi.Ai.Vue3/src/vue-element-plus-y/vite-env.d.ts
vendored
Normal file
1
Yi.Ai.Vue3/src/vue-element-plus-y/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
6
Yi.Ai.Vue3/types/components.d.ts
vendored
6
Yi.Ai.Vue3/types/components.d.ts
vendored
@@ -11,6 +11,7 @@ declare module 'vue' {
|
||||
AccountPassword: typeof import('./../src/components/LoginDialog/components/FormLogin/AccountPassword.vue')['default']
|
||||
APIKeyManagement: typeof import('./../src/components/userPersonalCenter/components/APIKeyManagement.vue')['default']
|
||||
CardFlipActivity: typeof import('./../src/components/userPersonalCenter/components/CardFlipActivity.vue')['default']
|
||||
ChatMessageList: typeof import('./../src/components/ChatMessageList/index.vue')['default']
|
||||
DailyTask: typeof import('./../src/components/userPersonalCenter/components/DailyTask.vue')['default']
|
||||
DeepThinking: typeof import('./../src/components/DeepThinking/index.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
@@ -24,8 +25,11 @@ declare module 'vue' {
|
||||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
@@ -41,6 +45,8 @@ declare module 'vue' {
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
ElSegmented: typeof import('element-plus/es')['ElSegmented']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
|
||||
@@ -15,6 +15,7 @@ export default defineConfig((cnf) => {
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
"@components": path.resolve(__dirname, "./src/vue-element-plus-y/components"),
|
||||
},
|
||||
},
|
||||
css: {
|
||||
|
||||
Reference in New Issue
Block a user