exploria-ui-mcp-server 2.1.4 → 2.2.6

package/dist/other/advanced/gsap/ScrollTrigger.vue

@@ -1,195 +0,0 @@
-<script setup lang="ts">
-import { onMounted, useTemplateRef } from 'vue';
-import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-
-const usingRef = useTemplateRef<HTMLElement>('using');
-gsap.registerPlugin(ScrollTrigger);
-
-onMounted(() => {
-    // 创建立方体展开动画时间线
-    const timeline = gsap.timeline({
-        scrollTrigger: {
-            scroller: usingRef.value!.querySelector('.content'),
-            trigger: usingRef.value!.querySelector('.content'),
-            start: 'top top',
-            end: 'bottom top',
-            scrub: true, // 根据滚动位置控制动画速度
-        },
-    });
-
-    // 展开动画：只用 top/left 移动，不动 transform
-    timeline
-        .to(usingRef.value!.querySelector('.cube'), {
-            rotationX: 45,
-            y: 100,
-            duration: 2,
-            ease: 'power1.inOut',
-        })
-        .to(usingRef.value!.querySelector('.face.front'), {
-            rotationY: 0,
-            duration: 1,
-            ease: 'power1.inOut',
-        })
-        .to(usingRef.value!.querySelector('.face.right'), {
-            rotationY: 0,
-            duration: 2,
-            ease: 'power1.inOut',
-        })
-        .to(
-            usingRef.value!.querySelector('.cube'),
-            {
-                x: -100,
-                duration: 2,
-                ease: 'power1.inOut',
-            },
-            '-=1'
-        )
-        .to(usingRef.value!.querySelector('.face.top'), {
-            rotationX: 0,
-            duration: 1,
-            ease: 'power1.inOut',
-        })
-        .to(usingRef.value!.querySelector('.face.bottom'), {
-            rotationX: 0,
-            duration: 1,
-            ease: 'power1.inOut',
-        })
-        .to(usingRef.value!.querySelector('.face.left'), {
-            rotationY: 0,
-            duration: 1,
-            ease: 'power1.inOut',
-        });
-});
-</script>
-
-<template>
-    <div class="using" ref="using">
-        <div class="cube">
-            <div class="face back">后面</div>
-            <div class="face right">
-                <div class="relative-box">
-                    右面
-                    <div class="face front">前面</div>
-                </div>
-            </div>
-            <div class="face left">左面</div>
-            <div class="face top">上面</div>
-            <div class="face bottom">下面</div>
-        </div>
-
-        <div class="content">
-            <div class="content-section">
-                <div>
-                    <h1>3D立方体展开动画</h1>
-                    <p>继续滚动查看神奇效果</p>
-                </div>
-            </div>
-
-            <div class="content-section">
-                <div>
-                    <h2>观察每个面的运动</h2>
-                    <p>每个面都会平滑地展开到指定位置</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.using {
-    height: 500px;
-    position: relative;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    display: grid;
-    place-items: center;
-
-    .cube {
-        $size: 180px;
-        width: $size;
-        height: $size;
-        position: relative;
-        overflow: visible;
-        transform-style: preserve-3d;
-        perspective: 1000px;
-
-        .face {
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            transform-style: preserve-3d;
-            display: grid;
-            place-items: center;
-            font-size: 24px;
-            font-weight: bold;
-            color: white;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-            transition: all 0.3s ease;
-
-            &.back {
-                background-color: rgba(0, 255, 255, 0.16);
-            }
-
-            &.top {
-                top: -#{$size};
-                transform: rotateX(-90deg);
-                background-color: rgba(72, 255, 0, 0.16);
-                transform-origin: bottom center;
-            }
-
-            &.bottom {
-                bottom: -#{$size};
-                transform: rotateX(90deg);
-                background-color: rgba(255, 0, 221, 0.16);
-                transform-origin: top center;
-            }
-
-            &.left {
-                left: -#{$size};
-                background-color: rgba(0, 42, 255, 0.16);
-                transform-origin: right center;
-                transform: rotateY(90deg);
-            }
-
-            &.right {
-                right: -#{$size};
-                background-color: rgba(0, 42, 255, 0.16);
-                transform-origin: left center;
-                transform: rotateY(-90deg);
-
-                .relative-box {
-                    width: 100%;
-                    height: 100%;
-                    position: relative;
-                    display: grid;
-                    place-items: center;
-                    transform-style: preserve-3d;
-
-                    .front {
-                        right: -#{$size};
-                        background-color: rgba(0, 255, 255, 0.16);
-                        transform-origin: left center;
-                        transform: rotateY(-90deg);
-                    }
-                }
-            }
-        }
-    }
-
-    .content {
-        position: absolute;
-        inset: 0;
-        overflow-y: auto;
-
-        .content-section {
-            overflow: hidden;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: rgba(255, 255, 255, 0.52);
-            text-align: center;
-        }
-    }
-}
-</style>

package/dist/other/advanced/gsap/ScrollX.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { onMounted, useTemplateRef } from 'vue';
-import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-
-const usingRef = useTemplateRef<HTMLElement>('using');
-gsap.registerPlugin(ScrollTrigger);
-
-onMounted(() => {
-    const scrollX = usingRef.value!.querySelector('.scroll-x') as HTMLElement;
-    // 创建立方体展开动画时间线
-    const timeline = gsap.timeline({
-        scrollTrigger: {
-            scroller: usingRef.value,
-            trigger: scrollX,
-            start: 'top top',
-            end: 'bottom top',
-            markers: true,
-            pin: true, // 固定 scrollX，使其不随滚动而移动
-            scrub: 1, // 根据滚动位置控制动画速度
-        },
-    });
-
-    const content = scrollX.querySelector('.content') as HTMLElement;
-
-    // 展开动画：只用 top/left 移动，不动 transform
-    timeline.to(content, {
-        x: -3500,
-        ease: 'none',
-    });
-});
-</script>
-
-<template>
-    <div class="using" ref="using">
-        <div style="height: 300px">1</div>
-        <div class="scroll-x">
-            <div class="content">
-                <div class="card" style="background-color: #ef7676" />
-                <div class="card" style="background-color: #466c66" />
-                <div
-                    class="card"
-                    style="background-color: rgba(255, 180, 223, 0.93)"
-                />
-                <div
-                    class="card"
-                    style="background-color: rgba(180, 210, 255, 0.93)"
-                />
-                <div class="card" style="background-color: #68bd68" />
-            </div>
-        </div>
-        <div style="height: 300px; background-color: #1b302d" />
-        <div style="height: 300px; background-color: #b98c2a" />
-    </div>
-</template>
-
-<style scoped lang="scss">
-.using {
-    height: 300px;
-    overflow: auto;
-
-    .scroll-x {
-        height: 100%;
-        overflow-x: hidden;
-        position: sticky;
-        top: 0;
-
-        .content {
-            height: 100%;
-            display: flex;
-            justify-content: flex-end;
-
-            .card {
-                flex-shrink: 0;
-                height: 100%;
-                width: 700px;
-            }
-        }
-    }
-}
-</style>

package/dist/other/advanced/gsap/Timeline.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { onMounted, useTemplateRef } from 'vue';
-import gsap from 'gsap';
-
-const box = useTemplateRef<HTMLElement>('box');
-
-onMounted(() => {
-    const timeline = gsap.timeline();
-    timeline
-        .to(box.value, { x: 100, duration: 1 })
-        .to(box.value, { y: -100, rotation: 180, duration: 1, scale: 0.5 })
-        .to(box.value, { y: 0, duration: 1, scale: 1 });
-});
-</script>
-
-<template>
-    <div ref="box" class="box">Timeline</div>
-</template>
-
-<style scoped lang="scss">
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: coral;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-}
-</style>

package/dist/other/advanced/lottie/BasicUsing.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import lottie from 'lottie-web';
-import { onMounted, onUnmounted, useTemplateRef } from 'vue';
-
-const animationSpeed = 1;
-
-const usingRef = useTemplateRef('using');
-onMounted(() => {
-    const animation = lottie.loadAnimation({
-        container: usingRef.value!, // 绑定dom节点
-        renderer: 'svg', // 渲染方式:svg、canvas
-        loop: true, // 是否循环播放，默认：false
-        autoplay: true, // 是否自动播放, 默认true
-        // AE动画使用bodymovie导出为json数据
-        // animationData:
-    });
-
-    animation.setSpeed(animationSpeed);
-    animation.play();
-    onUnmounted(() => {
-        animation.destroy();
-    });
-});
-</script>
-<template>
-    <div class="using" ref="using" />
-</template>
-
-<style lang="scss" scoped>
-.using {
-    height: 400px;
-}
-</style>

package/dist/other/advanced/lottie/Document.vue

@@ -1,30 +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 { EList } from 'exploria-ui';
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox :code="BasicUsingRaw" :libs="['lottie-web']" title="基本用法">
-            <BasicUsing />
-            <template #description>
-                Lottie 相关网站:
-                <EList
-                    :data="[
-                        {
-                            label: 'Lottie 官网',
-                            link: 'https://lottie.airbnb.tech/#/',
-                        },
-                    ]"
-                >
-                    <template #default="{ row }">
-                        <a :href="row.link">{{ row.label }}</a>
-                    </template>
-                </EList>
-            </template>
-        </DemoBox>
-    </PageLayout>
-</template>

package/dist/other/advanced/rich_text_editor/Document.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import RichTextEditor from './RichTextEditor.vue';
-import RichTextEditorCode from './RichTextEditor.vue?raw';
-import PageLayout from '@/components/PageLayout.vue';
-import { ref } from 'vue';
-
-const html = ref('');
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox
-            :code="RichTextEditorCode"
-            :libs="['@wangeditor/editor-for-other']"
-            title="基本用法"
-        >
-            <RichTextEditor v-model:html="html" placeholder="请输入" />
-            <template #description>
-                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
-            </template>
-        </DemoBox>
-    </PageLayout>
-</template>

package/dist/other/advanced/rich_text_editor/RichTextEditor.vue

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-/**
- * 富文本编辑器
- */
-// import '@wangeditor/editor/dist/css/style.css' // 引入 css，之前用的是 npm 现在是 pnpm
-import './wangeditor_style.css'; // 引入 css
-import { computed, onBeforeUnmount, shallowRef, watch } from 'vue';
-// @ts-ignore
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
-// @ts-ignore
-import type { IDomEditor, IEditorConfig } from '@wangeditor/editor';
-
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef<IDomEditor>();
-
-const { html, disabled, placeholder } = defineProps<{
-    html: string;
-    disabled?: boolean;
-    placeholder?: string;
-}>();
-
-const emits = defineEmits<{
-    'update:html': [string];
-    blur: [void];
-    focus: [void]; // 实验中
-}>();
-
-// 内容 HTML
-const computedHtml = computed({
-    get() {
-        return html;
-    },
-    set(html: string) {
-        emits('update:html', html);
-    },
-});
-
-const toolbarConfig = {
-    excludeKeys: [
-        'fullScreen', // 去掉全屏按钮
-        'uploadImage', // 去掉上传图片按钮
-        'uploadVideo', // 去掉上传视频按钮
-        'codeBlock', // 去掉代码块按钮
-        'insertTable', // 去掉插入表格按钮
-        'insertVideo', // 去掉插入视频按钮
-        'insertImage', // 去掉插入图片按钮
-    ],
-};
-
-const editorConfig: Partial<IEditorConfig> = {
-    // Partial 的作用是将一个对象类型的所有属性都变为可选属性
-    placeholder,
-    readOnly: disabled,
-};
-
-// 组件销毁时，也及时销毁编辑器
-onBeforeUnmount(() => {
-    const editor = editorRef.value;
-    if (editor == null) return;
-    editor.destroy();
-});
-
-watch(
-    () => disabled,
-    (newVal: boolean) => {
-        if (newVal) {
-            // 禁用编辑器，设置为只读
-            editorRef.value?.disable();
-        } else {
-            // 取消禁用，取消只读
-            editorRef.value?.enable();
-        }
-    }
-);
-
-const handleCreated = (editor: IDomEditor) => {
-    editorRef.value = editor; // 记录 editor 实例，重要！
-};
-</script>
-
-<template>
-    <div class="rich-text-editor">
-        <Toolbar
-            style="border-bottom: 1px solid #ccc"
-            :editor="editorRef"
-            :defaultConfig="toolbarConfig"
-            mode="default"
-        />
-        <Editor
-            style="height: 400px; overflow-y: hidden"
-            v-model="computedHtml"
-            @onBlur="emits('blur')"
-            @onFocus="emits('focus')"
-            :defaultConfig="editorConfig"
-            mode="default"
-            @onCreated="handleCreated"
-        />
-    </div>
-</template>
-
-<style scoped lang="scss">
-.rich-text-editor {
-    border: 1px solid #ccc;
-}
-</style>