exploria-ui-mcp-server 2.0.0

package/dist/components/basic/e_card/Document.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import APITable from '@/components/APITable.vue';
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import PageLayout from '@/components/PageLayout.vue';
+
+import BasicCard from './BasicCard.vue';
+import ComplexContentCard from './ComplexContentCard.vue';
+import CustomHeaderCard from './CustomHeaderCard.vue';
+import ShadowCard from './ShadowCard.vue';
+import FooterCard from './FooterCard.vue';
+import BorderlessCard from './BorderlessCard.vue';
+import SizesCard from './SizesCard.vue';
+
+import BasicCardCode from './BasicCard.vue?raw';
+import ComplexContentCardCode from './ComplexContentCard.vue?raw';
+import CustomHeaderCardCode from './CustomHeaderCard.vue?raw';
+import ShadowCardCode from './ShadowCard.vue?raw';
+import FooterCardCode from './FooterCard.vue?raw';
+import BorderlessCardCode from './BorderlessCard.vue?raw';
+import SizesCardCode from './SizesCard.vue?raw';
+
+const columns = [
+    {
+        prop: 'name',
+        label: '名称',
+        width: 150,
+    },
+    {
+        prop: 'description',
+        label: '描述',
+    },
+    {
+        prop: 'type',
+        label: '类型',
+        width: 150,
+    },
+    {
+        prop: 'default',
+        label: '默认值',
+        width: 150,
+    },
+];
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ECard 卡片</h2>
+            <p>
+                卡片组件是一个容器型组件，用于展示信息或包裹其他组件，提供了多种样式和尺寸选项。
+            </p>
+        </DemoBox>
+
+        <DemoBox title="基础使用" :code="BasicCardCode">
+            <BasicCard />
+        </DemoBox>
+
+        <DemoBox title="复杂内容卡片" :code="ComplexContentCardCode">
+            <ComplexContentCard />
+        </DemoBox>
+        <DemoBox title="自定义头部卡片" :code="CustomHeaderCardCode">
+            <CustomHeaderCard />
+        </DemoBox>
+        <DemoBox title="阴影卡片" :code="ShadowCardCode">
+            <ShadowCard />
+        </DemoBox>
+        <DemoBox title="底部卡片" :code="FooterCardCode">
+            <FooterCard />
+        </DemoBox>
+        <DemoBox title="无边框卡片" :code="BorderlessCardCode">
+            <BorderlessCard />
+        </DemoBox>
+        <DemoBox title="尺寸卡片" :code="SizesCardCode">
+            <SizesCard />
+        </DemoBox>
+        <APITable
+            :columns="columns"
+            :data="[
+                {
+                    subTitle: 'ECard Props',
+                    list: [
+                        {
+                            name: 'title',
+                            description: '卡片标题',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            name: 'subTitle',
+                            description: '卡片副标题',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            name: 'bordered',
+                            description: '是否显示边框',
+                            type: 'boolean',
+                            required: false,
+                        },
+                        {
+                            name: 'shadow',
+                            description:
+                                '阴影效果，可选值：none、small、medium、large',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            name: 'size',
+                            description:
+                                '卡片尺寸，可选值：small、medium、large',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            name: 'headerHeight',
+                            description: '自定义头部高度',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            name: 'footerHeight',
+                            description: '自定义底部高度',
+                            type: 'string',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/dist/components/basic/e_card/FooterCard.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { EButton, ECard } from 'exploria-ui';
+</script>
+<template>
+    <ECard title="带操作区的卡片">
+        这个卡片包含了底部操作区，可以放置按钮等操作元素。
+        <template #footer>
+            <EButton type="primary">确定</EButton>
+            <EButton>取消</EButton>
+        </template>
+    </ECard>
+</template>

package/dist/components/basic/e_card/ShadowCard.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="demo-row">
+        <ECard title="小阴影" shadow="light">
+            <p>这个卡片具有较小的阴影效果。</p>
+        </ECard>
+        <ECard title="中阴影" shadow="medium">
+            <p>这个卡片具有中等的阴影效果。</p>
+        </ECard>
+        <ECard title="大阴影" shadow="heavy">
+            <p>这个卡片具有较大的阴影效果。</p>
+        </ECard>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ECard } from 'exploria-ui';
+</script>
+
+<style scoped>
+.demo-row {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.demo-row > * {
+    flex: 1;
+    min-width: 200px;
+}
+</style>

package/dist/components/basic/e_card/SizesCard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ECard } from 'exploria-ui';
+</script>
+<template>
+    <div class="demo-row">
+        <ECard title="小尺寸卡片" size="small">
+            这是一个小尺寸的卡片，具有较小的内边距和字体大小。
+        </ECard>
+        <ECard title="中尺寸卡片" size="medium">
+            这是一个中尺寸的卡片，是默认的卡片尺寸。
+        </ECard>
+        <ECard title="大尺寸卡片" size="large">
+            这是一个大尺寸的卡片，具有较大的内边距和字体大小。
+        </ECard>
+    </div>
+</template>
+
+<style scoped>
+.demo-row {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+.demo-row > * {
+    flex: 1;
+    min-width: 300px;
+}
+</style>

package/dist/components/basic/e_svg_icon/Document.vue

@@ -0,0 +1,38 @@
+<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';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ESvgIcon 图标</h2>
+            <p>图标组件，用于显示图标。</p>
+        </DemoBox>
+        <DemoBox :code="UsingRaw" title="基本用法">
+            <Using />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'ESvgIcon Props',
+                    list: [
+                        {
+                            name: 'symbol-id',
+                            description: 'symbol-id',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/dist/components/basic/e_svg_icon/Using.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ESvgIcon } from 'exploria-ui';
+</script>
+
+<template>
+    <ESvgIcon symbol-id="#icon-copy" style="width: 30px; height: 30px" />
+</template>

package/dist/components/basic/e_underline/BaseUsing.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { EUnderLine } from 'exploria-ui';
+</script>
+<template>
+    <EUnderLine>
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+    </EUnderLine>
+</template>

package/dist/components/basic/e_underline/Document.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import BaseUsing from './BaseUsing.vue';
+import BaseUsingRaw from './BaseUsing.vue?raw';
+import ImgUsingRaw from './ImgUsing.vue?raw';
+import ImgUsing from './ImgUsing.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EUnderline 下划线</h2>
+            <p>下划线组件用于给文本添加下划线动画效果。</p>
+        </DemoBox>
+        <DemoBox :code="BaseUsingRaw" title="基本用法">
+            <BaseUsing />
+            <template #description> 给文本添加下划线动画。 </template>
+        </DemoBox>
+        <DemoBox :code="ImgUsingRaw" title="图片也同样支持">
+            <ImgUsing />
+            <template #description> 图片也同样支持。 </template>
+        </DemoBox>
+        <APITable subTitle="EUnderline Props" :data="[]" />
+    </PageLayout>
+</template>

package/dist/components/basic/e_underline/ImgUsing.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { EUnderLine } from 'exploria-ui';
+</script>
+<template>
+    <EUnderLine>
+        <img
+            src="../../../../../../assets/author_avatar.png"
+            alt="测试图片"
+            style="width: 50px"
+        />
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        <img
+            src="../../../../../../assets/author_avatar.png"
+            alt="测试图片"
+            style="width: 50px"
+        />
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        设计的佛i接送i房地局送到附近设计的佛i睡觉哦i发动机哦时间佛i接送地方建瓯市丹佛技术都i放假哦i是丹佛ii收到发
+        毽球，又称毽子，是一种隔网相争的体育项目，也是中国汉族传统民间体育活动，
+        从中国古老的民间踢毽子游戏演变而来。据历史文献和出土文物证明，毽球起源于中国汉代，
+        盛行于六朝、隋、唐。1956年，中国毽球举办第一次正式比赛，并制定了简单的规则；
+        1984年，原国家体委将毽球列为正式比赛项目，并组织了全国毽球邀请赛，同年，
+        <a
+            target="_blank"
+            href="https://www.sport.gov.cn/n20001280/n20001265/n20067611/c20106918/content.html"
+            >《毽球竞赛规则》</a
+        >
+        诞生。
+    </EUnderLine>
+</template>

package/dist/components/data/e_calendar/Document.vue

@@ -0,0 +1,41 @@
+<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 title="介绍">
+            <h2>ECalendar 日历</h2>
+            <p>
+                日历组件，用于展示和选择日期，支持月份导航和当天快速定位功能。
+            </p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <template #description>
+                基本的日历组件用法，展示当前月份的日期，支持月份切换和当天定位。
+            </template>
+            <Using />
+        </DemoBox>
+    </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/dist/components/data/e_calendar/Using.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ECalendar } from 'exploria-ui';
+import { ref } from 'vue';
+const date = ref(new Date());
+</script>
+
+<template>
+    <ECalendar v-model:modelValue="date" style="max-width: 500px" />
+</template>

package/dist/components/data/e_carousel/Document.vue

@@ -0,0 +1,143 @@
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ECarousel 轮播图</h2>
+            <p>轮播图组件用于展示多张图片或内容的轮播效果。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <template #description>
+                轮播图组件用于展示多张图片或内容的轮播效果。
+            </template>
+            <Using />
+        </DemoBox>
+        <DemoBox :code="src1" title="自定义自动播放间隔">
+            <template #description>
+                通过 interval 属性设置自动播放的间隔时间，单位为毫秒。
+            </template>
+            <Using1 />
+        </DemoBox>
+        <DemoBox :code="src2" title="禁用自动播放">
+            <template #description>
+                将 interval 设置为 0 可以禁用自动播放。
+            </template>
+            <Using2 />
+        </DemoBox>
+        <DemoBox :code="src3" title="手动切换">
+            <template #description>
+                将 interval 设置为 0 可以禁用自动播放，从而实现手动切换。
+            </template>
+            <Using3 />
+        </DemoBox>
+        <DemoBox :code="src4" title="禁用循环播放">
+            <template #description> 通过 loop 属性控制是否循环播放。 </template>
+            <Using3 />
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'ECarousel Props',
+                    list: [
+                        {
+                            name: 'interval',
+                            type: 'number',
+                            required: false,
+                            defaultValue: 3000,
+                            description:
+                                '自动播放间隔时间（毫秒），0表示不自动播放',
+                        },
+                        {
+                            name: 'modelValue',
+                            type: 'number',
+                            required: false,
+                            defaultValue: 0,
+                            description: '当前激活的幻灯片索引',
+                        },
+                        {
+                            name: 'indicators',
+                            type: 'boolean',
+                            required: false,
+                            defaultValue: true,
+                            description: '是否显示指示器',
+                        },
+                        {
+                            name: 'arrows',
+                            type: 'boolean',
+                            required: false,
+                            defaultValue: true,
+                            description: '是否显示箭头导航',
+                        },
+                        {
+                            name: 'loop',
+                            type: 'boolean',
+                            required: false,
+                            defaultValue: true,
+                            description: '是否循环播放',
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'ECarousel Events',
+                    list: [
+                        {
+                            name: 'update:modelValue',
+                            type: 'Function',
+                            required: false,
+                            description: '幻灯片切换时触发',
+                            defaultValue: '(value: number) => void',
+                        },
+                        {
+                            name: 'change',
+                            type: 'Function',
+                            required: false,
+                            description: '幻灯片切换结束时触发',
+                            defaultValue: '(value: number) => void',
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'ECarouselItem Props',
+                    list: [
+                        {
+                            name: 'name',
+                            type: 'string',
+                            required: false,
+                            defaultValue: '-',
+                            description: '幻灯片的唯一标识',
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>
+
+<script setup lang="ts">
+import PageLayout from '@/components/PageLayout.vue';
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import APITable from '@/components/APITable.vue';
+import src from './Using.vue?raw';
+import Using from './Using.vue';
+import src1 from './Using1.vue?raw';
+import Using1 from './Using1.vue';
+import src2 from './Using2.vue?raw';
+import Using2 from './Using2.vue';
+import src3 from './Using3.vue?raw';
+import Using3 from './Using3.vue';
+import src4 from './Using3.vue?raw';
+</script>
+
+<style scoped>
+.section {
+    margin-bottom: 40px;
+}
+
+.carousel-demo-item {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 24px;
+}
+</style>

package/dist/components/data/e_carousel/Using.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ECarousel, ECarouselItem } from 'exploria-ui';
+import { ref } from 'vue';
+
+const currentIndex = ref(0);
+</script>
+
+<template>
+    <ECarousel :interval="1000" v-model="currentIndex" :loop="true">
+        <ECarouselItem style="background-color: #f06292">
+            <h3>Slide 1</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #4fc3f7">
+            <h3>Slide 2</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #81c784">
+            <h3>Slide 3</h3>
+        </ECarouselItem>
+    </ECarousel>
+</template>

package/dist/components/data/e_carousel/Using1.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ECarousel, ECarouselItem } from 'exploria-ui';
+</script>
+
+<template>
+    <ECarousel :interval="5000">
+        <ECarouselItem style="background-color: #f06292">
+            <h3>Slide 1 (5s)</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #4fc3f7">
+            <h3>Slide 2 (5s)</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #81c784">
+            <h3>Slide 3 (5s)</h3>
+        </ECarouselItem>
+    </ECarousel>
+</template>
+
+<style scoped lang="scss">
+.e-carousel {
+    height: 300px;
+}
+</style>

package/dist/components/data/e_carousel/Using2.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ECarousel, ECarouselItem } from 'exploria-ui';
+</script>
+
+<template>
+    <ECarousel :interval="0">
+        <ECarouselItem style="background-color: #f06292">
+            <h3>Slide 1 (Manual)</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #4fc3f7">
+            <h3>Slide 2 (Manual)</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #81c784">
+            <h3>Slide 3 (Manual)</h3>
+        </ECarouselItem>
+    </ECarousel>
+</template>

package/dist/components/data/e_carousel/Using3.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ECarousel, ECarouselItem } from 'exploria-ui';
+</script>
+
+<template>
+    <ECarousel :loop="false">
+        <ECarouselItem style="background-color: #f06292">
+            <h3>Slide 1</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #4fc3f7">
+            <h3>Slide 2</h3>
+        </ECarouselItem>
+        <ECarouselItem style="background-color: #81c784">
+            <h3>Slide 3</h3>
+        </ECarouselItem>
+    </ECarousel>
+</template>

package/dist/components/data/e_collapse/Document.vue

@@ -0,0 +1,40 @@
+<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';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ECollapse 折叠面板</h2>
+            <p>
+                折叠面板组件，用于展示可展开/折叠的内容区域，常用于内容分类展示，节省页面空间。
+            </p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                折叠面板组件，用于展示可展开/折叠的内容区域，常用于内容分类展示。
+            </template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'ECollapse Props',
+                    list: [
+                        {
+                            name: 'title',
+                            description: '标题',
+                            type: 'string',
+                            defaultValue: '-',
+                            required: true,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/dist/components/data/e_collapse/Using.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ECollapse } from 'exploria-ui';
+</script>
+
+<template>
+    <ECollapse title="哈哈哈">
+        <div style="padding: 10px">这是内容</div>
+    </ECollapse>
+</template>