exploria-ui-mcp-server 2.0.0

package/public/components/data/e_image/Document.vue

@@ -0,0 +1,71 @@
+<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';
+
+// API表格数据
+const apiData = [
+    {
+        subTitle: 'EImage Props',
+        list: [
+            {
+                name: 'src',
+                description: '图片地址',
+                type: 'string',
+                required: true,
+                defaultValue: '-',
+            },
+            {
+                name: 'previewable',
+                description: '是否可预览',
+                type: 'boolean',
+                required: false,
+                defaultValue: 'true',
+            },
+            {
+                name: 'tip',
+                description: '预览提示文字',
+                type: 'string',
+                required: false,
+                defaultValue: '预览',
+            },
+        ],
+    },
+];
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EImage 图片</h2>
+            <p>图片组件用于展示图片。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                图片组件用于展示图片，支持点击预览功能。
+            </template>
+        </DemoBox>
+        <APITable :data="apiData" />
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+.e-image-demo {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+
+    .left {
+        flex: 1;
+        overflow: auto;
+        padding: 30px;
+    }
+
+    .right {
+        width: 260px;
+    }
+}
+</style>

package/public/components/data/e_image/Using.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { EImage } from 'exploria-ui';
+
+const src = new URL('./img.png', import.meta.url).pathname;
+</script>
+
+<template>
+    <div class="using">
+        <EImage :src="src" previewable />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.using {
+    .e-image {
+        display: block;
+        height: 100px;
+        width: 100px;
+    }
+}
+</style>

package/public/components/data/e_list/BasicUsage.vue

@@ -0,0 +1,18 @@
+<template>
+    <EList
+        :data="[
+            { id: 1, name: '列表项1' },
+            { id: 2, name: '列表项2' },
+            { id: 3, name: '列表项3' },
+            { id: 4, name: '列表项4' },
+            { id: 5, name: '列表项5' },
+        ]"
+        v-slot="{ row }"
+    >
+        {{ row.name }}
+    </EList>
+</template>
+
+<script setup lang="ts">
+import { EList } from 'exploria-ui';
+</script>

package/public/components/data/e_list/CustomCheckboxUsage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { EList, EMessage } from 'exploria-ui';
+</script>
+<template>
+    <EList
+        :data="[
+            { id: 1, name: '列表项1' },
+            { id: 2, name: '列表项2' },
+            { id: 3, name: '列表项3' },
+            { id: 4, name: '列表项4' },
+            { id: 5, name: '列表项5' },
+        ]"
+        selectable
+        @update:selectedList="
+            (selectedList) =>
+                EMessage.success(`选中了 ${selectedList.join(', ')}`)
+        "
+        v-slot="{ row }"
+    >
+        {{ row.name }}
+    </EList>
+</template>

package/public/components/data/e_list/CustomEmptyDataUsage.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { EList } from 'exploria-ui';
+</script>
+<template>
+    <EList :data="[]" border>
+        <template #empty>
+            <div
+                style="
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    color: #999;
+                "
+            >
+                <svg
+                    width="60"
+                    height="60"
+                    viewBox="0 0 1024 1024"
+                    style="margin-bottom: 10px"
+                >
+                    <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                        fill="currentColor"
+                    />
+                    <path
+                        d="M464 416h112c4.4 0 8-3.6 8-8V352c0-4.4-3.6-8-8-8H464c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 160h112c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H464c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"
+                        fill="currentColor"
+                    />
+                    <path
+                        d="M512 536c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"
+                        fill="currentColor"
+                    />
+                </svg>
+                <div>暂无数据</div>
+            </div>
+        </template>
+    </EList>
+</template>

package/public/components/data/e_list/CustomRowUsage.vue

@@ -0,0 +1,64 @@
+<template>
+    <EList
+        :data="[
+            {
+                id: 1,
+                name: '张三',
+                email: 'zhangsan@example.com',
+                role: '管理员',
+                avatar: 'https://via.placeholder.com/40',
+            },
+            {
+                id: 2,
+                name: '李四',
+                email: 'lisi@example.com',
+                role: '编辑',
+                avatar: 'https://via.placeholder.com/40',
+            },
+            {
+                id: 3,
+                name: '王五',
+                email: 'wangwu@example.com',
+                role: '访客',
+                avatar: 'https://via.placeholder.com/40',
+            },
+        ]"
+        border
+        show-divider
+    >
+        <template #default="{ row }">
+            <div style="display: flex; align-items: center; width: 100%">
+                <img
+                    :src="row.avatar"
+                    alt="avatar"
+                    style="
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        margin-right: 15px;
+                    "
+                />
+                <div style="flex: 1">
+                    <div style="font-weight: bold">{{ row.name }}</div>
+                    <div style="font-size: 12px; color: #666">
+                        {{ row.email }}
+                    </div>
+                </div>
+                <span style="color: #1890ff">{{ row.role }}</span>
+            </div>
+        </template>
+    </EList>
+</template>
+
+<script setup lang="ts">
+import { EList } from 'exploria-ui';
+</script>
+
+<style scoped lang="scss">
+h3 {
+    margin: 0 0 15px 0;
+    font-size: 16px;
+    font-weight: bold;
+    color: var(--e-text-color-primary);
+}
+</style>

package/public/components/data/e_list/DividerUsage.vue

@@ -0,0 +1,20 @@
+<template>
+    <EList
+        :data="[
+            { id: 1, name: '列表项1' },
+            { id: 2, name: '列表项2' },
+            { id: 3, name: '列表项3' },
+            { id: 4, name: '列表项4' },
+            { id: 5, name: '列表项5' },
+        ]"
+        show-divider
+    >
+        <template #default="{ row }">
+            {{ row.name }}
+        </template>
+    </EList>
+</template>
+
+<script setup lang="ts">
+import { EList } from 'exploria-ui';
+</script>

package/public/components/data/e_list/Document.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+
+// 导入独立示例组件和源代码
+import basicUsageSrc from './BasicUsage.vue?raw';
+import BasicUsage from './BasicUsage.vue';
+import dividerUsageSrc from './DividerUsage.vue?raw';
+import DividerUsage from './DividerUsage.vue';
+import sizeUsageSrc from './SizeUsage.vue?raw';
+import SizeUsage from './SizeUsage.vue';
+import singleSelectUsageSrc from './SingleSelectUsage.vue?raw';
+import SingleSelectUsage from './SingleSelectUsage.vue';
+import multipleSelectUsageSrc from './MultipleSelectUsage.vue?raw';
+import MultipleSelectUsage from './MultipleSelectUsage.vue';
+import customCheckboxUsageSrc from './CustomCheckboxUsage.vue?raw';
+import CustomCheckboxUsage from './CustomCheckboxUsage.vue';
+import customRowUsageSrc from './CustomRowUsage.vue?raw';
+import CustomRowUsage from './CustomRowUsage.vue';
+import emptyDataUsageSrc from './EmptyDataUsage.vue?raw';
+import EmptyDataUsage from './EmptyDataUsage.vue';
+import customEmptyDataUsageSrc from './CustomEmptyDataUsage.vue?raw';
+import CustomEmptyDataUsage from './CustomEmptyDataUsage.vue';
+import eventUsageSrc from './EventUsage.vue?raw';
+import EventUsage from './EventUsage.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EList 列表</h2>
+            <p>列表组件用于展示数据列表，支持多种功能和样式定制。</p>
+        </DemoBox>
+        <DemoBox :code="basicUsageSrc" title="基本用法">
+            <BasicUsage />
+            <template #description>
+                最基础的列表展示，仅显示数据内容。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="dividerUsageSrc" title="显示分割线">
+            <DividerUsage />
+            <template #description>
+                列表项之间显示分割线，便于区分不同项。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="sizeUsageSrc" title="不同尺寸">
+            <SizeUsage />
+            <template #description>
+                支持大、中、小三种尺寸，适应不同场景需求。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="singleSelectUsageSrc" title="单选模式">
+            <SingleSelectUsage />
+            <template #description>
+                支持单选功能，可通过点击选择列表项。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="multipleSelectUsageSrc" title="多选模式">
+            <MultipleSelectUsage />
+            <template #description>
+                支持多选功能，可通过点击选择多个列表项。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="customCheckboxUsageSrc" title="自定义复选框">
+            <CustomCheckboxUsage />
+            <template #description>
+                支持自定义复选框样式，满足个性化需求。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="customRowUsageSrc" title="自定义行内容">
+            <CustomRowUsage />
+            <template #description>
+                支持自定义行内容，可展示复杂的数据结构。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="emptyDataUsageSrc" title="空数据状态">
+            <EmptyDataUsage />
+            <template #description>
+                当列表数据为空时，显示默认的空状态提示。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="customEmptyDataUsageSrc" title="自定义空数据状态">
+            <CustomEmptyDataUsage />
+            <template #description>
+                支持自定义空数据状态，可展示个性化的空状态提示。
+            </template>
+        </DemoBox>
+
+        <DemoBox :code="eventUsageSrc" title="事件监听">
+            <EventUsage />
+            <template #description>
+                支持行点击事件，可响应用户的交互操作。
+            </template>
+        </DemoBox>
+
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EList Props',
+                    list: [
+                        {
+                            name: 'data',
+                            description: '列表数据',
+                            type: 'T[]',
+                            defaultValue: '[]',
+                            required: true,
+                        },
+                        {
+                            name: 'size',
+                            description: '列表尺寸',
+                            type: 'large | medium | small',
+                            defaultValue: 'medium',
+                            required: false,
+                        },
+                        {
+                            name: 'border',
+                            description: '是否显示边框',
+                            type: 'boolean',
+                            defaultValue: 'false',
+                            required: false,
+                        },
+                        {
+                            name: 'showDivider',
+                            description: '是否显示分割线',
+                            type: 'boolean',
+                            defaultValue: 'false',
+                            required: false,
+                        },
+                        {
+                            name: 'selectable',
+                            description: '是否可选择',
+                            type: 'boolean',
+                            defaultValue: 'false',
+                            required: false,
+                        },
+                        {
+                            name: 'multiple',
+                            description: '是否支持多选',
+                            type: 'boolean',
+                            defaultValue: 'false',
+                            required: false,
+                        },
+                        {
+                            name: 'modelValue',
+                            description: '已选中的项',
+                            type: 'T | T[]',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'rowHeight',
+                            description: '每行高度',
+                            type: 'number',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'EList Events',
+                    list: [
+                        {
+                            name: 'update:modelValue',
+                            description: '选中项变化事件，参数：value: T | T[]',
+                            type: 'Function',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'row-click',
+                            description:
+                                '点击行事件，参数：row: T, index: number',
+                            type: 'Function',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'row-dblclick',
+                            description:
+                                '双击行事件，参数：row: T, index: number',
+                            type: 'Function',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'row-mouseenter',
+                            description:
+                                '鼠标悬停行事件，参数：row: T, index: number',
+                            type: 'Function',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'row-mouseleave',
+                            description:
+                                '鼠标离开行事件，参数：row: T, index: number',
+                            type: 'Function',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'EList Slots',
+                    list: [
+                        {
+                            name: 'default',
+                            description:
+                                '自定义行内容，参数：row: T, index: number',
+                            type: 'Slot',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'checkbox',
+                            description:
+                                '自定义复选框，参数：row: T, checked: boolean',
+                            type: 'Slot',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                        {
+                            name: 'empty',
+                            description: '自定义空数据状态',
+                            type: 'Slot',
+                            defaultValue: 'undefined',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+@use '@/style/global' as global;
+
+h1 {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: var(--e-text-color-primary);
+}
+
+p {
+    font-size: 14px;
+    color: var(--e-text-color-regular);
+    margin-bottom: 30px;
+    line-height: 1.5;
+}
+</style>

package/public/components/data/e_list/EmptyDataUsage.vue

@@ -0,0 +1,3 @@
+<template>
+    <EList :data="[]" border> </EList>
+</template>

package/public/components/data/e_list/EventUsage.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { EList, EMessage } from 'exploria-ui';
+</script>
+<template>
+    <EList
+        :data="[
+            { id: 1, name: '列表项1' },
+            { id: 2, name: '列表项2' },
+            { id: 3, name: '列表项3' },
+            { id: 4, name: '列表项4' },
+            { id: 5, name: '列表项5' },
+        ]"
+        border
+        @row-click="
+            (row, index) =>
+                EMessage.success('点击了第 ' + (index + 1) + ' 行: ' + row.name)
+        "
+    >
+        <template #default="{ row }">
+            {{ row.name }}
+        </template>
+    </EList>
+</template>

package/public/components/data/e_list/MultipleSelectUsage.vue

@@ -0,0 +1,22 @@
+<template>
+    <EList
+        :data="[
+            { id: 1, name: '列表项1' },
+            { id: 2, name: '列表项2' },
+            { id: 3, name: '列表项3' },
+            { id: 4, name: '列表项4' },
+            { id: 5, name: '列表项5' },
+        ]"
+        selectable
+        multiple
+        border
+    >
+        <template #default="{ row }">
+            {{ row.name }}
+        </template>
+    </EList>
+</template>
+
+<script setup lang="ts">
+import { EList } from 'exploria-ui';
+</script>

package/public/components/data/e_list/SingleSelectUsage.vue

@@ -0,0 +1,21 @@
+<template>
+    <EList
+        :data="[
+            { id: 1, name: '列表项1' },
+            { id: 2, name: '列表项2' },
+            { id: 3, name: '列表项3' },
+            { id: 4, name: '列表项4' },
+            { id: 5, name: '列表项5' },
+        ]"
+        :selectable="true"
+        border
+    >
+        <template #default="{ row }">
+            {{ row.name }}
+        </template>
+    </EList>
+</template>
+
+<script setup lang="ts">
+import { EList } from 'exploria-ui';
+</script>

package/public/components/data/e_list/SizeUsage.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="example-container">
+        <h4>大尺寸</h4>
+        <EList :data="basicData" size="large" border>
+            <template #default="{ row }">
+                {{ row.name }}
+            </template>
+        </EList>
+
+        <h4>中尺寸</h4>
+        <EList :data="basicData" size="medium" border>
+            <template #default="{ row }">
+                {{ row.name }}
+            </template>
+        </EList>
+
+        <h4>小尺寸</h4>
+        <EList :data="basicData" size="small" border>
+            <template #default="{ row }">
+                {{ row.name }}
+            </template>
+        </EList>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EList } from 'exploria-ui';
+
+// 基础数据
+const basicData = [
+    { id: 1, name: '列表项1' },
+    { id: 2, name: '列表项2' },
+    { id: 3, name: '列表项3' },
+];
+</script>

package/public/components/data/e_media_viewer/Document.vue

@@ -0,0 +1,39 @@
+<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="介绍">
+            <h2>EMediaViewer 媒体查看器</h2>
+            <p>媒体查看器组件用于展示图片、视频等媒体内容。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </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>