exploria-ui-mcp-server 2.1.4 → 2.2.5

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

@@ -1,38 +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';
-
-const section = ['仪表盘', 'a'];
-</script>
-
-<template>
-    <PageLayout :section="section">
-        <DemoBox :code="UsingCode" :libs="['echarts']" title="仪表盘">
-            <Using />
-            <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/data_zoom/Using.vue

@@ -1,119 +0,0 @@
-<script setup lang="ts">
-import * as echarts from 'echarts';
-import img from './img.svg';
-import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
-
-let chart: echarts.ECharts | null = null;
-const boxRef = useTemplateRef<HTMLElement>('chartRef');
-onMounted(() => {
-    initChart();
-    updateChart();
-});
-onBeforeUnmount(() => {
-    chart?.dispose();
-});
-const initChart = () => {
-    chart = echarts.init(boxRef.value!);
-};
-const updateChart = () => {
-    const symbolSize = 20;
-    const data = [
-        [40, -10],
-        [-30, -5],
-        [-76.5, 20],
-        [-63.5, 40],
-        [-22.1, 50],
-    ];
-    const option = {
-        title: {
-            text: 'Try Dragging these Points',
-            left: 'center',
-        },
-        grid: {
-            top: '8%',
-            bottom: '15%',
-        },
-        xAxis: {
-            min: -100,
-            max: 70,
-            type: 'value',
-            axisLine: { onZero: false },
-        },
-        yAxis: {
-            min: -30,
-            max: 60,
-            type: 'value',
-            axisLine: { onZero: false },
-        },
-        dataZoom: [
-            {
-                type: 'slider',
-                // 隐藏上半部分的东西
-                moveHandleSize: 0,
-                // 关闭交互
-                silent: true,
-                handleIcon: 'image://' + img,
-                handleStyle: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(119,119,119,0.45)',
-                },
-                borderColor: 'rgba(0,0,0,0)',
-                handleSize: '180%',
-                bottom: 10,
-                backgroundColor: '#F1F5F8',
-                height: 14,
-                showDetail: false,
-                // 两个滑块之间的遮罩的背景色
-                fillerColor: 'rgba(132,183,255,0.48)',
-                // 滑块的初始位置
-                start: 30,
-                end: 70,
-                // 框选时的框选区样式
-                brushStyle: {
-                    color: 'rgba(132,183,255,0.48)',
-                },
-                dataBackground: {
-                    lineStyle: {
-                        color: '#92bfff',
-                        width: 2,
-                    },
-                    areaStyle: {
-                        color: '#549bff',
-                    },
-                },
-                selectedDataBackground: {
-                    lineStyle: {
-                        color: '#92bfff',
-                        width: 2,
-                    },
-                    areaStyle: {
-                        color: '#96bfff',
-                    },
-                },
-            },
-        ],
-        series: [
-            {
-                type: 'line',
-                symbolSize: symbolSize,
-                data: data,
-            },
-        ],
-    };
-
-    chart!.setOption(option);
-};
-</script>
-
-<template>
-    <div ref="chartRef" class="chart" />
-</template>
-
-<style scoped lang="scss">
-@use '@/style/global' as global;
-
-.chart {
-    height: 300px;
-    margin: 10px;
-}
-</style>

package/dist/other/echarts/data_zoom/img.svg

@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="30px" viewBox="0 0 32 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Group 427318682</title>
-    <defs>
-        <filter x="-29.5%" y="-32.5%" width="177.3%" height="185.0%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.100000001 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="1.首页重构2025" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="1.WAF控制面板重构-正常" transform="translate(-1625, -1155)">
-            <g id="攻守趋势" transform="translate(1056, 912)">
-                <g id="编组" transform="translate(53, 248)">
-                    <g id="Group-427318682" filter="url(#filter-1)" transform="translate(521, 0)">
-                        <g id="Group-427318684">
-                            <path d="M10,0 L12,0 C17.5228475,-1.77635684e-15 22,4.4771525 22,10 C22,15.5228475 17.5228475,20 12,20 L10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z" id="Rectangle-34624017" fill="#FFFFFF"></path>
-                            <g id="Group-427318681" transform="translate(6.95, 6.05)" stroke="#134BEA" stroke-dasharray="0,0" stroke-linecap="round" stroke-width="1.20000005">
-                                <line x1="-3.92484277" y1="4" x2="4.02484277" y2="4" id="Line-183" transform="translate(0.05, 4) rotate(-90) translate(-0.05, -4)"></line>
-                                <line x1="-0.424842767" y1="4" x2="7.52484277" y2="4" id="Line-184" transform="translate(3.55, 4) rotate(-90) translate(-3.55, -4)"></line>
-                                <line x1="3.07515723" y1="4" x2="11.0248428" y2="4" id="Line-186" transform="translate(7.05, 4) rotate(-90) translate(-7.05, -4)"></line>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

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

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import GaugeCode from './Gauge.vue?raw';
-import Gauge from './Gauge.vue';
-
-import PageLayout from '@/components/PageLayout.vue';
-
-const section = ['仪表盘', 'a'];
-</script>
-
-<template>
-    <PageLayout :section="section">
-        <DemoBox :code="GaugeCode" :libs="['echarts']" title="仪表盘">
-            <Gauge />
-            <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/gauge/Gauge.vue

@@ -1,340 +0,0 @@
-<script setup lang="ts">
-/**
- * 仪表盘
- */
-import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
-import * as echarts from 'echarts';
-import chroma from 'chroma-js'; // npm i chroma-js
-
-const boxRef = useTemplateRef<HTMLElement>('boxRef');
-let chart: echarts.ECharts;
-const initChart1 = () => {
-    chart?.dispose();
-    const dom = boxRef.value!.querySelector('.chart') as HTMLElement;
-    chart = echarts.init(dom, null, {
-        renderer: 'svg',
-        width: dom.offsetWidth,
-        height: dom.offsetHeight,
-    });
-    onUnmounted(() => {
-        chart.dispose();
-    });
-};
-
-// 生成圆锥渐变纹理
-function createConicTexture(option: {
-    value: number;
-    width: number;
-    height: number;
-    lineNum: number;
-    radius: number;
-    startAngle: number; // 度，0=正上方
-    endAngle: number;
-    startColor: string;
-    endColor: string;
-    lineWidth: number;
-}) {
-    const {
-        value,
-        width,
-        height,
-        lineNum,
-        startAngle,
-        endAngle,
-        radius,
-        startColor,
-        endColor,
-        lineWidth,
-    } = option;
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d')!;
-
-    let x = 0;
-    let y = 0;
-
-    if (value <= 25) {
-        y = radius;
-    }
-    if (value < 25) {
-        x = radius - radius * Math.sin((2 * Math.PI * value) / 100);
-    }
-    if (value > 25 && value < 50) {
-        y = radius - radius * Math.sin((2 * Math.PI * (value - 25)) / 100);
-    }
-
-    const cx = width / 2 - x;
-    const cy = height / 2 - y;
-
-    const palette = chroma
-        .scale([startColor, endColor]) // 起止颜色
-        .mode('lab') // 可选：lab 空间更视觉均匀
-        .colors(lineNum) as string[]; // 一步拿到色值数组
-
-    // 每段角度
-    const angleStep = (endAngle - startAngle) / lineNum;
-
-    for (let i = 0; i < lineNum; i++) {
-        const angle = startAngle + i * angleStep;
-        const rad = -(angle * Math.PI) / 180; // 0°=顶部
-        ctx.strokeStyle = palette[i];
-        // 线宽
-        ctx.lineWidth = lineWidth;
-        ctx.beginPath();
-        ctx.moveTo(cx, cy);
-        ctx.lineTo(cx + radius * -Math.cos(rad), cy + radius * Math.sin(rad));
-        ctx.stroke();
-    }
-
-    return canvas;
-}
-
-const updateChart = (value: number) => {
-    const radius = 80;
-    const max = 100;
-
-    const getR = (gapCount: number) => {
-        const gap = 10;
-        return Math.round(
-            (Math.min(chart.getHeight(), chart.getWidth()) / 2) *
-                ((radius - gap * gapCount) / 100)
-        );
-    };
-    const option: echarts.EChartsOption = {
-        title: {
-            text: '内存使用率',
-            left: 'left',
-        },
-        series: [
-            // 1 进度条和刻度
-            {
-                type: 'gauge',
-                animation: false,
-                startAngle: 270,
-                endAngle: -90,
-                radius: getR(0),
-                // 刻度间隔
-                splitNumber: 5,
-                min: 0,
-                max,
-                pointer: {
-                    show: false,
-                },
-                // 渐变刻度
-                progress: {
-                    show: true,
-                    // 不开启切割
-                    width: 100,
-                    itemStyle: {
-                        // 条纹渐变 → 虚线效果
-                        color: {
-                            image: createConicTexture({
-                                value,
-                                width: getR(0) * 2,
-                                height: getR(0) * 2,
-                                lineNum: 100,
-                                startAngle: -90,
-                                endAngle: 270,
-                                radius: getR(0),
-                                startColor: 'rgb(104,189,104)', // 道奇蓝
-                                endColor:
-                                    value < 80
-                                        ? 'rgb(0,100,255)'
-                                        : 'rgb(255,0,0)', // 青色
-                                lineWidth: 2,
-                            }),
-                            repeat: 'no-repeat',
-                        },
-                    },
-                },
-                axisLine: {
-                    show: false,
-                },
-                // 大刻度
-                splitLine: {
-                    show: false,
-                },
-                // 小刻度
-                axisTick: {
-                    show: true,
-                    distance: -20,
-                    length: 5,
-                    lineStyle: {
-                        width: 2,
-                        // 刻度的颜色
-                        color: value < 80 ? '#64a0e3' : '#e19090',
-                    },
-                },
-                axisLabel: {
-                    show: false,
-                },
-                detail: {
-                    show: false,
-                },
-                data: [
-                    {
-                        value: value,
-                        name: 'a',
-                    },
-                ],
-                z: 1,
-            },
-            // 3 指针
-            {
-                animation: false,
-                type: 'gauge',
-                startAngle: 270,
-                endAngle: -90,
-                radius: '50%',
-                max,
-                // 大刻度
-                splitLine: {
-                    show: false,
-                },
-                progress: {
-                    show: false,
-                },
-                axisLabel: {
-                    show: false,
-                },
-                axisTick: {
-                    show: false,
-                },
-                pointer: {
-                    show: true,
-                    offsetCenter: [0, '-105%'],
-                    icon: 'path://M12.8,0.7L12,40.1H0.7L12.8,0.7z',
-                    length: '92%',
-                    width: '10%',
-                    itemStyle: {
-                        color: value < 80 ? '#99c9ff' : '#e19090',
-                    },
-                },
-                detail: {
-                    show: false,
-                },
-                data: [
-                    {
-                        value: value,
-                        name: 'c',
-                    },
-                ],
-                z: 3,
-            },
-        ] as echarts.SeriesOption,
-        graphic: [
-            // 2 指针下层的圆盘
-            {
-                type: 'rect',
-                z: 2,
-                left: 'center',
-                top: 'center',
-                shape: { r: getR(1) },
-                style: {
-                    fill: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
-                        {
-                            offset: 0,
-                            color: '#ffffff',
-                        },
-                        { offset: 1, color: '#ff0000' },
-                    ]),
-                },
-            },
-            // 4 指针上层的圆盘
-            {
-                type: 'group',
-                left: 'center',
-                top: 'center',
-                children: [
-                    {
-                        type: 'circle',
-                        left: 'center',
-                        top: 'center',
-                        z: 4,
-                        shape: { r: getR(2) },
-                        style: {
-                            fill: new echarts.graphic.RadialGradient(
-                                0.5,
-                                0.5,
-                                1,
-                                [
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgb(251,253,255)',
-                                    },
-                                    {
-                                        offset: 1,
-                                        color: 'rgb(255,255,255)',
-                                    },
-                                ]
-                            ),
-                        },
-                    },
-                    // 5 数值显示
-                    {
-                        // 数值显示
-                        type: 'text',
-                        z: 5,
-                        left: 'center',
-                        top: 'center',
-                        style: {
-                            fill: 'rgb(110,158,253)',
-                            text: value.toFixed(0) + '%',
-                            fontSize: 37,
-                            // 文字加粗
-                            fontWeight: 'bold',
-                        },
-                    },
-                ],
-            },
-        ],
-    };
-    chart!.setOption(option);
-};
-
-let timer: ReturnType<typeof setTimeout>;
-let lastValue = 0;
-const updateC = (value: number) => {
-    clearInterval(timer);
-    if (value === lastValue) return;
-
-    const d = value < lastValue ? -1 : 1;
-    const duration = 1000;
-    const t = duration / 100;
-
-    timer = setInterval(() => {
-        lastValue += d;
-        updateChart(lastValue);
-        if (lastValue === value) {
-            clearInterval(timer);
-        }
-    }, t);
-};
-const value = ref(50);
-
-onMounted(() => {
-    initChart1();
-    updateC(value.value);
-});
-</script>
-
-<template>
-    <div ref="boxRef">
-        <input
-            type="number"
-            v-model="value"
-            :min="0"
-            :max="100"
-            @change="updateC(value)"
-        />
-        <div class="chart" />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.chart {
-    height: 200px;
-    border: solid;
-}
-</style>

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

@@ -1,46 +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';
-
-const section = ['仪表盘', 'a'];
-</script>
-
-<template>
-    <PageLayout :section="section">
-        <DemoBox
-            :code="UsingCode"
-            :libs="['echarts', 'echarts-liquidfill']"
-            title="仪表盘"
-        >
-            <Using />
-            <template #precondition>
-                <div>pnpm add echarts</div>
-                <div>pnpm add echarts-liquidfill</div>
-            </template>
-            <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>