chore(build): 同步构建产物（site/** + sitemap 公网基址）——含本任务接线后的 data.json/data.js/逐端页，以及并行会话（S10/S9-P3）在途工作的生成物；其源码文件仍留在工作区未提交
This commit is contained in:
aurora-admin
@@ -1 +1,42 @@
|
||||
{"slug":"formmodal","mode":"single","examples":[{"id":"formmodal-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-page\">\n <h2 class=\"kole-h2\">FormModal 表单弹窗</h2>\n <p class=\"kole-desc\">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n <div class=\"kole-demo\">\n <button class=\"kole-btn kole-btn--primary\" id=\"open\">新建用户</button>\n <p class=\"kole-code-tip\" id=\"out\"></p>\n </div>\n</div>\n<div class=\"kole-formmodal-mask\" id=\"mask\" style=\"display:none\">\n <div class=\"kole-formmodal\">\n <div class=\"kole-formmodal-head\">\n <span>新建用户</span>\n <button class=\"kole-formmodal-close\" id=\"close\">×</button>\n </div>\n <div class=\"kole-formmodal-body\">\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 姓名\n </label>\n <input class=\"kole-form-input\" id=\"f-name\" placeholder=\"请输入姓名\" />\n <div class=\"kole-form-err\" id=\"e-name\" style=\"display:none\">姓名不能为空</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 邮箱\n </label>\n <input class=\"kole-form-input\" id=\"f-email\" placeholder=\"name@example.com\" />\n <div class=\"kole-form-err\" id=\"e-email\" style=\"display:none\">邮箱格式不正确</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">角色</label>\n <input class=\"kole-form-input\" id=\"f-role\" placeholder=\"如：管理员\" />\n </div>\n </div>\n <div class=\"kole-formmodal-foot\">\n <button class=\"kole-btn\" id=\"cancel\">取消</button>\n <button class=\"kole-btn kole-btn--primary\" id=\"ok\">提交</button>\n </div>\n </div>\n</div>","preview":{"show":[[0],[1]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<h2>FormModal 表单弹窗</h2>\n<p>弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n<button>新建用户</button>\n<p></p>\n<div class=\"kole-formmodal-mask\" style=\"display:none\">\n <div class=\"kole-formmodal\">\n <div class=\"kole-formmodal-head\">\n <span>新建用户</span>\n <button class=\"kole-formmodal-close\">×</button>\n </div>\n <div class=\"kole-formmodal-body\">\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 姓名\n </label>\n <input class=\"kole-form-input\" placeholder=\"请输入姓名\" />\n <div class=\"kole-form-err\" style=\"display:none\">姓名不能为空</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 邮箱\n </label>\n <input class=\"kole-form-input\" placeholder=\"name@example.com\" />\n <div class=\"kole-form-err\" style=\"display:none\">邮箱格式不正确</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">角色</label>\n <input class=\"kole-form-input\" placeholder=\"如：管理员\" />\n </div>\n </div>\n <div class=\"kole-formmodal-foot\">\n <button>取消</button>\n <button>提交</button>\n </div>\n </div>\n</div>","jsx":"import { KoleFormModal } from 'kole-ui/react';\n\n<KoleFormModal />","vue3":"<template>\n <KoleFormModal />\n</template>\n\n<script setup>\nimport { KoleFormModal } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleFormModal />\n</template>\n\n<script>\nimport { KoleFormModal } from 'kole-ui/vue2';\nexport default { components: { KoleFormModal } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}
|
||||
{
|
||||
"slug": "formmodal",
|
||||
"mode": "single",
|
||||
"examples": [
|
||||
{
|
||||
"id": "formmodal-ex-1",
|
||||
"title": "基础用法",
|
||||
"titleSrc": "",
|
||||
"desc": "",
|
||||
"html": "<div class=\"kole-page\">\n <h2 class=\"kole-h2\">FormModal 表单弹窗</h2>\n <p class=\"kole-desc\">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n <div class=\"kole-demo\">\n <button class=\"kole-btn kole-btn--primary\" id=\"open\">新建用户</button>\n <p class=\"kole-code-tip\" id=\"out\"></p>\n </div>\n</div>\n<div class=\"kole-formmodal-mask\" id=\"mask\" style=\"display:none\">\n <div class=\"kole-formmodal\">\n <div class=\"kole-formmodal-head\">\n <span>新建用户</span>\n <button class=\"kole-formmodal-close\" id=\"close\">×</button>\n </div>\n <div class=\"kole-formmodal-body\">\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 姓名\n </label>\n <input class=\"kole-form-input\" id=\"f-name\" placeholder=\"请输入姓名\" />\n <div class=\"kole-form-err\" id=\"e-name\" style=\"display:none\">姓名不能为空</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 邮箱\n </label>\n <input class=\"kole-form-input\" id=\"f-email\" placeholder=\"name@example.com\" />\n <div class=\"kole-form-err\" id=\"e-email\" style=\"display:none\">邮箱格式不正确</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">角色</label>\n <input class=\"kole-form-input\" id=\"f-role\" placeholder=\"如：管理员\" />\n </div>\n </div>\n <div class=\"kole-formmodal-foot\">\n <button class=\"kole-btn\" id=\"cancel\">取消</button>\n <button class=\"kole-btn kole-btn--primary\" id=\"ok\">提交</button>\n </div>\n </div>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
0
|
||||
],
|
||||
[
|
||||
1
|
||||
]
|
||||
],
|
||||
"hide": [],
|
||||
"mode": "single"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<h2>FormModal 表单弹窗</h2>\n<p>弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n<button>新建用户</button>\n<p></p>\n<div class=\"kole-formmodal-mask\" style=\"display:none\">\n <div class=\"kole-formmodal\">\n <div class=\"kole-formmodal-head\">\n <span>新建用户</span>\n <button class=\"kole-formmodal-close\">×</button>\n </div>\n <div class=\"kole-formmodal-body\">\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 姓名\n </label>\n <input class=\"kole-form-input\" placeholder=\"请输入姓名\" />\n <div class=\"kole-form-err\" style=\"display:none\">姓名不能为空</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">\n <span class=\"req\">*</span>\n 邮箱\n </label>\n <input class=\"kole-form-input\" placeholder=\"name@example.com\" />\n <div class=\"kole-form-err\" style=\"display:none\">邮箱格式不正确</div>\n </div>\n <div class=\"kole-form-row\">\n <label class=\"kole-form-label\">角色</label>\n <input class=\"kole-form-input\" placeholder=\"如：管理员\" />\n </div>\n </div>\n <div class=\"kole-formmodal-foot\">\n <button>取消</button>\n <button>提交</button>\n </div>\n </div>\n</div>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KoleFormModal } from 'kole-ui/react';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default function Demo() {\n const [visible, setVisible] = useState(false);\n\n return (\n <>\n <button type=\"button\" onClick={() => setVisible(true)}>新建用户</button>\n <KoleFormModal\n visible={visible}\n title=\"新建用户\"\n fields={fields}\n onSubmit={(form) => { console.log(form); setVisible(false); }}\n onCancel={() => setVisible(false)}\n />\n </>\n );\n}",
|
||||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleFormModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nfunction onSubmit(form) { console.log(form); visible.value = false; }\nfunction close() { visible.value = false; }\n</script>\n\n<template>\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n</template>",
|
||||
"vue2": "<template>\n <div>\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n </div>\n</template>\n\n<script>\nimport { KoleFormModal } from 'kole-ui/vue2';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default {\n name: 'FormModalDemo',\n components: { KoleFormModal },\n data() { return { visible: false, fields }; },\n methods: {\n onSubmit(form) { console.log(form); this.visible = false; },\n close() { this.visible = false; },\n },\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KoleFormModal } from 'kole-ui/react';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default function Demo(): JSX.Element {\n const [visible, setVisible] = useState<boolean>(false);\n\n return (\n <>\n <button type=\"button\" onClick={() => setVisible(true)}>新建用户</button>\n <KoleFormModal\n visible={visible}\n title=\"新建用户\"\n fields={fields}\n onSubmit={(form) => { console.log(form); setVisible(false); }}\n onCancel={() => setVisible(false)}\n />\n </>\n );\n}",
|
||||
"vue3ts": "<template>\n\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleFormModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nfunction onSubmit(form) { console.log(form); visible.value = false; }\nfunction close() { visible.value = false; }\n</script>",
|
||||
"vue2ts": "<template>\n\n <div>\n <button type=\"button\" @click=\"visible = true\">新建用户</button>\n <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n <KoleFormModal\n :visible=\"visible\"\n title=\"新建用户\"\n :fields=\"fields\"\n @submit=\"onSubmit\"\n @cancel=\"close\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleFormModal } from 'kole-ui/vue2';\n\nconst fields = [\n { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default {\n name: 'FormModalDemo',\n components: { KoleFormModal },\n data(): Record<string, unknown> { return { visible: false, fields }; },\n methods: {\n onSubmit(form) { console.log(form); this.visible = false; },\n close(): void { this.visible = false; },\n },\n};\n</script>"
|
||||
},
|
||||
"notes": [
|
||||
"依据 frameworks/FormModal.html:20-44 的弹窗结构（标题「新建用户」、姓名/邮箱必填并带 placeholder、角色可空、错误文案「姓名不能为空」「邮箱格式不正确」）",
|
||||
"visible / title / fields / value 形参见 FormModal.jsx 与 FormModal.vue3.vue defineProps（DEFAULT_FIELDS 与演示页三个字段同值）"
|
||||
]
|
||||
}
|
||||
],
|
||||
"curated": true
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user