exploria-ui-mcp-server 2.0.0

package/dist/components/advanced/e_rolling_follow/Using.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ERollingFollow } from 'exploria-ui';
+import { ref } from 'vue';
+
+const currentIndex = ref(25);
+const itemHeight = 30;
+const count = 50;
+</script>
+
+<template>
+    <div>
+        {{ currentIndex }}
+        <ERollingFollow
+            :style="{ height: `${itemHeight * 10}px` }"
+            :item-height="itemHeight"
+            v-model="currentIndex"
+        >
+            <template #bg>
+                <div
+                    style="background-color: rgb(64, 244, 115)"
+                    :style="{
+                        height: `${itemHeight}px`,
+                    }"
+                >
+                    {{ currentIndex }}
+                </div>
+            </template>
+
+            <template #default>
+                <div
+                    v-for="(item, index) of count"
+                    :key="item"
+                    :style="{
+                        height: `${itemHeight}px`,
+                    }"
+                    style="
+                        background-color: rgba(215, 152, 103, 0.18);
+                        display: grid;
+                        place-items: center;
+                        overflow: hidden;
+                    "
+                >
+                    {{ index }}
+                </div>
+            </template>
+        </ERollingFollow>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.parallax-scrolling {
+    height: 300px;
+}
+</style>

package/dist/components/advanced/e_virtual_list/ComprehensiveCase.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { ECheckbox, EInput, EVirtualList } from 'exploria-ui';
+import { computed, reactive, ref } from 'vue';
+
+const eventMap = {
+    GET: Array.from({ length: 20 }, (_, index) => {
+        return {
+            label: '获取' + index,
+            code: 'api_get' + index,
+        };
+    }),
+    POST: Array.from({ length: 34 }, (_, index) => {
+        return {
+            label: '提交' + index,
+            code: 'api_post' + index,
+        };
+    }),
+    DELETE: Array.from({ length: 14 }, (_, index) => {
+        return {
+            label: '删除' + index,
+            code: 'api_delete' + index,
+        };
+    }),
+} as {
+    [category: string]: {
+        label: string;
+        code: string;
+    }[];
+};
+
+const searchText = ref('');
+
+const colCount = ref(3);
+
+interface Row {
+    rowKey: string;
+    type: 'category' | 'eventNameList';
+    items: { label: string; value?: string }[];
+}
+
+const computedData = computed<Row[]>(() => {
+    const list: Row[] = [];
+
+    for (const category in eventMap) {
+        const matchedList = eventMap[category]!.filter((item) =>
+            item.label.includes(searchText.value)
+        );
+
+        if (matchedList.length) {
+            // 添加标题
+            list.push({
+                rowKey: category,
+                type: 'category',
+                items: [{ label: category }],
+            });
+            // 根据 colCount 来构建每一行数据
+            for (
+                let rowIndex = 0;
+                rowIndex < Math.ceil(matchedList.length / colCount.value);
+                rowIndex++
+            ) {
+                // 一行数据，其中包含 colCount 个元素
+                const eventListInRow = matchedList.slice(
+                    rowIndex * colCount.value,
+                    (rowIndex + 1) * colCount.value
+                );
+
+                // 构建 rowKey
+                const rowKey = eventListInRow.reduce((a, b) => a + b.code, '');
+                list.push({
+                    rowKey,
+                    type: 'eventNameList',
+                    items: eventListInRow.map((item) => {
+                        return { label: item.label, value: item.code };
+                    }),
+                });
+            }
+        }
+    }
+    return list;
+});
+
+const handleSizeChange = (width: number) => {
+    if (width <= 370) {
+        colCount.value = 1;
+    } else if (width < 800) {
+        colCount.value = 2;
+    } else {
+        colCount.value = 3;
+    }
+};
+
+const selectedMap = reactive<{
+    [value: string]: boolean;
+}>({});
+
+const selectedAll = computed({
+    get() {
+        const selectedCount = Object.entries(selectedMap).filter(
+            (item) => item[1]
+        ).length;
+        const allCount = Object.values(eventMap).flat().length;
+        return selectedCount === allCount && allCount !== 0;
+    },
+    set(checked) {
+        // 全选的是所有原始数据，而不是搜索过滤过的数据
+        const eventList = Object.values(eventMap).flat();
+
+        eventList.forEach((item) => {
+            selectedMap[item.code] = checked;
+        });
+    },
+});
+</script>
+
+<template>
+    <div class="comprehensive-case">
+        <div class="top">
+            <ECheckbox v-model="selectedAll"> 全选</ECheckbox>
+            <EInput
+                type="text"
+                v-model="searchText"
+                placeholder="请输入"
+                clearable
+            >
+                <template #prefix>
+                    <i class="iconfont icon-seacrh" style="font-size: 15px" />
+                </template>
+            </EInput>
+        </div>
+        <EVirtualList
+            v-size-ob="(width: number) => handleSizeChange(width)"
+            :data="computedData"
+            :container-height="270"
+            :item-height="30"
+        >
+            <template #row="{ row }: { row: Row }">
+                <div
+                    v-if="row.type === 'category'"
+                    class="category"
+                    :key="row.rowKey"
+                >
+                    {{ row.items[0]!.label }}
+                </div>
+                <div v-else class="row">
+                    <div
+                        class="col"
+                        v-for="item of row.items"
+                        :key="row.rowKey + item.value"
+                    >
+                        <ECheckbox
+                            :model-value="selectedMap[item.value!] ?? false"
+                            @update:model-value="
+                                (checked) =>
+                                    (selectedMap[item.value!] = checked)
+                            "
+                        >
+                            {{ item.label }}
+                        </ECheckbox>
+                    </div>
+                    <!-- 占位 -->
+
+                    <!-- @ts-ignore -->
+                    <div
+                        class="col"
+                        v-for="i in colCount - row.items.length"
+                        :key="i"
+                    />
+                </div>
+            </template>
+            <template #empty></template>
+        </EVirtualList>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import 'iconfont/iconfont.css';
+
+.comprehensive-case {
+    .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .one-input {
+            width: 230px;
+            height: 30px;
+        }
+    }
+
+    .e-virtual-list {
+        .category {
+            font-size: 13px;
+            color: #606060;
+        }
+
+        .row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .col {
+                flex: 1 0 0;
+            }
+        }
+    }
+}
+</style>

package/dist/components/advanced/e_virtual_list/Document.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import Using from './Using.vue';
+import UsingRaw from './Using.vue?raw';
+import PageLayout from '@/components/PageLayout.vue';
+import DynamicData from './DynamicData.vue';
+import DynamicDataCode from './DynamicData.vue?raw';
+import ComprehensiveCase from './ComprehensiveCase.vue';
+import ComprehensiveCaseCode from './ComprehensiveCase.vue?raw';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EVirtualList 虚拟滚动</h2>
+            <p>
+                虚拟滚动组件，用于高效渲染大量数据，只渲染可视区域内的数据，提高性能。
+            </p>
+        </DemoBox>
+        <DemoBox :code="UsingRaw" title="基本用法">
+            <Using />
+            <template #description>
+                基本的虚拟滚动用法，展示静态数据列表。
+            </template>
+        </DemoBox>
+        <DemoBox :code="DynamicDataCode" title="当数据动态时">
+            <DynamicData />
+            <template #description>
+                当数据动态变化时，虚拟滚动会自动更新。</template
+            >
+        </DemoBox>
+        <DemoBox :code="ComprehensiveCaseCode" title="综合案例">
+            <ComprehensiveCase />
+            <template #description> 虚拟滚动的综合使用案例。</template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EVirtualList Props',
+                    list: [
+                        {
+                            name: 'data',
+                            description: '数据数组，每个项必须包含rowKey属性',
+                            type: 'T[]',
+                            defaultValue: '[]',
+                            required: true,
+                        },
+                        {
+                            name: 'containerHeight',
+                            description: '容器高度，必须是itemHeight的整数倍',
+                            type: 'number',
+                            defaultValue: 'undefined',
+                            required: true,
+                        },
+                        {
+                            name: 'itemHeight',
+                            description: '每个项的高度',
+                            type: 'number',
+                            defaultValue: 'undefined',
+                            required: true,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/dist/components/advanced/e_virtual_list/DynamicData.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { EVirtualList } from 'exploria-ui';
+import { computed, ref } from 'vue';
+
+const length = ref(100);
+
+const data = computed(() =>
+    Array.from({ length: length.value }, (_, index) => {
+        return {
+            rowKey: index,
+            name: 'name' + index,
+        };
+    })
+);
+</script>
+
+<template>
+    <div class="dynamic-data">
+        <button @click="length++">添加数据</button>
+        数据长度: {{ data.length }}
+        <EVirtualList
+            :data="data"
+            :container-height="150"
+            :item-height="30"
+            #row="{ row }"
+        >
+            <!-- @ts-ignore -->
+            <div class="list-item">{{ row.name }}</div>
+        </EVirtualList>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.dynamic-data {
+    .e-virtual-list {
+        .list-item {
+            height: 100%;
+            background-color: #99bef6;
+        }
+    }
+}
+</style>

package/dist/components/advanced/e_virtual_list/Using.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { EVirtualList } from 'exploria-ui';
+
+const data = Array.from({ length: 6 }, (_, index) => {
+    return {
+        rowKey: index.toString(),
+        name: 'name' + index,
+    };
+});
+</script>
+
+<template>
+    <EVirtualList
+        :data="data"
+        :container-height="150"
+        :item-height="30"
+        #row="{ row }"
+    >
+        <!-- TODO row 的类型丢失了 -->
+        <!-- @ts-ignore -->
+        <div class="list-item">{{ row?.name }}</div>
+    </EVirtualList>
+</template>
+
+<style scoped lang="scss">
+.e-virtual-list {
+    .list-item {
+        height: 100%;
+        background-color: #99bef6;
+    }
+}
+</style>

package/dist/components/advanced/e_virtual_list/iconfont/iconfont.css

@@ -0,0 +1,19 @@
+@font-face {
+    font-family: 'iconfont'; /* Project id 5031666 */
+    src:
+        url('iconfont.woff2?t=1758898037535') format('woff2'),
+        url('iconfont.woff?t=1758898037535') format('woff'),
+        url('iconfont.ttf?t=1758898037535') format('truetype');
+}
+
+.iconfont {
+    font-family: 'iconfont' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-seacrh:before {
+    content: '\e68d';
+}

package/dist/components/advanced/e_watermark/AutoSize.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <div class="demo-container">
+        <!-- 短文本自动尺寸 -->
+        <EWatermark
+            text="短文本"
+            font-color="rgba(0, 0, 255, 0.2)"
+            :font-size="16"
+            :gap="15"
+        >
+            <div class="demo-box blue">
+                <span>短文本自动尺寸</span>
+            </div>
+        </EWatermark>
+
+        <!-- 长文本自动尺寸 -->
+        <EWatermark
+            text="这是一段很长的水印文本"
+            font-color="rgba(255, 0, 0, 0.2)"
+            :font-size="18"
+            :gap="15"
+        >
+            <div class="demo-box red">
+                <span>长文本自动尺寸</span>
+            </div>
+        </EWatermark>
+
+        <!-- 多行文本自动尺寸 -->
+        <EWatermark
+            :text="['多行水印', '第二行很长的文本内容', '第三行']"
+            font-color="rgba(0, 128, 0, 0.2)"
+            :font-size="16"
+            :gap="15"
+        >
+            <div class="demo-box green">
+                <span>多行文本自动尺寸</span>
+            </div>
+        </EWatermark>
+
+        <!-- 指定高度，自动宽度 -->
+        <EWatermark
+            text="指定高度，自动宽度的水印文本"
+            font-color="rgba(128, 0, 128, 0.2)"
+            :font-size="16"
+            :height="150"
+            :gap="15"
+        >
+            <div class="demo-box purple">
+                <span>指定高度，自动宽度</span>
+            </div>
+        </EWatermark>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.demo-box {
+    width: 300px;
+    height: 200px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.blue {
+        background-color: #e6f7ff;
+    }
+
+    &.red {
+        background-color: #fff2f0;
+    }
+
+    &.green {
+        background-color: #f6ffed;
+    }
+
+    &.purple {
+        background-color: #f9f0ff;
+    }
+}
+</style>

package/dist/components/advanced/e_watermark/BasicUsing.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <EWatermark text="朵朵朵朵" font-color="rgba(255, 255, 255, 1)">
+        <img src="@/assets/author_avatar.png" alt="" />
+    </EWatermark>
+</template>

package/dist/components/advanced/e_watermark/CustomFont.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <div class="demo-container">
+        <!-- 衬线字体 -->
+        <EWatermark
+            text="Serif字体水印"
+            font-family="Times New Roman, serif"
+            :font-size="20"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>Serif字体</span>
+            </div>
+        </EWatermark>
+
+        <!-- 无衬线字体 -->
+        <EWatermark
+            text="Sans-serif字体水印"
+            font-family="Arial, sans-serif"
+            :font-size="20"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>Sans-serif字体</span>
+            </div>
+        </EWatermark>
+
+        <!-- 等宽字体 -->
+        <EWatermark
+            text="Monospace字体水印"
+            font-family="Courier New, monospace"
+            :font-size="20"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>Monospace字体</span>
+            </div>
+        </EWatermark>
+
+        <!-- 手写体 -->
+        <EWatermark
+            text="Cursive字体水印"
+            font-family="Brush Script MT, cursive"
+            :font-size="20"
+            :gap="15"
+        >
+            <div class="demo-box">
+                <span>Cursive字体</span>
+            </div>
+        </EWatermark>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.demo-box {
+    width: 300px;
+    height: 200px;
+    background-color: #f5f7fa;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

package/dist/components/advanced/e_watermark/CustomStyle.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { EWatermark } from 'exploria-ui';
+</script>
+
+<template>
+    <div style="display: flex; gap: 20px; flex-wrap: wrap">
+        <EWatermark
+            text="蓝色水印"
+            :rotate="0"
+            font-color="rgba(0, 0, 255, 0.2)"
+            :font-size="20"
+            font-family="serif"
+            :gap="15"
+        >
+            <div
+                style="
+                    width: 200px;
+                    height: 200px;
+                    background-color: #e6f7ff;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                "
+            >
+                <span>水平蓝色</span>
+            </div>
+        </EWatermark>
+
+        <EWatermark
+            text="绿色水印"
+            :rotate="-45"
+            font-color="rgba(0, 255, 0, 0.2)"
+            :font-size="16"
+            font-family="monospace"
+            :gap="15"
+        >
+            <div
+                style="
+                    width: 200px;
+                    height: 200px;
+                    background-color: #f6ffed;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                "
+            >
+                <span>倾斜绿色</span>
+            </div>
+        </EWatermark>
+
+        <EWatermark
+            text="红色水印"
+            :rotate="90"
+            font-color="rgba(255, 0, 0, 0.2)"
+            :font-size="18"
+            font-family="cursive"
+            :gap="15"
+        >
+            <div
+                style="
+                    width: 200px;
+                    height: 200px;
+                    background-color: #fff2f0;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                "
+            >
+                <span>垂直红色</span>
+            </div>
+        </EWatermark>
+    </div>
+</template>