exploria-ui-mcp-server 2.0.0

package/public/other/advanced/sortablejs/ShuttleFrame.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import Sortable from 'sortablejs';
+import { onMounted, ref, useTemplateRef } from 'vue';
+
+// 左右列表数据源
+const leftList = ref(['A', 'B', 'C', 'D', 'E', 'F']);
+const rightList = ref(['G', 'H', 'I', 'J', 'K', 'L']);
+
+const shuttleFrameRef = useTemplateRef<HTMLDivElement>('shuttleFrameRef');
+onMounted(() => {
+    // 获取左右列表DOM元素
+    const leftEl = shuttleFrameRef.value!.querySelector(
+        '.left'
+    ) as HTMLDivElement;
+    const rightEl = shuttleFrameRef.value!.querySelector(
+        '.right'
+    ) as HTMLDivElement;
+    // 配置Sortable组（实现跨列表拖拽）
+
+    const sortableGroup = {
+        name: 'list-group', // 相同name的容器可互相拖拽
+        pull: true, // 允许从当前容器拖出
+        put: true, // 允许拖入当前容器
+    };
+
+    const option = {
+        group: sortableGroup,
+        sort: true, // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
+        animation: 150,
+        chosenClass: 'sortable-chosen', // 被选中项的 css 类名
+        forceFallback: true, // 禁用 HTML5 原生拖拽行为
+        fallbackClass: 'sortable-fallback', // 当使用forceFallback的时候，被复制的dom的css类名
+        fallbackOnBody: true, // 将cloned DOM 元素挂到body元素上。
+        handle: '.iconfont',
+        scroll: true, // 开启拖拽时的自动滚动
+        scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
+        scrollSpeed: 1, // px
+    };
+    // 初始化左侧列表Sortable
+    new Sortable(leftEl, {
+        ...option,
+        onEnd: (evt) => {
+            // 从左侧拖出到右侧
+            if (evt.to === rightEl) {
+                // 移除原列表项
+                const movedItem = leftList.value.splice(evt.oldIndex!, 1)[0];
+                // 添加到目标列表
+                rightList.value.splice(evt.newIndex!, 0, movedItem);
+            } else {
+                // 左侧内部排序（调整数组顺序）
+                const movedItem = leftList.value.splice(evt.oldIndex!, 1)[0];
+                leftList.value.splice(evt.newIndex!, 0, movedItem);
+            }
+        },
+    });
+
+    // 初始化右侧列表Sortable
+    new Sortable(rightEl, {
+        ...option,
+        onEnd: (evt) => {
+            // 从右侧拖出到左侧
+            if (evt.to === leftEl) {
+                const movedItem = rightList.value.splice(evt.oldIndex!, 1)[0];
+                leftList.value.splice(evt.newIndex!, 0, movedItem);
+            } else {
+                // 右侧内部排序
+                const movedItem = rightList.value.splice(evt.oldIndex!, 1)[0];
+                rightList.value.splice(evt.newIndex!, 0, movedItem);
+            }
+        },
+    });
+});
+</script>
+
+<template>
+    <div class="shuttle-frame" ref="shuttleFrameRef">
+        {{ leftList }}<br />
+        {{ rightList }}<br />
+
+        <div class="flex-box">
+            <!-- 左侧列表 -->
+            <div class="list-container left">
+                <div class="item" v-for="item of leftList" :key="item">
+                    <span class="iconfont icon-move" />
+
+                    {{ item }}
+                </div>
+            </div>
+
+            <!-- 右侧列表 -->
+            <div class="list-container right">
+                <div class="item" v-for="item of rightList" :key="item">
+                    <span class="iconfont icon-move" />
+
+                    {{ item }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@font-face {
+    font-family: 'iconfont-shuttle-frame'; /* Project id 5031666 */
+    src:
+        url('iconfont/iconfont.woff2?t=1759854194921') format('woff2'),
+        url('iconfont/iconfont.woff?t=1759854194921') format('woff'),
+        url('iconfont/iconfont.ttf?t=1759854194921') format('truetype');
+}
+
+.iconfont {
+    font-family: 'iconfont-shuttle-frame' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-move:before {
+    content: '\ea28';
+}
+
+.shuttle-frame {
+    .flex-box {
+        display: flex;
+        gap: 20px;
+
+        .list-container {
+            flex: 1;
+            height: 300px;
+            border: solid 1px #ccc;
+            border-radius: 4px;
+            padding: 10px;
+            background-color: #f9f9f9;
+            overflow: auto;
+
+            .item {
+                padding: 8px 12px;
+                margin-bottom: 8px;
+                background-color: #fff;
+                border: 1px solid #eee;
+                border-radius: 4px;
+                transition: all 0.15s;
+                display: flex;
+                align-items: center;
+                user-select: none;
+                gap: 8px;
+
+                .iconfont {
+                    cursor: grab;
+                }
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                &:hover {
+                    background-color: #f0f7ff;
+                    border-color: #409eff;
+                }
+            }
+
+            .sortable-chosen {
+                opacity: 0;
+            }
+
+            :global(.sortable-fallback) {
+                padding: 8px 12px;
+                margin-bottom: 8px;
+                background-color: #fff;
+                border: 1px solid #eee;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                user-select: none;
+                gap: 8px;
+            }
+        }
+    }
+}
+</style>

package/public/other/advanced/sortablejs/Using.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef } from 'vue';
+import Sortable from 'sortablejs';
+
+const using = useTemplateRef<HTMLElement>('using');
+
+const list = ref(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']);
+
+onMounted(() => {
+    new Sortable(using.value!.querySelector('.flex-box') as HTMLElement, {
+        animation: 150,
+        chosenClass: 'sortable-chosen',
+        forceFallback: true,
+        fallbackClass: 'sortable-fallback',
+        fallbackOnBody: true,
+        onEnd: (evt) => {
+            if (evt.oldIndex && evt.newIndex) {
+                const item = list.value.splice(evt.oldIndex, 1)[0]!;
+                list.value.splice(evt.newIndex, 0, item);
+            }
+        },
+        onMove: (evt) => {
+            const target = evt.dragged as HTMLElement;
+            target.style.opacity = '0.5';
+        },
+    });
+});
+</script>
+
+<template>
+    <div class="using" ref="using">
+        {{ list }}
+        <div class="flex-box">
+            <div class="item" v-for="item of list" :key="item">
+                {{ item }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    .flex-box {
+        display: flex;
+        flex-direction: row;
+
+        .item {
+            padding: 10px;
+            background: #ea8383;
+            margin: 10px;
+            display: grid;
+            place-items: center;
+            user-select: none;
+            cursor: move;
+
+            &.sortable-chosen {
+                opacity: 0;
+            }
+
+            :global(.sortable-fallback) {
+                background-color: #ea8383;
+                display: grid;
+                place-items: center;
+            }
+        }
+    }
+}
+</style>

package/public/other/advanced/spelling/Document.vue

@@ -0,0 +1,17 @@
+<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';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :code="UsingRaw" :libs="['pinyin']" title="基本用法">
+            <Using />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/public/other/advanced/spelling/Using.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { pinyin } from 'pinyin';
+import { ECheckbox, EInput, ESelect } from 'exploria-ui';
+
+const text = ref('汉字转拼音');
+
+const styleVal = ref<string>('normal'); // 对应 pinyin 4.0.0 版本的 style 选项
+const enableSegment = ref(true); // 分词（降低多音字错误）
+
+const result = computed<string[]>(() => {
+    if (!text.value.trim()) return [];
+
+    // 不是中文的 全部替换 为 ''
+    const res = pinyin(text.value, {
+        segment: enableSegment.value,
+        heteronym: false, // 是否启用多音字模式，默认不启用
+        style: styleVal.value as any,
+    });
+
+    return res.map((item) => item[0]!);
+});
+</script>
+<template>
+    <section>
+        <div style="display: flex; gap: 15px; margin-bottom: 15px">
+            <EInput
+                v-model="text"
+                type="text"
+                rows="4"
+                placeholder="请输入汉字（自动过滤非汉字）"
+            />
+
+            <ESelect
+                v-model="styleVal"
+                :items="[
+                    {
+                        value: 'normal',
+                        label: '无声调',
+                    },
+                    {
+                        value: 'tone',
+                        label: '带声调',
+                    },
+                    {
+                        value: 'tone2',
+                        label: '数字标声调',
+                    },
+                    {
+                        value: 'first-letter',
+                        label: '首字母',
+                    },
+                ]"
+            />
+
+            <ECheckbox v-model="enableSegment">
+                分词（降低多音字错误）
+            </ECheckbox>
+        </div>
+
+        <p>
+            <!-- replace(/[^\p{L}\p{N}]/gu, '') 去除标点符号 -->
+            <span
+                v-for="(zi, index) of text"
+                :key="zi"
+                :data-pinyin="result[index]"
+            >
+                {{ zi }}
+            </span>
+        </p>
+    </section>
+</template>
+
+<style scoped lang="scss">
+section {
+    .options {
+        margin: 8px 0;
+    }
+
+    label {
+        margin-right: 16px;
+    }
+
+    p {
+        span {
+            position: relative;
+            font-size: 15px;
+            padding: 10px;
+            display: inline-block;
+
+            &::after {
+                content: attr(data-pinyin);
+                display: block;
+                position: absolute;
+                left: 50%;
+                top: -5px;
+                color: #ff1818;
+                font-size: 12px;
+                transform: translateX(-50%);
+            }
+        }
+    }
+}
+</style>

package/public/other/advanced/svg/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/advanced/svg/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/advanced/svg/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/advanced/svg/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/advanced/svg/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/advanced/svg/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/canvas/base/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" :libs="[]" title="基本用法">
+            <Using />
+            <template #description> Three.js 基础用法</template>
+        </DemoBox>
+    </PageLayout>
+</template>