exploria-ui-mcp-server 2.0.0

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

@@ -0,0 +1,195 @@
+<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/public/other/advanced/gsap/ScrollX.vue

@@ -0,0 +1,81 @@
+<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/public/other/advanced/gsap/Timeline.vue

@@ -0,0 +1,30 @@
+<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/public/other/advanced/lottie/BasicUsing.vue

@@ -0,0 +1,33 @@
+<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/public/other/advanced/lottie/Document.vue

@@ -0,0 +1,30 @@
+<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/public/other/advanced/rich_text_editor/Document.vue

@@ -0,0 +1,24 @@
+<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/public/other/advanced/rich_text_editor/RichTextEditor.vue

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