exploria-ui-mcp-server 2.0.0

package/dist/components/form/e_file_selector/Document.vue

@@ -0,0 +1,50 @@
+<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>EFileSelector 文件选择器</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_file_selector/Using.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { EFileSelector } from 'exploria-ui';
+
+const fileInfo = reactive({
+    filename: '',
+    fileSize: 0,
+    baseUrl: '',
+});
+const handleChange = (file: File) => {
+    fileInfo.filename = file.name;
+    fileInfo.fileSize = file.size;
+    fileInfo.baseUrl = URL.createObjectURL(file);
+    console.log(URL.createObjectURL(file));
+};
+</script>
+
+<template>
+    <EFileSelector
+        @change="(file) => handleChange(file)"
+        :access-file-types="['mp3']"
+    >
+        <template #changed>
+            <div>
+                <video
+                    :src="fileInfo.baseUrl"
+                    autoplay
+                    muted
+                    style="height: 100px; width: 200px; object-fit: scale-down"
+                />
+                <div>文件名：{{ fileInfo.filename }}</div>
+                <div>文件大小：{{ fileInfo.fileSize }}</div>
+            </div>
+        </template>
+    </EFileSelector>
+</template>
+
+<style scoped lang="scss">
+.file-selector {
+    width: 300px;
+    height: 200px;
+    font-size: 14px;
+}
+</style>

package/dist/components/form/e_form/BaseUsage.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import {
+    EButton,
+    ECheckbox,
+    EForm,
+    EFormItem,
+    EInput,
+    EMessage,
+    ERadio,
+    ESelect,
+    ESlider,
+    EColorPicker,
+} from 'exploria-ui';
+import { reactive, ref } from 'vue';
+
+const formData = reactive({
+    username: '',
+    password: '',
+    captchaCode: '',
+    remember: false,
+    sliderValue: 0,
+    color: '#000000',
+});
+
+const captchaSrc = new URL('@/assets/author_avatar.png', import.meta.url)
+    .pathname;
+const labelPositionOpsions = ['left', 'right', 'top'] as const;
+const labelPosition = ref(labelPositionOpsions[0]);
+const errorPositionOptions = ['static', 'absolute'] as const;
+const errorPosition = ref<'static' | 'absolute'>(errorPositionOptions[0]);
+const labelWidth = ref('100px');
+</script>
+
+<template>
+    <EForm
+        :label-position="labelPosition"
+        :label-width="labelWidth"
+        :error-position="errorPosition"
+    >
+        <EFormItem
+            label="标签宽度"
+            :show-error="!formData.username"
+            error-message="用户名不能为空"
+        >
+            <ESelect
+                :items="
+                    ['100px', 'auto'].map((item) => ({
+                        label: item,
+                        value: item,
+                    }))
+                "
+                v-model="labelWidth"
+            >
+            </ESelect>
+        </EFormItem>
+        <EFormItem
+            label="错误信息定位方式"
+            :show-error="!formData.username"
+            error-message="用户名不能为空"
+        >
+            <ESelect
+                :items="
+                    errorPositionOptions.map((item) => ({
+                        label: item,
+                        value: item,
+                    }))
+                "
+                v-model="errorPosition"
+            >
+            </ESelect>
+        </EFormItem>
+        <EFormItem
+            label="标题方向"
+            :show-error="true"
+            error-message="这个错误是一直显示的"
+        >
+            <ESelect
+                :items="
+                    labelPositionOpsions.map((item) => ({
+                        label: item,
+                        value: item,
+                    }))
+                "
+                v-model="labelPosition"
+            >
+            </ESelect>
+        </EFormItem>
+        <EFormItem
+            label="颜色选择器"
+            :show-error="!formData.username"
+            error-message="用户名不能为空"
+        >
+            <EColorPicker v-model="formData.color" />
+        </EFormItem>
+        <EFormItem
+            label="用户名"
+            :show-error="!formData.username"
+            error-message="用户名不能为空"
+        >
+            <EInput
+                type="text"
+                placeholder="用户名"
+                v-model="formData.username"
+                clearable
+            />
+        </EFormItem>
+        <EFormItem
+            label="密码"
+            :show-error="!formData.password"
+            error-message="密码不能为空"
+        >
+            <EInput
+                type="password"
+                placeholder="请输入密码"
+                v-model="formData.password"
+                clearable
+            />
+        </EFormItem>
+        <EFormItem
+            label="验证码"
+            :show-error="!formData.captchaCode"
+            error-message="验证码不能为空"
+        >
+            <EInput
+                type="captcha"
+                placeholder="请输入验证码"
+                :src="captchaSrc"
+                v-model="formData.captchaCode"
+                @click:img="
+                    () => {
+                        EMessage.success('点击了验证码');
+                    }
+                "
+            >
+            </EInput>
+        </EFormItem>
+        <EFormItem label="登录选项">
+            <ECheckbox v-model="formData.remember">记住密码</ECheckbox>
+        </EFormItem>
+        <EFormItem label="登录选项">
+            <ERadio v-model="formData.remember">记住密码</ERadio>
+        </EFormItem>
+        <EFormItem label="滑块">
+            <ESlider
+                v-model="formData.sliderValue"
+                :max="100"
+                :min="0"
+                :step="1"
+            />
+        </EFormItem>
+        <EFormItem>
+            <EButton type="primary">登录</EButton>
+        </EFormItem>
+    </EForm>
+</template>

package/dist/components/form/e_form/Document.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import LoginForm from './LoginForm.vue';
+import LoginFormCode from './LoginForm.vue?raw';
+import RegisterForm from './RegisterForm.vue';
+import RegisterFormCode from './RegisterForm.vue?raw';
+import APITable from '@/components/APITable.vue';
+import BaseUsage from './BaseUsage.vue';
+import BaseUsageCode from './BaseUsage.vue?raw';
+const direction = "'row' | 'column'";
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍">
+            <h2>EForm 表单</h2>
+            <p>表单组件用于收集用户输入的信息。</p>
+        </DemoBox>
+        <DemoBox :code="BaseUsageCode" title="基本用法">
+            <BaseUsage />
+            <template #description> 登录表单</template>
+        </DemoBox>
+        <DemoBox :code="LoginFormCode" title="登录表单">
+            <LoginForm />
+            <template #description> 登录表单</template>
+        </DemoBox>
+        <DemoBox :code="RegisterFormCode" title="注册表单">
+            <RegisterForm />
+            <template #description> 注册表单</template>
+        </DemoBox>
+        <APITable
+            :data="[
+                {
+                    subTitle: 'EForm Events',
+                    list: [
+                        {
+                            name: 'submit',
+                            description: 'html 原生 submit 事件',
+                            type: 'function',
+                            defaultValue: '--',
+                            required: false,
+                        },
+                    ],
+                },
+                {
+                    subTitle: 'EFormItem Props',
+                    list: [
+                        {
+                            name: 'label',
+                            description: '标签',
+                            type: 'string',
+                            defaultValue: '\'\'',
+                            required: false,
+                        },
+                        {
+                            name: 'direction',
+                            description: '方向',
+                            type: direction,
+                            defaultValue: 'column',
+                            required: false,
+                        },
+                        {
+                            name: 'required',
+                            description: '是否必填',
+                            type: 'boolean',
+                            defaultValue: false,
+                            required: false,
+                        },
+                        {
+                            name: 'show-error',
+                            description: '是否显示错误信息',
+                            type: 'boolean',
+                            defaultValue: 'false',
+                            required: false,
+                        },
+                        {
+                            name: 'error-message',
+                            description: '错误信息',
+                            type: 'string',
+                            defaultValue: '\'\'',
+                            required: false,
+                        },
+                    ],
+                },
+            ]"
+        />
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+@use '@/style/global' as global;
+</style>

package/dist/components/form/e_form/LoginForm.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import { EButton, EFormItem, EInput, EMessage, EUUIDUtil } from 'exploria-ui';
+import axios from 'axios';
+
+const formData = reactive({
+    username: '',
+    password: '',
+    captchaCode: '',
+});
+
+let captchaKey = '';
+
+type Result<T = unknown> = {
+    status: 'success' | 'error';
+    message: string;
+    data: T;
+};
+
+const getCaptcha = () => {
+    captchaKey = EUUIDUtil.generate();
+    axios
+        .get<
+            Result<{
+                imageBase64: string;
+            }>
+        >('https://lxzj.tenir.cn/lxzj/api/system/user/captcha', {
+            params: {
+                captchaKey,
+            },
+        })
+        .then((res) => {
+            if (res.data.status === 'success') {
+                captchaImg.value = res.data.data.imageBase64;
+                formData.captchaCode = '';
+            }
+        });
+};
+
+onMounted(() => {
+    getCaptcha();
+});
+
+onMounted(() => {
+    captchaImg.value = 'http://localhost:3000/api/captcha';
+});
+
+const login = () => {
+    const closeLoading = EMessage.loading('登录中...');
+    loading.value = true;
+
+    axios
+        .post('https://lxzj.tenir.cn/lxzj/api/system/user/login', {
+            username: formData.username,
+            password: formData.password,
+            captchaKey,
+            captchaCode: formData.captchaCode,
+        })
+        .then((res) => {
+            if (res.data.status === 'success') {
+                EMessage.success('登录成功');
+            } else {
+                EMessage.error(res.data.data.message);
+            }
+        })
+        .catch((error) => {
+            EMessage.error(error.message);
+            getCaptcha();
+        })
+        .finally(() => {
+            closeLoading();
+            loading.value = false;
+        });
+};
+const src = ref('');
+
+const loading = ref(false);
+const captchaImg = ref('');
+</script>
+
+<template>
+    <form class="login-form" @submit.prevent="login">
+        <EFormItem
+            :show-error="!formData.username"
+            error-message="用户名不能为空"
+        >
+            <EInput
+                type="text"
+                placeholder="用户名"
+                v-model="formData.username"
+                clearable
+            >
+                <template #prefix>
+                    <span class="iconfont icon-yonghu" />
+                </template>
+            </EInput>
+        </EFormItem>
+        <EFormItem
+            :show-error="!formData.password"
+            error-message="密码不能为空"
+        >
+            <EInput
+                type="password"
+                placeholder="请输入密码"
+                v-model="formData.password"
+                clearable
+            >
+                <template #prefix>
+                    <span class="iconfont icon-mima left" />
+                </template>
+            </EInput>
+        </EFormItem>
+        <EFormItem
+            :show-error="!formData.captchaCode"
+            error-message="验证码不能为空"
+        >
+            <EInput
+                type="captcha"
+                placeholder="请输入验证码"
+                :src="captchaImg"
+                v-model="formData.captchaCode"
+            >
+                <template #prefix>
+                    <span class="iconfont icon-yanzhengyanzhengma" />
+                </template>
+                <template #suffix>
+                    <img :src="src" alt="" @click="getCaptcha" />
+                </template>
+            </EInput>
+        </EFormItem>
+        <EButton :loading="loading">注册</EButton>
+    </form>
+</template>
+
+<style scoped lang="scss">
+@import 'iconfont/iconfont.css';
+
+.login-form {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+
+    .one-input {
+        img {
+            cursor: pointer;
+        }
+    }
+}
+</style>

package/dist/components/form/e_form/RegisterForm.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { EInput, EButton, EFormItem } from 'exploria-ui';
+
+const registerFormData = reactive({
+    username: '',
+    password: '',
+});
+
+const register = () => {};
+</script>
+
+<template>
+    <form class="register-form" @submit.prevent="register">
+        <EFormItem
+            :show-error="!registerFormData.username"
+            error-message="请设置用户名"
+        >
+            <EInput
+                type="text"
+                placeholder="请输入用户名"
+                v-model="registerFormData.username"
+            />
+        </EFormItem>
+        <EFormItem
+            :show-error="!registerFormData.password"
+            error-message="请设置密码"
+        >
+            <EInput
+                type="password"
+                placeholder="请输入密码"
+                v-model="registerFormData.password"
+            />
+        </EFormItem>
+        <EButton>注册</EButton>
+    </form>
+</template>
+
+<style scoped lang="scss">
+.register-form {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+</style>

package/dist/components/form/e_form/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/dist/components/form/e_input/BaseUsage.vue

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

package/dist/components/form/e_input/Clearable.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EInput } from 'exploria-ui';
+
+const text = ref('');
+</script>
+
+<template>
+    <div class="using">
+        <EInput
+            type="text"
+            v-model="text"
+            placeholder="请输入内容"
+            clearable
+            style="margin-bottom: 15px"
+        />
+        <EInput
+            type="password"
+            v-model="text"
+            placeholder="请输入内容"
+            clearable
+        />
+    </div>
+</template>