@ebiz/designer-components 0.1.0 → 0.1.2

package/src/views/EbizSFormDemo.vue

@@ -1,421 +1,421 @@
-<template>
-    <div class="ebiz-form-demo">
-        <t-card title="基础表单" hover-shadow>
-            <EbizSForm ref="basicFormRef" :data="basicFormData" :rules="basicFormRules">
-                <EbizSFormItem label="用户名" name="username">
-                    <template #default>
-                        <t-input v-model="basicFormData.username" placeholder="请输入用户名" />
-                    </template>
-                </EbizSFormItem>
-                <EbizSFormItem label="密码" name="password">
-                    <template #default>
-                        <t-input type="password" v-model="basicFormData.password" placeholder="请输入密码" />
-                    </template>
-                </EbizSFormItem>
-            </EbizSForm>
-        </t-card>
-
-        <t-card title="表单项类型演示" hover-shadow class="mt-20">
-            <EbizSForm ref="formRef" :data="formData" :rules="formRules" :api-config="apiConfig" label-align="right"
-                label-width="120px" reset-on-success :success-message="'提交成功！'">
-                <t-row :gutter="[20, 20]">
-                    <t-col :span="12">
-                        <EbizSFormItem label="输入框" name="input" type="input" v-model="formData.input" />
-                    </t-col>
-                    <t-col :span="12">
-                        <EbizSFormItem label="数字输入框" name="number" type="number" v-model="formData.number" />
-                    </t-col>
-                </t-row>
-
-                <t-row :gutter="[20, 20]">
-                    <t-col :span="12">
-                        <EbizSFormItem label="文本域" name="textarea" type="textarea" v-model="formData.textarea" />
-                    </t-col>
-                    <t-col :span="12">
-                        <EbizSFormItem label="选择器" name="select" type="select" :options="selectOptions"
-                            v-model="formData.select" />
-                    </t-col>
-                </t-row>
-
-                <t-row :gutter="[20, 20]">
-                    <t-col :span="12">
-                        <EbizSFormItem label="日期选择器" name="date" type="date" v-model="formData.date" />
-                    </t-col>
-                    <t-col :span="12">
-                        <EbizSFormItem label="时间选择器" name="time" type="time" v-model="formData.time" />
-                    </t-col>
-                </t-row>
-
-                <t-row :gutter="[20, 20]">
-                    <t-col :span="12">
-                        <EbizSFormItem label="单选框组" name="radio" type="radio" :options="radioOptions"
-                            v-model="formData.radio" />
-                    </t-col>
-                    <t-col :span="12">
-                        <EbizSFormItem label="复选框组" name="checkbox" type="checkbox" :options="checkboxOptions"
-                            v-model="formData.checkbox" />
-                    </t-col>
-                </t-row>
-
-                <t-row :gutter="[20, 20]">
-                    <t-col :span="12">
-                        <EbizSFormItem label="开关" name="switch" type="switch" v-model="formData.switch" />
-                    </t-col>
-                    <t-col :span="12">
-                        <EbizSFormItem label="滑块" name="slider" type="slider" :min="0" :max="100"
-                            v-model="formData.slider" />
-                    </t-col>
-                </t-row>
-
-                <t-row :gutter="[20, 20]">
-                    <t-col :span="12">
-                        <EbizSFormItem label="上传" name="upload" type="upload" upload-theme="image"
-                            v-model="formData.upload" action="/api/upload" />
-                    </t-col>
-                    <t-col :span="12">
-                        <EbizSFormItem label="级联选择器" name="cascader" type="cascader" :options="cascaderOptions"
-                            v-model="formData.cascader" />
-                    </t-col>
-                </t-row>
-
-                <t-row :gutter="[20, 20]">
-                    <t-col :span="12">
-                        <EbizSFormItem label="树形选择器" name="treeSelect" type="tree-select" :tree-data="treeData"
-                            v-model="formData.treeSelect" />
-                    </t-col>
-                    <t-col :span="12">
-                        <EbizSFormItem label="颜色选择器" name="color" type="color-picker" v-model="formData.color" />
-                    </t-col>
-                </t-row>
-            </EbizSForm>
-        </t-card>
-
-        <t-card title="表单布局演示" hover-shadow class="mt-20">
-            <t-tabs>
-                <t-tab-panel value="vertical" label="垂直布局">
-                    <EbizSForm layout="vertical" label-align="left">
-                        <EbizSFormItem label="用户名" name="verticalUsername" type="input" />
-                        <EbizSFormItem label="邮箱" name="verticalEmail" type="input" />
-                    </EbizSForm>
-                </t-tab-panel>
-                <t-tab-panel value="inline" label="行内布局">
-                    <EbizSForm layout="inline">
-                        <EbizSFormItem label="用户名" name="inlineUsername" type="input" />
-                        <EbizSFormItem label="邮箱" name="inlineEmail" type="input" />
-                        <t-button theme="primary">查询</t-button>
-                    </EbizSForm>
-                </t-tab-panel>
-            </t-tabs>
-        </t-card>
-
-        <t-card title="API调用演示" hover-shadow class="mt-20">
-            <EbizSForm ref="apiFormRef" :data="apiFormData" :api-config="apiConfig" show-result-message reset-on-success
-                success-message="API调用成功！">
-                <EbizSFormItem label="姓名" name="name" type="input" v-model="apiFormData.name" />
-                <EbizSFormItem label="年龄" name="age" type="number" v-model="apiFormData.age" />
-                <EbizSFormItem label="邮箱" name="email" type="input" v-model="apiFormData.email" />
-            </EbizSForm>
-        </t-card>
-
-        <t-card title="表单验证演示" hover-shadow class="mt-20">
-            <EbizSForm ref="validateFormRef" :data="validateFormData" :rules="validateFormRules" label-width="120px"
-                show-error-message status-icon>
-                <EbizSFormItem label="用户名" name="username" type="input" v-model="validateFormData.username" />
-                <EbizSFormItem label="密码" name="password" type="input" v-model="validateFormData.password" />
-                <EbizSFormItem label="确认密码" name="confirmPassword" type="input"
-                    v-model="validateFormData.confirmPassword" />
-                <EbizSFormItem label="邮箱" name="email" type="input" v-model="validateFormData.email" />
-                <EbizSFormItem label="手机号" name="phone" type="input" v-model="validateFormData.phone" />
-            </EbizSForm>
-        </t-card>
-
-        <t-card title="详情加载与本地表单数据演示" hover-shadow class="mt-20">
-            <EbizSForm 
-                ref="detailFormRef" 
-                :data="detailFormData" 
-                :api-config="submitApiConfig"
-                :detail-api-config="detailApiConfig"
-                show-result-message
-                @detail-loaded="handleDetailLoaded"
-                @detail-error="handleDetailError"
-                @success="handleSubmitSuccess"
-                @error="handleSubmitError"
-            >
-                <EbizSFormItem label="用户ID" name="id" type="input" v-model="detailFormData.id" disabled />
-                <EbizSFormItem label="姓名" name="name" type="input" v-model="detailFormData.name" />
-                <EbizSFormItem label="年龄" name="age" type="number" v-model="detailFormData.age" />
-                <EbizSFormItem label="邮箱" name="email" type="input" v-model="detailFormData.email" />
-                
-                <template #buttons>
-                    <t-space>
-                        <t-button @click="loadDetailData">加载详情数据</t-button>
-                        <t-button @click="clearFormData">清空表单</t-button>
-                        <t-button @click="setCustomFormData">设置表单数据</t-button>
-                        <t-button theme="default" type="reset">取消</t-button>
-                        <t-button theme="primary" type="submit">提交</t-button>
-                    </t-space>
-                </template>
-            </EbizSForm>
-        </t-card>
-    </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue';
-import { EbizSForm, EbizSFormItem } from '../index';
-import { Card as TCard, Input as TInput, Row as TRow, Col as TCol, Button as TButton, Tabs as TTabs, TabPanel as TTabPanel, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
-
-// 基础表单
-const basicFormRef = ref(null);
-const basicFormData = reactive({
-    username: '',
-    password: ''
-});
-const basicFormRules = {
-    username: [
-        { required: true, message: '请输入用户名', trigger: 'blur' },
-        { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
-    ],
-    password: [
-        { required: true, message: '请输入密码', trigger: 'blur' },
-        { min: 6, message: '密码长度应不少于6个字符', trigger: 'blur' }
-    ]
-};
-
-// 表单项类型演示
-const formRef = ref(null);
-const formData = reactive({
-    input: '',
-    number: 0,
-    textarea: '',
-    select: '',
-    date: '',
-    time: '',
-    radio: '',
-    checkbox: [],
-    switch: false,
-    slider: 50,
-    upload: [],
-    cascader: [],
-    treeSelect: '',
-    color: '#1677FF'
-});
-const formRules = {};
-
-// 选项数据
-const selectOptions = [
-    { label: '选项1', value: '1' },
-    { label: '选项2', value: '2' },
-    { label: '选项3', value: '3' }
-];
-
-const radioOptions = [
-    { label: '选项1', value: '1' },
-    { label: '选项2', value: '2' },
-    { label: '选项3', value: '3' }
-];
-
-const checkboxOptions = [
-    { label: '选项1', value: '1' },
-    { label: '选项2', value: '2' },
-    { label: '选项3', value: '3' }
-];
-
-const cascaderOptions = [
-    {
-        label: '北京',
-        value: 'beijing',
-        children: [
-            {
-                label: '朝阳区',
-                value: 'chaoyang'
-            },
-            {
-                label: '海淀区',
-                value: 'haidian'
-            }
-        ]
-    },
-    {
-        label: '上海',
-        value: 'shanghai',
-        children: [
-            {
-                label: '浦东新区',
-                value: 'pudong'
-            },
-            {
-                label: '黄浦区',
-                value: 'huangpu'
-            }
-        ]
-    }
-];
-
-const treeData = [
-    {
-        label: '总部',
-        value: 'headquarters',
-        children: [
-            {
-                label: '研发部',
-                value: 'rd'
-            },
-            {
-                label: '销售部',
-                value: 'sales'
-            }
-        ]
-    },
-    {
-        label: '分公司',
-        value: 'branch',
-        children: [
-            {
-                label: '北京分公司',
-                value: 'beijing'
-            },
-            {
-                label: '上海分公司',
-                value: 'shanghai'
-            }
-        ]
-    }
-];
-
-// API调用演示
-const apiFormRef = ref(null);
-const apiFormData = reactive({
-    name: '',
-    age: 0,
-    email: ''
-});
-
-const apiConfig = {
-    key: 'userSubmit',
-    apiId: 'user.submit',
-    apiType: '3' // 对应dataService中的DATA_INSERT
-};
-
-// 表单验证演示
-const validateFormRef = ref(null);
-const validateFormData = reactive({
-    username: '',
-    password: '',
-    confirmPassword: '',
-    email: '',
-    phone: ''
-});
-
-const validateFormRules = {
-    username: [
-        { required: true, message: '请输入用户名', trigger: 'blur' },
-        { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
-    ],
-    password: [
-        { required: true, message: '请输入密码', trigger: 'blur' },
-        { min: 6, message: '密码长度应不少于6个字符', trigger: 'blur' }
-    ],
-    confirmPassword: [
-        { required: true, message: '请再次输入密码', trigger: 'blur' },
-        {
-            validator: (val) => val === validateFormData.password,
-            message: '两次输入的密码不一致',
-            trigger: 'blur'
-        }
-    ],
-    email: [
-        { required: true, message: '请输入邮箱', trigger: 'blur' },
-        {
-            validator: (val) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val),
-            message: '请输入正确的邮箱格式',
-            trigger: 'blur'
-        }
-    ],
-    phone: [
-        { required: true, message: '请输入手机号', trigger: 'blur' },
-        {
-            validator: (val) => /^1[3-9]\d{9}$/.test(val),
-            message: '请输入正确的手机号格式',
-            trigger: 'blur'
-        }
-    ]
-};
-
-// 详情加载与本地表单数据演示
-const detailFormRef = ref(null);
-const detailFormData = reactive({
-    id: '',
-    name: '',
-    age: 0,
-    email: ''
-});
-
-// 提交API配置
-const submitApiConfig = {
-    key: 'userUpdate',
-    apiId: 'user.update',
-    apiType: '5' // 对应dataService中的DATA_MODIFY
-};
-
-// 详情API配置
-const detailApiConfig = {
-    key: 'userDetail',
-    apiId: 'user.detail',
-    apiType: '1' // 对应dataService中的DETAILS_DATA
-};
-
-// 加载详情数据
-const loadDetailData = () => {
-    const userId = prompt('请输入要加载的用户ID', '1001');
-    if (userId) {
-        // 使用表单组件的loadDetailData方法加载详情
-        detailFormRef.value.loadDetailData(userId);
-    }
-};
-
-// 清空表单数据
-const clearFormData = () => {
-    detailFormRef.value.clearFormData();
-};
-
-// 设置自定义表单数据
-const setCustomFormData = () => {
-    detailFormRef.value.setFormData({
-        id: '1002',
-        name: '张三',
-        age: 28,
-        email: 'zhangsan@example.com'
-    });
-};
-
-// 详情加载成功回调
-const handleDetailLoaded = (data) => {
-    MessagePlugin.success(`详情数据加载成功: ID=${data.id}, 姓名=${data.name}`);
-};
-
-// 详情加载失败回调
-const handleDetailError = (error) => {
-    MessagePlugin.error(`详情数据加载失败: ${error.message || '未知错误'}`);
-};
-
-// 表单提交成功回调
-const handleSubmitSuccess = (_response) => {
-    MessagePlugin.success('表单提交成功');
-};
-
-// 表单提交失败回调
-const handleSubmitError = (error) => {
-    MessagePlugin.error(`表单提交失败: ${error.message || '未知错误'}`);
-};
-</script>
-
-<style scoped>
-.ebiz-form-demo {
-    padding: 20px;
-}
-
-.mt-20 {
-    margin-top: 20px;
-}
+<template>
+    <div class="ebiz-form-demo">
+        <t-card title="基础表单" hover-shadow>
+            <EbizSForm ref="basicFormRef" :data="basicFormData" :rules="basicFormRules">
+                <EbizSFormItem label="用户名" name="username">
+                    <template #default>
+                        <t-input v-model="basicFormData.username" placeholder="请输入用户名" />
+                    </template>
+                </EbizSFormItem>
+                <EbizSFormItem label="密码" name="password">
+                    <template #default>
+                        <t-input type="password" v-model="basicFormData.password" placeholder="请输入密码" />
+                    </template>
+                </EbizSFormItem>
+            </EbizSForm>
+        </t-card>
+
+        <t-card title="表单项类型演示" hover-shadow class="mt-20">
+            <EbizSForm ref="formRef" :data="formData" :rules="formRules" :api-config="apiConfig" label-align="right"
+                label-width="120px" reset-on-success :success-message="'提交成功！'">
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="输入框" name="input" type="input" v-model="formData.input" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="数字输入框" name="number" type="number" v-model="formData.number" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="文本域" name="textarea" type="textarea" v-model="formData.textarea" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="选择器" name="select" type="select" :options="selectOptions"
+                            v-model="formData.select" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="日期选择器" name="date" type="date" v-model="formData.date" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="时间选择器" name="time" type="time" v-model="formData.time" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="单选框组" name="radio" type="radio" :options="radioOptions"
+                            v-model="formData.radio" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="复选框组" name="checkbox" type="checkbox" :options="checkboxOptions"
+                            v-model="formData.checkbox" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="开关" name="switch" type="switch" v-model="formData.switch" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="滑块" name="slider" type="slider" :min="0" :max="100"
+                            v-model="formData.slider" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="上传" name="upload" type="upload" upload-theme="image"
+                            v-model="formData.upload" action="/api/upload" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="级联选择器" name="cascader" type="cascader" :options="cascaderOptions"
+                            v-model="formData.cascader" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="树形选择器" name="treeSelect" type="tree-select" :tree-data="treeData"
+                            v-model="formData.treeSelect" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="颜色选择器" name="color" type="color-picker" v-model="formData.color" />
+                    </t-col>
+                </t-row>
+            </EbizSForm>
+        </t-card>
+
+        <t-card title="表单布局演示" hover-shadow class="mt-20">
+            <t-tabs>
+                <t-tab-panel value="vertical" label="垂直布局">
+                    <EbizSForm layout="vertical" label-align="left">
+                        <EbizSFormItem label="用户名" name="verticalUsername" type="input" />
+                        <EbizSFormItem label="邮箱" name="verticalEmail" type="input" />
+                    </EbizSForm>
+                </t-tab-panel>
+                <t-tab-panel value="inline" label="行内布局">
+                    <EbizSForm layout="inline">
+                        <EbizSFormItem label="用户名" name="inlineUsername" type="input" />
+                        <EbizSFormItem label="邮箱" name="inlineEmail" type="input" />
+                        <t-button theme="primary">查询</t-button>
+                    </EbizSForm>
+                </t-tab-panel>
+            </t-tabs>
+        </t-card>
+
+        <t-card title="API调用演示" hover-shadow class="mt-20">
+            <EbizSForm ref="apiFormRef" :data="apiFormData" :api-config="apiConfig" show-result-message reset-on-success
+                success-message="API调用成功！">
+                <EbizSFormItem label="姓名" name="name" type="input" v-model="apiFormData.name" />
+                <EbizSFormItem label="年龄" name="age" type="number" v-model="apiFormData.age" />
+                <EbizSFormItem label="邮箱" name="email" type="input" v-model="apiFormData.email" />
+            </EbizSForm>
+        </t-card>
+
+        <t-card title="表单验证演示" hover-shadow class="mt-20">
+            <EbizSForm ref="validateFormRef" :data="validateFormData" :rules="validateFormRules" label-width="120px"
+                show-error-message status-icon>
+                <EbizSFormItem label="用户名" name="username" type="input" v-model="validateFormData.username" />
+                <EbizSFormItem label="密码" name="password" type="input" v-model="validateFormData.password" />
+                <EbizSFormItem label="确认密码" name="confirmPassword" type="input"
+                    v-model="validateFormData.confirmPassword" />
+                <EbizSFormItem label="邮箱" name="email" type="input" v-model="validateFormData.email" />
+                <EbizSFormItem label="手机号" name="phone" type="input" v-model="validateFormData.phone" />
+            </EbizSForm>
+        </t-card>
+
+        <t-card title="详情加载与本地表单数据演示" hover-shadow class="mt-20">
+            <EbizSForm 
+                ref="detailFormRef" 
+                :data="detailFormData" 
+                :api-config="submitApiConfig"
+                :detail-api-config="detailApiConfig"
+                show-result-message
+                @detail-loaded="handleDetailLoaded"
+                @detail-error="handleDetailError"
+                @success="handleSubmitSuccess"
+                @error="handleSubmitError"
+            >
+                <EbizSFormItem label="用户ID" name="id" type="input" v-model="detailFormData.id" disabled />
+                <EbizSFormItem label="姓名" name="name" type="input" v-model="detailFormData.name" />
+                <EbizSFormItem label="年龄" name="age" type="number" v-model="detailFormData.age" />
+                <EbizSFormItem label="邮箱" name="email" type="input" v-model="detailFormData.email" />
+                
+                <template #buttons>
+                    <t-space>
+                        <t-button @click="loadDetailData">加载详情数据</t-button>
+                        <t-button @click="clearFormData">清空表单</t-button>
+                        <t-button @click="setCustomFormData">设置表单数据</t-button>
+                        <t-button theme="default" type="reset">取消</t-button>
+                        <t-button theme="primary" type="submit">提交</t-button>
+                    </t-space>
+                </template>
+            </EbizSForm>
+        </t-card>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { EbizSForm, EbizSFormItem } from '../index';
+import { Card as TCard, Input as TInput, Row as TRow, Col as TCol, Button as TButton, Tabs as TTabs, TabPanel as TTabPanel, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
+
+// 基础表单
+const basicFormRef = ref(null);
+const basicFormData = reactive({
+    username: '',
+    password: ''
+});
+const basicFormRules = {
+    username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, message: '密码长度应不少于6个字符', trigger: 'blur' }
+    ]
+};
+
+// 表单项类型演示
+const formRef = ref(null);
+const formData = reactive({
+    input: '',
+    number: 0,
+    textarea: '',
+    select: '',
+    date: '',
+    time: '',
+    radio: '',
+    checkbox: [],
+    switch: false,
+    slider: 50,
+    upload: [],
+    cascader: [],
+    treeSelect: '',
+    color: '#1677FF'
+});
+const formRules = {};
+
+// 选项数据
+const selectOptions = [
+    { label: '选项1', value: '1' },
+    { label: '选项2', value: '2' },
+    { label: '选项3', value: '3' }
+];
+
+const radioOptions = [
+    { label: '选项1', value: '1' },
+    { label: '选项2', value: '2' },
+    { label: '选项3', value: '3' }
+];
+
+const checkboxOptions = [
+    { label: '选项1', value: '1' },
+    { label: '选项2', value: '2' },
+    { label: '选项3', value: '3' }
+];
+
+const cascaderOptions = [
+    {
+        label: '北京',
+        value: 'beijing',
+        children: [
+            {
+                label: '朝阳区',
+                value: 'chaoyang'
+            },
+            {
+                label: '海淀区',
+                value: 'haidian'
+            }
+        ]
+    },
+    {
+        label: '上海',
+        value: 'shanghai',
+        children: [
+            {
+                label: '浦东新区',
+                value: 'pudong'
+            },
+            {
+                label: '黄浦区',
+                value: 'huangpu'
+            }
+        ]
+    }
+];
+
+const treeData = [
+    {
+        label: '总部',
+        value: 'headquarters',
+        children: [
+            {
+                label: '研发部',
+                value: 'rd'
+            },
+            {
+                label: '销售部',
+                value: 'sales'
+            }
+        ]
+    },
+    {
+        label: '分公司',
+        value: 'branch',
+        children: [
+            {
+                label: '北京分公司',
+                value: 'beijing'
+            },
+            {
+                label: '上海分公司',
+                value: 'shanghai'
+            }
+        ]
+    }
+];
+
+// API调用演示
+const apiFormRef = ref(null);
+const apiFormData = reactive({
+    name: '',
+    age: 0,
+    email: ''
+});
+
+const apiConfig = {
+    key: 'userSubmit',
+    apiId: 'user.submit',
+    apiType: '3' // 对应dataService中的DATA_INSERT
+};
+
+// 表单验证演示
+const validateFormRef = ref(null);
+const validateFormData = reactive({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    email: '',
+    phone: ''
+});
+
+const validateFormRules = {
+    username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, message: '密码长度应不少于6个字符', trigger: 'blur' }
+    ],
+    confirmPassword: [
+        { required: true, message: '请再次输入密码', trigger: 'blur' },
+        {
+            validator: (val) => val === validateFormData.password,
+            message: '两次输入的密码不一致',
+            trigger: 'blur'
+        }
+    ],
+    email: [
+        { required: true, message: '请输入邮箱', trigger: 'blur' },
+        {
+            validator: (val) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val),
+            message: '请输入正确的邮箱格式',
+            trigger: 'blur'
+        }
+    ],
+    phone: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+        {
+            validator: (val) => /^1[3-9]\d{9}$/.test(val),
+            message: '请输入正确的手机号格式',
+            trigger: 'blur'
+        }
+    ]
+};
+
+// 详情加载与本地表单数据演示
+const detailFormRef = ref(null);
+const detailFormData = reactive({
+    id: '',
+    name: '',
+    age: 0,
+    email: ''
+});
+
+// 提交API配置
+const submitApiConfig = {
+    key: 'userUpdate',
+    apiId: 'user.update',
+    apiType: '5' // 对应dataService中的DATA_MODIFY
+};
+
+// 详情API配置
+const detailApiConfig = {
+    key: 'userDetail',
+    apiId: 'user.detail',
+    apiType: '1' // 对应dataService中的DETAILS_DATA
+};
+
+// 加载详情数据
+const loadDetailData = () => {
+    const userId = prompt('请输入要加载的用户ID', '1001');
+    if (userId) {
+        // 使用表单组件的loadDetailData方法加载详情
+        detailFormRef.value.loadDetailData(userId);
+    }
+};
+
+// 清空表单数据
+const clearFormData = () => {
+    detailFormRef.value.clearFormData();
+};
+
+// 设置自定义表单数据
+const setCustomFormData = () => {
+    detailFormRef.value.setFormData({
+        id: '1002',
+        name: '张三',
+        age: 28,
+        email: 'zhangsan@example.com'
+    });
+};
+
+// 详情加载成功回调
+const handleDetailLoaded = (data) => {
+    MessagePlugin.success(`详情数据加载成功: ID=${data.id}, 姓名=${data.name}`);
+};
+
+// 详情加载失败回调
+const handleDetailError = (error) => {
+    MessagePlugin.error(`详情数据加载失败: ${error.message || '未知错误'}`);
+};
+
+// 表单提交成功回调
+const handleSubmitSuccess = (_response) => {
+    MessagePlugin.success('表单提交成功');
+};
+
+// 表单提交失败回调
+const handleSubmitError = (error) => {
+    MessagePlugin.error(`表单提交失败: ${error.message || '未知错误'}`);
+};
+</script>
+
+<style scoped>
+.ebiz-form-demo {
+    padding: 20px;
+}
+
+.mt-20 {
+    margin-top: 20px;
+}
 </style>