exploria-ui-mcp-server 2.0.0

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

@@ -0,0 +1,253 @@
+<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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,84 @@
+<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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,36 @@
+<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>