diff --git a/docs/src/router/index.ts b/docs/src/router/index.ts index 3101213..71a2789 100644 --- a/docs/src/router/index.ts +++ b/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', diff --git a/docs/src/views/form/form-validate.vue b/docs/src/views/form/form-validate.vue new file mode 100644 index 0000000..78bd7a2 --- /dev/null +++ b/docs/src/views/form/form-validate.vue @@ -0,0 +1,151 @@ + + + + + diff --git a/packages/mcp/index.ts b/packages/mcp/index.ts index 85fa1c8..eb43733 100644 --- a/packages/mcp/index.ts +++ b/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() } } } diff --git a/packages/mcp/src/form/index.ts b/packages/mcp/src/form/index.ts new file mode 100644 index 0000000..8912df6 --- /dev/null +++ b/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' } + } + } + } + }) diff --git a/packages/mcp/src/form/resouces.en.md b/packages/mcp/src/form/resouces.en.md new file mode 100644 index 0000000..8371a51 --- /dev/null +++ b/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. diff --git a/packages/mcp/src/form/resouces.zh.md b/packages/mcp/src/form/resouces.zh.md new file mode 100644 index 0000000..e51959e --- /dev/null +++ b/packages/mcp/src/form/resouces.zh.md @@ -0,0 +1,3 @@ +# Form 表单 + +由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。 diff --git a/packages/mcp/src/lang/en.ts b/packages/mcp/src/lang/en.ts index 6a10cd4..b80b333 100644 --- a/packages/mcp/src/lang/en.ts +++ b/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' } } } diff --git a/packages/mcp/src/lang/zh-CN.ts b/packages/mcp/src/lang/zh-CN.ts index d2a39c6..9e2d8a4 100644 --- a/packages/mcp/src/lang/zh-CN.ts +++ b/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 用逗号隔开' } } }