exploria-ui-mcp-server 2.0.0

package/dist/components/basic/e_button/CircleButtons.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton circle>圆</EButton>
+        <EButton :type="type" v-for="type of typeList" :key="type" circle>
+            圆
+        </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

package/dist/components/basic/e_button/DisabledButtons.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton disabled>失效按钮</EButton>
+        <EButton :type="type" v-for="type of typeList" :key="type" disabled>
+            {{ type }}
+        </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

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

@@ -0,0 +1,171 @@
+<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 SizeButtons from './SizeButtons.vue';
+import SizeButtonsRaw from './SizeButtons.vue?raw';
+
+import NormalButtons from './NormalButtons.vue';
+import NormalButtonsRaw from './NormalButtons.vue?raw';
+
+import PlainButtons from './PlainButtons.vue';
+import PlainButtonsRaw from './PlainButtons.vue?raw';
+
+import LoadingButtons from './LoadingButtons.vue';
+import LoadingButtonsRaw from './LoadingButtons.vue?raw';
+
+import RoundButtons from './RoundButtons.vue';
+import RoundButtonsRaw from './RoundButtons.vue?raw';
+
+import DisabledButtons from './DisabledButtons.vue';
+import DisabledButtonsRaw from './DisabledButtons.vue?raw';
+
+import CircleButtons from './CircleButtons.vue';
+import CircleButtonsRaw from './CircleButtons.vue?raw';
+
+import RoundedRectangleButtons from './RoundedRectangleButtons.vue';
+import RoundedRectangleButtonsRaw from './RoundedRectangleButtons.vue?raw';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EButton 按钮</h2>
+            <p>
+                按钮组件，用于触发操作或导航，支持多种类型、尺寸、样式和状态。
+            </p>
+        </DemoBox>
+        <!-- 尺寸按钮示例 -->
+        <DemoBox :code="SizeButtonsRaw" title="按钮尺寸">
+            <SizeButtons />
+            <template #description>
+                按钮支持三种尺寸：small、medium 和 large，通过 size 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 普通按钮示例 -->
+        <DemoBox :code="NormalButtonsRaw" title="普通按钮">
+            <NormalButtons />
+            <template #description>
+                普通按钮是最常用的按钮类型，支持五种主题颜色：primary、success、danger、info
+                和 warning。
+            </template>
+        </DemoBox>
+
+        <!-- 朴素按钮示例 -->
+        <DemoBox :code="PlainButtonsRaw" title="朴素按钮">
+            <PlainButtons />
+            <template #description>
+                朴素按钮具有浅色背景和深色边框，通过 plain 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 加载状态按钮示例 -->
+        <DemoBox :code="LoadingButtonsRaw" title="加载状态">
+            <LoadingButtons />
+            <template #description>
+                加载状态按钮显示加载动画，通过 loading 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 胶囊按钮示例 -->
+        <DemoBox :code="RoundButtonsRaw" title="胶囊按钮">
+            <RoundButtons />
+            <template #description>
+                胶囊按钮具有完全圆角的外观，通过 round 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 失效按钮示例 -->
+        <DemoBox :code="DisabledButtonsRaw" title="失效按钮">
+            <DisabledButtons />
+            <template #description>
+                失效按钮不可点击，通过 disabled 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 圆形按钮示例 -->
+        <DemoBox :code="CircleButtonsRaw" title="圆形按钮">
+            <CircleButtons />
+            <template #description>
+                圆形按钮是圆形外观的按钮，通过 circle 属性设置。
+            </template>
+        </DemoBox>
+
+        <!-- 圆角矩形按钮示例 -->
+        <DemoBox :code="RoundedRectangleButtonsRaw" title="圆角矩形">
+            <RoundedRectangleButtons />
+            <template #description>
+                圆角矩形按钮具有适中的圆角，通过 roundedRectangle 属性设置。
+            </template>
+        </DemoBox>
+
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EButton Props',
+                    list: [
+                        {
+                            name: 'type',
+                            description: '按钮类型',
+                            type: 'primary | success | danger | info | warning',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'loading',
+                            description: '是否为加载状态',
+                            type: 'boolean',
+                            defaultValue: false,
+                            required: false,
+                        },
+                        {
+                            name: 'disabled',
+                            description: '是否禁用',
+                            type: 'boolean',
+                            defaultValue: false,
+                            required: false,
+                        },
+                        {
+                            name: 'plain',
+                            description: '是否为朴素按钮',
+                            type: 'boolean',
+                            defaultValue: false,
+                            required: false,
+                        },
+                        {
+                            name: 'size',
+                            description: '按钮尺寸',
+                            type: 'small | medium | large',
+                            defaultValue: 'medium',
+                            required: false,
+                        },
+                        {
+                            name: 'round',
+                            description: '是否为胶囊按钮',
+                            type: 'boolean',
+                            defaultValue: false,
+                            required: false,
+                        },
+                        {
+                            name: 'circle',
+                            description: '是否为圆形按钮',
+                            type: 'boolean',
+                            defaultValue: false,
+                            required: false,
+                        },
+                        {
+                            name: 'roundedRectangle',
+                            description: '是否为圆角矩形按钮',
+                            type: 'boolean',
+                            defaultValue: false,
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/dist/components/basic/e_button/LoadingButtons.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton loading>Loading...</EButton>
+        <EButton loading v-for="type of typeList" :key="type" :type="type">
+            {{ type }}
+        </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

package/dist/components/basic/e_button/NormalButtons.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton>普通按钮</EButton>
+        <EButton :type="type" v-for="type of typeList" :key="type">
+            {{ type }}
+        </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

package/dist/components/basic/e_button/PlainButtons.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton plain>朴素按钮</EButton>
+        <EButton :type="type" v-for="type of typeList" :key="type" plain>
+            {{ type }}
+        </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

package/dist/components/basic/e_button/RoundButtons.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton round>胶囊按钮</EButton>
+        <EButton :type="type" v-for="type of typeList" :key="type" round>
+            {{ type }}
+        </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

package/dist/components/basic/e_button/RoundedRectangleButtons.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton roundedRectangle>圆角矩形</EButton>
+        <EButton
+            :type="type"
+            v-for="type of typeList"
+            :key="type"
+            roundedRectangle
+        >
+            圆角矩形
+        </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

package/dist/components/basic/e_button/SizeButtons.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+</script>
+
+<template>
+    <div class="demo-container">
+        <EButton size="small">small</EButton>
+        <EButton size="medium">medium</EButton>
+        <EButton size="large">large</EButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+</style>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+type EButtonType = InstanceType<typeof EButton>['type'];
+
+// 反向获取按钮组件的props的type的类型
+const typeList = [
+    'primary',
+    'success',
+    'danger',
+    'info',
+    'warning',
+] as EButtonType[];
+</script>
+
+<template>
+    <div class="using">
+        <div>
+            <EButton size="small">small</EButton>
+            <EButton size="medium">medium</EButton>
+            <EButton size="large">large</EButton>
+        </div>
+        <div>
+            <EButton>普通按钮</EButton>
+            <EButton :type="type" v-for="type of typeList" :key="type">
+                {{ type }}
+            </EButton>
+        </div>
+
+        <div>
+            <EButton plain>朴素按钮</EButton>
+            <EButton :type="type" v-for="type of typeList" :key="type" plain>
+                {{ type }}
+            </EButton>
+        </div>
+
+        <div>
+            <EButton loading>Loading...</EButton>
+            <EButton loading v-for="type of typeList" :key="type" :type="type">
+                {{ type }}
+            </EButton>
+        </div>
+
+        <div>
+            <EButton round>胶囊按钮</EButton>
+            <EButton :type="type" v-for="type of typeList" :key="type" round>
+                {{ type }}
+            </EButton>
+        </div>
+
+        <div>
+            <EButton>失效按钮</EButton>
+            <EButton :type="type" v-for="type of typeList" :key="type" disabled>
+                {{ type }}
+            </EButton>
+        </div>
+
+        <div>
+            <EButton circle>圆</EButton>
+            <EButton :type="type" v-for="type of typeList" :key="type" circle>
+                圆
+            </EButton>
+        </div>
+        <div>
+            <EButton roundedRectangle>圆角矩形</EButton>
+            <EButton
+                :type="type"
+                v-for="type of typeList"
+                :key="type"
+                roundedRectangle
+            >
+                圆角矩形
+            </EButton>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    > div {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+    }
+}
+</style>

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

@@ -0,0 +1,9 @@
+<template>
+    <ECard title="基础卡片" sub-title="这是一个基础卡片示例">
+        卡片内容区域，可以放置文本、图片、表单等各种内容
+    </ECard>
+</template>
+
+<script setup lang="ts">
+import { ECard } from 'exploria-ui';
+</script>

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

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { ECard } from 'exploria-ui';
+</script>
+<template>
+    <ECard title="无边框卡片" :bordered="false" shadow="medium">
+        这个卡片没有边框，只有阴影效果
+    </ECard>
+</template>

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { EButton, ECard } from 'exploria-ui';
+</script>
+
+<template>
+    <ECard title="复杂内容卡片">
+        <div class="complex-content">
+            <div class="content-section">
+                <h4>数据统计</h4>
+                <div class="stats">
+                    <div class="stat-item">
+                        <span class="stat-value">1,234</span>
+                        <span class="stat-label">访问量</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-value">567</span>
+                        <span class="stat-label">用户数</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-value">89</span>
+                        <span class="stat-label">订单数</span>
+                    </div>
+                </div>
+            </div>
+            <div class="content-section">
+                <h4>最近活动</h4>
+                <ul class="activity-list">
+                    <li>用户 A 登录了系统</li>
+                    <li>用户 B 创建了新订单</li>
+                    <li>用户 C 更新了个人资料</li>
+                </ul>
+            </div>
+        </div>
+        <template #footer>
+            <EButton type="primary">查看详情</EButton>
+            <EButton>导出数据</EButton>
+        </template>
+    </ECard>
+</template>
+
+<style scoped>
+.complex-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.content-section h4 {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.stats {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 16px;
+}
+
+.stat-item {
+    flex: 1;
+    text-align: center;
+}
+
+.stat-value {
+    display: block;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: #666;
+}
+
+.activity-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.activity-list li {
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+    font-size: 13px;
+}
+
+.activity-list li:last-child {
+    border-bottom: none;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+    <ECard>
+        <template #header>
+            <div class="custom-header">
+                <h3 style="margin: 0">自定义头部</h3>
+                <EButton type="info" size="small">操作</EButton>
+            </div>
+        </template>
+        <p>这个卡片使用了自定义的头部内容，可以灵活定制头部结构。</p>
+    </ECard>
+</template>
+
+<script setup lang="ts">
+import { EButton, ECard } from 'exploria-ui';
+</script>
+
+<style scoped>
+.custom-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+</style>