exploria-ui-mcp-server 2.1.4 → 2.2.6

package/dist/other/observer/mutation_observer/Using.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue';
-
-const usingRef = useTemplateRef<HTMLElement>('using');
-
-onMounted(() => {
-    const observer = new MutationObserver((mutationsList) => {
-        for (const mutation of mutationsList) {
-            if (mutation.type === 'childList') {
-                console.log('子元素发生变化：', mutation);
-            } else if (mutation.type === 'attributes') {
-                console.log('属性发生变化：', mutation);
-            }
-        }
-    });
-
-    const config = {
-        childList: true,
-        attributes: true,
-        subtree: true,
-    };
-
-    const targetElement = usingRef.value!.querySelector('.root') as HTMLElement;
-    targetElement.getBoundingClientRect();
-    observer.observe(targetElement, config);
-});
-
-const text = ref('原始内容');
-</script>
-
-<template>
-    <div class="using" ref="using">
-        <input v-model="text" type="text" />
-        <div class="root">
-            <div class="leave" :data-xxx="text">
-                <div>{{ text }}</div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.using {
-    height: 300px;
-}
-</style>

package/dist/other/optimize/Document.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import Using from './Using.vue';
-import UsingRaw from './Using.vue?raw';
-import PageLayout from '@/components/PageLayout.vue';
-
-const section = ['基本用法'];
-</script>
-
-<template>
-    <PageLayout :section="section">
-        <DemoBox :code="UsingRaw" title="基本用法">
-            <Using />
-            <template #description>
-                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
-            </template>
-        </DemoBox>
-    </PageLayout>
-</template>

package/dist/other/optimize/HeavyComp.vue

@@ -1,19 +0,0 @@
-<template>
-    <div class="heavy-comp">
-        <div
-            v-for="n in 7000"
-            :key="n"
-            style="width: 1px; height: 1px; border: solid"
-        />
-    </div>
-</template>
-
-<style scoped>
-.heavy-comp {
-    display: flex;
-    flex-wrap: wrap;
-    border: solid red;
-    margin: 10px;
-    width: 100px;
-}
-</style>

package/dist/other/optimize/Using.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import HeavyComp from './HeavyComp.vue';
-import { useDefer } from './useDefer.ts';
-
-const defer = useDefer(31);
-</script>
-
-<template>
-    <div style="display: flex; flex-wrap: wrap">
-        <template v-for="n in 31" :key="n">
-            <HeavyComp v-if="defer(n)" />
-        </template>
-    </div>
-</template>

package/dist/other/optimize/useDefer.ts

@@ -1,28 +0,0 @@
-import { ref, onUnmounted } from 'vue';
-
-export function useDefer(maxCount = 100) {
-    const frameCount = ref(0);
-
-    let animationId: number;
-
-    function updateFrameCount() {
-        animationId = requestAnimationFrame(() => {
-            frameCount.value++;
-            if (frameCount.value >= maxCount) {
-                return;
-            }
-            updateFrameCount();
-        });
-    }
-
-    updateFrameCount();
-
-    onUnmounted(() => {
-        cancelAnimationFrame(animationId);
-    });
-
-    return function defer(n: number) {
-        // 目前渲染了多少帧 >= 3
-        return frameCount.value >= n;
-    };
-}

package/dist/other/svg/base/BasicUsing.vue

@@ -1,12 +0,0 @@
-<template>
-    <svg class="example">
-        <defs>
-            <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
-                <stop offset="0%" stop-color="red" />
-                <stop offset="100%" stop-color="blue" />
-            </linearGradient>
-        </defs>
-        <rect x="10" y="10" width="100" height="100" fill="url(#gradient)" />
-        <circle r="20" cx="150" cy="50" fill="url(#gradient)" />
-    </svg>
-</template>

package/dist/other/svg/base/Document.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import BasicUsing from './BasicUsing.vue';
-import BasicUsingRaw from './BasicUsing.vue?raw';
-import PageLayout from '@/components/PageLayout.vue';
-import Image from './FeTurbulence/example/Image.vue';
-import ImageCode from './FeTurbulence/example/Image.vue?raw';
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox :code="BasicUsingRaw" :libs="[]" title="基本用法">
-            <BasicUsing />
-            <template #description>
-                可在 &lt;defs /&gt;中定义渐变、图案、掩码等，然后在&lt;svg
-                /&gt;中引用。
-            </template>
-        </DemoBox>
-        <DemoBox :code="ImageCode" :libs="['gsap']" title="故障波纹效果">
-            <Image />
-            <template #description> 故障波纹效果 </template>
-        </DemoBox>
-    </PageLayout>
-</template>

package/dist/other/svg/base/FeDisplacementMap/FeDisplacementMap.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-/**
- * 位置替换滤镜
- */
-</script>
-<template>
-    <div class="feTurbulence">
-        <svg>
-            <defs>
-                <filter id="turbulence">
-                    <!-- 位置替换滤镜 -->
-                    <feTurbulence
-                        type="fractalNoise"
-                        baseFrequency=".01"
-                        numOctaves="10"
-                    />
-                    <!-- 位置替换滤镜、映射置换滤镜、像素位移滤镜 / 错位滤镜 -->
-                    <feDisplacementMap in="SourceGraphic" scale="240" />
-                </filter>
-            </defs>
-        </svg>
-        <img
-            src="../../../../../../assets/author_avatar.png"
-            style="filter: url(#turbulence)"
-            alt=""
-        />
-    </div>
-</template>
-
-<style scoped lang="scss"></style>

package/dist/other/svg/base/FeDisplacementMap/example/Image.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { onMounted, useTemplateRef } from 'vue';
-import gsap from 'gsap';
-
-const boxRef = useTemplateRef<HTMLElement>('box');
-const tl = gsap.timeline();
-onMounted(() => {
-    tl.to(boxRef.value!, { x: 200, duration: 1, rotation: 360 });
-});
-</script>
-
-<template>
-    <div class="example">
-        <svg>
-            <defs>
-                <filter id="blur">
-                    <feGaussianBlur stdDeviation="5" />
-                </filter>
-            </defs>
-        </svg>
-        <img src="@/assets/author_avatar.png" alt="" />
-    </div>
-</template>
-
-<style scoped lang="scss">
-.example {
-    width: 100px;
-    height: 100px;
-    background-color: coral;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-
-    img {
-        width: 100px;
-        height: 100px;
-        filter: url(#blur);
-    }
-}
-</style>

package/dist/other/svg/base/FeTurbulence/FeTurbulence.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-/**
- * 湍流滤镜
- */
-</script>
-<template>
-    <div class="feTurbulence">
-        <svg>
-            <defs>
-                <filter id="turbulence">
-                    <!-- 湍流滤镜 -->
-                    <feTurbulence
-                        type="fractalNoise"
-                        baseFrequency=".01"
-                        numOctaves="10"
-                    />
-                </filter>
-            </defs>
-        </svg>
-        <img
-            src="@/assets/author_avatar.png"
-            style="filter: url(#turbulence)"
-            alt=""
-        />
-    </div>
-</template>
-
-<style scoped lang="scss"></style>

package/dist/other/svg/base/FeTurbulence/example/Image.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { onMounted, useTemplateRef } from 'vue';
-import gsap from 'gsap';
-
-const boxRef = useTemplateRef<HTMLElement>('box');
-const tl = gsap.timeline();
-onMounted(() => {
-    tl.to(boxRef.value!, { x: 200, duration: 1, rotation: 360 });
-});
-</script>
-
-<template>
-    <div class="example">
-        <svg>
-            <defs>
-                <filter id="blur">
-                    <feGaussianBlur stdDeviation="5" />
-                </filter>
-            </defs>
-        </svg>
-        <img src="@/assets/author_avatar.png" alt="" />
-    </div>
-</template>
-
-<style scoped lang="scss">
-.example {
-    width: 100px;
-    height: 100px;
-    background-color: coral;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-
-    img {
-        width: 100px;
-        height: 100px;
-        filter: url(#blur);
-    }
-}
-</style>

package/dist/other/threejs/base/Document.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import src from './Using.vue?raw';
-import Using from './Using.vue';
-import PageLayout from '@/components/PageLayout.vue';
-
-const section = ['基本用法'];
-</script>
-
-<template>
-    <PageLayout :section="section">
-        <DemoBox :code="src" :libs="['three']" title="基本用法">
-            <Using />
-            <template #description> Three.js 基础用法</template>
-        </DemoBox>
-    </PageLayout>
-</template>

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

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import {
-    AmbientLight,
-    AnimationMixer,
-    Clock,
-    EquirectangularReflectionMapping,
-    type Group,
-    PerspectiveCamera,
-    Scene,
-    TextureLoader,
-} from 'three';
-import { onMounted, ref, useTemplateRef } from 'vue';
-import { EThreeUtil } from 'exploria-ui';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-
-// 网格地面
-const threeBaseRef = useTemplateRef<HTMLCanvasElement>('three-base');
-
-let fps = ref(30);
-
-const currentSliderValue = ref<number>(0); // 滑块位置   单位是帧
-const sliderMaxValue = ref<number>(100); // 动画总帧数
-
-const isLoading = ref(false);
-const modelLoadingProgress = ref<number>(0);
-const clock = new Clock();
-onMounted(() => {
-    const scene = new Scene();
-    const canvas = threeBaseRef.value!;
-
-    const camera = new PerspectiveCamera(
-        70,
-        canvas.offsetWidth / canvas.offsetHeight,
-        1, // 最近
-        10000 // 最远
-    );
-    camera.position.set(0, 200, 500);
-    camera.lookAt(0, 20, 0);
-
-    const renderer = EThreeUtil.createWebGLRenderer(canvas); // 创建渲染器
-    renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
-
-    // 创建控制器
-    const controls = new OrbitControls(camera, canvas);
-    controls.enableDamping = true; // 使动画循环使用时阻尼或自转 意思是否有惯性
-    controls.dampingFactor = 0.95; // 阻尼系数，越大则惯性越大
-    controls.screenSpacePanning = false; // 右键拖拽时是否在屏幕空间中
-    controls.minDistance = 300; // 相机距离原点的最小距离
-    controls.maxDistance = 800; // 相机距离原点的最大距离
-    controls.maxPolarAngle = Math.PI * 0.45; // 相机距离原点的最大角度
-    controls.enablePan = false; // 关闭移动
-
-    // 添加环境光
-    const ambientLight = new AmbientLight(0xffffff, 4);
-    scene.add(ambientLight);
-
-    /**
-     * 添加环境贴图
-     */
-    // 将渐变纹理设置为场景的环境贴图和背景
-    const textureLoader = new TextureLoader();
-
-    const envMapTexture = textureLoader.load(
-        '/threejs/model/scene/EnvMapTexture.jpg'
-    );
-    envMapTexture.mapping = EquirectangularReflectionMapping; //正常只是一张图平铺，设置这个可以让图包围环绕整个环境
-    scene.environment = envMapTexture;
-    scene.background = envMapTexture;
-
-    // 添加地板
-    EThreeUtil.loadGlb('/threejs/model/scene/羽毛球场.glb').then((model) => {
-        const floor = model.scenes[0]!;
-        floor.castShadow = true;
-        floor.scale.set(70, 70, 70);
-        scene.add(floor);
-    });
-
-    // —————————————————————————————————— 加载模型 ————————————————————————————————————————
-    isLoading.value = true;
-    modelLoadingProgress.value = 0;
-    EThreeUtil.loadFBX('/threejs/model/motion/单脚内侧踢球.fbx', (xhr) => {
-        modelLoadingProgress.value = parseFloat(
-            ((xhr.loaded / xhr.total) * 100).toFixed(2)
-        );
-    })
-        .then((model: Group) => {
-            modelLoadingProgress.value = 100;
-            // data.scale.set(0.01, 0.01, 0.01);
-            model.castShadow = true;
-
-            // 将模型添加到场景中
-            scene.add(model);
-
-            // ———————————————————————————— 创建动画混合器 ———————————————————————————————————————
-            const mixer = new AnimationMixer(model);
-
-            // ———————————————————————————— 创建动作 ———————————————————————————————————————
-            const action = mixer.clipAction(model.animations[0]!);
-            action.play();
-
-            (function animate() {
-                mixer.update(clock.getDelta());
-                currentSliderValue.value = action.time * fps.value;
-                sliderMaxValue.value = action.getClip().duration * fps.value;
-                // 只有加了这个才能保证同步，注意注意
-
-                controls.update();
-                renderer.render(scene, camera);
-                requestAnimationFrame(animate);
-            })();
-        })
-        .finally(() => {
-            isLoading.value = false;
-        });
-});
-</script>
-
-<template>
-    <canvas ref="three-base" />
-</template>
-
-<style scoped lang="scss">
-canvas {
-    width: 100%;
-    height: 400px;
-}
-</style>

package/dist/other/threejs/controller_sync/Document.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import src from './Using.vue?raw';
-import Using from './Using.vue';
-import PageLayout from '@/components/PageLayout.vue';
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox :code="src" title="基本用法">
-            <Using />
-            <template #description> 几何 </template>
-        </DemoBox>
-    </PageLayout>
-</template>