feat: 添加form表单的mcp工具

docs/src/router/index.ts

@@ -17,6 +17,11 @@ const router = createRouter({
       name: 'Comprehensive',
       component: () => import('../views/comprehensive/index.vue')
     },
+    {
+      path: '/form',
+      name: 'Form',
+      component: () => import('../views/form/form-validate.vue')
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'NotFound',

docs/src/views/form/form-validate.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="demo-form">
+    <div class="title">
+      <div>validate 用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
+    </div>
+    <tiny-form 
+      ref="ruleFormRef" 
+      :model="createData"   
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'form-validate',
+          description: '表单验证示例'
+        }
+      }"
+      :rules="rules" 
+      label-width="100px"
+      >
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
+        <tiny-input v-model="createData.users"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="日期" prop="datepicker">
+        <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
+      </tiny-form-item>
+      <tiny-form-item label="URL" prop="url">
+        <tiny-input v-model="createData.url"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="邮件" prop="email">
+        <tiny-input v-model="createData.email"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="数字" prop="num1">
+        <tiny-numeric v-model="createData.num1"></tiny-numeric>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
+          提交
+        </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import {
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyDatePicker,
+  TinyButton,
+  TinyModal,
+  TinyRadioGroup,
+  TinyNumeric,
+  TinyIpAddress,
+  TinyButtonGroup
+} from '@opentiny/vue'
+import { iconWarning } from '@opentiny/vue-icon'
+import { useNextServer } from '@opentiny/next-vue'
+
+const ruleFormRef = ref()
+function handleClick() {
+  TinyModal.message({ message: 'click', status: 'info' })
+}
+const validateIcon = ref(iconWarning())
+const validType = ref('promise')
+const validTypeList = ref([
+  { text: 'promise', value: 'promise' },
+  { text: '回调', value: 'callback' }
+])
+const options = ref([
+  { label: 'A', text: '很好', events: { click: handleClick } },
+  { label: 'B', text: '一般' }
+])
+const createData = reactive({
+  radio: '',
+  users: '',
+  url: '',
+  email: '',
+  datepicker: '',
+  ip: '',
+  num1: 0
+})
+const rules = ref({
+  radio: [{ required: true, message: '必填', trigger: 'change' }],
+  users: [
+    { required: true, message: '必填', trigger: 'blur' },
+    { min: 2, max: 11, message: '长度必须不小于 2', trigger: ['change', 'blur'] }
+  ],
+  datepicker: { type: 'date' },
+  url: { type: 'url' },
+  email: { type: 'email' },
+  ip: [
+    {
+      validator: (rule, value, cb) => (value === '1.1.1.1' ? cb() : cb(new Error('必填 1.1.1.1'))),
+      trigger: 'change'
+    }
+  ],
+  num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
+})
+
+function handleSubmit() {
+  ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      TinyModal.alert('回调用法：提交成功')
+    } else {
+      TinyModal.alert('回调用法：提交失败')
+    }
+  })
+}
+
+function handleSubmitPromise() {
+  ruleFormRef.value
+    .validate()
+    .then(() => {
+      TinyModal.alert('promise 用法：提交成功')
+    })
+    .catch(() => {
+      TinyModal.alert('promise 用法：提交失败')
+    })
+}
+
+function clearFormValid() {
+  ruleFormRef.value.clearValidate()
+}
+
+function resetForm() {
+  ruleFormRef.value.resetFields()
+}
+
+const { server } = useNextServer({
+  serverInfo: { name: 'ecs-form', version: '1.0.0' }
+})
+</script>
+
+<style scoped>
+.demo-form {
+  width: 450px;
+}
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+</style>

packages/mcp/index.ts

@@ -7,6 +7,7 @@ import { getGridConfig } from './src/grid'
 import { getBaseSelectConfig } from './src/base-select'
 import { i18n } from './src/utils/locale'
 import { getButtonConfig } from './src/button'
+import { getFormConfig } from './src/form'
 
 export { zhCN, enUS, i18n }
 
@@ -29,7 +30,8 @@ export const getTinyVueMcpConfig = ({ t }: { t?: ((path: string) => string) | nu
     components: {
       Grid: getGridConfig(),
       BaseSelect: getBaseSelectConfig(),
-      Button: getButtonConfig()
+      Button: getButtonConfig(),
+      Form: getFormConfig()
     }
   }
 }

packages/mcp/src/form/index.ts

@@ -0,0 +1,67 @@
+import { z } from 'zod'
+import { defineComponentTool } from '../utils/defineComponentTool'
+import resourcesZh from './resouces.zh.md?raw'
+import resourcesEn from './resouces.en.md?raw'
+import { t } from '../utils/locale'
+
+export const resources = {
+  zh: resourcesZh,
+  en: resourcesEn
+}
+
+export const getFormConfig = () =>
+  defineComponentTool({
+    name: 'form_component_tools',
+    description: t('ai.form.description'),
+    tools: {
+      resetFields: {
+        paramsSchema: z.boolean().optional().describe(t('ai.form.resetFields')),
+        cb: (instance) => {
+          instance.resetFields()
+          return { type: 'text', text: 'success' }
+        }
+      },
+      clearValidate: {
+        paramsSchema: z.string().optional().describe(t('ai.form.clearValidate')),
+        cb: (instance, value) => {
+          if (typeof value === 'string' && value) {
+            const arr = value.split(',')
+            if(arr.length > 0) {
+             instance.clearValidate(arr)
+            }else {
+              instance.clearValidate(value)
+            }
+          } 
+          return { type: 'text', text: 'success' }
+        }
+      },
+      clearValidateAll: {
+        paramsSchema: z.boolean().optional().describe(t('ai.form.clearValidateAll')),
+        cb: (instance) => {
+          instance.clearValidate()
+          return { type: 'text', text: 'success' }
+        }
+      },
+      validate: {
+        paramsSchema: z.boolean().optional().describe(t('ai.form.validate')),
+        cb: async (instance) => {
+          const result = await instance.validate()
+          return { type: 'text', text: result ? 'success' : 'fail' }
+        }
+      },
+      validateField: {
+        paramsSchema: z.string().optional().describe(t('ai.form.validateField')),
+        cb: (instance, value) => {
+          if (typeof value === 'string' && value) {
+            const arr = value.split(',')
+            if(arr.length > 0) {
+             instance.validateField(arr)
+            }else {
+              instance.validateField(value)
+            }
+          } 
+          return { type: 'text', text: 'success' }
+        }
+      }
+    }
+  })

packages/mcp/src/form/resouces.en.md

@@ -0,0 +1,3 @@
+# Form Component
+
+Composed of buttons, input boxes, selectors, radio buttons, multiple-choice boxes, and other controls, used for collecting, verifying, and submitting data.

packages/mcp/src/form/resouces.zh.md

@@ -0,0 +1,3 @@
+# Form 表单
+
+由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

packages/mcp/src/lang/en.ts

@@ -29,6 +29,15 @@ export default {
     button: {
       description: 'Button component related tool set',
       triggerClick: 'Button click, click the button'
+    },
+     form: {
+      description:
+        'Form component related tool set, including getting form validation, resetting form and other functions',
+      resetFields: 'Reset the entire form, resetting all field values to their initial values and removing validation results',
+      clearValidate: 'Remove the validation results of the form item, you can pass in the prop of the form item to be removed, or an array of props, if not passed in, the validation results of the entire form will be removed',
+      clearValidateAll: 'Remove the validation results of the entire form',
+      validate: 'Validate the entire form, the parameter is a callback function (the callback function will be called after the validation is completed and passed two parameters: 1, whether the validation is successful 2, the fields that failed validation) returns a Promise object',
+      validateField: 'Validate the specified field by passing in the prop of the form item to be validated, or separating the props with commas'
     }
   }
 }

packages/mcp/src/lang/zh-CN.ts

@@ -22,6 +22,14 @@ export default {
     button: {
       description: '按钮组件相关工具集合',
       triggerClick: '按钮点击，点击按钮'
+    },
+    form: {
+      description: '表单组件相关工具集合，包含获取表单校验、重置表单等功能',
+      resetFields: '对整个表单进行重置，将所有字段值重置为初始值并移除校验结果',
+      clearValidate: '移除表单项的校验结果，可传入待移除的表单项的 prop ，或者 prop 用逗号隔开，如不传则移除整个表单的校验结果',
+      clearValidateAll: '移除整个表单的校验结果',
+      validate: '对整个表单进行校验的方法，参数为一个回调函数（该回调函数会在校验结束后被调用，并传入两个参数：1、是否校验成功 2、未通过校验的字段）返回一个 Promise对象',
+      validateField: '对指定字段进行校验，可传入待校验的表单项的 prop ，或者 prop 用逗号隔开'
     }
   }
 }