exploria-ui-mcp-server 2.0.0

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

@@ -0,0 +1,189 @@
+<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

@@ -0,0 +1,167 @@
+<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

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,137 @@
+<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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,33 @@
+<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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,36 @@
+<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>