exploria-ui-mcp-server 2.0.0

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

@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import { EThreeUtil } from 'exploria-ui';
+import {
+    AmbientLight,
+    AnimationAction,
+    AnimationMixer,
+    Clock,
+    Color,
+    EquirectangularReflectionMapping,
+    GridHelper,
+    type Group,
+    PerspectiveCamera,
+    Scene,
+    SkeletonHelper,
+    TextureLoader,
+    WebGLRenderer,
+} from 'three';
+import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { onMounted, ref, useTemplateRef } from 'vue';
+
+// 网格地面
+const controllerSyncRef = useTemplateRef<HTMLElement>('controller-sync');
+
+let fps = ref(30);
+
+const isPlayingAction = ref(false);
+const isPlayingVideo = ref(false);
+const sliderMaxValue = ref<number>(100); // 动画总帧数
+
+class MyScene {
+    static clock = new Clock();
+    action: AnimationAction | null = null;
+    mixer: AnimationMixer | null = null;
+    model: Group | null = null;
+    controls: OrbitControls | null = null;
+    scene = new Scene();
+    renderer: WebGLRenderer | null = null;
+    camera: PerspectiveCamera | null = null;
+    skeletonHelper: SkeletonHelper | null = null;
+
+    constructor(canvas: HTMLCanvasElement) {
+        this.camera = new PerspectiveCamera(
+            75,
+            canvas.offsetWidth / canvas.offsetHeight,
+            0.1,
+            1000
+        );
+        this.renderer = EThreeUtil.createWebGLRenderer(canvas);
+        this.renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
+        this.controls = EThreeUtil.createControls(this.camera, canvas);
+        this.camera.position.set(0, 200, 500);
+        this.camera.lookAt(0, 20, 0);
+
+        this.addAmbientLight();
+    }
+
+    createAnimationMixer() {
+        this.mixer = new AnimationMixer(this.model!);
+    }
+
+    createAction() {
+        this.action = this.mixer!.clipAction(this.model!.animations[0]!);
+    }
+
+    playAction() {
+        this.action?.reset().fadeIn(0).play();
+    }
+
+    removeModelFromScene() {
+        if (this.model) {
+            this.scene.remove(this.model);
+        }
+    }
+
+    loadModel(src: string) {
+        return new Promise<void>((resolve, reject) => {
+            isLoading.value = true;
+            modelLoadingProgress.value = 0;
+            EThreeUtil.loadFBX(src, (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;
+                    this.model = model;
+                    resolve();
+                })
+                .catch((err) => {
+                    reject(err);
+                })
+                .finally(() => {
+                    isLoading.value = false;
+                });
+        });
+    }
+
+    loadBone(src: string) {
+        return new Promise<void>((resolve, reject) => {
+            isLoading.value = true;
+            modelLoadingProgress.value = 0;
+            EThreeUtil.loadFBX(
+                src,
+                (xhr: { loaded: number; total: number }) => {
+                    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);
+                    this.model = model;
+                    resolve();
+                })
+                .catch((err) => {
+                    reject(err);
+                })
+                .finally(() => {
+                    isLoading.value = false;
+                });
+        });
+    }
+
+    showSkeletonHelperToScene() {
+        if (this.skeletonHelper) {
+            this.scene.remove(this.skeletonHelper);
+        }
+        // 显示骨骼
+        this.skeletonHelper = new SkeletonHelper(this.model!);
+        this.scene.add(this.skeletonHelper);
+    }
+
+    /**
+     * 添加模型到场景
+     */
+    addModelToScene() {
+        this.scene.add(this.model!);
+    }
+
+    /**
+     * 添加环境贴图
+     */
+    addEnvMapTexture() {
+        // 将渐变纹理设置为场景的环境贴图和背景
+        const textureLoader = new TextureLoader();
+        const envMapTexture = textureLoader.load(
+            new URL('/threejs/model/scene/EnvMapTexture.jpg', import.meta.url)
+                .pathname
+        );
+        envMapTexture.mapping = EquirectangularReflectionMapping; //正常只是一张图平铺，设置这个可以让图包围环绕整个环境
+        this.scene.environment = envMapTexture;
+        this.scene.background = envMapTexture;
+    }
+
+    /**
+     * 设置场景背景色
+     * @param color
+     */
+    setBackgroundColor(color: Color) {
+        this.scene.background = color;
+    }
+
+    /**
+     * 添加环境光
+     */
+    addAmbientLight() {
+        const ambientLight = new AmbientLight(0xffffff, 4);
+        this.scene.add(ambientLight);
+    }
+
+    addGridHelper() {
+        const gridHelper = new GridHelper(10000, 200);
+        gridHelper.material.opacity = 0.2;
+        gridHelper.material.transparent = true;
+        this.scene.add(gridHelper);
+    }
+
+    /**
+     * 添加地面
+     */
+    addFloor() {
+        EThreeUtil.loadGlb(
+            new URL('/threejs/model/scene/羽毛球场.glb', import.meta.url)
+                .pathname
+        ).then((model) => {
+            const floor = model.scenes[0]!;
+            floor.castShadow = true;
+            floor.scale.set(70, 70, 70);
+            this.scene.add(floor);
+        });
+    }
+}
+
+const isLoading = ref(false);
+const modelLoadingProgress = ref<number>(0);
+
+const playMotion = () => {
+    isPlayingVideo.value = false;
+    isPlayingAction.value = false;
+
+    // 删除之前的模型
+    scene1?.removeModelFromScene();
+    scene2?.removeModelFromScene();
+    // 同时加载模型
+    Promise.all([
+        scene1?.loadModel(
+            new URL('/threejs/model/motion/双脚内侧踢球.fbx', import.meta.url)
+                .pathname
+        ),
+        scene2?.loadBone(
+            new URL('/threejs/model/bone/双脚内侧踢球.fbx', import.meta.url)
+                .pathname
+        ),
+    ]).then(() => {
+        // 创建动画混合器
+        scene2?.createAnimationMixer();
+        scene1?.createAnimationMixer();
+
+        // 创建骨骼辅助器
+        scene2?.showSkeletonHelperToScene();
+
+        scene2?.addModelToScene();
+        scene1?.addModelToScene();
+
+        scene2?.createAction();
+        scene1?.createAction();
+
+        // 播放动画
+        scene1?.playAction();
+        scene2?.playAction();
+
+        isPlayingAction.value = true;
+    });
+};
+
+let scene1: MyScene | null = null;
+let scene2: MyScene | null = null;
+let controllerScene: MyScene | null = null;
+onMounted(() => {
+    scene1 = new MyScene(
+        controllerSyncRef.value?.querySelector('.canvas-1') as HTMLCanvasElement
+    );
+    scene2 = new MyScene(
+        controllerSyncRef.value?.querySelector('.canvas-2') as HTMLCanvasElement
+    );
+    controllerScene = new MyScene(
+        controllerSyncRef.value?.querySelector(
+            '.controller-canvas'
+        ) as HTMLCanvasElement
+    );
+    scene1.addFloor();
+    scene1.addEnvMapTexture();
+    scene2.addGridHelper();
+    scene2.setBackgroundColor(new Color(0x333333));
+
+    playMotion();
+
+    // 同步两个场景的控制器（观察者模式）
+    controllerScene?.controls?.addEventListener('change', () => {
+        scene1?.controls?.object.copy(controllerScene?.controls!.object!);
+        scene2?.controls?.object.copy(controllerScene?.controls!.object!);
+    });
+
+    // 记录 FPS ——————————————————————————————————————————————— 记录 FPS ————————————
+    const setFPS = (_fps: number) => (fps.value = _fps);
+
+    let count = 0;
+    let prevTimestamp = 0;
+
+    (function animate(timestamp: number) {
+        prevTimestamp = timestamp;
+        count++;
+        // 间隔超过 1s，将之前计算的 count 输出
+        if (timestamp - prevTimestamp >= 1000) {
+            setFPS(count);
+            count = 0;
+        }
+        // ——————————————————————————————————————————————————————————— 记录 FPS ——
+
+        const delta = MyScene.clock.getDelta();
+        scene1?.mixer?.update(delta);
+        scene2?.mixer?.update(delta);
+
+        if (scene1!.action) {
+            sliderMaxValue.value =
+                scene1!.action.getClip().duration * fps.value;
+            // 只有加了这个才能保证同步，注意注意
+            scene2!.action!.time = scene1!.action.time;
+        }
+
+        scene1?.controls?.update();
+        scene2?.controls?.update();
+        scene1?.renderer?.render(scene1.scene, scene1.camera!);
+        scene2?.renderer?.render(scene2.scene, scene2.camera!);
+        requestAnimationFrame((timestamp) => animate(timestamp));
+    })(new Date().getTime());
+});
+</script>
+
+<template>
+    <div class="controller-sync" ref="controller-sync">
+        <div class="canvas-1-container">
+            <canvas class="canvas-1" />
+            <canvas class="controller-canvas" />
+        </div>
+        <canvas class="canvas-2" />
+        <div class="mark" v-show="isLoading">
+            <p>加载中...</p>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.controller-sync {
+    position: relative;
+
+    .mark {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        background-color: rgba(255, 255, 255, 0.5);
+        backdrop-filter: blur(10px);
+    }
+
+    .canvas-1-container {
+        width: 300px;
+        height: 200px;
+        position: relative;
+
+        .controller-canvas {
+            position: absolute;
+            inset: 0;
+        }
+    }
+    .canvas-2 {
+        width: 300px;
+        height: 200px;
+    }
+}
+</style>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import Using from './Using.vue';
+import src from './Using.vue?raw';
+
+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/phoenix/Using.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { EThreeUtil } from 'exploria-ui';
+import * as THREE from 'three';
+import { AmbientLight } from 'three';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
+const threeDRef = useTemplateRef<HTMLCanvasElement>('threeDRef');
+
+// 组件挂载时初始化
+onMounted(() => {
+    const clock = new THREE.Clock();
+    const scene = new THREE.Scene();
+    scene.add(new AmbientLight(0xffffff, 4)); // 添加环境光
+    const canvas = threeDRef.value!;
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+    const camera = EThreeUtil.createCamera(canvas);
+    camera.position.set(0, 0, 400);
+    let mixer: THREE.AnimationMixer | null = null;
+    // 渲染器
+    const renderer = EThreeUtil.createWebGLRenderer(canvas);
+    let animationId: ReturnType<typeof requestAnimationFrame>;
+    // 动画循环
+    function animate() {
+        mixer?.update(clock.getDelta());
+        renderer.render(scene, camera);
+        animationId = requestAnimationFrame(animate);
+    }
+    animate();
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        cancelAnimationFrame(animationId);
+        renderer.dispose();
+    });
+    EThreeUtil.loadGlb('/threejs/model/fenghuang/source/phoenix_bird.glb').then(
+        (gltf) => {
+            gltf.scene.scale.set(-0.4, 0.4, 0.4);
+            gltf.scene.position.set(190, -50, 0);
+            gltf.scene.rotation.set((20 * Math.PI) / 180, 0, 0);
+            scene.add(gltf.scene);
+
+            mixer = new THREE.AnimationMixer(gltf.scene);
+            mixer.clipAction(gltf.animations[0]).play();
+
+            const action = mixer.clipAction(
+                new THREE.AnimationClip('xxx', 3, [
+                    new THREE.KeyframeTrack(
+                        '.position',
+                        [0, 3],
+                        [
+                            [450, -50, 0],
+                            [190, -50, 0],
+                        ].flat()
+                    ),
+                    new THREE.KeyframeTrack(
+                        '.scale',
+                        [0, 3],
+                        [
+                            [-0.5, 0.5, 0.5],
+                            [-0.4, 0.4, 0.4],
+                        ].flat()
+                    ),
+                ])
+            );
+            action.setLoop(THREE.LoopOnce, 1);
+            action.play();
+        }
+    );
+});
+</script>
+<template>
+    <canvas class="three-d" ref="threeDRef" />
+</template>
+<style lang="scss" scoped>
+.three-d {
+    width: 100%;
+    height: 500px;
+}
+</style>

package/dist/other/vue/life_cycle/Child.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+/* -------------- 5. 生命周期钩子 -------------- */
+import {
+    onBeforeMount,
+    onBeforeUnmount,
+    onMounted,
+    onUnmounted,
+    onUpdated,
+    onActivated,
+    onBeforeUpdate,
+    onDeactivated,
+    onErrorCaptured,
+} from 'vue';
+
+console.log('[setup] 同步执行，此时组件实例已创建，但尚未挂载');
+
+onBeforeMount(() => console.log('[onBeforeMount] 挂载前，DOM 还未生成'));
+onMounted(() => console.log('[onMounted] 挂载完成，DOM 已生成'));
+
+onBeforeUpdate(() =>
+    console.log('[onBeforeUpdate] 数据改变，DOM 尚未重新渲染')
+);
+onUpdated(() => console.log('[onUpdated] DOM 重新渲染完成'));
+
+onBeforeUnmount(() => console.log('[onBeforeUnmount] 卸载前，DOM 还存在'));
+onUnmounted(() => console.log('[onUnmounted] 卸载完成，DOM 已销毁'));
+
+/* -------------- 6. 仅对 KeepAlive 有用 -------------- */
+onActivated(() => console.log('[onActivated] 被 KeepAlive 缓存后激活'));
+onDeactivated(() => console.log('[onDeactivated] 被 KeepAlive 缓存后失活'));
+
+/* -------------- 7. 错误捕获 -------------- */
+onErrorCaptured((err, instance, info) => {
+    console.warn('[onErrorCaptured]', err, info, instance);
+    return true; // 返回 true 阻止错误继续向上传播
+});
+</script>
+
+<template>
+    <div>请看控制台的输出</div>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/other/vue/life_cycle/Document.vue

@@ -0,0 +1,15 @@
+<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';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :code="UsingCode" :libs="['vue3']" title="基本用法">
+            <Using />
+            <template #description> Key 对组件生命周期的影响 </template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/dist/other/vue/life_cycle/Using.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+/**
+ * 适用于一次性返回所有内容的场景
+ */
+import { ref } from 'vue';
+import Child from './Child.vue';
+
+const key = ref(0);
+</script>
+
+<template>
+    <div class="using" ref="using">
+        <button @click="key++">Key++</button>
+        <Child :key="key" />
+    </div>
+</template>

package/dist/utils/e_echarts_util/Document.vue

@@ -0,0 +1,14 @@
+<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 />
+        </DemoBox>
+    </PageLayout>
+</template>

package/dist/utils/e_echarts_util/Using.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { init } from 'echarts';
+import { EEchartsUtil } from 'exploria-ui';
+import { onMounted, useTemplateRef } from 'vue';
+const usingRef = useTemplateRef<HTMLDivElement>('usingRef');
+const data = [
+    { value: 1, name: 'A' },
+    { value: 999999999, name: 'B' },
+];
+
+const options = (
+    percentFormatter: (value: number, percent: number) => string
+) => {
+    return {
+        tooltip: {
+            trigger: 'item',
+            formatter: (params: {
+                name: string;
+                value: number;
+                percent: number;
+            }) => {
+                const { name, value, percent } = params;
+                return `${name} - ${percentFormatter(value, percent)}%`;
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                data,
+                label: {
+                    show: true,
+                },
+            },
+        ],
+        legend: {
+            show: true,
+        },
+    };
+};
+
+onMounted(() => {
+    const chart1 = usingRef.value!.querySelector('.chart-1') as HTMLElement;
+    const chart2 = usingRef.value!.querySelector('.chart-2') as HTMLElement;
+
+    const echart1 = init(chart1);
+    const echart2 = init(chart2);
+
+    echart1.setOption(options((_, percent) => percent.toString()));
+    echart2.setOption(
+        options((value, percent) => {
+            return EEchartsUtil.getPieHighPrecisionPercent(
+                value,
+                percent,
+                data,
+                6
+            );
+        })
+    );
+});
+</script>
+
+<template>
+    <div class="using" ref="usingRef">
+        <div class="chart-1"></div>
+        <div class="chart-2"></div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    display: flex;
+    gap: 10px;
+
+    .chart-1,
+    .chart-2 {
+        flex: 1;
+        height: 400px;
+        border: solid 1px rgba(149, 149, 149, 0.49);
+    }
+}
+</style>

package/dist/utils/e_image_util/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> Three.js 基础用法</template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/dist/utils/e_image_util/Using.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EImageUtil } from 'exploria-ui';
+
+const src = ref<string>(new URL('./author_avatar.png', import.meta.url).href);
+const mirror = () => {
+    EImageUtil.mirror(src.value).then((res) => {
+        src.value = URL.createObjectURL(res);
+    });
+};
+</script>
+
+<template>
+    <div class="using">
+        <button @click="mirror">镜像图片</button>
+        <img :src="src" alt="" />
+    </div>
+</template>
+
+<style scoped lang="scss">
+img {
+    height: 100px;
+}
+</style>

package/dist/utils/e_uuid_util/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> Three.js 基础用法</template>
+        </DemoBox>
+    </PageLayout>
+</template>