exploria-ui-mcp-server 2.0.0

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

@@ -0,0 +1,177 @@
+<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/dist/components/feedback/e_tooltip/Document.vue

@@ -0,0 +1,42 @@
+<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/dist/components/feedback/e_tooltip/SizeUsing.vue

@@ -0,0 +1,28 @@
+<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/dist/components/feedback/e_tooltip/Using.vue

@@ -0,0 +1,44 @@
+<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/dist/components/form/e_checkbox/Document.vue

@@ -0,0 +1,88 @@
+<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/dist/components/form/e_checkbox/Using.vue

@@ -0,0 +1,10 @@
+<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/dist/components/form/e_color_picker/Document.vue

@@ -0,0 +1,55 @@
+<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/dist/components/form/e_color_picker/Using.vue

@@ -0,0 +1,10 @@
+<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/dist/components/form/e_condition_group/Document.vue

@@ -0,0 +1,52 @@
+<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/dist/components/form/e_condition_group/Using.vue

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