exploria-ui-mcp-server 2.1.4 → 2.2.6

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

@@ -1,125 +0,0 @@
-<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/public/other/canvas/burrow/Clip.vue

@@ -1,66 +0,0 @@
-<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/public/other/canvas/burrow/Document.vue

@@ -1,36 +0,0 @@
-<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/public/other/canvas/burrow/Erase.vue

@@ -1,58 +0,0 @@
-<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/public/other/canvas/burrow/NonZeroSurroundRule.vue

@@ -1,70 +0,0 @@
-<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/public/other/canvas/clip/Clip.vue

@@ -1,58 +0,0 @@
-<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/public/other/canvas/clip/Document.vue

@@ -1,26 +0,0 @@
-<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/public/other/canvas/definition/Document.vue

@@ -1,26 +0,0 @@
-<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/public/other/canvas/definition/Using.vue

@@ -1,60 +0,0 @@
-<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/public/other/echarts/basic/Document.vue

@@ -1,36 +0,0 @@
-<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/public/other/echarts/basic/Label.vue

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