exploria-ui-mcp-server 2.1.4 → 2.2.6

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

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

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

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

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

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

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

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

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

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

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

@@ -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" :libs="[]" title="基本用法">
-            <Using />
-            <template #description> Three.js 基础用法</template>
-        </DemoBox>
-    </PageLayout>
-</template>