[WIP] Add user login form UI module

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

请你根据以下两个schema，生成一个能实现登录功能的系统
1.登录表单 UI 模块 (UI Schema)
{
"meta": {
"id": "ui_login_form",
"type": "ui.form",
"name": "用户登录表单",
"version": "1.0.0",
"category": "ui",
"tags": ["login", "auth", "form"],
"status": "stable",
"created": "2026-01-08T10:00:00Z"
},

"documentation": {
"description": "用于用户身份认证的登录表单组件",
"usage": "嵌入在登录页面中，提交时触发 flow_user_login"
},

"schema": {
"props": {
"submitLabel": { "type": "string", "default": "登录" }
}
},

"config": {
"fields": [
{
"id": "username",
"type": "input",
"label": "账号",
"placeholder": "请输入用户名或邮箱",
"validation": {
"required": true,
"message": "账号不能为空"
}
},
{
"id": "password",
"type": "input",
"inputType": "password",
"label": "密码",
"placeholder": "请输入密码",
"validation": {
"required": true,
"minLength": 6,
"message": "密码长度不能少于6位"
}
}
],

"submitEndpoint": "/api/auth/login", 

"events": {
  "onSubmit": {
    "description": "表单提交时触发登录流程",
    "flow": "flow_user_login", 
    "validateBeforeSubmit": true
  }
},

"styling": {
  "layout": "vertical",
  "fieldSpacing": "{{theme.spacing.md}}",
  "submitButton": {
    "width": "100%",
    "variant": "primary"
  }
}

},

"runtime": {
"state": {
"isSubmitting": false,
"errors": {}
}
}
}
2.登录业务逻辑流模块 (Event Flow Schema)
{
"meta": {
"id": "flow_user_login",
"type": "event.flow",
"name": "用户登录流程",
"version": "2.0.0",
"category": "logic"
},

"trigger": {
"type": "form.submit",
"sourceId": "ui_login_form"
},

"pipeline": [
{
"id": "step_validate",
"type": "validation",
"description": "再次校验表单数据",
"config": {
"target": "ui_login_form",
"fields": ["username", "password"]
},
"onError": "flow_show_validation_error"
},
{
"id": "step_api_call",
"type": "api",
"description": "调用后端登录接口",
"config": {
"url": "/api/auth/login",
"method": "POST",
"body": {
"username": "{{ui_login_form.state.values.username}}",
"password": "{{ui_login_form.state.values.password}}"
},
"timeout": 5000,
"retry": {
"maxAttempts": 2,
"backoff": "fixed"
}
},
"onSuccess": "step_save_token",
"onError": "flow_show_api_error"
},
{
"id": "step_save_token",
"type": "state.update",
"description": "将Token保存到全局状态或本地存储",
"config": {
"variable": "user.token",
"value": "{{step_api_call.response.token}}",
"storage": "localStorage"
}
},
{
"id": "step_show_success",
"type": "toast",
"config": {
"title": "登录成功",
"message": "欢迎回来，正在进入系统...",
"status": "success",
"duration": 2000
}
},
{
"id": "step_navigate",
"type": "navigation",
"description": "跳转至首页",
"config": {
"to": "/dashboard",
"delay": 1000
}
}
],

"errorHandling": {
"global": {
"onNetworkError": "flow_network_error",
"onTimeout": "flow_timeout_error"
}
},

"logging": {
"enabled": true,
"level": "info"
}
}

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.