exploria-ui-mcp-server 2.0.0

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

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

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

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

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

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

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