exploria-ui-mcp-server 2.1.4 → 2.2.6

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

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

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

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

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

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

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

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

package/dist/utils/e_echarts_util/Using.vue

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

@@ -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> Three.js 基础用法</template>
-        </DemoBox>
-    </PageLayout>
-</template>

package/dist/utils/e_image_util/Using.vue

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

@@ -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> Three.js 基础用法</template>
-        </DemoBox>
-    </PageLayout>
-</template>