exploria-ui-mcp-server 2.1.4 → 2.2.6

package/public/components/ai/typing_effect/Using1.vue

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-/**
- * 适用于一次性返回所有内容的场景
- */
-import { onMounted, useTemplateRef, ref, nextTick } from 'vue';
-import { marked } from 'marked';
-
-// 扩展HTMLDivElement类型，添加blinkAnimation属性
-declare global {
-    interface HTMLDivElement {
-        blinkAnimation?: Animation;
-    }
-}
-
-const usingRef = useTemplateRef<HTMLDivElement>('using');
-import xss from 'xss';
-import mdStr from '../../../../../../../README.md?raw';
-
-const getLastNode = (node: ChildNode): ChildNode | null => {
-    if (node.nodeType === Node.TEXT_NODE) {
-        return node;
-    }
-    for (let i = node.childNodes.length; i >= 0; i--) {
-        const childNode = node.childNodes[i];
-        if (childNode) {
-            const lastNode = getLastNode(childNode);
-            if (lastNode) {
-                return lastNode;
-            }
-        }
-    }
-    return null;
-};
-
-// 光标元素引用
-let cursorElement: HTMLDivElement | null = null;
-
-// 创建光标元素
-const createCursor = () => {
-    if (cursorElement) return;
-
-    cursorElement = document.createElement('div');
-    cursorElement.className = 'typing-cursor';
-    cursorElement.textContent = '|';
-
-    // 设置样式
-    Object.assign(cursorElement.style, {
-        position: 'fixed',
-        color: '#000',
-        fontSize: '20px',
-        fontWeight: 'normal',
-        lineHeight: 'normal',
-        pointerEvents: 'none',
-        zIndex: '9999',
-        opacity: '1',
-    });
-
-    // 使用Web Animations API的animate()方法创建闪烁动画
-    cursorElement!.blinkAnimation = cursorElement!.animate(
-        [{ opacity: '1' }, { opacity: '0' }, { opacity: '1' }],
-        {
-            duration: 800,
-            iterations: Infinity,
-            easing: 'ease-in-out',
-        }
-    );
-
-    // 添加到body
-    document.body.appendChild(cursorElement);
-};
-
-// 更新光标位置
-const updateCursorPosition = () => {
-    if (!cursorElement) return;
-
-    const htmlContainer = usingRef.value!.querySelector(
-        '.html-container'
-    ) as HTMLDivElement;
-
-    // 这个节点的 textContent 的末尾可能包含 |
-    const lastNode = getLastNode(htmlContainer);
-    if (lastNode && lastNode.toString() != '') {
-        const range = document.createRange();
-
-        // 框选 '|'
-        if (lastNode.textContent?.length === 1) {
-            range.setStart(lastNode, 0);
-            range.setEnd(lastNode, 0);
-        } else {
-            const lastCharIndex = lastNode.toString().length - 1;
-            range.setStart(lastNode, lastCharIndex - 1);
-            range.setEnd(lastNode, lastCharIndex);
-        }
-
-        // 获取文本节点的位置
-        const rect = range.getBoundingClientRect();
-
-        // 更新光标位置
-        cursorElement.style.left = `${rect.left}px`;
-        cursorElement.style.top = `${rect.top}px`;
-
-        // 删除 textContent 末尾的 |
-        if (lastNode.textContent?.length === 1) {
-            lastNode.textContent = '';
-        } else {
-            const lastCharIndex = lastNode.toString().length - 1;
-            lastNode.textContent = lastNode
-                .toString()
-                .substring(0, lastCharIndex);
-        }
-    }
-};
-
-// 移除光标元素
-const removeCursor = () => {
-    if (cursorElement && cursorElement.parentNode) {
-        // 停止并取消闪烁动画
-        if (cursorElement.blinkAnimation) {
-            cursorElement.blinkAnimation.cancel();
-        }
-        cursorElement.parentNode.removeChild(cursorElement);
-        cursorElement = null;
-    }
-};
-
-onMounted(() => {
-    speak(mdStr);
-});
-
-const scrollToBottom = () => {
-    const htmlContainer = usingRef.value;
-    if (htmlContainer) {
-        htmlContainer.scrollTop = htmlContainer.scrollHeight;
-    }
-};
-
-const htmlStr = ref('');
-let timer: ReturnType<typeof setTimeout>;
-const speak = (mdStr: string) => {
-    let wordIndex = 0;
-
-    // 创建光标
-    createCursor();
-
-    const nextWord = () => {
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-            wordIndex += Math.ceil(Math.random() * 10); // 这个决定了每一小段的长度
-            htmlStr.value = mdToHtml(
-                // + '|' 是为了做光标位置计算
-                mdStr.slice(0, wordIndex) + '|'
-            );
-
-            // 等 htmlStr 在页面上渲染出来
-            nextTick(() => {
-                scrollToBottom();
-                updateCursorPosition();
-
-                if (wordIndex >= mdStr.length) {
-                    // 文本输出完成，移除光标
-                    removeCursor();
-                    return;
-                }
-                nextWord();
-            });
-        }, Math.random() * 300);
-    };
-    nextWord();
-};
-
-const mdToHtml = (md: string) => marked.parse(md, { async: false });
-</script>
-
-<template>
-    <div class="using" ref="using">
-        <!-- 滚动条是属于 using 的 -->
-        <div class="html-container" v-html="xss(htmlStr)" />
-    </div>
-</template>
-
-<style scoped lang="scss">
-.using {
-    position: relative;
-    height: 400px;
-    overflow-y: auto;
-    box-sizing: border-box;
-    white-space: pre-wrap;
-}
-</style>

package/public/components/ai/typing_effect/Using2.vue

@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
-import { marked } from 'marked';
-import txt from '../../../../../../../README.md?raw';
-import xss from 'xss';
-
-// 扩展HTMLDivElement类型，添加blinkAnimation属性
-declare global {
-    interface HTMLDivElement {
-        blinkAnimation?: Animation;
-    }
-}
-
-marked.setOptions({
-    breaks: true, // 识别换行符
-    gfm: true,
-    pedantic: false,
-});
-
-const using = ref<HTMLDivElement | null>(null);
-const mdStr = txt as string;
-onMounted(() => {
-    speak(mdStr);
-});
-
-// 获取最后一个文本节点
-const getLastNode = (node: ChildNode): ChildNode | null => {
-    if (node.nodeType === Node.TEXT_NODE) {
-        return node;
-    }
-    for (let i = node.childNodes.length; i >= 0; i--) {
-        const childNode = node.childNodes[i];
-        if (childNode) {
-            const lastNode = getLastNode(childNode);
-            if (lastNode) {
-                return lastNode;
-            }
-        }
-    }
-    return null;
-};
-
-// 光标元素引用
-let cursorElement: HTMLDivElement | null = null;
-
-// 创建光标元素
-const createCursor = () => {
-    if (cursorElement) return;
-
-    cursorElement = document.createElement('div');
-    cursorElement.className = 'typing-cursor';
-    cursorElement.textContent = '|';
-
-    // 设置样式
-    Object.assign(cursorElement.style, {
-        position: 'fixed',
-        color: '#000',
-        fontSize: '20px',
-        fontWeight: 'normal',
-        lineHeight: 'normal',
-        pointerEvents: 'none',
-        zIndex: '9999',
-        opacity: '1',
-    });
-
-    // 使用Web Animations API的animate()方法创建闪烁动画
-    cursorElement!.blinkAnimation = cursorElement!.animate(
-        [{ opacity: '1' }, { opacity: '0' }, { opacity: '1' }],
-        {
-            duration: 800,
-            iterations: Infinity,
-            easing: 'ease-in-out',
-        }
-    );
-
-    // 添加到body
-    document.body.appendChild(cursorElement);
-};
-
-// 更新光标位置
-const updateCursorPosition = () => {
-    if (!cursorElement || !using.value) return;
-
-    const htmlContainer = using.value;
-
-    // 为了准确计算光标位置，临时添加一个标记
-    htmlContainer.innerHTML += '<span id="cursor-marker">|</span>';
-
-    const marker = htmlContainer.querySelector('#cursor-marker');
-    if (marker) {
-        const rect = marker.getBoundingClientRect();
-
-        // 更新光标位置
-        cursorElement.style.left = `${rect.left}px`;
-        cursorElement.style.top = `${rect.top}px`;
-
-        // 移除标记
-        marker.remove();
-    }
-};
-
-// 移除光标元素
-const removeCursor = () => {
-    if (cursorElement && cursorElement.parentNode) {
-        // 停止并取消闪烁动画
-        if (cursorElement.blinkAnimation) {
-            cursorElement.blinkAnimation.cancel();
-        }
-        cursorElement.parentNode.removeChild(cursorElement);
-        cursorElement = null;
-    }
-};
-
-// 滚动到底部
-const scrollToBottom = () => {
-    if (using.value) {
-        using.value.scrollTop = using.value.scrollHeight;
-    }
-};
-
-let timer: ReturnType<typeof setTimeout>;
-const htmlStr = ref('');
-const speak = (md: string) => {
-    const lines = md.split('\n');
-
-    // 创建光标
-    createCursor();
-
-    let index = 0;
-    const nextWord = () => {
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-            index++;
-            const str = lines.slice(0, index).join('');
-            htmlStr.value = mdToHtml(str);
-
-            // 等 htmlStr 在页面上渲染出来
-            nextTick(() => {
-                scrollToBottom();
-                updateCursorPosition();
-
-                if (index === lines.length) {
-                    // 文本输出完成，移除光标
-                    removeCursor();
-                    return;
-                }
-                nextWord();
-            });
-        }, Math.random() * 100);
-    };
-    nextWord();
-};
-
-const mdToHtml = (md: string) => marked.parse(md) as string;
-</script>
-
-<template>
-    <div class="using" ref="using" v-html="xss(htmlStr)"></div>
-</template>
-
-<style scoped lang="scss">
-.using {
-    height: 400px;
-    overflow-y: auto;
-    white-space: pre-wrap;
-}
-</style>

package/public/components/basic/e_badge/BasicBadge.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { EBadge, EButton, ESvgIcon } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-badge">
-        <EBadge value="5">
-            <EButton>消息</EButton>
-        </EBadge>
-        <EBadge value="10">
-            <EButton type="success">通知</EButton>
-        </EBadge>
-    </div>
-</template>
-
-<style scoped>
-.demo-badge {
-    display: flex;
-    gap: 20px;
-    align-items: center;
-
-    .e-button {
-        margin-right: 10px;
-    }
-
-    .e-svg-icon {
-        font-size: 24px;
-        cursor: pointer;
-    }
-}
-</style>

package/public/components/basic/e_badge/Document.vue

@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import PageLayout from '@/components/PageLayout.vue';
-import APITable from '@/components/APITable.vue';
-
-// 导入各个独立的demo组件
-import BasicBadge from './BasicBadge.vue';
-import BasicBadgeRaw from './BasicBadge.vue?raw';
-
-import TypeBadge from './TypeBadge.vue';
-import TypeBadgeRaw from './TypeBadge.vue?raw';
-
-import SizeBadge from './SizeBadge.vue';
-import SizeBadgeRaw from './SizeBadge.vue?raw';
-
-import MaxBadge from './MaxBadge.vue';
-import MaxBadgeRaw from './MaxBadge.vue?raw';
-
-import ShowZeroBadge from './ShowZeroBadge.vue';
-import ShowZeroBadgeRaw from './ShowZeroBadge.vue?raw';
-
-import DotBadge from './DotBadge.vue';
-import DotBadgeRaw from './DotBadge.vue?raw';
-
-// API表格数据
-const apiData = [
-    {
-        subTitle: 'EBadge Props',
-        list: [
-            {
-                name: 'value',
-                description: '角标显示的值',
-                type: 'number | string',
-                defaultValue: 'undefined',
-                required: false,
-            },
-            {
-                name: 'max',
-                description: '角标显示的最大值，超过最大值时显示 最大值+',
-                type: 'number',
-                defaultValue: 99,
-                required: false,
-            },
-            {
-                name: 'type',
-                description: '角标类型',
-                type: 'primary | success | danger | info | warning',
-                defaultValue: 'danger',
-                required: false,
-            },
-            {
-                name: 'size',
-                description: '角标尺寸',
-                type: 'small | medium | large',
-                defaultValue: 'medium',
-                required: false,
-            },
-            {
-                name: 'showZero',
-                description: '当值为 0 时是否显示角标',
-                type: 'boolean',
-                defaultValue: false,
-                required: false,
-            },
-            {
-                name: 'dot',
-                description: '是否显示为点模式',
-                type: 'boolean',
-                defaultValue: false,
-                required: false,
-            },
-        ],
-    },
-];
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox title="介绍">
-            <h2>EBadge 数字角标</h2>
-            <p>
-                数字角标组件，用于显示未读消息数或状态提示，支持多种类型、尺寸和样式。
-            </p>
-        </DemoBox>
-
-        <!-- 基础用法示例 -->
-        <DemoBox :code="BasicBadgeRaw" title="基础用法">
-            <BasicBadge />
-            <template #description>
-                基本的数字角标用法，通过 value 属性设置显示的值。
-            </template>
-        </DemoBox>
-
-        <!-- 不同类型示例 -->
-        <DemoBox :code="TypeBadgeRaw" title="不同类型">
-            <TypeBadge />
-            <template #description>
-                角标支持五种主题颜色：primary、success、danger、info 和
-                warning。
-            </template>
-        </DemoBox>
-
-        <!-- 不同尺寸示例 -->
-        <DemoBox :code="SizeBadgeRaw" title="不同尺寸">
-            <SizeBadge />
-            <template #description>
-                角标支持三种尺寸：small、medium 和 large。
-            </template>
-        </DemoBox>
-
-        <!-- 最大值限制示例 -->
-        <DemoBox :code="MaxBadgeRaw" title="最大值限制">
-            <MaxBadge />
-            <template #description>
-                通过 max 属性设置角标显示的最大值，超过最大值时显示 "最大值+"。
-            </template>
-        </DemoBox>
-
-        <!-- 显示/隐藏零示例 -->
-        <DemoBox :code="ShowZeroBadgeRaw" title="显示/隐藏零">
-            <ShowZeroBadge />
-            <template #description>
-                通过 showZero 属性控制当值为 0 时是否显示角标。
-            </template>
-        </DemoBox>
-
-        <!-- 点模式示例 -->
-        <DemoBox :code="DotBadgeRaw" title="点模式">
-            <DotBadge />
-            <template #description>
-                通过 dot 属性设置角标为点模式，只显示一个小点，不显示具体数值。
-            </template>
-        </DemoBox>
-
-        <APITable :data="apiData" />
-    </PageLayout>
-</template>

package/public/components/basic/e_badge/DotBadge.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { EBadge, EButton, ESvgIcon } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-badge">
-        <EBadge dot>
-            <EButton>点模式</EButton>
-        </EBadge>
-        <EBadge dot type="success">
-            <EButton>成功点</EButton>
-        </EBadge>
-        <EBadge dot type="warning">
-            <EButton>警告点</EButton>
-        </EBadge>
-    </div>
-</template>
-
-<style scoped>
-.demo-badge {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .e-button {
-        margin-right: 10px;
-    }
-
-    .e-svg-icon {
-        font-size: 24px;
-        cursor: pointer;
-    }
-}
-</style>

package/public/components/basic/e_badge/MaxBadge.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { EBadge, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-badge">
-        <EBadge value="50" :max="50">
-            <EButton>50</EButton>
-        </EBadge>
-        <EBadge value="99" :max="99">
-            <EButton>99</EButton>
-        </EBadge>
-        <EBadge value="100" :max="99">
-            <EButton>100</EButton>
-        </EBadge>
-        <EBadge value="200" :max="99">
-            <EButton>200</EButton>
-        </EBadge>
-    </div>
-</template>
-
-<style scoped>
-.demo-badge {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .e-button {
-        margin-right: 10px;
-    }
-}
-</style>

package/public/components/basic/e_badge/ShowZeroBadge.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { EBadge, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-badge">
-        <EBadge value="0">
-            <EButton>默认（隐藏0）</EButton>
-        </EBadge>
-        <EBadge value="0" show-zero>
-            <EButton>显示0</EButton>
-        </EBadge>
-        <EBadge value="5">
-            <EButton>显示5</EButton>
-        </EBadge>
-    </div>
-</template>
-
-<style scoped>
-.demo-badge {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .e-button {
-        margin-right: 10px;
-    }
-}
-</style>

package/public/components/basic/e_badge/SizeBadge.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { EBadge, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-badge">
-        <EBadge value="5" size="small">
-            <EButton size="small">small</EButton>
-        </EBadge>
-        <EBadge value="10" size="medium">
-            <EButton size="medium">medium</EButton>
-        </EBadge>
-        <EBadge value="20" size="large">
-            <EButton size="large">large</EButton>
-        </EBadge>
-    </div>
-</template>
-
-<style scoped>
-.demo-badge {
-    display: flex;
-    gap: 20px;
-    align-items: center;
-
-    .e-button {
-        margin-right: 10px;
-    }
-}
-</style>

package/public/components/basic/e_badge/TypeBadge.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { EBadge, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-badge">
-        <EBadge value="5" type="primary">
-            <EButton>primary</EButton>
-        </EBadge>
-        <EBadge value="10" type="success">
-            <EButton>success</EButton>
-        </EBadge>
-        <EBadge value="20" type="danger">
-            <EButton>danger</EButton>
-        </EBadge>
-        <EBadge value="30" type="info">
-            <EButton>info</EButton>
-        </EBadge>
-        <EBadge value="40" type="warning">
-            <EButton>warning</EButton>
-        </EBadge>
-    </div>
-</template>
-
-<style scoped>
-.demo-badge {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .e-button {
-        margin-right: 10px;
-    }
-}
-</style>