exploria-ui-mcp-server 2.0.0

package/public/components/layout/e_scroll_x/Document.vue

@@ -0,0 +1,39 @@
+<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';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EScrollX 水平滚动</h2>
+            <p>水平滚动组件用于在有限的空间内展示大量内容。</p>
+        </DemoBox>
+        <DemoBox :code="UsingCode" :libs="[]" title="基本用法">
+            <Using />
+            <template #description></template>
+        </DemoBox>
+        <APITable :data="[]" />
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+.time-picker-demo {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+
+    .left {
+        flex: 1;
+        overflow: auto;
+        padding: 30px;
+    }
+
+    .right {
+        width: 260px;
+    }
+}
+</style>

package/public/components/layout/e_scroll_x/Using.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { EScrollX } from 'exploria-ui';
+
+const color = [
+    '#f00',
+    'rgba(67,105,165,0.34)',
+    '#d38686',
+    '#c15454',
+    '#471e1e',
+    '#0e0505',
+    '#ffa4a4',
+    '#63ca63',
+    '#734e4e',
+];
+</script>
+<template>
+    <EScrollX>
+        <div
+            v-for="item of 9"
+            :key="item"
+            :style="{ backgroundColor: color[item - 1] }"
+            class="item"
+        >
+            {{ item }}
+        </div>
+    </EScrollX>
+</template>
+
+<style scoped lang="scss">
+.e-scroll-y {
+    height: 300px;
+
+    .item {
+        height: 100%;
+        width: 400px;
+    }
+}
+</style>

package/public/components/navigation/e_dropdown/BasicUsage.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { EDropdown, EButton } from 'exploria-ui';
+
+type EPlacement = InstanceType<typeof EDropdown>['placement'];
+const placementList = [
+    ['', 'top-start', 'top', 'top-end', ''],
+    ['left-start', '', '', '', 'right-start'],
+    ['left', '', '', '', 'right'],
+    ['left-end', '', '', '', 'right-end'],
+    ['', 'bottom-start', 'bottom', 'bottom-end', ''],
+] as const;
+</script>
+
+<template>
+    <div class="using">
+        <div class="row" v-for="(row, index) of placementList" :key="index">
+            <template v-for="placement of row">
+                <EDropdown
+                    v-if="placement.length"
+                    trigger="click"
+                    :placement="placement as EPlacement"
+                    :key="placement"
+                >
+                    <EButton>{{ placement }}</EButton>
+                    <template #dropdown>
+                        <div class="dropdown-content">
+                            <div class="item">1</div>
+                            <div class="item">1</div>
+                            <div class="item">1</div>
+                        </div>
+                    </template>
+                </EDropdown>
+                <div v-else />
+            </template>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.using {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .row {
+        display: flex;
+        gap: 10px;
+        justify-content: space-between;
+
+        :global(.dropdown-content) {
+            width: 100px;
+            background-color: #fff;
+            border-radius: 4px;
+        }
+        :global(.item) {
+            padding: 10px;
+            cursor: pointer;
+        }
+        :global(.item:hover) {
+            background-color: #f5f5f5;
+        }
+    }
+}
+</style>

package/public/components/navigation/e_dropdown/Contextmenu.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { EDropdown } from 'exploria-ui';
+</script>
+
+<template>
+    <EDropdown trigger="contextmenu" placement="left-start">
+        <div class="box">右键打开</div>
+        <template #dropdown>
+            <div class="dropdown-content">
+                <div class="item">1</div>
+                <div class="item">1</div>
+                <div class="item">1</div>
+            </div>
+        </template>
+    </EDropdown>
+</template>
+
+<style lang="scss" scoped>
+.box {
+    height: 100px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    display: grid;
+    place-items: center;
+}
+
+.dropdown-content {
+    min-width: 100px;
+    background-color: #fff;
+    border-radius: 4px;
+
+    .item {
+        padding: 10px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #f5f5f5;
+        }
+    }
+}
+</style>

package/public/components/navigation/e_dropdown/Document.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import BasicUsageCode from './BasicUsage.vue?raw';
+import ContextmenuCode from './Contextmenu.vue?raw';
+import HoverTriggerCode from './HoverTrigger.vue?raw';
+import NestedDropdownCode from './NestedDropdown.vue?raw';
+import BasicUsage from './BasicUsage.vue';
+import Contextmenu from './Contextmenu.vue';
+import HoverTrigger from './HoverTrigger.vue';
+import NestedDropdown from './NestedDropdown.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <p>
+                EDropdown
+                是一个下拉菜单组件，用于展示可展开的菜单列表，支持多种触发方式和位置设置。
+            </p>
+        </DemoBox>
+        <DemoBox :code="BasicUsageCode" title="基本用法">
+            <BasicUsage />
+            <template #description>
+                支持多种位置的点击触发下拉菜单，包括上、下、左、右以及各种组合位置。</template
+            >
+        </DemoBox>
+        <DemoBox :code="HoverTriggerCode" title="悬停触发">
+            <HoverTrigger />
+            <template #description>
+                支持多种位置的悬停触发下拉菜单，鼠标悬停在按钮上时显示菜单。</template
+            >
+        </DemoBox>
+        <DemoBox :code="ContextmenuCode" title="右键菜单">
+            <Contextmenu />
+            <template #description>
+                右键点击元素时触发的下拉菜单，可用于实现上下文菜单功能。</template
+            >
+        </DemoBox>
+        <DemoBox :code="NestedDropdownCode" title="嵌套菜单">
+            <NestedDropdown />
+            <template #description>
+                支持多级嵌套的下拉菜单，可通过在菜单项中嵌套 EDropdown
+                组件实现。</template
+            >
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EDropdown Props',
+                    list: [
+                        {
+                            name: 'trigger',
+                            description: '触发方式',
+                            type: 'trigger | click | contextmenu',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                        {
+                            name: 'placement',
+                            description: '下拉菜单位置',
+                            type: 'top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/public/components/navigation/e_dropdown/HoverTrigger.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { EDropdown, EButton } from 'exploria-ui';
+
+type EPlacement = InstanceType<typeof EDropdown>['placement'];
+const placementList = [
+    ['', 'top-start', 'top', 'top-end', ''],
+    ['left-start', '', '', '', 'right-start'],
+    ['left', '', '', '', 'right'],
+    ['left-end', '', '', '', 'right-end'],
+    ['', 'bottom-start', 'bottom', 'bottom-end', ''],
+] as const;
+</script>
+
+<template>
+    <div class="using">
+        <div class="row" v-for="(row, index) of placementList" :key="index">
+            <template v-for="placement of row">
+                <EDropdown
+                    v-if="placement.length"
+                    trigger="hover"
+                    :placement="placement as EPlacement"
+                    :key="placement"
+                >
+                    <EButton>{{ placement }}</EButton>
+                    <template #dropdown>
+                        <div class="dropdown-content">
+                            <div class="item">选项 1</div>
+                            <div class="item">选项 2</div>
+                            <div class="item">选项 3</div>
+                        </div>
+                    </template>
+                </EDropdown>
+                <div v-else />
+            </template>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.using {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .row {
+        display: flex;
+        gap: 10px;
+        justify-content: space-between;
+
+        .dropdown-content {
+            width: 100px;
+            background-color: #fff;
+            border-radius: 4px;
+
+            .item {
+                padding: 10px;
+                cursor: pointer;
+
+                &:hover {
+                    background-color: #f5f5f5;
+                }
+            }
+        }
+    }
+}
+</style>

package/public/components/navigation/e_dropdown/NestedDropdown.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { EDropdown, EButton } from 'exploria-ui';
+import { reactive } from 'vue';
+
+const openMap = reactive<
+    Record<
+        'level2' | 'level3',
+        {
+            open: boolean;
+            timer: ReturnType<typeof setTimeout> | null;
+        }
+    >
+>({
+    level2: {
+        open: false,
+        timer: null,
+    },
+    level3: {
+        open: false,
+        timer: null,
+    },
+});
+const delayClose = (level: 'level2' | 'level3') => {
+    openMap[level].timer = setTimeout(() => {
+        openMap[level].open = false;
+    }, 100);
+};
+const _clearTimeout = (timer: ReturnType<typeof setTimeout> | null) => {
+    timer && clearTimeout(timer);
+};
+</script>
+
+<template>
+    <div class="using">
+        <EDropdown trigger="click" placement="bottom">
+            <EButton>嵌套下拉菜单</EButton>
+            <template #dropdown>
+                <div>
+                    <div class="item">一级选项 1</div>
+                    <div class="item">一级选项 2</div>
+                    <EDropdown
+                        placement="right-end"
+                        :open="openMap.level2.open"
+                    >
+                        <div
+                            class="item"
+                            @mouseenter="
+                                () => {
+                                    openMap.level2.open = true;
+                                    _clearTimeout(openMap.level2.timer);
+                                }
+                            "
+                            @mouseleave="
+                                () => {
+                                    delayClose('level2');
+                                }
+                            "
+                        >
+                            一级选项 3 ▶
+                        </div>
+                        <template #dropdown>
+                            <div
+                                @mouseenter="
+                                    () => {
+                                        openMap.level2.open = true;
+                                        _clearTimeout(openMap.level2.timer);
+                                    }
+                                "
+                                @mouseleave="
+                                    () => {
+                                        delayClose('level2');
+                                    }
+                                "
+                            >
+                                <div class="item">二级选项 1</div>
+                                <div class="item">二级选项 2</div>
+                                <EDropdown
+                                    placement="right"
+                                    :open="openMap.level3.open"
+                                >
+                                    <div
+                                        class="item"
+                                        @mouseenter="
+                                            () => {
+                                                openMap.level3.open = true;
+                                                _clearTimeout(
+                                                    openMap.level3.timer
+                                                );
+                                            }
+                                        "
+                                        @mouseleave="delayClose('level3')"
+                                    >
+                                        二级选项 3 ▶
+                                    </div>
+                                    <template #dropdown>
+                                        <div
+                                            @mouseenter="
+                                                () => {
+                                                    openMap.level2.open = true;
+                                                    _clearTimeout(
+                                                        openMap.level2.timer
+                                                    );
+                                                    _clearTimeout(
+                                                        openMap.level3.timer
+                                                    );
+                                                }
+                                            "
+                                            @mouseleave="
+                                                () => {
+                                                    delayClose('level3');
+                                                    delayClose('level2');
+                                                }
+                                            "
+                                        >
+                                            <div class="item">三级选项 1</div>
+                                            <div class="item">三级选项 2 ▶</div>
+                                        </div>
+                                    </template>
+                                </EDropdown>
+                            </div>
+                        </template>
+                    </EDropdown>
+                    <div class="item">一级选项 4</div>
+                </div>
+            </template>
+        </EDropdown>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.using {
+    .item {
+        height: 40px;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+
+        &:hover {
+            background-color: #f5f5f5;
+        }
+    }
+}
+</style>

package/public/components/navigation/e_tabs/Document.vue

@@ -0,0 +1,33 @@
+<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';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">本页面将为你呈现 LxTabs</DemoBox>
+        <DemoBox :code="UsingCode" title="基本用法">
+            <Using />
+            <template #description></template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'ETabs Props',
+                    list: [
+                        {
+                            name: 'modelValue',
+                            description: '当前选中的 name',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/public/components/navigation/e_tabs/Using.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ETabPane, ETabs } from 'exploria-ui';
+import { ESelect } from 'exploria-ui';
+import { ref } from 'vue';
+
+const activeName = ref<string>('1');
+type Placement = InstanceType<typeof ETabs>['placement'];
+const placement = ref<Placement>('top-start');
+const placementList = [
+    { label: 'top-start', value: 'top-start' },
+    { label: 'top', value: 'top' },
+    { label: 'top-end', value: 'top-end' },
+    { label: 'bottom-start', value: 'bottom-start' },
+    { label: 'bottom', value: 'bottom' },
+    { label: 'bottom-end', value: 'bottom-end' },
+    { label: 'left-start', value: 'left-start' },
+    { label: 'left', value: 'left' },
+    { label: 'left-end', value: 'left-end' },
+    { label: 'right-start', value: 'right-start' },
+    { label: 'right', value: 'right' },
+    { label: 'right-end', value: 'right-end' },
+];
+</script>
+
+<template>
+    <div class="using">
+        <ESelect v-model="placement" :items="placementList" />
+        <ETabs v-model="activeName" :placement="placement">
+            <ETabPane name="1" label="Card 1"> 我是 Card 1 </ETabPane>
+            <ETabPane name="2" label="Card 222222"> 我是 Card 2 </ETabPane>
+        </ETabs>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.e-tabs {
+    margin-top: 10px;
+    height: 200px;
+}
+</style>

package/public/directives/e_uuid_util/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" title="镜像图片">
+            <Using />
+            <template #description> Three.js 基础用法</template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/public/directives/e_uuid_util/Using.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { EUUIDUtil } from 'exploria-ui';
+import { ref } from 'vue';
+
+const uuid = ref<string>('');
+</script>
+
+<template>
+    <div class="using">
+        <button @click="uuid = EUUIDUtil.generate()">生成 UUID</button>
+        {{ uuid }}
+    </div>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
+import gsap from 'gsap';
+
+const boxRef = useTemplateRef<HTMLElement>('box');
+
+onMounted(() => {
+    gsap.to(boxRef.value!, { x: 200, duration: 1, rotation: 360 });
+});
+</script>
+
+<template>
+    <div ref="box" class="box">Hello GSAP</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/gsap/Document.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import BasicUsing from './BasicUsing.vue';
+import BasicUsingRaw from './BasicUsing.vue?raw';
+import Timeline from './Timeline.vue';
+import TimelineRaw from './Timeline.vue?raw';
+import PageLayout from '@/components/PageLayout.vue';
+import ScrollTrigger from './ScrollTrigger.vue';
+import ScrollTriggerCode from './ScrollTrigger.vue?raw';
+import ScrollX from './ScrollX.vue';
+import ScrollXCode from './ScrollX.vue?raw';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox :code="BasicUsingRaw" :libs="['gsap']" title="基本用法">
+            <BasicUsing />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+        <DemoBox :code="TimelineRaw" :libs="['gsap']" title="时间线">
+            <Timeline />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+        <DemoBox
+            :code="ScrollTriggerCode"
+            :libs="['gsap']"
+            title="滚动触发动画"
+        >
+            <ScrollTrigger />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+        <DemoBox :code="ScrollXCode" :libs="['gsap']" title="水平滚动">
+            <ScrollX />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>