exploria-ui-mcp-server 2.0.0

package/dist/components/advanced/e_watermark/Dense.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <EWatermark
+        text="高密度水印"
+        font-color="rgba(255, 0, 0, 0.1)"
+        :font-size="14"
+        :gap="15"
+        :width="150"
+        :height="150"
+    >
+        <div
+            style="
+                width: 500px;
+                height: 300px;
+                background-color: #fff3f3;
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "
+        >
+            高密度水印示例
+        </div>
+    </EWatermark>
+</template>

package/dist/components/advanced/e_watermark/Document.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import BasicUsing from './BasicUsing.vue';
+import BasicUsingRaw from './BasicUsing.vue?raw';
+import MultiLine from './MultiLine.vue';
+import MultiLineRaw from './MultiLine.vue?raw';
+import Dense from './Dense.vue';
+import DenseRaw from './Dense.vue?raw';
+import CustomStyle from './CustomStyle.vue';
+import CustomStyleRaw from './CustomStyle.vue?raw';
+import HighZIndex from './HighZIndex.vue';
+import HighZIndexRaw from './HighZIndex.vue?raw';
+import AutoSize from './AutoSize.vue';
+import AutoSizeRaw from './AutoSize.vue?raw';
+import ImageWatermark from './ImageWatermark.vue';
+import ImageWatermarkRaw from './ImageWatermark.vue?raw';
+import CustomFont from './CustomFont.vue';
+import CustomFontRaw from './CustomFont.vue?raw';
+import OpacityWatermark from './OpacityWatermark.vue';
+import OpacityWatermarkRaw from './OpacityWatermark.vue?raw';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EWatermark 水印</h2>
+            <p>
+                水印组件用于在页面上添加水印效果，支持文本水印和图片水印，可自定义多种样式。
+            </p>
+        </DemoBox>
+
+        <DemoBox :code="BasicUsingRaw" title="基本用法">
+            <BasicUsing />
+            <template #description>
+                <p>
+                    通过设置不同属性，可以自定义水印的文本、旋转角度、颜色和字体大小等。
+                </p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="MultiLineRaw" title="多行文本水印">
+            <MultiLine />
+            <template #description>
+                <p>
+                    支持传入字符串数组实现多行文本水印效果，可通过lineHeight属性调整行间距。
+                </p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="DenseRaw" title="高密度水印">
+            <Dense />
+            <template #description>
+                <p>通过调整gap、width和height属性，可以实现高密度水印效果。</p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="CustomStyleRaw" title="自定义样式水印">
+            <CustomStyle />
+            <template #description>
+                <p>
+                    支持自定义字体、颜色、旋转角度等多种样式，实现不同视觉效果。
+                </p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="HighZIndexRaw" title="高z-index内容测试">
+            <HighZIndex />
+            <template #description>
+                <p>
+                    水印能够正确覆盖具有极高z-index值的内容，无论用户内容设置多高的层级，水印始终可见。
+                </p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="AutoSizeRaw" title="自动尺寸计算">
+            <AutoSize />
+            <template #description>
+                <p>
+                    当未指定宽度和高度时，水印组件会根据文本内容自动计算合适的尺寸，确保水印完整显示。
+                </p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="ImageWatermarkRaw" title="图片水印">
+            <ImageWatermark />
+            <template #description>
+                <p>支持使用图片作为水印，可自定义图片大小、旋转角度和间距。</p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="CustomFontRaw" title="自定义字体水印">
+            <CustomFont />
+            <template #description>
+                <p>
+                    支持自定义字体系列，包括衬线字体、无衬线字体、等宽字体和手写体等。
+                </p>
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="OpacityWatermarkRaw" title="不同透明度水印">
+            <OpacityWatermark />
+            <template #description>
+                <p>支持自定义水印透明度，可根据需求调整水印的可见程度。</p>
+            </template>
+        </DemoBox>
+
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EWatermark Props',
+                    list: [
+                        {
+                            name: 'text',
+                            description:
+                                '水印文本内容，可以是字符串或字符串数组（多行文本）',
+                            type: 'string | string[]',
+                            defaultValue: 'Watermark',
+                            required: false,
+                        },
+                        {
+                            name: 'rotate',
+                            description: '水印旋转角度，单位为度',
+                            type: 'number',
+                            defaultValue: 45,
+                            required: false,
+                        },
+                        {
+                            name: 'fontColor',
+                            description: '水印文字颜色',
+                            type: 'string',
+                            defaultValue: 'rgba(0, 0, 0, 0.1)',
+                            required: false,
+                        },
+                        {
+                            name: 'fontSize',
+                            description: '水印字体大小，单位为px',
+                            type: 'number',
+                            defaultValue: 16,
+                            required: false,
+                        },
+                        {
+                            name: 'fontFamily',
+                            description: '水印字体系列',
+                            type: 'string',
+                            defaultValue: 'Arial',
+                            required: false,
+                        },
+                        {
+                            name: 'gap',
+                            description: '水印间距，单位为px',
+                            type: 'number',
+                            defaultValue: 100,
+                            required: false,
+                        },
+                        {
+                            name: 'width',
+                            description: '水印宽度，单位为px',
+                            type: 'number',
+                            defaultValue: 200,
+                            required: false,
+                        },
+                        {
+                            name: 'height',
+                            description: '水印高度，单位为px',
+                            type: 'number',
+                            defaultValue: 200,
+                            required: false,
+                        },
+                        {
+                            name: 'image',
+                            description: '水印图片地址',
+                            type: 'string',
+                            defaultValue: '',
+                            required: false,
+                        },
+                        {
+                            name: 'imageWidth',
+                            description: '水印图片宽度，单位为px',
+                            type: 'number',
+                            defaultValue: 120,
+                            required: false,
+                        },
+                        {
+                            name: 'imageHeight',
+                            description: '水印图片高度，单位为px',
+                            type: 'number',
+                            defaultValue: 40,
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/dist/components/advanced/e_watermark/HighZIndex.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <EWatermark
+        text="高z-index内容测试"
+        font-color="rgba(255, 0, 0, 0.2)"
+        :font-size="20"
+        :width="150"
+        :height="150"
+        :gap="15"
+    >
+        <div
+            style="
+                width: 500px;
+                height: 300px;
+                background-color: #f5f7fa;
+                border-radius: 8px;
+                padding: 20px;
+            "
+        >
+            <h3>高z-index内容测试</h3>
+
+            <!-- 不同z-index层级的内容 -->
+            <div
+                style="
+                    margin: 10px 0;
+                    padding: 10px;
+                    background-color: #fff;
+                    border-radius: 4px;
+                "
+            >
+                <div style="z-index: 100">z-index: 100</div>
+            </div>
+
+            <div
+                style="
+                    margin: 10px 0;
+                    padding: 10px;
+                    background-color: #fff;
+                    border-radius: 4px;
+                    position: relative;
+                "
+            >
+                <div
+                    style="
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        background-color: rgba(25, 220, 30, 1);
+                        color: white;
+                        padding: 5px;
+                        z-index: 999;
+                    "
+                >
+                    z-index: 999
+                </div>
+                <div style="padding-right: 80px">
+                    带绝对定位和高z-index的元素
+                </div>
+            </div>
+
+            <div
+                style="
+                    margin: 10px 0;
+                    padding: 10px;
+                    background-color: #fff;
+                    border-radius: 4px;
+                "
+            >
+                <div style="position: relative; z-index: 9999">
+                    z-index: 9999
+                </div>
+            </div>
+
+            <div
+                style="
+                    margin: 10px 0;
+                    padding: 10px;
+                    background-color: #fff;
+                    border-radius: 4px;
+                    position: relative;
+                "
+            >
+                <div
+                    style="
+                        position: absolute;
+                        top: -10px;
+                        left: -10px;
+                        background-color: blue;
+                        color: white;
+                        padding: 10px;
+                        z-index: 10000;
+                    "
+                >
+                    z-index: 10000
+                </div>
+                <div style="padding-left: 40px; padding-top: 20px">
+                    极高z-index的悬浮元素
+                </div>
+            </div>
+        </div>
+    </EWatermark>
+</template>

package/dist/components/advanced/e_watermark/ImageWatermark.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <!-- 密集图片水印 -->
+    <EWatermark
+        image="https://img.icons8.com/color/48/000000/vue-js.png"
+        :gap="10"
+        :width="100"
+        :height="100"
+        :image-width="40"
+        :image-height="40"
+    >
+        <div class="demo-box">
+            <span>密集图片水印</span>
+        </div>
+    </EWatermark>
+</template>
+
+<style scoped lang="scss">
+.demo-box {
+    width: 300px;
+    height: 200px;
+    background-color: #f5f7fa;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

package/dist/components/advanced/e_watermark/MultiLine.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <EWatermark
+        :text="['多行水印', '第二行文本', 'Exploria UI']"
+        font-color="rgba(0, 128, 255, 0.15)"
+        :font-size="18"
+        :gap="15"
+    >
+        <div
+            style="
+                width: 500px;
+                height: 300px;
+                background-color: #f5f7fa;
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                line-height: 1.5;
+                color: #000000;
+            "
+        >
+            多行文本水印示例
+        </div>
+    </EWatermark>
+</template>

package/dist/components/advanced/e_watermark/OpacityWatermark.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <div class="demo-container">
+        <!-- 低透明度 -->
+        <EWatermark
+            text="低透明度水印"
+            font-color="rgba(0, 0, 0, 0.05)"
+            :font-size="24"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>透明度: 5%</span>
+            </div>
+        </EWatermark>
+
+        <!-- 中低透明度 -->
+        <EWatermark
+            text="中低透明度水印"
+            font-color="rgba(0, 0, 0, 0.15)"
+            :font-size="24"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>透明度: 15%</span>
+            </div>
+        </EWatermark>
+
+        <!-- 中透明度 -->
+        <EWatermark
+            text="中透明度水印"
+            font-color="rgba(0, 0, 0, 0.3)"
+            :font-size="24"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>透明度: 30%</span>
+            </div>
+        </EWatermark>
+
+        <!-- 高透明度 -->
+        <EWatermark
+            text="高透明度水印"
+            font-color="rgba(0, 0, 0, 0.5)"
+            :font-size="24"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>透明度: 50%</span>
+            </div>
+        </EWatermark>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.demo-box {
+    width: 300px;
+    height: 200px;
+    background-color: #f5f7fa;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

package/dist/components/ai/typing_effect/Document.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import Using1Code from './Using1.vue?raw';
+import Using1 from './Using1.vue';
+import Using2Code from './Using2.vue?raw';
+import Using2 from './Using2.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :code="Using1Code" :libs="['marked', 'xss']" title="基本用法">
+            <Using1 />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+        <DemoBox
+            :code="Using2Code"
+            :libs="['marked', 'xss']"
+            title="API接口流式返回的情况"
+        >
+            <Using2 />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+.time-picker-demo {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+
+    .left {
+        flex: 1;
+        overflow: auto;
+        padding: 30px;
+    }
+
+    .right {
+        width: 260px;
+    }
+}
+</style>