exploria-ui-mcp-server 2.0.0

package/dist/components/data/e_table/Document.vue

@@ -0,0 +1,85 @@
+<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';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ETable 表格</h2>
+            <p>表格组件用于展示数据列表，支持多种功能和样式定制。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'ETable Props',
+                    list: [
+                        {
+                            name: 'data',
+                            description: '表格数据',
+                            type: 'object[]',
+                            defaultValue: '[]',
+                            required: true,
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'ETableColumn Props',
+                    list: [
+                        {
+                            name: 'label',
+                            description: '列标题',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                        {
+                            name: 'prop',
+                            description: '列数据字段',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                        {
+                            name: 'align',
+                            description: '列对齐方式',
+                            type: 'string',
+                            defaultValue: 'left',
+                            required: false,
+                        },
+                        {
+                            name: 'width',
+                            description: '列宽度',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+@use '@/style/global' as global;
+
+.box {
+    padding: 15px;
+    @include global.useTheme(
+        plain,
+        (
+            padding: 0,
+        )
+    );
+}
+</style>

package/dist/components/data/e_table/Using.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ETable, ETableColumn } from 'exploria-ui';
+
+const data = [
+    {
+        name: '张三',
+        age: 18,
+        sex: '男',
+        address: '北京市',
+        phone: '1234567890',
+        email: 'zhangsan@example.com',
+        status: '正常',
+    },
+    {
+        name: '李四',
+        age: 20,
+        sex: '女',
+        address: '上海市',
+        phone: '0987654321',
+        email: 'lisi@example.com',
+        status: '禁用',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+    {
+        name: '王五',
+        age: 22,
+        sex: '男',
+        address: '广州市',
+        phone: '1111111111',
+        email: 'wangwu@example.com',
+        status: '正常',
+    },
+];
+</script>
+
+<template>
+    <ETable :data="data">
+        <ETableColumn label="name" prop="name" draggable />
+        <ETableColumn label="age" prop="age" draggable />
+        <ETableColumn label="sex" prop="sex" draggable />
+        <ETableColumn label="address" prop="address" draggable />
+        <ETableColumn label="phone" prop="phone" />
+        <ETableColumn label="email" prop="email" />
+        <ETableColumn label="status" prop="status" />
+    </ETable>
+</template>
+<style lang="scss" scoped>
+.one-table {
+    height: 200px;
+}
+</style>

package/dist/components/data/e_timeline/Document.vue

@@ -0,0 +1,90 @@
+<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';
+import APITable from '@/components/APITable.vue';
+
+const apiData = [
+    {
+        subTitle: 'ETimeline Props',
+        list: [],
+    },
+    {
+        subTitle: 'ETimeline Slots',
+        list: [
+            {
+                name: 'default',
+                description: '时间线内容，用于放置 ETimelineItem 组件',
+                type: 'slot',
+                required: true,
+            },
+        ],
+    },
+    {
+        subTitle: 'ETimelineItem Props',
+        list: [
+            {
+                name: 'timestamp',
+                description: '时间戳，用于唯一标识时间线项',
+                type: 'string',
+                required: true,
+                defaultValue: '',
+            },
+        ],
+    },
+    {
+        subTitle: 'ETimelineItem Slots',
+        list: [
+            {
+                name: 'default',
+                description: '时间线项的内容',
+                type: 'slot',
+                required: false,
+            },
+            {
+                name: 'icon',
+                description: '自定义时间线点的图标',
+                type: 'slot',
+                required: false,
+            },
+        ],
+    },
+];
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ETimeline 时间线</h2>
+            <p>
+                时间线组件，用于展示一系列按时间顺序排列的事件或状态变化，支持自定义节点图标和样式。
+            </p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                基本的时间线组件用法，展示事件按时间顺序排列的效果。
+            </template>
+        </DemoBox>
+        <APITable :data="apiData" />
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+.time-picker-demo {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+
+    .left {
+        flex: 1;
+        overflow: auto;
+        padding: 30px;
+    }
+
+    .right {
+        width: 260px;
+    }
+}
+</style>

package/dist/components/data/e_timeline/Using.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ETimeline, ETimelineItem } from 'exploria-ui';
+import { ref } from 'vue';
+
+const showDetail = ref(false);
+</script>
+
+<template>
+    <div>
+        <button style="margin-bottom: 10px" @click="showDetail = !showDetail">
+            {{ showDetail ? '隐藏' : '显示' }}详情
+        </button>
+        <ETimeline>
+            <ETimelineItem timestamp="1995">
+                <h3>ECMAScript 1</h3>
+                <p v-if="showDetail">
+                    JavaScript 诞生，ECMAScript 1 标准发布，奠定了 JS
+                    的基础语法。
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="1998">
+                <h3>ECMAScript 3</h3>
+                <p v-if="showDetail">
+                    引入了正则表达式、错误处理机制等，成为广泛应用的版本。
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2009">
+                <h3>ECMAScript 5</h3>
+                <p v-if="showDetail">
+                    引入了严格模式、JSON 支持、数组和对象的新方法等。
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2015">
+                <h3>ECMAScript 2015（ES6）</h3>
+                <p v-if="showDetail">
+                    重大更新：<br />
+                    - 箭头函数、let 和 const 声明<br />
+                    - 类和模块语法<br />
+                    - 模板字符串、解构赋值<br />
+                    - 新的数据结构（如 Map 和 Set）<br />
+                    - 函数默认参数和剩余参数
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2016">
+                <h3>ECMAScript 2016（ES7）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - Array.prototype.includes 方法<br />
+                    - 指数运算符（**）
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2017">
+                <h3>ECMAScript 2017（ES8）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - 异步函数（async/await）<br />
+                    - Object.values/Object.entries 方法<br />
+                    - 字符串填充方法（padStart/padEnd）
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2018">
+                <h3>ECMAScript 2018（ES9）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - REST/SPREAD 属性<br />
+                    - 异步迭代器和生成器<br />
+                    - 正则表达式改进
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2019">
+                <h3>ECMAScript 2019（ES10）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - Array.prototype.flat 和 flatMap 方法<br />
+                    - Object.fromEntries 方法<br />
+                    - String.trimStart/trimEnd 方法
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2020">
+                <h3>ECMAScript 2020（ES11）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - Promise.allSettled 方法<br />
+                    - 全局对象的 BigInt 类型<br />
+                    - 动态导入（import()）
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2021">
+                <h3>ECMAScript 2021（ES12）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - Promise.any 方法<br />
+                    - Logical Nullish Assignment（逻辑空值赋值）
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2022">
+                <h3>ECMAScript 2022（ES13）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - 类的私有字段和方法<br />
+                    - import.meta 对象<br />
+                    - top-level await
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2023">
+                <h3>ECMAScript 2023（ES14）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - Array.findLast 和 Array.findLastIndex 方法<br />
+                    ECMAScript 仍在不断发展，每年都有新的特性被引入。
+                </p>
+            </ETimelineItem>
+            <ETimelineItem timestamp="2024">
+                <h3>ECMAScript 2024（ES15）</h3>
+                <p v-if="showDetail">
+                    新特性：<br />
+                    - 类的静态字段和方法<br />
+                    - 数组的 at 方法<br />
+                    - 正则表达式的 /v 标志
+                </p>
+            </ETimelineItem>
+        </ETimeline>
+    </div>
+</template>

package/dist/components/feedback/e_dialog/AsyncUsing.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { EButton, EDialog } from 'exploria-ui';
+import { ref } from 'vue';
+
+const open = ref(false);
+const isWaitingOpen = ref(false);
+
+const openModal = () => {
+    isWaitingOpen.value = true;
+    setTimeout(() => {
+        open.value = true;
+        isWaitingOpen.value = false;
+    }, 2000);
+};
+</script>
+
+<template>
+    <div class="async-using">
+        <EDialog
+            v-model:open="open"
+            title="这是 Modal 的标题"
+            :is-waiting-open="isWaitingOpen"
+        >
+            <div>内容</div>
+        </EDialog>
+        <EButton @click="openModal" :loading="isWaitingOpen"> 显示 </EButton>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/components/feedback/e_dialog/BaseUsing.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { EDialog, EButton } from 'exploria-ui';
+import { ref } from 'vue';
+
+const open = ref(false);
+</script>
+
+<template>
+    <div class="using">
+        <EDialog v-model:open="open" title="这是 Modal 的标题">
+            <div>内容</div>
+        </EDialog>
+        <EButton type="primary" @click="open = true">显示</EButton>
+    </div>
+</template>

package/dist/components/feedback/e_dialog/Document.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import baseUsingSrc from './BaseUsing.vue?raw';
+import AsyncUsingSrc from './AsyncUsing.vue?raw';
+import BaseUsing from './BaseUsing.vue';
+import AsyncUsing from './AsyncUsing.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍"> </DemoBox>
+        <DemoBox :code="baseUsingSrc" title="基本用法">
+            <BaseUsing />
+            <template #description>
+                对话框有多种类型，可用于展示信息、收集用户输入或进行操作确认。
+            </template>
+        </DemoBox>
+        <DemoBox :code="AsyncUsingSrc" title="在异步事件中的对话框">
+            <AsyncUsing />
+            <template #description>
+                在异步事件中使用对话框，例如在提交表单前进行确认。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/dist/components/feedback/e_drawer/BaseUsing.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EButton, EDrawer } from 'exploria-ui';
+
+const openDrawer = ref(false);
+
+const handleOk = () => {
+    console.log('点击了确定按钮');
+    openDrawer.value = false;
+};
+
+const handleCancel = () => {
+    console.log('点击了取消按钮');
+    openDrawer.value = false;
+};
+</script>
+
+<template>
+    <div>
+        <EButton @click="openDrawer = true">打开抽屉</EButton>
+        <EDrawer
+            v-model:open="openDrawer"
+            title="抽屉标题"
+            @ok="handleOk"
+            @cancel="handleCancel"
+        >
+            <div style="padding: 20px 0">
+                <div>这里是抽屉的内容区域</div>
+                <div style="margin-top: 10px">可以放置任何组件或内容</div>
+                <div style="margin-top: 10px">支持滚动条</div>
+                <div style="margin-top: 10px">底部有操作按钮</div>
+            </div>
+        </EDrawer>
+    </div>
+</template>

package/dist/components/feedback/e_drawer/DirectionUsing.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EButton, EDrawer } from 'exploria-ui';
+
+const openLeftDrawer = ref(false);
+const openRightDrawer = ref(false);
+const openTopDrawer = ref(false);
+const openBottomDrawer = ref(false);
+
+const handleClose = () => {
+    openLeftDrawer.value = false;
+    openRightDrawer.value = false;
+    openTopDrawer.value = false;
+    openBottomDrawer.value = false;
+};
+</script>
+
+<template>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap">
+        <EButton @click="openLeftDrawer = true">左侧抽屉</EButton>
+        <EButton @click="openRightDrawer = true">右侧抽屉</EButton>
+        <EButton @click="openTopDrawer = true">顶部抽屉</EButton>
+        <EButton @click="openBottomDrawer = true">底部抽屉</EButton>
+
+        <!-- 左侧抽屉 -->
+        <EDrawer
+            v-model:open="openLeftDrawer"
+            title="左侧抽屉"
+            direction="left"
+            width="300px"
+            @close="handleClose"
+            @cancel="handleClose"
+        >
+            <div style="padding: 20px 0">
+                <div>这是从左侧弹出的抽屉</div>
+                <div style="margin-top: 10px">
+                    可以通过 direction 属性控制弹出方向
+                </div>
+            </div>
+        </EDrawer>
+
+        <!-- 右侧抽屉 -->
+        <EDrawer
+            v-model:open="openRightDrawer"
+            title="右侧抽屉"
+            direction="right"
+            width="300px"
+            @close="handleClose"
+            @cancel="handleClose"
+        >
+            <div style="padding: 20px 0">
+                <div>这是从右侧弹出的抽屉</div>
+                <div style="margin-top: 10px">
+                    可以通过 direction 属性控制弹出方向
+                </div>
+            </div>
+        </EDrawer>
+
+        <!-- 顶部抽屉 -->
+        <EDrawer
+            v-model:open="openTopDrawer"
+            title="顶部抽屉"
+            direction="top"
+            height="200px"
+            @close="handleClose"
+            @cancel="handleClose"
+        >
+            <div style="padding: 20px 0">
+                <div>这是从顶部弹出的抽屉</div>
+                <div style="margin-top: 10px">
+                    可以通过 direction 属性控制弹出方向
+                </div>
+            </div>
+        </EDrawer>
+
+        <!-- 底部抽屉 -->
+        <EDrawer
+            v-model:open="openBottomDrawer"
+            title="底部抽屉"
+            direction="bottom"
+            height="200px"
+            @close="handleClose"
+            @cancel="handleClose"
+        >
+            <div style="padding: 20px 0">
+                <div>这是从底部弹出的抽屉</div>
+                <div style="margin-top: 10px">
+                    可以通过 direction 属性控制弹出方向
+                </div>
+            </div>
+        </EDrawer>
+    </div>
+</template>