exploria-ui-mcp-server 2.1.4 → 2.2.5

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

@@ -1,177 +0,0 @@
-<script setup lang="ts">
-import { EPopover, EButton } from 'exploria-ui';
-import { ref } from 'vue';
-
-const customOpen = ref(false);
-</script>
-
-<template>
-    <div class="using-container">
-        <h3>基本用法</h3>
-        <div class="demo-row">
-            <EPopover placement="top" trigger="click">
-                <EButton type="primary">点击显示（上）</EButton>
-                <template #content>
-                    <div>这是顶部弹出框的内容</div>
-                </template>
-            </EPopover>
-
-            <EPopover placement="bottom" trigger="click">
-                <EButton type="primary">点击显示（下）</EButton>
-                <template #content>
-                    <div>这是底部弹出框的内容</div>
-                </template>
-            </EPopover>
-
-            <EPopover placement="left" trigger="click">
-                <EButton type="primary">点击显示（左）</EButton>
-                <template #content>
-                    <div>这是左侧弹出框的内容</div>
-                </template>
-            </EPopover>
-
-            <EPopover placement="right" trigger="click">
-                <EButton type="primary">点击显示（右）</EButton>
-                <template #content>
-                    <div>这是右侧弹出框的内容</div>
-                </template>
-            </EPopover>
-        </div>
-
-        <h3>Hover 触发</h3>
-        <div class="demo-row">
-            <EPopover placement="top" trigger="hover">
-                <EButton type="info">悬停显示（上）</EButton>
-                <template #content>
-                    <div>这是顶部弹出框的内容</div>
-                </template>
-            </EPopover>
-
-            <EPopover placement="bottom" trigger="hover">
-                <EButton type="info">悬停显示（下）</EButton>
-                <template #content>
-                    <div>这是底部弹出框的内容</div>
-                </template>
-            </EPopover>
-        </div>
-
-        <h3>不同尺寸</h3>
-        <div class="demo-row">
-            <EPopover placement="top" trigger="click" size="small">
-                <EButton type="success">小尺寸</EButton>
-                <template #content>
-                    <div>这是小尺寸弹出框的内容</div>
-                </template>
-            </EPopover>
-
-            <EPopover placement="top" trigger="click" size="medium">
-                <EButton type="success">默认尺寸</EButton>
-                <template #content>
-                    <div>这是默认尺寸弹出框的内容</div>
-                </template>
-            </EPopover>
-
-            <EPopover placement="top" trigger="click" size="large">
-                <EButton type="success">大尺寸</EButton>
-                <template #content>
-                    <div>这是大尺寸弹出框的内容</div>
-                </template>
-            </EPopover>
-        </div>
-
-        <h3>自定义内容</h3>
-        <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>
-
-        <h3>Contextmenu 触发</h3>
-        <div class="demo-row">
-            <EPopover placement="bottom" trigger="contextmenu">
-                <EButton type="danger">右键显示</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>
-
-        <h3>Custom 触发</h3>
-        <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>
-    </div>
-</template>
-
-<style scoped>
-.using-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-h3 {
-    margin-top: 30px;
-    margin-bottom: 15px;
-    font-size: 18px;
-    font-weight: bold;
-}
-
-.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_tooltip/Document.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import DemoBox from '@/components/DemoBox/DemoBox.vue';
-import PageLayout from '@/components/PageLayout.vue';
-import Using from './Using.vue';
-import SizeUsing from './SizeUsing.vue';
-import code from './Using.vue?raw';
-import sizeCode from './SizeUsing.vue?raw';
-</script>
-<template>
-    <PageLayout>
-        <DemoBox title="介绍">
-            <p>
-                ETooltip
-                是一个用于显示简短提示信息的组件，当鼠标悬停在元素上时触发。
-            </p>
-            <p><strong>与 EPopover 的区别：</strong></p>
-            <ul>
-                <li>
-                    <strong>触发方式：</strong>ETooltip 仅支持 hover
-                    触发，用于鼠标悬停显示简短提示；EPopover 支持
-                    hover、click、contextmenu、custom 多种触发方式。
-                </li>
-                <li>
-                    <strong>用途：</strong>ETooltip
-                    主要用于显示简单文本提示；EPopover
-                    用于展示复杂内容，可以包含自定义组件和交互元素。
-                </li>
-                <li>
-                    <strong>功能复杂度：</strong>ETooltip
-                    功能相对简单，专注于提示展示；EPopover
-                    功能更丰富，支持手动控制、多种尺寸和位置等。
-                </li>
-            </ul>
-        </DemoBox>
-        <DemoBox title="不同位置" :code="code">
-            <Using />
-        </DemoBox>
-        <DemoBox title="不同尺寸" :code="sizeCode">
-            <SizeUsing />
-        </DemoBox>
-    </PageLayout>
-</template>

package/public/components/feedback/e_tooltip/SizeUsing.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { ETooltip, EButton } from 'exploria-ui';
-
-type ESize = 'large' | 'medium' | 'small';
-const sizeList: ESize[] = ['large', 'medium', 'small'];
-</script>
-
-<template>
-    <div class="size-using">
-        <ETooltip
-            v-for="size in sizeList"
-            :key="size"
-            content="基于 Rust 的极速构建引擎，TypeScript 全量类型支持，为现代 Web 应用提供最高效的 UI 开发体验"
-            placement="top"
-            :size="size"
-        >
-            <EButton>{{ size }}</EButton>
-        </ETooltip>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.size-using {
-    display: flex;
-    display: flex;
-    gap: 20px;
-}
-</style>

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

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { ETooltip, EButton } from 'exploria-ui';
-
-type EPlacement = InstanceType<typeof ETooltip>['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="using">
-        <div class="row" v-for="(row, index) of placementList" :key="index">
-            <template v-for="placement of row">
-                <ETooltip
-                    v-if="placement.length"
-                    content="基于 Rust 的极速构建引擎，TypeScript 全量类型支持，为现代 Web 应用提供最高效的 UI 开发体验"
-                    :placement="placement as EPlacement"
-                    :key="placement"
-                >
-                    <EButton>{{ placement }}</EButton>
-                </ETooltip>
-                <div v-else />
-            </template>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.using {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .row {
-        display: flex;
-        gap: 10px;
-        justify-content: space-between;
-    }
-}
-</style>

package/public/components/form/e_checkbox/Document.vue

@@ -1,88 +0,0 @@
-<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>ECheckbox 多选框</h2>
-            <p>多选框组件，用于表单中的多项选择，支持自定义尺寸和绑定值。</p>
-        </DemoBox>
-        <DemoBox :code="src" title="基本用法" anchor="基本用法">
-            <Using />
-            <template #description>
-                基础的多选框用法，通过 v-model 绑定选中状态。
-            </template>
-        </DemoBox>
-
-        <APITable
-            :data="[
-                {
-                    subTitle: 'ECheckbox Props',
-                    list: [
-                        {
-                            name: 'model-value',
-                            description: '绑定值',
-                            type: 'boolean',
-                            required: true,
-                            defaultValue: 'false',
-                        },
-                        {
-                            name: 'label',
-                            description: '标签文本',
-                            type: 'string',
-                            required: false,
-                            defaultValue: '',
-                        },
-                        {
-                            name: 'disabled',
-                            description: '是否禁用',
-                            type: 'boolean',
-                            required: false,
-                            defaultValue: 'false',
-                        },
-                        {
-                            name: 'checked',
-                            description: '是否选中',
-                            type: 'boolean',
-                            required: false,
-                            defaultValue: 'false',
-                        },
-                        {
-                            name: 'indeterminate',
-                            description: '是否为 indeterminate 状态',
-                            type: 'boolean',
-                            required: false,
-                            defaultValue: 'false',
-                        },
-                        {
-                            name: 'trueValue',
-                            description: '选中时的值',
-                            type: 'any',
-                            required: false,
-                            defaultValue: 'true',
-                        },
-                        {
-                            name: 'falseValue',
-                            description: '未选中时的值',
-                            type: 'any',
-                            required: false,
-                            defaultValue: 'false',
-                        },
-                        {
-                            name: 'name',
-                            description: '原生 name 属性',
-                            type: 'string',
-                            required: false,
-                            defaultValue: '',
-                        },
-                    ],
-                },
-            ]"
-        />
-    </PageLayout>
-</template>

package/public/components/form/e_checkbox/Using.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ECheckbox } from 'exploria-ui';
-
-const checked = ref(false);
-</script>
-
-<template>
-    <ECheckbox v-model="checked">label</ECheckbox>
-</template>

package/public/components/form/e_color_picker/Document.vue

@@ -1,55 +0,0 @@
-<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>EColorPicker 颜色选择器</h2>
-            <p>
-                颜色选择器组件，用于表单中的颜色选择，支持自定义尺寸和透明度调节。
-            </p>
-        </DemoBox>
-        <DemoBox :code="src" title="基本用法" anchor="基本用法">
-            <Using />
-            <template #description>
-                基础的颜色选择器用法，通过 v-model 绑定选中颜色值。
-            </template>
-        </DemoBox>
-
-        <APITable
-            :data="[
-                {
-                    subTitle: 'EColorPicker Props',
-                    list: [
-                        {
-                            name: 'model-value',
-                            description: '绑定值',
-                            type: 'string',
-                            required: true,
-                            defaultValue: '#ff0000',
-                        },
-                        {
-                            name: 'size',
-                            description: '尺寸',
-                            type: 'string',
-                            required: false,
-                            defaultValue: 'medium',
-                        },
-                        {
-                            name: 'show-arrow',
-                            description: '是否显示箭头',
-                            type: 'boolean',
-                            required: false,
-                            defaultValue: 'true',
-                        },
-                    ],
-                },
-            ]"
-        />
-    </PageLayout>
-</template>

package/public/components/form/e_color_picker/Using.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { EColorPicker } from 'exploria-ui';
-
-// 双向绑定选中的颜色
-const selectColor = ref('#FF5630');
-</script>
-<template>
-    <EColorPicker v-model="selectColor" />
-</template>

package/public/components/form/e_condition_group/Document.vue

@@ -1,52 +0,0 @@
-<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>EConditionGroup 条件组</h2>
-            <p>
-                条件组组件用于在表单中展示多个条件，用户可以根据条件进行筛选。
-            </p>
-        </DemoBox>
-        <DemoBox :code="src" title="基本用法">
-            <Using />
-            <template #description>
-                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
-            </template>
-        </DemoBox>
-        <APITable
-            :data="[
-                {
-                    subTitle: 'EFileSelector Props',
-                    list: [
-                        {
-                            name: 'access-file-types',
-                            description: '允许的文件类型',
-                            type: 'string[]',
-                            defaultValue: '--',
-                            required: true,
-                        },
-                    ],
-                },
-                {
-                    subTitle: 'EFileSelector Events',
-                    list: [
-                        {
-                            name: 'change',
-                            description: '文件选择改变时触发',
-                            type: 'function (files: File[])',
-                            defaultValue: '--',
-                            required: false,
-                        },
-                    ],
-                },
-            ]"
-        />
-    </PageLayout>
-</template>

package/public/components/form/e_condition_group/Using.vue

@@ -1,165 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { EConditionGroup, ESelect } from 'exploria-ui';
-// 条件列表
-const conditions = ref<Record<string, any>[][]>([
-    [
-        {
-            field: 'threatLevel',
-            operator: 'equal',
-            value: 'high',
-            matchType: 'match',
-        },
-        {
-            field: 'attackType',
-            operator: 'include',
-            value: 'malware',
-            matchType: 'match',
-        },
-    ],
-]);
-</script>
-
-<template>
-    <div class="using">
-        <EConditionGroup
-            v-model:condition-group="conditions"
-            :default-value-map="{
-                field: 'threatLevel',
-                operator: 'equal',
-                value: 'high',
-                matchType: 'match',
-            }"
-            #default="{ groupIndex, rowIndex, row }"
-        >
-            <!-- 自定义条件项 -->
-            <ESelect
-                :items="[
-                    { label: '威胁等级', value: 'threatLevel' },
-                    { label: '攻击类型', value: 'attackType' },
-                    { label: '源IP', value: 'sourceIp' },
-                    { label: '目标IP', value: 'targetIp' },
-                    { label: '事件时间', value: 'eventTime' },
-                ]"
-                :model-value="row.field"
-                @update:model-value="
-                    (value) => {
-                        conditions[groupIndex][rowIndex].field = value;
-                    }
-                "
-            >
-            </ESelect>
-
-            <ESelect
-                :items="[
-                    { label: '等于', value: 'equal' },
-                    { label: '不等于', value: 'notEqual' },
-                    { label: '包含', value: 'include' },
-                    { label: '不包含', value: 'notInclude' },
-                    { label: '大于', value: 'greater' },
-                    { label: '小于', value: 'less' },
-                    { label: '大于等于', value: 'greaterEqual' },
-                    { label: '小于等于', value: 'lessEqual' },
-                ]"
-                :model-value="row.operator"
-                @update:model-value="
-                    (value) => {
-                        conditions[groupIndex][rowIndex].operator = value;
-                    }
-                "
-            >
-            </ESelect>
-
-            <EInput
-                type="text"
-                :model-value="row.value"
-                @update:model-value="
-                    (value: string) => {
-                        conditions[groupIndex][rowIndex].value = value;
-                    }
-                "
-            />
-
-            <ESelect
-                :items="[
-                    { label: '匹配', value: 'match' },
-                    { label: '不匹配', value: 'notMatch' },
-                ]"
-                placement="start"
-                :model-value="row.matchType"
-                @update:model-value="
-                    (value) => {
-                        conditions[groupIndex][rowIndex].matchType = value;
-                    }
-                "
-            >
-            </ESelect>
-        </EConditionGroup>
-
-        <h3>当前条件配置</h3>
-        <pre>{{ JSON.stringify(conditions, null, 2) }}</pre>
-    </div>
-</template>
-
-<style scoped>
-.using {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.using__demo {
-    margin: 20px 0;
-    padding: 20px;
-    border: 1px solid #ebeef5;
-    border-radius: 8px;
-    background-color: #fafafa;
-}
-
-.using__actions {
-    margin: 20px 0;
-}
-
-.using__actions button {
-    padding: 8px 16px;
-    background-color: #409eff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: all 0.3s;
-}
-
-.using__actions button:hover {
-    background-color: #66b1ff;
-}
-
-.using__result {
-    margin: 20px 0;
-    padding: 20px;
-    border: 1px solid #ebeef5;
-    border-radius: 8px;
-    background-color: #fafafa;
-}
-
-.using__result h3 {
-    margin-top: 0;
-    margin-bottom: 16px;
-    font-size: 16px;
-    color: #303133;
-}
-
-.using__result pre {
-    margin: 0;
-    padding: 16px;
-    background-color: #fff;
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-    font-size: 14px;
-    line-height: 1.5;
-    color: #303133;
-    overflow-x: auto;
-}
-</style>