exploria-ui-mcp-server 2.0.0

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import BaseUsageCode from './BaseUsage.vue?raw';
+import BaseUsage from './BaseUsage.vue';
+import NumberCode from './Number.vue?raw';
+import Number from './Number.vue';
+
+import ClearableCode from './Clearable.vue?raw';
+import PasswordCode from './Password.vue?raw';
+import Clearable from './Clearable.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import Password from './Password.vue';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EInput 输入框</h2>
+            <p>输入框组件用于用户输入文本或数字。</p>
+        </DemoBox>
+        <DemoBox :code="BaseUsageCode" title="基本用法">
+            <BaseUsage />
+            <template #description> 文本框</template>
+        </DemoBox>
+
+        <DemoBox :code="NumberCode" title="数字输入框">
+            <Number />
+            <template #description> 文本框</template>
+        </DemoBox>
+
+        <DemoBox :code="ClearableCode" title="可清除">
+            <Clearable />
+            <template #description> 文本框</template>
+        </DemoBox>
+
+        <DemoBox :code="PasswordCode" title="明码触发条件">
+            <Password />
+            <template #description> 文本框</template>
+        </DemoBox>
+
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EInput Props',
+                    list: [
+                        {
+                            name: 'v-model',
+                            description: '双向绑定值',
+                            type: 'string | number',
+                            required: true,
+                            defaultValue: '',
+                        },
+                        {
+                            name: 'type',
+                            description: '输入框类型',
+                            type: 'string',
+                            required: false,
+                            defaultValue: 'text',
+                        },
+                        {
+                            name: 'placeholder',
+                            description: '占位符文本',
+                            type: 'string',
+                            required: false,
+                            defaultValue: '',
+                        },
+                        {
+                            name: 'clearable',
+                            description: '是否显示清除按钮',
+                            type: 'boolean',
+                            required: false,
+                            defaultValue: false,
+                        },
+                        {
+                            name: 'max',
+                            description: '最大值（仅number类型有效）',
+                            type: 'number',
+                            required: false,
+                            defaultValue: '',
+                        },
+                        {
+                            name: 'eye-trigger',
+                            description: '密码框明码触发条件',
+                            type: 'string',
+                            required: false,
+                            defaultValue: 'click',
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'EInput Slots',
+                    list: [
+                        {
+                            name: 'prefix',
+                            description: '输入框前缀内容',
+                            type: 'slot',
+                            required: false,
+                        },
+                        {
+                            name: 'suffix',
+                            description: '输入框后缀内容',
+                            type: 'slot',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

package/public/components/form/e_input/Number.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EInput } from 'exploria-ui';
+
+const count = ref(10);
+</script>
+
+<template>
+    <EInput type="number" v-model="count" placeholder="请输入内容" :max="25" />
+</template>

package/public/components/form/e_input/Password.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EInput, ESelect } from 'exploria-ui';
+
+type EyeTrigger = Exclude<InstanceType<typeof EInput>['eyeTrigger'], undefined>;
+const text = ref('exploria-ui');
+
+const eyeTriggerList: EyeTrigger[] = [
+    'click',
+    'hover',
+    'dblclick',
+    'long-press',
+];
+
+const eyeTrigger = ref<EyeTrigger>(eyeTriggerList[0]);
+</script>
+
+<template>
+    <div class="using">
+        <ESelect
+            v-model="eyeTrigger"
+            :items="
+                eyeTriggerList.map((item) => ({
+                    label: item,
+                    value: item,
+                }))
+            "
+            placeholder="请选择明码触发条件"
+        />
+
+        <EInput
+            type="password"
+            v-model="text"
+            placeholder="请输入密码"
+            clearable
+            :eye-trigger="eyeTrigger"
+        >
+            <template #prefix>
+                <span class="iconfont icon-mima" />
+            </template>
+        </EInput>
+    </div>
+</template>
+<style scoped lang="scss">
+@import 'iconfont/iconfont.css';
+
+.using {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+}
+</style>

package/public/components/form/e_input/iconfont/iconfont.css

@@ -0,0 +1,67 @@
+@font-face {
+    font-family: 'iconfont'; /* Project id 4882206 */
+    src:
+        url('iconfont.woff2?t=1744867150871') format('woff2'),
+        url('iconfont.woff?t=1744867150871') format('woff'),
+        url('iconfont.ttf?t=1744867150871') format('truetype');
+}
+
+.iconfont {
+    font-family: 'iconfont' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-delete_fill:before {
+    content: '\e6f2';
+}
+
+.icon-prompt_fill:before {
+    content: '\e71b';
+}
+
+.icon-success_fill:before {
+    content: '\e72d';
+}
+
+.icon-guanbi_o:before {
+    content: '\eb76';
+}
+
+.icon-yanzhengyanzhengma:before {
+    content: '\e624';
+}
+
+.icon-yonghu:before {
+    content: '\e62f';
+}
+
+.icon-mima:before {
+    content: '\e644';
+}
+
+.icon-xuanzeqixiayige_o:before {
+    content: '\eb9c';
+}
+
+.icon-tishi_o:before {
+    content: '\eb85';
+}
+
+.icon-xuanzeqizhankai_o:before {
+    content: '\eb8d';
+}
+
+.icon-duihao_o:before {
+    content: '\eb75';
+}
+
+.icon-yanjing_xianshi_o:before {
+    content: '\ebcc';
+}
+
+.icon-yanjing_yincang_o:before {
+    content: '\ebcd';
+}

package/public/components/form/e_radio/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>ERadio 单选框</h2>
+            <p>单选框组件，用于表单中的单项选择，支持自定义尺寸和绑定值。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法" anchor="基本用法">
+            <Using />
+            <template #description>
+                基础的多选框用法，通过 v-model 绑定选中状态。
+            </template>
+        </DemoBox>
+
+        <APITable
+            :data="[
+                {
+                    subTitle: 'ERadio 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_radio/Using.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ERadio } from 'exploria-ui';
+
+const checked = ref(false);
+</script>
+
+<template>
+    <div style="display: flex; align-items: center; gap: 10px">
+        <ERadio v-model="checked" size="small">小尺寸</ERadio>
+        <ERadio v-model="checked" size="medium">中尺寸</ERadio>
+        <ERadio v-model="checked" size="large">大尺寸</ERadio>
+    </div>
+</template>

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

@@ -0,0 +1,32 @@
+<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 :code="src" title="基本用法">
+            <Using />
+            <template #description> 选项框</template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'ESelect Props',
+                    list: [
+                        {
+                            name: 'modelValue',
+                            description: '当前选中的 name',
+                            type: 'string',
+                            defaultValue: '--',
+                            required: true,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ESelect } from 'exploria-ui';
+
+const items = [
+    {
+        label: '选项1',
+        value: '1',
+    },
+    {
+        label: '选项2',
+        value: '2',
+    },
+    {
+        label: '选项3',
+        value: '3',
+    },
+];
+const select = ref(items[0]!.value);
+</script>
+
+<template>
+    <ESelect v-model="select" :items="items" placement="start" />
+</template>

package/public/components/form/e_slider/BaseUsage.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ESlider } from 'exploria-ui';
+
+const value = ref(50);
+</script>
+
+<template>
+    <ESlider v-model="value" :min="0" :max="100" />
+</template>

package/public/components/form/e_slider/CustomRange.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ESlider, EMessage } from 'exploria-ui';
+
+const value = ref(60);
+
+const handleChange = (val: number) => {
+    EMessage.success(`当前值：${val}`);
+};
+</script>
+
+<template>
+    <ESlider
+        v-model="value"
+        :min="10"
+        :max="90"
+        :step="5"
+        show-value
+        @change="handleChange"
+    />
+</template>

package/public/components/form/e_slider/Disabled.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ESlider } from 'exploria-ui';
+
+const value = ref(40);
+</script>
+
+<template>
+    <ESlider v-model="value" disabled show-value :min="0" :max="100" />
+</template>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import BaseUsageCode from './BaseUsage.vue?raw';
+import BaseUsage from './BaseUsage.vue';
+import ShowValueCode from './ShowValue.vue?raw';
+import ShowValue from './ShowValue.vue';
+import SizesCode from './Sizes.vue?raw';
+import Sizes from './Sizes.vue';
+import CustomRangeCode from './CustomRange.vue?raw';
+import CustomRange from './CustomRange.vue';
+import DisabledCode from './Disabled.vue?raw';
+import Disabled from './Disabled.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ESlider 滑块组件</h2>
+            <p>独立的滑块组件，用于选择范围内的值。</p>
+        </DemoBox>
+
+        <DemoBox :code="BaseUsageCode" title="基础用法">
+            <BaseUsage />
+            <template #description
+                >基础的滑块用法，用于选择一个范围内的值。</template
+            >
+        </DemoBox>
+
+        <DemoBox :code="ShowValueCode" title="显示当前值">
+            <ShowValue />
+            <template #description
+                >显示当前滑块的值，方便用户直观了解当前选择。</template
+            >
+        </DemoBox>
+
+        <DemoBox :code="SizesCode" title="不同尺寸">
+            <Sizes />
+            <template #description
+                >支持大型、中型和小型三种尺寸，适应不同的布局需求。</template
+            >
+        </DemoBox>
+
+        <DemoBox :code="CustomRangeCode" title="自定义范围">
+            <CustomRange />
+            <template #description
+                >可以自定义滑块的最小值、最大值和步长，并支持change事件。</template
+            >
+        </DemoBox>
+        <DemoBox :code="DisabledCode" title="禁用状态">
+            <Disabled />
+            <template #description>禁用状态下的滑块，不可交互。</template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/public/components/form/e_slider/ShowValue.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ESlider } from 'exploria-ui';
+
+const value = ref(30);
+</script>
+
+<template>
+    <ESlider v-model="value" show-value :min="0" :max="100" />
+</template>

package/public/components/form/e_slider/Sizes.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ESlider } from 'exploria-ui';
+
+const value1 = ref(50);
+const value2 = ref(30);
+const value3 = ref(70);
+</script>
+
+<template>
+    <div class="size-demo">
+        <label>大型：</label>
+        <ESlider v-model="value1" size="large" show-value :min="0" :max="100" />
+    </div>
+    <div class="size-demo">
+        <label>中型：</label>
+        <ESlider
+            v-model="value2"
+            size="medium"
+            show-value
+            :min="0"
+            :max="100"
+        />
+    </div>
+    <div class="size-demo">
+        <label>小型：</label>
+        <ESlider v-model="value3" size="small" show-value :min="0" :max="100" />
+    </div>
+</template>
+
+<style scoped>
+.size-demo {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    label {
+        min-width: 60px;
+        color: var(--e-text-color-secondary);
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+</style>

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

@@ -0,0 +1,58 @@
+<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: 'ETimePicker Props',
+        list: [
+            {
+                name: 'time',
+                description: '绑定值，时间对象',
+                type: 'Date',
+                required: true,
+                defaultValue: '-',
+            },
+            {
+                name: 'size',
+                description: '组件尺寸',
+                type: 'string',
+                required: false,
+                defaultValue: 'medium',
+            },
+        ],
+    },
+    {
+        subTitle: 'ETimePicker Events',
+        list: [
+            {
+                name: 'update:time',
+                description: '时间更新事件',
+                type: 'Date',
+                required: false,
+                defaultValue: '-',
+            },
+        ],
+    },
+];
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>ETimePicker 时间选择器</h2>
+            <p>时间选择器组件用于选择时间。</p>
+        </DemoBox>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description>
+                时间选择器组件用于选择时间，支持鼠标拖动滚动和点击选择。
+            </template>
+        </DemoBox>
+        <APITable :data="apiData" />
+    </PageLayout>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ETimePicker } from 'exploria-ui';
+
+const time = ref(new Date());
+</script>
+
+<template>
+    <div class="using">
+        {{ time }}
+        <ETimePicker v-model:time="time" />
+    </div>
+</template>

package/public/components/geometry/css_3d/Document.vue

@@ -0,0 +1,17 @@
+<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';
+
+const section = ['基本用法'];
+</script>
+
+<template>
+    <PageLayout :section="section">
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description> 几何 </template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/public/components/geometry/css_3d/Using.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ECube } from 'exploria-ui';
+</script>
+
+<template>
+    <div class="using">
+        <ECube />
+    </div>
+</template>