exploria-ui-mcp-server 2.0.0

package/dist/other/canvas/base/Using.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
+
+const canvasRef = useTemplateRef<HTMLCanvasElement>('flag');
+
+onMounted(() => {
+    const canvas = canvasRef.value!;
+    const cssWidth = canvas.offsetWidth;
+    const whR = 3 / 2;
+
+    canvas.width = cssWidth;
+    canvas.height = cssWidth / whR;
+
+    const ctx = canvas.getContext('2d')!;
+
+    // 红色旗面
+    ctx.fillStyle = '#DE2910';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // 逻辑网格：
+    const logicW = 15;
+    const ceilWidth = canvas.width / 2 / logicW; // 每格像素
+
+    // // 显示网格
+    // ctx.strokeStyle = '#000';
+    // ctx.lineWidth = 1;
+    // for (let i = 1; i <= logicW / whR; i++) {
+    //     ctx.beginPath();
+    //     ctx.moveTo(0, i * ceilWidth);
+    //     ctx.lineTo(canvas.width, i * ceilWidth);
+    //     ctx.stroke();
+    // }
+    //
+    // for (let i = 1; i <= logicW; i++) {
+    //     ctx.beginPath();
+    //     ctx.moveTo(i * ceilWidth, 0);
+    //     ctx.lineTo(i * ceilWidth, canvas.height);
+    //     ctx.stroke();
+    // }
+
+    function logicToPixel(lx: number, ly: number) {
+        return { x: lx * ceilWidth, y: ly * ceilWidth };
+    }
+
+    // 画五角星（逻辑坐标）
+    function drawStar(lx: number, ly: number, lr: number, rotate: number) {
+        const { x, y } = logicToPixel(lx, ly);
+        const r = lr * ceilWidth;
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(rotate);
+        ctx.beginPath();
+        const out = r;
+        const inn = r * 0.381966;
+        for (let i = 0; i < 5; i++) {
+            const outerAngle = (i * 2 * Math.PI) / 5 - Math.PI / 2;
+            const innerAngle = ((i + 0.5) * 2 * Math.PI) / 5 - Math.PI / 2;
+            const xo = out * Math.cos(outerAngle);
+            const yo = out * Math.sin(outerAngle);
+            const xi = inn * Math.cos(innerAngle);
+            const yi = inn * Math.sin(innerAngle);
+            if (i === 0) ctx.moveTo(xo, yo);
+            else ctx.lineTo(xo, yo);
+            ctx.lineTo(xi, yi);
+        }
+        ctx.closePath();
+        ctx.fillStyle = '#FFDE00';
+        ctx.fill();
+        ctx.restore();
+    }
+
+    // 大星
+    const bigX = 5;
+    const bigY = 5;
+    const bigR = 3;
+    drawStar(bigX, bigY, bigR, 0);
+
+    // 小星：坐标 + 旋转角（星尖指向大星中心）
+    const smallStars = [
+        {
+            x: 10,
+            y: 2,
+            r: 1,
+            ang: Math.atan2(bigY - 2, bigX - 10) + Math.PI / 2,
+        },
+        {
+            x: 12,
+            y: 4,
+            r: 1,
+            ang: Math.atan2(bigY - 4, bigX - 12) + Math.PI / 2,
+        },
+        {
+            x: 12,
+            y: 7,
+            r: 1,
+            ang: Math.atan2(bigY - 7, bigX - 12) + Math.PI / 2,
+        },
+        {
+            x: 10,
+            y: 9,
+            r: 1,
+            ang: Math.atan2(bigY - 9, bigX - 10) + Math.PI / 2,
+        },
+    ];
+
+    for (const s of smallStars) {
+        drawStar(s.x, s.y, s.r, s.ang);
+        // 五角星之间的连线
+        // ctx.beginPath();
+        // ctx.moveTo(s.x * ceilWidth, s.y * ceilWidth);
+        // ctx.lineTo(5 * ceilWidth, 5 * ceilWidth);
+        // ctx.stroke();
+    }
+});
+</script>
+
+<template>
+    <canvas ref="flag"></canvas>
+</template>
+
+<style scoped lang="scss">
+canvas {
+    width: 100%;
+}
+</style>

package/dist/other/canvas/burrow/Clip.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
+
+const usingRef = useTemplateRef<HTMLCanvasElement>('using');
+onMounted(() => {
+    const canvas = usingRef.value!.querySelector('canvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d')!;
+    /* 让 canvas 内部像素尺寸与 css 尺寸一致，避免拉伸 */
+    const { width, height } = canvas.getBoundingClientRect();
+    canvas.width = width;
+    canvas.height = height;
+    ctx.fillStyle = '#5a8bea';
+    ctx.fillRect(0, 0, width, height); // 整屏背景
+    // 1. 保存画布状态
+    ctx.save();
+
+    // 2. 创建圆形路径作为裁剪区域
+    ctx.beginPath();
+    ctx.arc(width / 2, height / 2, 160, 0, Math.PI * 2);
+    ctx.clip();
+
+    // 3. 清除这块区域（变成透明）
+    ctx.clearRect(0, 0, width, height);
+
+    // 4. 恢复状态，后续绘制不再受 clip 影响
+    ctx.restore();
+});
+</script>
+
+<template>
+    <div class="using" ref="using">
+        我是 Canvas 下的元素（渐变背景）
+        <canvas />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    height: 400px;
+    position: relative;
+    display: grid;
+    place-items: center;
+    background: linear-gradient(-45deg, #4d9eff, #ef58a9);
+    background-size: 200% 200%;
+    animation: background 3s linear infinite;
+
+    // 动画
+    @keyframes background {
+        0%,
+        100% {
+            background-position: 0 0;
+        }
+        50% {
+            background-position: 100% 100%;
+        }
+    }
+
+    canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.81));
+    }
+}
+</style>

package/dist/other/canvas/burrow/Document.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import EraseCode from './Erase.vue?raw';
+import Erase from './Erase.vue';
+import ClipCode from './Clip.vue?raw';
+import Clip from './Clip.vue';
+import NonZeroSurroundRuleCode from './NonZeroSurroundRule.vue?raw';
+import NonZeroSurroundRule from './NonZeroSurroundRule.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :libs="[]" title="介绍">
+            <template #introduce>
+                下面演示的是如何在 canvas 元素上打洞
+            </template>
+        </DemoBox>
+        <DemoBox
+            :code="NonZeroSurroundRuleCode"
+            :libs="[]"
+            title="非零环绕规则"
+        >
+            <NonZeroSurroundRule />
+            <template #description> Three.js 基础用法</template>
+        </DemoBox>
+        <DemoBox :code="EraseCode" :libs="[]" title="擦掉">
+            <Erase />
+            <template #description> Three.js 基础用法</template>
+        </DemoBox>
+        <DemoBox :code="ClipCode" :libs="[]" title="反向裁剪">
+            <Clip />
+            <template #description> Three.js 基础用法</template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/dist/other/canvas/burrow/Erase.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
+
+const usingRef = useTemplateRef<HTMLCanvasElement>('using');
+onMounted(() => {
+    const canvas = usingRef.value!.querySelector('canvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d')!;
+    /* 让 canvas 内部像素尺寸与 css 尺寸一致，避免拉伸 */
+    const { width, height } = canvas.getBoundingClientRect();
+    canvas.width = width;
+    canvas.height = height;
+    ctx.fillStyle = '#5a8bea';
+    ctx.fillRect(0, 0, width, height); // 整屏背景
+
+    ctx.globalCompositeOperation = 'destination-out'; // 把接下来画的内容“抠掉”
+    ctx.beginPath();
+    ctx.arc(width / 2, height / 2, 160, 0, Math.PI * 2);
+    ctx.fill();
+});
+</script>
+
+<template>
+    <div class="using" ref="using">
+        我是 Canvas 下的元素（渐变背景）
+        <canvas />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    height: 400px;
+    position: relative;
+    display: grid;
+    place-items: center;
+    background: linear-gradient(-45deg, #4d9eff, #ef58a9);
+    background-size: 200% 200%;
+    animation: background 3s linear infinite;
+
+    // 动画
+    @keyframes background {
+        0%,
+        100% {
+            background-position: 0 0;
+        }
+        50% {
+            background-position: 100% 100%;
+        }
+    }
+
+    canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.81));
+    }
+}
+</style>

package/dist/other/canvas/burrow/NonZeroSurroundRule.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
+
+const usingRef = useTemplateRef<HTMLCanvasElement>('using');
+onMounted(() => {
+    const canvas = usingRef.value!.querySelector('canvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d')!;
+
+    /* 让画布像素与 CSS 尺寸一致 */
+    const { width, height } = canvas.getBoundingClientRect();
+    canvas.width = width;
+    canvas.height = height;
+
+    /* 关键：清空画布，保持透明 */
+    ctx.clearRect(0, 0, width, height);
+
+    /* 1. 整屏矩形（顺时针） */
+    ctx.beginPath();
+    ctx.rect(0, 0, width, height);
+
+    /* 2. 中间圆（逆时针，与矩形方向相反即可触发 evenodd）*/
+    const cx = width / 2;
+    const cy = height / 2;
+    const r = 160;
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+
+    /* 3. 填充颜色（任意色都行，中间会被挖空） */
+    ctx.fillStyle = 'rgb(153,190,246)'; // 半透明蓝色，仅作演示
+    ctx.fill('evenodd');
+});
+</script>
+
+<template>
+    <div class="using" ref="using">
+        我是 Canvas 下的元素（渐变背景）
+        <canvas />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    height: 400px;
+    position: relative;
+    display: grid;
+    place-items: center;
+    background: linear-gradient(-45deg, #4d9eff, #ef58a9);
+    background-size: 200% 200%;
+    animation: background 3s linear infinite;
+
+    // 动画
+    @keyframes background {
+        0%,
+        100% {
+            background-position: 0 0;
+        }
+        50% {
+            background-position: 100% 100%;
+        }
+    }
+
+    canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none; /* 可选：让鼠标事件穿透 */
+        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.81));
+    }
+}
+</style>

package/dist/other/canvas/clip/Clip.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
+
+const usingRef = useTemplateRef<HTMLCanvasElement>('using');
+onMounted(() => {
+    const canvas = usingRef.value!.querySelector('canvas') as HTMLCanvasElement;
+
+    /* 让 canvas 内部像素尺寸与 css 尺寸一致，避免拉伸 */
+    const { width, height } = canvas.getBoundingClientRect();
+
+    const canvas2 = document.createElement('canvas');
+    canvas2.width = width;
+    canvas2.height = height;
+    const ctx2 = canvas2.getContext('2d')!;
+
+    ctx2.fillStyle = '#c64b4b';
+
+    // 1. 保存画布状态
+    ctx2.fillRect(0, 0, width, height);
+
+    const ctx = canvas.getContext('2d')!;
+    canvas.width = width;
+    canvas.height = height;
+
+    ctx.drawImage(canvas2, 0 - width / 2, 0, width, height);
+});
+</script>
+
+<template>
+    <div class="using" ref="using">
+        <canvas />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    height: 400px;
+    background: linear-gradient(-45deg, #4d9eff, #ef58a9);
+    background-size: 200% 200%;
+    animation: background 3s linear infinite;
+
+    // 动画
+    @keyframes background {
+        0%,
+        100% {
+            background-position: 0 0;
+        }
+        50% {
+            background-position: 100% 100%;
+        }
+    }
+
+    canvas {
+        width: 300px;
+        height: 100%;
+    }
+}
+</style>

package/dist/other/canvas/clip/Document.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import ClipCode from './Clip.vue?raw';
+import Clip from './Clip.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :libs="[]" title="介绍">
+            <p>下面演示的是如何在 canvas 元素上打洞</p>
+        </DemoBox>
+
+        <DemoBox :code="ClipCode" :libs="[]" title="反向裁剪">
+            <Clip />
+            <template #description> Three.js 基础用法</template>
+        </DemoBox>
+    </PageLayout>
+</template>
+
+<style lang="scss" scoped>
+p {
+    padding: 10px;
+    color: #666666;
+}
+</style>

package/dist/other/canvas/definition/Document.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import UsingCode from './Using.vue?raw';
+import Using from './Using.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :libs="[]" title="介绍">
+            <p>windows</p>
+        </DemoBox>
+
+        <DemoBox :code="UsingCode" :libs="[]" title="擦掉">
+            <Using />
+            <template #description> Three.js 基础用法</template>
+        </DemoBox>
+    </PageLayout>
+</template>
+
+<style lang="scss" scoped>
+p {
+    padding: 10px;
+    color: #666666;
+}
+</style>

package/dist/other/canvas/definition/Using.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
+
+const usingRef = useTemplateRef<HTMLCanvasElement>('using');
+
+const ob = new ResizeObserver(() => {
+    const leftCanvas = usingRef.value!.querySelector(
+        'canvas.left'
+    ) as HTMLCanvasElement;
+    leftCanvas.width = leftCanvas.clientWidth;
+    leftCanvas.height = leftCanvas.clientHeight;
+    const ctx = leftCanvas.getContext('2d')!;
+    ctx.clearRect(0, 0, leftCanvas.width, leftCanvas.height);
+    const fontSize = 20 * window.devicePixelRatio;
+    ctx.font = `${fontSize}px serif`;
+    ctx.fillStyle = 'red';
+    ctx.fillText('清晰度测试文字 (考虑dpi)', 0, 0);
+});
+
+onMounted(() => {
+    const leftCanvas = usingRef.value!.querySelector(
+        'canvas.left'
+    ) as HTMLCanvasElement;
+    ob.observe(leftCanvas);
+
+    const rightCanvas = usingRef.value!.querySelector(
+        'canvas.right'
+    ) as HTMLCanvasElement;
+    rightCanvas.width = rightCanvas.clientWidth;
+    rightCanvas.height = rightCanvas.clientHeight;
+    const ctx = rightCanvas.getContext('2d')!;
+    ctx.clearRect(0, 0, rightCanvas.width, rightCanvas.height);
+    ctx.font = '28px serif';
+    ctx.fillStyle = 'red';
+    ctx.fillText('清晰度测试文字 (不考虑dpi)', 0, 0);
+});
+onUnmounted(() => {
+    ob.disconnect();
+});
+</script>
+
+<template>
+    <div class="using" ref="using">
+        <canvas class="left" />
+        <canvas class="right" />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    height: 400px;
+    display: flex;
+    justify-content: space-between;
+
+    canvas {
+        border: 1px solid #ccc;
+        flex: 1;
+    }
+}
+</style>

package/dist/other/echarts/basic/Document.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import LabelCode from './Label.vue?raw';
+import Label from './Label.vue';
+
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :code="LabelCode" :libs="['echarts']" title="开启两端刻度">
+            <Label />
+            <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>

package/dist/other/echarts/basic/Label.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
+import * as echarts from 'echarts';
+
+const boxRef = useTemplateRef<HTMLElement>('boxRef');
+let chart1: echarts.ECharts;
+const initChart1 = () => {
+    chart1?.dispose();
+    chart1 = echarts.init(boxRef.value!);
+    onUnmounted(() => {
+        chart1.dispose();
+    });
+};
+// 临时转成时间戳给 ECharts 用（不改 data 常量）
+
+const updateChart = () => {
+    const data = [
+        ['2000-06-05', 116],
+        ['2000-06-06', 129],
+        ['2000-06-07', 135],
+        ['2000-06-08', 86],
+        ['2000-06-09', 73],
+        ['2000-06-10', 85],
+        ['2000-06-11', 73],
+        ['2000-06-12', 68],
+        ['2000-06-13', 92],
+        ['2000-06-14', 130],
+        ['2000-06-15', 245],
+        ['2000-06-16', 139],
+        ['2000-06-17', 115],
+        ['2000-06-18', 111],
+        ['2000-06-19', 309],
+        ['2000-06-20', 206],
+        ['2000-06-21', 137],
+        ['2000-06-22', 128],
+        ['2000-06-23', 85],
+        ['2000-06-24', 94],
+        ['2000-06-25', 71],
+        ['2000-06-26', 106],
+        ['2000-06-27', 84],
+        ['2000-06-28', 93],
+        ['2000-06-30', 73],
+        ['2000-07-01', 83],
+        ['2000-07-02', 125],
+        ['2000-07-03', 107],
+        ['2000-07-07', 106],
+        ['2000-07-08', 107],
+    ] as [string, number][];
+    const option: echarts.EChartsOption = {
+        title: [
+            {
+                left: 'center',
+                text: 'Gradient along the y axis',
+            },
+        ],
+        tooltip: {
+            trigger: 'axis',
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+            },
+        ],
+        grid: {
+            containLabel: true,
+        },
+        yAxis: {
+            type: 'value',
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.map((item) => item[0]),
+            axisLabel: {
+                showMinLabel: true,
+                showMaxLabel: true,
+            },
+        },
+        series: [{ type: 'line', data }],
+    };
+    chart1!.setOption(option);
+};
+
+onMounted(() => {
+    initChart1();
+    updateChart();
+});
+</script>
+
+<template>
+    <div ref="boxRef" class="chart" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+    height: 300px;
+}
+</style>