exploria-ui-mcp-server 2.1.4 → 2.2.5

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

@@ -1,253 +0,0 @@
-<script setup lang="ts">
-import { ENotification, EButton } from 'exploria-ui';
-
-const showError = () => {
-    ENotification.error({
-        title: '错误提示',
-        message: '操作失败，请重试',
-        duration: 5,
-    });
-};
-
-const showWarning = () => {
-    ENotification.warning({
-        message: '警告信息，请注意',
-        placement: 'bottom-end',
-    });
-};
-
-const showInfo = () => {
-    ENotification.info({
-        title: '提示信息',
-        message: '这是一条提示信息',
-        duration: 4,
-    });
-};
-
-const showClickable = () => {
-    ENotification.success({
-        message: '点击查看详情',
-        onClick: () => {
-            ENotification.info({
-                message: '通知被点击',
-            });
-        },
-    });
-};
-
-const showWithClose = () => {
-    ENotification.error({
-        title: '错误信息',
-        message: '这是一条需要手动关闭的错误信息',
-        duration: 0, // 0表示不自动关闭
-        showClose: true,
-    });
-};
-
-// 分组显示通知
-const showNotificationsByDirection = (direction: string) => {
-    let positions: string[] = [];
-
-    switch (direction) {
-        case 'top':
-            positions = ['top-start', 'top', 'top-end'];
-            break;
-        case 'bottom':
-            positions = ['bottom-start', 'bottom', 'bottom-end'];
-            break;
-        case 'left':
-            positions = ['left-start', 'left', 'left-end'];
-            break;
-        case 'right':
-            positions = ['right-start', 'right', 'right-end'];
-            break;
-        case 'corners':
-            positions = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
-            break;
-        case 'center':
-            positions = ['top', 'bottom', 'left', 'right'];
-            break;
-    }
-
-    positions.forEach((position, index) => {
-        setTimeout(() => {
-            ENotification.info({
-                title: `位置：${position}`,
-                message: `这是一条显示在${position}位置的通知`,
-                placement: position as any,
-                duration: 3,
-            });
-        }, index * 100);
-    });
-};
-
-// 位置列表配置
-const positions = [
-    { value: 'top-start', label: '左上 (top-start)' },
-    { value: 'top', label: '顶部 (top)' },
-    { value: 'top-end', label: '右上 (top-end)' },
-    { value: 'left-start', label: '左上 (left-start)' },
-    { value: 'left', label: '左侧 (left)' },
-    { value: 'left-end', label: '左下 (left-end)' },
-    { value: 'right-start', label: '右上 (right-start)' },
-    { value: 'right', label: '右侧 (right)' },
-    { value: 'right-end', label: '右下 (right-end)' },
-    { value: 'bottom-start', label: '左下 (bottom-start)' },
-    { value: 'bottom', label: '底部 (bottom)' },
-    { value: 'bottom-end', label: '右下 (bottom-end)' },
-];
-
-// 按位置显示通知
-const showNotificationByPosition = (position: string) => {
-    ENotification.info({
-        title: `位置：${position}`,
-        message: `这是一条显示在${position}位置的通知`,
-        placement: position as any,
-        duration: 4,
-    });
-};
-</script>
-
-<template>
-    <div class="notification-demo">
-        <h2>基本使用</h2>
-        <div class="demo-buttons">
-            <EButton type="success" @click="ENotification.success('操作成功')">
-                成功通知
-            </EButton>
-            <EButton type="danger" @click="showError">错误通知</EButton>
-            <EButton type="warning" @click="showWarning">警告通知</EButton>
-            <EButton type="info" @click="showInfo">信息通知</EButton>
-        </div>
-
-        <h2>高级用法</h2>
-        <div class="demo-buttons">
-            <EButton @click="showClickable">点击事件</EButton>
-            <EButton @click="showWithClose">手动关闭</EButton>
-        </div>
-
-        <h2>方向分组演示</h2>
-        <div class="demo-buttons">
-            <EButton type="primary" @click="showNotificationsByDirection('top')"
-                >顶部方向</EButton
-            >
-            <EButton
-                type="primary"
-                @click="showNotificationsByDirection('bottom')"
-                >底部方向</EButton
-            >
-            <EButton
-                type="primary"
-                @click="showNotificationsByDirection('left')"
-                >左侧方向</EButton
-            >
-            <EButton
-                type="primary"
-                @click="showNotificationsByDirection('right')"
-                >右侧方向</EButton
-            >
-            <EButton
-                type="primary"
-                @click="showNotificationsByDirection('corners')"
-                >四个角落</EButton
-            >
-            <EButton
-                type="primary"
-                @click="showNotificationsByDirection('center')"
-                >各边中心</EButton
-            >
-        </div>
-
-        <h2>位置演示</h2>
-        <div class="demo-positions">
-            <div class="position-grid">
-                <EButton
-                    v-for="position in positions"
-                    :key="position.value"
-                    type="info"
-                    @click="showNotificationByPosition(position.value)"
-                >
-                    {{ position.label }}
-                </EButton>
-            </div>
-        </div>
-
-        <div class="demo-tips">
-            <p>💡 提示：</p>
-            <ul>
-                <li>点击上方按钮查看不同类型的通知</li>
-                <li>通知默认3秒后自动关闭，可通过duration属性自定义</li>
-                <li>支持12种不同的位置设置，点击位置按钮查看效果</li>
-                <li>支持点击通知触发回调函数</li>
-            </ul>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.notification-demo {
-    h2 {
-        margin: 20px 0 10px 0;
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    .demo-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        margin-bottom: 20px;
-    }
-
-    .demo-positions {
-        margin: 20px 0;
-        padding: 20px;
-        background-color: var(--e-bg-color-light);
-        border: var(--e-border);
-        border-radius: var(--e-border-radius);
-
-        .position-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 12px;
-
-            @media (max-width: 768px) {
-                grid-template-columns: repeat(3, 1fr);
-            }
-
-            @media (max-width: 480px) {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            :deep(.e-button) {
-                width: 100%;
-                justify-content: center;
-            }
-        }
-    }
-
-    .demo-tips {
-        background-color: var(--e-bg-color-light);
-        border: var(--e-border);
-        border-radius: var(--e-border-radius);
-        padding: var(--e-padding);
-        margin-top: var(--e-gap);
-
-        p {
-            margin: 0 0 var(--e-gap) 0;
-            font-weight: var(--e-font-weight-bold);
-        }
-
-        ul {
-            margin: 0;
-            padding-left: 20px;
-
-            li {
-                margin: var(--e-gap-small) 0;
-                font-size: var(--e-font-size-medium);
-                color: var(--e-text-color);
-            }
-        }
-    }
-}
-</style>

package/public/components/feedback/e_popover/BasicUsage.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { EPopover, EButton } from 'exploria-ui';
-
-type EPlacement = InstanceType<typeof EPopover>['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="base-usage">
-        <div class="row" v-for="(row, index) of placementList" :key="index">
-            <template v-for="placement of row">
-                <EPopover
-                    v-if="placement.length"
-                    :placement="placement as EPlacement"
-                    trigger="click"
-                    :key="placement"
-                >
-                    <EButton>{{ placement }}</EButton>
-                    <template #content>
-                        <div>{{ placement }} 方向的气泡卡片内容</div>
-                    </template>
-                </EPopover>
-                <div v-else class="empty"></div>
-            </template>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.base-usage {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-
-    .row {
-        display: flex;
-        gap: 20px;
-        justify-content: space-between;
-
-        .empty {
-            width: 100px;
-        }
-    }
-}
-</style>

package/public/components/feedback/e_popover/ContextmenuTrigger.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { EPopover, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-row">
-        <EPopover placement="bottom" trigger="contextmenu">
-            <EButton>右键显示</EButton>
-            <template #content>
-                <div>
-                    <div style="padding: 5px 0; cursor: pointer">菜单项 1</div>
-                    <div style="padding: 5px 0; cursor: pointer">菜单项 2</div>
-                    <div style="padding: 5px 0; cursor: pointer">菜单项 3</div>
-                </div>
-            </template>
-        </EPopover>
-    </div>
-</template>
-
-<style scoped>
-.demo-row {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-}
-</style>

package/public/components/feedback/e_popover/CustomContent.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { EPopover, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-row">
-        <EPopover placement="top" trigger="click">
-            <EButton type="warning">自定义内容</EButton>
-            <template #content>
-                <div class="custom-content">
-                    <h4>自定义标题</h4>
-                    <p>这是一段自定义的内容，可以包含任意 HTML 元素。</p>
-                    <EButton type="primary" size="small">按钮</EButton>
-                </div>
-            </template>
-        </EPopover>
-    </div>
-</template>
-
-<style scoped>
-.demo-row {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-}
-
-.custom-content {
-    min-width: 200px;
-}
-
-.custom-content h4 {
-    margin-top: 0;
-    margin-bottom: 10px;
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.custom-content p {
-    margin-bottom: 10px;
-    line-height: 1.5;
-}
-</style>

package/public/components/feedback/e_popover/CustomTrigger.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { EPopover, EButton } from 'exploria-ui';
-import { ref } from 'vue';
-
-const customOpen = ref(false);
-</script>
-
-<template>
-    <div class="demo-row">
-        <EPopover
-            placement="top"
-            :open="customOpen"
-            @update:open="customOpen = $event"
-        >
-            <EButton type="primary" @click="customOpen = !customOpen"
-                >手动控制</EButton
-            >
-            <template #content>
-                <div>这是手动控制的弹出框</div>
-            </template>
-        </EPopover>
-        <EButton
-            type="info"
-            @click="customOpen = !customOpen"
-            style="margin-left: 10px"
-        >
-            {{ customOpen ? '关闭' : '打开' }}
-        </EButton>
-    </div>
-</template>
-
-<style scoped>
-.demo-row {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    align-items: center;
-}
-</style>

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

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import PageLayout from '@/components/PageLayout.vue';
-
-// 导入示例文件
-import basicUsageSrc from './BasicUsage.vue?raw';
-import hoverTriggerSrc from './HoverTrigger.vue?raw';
-import sizeVariantsSrc from './SizeVariants.vue?raw';
-import customContentSrc from './CustomContent.vue?raw';
-import contextmenuTriggerSrc from './ContextmenuTrigger.vue?raw';
-import customTriggerSrc from './CustomTrigger.vue?raw';
-
-import BasicUsage from './BasicUsage.vue';
-import HoverTrigger from './HoverTrigger.vue';
-import SizeVariants from './SizeVariants.vue';
-import CustomContent from './CustomContent.vue';
-import ContextmenuTrigger from './ContextmenuTrigger.vue';
-import CustomTrigger from './CustomTrigger.vue';
-</script>
-
-<template>
-    <PageLayout>
-        <DemoBox title="介绍">
-            <p>
-                EPopover
-                是一个功能丰富的弹出框组件，支持多种触发方式和复杂内容展示。
-            </p>
-            <p><strong>与 ETooltip 的区别：</strong></p>
-            <ul>
-                <li>
-                    <strong>触发方式：</strong>EPopover 支持
-                    hover、click、contextmenu、custom 多种触发方式；ETooltip
-                    仅支持 hover 触发。
-                </li>
-                <li>
-                    <strong>用途：</strong>EPopover
-                    用于展示复杂内容，可以包含自定义组件和交互元素；ETooltip
-                    主要用于显示简单文本提示。
-                </li>
-                <li>
-                    <strong>功能复杂度：</strong>EPopover
-                    功能更丰富，支持手动控制、多种尺寸和位置等；ETooltip
-                    功能相对简单，专注于提示展示。
-                </li>
-            </ul>
-        </DemoBox>
-
-        <DemoBox :code="basicUsageSrc" title="基本用法">
-            <BasicUsage />
-            <template #description>
-                支持四种基本方向：上、下、左、右。
-            </template>
-        </DemoBox>
-
-        <DemoBox :code="hoverTriggerSrc" title="悬停触发">
-            <HoverTrigger />
-            <template #description> 鼠标悬停在元素上时显示弹出框。 </template>
-        </DemoBox>
-
-        <DemoBox :code="sizeVariantsSrc" title="不同尺寸">
-            <SizeVariants />
-            <template #description> 支持大、中、小三种尺寸。 </template>
-        </DemoBox>
-
-        <DemoBox :code="customContentSrc" title="自定义内容">
-            <CustomContent />
-            <template #description> 弹出框内可以包含任意自定义内容。 </template>
-        </DemoBox>
-
-        <DemoBox :code="contextmenuTriggerSrc" title="右键触发">
-            <ContextmenuTrigger />
-            <template #description>
-                右键点击元素时显示弹出框，可用于实现上下文菜单。
-            </template>
-        </DemoBox>
-
-        <DemoBox :code="customTriggerSrc" title="手动控制">
-            <CustomTrigger />
-            <template #description>
-                通过 v-model:open 手动控制弹出框的显示和隐藏。
-            </template>
-        </DemoBox>
-    </PageLayout>
-</template>

package/public/components/feedback/e_popover/HoverTrigger.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { EPopover, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-row">
-        <EPopover placement="top" trigger="hover">
-            <EButton>悬停显示（上）</EButton>
-            <template #content>
-                <div>这是顶部弹出框的内容</div>
-            </template>
-        </EPopover>
-
-        <EPopover placement="bottom" trigger="hover">
-            <EButton>悬停显示（下）</EButton>
-            <template #content>
-                <div>这是底部弹出框的内容</div>
-            </template>
-        </EPopover>
-    </div>
-</template>
-
-<style scoped>
-.demo-row {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-</style>

package/public/components/feedback/e_popover/SizeVariants.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { EPopover, EButton } from 'exploria-ui';
-</script>
-
-<template>
-    <div class="demo-row">
-        <EPopover placement="top" trigger="click" size="small">
-            <EButton>小尺寸</EButton>
-            <template #content>
-                <div>这是小尺寸弹出框的内容</div>
-            </template>
-        </EPopover>
-
-        <EPopover placement="top" trigger="click" size="medium">
-            <EButton>默认尺寸</EButton>
-            <template #content>
-                <div>这是默认尺寸弹出框的内容</div>
-            </template>
-        </EPopover>
-
-        <EPopover placement="top" trigger="click" size="large">
-            <EButton>大尺寸</EButton>
-            <template #content>
-                <div>这是大尺寸弹出框的内容</div>
-            </template>
-        </EPopover>
-    </div>
-</template>
-
-<style scoped>
-.demo-row {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-</style>