exploria-ui-mcp-server 2.0.0

package/public/components/data/e_media_viewer/Using.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EMediaViewer } from 'exploria-ui';
+
+const src = new URL('./img.png', import.meta.url).pathname;
+</script>
+
+<template>
+    <div class="using">
+        <img
+            @click="
+                (e) =>
+                    EMediaViewer.open(
+                        src,
+                        'image',
+                        e.currentTarget as HTMLImageElement
+                    )
+            "
+            :src="src"
+            alt=""
+        />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+img {
+    display: block;
+    height: 100px;
+    width: 100px;
+}
+</style>

package/public/components/data/e_progress/BasicProgress.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="demo-progress">
+        <EProgress :percentage="30" />
+        <EProgress :percentage="50" />
+        <EProgress :percentage="70" />
+        <EProgress :percentage="100" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EProgress } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+.demo-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+}
+</style>

package/public/components/data/e_progress/CircleProgress.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="demo-progress-circle">
+        <EProgress type="circle" :percentage="30" />
+        <EProgress type="circle" :percentage="50" />
+        <EProgress type="circle" :percentage="70" />
+        <EProgress type="circle" :percentage="100" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EProgress } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+.demo-progress-circle {
+    display: flex;
+    gap: 40px;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+</style>

package/public/components/data/e_progress/CustomColorProgress.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="demo-progress-custom-color">
+        <h3>自定义进度条颜色</h3>
+        <div class="demo-progress">
+            <EProgress :percentage="30" color="#ff6b6b" />
+            <EProgress :percentage="50" color="#4ecdc4" />
+            <EProgress :percentage="70" color="#45b7d1" />
+            <EProgress :percentage="90" color="#96ceb4" />
+        </div>
+
+        <h3>自定义背景颜色</h3>
+        <div class="demo-progress">
+            <EProgress :percentage="30" background="#ffeaa7" />
+            <EProgress :percentage="50" background="#fdcb6e" />
+            <EProgress :percentage="70" background="#e17055" />
+        </div>
+
+        <h3>同时自定义颜色和背景</h3>
+        <div class="demo-progress">
+            <EProgress :percentage="50" color="#6c5ce7" background="#a29bfe" />
+        </div>
+
+        <h3>自定义圆形进度条颜色</h3>
+        <div class="demo-progress-circle">
+            <EProgress type="circle" :percentage="30" color="#ff6b6b" />
+            <EProgress type="circle" :percentage="50" color="#4ecdc4" />
+            <EProgress type="circle" :percentage="70" color="#45b7d1" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EProgress } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+.demo-progress-custom-color {
+    width: 100%;
+
+    h3 {
+        margin: 20px 0 10px 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.demo-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+.demo-progress-circle {
+    display: flex;
+    gap: 40px;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+</style>

package/public/components/data/e_progress/Document.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+
+// 导入各个独立的demo组件
+import BasicProgress from './BasicProgress.vue';
+import BasicProgressRaw from './BasicProgress.vue?raw';
+
+import CircleProgress from './CircleProgress.vue';
+import CircleProgressRaw from './CircleProgress.vue?raw';
+
+import ProgressStatus from './ProgressStatus.vue';
+import ProgressStatusRaw from './ProgressStatus.vue?raw';
+
+import ProgressSize from './ProgressSize.vue';
+import ProgressSizeRaw from './ProgressSize.vue?raw';
+
+import ProgressText from './ProgressText.vue';
+import ProgressTextRaw from './ProgressText.vue?raw';
+
+import CustomColorProgress from './CustomColorProgress.vue';
+import CustomColorProgressRaw from './CustomColorProgress.vue?raw';
+
+import IndeterminateProgress from './IndeterminateProgress.vue';
+import IndeterminateProgressRaw from './IndeterminateProgress.vue?raw';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EProgress 进度条</h2>
+            <p>
+                进度条组件，用于显示任务的完成进度，支持线性和圆形两种类型，
+                可自定义颜色、尺寸、状态等，适用于各种需要展示进度的场景。
+            </p>
+        </DemoBox>
+
+        <!-- 基本用法 -->
+        <DemoBox :code="BasicProgressRaw" title="基本用法">
+            <BasicProgress />
+            <template #description>
+                最简单的线性进度条，通过 percentage 属性设置进度百分比。
+            </template>
+        </DemoBox>
+
+        <!-- 圆形进度条 -->
+        <DemoBox :code="CircleProgressRaw" title="圆形进度条">
+            <CircleProgress />
+            <template #description>
+                通过设置 type="circle" 属性，可以将进度条显示为圆形。
+            </template>
+        </DemoBox>
+
+        <!-- 不同状态 -->
+        <DemoBox :code="ProgressStatusRaw" title="不同状态">
+            <ProgressStatus />
+            <template #description>
+                进度条支持四种状态：primary、success、warning、danger，通过
+                status 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 不同尺寸 -->
+        <DemoBox :code="ProgressSizeRaw" title="不同尺寸">
+            <ProgressSize />
+            <template #description>
+                进度条支持三种尺寸：small、medium 和 large，通过 size 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 文字显示控制 -->
+        <DemoBox :code="ProgressTextRaw" title="文字显示控制">
+            <ProgressText />
+            <template #description>
+                通过 showText 属性可以控制是否显示百分比文字，默认显示。
+            </template>
+        </DemoBox>
+
+        <!-- 自定义颜色 -->
+        <DemoBox :code="CustomColorProgressRaw" title="自定义颜色">
+            <CustomColorProgress />
+            <template #description>
+                通过 color 属性可以自定义进度条的颜色，通过 background
+                属性可以自定义背景颜色。
+            </template>
+        </DemoBox>
+
+        <!-- 无限加载状态 -->
+        <DemoBox :code="IndeterminateProgressRaw" title="无限加载状态">
+            <IndeterminateProgress />
+            <template #description>
+                通过 indeterminate
+                属性可以设置进度条为无限加载状态，适用于无法确定进度的场景。
+            </template>
+        </DemoBox>
+
+        <!-- API文档 -->
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EProgress Props',
+                    list: [
+                        {
+                            name: 'percentage',
+                            description: '进度百分比',
+                            type: 'number',
+                            defaultValue: '0',
+                            required: false,
+                        },
+                        {
+                            name: 'type',
+                            description: '进度条类型',
+                            type: 'line | circle',
+                            defaultValue: 'line',
+                            required: false,
+                        },
+                        {
+                            name: 'status',
+                            description: '进度条状态',
+                            type: 'primary | success | warning | danger',
+                            defaultValue: 'primary',
+                            required: false,
+                        },
+                        {
+                            name: 'size',
+                            description: '进度条尺寸',
+                            type: 'small | medium | large',
+                            defaultValue: 'medium',
+                            required: false,
+                        },
+                        {
+                            name: 'showText',
+                            description: '是否显示百分比文字',
+                            type: 'boolean',
+                            defaultValue: 'true',
+                            required: false,
+                        },
+                        {
+                            name: 'strokeWidth',
+                            description: '进度条宽度',
+                            type: 'number',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'color',
+                            description: '进度条颜色',
+                            type: 'string',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'background',
+                            description: '进度条背景颜色',
+                            type: 'string',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'indeterminate',
+                            description: '是否为 indeterminate 状态',
+                            type: 'boolean',
+                            defaultValue: 'false',
+                            required: false,
+                        },
+                        {
+                            name: 'animationDuration',
+                            description: '动画持续时间（秒）',
+                            type: 'number',
+                            defaultValue: '2',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/public/components/data/e_progress/IndeterminateProgress.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="demo-progress-indeterminate">
+        <h3>无限加载状态</h3>
+        <div class="demo-progress">
+            <EProgress :indeterminate="true" />
+            <EProgress :indeterminate="true" status="success" />
+            <EProgress :indeterminate="true" status="warning" />
+            <EProgress :indeterminate="true" status="danger" />
+        </div>
+
+        <h3>自定义动画持续时间</h3>
+        <div class="demo-progress">
+            <EProgress :indeterminate="true" :animationDuration="1" />
+            <EProgress :indeterminate="true" :animationDuration="2" />
+            <EProgress :indeterminate="true" :animationDuration="3" />
+        </div>
+
+        <h3>不同尺寸的无限加载</h3>
+        <div class="demo-progress">
+            <EProgress :indeterminate="true" size="small" />
+            <EProgress :indeterminate="true" size="medium" />
+            <EProgress :indeterminate="true" size="large" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EProgress } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+.demo-progress-indeterminate {
+    width: 100%;
+
+    h3 {
+        margin: 20px 0 10px 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.demo-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    margin-bottom: 30px;
+}
+</style>

package/public/components/data/e_progress/ProgressSize.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="demo-progress-size">
+        <h3>线性进度条尺寸</h3>
+        <div class="demo-progress">
+            <EProgress size="small" :percentage="30" />
+            <EProgress size="medium" :percentage="50" />
+            <EProgress size="large" :percentage="70" />
+        </div>
+
+        <h3>圆形进度条尺寸</h3>
+        <div class="demo-progress-circle">
+            <EProgress type="circle" size="small" :percentage="30" />
+            <EProgress type="circle" size="medium" :percentage="50" />
+            <EProgress type="circle" size="large" :percentage="70" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EProgress } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+.demo-progress-size {
+    width: 100%;
+
+    h3 {
+        margin: 20px 0 10px 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.demo-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+.demo-progress-circle {
+    display: flex;
+    gap: 40px;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+</style>

package/public/components/data/e_progress/ProgressStatus.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="demo-progress">
+        <EProgress status="primary" :percentage="30" />
+        <EProgress status="success" :percentage="50" />
+        <EProgress status="warning" :percentage="70" />
+        <EProgress status="danger" :percentage="90" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EProgress } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+.demo-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+}
+</style>

package/public/components/data/e_progress/ProgressText.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="demo-progress-text">
+        <h3>显示文字</h3>
+        <div class="demo-progress">
+            <EProgress :percentage="30" :showText="true" />
+        </div>
+
+        <h3>隐藏文字</h3>
+        <div class="demo-progress">
+            <EProgress :percentage="50" :showText="false" />
+        </div>
+
+        <h3>圆形进度条文字控制</h3>
+        <div class="demo-progress-circle">
+            <EProgress type="circle" :percentage="30" :showText="true" />
+            <EProgress type="circle" :percentage="50" :showText="false" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EProgress } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+.demo-progress-text {
+    width: 100%;
+
+    h3 {
+        margin: 20px 0 10px 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.demo-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+.demo-progress-circle {
+    display: flex;
+    gap: 40px;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+</style>

package/public/components/data/e_rolling_pagination/Document.vue

@@ -0,0 +1,21 @@
+<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>ERollingPagination 滚动分页</h2>
+            <p>滚动分页组件用于在滚动页面时展示分页信息。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description> 滚动分页 </template>
+        </DemoBox>
+    </PageLayout>
+</template>
+
+<style scoped lang="scss"></style>

package/public/components/data/e_rolling_pagination/Using.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ERollingPagination } from 'exploria-ui';
+import { ref } from 'vue';
+
+const currentPage = ref(1);
+
+const list = Array.from({ length: 100 }, (_, i) => i + 1);
+</script>
+
+<template>
+    <ERollingPagination
+        v-model:page="currentPage"
+        :data="list"
+        :total="list.length"
+        :page-size="20"
+        #default="{ item }"
+    >
+        <div class="item">{{ item }}</div>
+    </ERollingPagination>
+</template>
+
+<style scoped lang="scss">
+.e-rolling-pagination {
+    max-height: 300px;
+    .item {
+        height: 100px;
+        border: 1px solid #ccc;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+</style>

package/public/components/data/e_skeleton/Document.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import { onMounted } from 'vue';
+import src from './Using.vue?raw';
+import Using from './Using.vue';
+import PageLayout from '@/components/PageLayout.vue';
+// 定义数据和加载状态
+
+// 模拟异步加载数据
+onMounted(() => {});
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ESkeleton 骨架屏</h2>
+            <p>骨架屏组件用于在数据加载完成前展示占位符，提升用户体验。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/public/components/data/e_skeleton/Using.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ESkeleton } from 'exploria-ui';
+import { onMounted, ref } from 'vue';
+
+const loading = ref(true);
+onMounted(() => {
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+});
+</script>
+
+<template>
+    <ESkeleton v-if="loading" />
+    <div v-else>加载完成</div>
+</template>
+
+<style scoped lang="scss"></style>