exploria-ui-mcp-server 2.0.0

package/public/components/feedback/e_drawer/Document.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import baseUsingSrc from './BaseUsing.vue?raw';
+import directionUsingSrc from './DirectionUsing.vue?raw';
+import sizeUsingSrc from './SizeUsing.vue?raw';
+import BaseUsing from './BaseUsing.vue';
+import DirectionUsing from './DirectionUsing.vue';
+import SizeUsing from './SizeUsing.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EDrawer 抽屉</h2>
+            <p>抽屉组件，从屏幕边缘滑出的面板，用于展示额外内容或操作界面。</p>
+        </DemoBox>
+        <DemoBox :code="baseUsingSrc" title="基本用法">
+            <BaseUsing />
+            <template #description>
+                基本的抽屉组件用法，包含标题、内容和操作按钮。
+            </template>
+        </DemoBox>
+        <DemoBox :code="directionUsingSrc" title="不同方向">
+            <DirectionUsing />
+            <template #description>
+                支持从左、右、上、下四个方向弹出抽屉。
+            </template>
+        </DemoBox>
+        <DemoBox :code="sizeUsingSrc" title="不同尺寸">
+            <SizeUsing />
+            <template #description>
+                支持三种尺寸的抽屉：大型、中型（默认）和小型，可通过 size
+                属性控制。
+            </template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EDrawer Props',
+                    list: [
+                        {
+                            name: 'open',
+                            description: '抽屉是否显示，支持 v-model 双向绑定',
+                            type: 'boolean',
+                            defaultValue: 'false',
+                            required: true,
+                        },
+                        {
+                            name: 'title',
+                            description: '抽屉标题',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'width',
+                            description:
+                                '抽屉宽度（当 direction 为 left 或 right 时有效）',
+                            type: 'string',
+                            defaultValue: '320px',
+                            required: false,
+                        },
+                        {
+                            name: 'height',
+                            description:
+                                '抽屉高度（当 direction 为 top 或 bottom 时有效）',
+                            type: 'string',
+                            defaultValue: '320px',
+                            required: false,
+                        },
+                        {
+                            name: 'direction',
+                            description: '抽屉弹出方向',
+                            type: 'string',
+                            defaultValue: 'right',
+                            required: false,
+                        },
+                        {
+                            name: 'okText',
+                            description: '确定按钮文本',
+                            type: 'string',
+                            defaultValue: '确定',
+                            required: false,
+                        },
+                        {
+                            name: 'cancelText',
+                            description: '取消按钮文本',
+                            type: 'string',
+                            defaultValue: '取消',
+                            required: false,
+                        },
+                        {
+                            name: 'size',
+                            description: '抽屉尺寸',
+                            type: 'string',
+                            defaultValue: 'medium',
+                            required: false,
+                        },
+                        {
+                            name: 'showFooter',
+                            description: '是否显示底部操作栏',
+                            type: 'boolean',
+                            defaultValue: 'true',
+                            required: false,
+                        },
+                        {
+                            name: 'closeOnClickMask',
+                            description: '是否点击遮罩层关闭抽屉',
+                            type: 'boolean',
+                            defaultValue: 'true',
+                            required: false,
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'EDrawer Events',
+                    list: [
+                        {
+                            name: 'ok',
+                            description: '点击确定按钮时触发',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'cancel',
+                            description: '点击取消按钮时触发',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'close',
+                            description: '关闭抽屉时触发',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'update:open',
+                            description: '抽屉打开状态变化时触发',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/public/components/feedback/e_drawer/LargeSizeDrawer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EButton, EDrawer } from 'exploria-ui';
+
+const openLargeDrawer = ref(false);
+</script>
+
+<template>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap">
+        <EButton @click="openLargeDrawer = true">大型抽屉</EButton>
+
+        <!-- 大型抽屉 -->
+        <EDrawer
+            v-model:open="openLargeDrawer"
+            title="大型抽屉"
+            size="large"
+            width="500px"
+        >
+            <div style="padding: 20px 0">
+                <div>这是大型尺寸的抽屉</div>
+                <div style="margin-top: 10px">
+                    可以通过 size 属性控制抽屉尺寸
+                </div>
+                <div style="margin-top: 10px">大型尺寸的标题和内容字体更大</div>
+                <div style="margin-top: 10px">适合展示更复杂的内容</div>
+            </div>
+        </EDrawer>
+    </div>
+</template>

package/public/components/feedback/e_drawer/MediumSizeDrawer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EButton, EDrawer } from 'exploria-ui';
+
+const openMediumDrawer = ref(false);
+</script>
+
+<template>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap">
+        <EButton @click="openMediumDrawer = true">中型抽屉</EButton>
+
+        <!-- 中型抽屉 -->
+        <EDrawer
+            v-model:open="openMediumDrawer"
+            title="中型抽屉"
+            size="medium"
+            width="400px"
+        >
+            <div style="padding: 20px 0">
+                <div>这是中型尺寸的抽屉</div>
+                <div style="margin-top: 10px">
+                    可以通过 size 属性控制抽屉尺寸
+                </div>
+                <div style="margin-top: 10px">中型尺寸是默认的尺寸</div>
+                <div style="margin-top: 10px">适合大多数场景</div>
+            </div>
+        </EDrawer>
+    </div>
+</template>

package/public/components/feedback/e_drawer/SizeUsing.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EButton, EDrawer } from 'exploria-ui';
+
+const openLargeDrawer = ref(false);
+const openMediumDrawer = ref(false);
+const openSmallDrawer = ref(false);
+
+const handleClose = () => {
+    openLargeDrawer.value = false;
+    openMediumDrawer.value = false;
+    openSmallDrawer.value = false;
+};
+</script>
+
+<template>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap">
+        <EButton @click="openLargeDrawer = true">大型抽屉</EButton>
+        <EButton @click="openMediumDrawer = true">中型抽屉</EButton>
+        <EButton @click="openSmallDrawer = true">小型抽屉</EButton>
+
+        <!-- 大型抽屉 -->
+        <EDrawer
+            v-model:open="openLargeDrawer"
+            title="大型抽屉"
+            size="large"
+            width="500px"
+            @close="handleClose"
+            @cancel="handleClose"
+        >
+            <div>这是大型尺寸的抽屉</div>
+            <div style="margin-top: 10px">可以通过 size 属性控制抽屉尺寸</div>
+            <div style="margin-top: 10px">大型尺寸的标题和内容字体更大</div>
+            <div style="margin-top: 10px">适合展示更复杂的内容</div>
+        </EDrawer>
+
+        <!-- 中型抽屉 -->
+        <EDrawer
+            v-model:open="openMediumDrawer"
+            title="中型抽屉"
+            size="medium"
+            width="400px"
+            @close="handleClose"
+            @cancel="handleClose"
+        >
+            <div>这是中型尺寸的抽屉</div>
+            <div style="margin-top: 10px">可以通过 size 属性控制抽屉尺寸</div>
+            <div style="margin-top: 10px">中型尺寸是默认的尺寸</div>
+            <div style="margin-top: 10px">适合大多数场景</div>
+        </EDrawer>
+
+        <!-- 小型抽屉 -->
+        <EDrawer
+            v-model:open="openSmallDrawer"
+            title="小型抽屉"
+            size="small"
+            width="300px"
+            @close="handleClose"
+            @cancel="handleClose"
+        >
+            <div>这是小型尺寸的抽屉</div>
+            <div style="margin-top: 10px">可以通过 size 属性控制抽屉尺寸</div>
+            <div style="margin-top: 10px">小型尺寸的标题和内容字体更小</div>
+            <div style="margin-top: 10px">适合展示简单的内容</div>
+        </EDrawer>
+    </div>
+</template>

package/public/components/feedback/e_drawer/SmallSizeDrawer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EButton, EDrawer } from 'exploria-ui';
+
+const openSmallDrawer = ref(false);
+</script>
+
+<template>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap">
+        <EButton @click="openSmallDrawer = true">小型抽屉</EButton>
+
+        <!-- 小型抽屉 -->
+        <EDrawer
+            v-model:open="openSmallDrawer"
+            title="小型抽屉"
+            size="small"
+            width="300px"
+        >
+            <div style="padding: 20px 0">
+                <div>这是小型尺寸的抽屉</div>
+                <div style="margin-top: 10px">
+                    可以通过 size 属性控制抽屉尺寸
+                </div>
+                <div style="margin-top: 10px">小型尺寸的标题和内容字体更小</div>
+                <div style="margin-top: 10px">适合展示简单的内容</div>
+            </div>
+        </EDrawer>
+    </div>
+</template>

package/public/components/feedback/e_message/Document.vue

@@ -0,0 +1,18 @@
+<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="介绍"> </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/public/components/feedback/e_message/Using.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { EMessage, EButton } from 'exploria-ui';
+
+const showMessage = () => {
+    EMessage.success('成功');
+    EMessage.error('错误');
+    EMessage.warning('警告');
+    EMessage.info('信息');
+};
+</script>
+
+<template>
+    <div class="using">
+        <EButton type="primary" @click="showMessage">显示</EButton>
+    </div>
+</template>

package/public/components/feedback/e_message_box/BaseUsing.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { EButton } from 'exploria-ui';
+
+const confirm = () => {};
+</script>
+
+<template>
+    <div class="using">
+        <EButton type="primary" @click="confirm">删除</EButton>
+    </div>
+</template>

package/public/components/feedback/e_message_box/Document.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import baseUsingSrc from './BaseUsing.vue?raw';
+import BaseUsing from './BaseUsing.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍"> </DemoBox>
+        <DemoBox :code="baseUsingSrc" title="基本用法">
+            <BaseUsing />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/public/components/feedback/e_message_box/intro.md

@@ -0,0 +1,12 @@
+# EMessageBox 消息对话框
+
+EMessageBox 是一个模态对话框组件，用于显示重要信息、请求用户确认或收集简单输入。
+
+## 特性
+
+- 支持 alert、confirm、prompt 三种模式
+- 支持自定义标题、内容和按钮
+- 支持异步关闭
+- 支持自定义图标
+- 支持键盘操作
+- 支持 Promise API

package/public/components/feedback/e_notification/AllPositionsNotification.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ENotification, EButton } from 'exploria-ui';
+
+const showAllPositions = () => {
+    const positions = [
+        'top-start',
+        'top',
+        'top-end',
+        'right-start',
+        'right',
+        'right-end',
+        'bottom-start',
+        'bottom',
+        'bottom-end',
+        'left-start',
+        'left',
+        'left-end',
+    ];
+
+    positions.forEach((position, index) => {
+        setTimeout(() => {
+            ENotification.info({
+                title: `位置：${position}`,
+                message: `这是一条显示在${position}位置的通知`,
+                placement: position as any,
+                duration: 3,
+            });
+        }, index * 100);
+    });
+};
+</script>
+
+<template>
+    <EButton @click="showAllPositions">所有位置</EButton>
+</template>

package/public/components/feedback/e_notification/BasicTypesNotification.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ENotification, EButton } from 'exploria-ui';
+
+const showSuccess = () => {
+    ENotification.success('操作成功');
+};
+
+const showError = () => {
+    ENotification.error({
+        title: '错误提示',
+        message: '操作失败，请重试',
+        duration: 5,
+    });
+};
+
+const showWarning = () => {
+    ENotification.warning({
+        message: '警告信息，请注意',
+        placement: 'bottom-end',
+    });
+};
+
+const showInfo = () => {
+    ENotification.info({
+        title: '提示信息',
+        message: '这是一条提示信息',
+        duration: 4,
+    });
+};
+</script>
+
+<template>
+    <div class="notification-demo">
+        <EButton type="success" @click="showSuccess">成功通知</EButton>
+        <EButton type="danger" @click="showError">错误通知</EButton>
+        <EButton type="warning" @click="showWarning">警告通知</EButton>
+        <EButton type="info" @click="showInfo">信息通知</EButton>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.notification-demo {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+</style>

package/public/components/feedback/e_notification/ClickableNotification.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ENotification, EButton } from 'exploria-ui';
+
+const showClickable = () => {
+    ENotification.success({
+        message: '点击查看详情',
+        onClick: () => {
+            ENotification.info({
+                message: '通知被点击',
+            });
+        },
+    });
+};
+</script>
+
+<template>
+    <EButton @click="showClickable">点击事件</EButton>
+</template>

package/public/components/feedback/e_notification/Document.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import basicTypesSrc from './BasicTypesNotification.vue?raw';
+import clickableSrc from './ClickableNotification.vue?raw';
+import manualCloseSrc from './ManualCloseNotification.vue?raw';
+import allPositionsSrc from './AllPositionsNotification.vue?raw';
+import BasicTypesNotification from './BasicTypesNotification.vue';
+import ClickableNotification from './ClickableNotification.vue';
+import ManualCloseNotification from './ManualCloseNotification.vue';
+import AllPositionsNotification from './AllPositionsNotification.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍"> </DemoBox>
+        <DemoBox :code="basicTypesSrc" title="基本类型通知">
+            <BasicTypesNotification />
+            <template #description>
+                ENotification 支持多种通知类型，包括成功、错误、警告和信息通知。
+            </template>
+        </DemoBox>
+        <DemoBox :code="clickableSrc" title="可点击通知">
+            <ClickableNotification />
+            <template #description>
+                支持为通知添加点击事件，点击通知时触发回调函数。
+            </template>
+        </DemoBox>
+        <DemoBox :code="manualCloseSrc" title="手动关闭通知">
+            <ManualCloseNotification />
+            <template #description>
+                通过设置 duration 为 0 可以创建需要手动关闭的通知。
+            </template>
+        </DemoBox>
+        <DemoBox :code="allPositionsSrc" title="所有位置通知">
+            <AllPositionsNotification />
+            <template #description>
+                支持 12 种不同的通知位置，包括顶部、底部、左侧、右侧等。
+            </template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: '通知配置选项',
+                    list: [
+                        {
+                            name: 'title',
+                            description: '通知标题',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'message',
+                            description: '通知内容',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                        {
+                            name: 'type',
+                            description:
+                                '通知类型，可选值：success, error, warning, info',
+                            type: 'string',
+                            defaultValue: 'info',
+                            required: false,
+                        },
+                        {
+                            name: 'duration',
+                            description: '自动关闭时间（秒），0表示不自动关闭',
+                            type: 'number',
+                            defaultValue: '3',
+                            required: false,
+                        },
+                        {
+                            name: 'placement',
+                            description: '通知位置，支持12种位置设置',
+                            type: 'string',
+                            defaultValue: 'top-end',
+                            required: false,
+                        },
+                        {
+                            name: 'showClose',
+                            description: '是否显示关闭按钮',
+                            type: 'boolean',
+                            defaultValue: 'true',
+                            required: false,
+                        },
+                        {
+                            name: 'onClick',
+                            description: '点击通知时的回调函数',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                    ],
+                },
+                {
+                    subTitle: '方法',
+                    list: [
+                        {
+                            name: 'ENotification.success(options)',
+                            description:
+                                '显示成功通知，options为字符串或通知配置对象',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'ENotification.error(options)',
+                            description:
+                                '显示错误通知，options为字符串或通知配置对象',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'ENotification.warning(options)',
+                            description:
+                                '显示警告通知，options为字符串或通知配置对象',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'ENotification.info(options)',
+                            description:
+                                '显示信息通知，options为字符串或通知配置对象',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                        {
+                            name: 'ENotification.show(options)',
+                            description:
+                                '显示通知（通用方法），options为通知配置对象',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/public/components/feedback/e_notification/ManualCloseNotification.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ENotification, EButton } from 'exploria-ui';
+</script>
+
+<template>
+    <EButton
+        @click="
+            ENotification.error({
+                title: '错误信息',
+                message: '这是一条需要手动关闭的错误信息',
+                duration: 0, // 0表示不自动关闭
+                showClose: true,
+            })
+        "
+        >手动关闭</EButton
+    >
+</template>