exploria-ui-mcp-server 2.0.0

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

@@ -0,0 +1,46 @@
+<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/public/other/optimize/Document.vue

@@ -0,0 +1,19 @@
+<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/public/other/optimize/HeavyComp.vue

@@ -0,0 +1,19 @@
+<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/public/other/optimize/Using.vue

@@ -0,0 +1,14 @@
+<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/public/other/optimize/useDefer.ts

@@ -0,0 +1,28 @@
+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/public/other/svg/base/BasicUsing.vue

@@ -0,0 +1,12 @@
+<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/public/other/svg/base/Document.vue

@@ -0,0 +1,24 @@
+<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/public/other/svg/base/FeDisplacementMap/FeDisplacementMap.vue

@@ -0,0 +1,30 @@
+<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/public/other/svg/base/FeDisplacementMap/example/Image.vue

@@ -0,0 +1,41 @@
+<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/public/other/svg/base/FeTurbulence/FeTurbulence.vue

@@ -0,0 +1,28 @@
+<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/public/other/svg/base/FeTurbulence/example/Image.vue

@@ -0,0 +1,41 @@
+<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/public/other/threejs/base/Document.vue

@@ -0,0 +1,17 @@
+<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/public/other/threejs/base/Using.vue

@@ -0,0 +1,127 @@
+<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/public/other/threejs/controller_sync/Document.vue

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