matrix_components 2.0.360 → 2.0.362

package/README.md

@@ -1,6 +1,14 @@
 # **组件库2.0**
 组件使用示例参考dist/ComponentDemo
 
+```
+version:2.0.362
+2025-12-01
+更新日志：
+1.重构NsForm组件，支持动态组件
+2.增加NsFormTitle动态表单标题组件，用法参考：FormDemo.vue
+```
+
 ```
 version:2.0.360
 2025-11-29

package/dist/ComponentDemo/FormDemo.vue

@@ -2,306 +2,329 @@
   <div class="demo-container">
     <div class="control-panel">
       <h3>动态表单组件演示</h3>
-
       <!-- 配置文件选择 -->
-      <!-- <div class="config-section">
-        <h4>方式一：选择配置文件</h4>
-        <el-select
-          v-model="selectedConfig"
-          placeholder="请选择表单配置"
-          @change="loadConfig"
-          class="config-select"
-        >
-          <el-option
-            v-for="config in configOptions"
-            :key="config.value"
-            :label="config.label"
-            :value="config.value"
-          />
-        </el-select>
-        <el-button @click="reloadConfig" :disabled="!selectedConfig">重新加载</el-button>
-      </div> -->
-
-      <!-- 文件上传方式 -->
-      <div class="upload-section">
-        <h4>上传配置文件</h4>
-        <input
-          type="file"
-          @change="importConfig(($event.target as any)?.files?.[0])"
-          accept=".js,.json"
-        />
-        <el-button @click="clearFile" :disabled="!uploadedFile">清除文件</el-button>
-      </div>
-
-      <!-- 表单操作 -->
-      <div class="action-section">
-        <h4>表单操作</h4>
-        <el-button type="primary" @click="validateForm" :disabled="!formLoaded">验证表单</el-button>
-        <el-button @click="resetForm" :disabled="!formLoaded">重置表单</el-button>
-        <el-button type="info" @click="toggleFormData" :disabled="!formLoaded">
-          {{ showFormData ? '隐藏' : '显示' }}表单数据
-        </el-button>
-        <el-button type="success" @click="exportFormData" :disabled="!formLoaded">导出数据</el-button>
-      </div>
-    </div>
-
-    <!-- 表单容器 -->
-    <div class="form-container" v-if="formLoaded">
-      <NsForm
-        ref="formRef"
-        v-model="formData"
-        :form-items="formItems"
-        :rules="formRules"
-        :options-data="optionsData"
-        label-width="120px"
-        :gutter="20"
-        :clear-validate-on-init="true"
-        @validate="handleValidate"
-        @submit="handleSubmit"
-        @reset="handleReset"
-      >
-        <!-- 自定义插槽示例 -->
-        <template #customSlot="{ item, formData }">
-          <el-input
-            v-model="formData[item.prop]"
-            placeholder="这是自定义插槽内容"
-            prefix-icon="User"
-          />
-        </template>
-
-        <!-- 表单操作按钮 -->
-        <template #footer="{ validate, resetFields }">
-          <el-form-item>
-            <el-button type="primary" @click="validate">提交表单</el-button>
-            <el-button @click="resetFields">重置表单</el-button>
-          </el-form-item>
-        </template>
-      </NsForm>
-    </div>
-
-    <!-- 空状态 -->
-    <div class="empty-state" v-else>
-      <el-empty description="请选择或上传表单配置文件" />
+       <el-form :model="state" ref="formRef" label-position="left">
+          <el-button type="primary" @click="getFormData">获取表单数据</el-button>
+          <br>
+          <span style="color: red">
+            结果：{{ state.formData }}
+          </span>
+          <br>
+          <br>
+          <NsFormTitle title="模型参数">
+              <NsForm
+                  ref="row1Ref"
+                  :readOnly="state.readOnly"
+                  backgroundColor="#fff"
+                  :model="state.model"
+                  :rows="state.rows"
+                  formPropKey="rows"
+                  labelColor="#606266"
+                  labelWidth="150"
+                  gapH="20px"
+                  gapV="10px"
+              ></NsForm>
+          </NsFormTitle>
+          <NsFormTitle title="视频配置">
+              <NsForm
+                  ref="row2Ref"
+                  :readOnly="state.readOnly"
+                  backgroundColor="#fff"
+                  :model="state.model"
+                  :rows="state.rows2"
+                  formPropKey="rows2"
+                  labelColor="#606266"
+                  labelWidth="150"
+                  gapH="20px"
+                  gapV="10px"
+              ></NsForm>
+          </NsFormTitle>
+          <NsFormTitle title="结果保存">
+              <NsForm
+                  ref="row3Ref"
+                  :readOnly="state.readOnly"
+                  backgroundColor="#fff"
+                  :model="state.model"
+                  :rows="state.rows3"
+                  formPropKey="rows3"
+                  labelColor="#606266"
+                  labelWidth="150"
+                  gapH="20px"
+                  gapV="10px"
+              ></NsForm>
+          </NsFormTitle>
+      </el-form>
     </div>
-
-    <!-- 表单数据显示 -->
-    <el-card v-if="showFormData && formLoaded" class="data-card">
-      <template #header>
-        <div class="card-header">
-          <span>表单数据</span>
-          <el-button type="text" @click="copyFormData">复制数据</el-button>
-        </div>
-      </template>
-      <pre class="form-data-display">{{ JSON.stringify(formData, null, 2) }}</pre>
-    </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import { nextTick, reactive, ref } from 'vue'
-
-// 表单引用
-const formRef = ref()
-
-// 状态管理
-const formLoaded = ref(false)
-const showFormData = ref(false)
-const selectedConfig = ref('')
-const uploadedFile = ref()
-
-// 表单数据
-const formData: any = reactive({})
-const formItems: any = ref([])
-const formRules: any = ref({})
-const optionsData: any = reactive({})
-
-// 加载配置文件
-async function loadConfig() {
-  if (!selectedConfig.value) return
-
-  try {
-    // 动态导入配置文件
-    const configModule = (await import(`@/views/ExampleFormConfig.js`)) as { formConfig: any; default: any }
-    const config = configModule.formConfig || configModule.default
-
-    if (config) {
-      initializeForm(config)
-      ElMessage.success('配置加载成功')
-    } else {
-      ElMessage.error('配置文件格式错误')
-    }
-  } catch (error) {
-    console.error('加载配置失败:', error)
-    ElMessage.error('配置文件加载失败')
-  }
-}
-
-// 导入配置文件
-function importConfig(file: File) {
-  if (!file) return
-
-  uploadedFile.value = file
-  const reader = new FileReader()
-
-  reader.onload = (e) => {
-    try {
-      const content = e.target?.result as string
-      let config
-
-      if (file.name.endsWith('.json')) {
-        config = JSON.parse(content)
-      } else if (file.name.endsWith('.js')) {
-        // 简单的JS文件解析（实际项目中可能需要更复杂的处理）
-        const configMatch = content.match(/export\s+(?:const|default)\s+\w*\s*=\s*({[\s\S]*});?/)
-        if (configMatch) {
-          config = eval(`(${configMatch[1]})`)
+import { ElInput, ElMessage, ElRadioGroup } from "element-plus";
+import { reactive, ref } from 'vue';
+
+const props = defineProps({
+    readOnly: {
+        type: Boolean,
+        default: false,
+    },
+    row: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const formRef = ref();
+const row1Ref = ref();
+const row2Ref = ref();
+const row3Ref = ref();
+const state = reactive({
+    formData: {},
+    readOnly: props.readOnly,
+    model: props.readOnly ? "" : "vertical",
+    // 第一种方式，在初始化前设置数据
+    rows: [
+        [
+            {
+                key: "confidence",
+                label: "置信度",
+                value: "",
+                component: ElInput,
+                params: {
+                    "v-length.range": {
+                        min: 0,
+                        max: 1,
+                        maxLength: 3 },
+                    rules: [
+                        {
+                            required: true,
+                            message: "请输入",
+                        },
+                    ],
+                },
+            },
+            {
+                key: "iou",
+                label: "交并比",
+                value: "",
+                component: ElInput,
+                params: {
+                    "v-length.range": {
+                        min: 0,
+                        max: 1,
+                        maxLength: 3 },
+                    rules: [
+                        {
+                            required: true,
+                            message: "请输入",
+                        },
+                    ],
+                },
+            },
+        ],
+    ],
+    rows2: [
+        [
+            {
+                key: "timeInterval",
+                label: "时间间隔（秒）",
+                value: "",
+                component: ElInput,
+                params: {
+                    "v-length.range": {
+                        min: 0,
+                        max: 6000,
+                        int: true
+                    },
+                    rules: [
+                        {
+                            required: true,
+                            message: "请输入",
+                        },
+                    ],
+                },
+            },
+            {
+                key: "stuck_threshold",
+                label: "视频帧卡顿（秒）",
+                value: "",
+                component: ElInput,
+                params: {
+                    "v-length.range": {
+                        min: 0,
+                        max: 1000,
+                        int: true
+                    },
+                    rules: [
+                        {
+                            required: true,
+                            message: "请输入",
+                        },
+                    ],
+                },
+            },
+        ],
+        [
+            {
+                key: "max_retries",
+                label: "最大重连次数",
+                value: "",
+                component: ElInput,
+                params: {
+                    "v-length.range": {
+                        min: 0,
+                        max: 100,
+                        int: true
+                    },
+                    rules: [
+                        {
+                            required: true,
+                            message: "请输入",
+                        },
+                    ],
+                },
+            },
+            {
+                value: ' '
+            }
+        ],
+    ],
+    rows3: [
+        [
+            {
+                key: "save_video",
+                label: "是否保存视频",
+                value: '1',
+                component: ElRadioGroup,
+                params: {
+                    rules: [
+                        {
+                            required: true,
+                            message: "请选择",
+                            trigger: 'change'
+                        },
+                    ],
+                    options: [
+                        {
+                            value: '1',
+                            label: '是',
+                        },
+                        {
+                            value: '0',
+                            label: '否',
+                        },
+                    ]
+                },
+            },
+            {
+                key: "pre_buffer_second",
+                label: "帧前缓存（秒）",
+                value: "",
+                component: ElInput,
+                params: {
+                    "v-length.range": {
+                        min: 0,
+                        max: 1000,
+                        int: true
+                    },
+                    rules: [
+                        {
+                            required: true,
+                            message: "请输入",
+                        },
+                    ],
+                },
+            },
+        ],
+        [
+            {
+                key: "det_area_mode",
+                label: "检测区域工作模式",
+                value: 'normal',
+                component: ElRadioGroup,
+                events: {
+                    change: detAreaModeChange
+                },
+                params: {
+                    rules: [
+                        {
+                            required: true,
+                            message: "请选择",
+                            trigger: 'change'
+                        },
+                    ],
+                    options: [
+                        {
+                            value: 'normal',
+                            label: '常规检测(normal)',
+                        },
+                        {
+                            value: 'abnormal',
+                            label: '非常规检测(abnormal)',
+                        },
+                    ]
+                },
+            },
+        ],
+    ],
+});
+
+function detAreaModeChange(value: any) {
+    if(value === 'abnormal') {
+        if(state.rows3?.length && state.rows3[state.rows3.length - 1]?.[0]?.key === 'det_area_json'){
+            state.rows3.pop()
         }
-      }
-
-      if (config) {
-        initializeForm(config)
-        selectedConfig.value = '' // 清除下拉选择
-        ElMessage.success('配置文件导入成功')
-      } else {
-        ElMessage.error('配置文件格式错误')
-      }
-    } catch (error) {
-      console.error('解析配置文件失败:', error)
-      ElMessage.error('配置文件解析失败')
+        state.rows3.push([{
+            key: "det_area_json",
+            label: "感兴趣区域",
+            value: '',
+            component: ElInput,
+            span: 6,
+            events: {
+                change: (value) => getAreasHandler(value),
+            },
+            params: {
+                rules: [
+                    {
+                        required: true,
+                        message: "请输入",
+                        trigger: 'change'
+                    },
+                ],
+            },
+        }, {value: ' '}])
+    }else {
+        state.rows3.pop()
     }
-  }
-
-  reader.readAsText(file)
-}
-
-// 清除上传的文件
-function clearFile() {
-  uploadedFile.value = null
-  formLoaded.value = false
-  showFormData.value = false
-
-  // 清空表单数据
-  Object.keys(formData).forEach(key => {
-    delete formData[key]
-  })
-  formItems.value = []
-  formRules.value = {}
-  Object.keys(optionsData).forEach(key => {
-    delete optionsData[key]
-  })
 }
 
-// 初始化表单
-function initializeForm(config: any) {
-  // 清空现有数据
-  Object.keys(formData).forEach(key => {
-    delete formData[key]
-  })
-  Object.keys(optionsData).forEach(key => {
-    delete optionsData[key]
-  })
-
-  // 设置新数据
-  if (config.formData) {
-    Object.assign(formData, config.formData)
-  }
-
-  if (config.formItems) {
-    formItems.value = config.formItems
-  }
-
-  if (config.formRules) {
-    formRules.value = config.formRules
-  }
-
-  if (config.optionsData) {
-    Object.assign(optionsData, config.optionsData)
-  }
-
-  formLoaded.value = true
-
-  // 在下一帧清除表单验证状态
-  nextTick(() => {
-    if (formRef.value) {
-      formRef.value.clearValidate()
-    }
-  })
+function getAreasHandler(value: any) {
+    state.rows3[state.rows3.length - 1][0].value = value
 }
 
-// 验证表单
-async function validateForm() {
-  if (!formRef.value) return
-
-  try {
-    const valid = await formRef.value.validate()
-    if (valid) {
-      ElMessage.success('表单验证通过')
+/**
+ * 保存
+ */
+async function getFormData() {
+    try {
+        await formRef.value.validate();
+    } catch (error: any) {
+        console.log(error);
+        ElMessage.error('表单校验失败');
+        state.formData = {}
+        return false;
     }
-  } catch (error) {
-    ElMessage.error('表单验证失败')
-    console.error('表单验证失败:', error)
-  }
-}
-
-// 重置表单
-function resetForm() {
-  if (!formRef.value) return
-  formRef.value.resetFields()
-  ElMessage.info('表单已重置')
-}
-
-// 切换表单数据显示
-function toggleFormData() {
-  showFormData.value = !showFormData.value
-}
-
-// 导出表单数据
-function exportFormData() {
-  const dataStr = JSON.stringify(formData, null, 2)
-  const blob = new Blob([dataStr], { type: 'application/json' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = 'form-data.json'
-  a.click()
-  URL.revokeObjectURL(url)
-  ElMessage.success('数据导出成功')
-}
-
-// 复制表单数据
-async function copyFormData() {
-  try {
-    await navigator.clipboard.writeText(JSON.stringify(formData, null, 2))
-    ElMessage.success('数据已复制到剪贴板')
-  } catch (error) {
-    ElMessage.error('复制失败')
-    console.error('复制失败:', error)
-  }
-}
-
-// 表单事件处理
-function handleValidate(valid: boolean, data: any) {
-  console.log('表单验证结果:', valid, data)
-}
-
-function handleSubmit(data: any) {
-  console.log('表单提交:', data)
-  ElMessage.success('表单提交成功')
-}
-
-function handleReset(data: any) {
-  console.log('表单重置:', data)
+    const data1 = row1Ref.value?.getKeyValuePairs?.(state.rows);
+    const data2 = row2Ref.value?.getKeyValuePairs?.(state.rows2);
+    const data3 = row3Ref.value?.getKeyValuePairs?.(state.rows3);
+    const data = { ...data1, ...data2, ...data3 }
+    state.formData = data;
+    ElMessage.success('表单校验成功');
+    return data;
 }
 
-// 初始化时加载默认配置
-nextTick(() => {
-  selectedConfig.value = 'ExampleFormConfig'
-  loadConfig()
-})
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .demo-container {
   padding: 20px;
   max-width: 1400px;

package/dist/ComponentDemo/Test.vue

@@ -90,12 +90,12 @@
         <span>当前: "{{ rangeInput4 }}%"</span>
       </div>
 
-      <h3>整数范围模式 - v-length.range (integerOnly)</h3>
+      <h3>整数范围模式 - v-length.range (int)</h3>
       <div class="input-group">
         <label>整数范围 0-100 (仅整数):</label>
         <el-input
           v-model="rangeInput5"
-          v-length.range="{ min: 0, max: 100, integerOnly: true }"
+          v-length.range="{ min: 0, max: 100, int: true }"
           placeholder="仅能输入0-100之间的整数"
           style="width: 300px;"
         />
@@ -106,7 +106,7 @@
         <label>年龄范围 1-120 (仅整数):</label>
         <el-input
           v-model="rangeInput6"
-          v-length.range="{ min: 1, max: 120, integerOnly: true, maxLength: 3 }"
+          v-length.range="{ min: 1, max: 120, int: true, maxLength: 3 }"
           placeholder="输入年龄1-120岁"
           style="width: 300px;"
         />
@@ -117,7 +117,7 @@
         <label>负整数范围 -10到10 (仅整数):</label>
         <el-input
           v-model="rangeInput7"
-          v-length.range="{ min: -10, max: 10, integerOnly: true }"
+          v-length.range="{ min: -10, max: 10, int: true }"
           placeholder="输入-10到10之间的整数"
           style="width: 300px;"
         />