签入版本

RXThinkCMF_Laravel13_NaiveVue/zh/frontend/form-components.md

@@ -19,13 +19,13 @@ const [registerForm] = useForm({
     {
       field: 'name',
       label: '名称',
-      component: 'Input',
+      component: 'NInput',
       required: true,
     },
     {
       field: 'status',
       label: '状态',
-      component: 'Select',
+      component: 'NSelect',
       componentProps: {
         options: [
           { label: '在用', value: 1 },
@@ -46,22 +46,27 @@ const [registerForm] = useForm({
 
 ```vue
 <template>
-  <BasicModal @register="registerModal" @ok="handleSubmit" />
+  <basicModal @register="registerModal" @on-ok="handleSubmit" @on-close="closeModal" />
 </template>
 
 <script setup>
-import { BasicModal, useModal } from '@/components/Modal';
+import { basicModal, useModal } from '@/components/Modal';
 
-const [registerModal, { openModal, closeModal }] = useModal();
+// useModal 传入弹窗配置，返回 [register, { openModal, closeModal, setSubLoading }]
+const [registerModal, { openModal, closeModal }] = useModal({
+  title: '新增案例演示',
+  subBtuText: '确定',
+  width: 600,
+});
 
 // 打开弹窗
 const handleAdd = () => {
-  openModal(true, { isUpdate: false });
+  openModal();
 };
 
-// 提交
+// 提交（on-ok 事件触发；getFieldsValue 来自 useForm 返回的 [register, { getFieldsValue }]）
 const handleSubmit = async () => {
-  const values = await getFormValues();
+  const values = getFieldsValue();
   await exampleAdd(values);
   closeModal();
 };
@@ -70,17 +75,27 @@ const handleSubmit = async () => {
 
 ## Upload 上传组件
 
+图片字段使用 `UploadImg`（生成页面 `edit.vue` 的实际写法，`v-model:image-url` 绑定相对路径）：
+
 ```vue
 <template>
-  <BasicUpload v-model="formData.avatar" :action="uploadUrl" />
+  <UploadImg
+    v-model:image-url="formData.avatar"
+    @changeFileName="(name) => (formData.avatarImgName = name)"
+    name="tool"
+    :fileSize="20"
+    :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp']"
+  />
 </template>
 
 <script setup>
-import { BasicUpload } from '@/components/Upload';
-const uploadUrl = '/api/upload/uploadFile';   // 需认证 + sys:upload:file 权限
+import UploadImg from '@/components/Upload/Image.vue';
+// 上传接口：POST /api/upload/uploadFile（需认证 + sys:upload:file 权限）
 </script>
 ```
 
+多文件场景可用 `BasicUpload`（`:value` 传路径数组，`@uploadChange` 回传更新后的数组，见 [G. 前端组件速查](/zh/appendix/components.html)）。
+
 :::tip 上传字段值
 绑定值建议存 `filePath`（相对路径），Service 的 `fileFields` 归一化入库、读取时自动补全域名。详见 [7.1 文件上传全流程](/zh/tools/upload.html)。
 :::