exploria-ui-mcp-server 2.1.4 → 2.2.6

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

@@ -1,239 +0,0 @@
-<script lang="ts" setup>
-/**
- * 水球图
- */
-import * as echarts from 'echarts';
-import 'echarts-liquidfill';
-import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
-
-let chart: echarts.ECharts;
-const boxRef = useTemplateRef<HTMLElement>('boxRef');
-
-/**
- * 创建一个矩形画布，背景为上下线性渐变
- */
-const createLinearGradientRect = (option: {
-    width: number;
-    height: number;
-    y: number;
-    bgColor: HTMLCanvasElement;
-    startColor: string;
-    endColor: string;
-}) => {
-    const { width, height, y, bgColor, startColor, endColor } = option;
-
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d')!;
-
-    // 绘制背景
-    ctx.drawImage(bgColor, 0, 0);
-
-    // 创建线性渐变
-    const gradient = ctx.createLinearGradient(0, 0, 0, height);
-    gradient.addColorStop(0, startColor);
-    gradient.addColorStop(1, endColor);
-
-    // 填充整个矩形
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, y, width, height);
-    return canvas;
-};
-
-let bgCanvas: HTMLCanvasElement | null;
-
-onMounted(() => {
-    initChart();
-
-    updateChart(57);
-});
-
-onBeforeUnmount(() => {
-    chart?.dispose();
-    bgCanvas?.remove();
-});
-
-const initChart = () => {
-    chart?.dispose();
-    chart = echarts.init(boxRef.value!, null, {
-        renderer: 'svg',
-    });
-};
-const updateChart = (value: number) => {
-    // 清除之前的画布，内存回收
-    bgCanvas?.remove();
-    const limit = 80;
-    const radius = (chart.getHeight() / 2) * 0.8;
-    // —————————————————————————— 画整个圆环的背景色 ——————————————————————————————————
-    bgCanvas = document.createElement('canvas');
-    bgCanvas.width = radius * 2;
-    bgCanvas.height = radius * 2;
-    const ctx = bgCanvas.getContext('2d')!;
-    const gradient = ctx.createRadialGradient(
-        bgCanvas.width * 0.5,
-        bgCanvas.height * 0.5,
-        0,
-        bgCanvas.width * 0.5,
-        bgCanvas.height * 0.5,
-        radius
-    );
-    gradient.addColorStop(
-        0,
-        value < limit ? 'rgba(180,210,255,0.93)' : '#ffffff'
-    );
-    gradient.addColorStop(1, value < limit ? 'rgb(231,241,255)' : '#ffeded');
-    ctx.fillStyle = gradient;
-
-    ctx.beginPath();
-    ctx.arc(radius, radius, radius, 0, Math.PI * 2);
-    ctx.fill();
-
-    // —————————————————————————————————————————————————————————————————————————————
-    const option = {
-        title: {
-            text: 'CPU使用率',
-            left: 'left',
-        },
-        series: [
-            // 水球图
-            {
-                type: 'liquidFill',
-                name: '正常',
-                // 这个更像是直径
-                radius: radius * 2,
-                data: [
-                    {
-                        value: value / 100,
-                    },
-                ],
-                label: {
-                    formatter: `${value}%`,
-                    // 字体大小，自己调
-                    fontSize: 30,
-                    color: '#555',
-                    fontWeight: 'bold',
-                    // 水上部分颜色（可选）
-                    insideColor: value < limit ? '#d7e7ff' : '#ff4f4f',
-                },
-                itemStyle: {
-                    // 水的颜色
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        {
-                            offset: 0,
-                            color: value < limit ? '#8dbaff' : '#ffcdcd',
-                        },
-                        {
-                            offset: 1,
-                            color: value < limit ? '#026eff' : '#ff6363',
-                        },
-                    ]),
-                    // 水的阴影
-                    shadowBlur: 1,
-                },
-                backgroundStyle: {
-                    color: new echarts.graphic.RadialGradient(
-                        0.5,
-                        0.5,
-                        radius / 100,
-                        [
-                            {
-                                offset: 0,
-                                color: '#ffffff',
-                            },
-                            {
-                                offset: 1,
-                                color: value < limit ? '#d7e7ff' : '#ffe2e2',
-                            },
-                        ]
-                    ),
-                    // 阴影
-                    shadowColor: value < limit ? 'rgb(153,190,246)' : '#ffdbdb',
-                    shadowBlur: 100,
-                    shadowOffsetY: 10,
-                },
-                outline: {
-                    show: false,
-                },
-                amplitude: 5, // 振幅
-                waveAnimation: true,
-                z: 1,
-            },
-            // 圆环
-            {
-                type: 'gauge',
-                startAngle: 0,
-                endAngle: 360,
-                radius,
-                // 刻度间隔
-                pointer: {
-                    show: false,
-                },
-                animation: false,
-                progress: {
-                    show: true,
-                    width: 15,
-                    itemStyle: {
-                        // 条纹渐变 → 虚线效果
-                        color: {
-                            image: createLinearGradientRect({
-                                width: radius * 2,
-                                height: radius * 2,
-                                bgColor: bgCanvas,
-
-                                // 下半圆环的裁剪位置
-                                y: radius * 2 * (1 - value / 100),
-
-                                // 下半圆环的颜色
-                                startColor:
-                                    value < limit
-                                        ? 'rgb(255,255,255)'
-                                        : 'rgb(255,214,214)',
-                                endColor:
-                                    value < limit
-                                        ? 'rgb(0,100,255)'
-                                        : 'rgb(255,103,103)',
-                            }), // HTMLCanvasElement
-                            repeat: 'no-repeat',
-                        },
-                    },
-                },
-                axisLine: {
-                    show: false,
-                },
-                // 大刻度
-                splitLine: {
-                    show: false,
-                },
-                // 小刻度
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    show: false,
-                },
-                data: [
-                    {
-                        value: 100,
-                    },
-                ],
-                detail: {
-                    show: false,
-                },
-                z: 2,
-            },
-        ],
-    };
-    chart.setOption(option);
-};
-</script>
-
-<template>
-    <div ref="boxRef" class="c1"></div>
-</template>
-
-<style scoped lang="scss">
-.c1 {
-    height: 300px;
-}
-</style>

package/dist/other/git/sample_set/Document.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import PageLayout from '@/components/PageLayout.vue';
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox
-            title="如何撤回刚刚的提交?"
-            code="git reset --soft HEAD~1"
-            :libs="['git']"
-        >
-            git reset --soft HEAD~1
-        </DemoBox>
-        <DemoBox
-            title="切换远程地址"
-            code="git remote set-url origin"
-            :libs="['git']"
-        >
-            git remote set-url origin &lt;新的仓库地址&gt;
-        </DemoBox>
-        <DemoBox
-            title="如何抹去一些提交记录（慎用）"
-            :libs="['git']"
-            code="git push --force"
-        >
-            <img src="./img/img.png" alt="" />
-
-            操作如下
-
-            <img src="./img/img_1.png" alt="" />
-
-            此时 IDE
-            会提示你拉取远程分支（这是因为此时的本地分支比远程分支少了一些记录），不用理会，然后（只能）强行推送
-            <img src="./img/img_2.png" alt="" />
-        </DemoBox>
-    </PageLayout>
-</template>
-<style scoped lang="scss">
-img {
-    max-width: 100%;
-}
-</style>

package/dist/other/layout/flex/Advanced.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { ref, useTemplateRef } from 'vue';
-import { EInput } from 'exploria-ui';
-
-const count = ref(10);
-const colorList = [
-    '#ca4545',
-    '#c85656',
-    '#6dbf57',
-    '#3dae9c',
-    '#9b4aba',
-    '#ac954a',
-    '#57c393',
-];
-const usingRef = useTemplateRef<HTMLElement>('using');
-const showCount = ref<number>(Infinity);
-const aa = () => {
-    const container = usingRef.value!.querySelector('.flex-box') as HTMLElement;
-    const a = () => {
-        setTimeout(() => {
-            if (collapse.value) {
-                if (showCount.value === count.value) {
-                    collapse.value = false;
-                    showCount.value = Infinity;
-                    return;
-                }
-
-                showCount.value++;
-                a();
-            } else {
-                if (container.clientHeight <= 63 || showCount.value === 1) {
-                    collapse.value = true;
-                    return;
-                }
-                if (showCount.value === Infinity) {
-                    showCount.value = count.value - 1;
-                } else {
-                    showCount.value--;
-                }
-
-                a();
-            }
-        }, 100);
-    };
-    a();
-};
-const collapse = ref(false);
-</script>
-
-<template>
-    <div class="using" ref="using">
-        <div class="header" style="margin-bottom: 10px">
-            <EInput type="number" v-model="count" />
-        </div>
-
-        <div style="display: flex; flex-wrap: wrap; gap: 20px" class="flex-box">
-            <template v-for="num in count" :key="num">
-                <Transition name="fade-in">
-                    <div
-                        style="padding: 20px"
-                        :style="{
-                            backgroundColor:
-                                colorList[Math.floor(num / colorList.length)],
-                        }"
-                        v-if="num <= showCount"
-                    >
-                        {{ num }}
-                    </div>
-                </Transition>
-            </template>
-
-            <div
-                style="
-                    margin-left: auto;
-                    align-self: flex-end;
-                    background-color: rebeccapurple;
-                    padding: 5px;
-                    color: white;
-                "
-                @click="aa"
-            >
-                按钮
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.using {
-    .flex-box {
-        overflow: hidden;
-        transition: height 1s ease;
-    }
-
-    .fade-in-enter-active,
-    .fade-in-leave-active {
-        transition: opacity 0.3s ease;
-    }
-    .fade-in-enter-from,
-    .fade-in-leave-to {
-        opacity: 0;
-    }
-}
-</style>

package/dist/other/layout/flex/Advanced2.vue

@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
-
-const count = 20;
-const colorList = [
-    '#ca4545',
-    '#c85656',
-    '#6dbf57',
-    '#3dae9c',
-    '#9b4aba',
-    '#ac954a',
-    '#57c393',
-];
-
-const padding = 20;
-const collapsedContentHeight = 63;
-const collapsedHeight = collapsedContentHeight + padding * 2;
-
-let timer: ReturnType<typeof setTimeout>;
-const duration = 700;
-const usingRef = useTemplateRef<HTMLElement>('using');
-const aa = () => {
-    const container = usingRef.value!;
-    if (collapse.value) {
-        collapse.value = false; // 显示里层按钮
-        nextTick(() => {
-            container.style.height = 'auto';
-            const { height } = container.getBoundingClientRect();
-
-            const button = container.querySelector('.animation') as HTMLElement;
-            button
-                .animate(
-                    [
-                        {
-                            transform: `translateY(-${height - collapsedHeight}px)`,
-                        },
-                        {
-                            transform: `translateY(0)`,
-                        },
-                    ],
-                    {
-                        duration,
-                    }
-                )
-                .play();
-            container.style.height = `${collapsedHeight}px`;
-            container.clientHeight;
-            container.style.height = `${height}px`;
-            loading.value = true;
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                container.style.height = 'auto';
-                loading.value = false;
-                clearTimeout(timer);
-            }, duration);
-        });
-    } else {
-        container.style.height = `${container.clientHeight}px`;
-        container.clientHeight;
-        container.style.height = `${collapsedHeight}px`;
-        collapse.value = true;
-    }
-};
-const collapse = ref(true);
-const loading = ref(false);
-
-onMounted(() => {
-    usingRef.value!.style.height = `${collapsedHeight}px`;
-});
-const maxWidth = ref('');
-</script>
-
-<template>
-    <div
-        class="using"
-        ref="using"
-        style="
-            display: flex;
-            align-content: flex-start;
-            align-items: flex-start;
-        "
-        v-size-ob="
-            (width: number) => {
-                maxWidth = width / 5 + 'px';
-            }
-        "
-        :style="{
-            padding: `${padding}px`,
-            transition: `height ${duration}ms linear`,
-        }"
-    >
-        <div
-            class="mark"
-            v-if="loading"
-            :style="{
-                padding: `${padding}px`,
-            }"
-        >
-            <div
-                class="animation"
-                style="
-                    margin-left: auto;
-                    align-self: flex-end;
-                    background-color: rebeccapurple;
-                    padding: 5px;
-                    color: white;
-                "
-                @click="aa"
-            >
-                按钮
-            </div>
-        </div>
-        <div
-            style="
-                display: flex;
-                flex-wrap: wrap;
-                gap: 20px;
-                flex: 1;
-                box-sizing: border-box;
-            "
-        >
-            <div
-                style="padding: 20px; flex: 1; min-width: 280px"
-                :style="{
-                    backgroundColor:
-                        colorList[Math.floor(num / colorList.length)],
-                    maxWidth,
-                }"
-                v-for="num in count"
-                :key="num"
-            >
-                {{ num }}
-            </div>
-
-            <div
-                class="animation"
-                style="
-                    margin-left: auto;
-                    align-self: flex-end;
-                    background-color: rebeccapurple;
-                    padding: 5px;
-                    color: white;
-                "
-                :style="{ opacity: loading ? 0 : 1 }"
-                @click="aa"
-                v-show="!collapse"
-            >
-                按钮
-            </div>
-        </div>
-        <div
-            style="
-                margin-left: auto;
-                align-self: flex-end;
-                background-color: rebeccapurple;
-                padding: 5px;
-                color: white;
-            "
-            @click="aa"
-            v-if="collapse"
-        >
-            按钮
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.using {
-    position: relative;
-    overflow: hidden;
-    gap: 20px;
-
-    .mark {
-        position: absolute;
-        display: flex;
-        inset: 0;
-        align-items: flex-end;
-        cursor: not-allowed;
-    }
-}
-</style>

package/dist/other/layout/flex/Base.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const text = ref('123');
-</script>
-
-<template>
-    <div class="using">
-        <div class="header">
-            <input type="text" v-model="text" />
-        </div>
-
-        <div class="flex-box">
-            <div class="a">
-                我是a
-                <br />
-                {{ text }}
-            </div>
-            <div class="b">我是b</div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.using {
-    overflow: auto;
-
-    .flex-box {
-        height: 400px;
-        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #65a596);
-        display: flex;
-        flex-direction: row;
-
-        .a {
-            flex-grow: 1;
-            background-color: rgba(80, 149, 86, 0.56);
-        }
-
-        // 当 .a 的宽度 大于 .flex-box 的宽度的 1/2 时，.b 的宽度会被压缩
-        .b {
-            flex-grow: 1;
-            background-color: rgba(228, 168, 168, 0.46);
-            display: grid;
-            place-items: center;
-        }
-    }
-}
-</style>

package/dist/other/layout/flex/Document.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import BaseCode from './Base.vue?raw';
-import Base from './Base.vue';
-import GridCode from './Grid.vue?raw';
-import Grid from './Grid.vue';
-import PageLayout from '@/components/PageLayout.vue';
-import Height100 from './Height100.vue';
-import Height100Code from './Height100.vue?raw';
-import Advanced from './Advanced.vue';
-import Advanced2 from './Advanced2.vue';
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox title="介绍"> </DemoBox>
-        <DemoBox :code="BaseCode" :libs="[]" title="压缩问题">
-            <Base />
-        </DemoBox>
-
-        <DemoBox :code="Height100Code" :libs="[]" title="高度为父容器的100">
-            <Height100 />
-        </DemoBox>
-
-        <DemoBox
-            :code="GridCode"
-            :libs="['marked', 'xss']"
-            title="API接口流式返回的情况"
-        >
-            <Grid />
-        </DemoBox>
-        <DemoBox :code="GridCode" :libs="[]" title="高级">
-            <Advanced />
-        </DemoBox>
-        <DemoBox :code="GridCode" :libs="[]" title="高级2">
-            <Advanced2 />
-        </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>