matrix_components 2.0.366 → 2.0.367

package/dist/ComponentDemo/FormDemo.vue

@@ -0,0 +1,560 @@
+<template>
+    <div class="demo-container">
+      <div class="control-panel">
+        <h3>动态表单组件演示</h3>
+        <!-- 配置文件选择 -->
+        <el-form :model="state" ref="formRef" label-position="left">
+          <el-button type="primary" @click="getFormData">获取表单数据</el-button>
+          <el-button type="default" @click="resetFormData">重置表单</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>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ElInput, ElMessage, ElRadioGroup } from 'element-plus'
+  import { reactive, ref } from 'vue'
+  import { cloneDeep } from 'lodash-es'
+  import { nextTick } 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',
+    // 使用 cloneDeep 进行深拷贝，保留函数
+    rows: [
+      [
+        {
+          key: 'confidence',
+          label: '置信度',
+          value: 'aaa',
+          component: ElInput,
+          params: {
+            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()
+      }
+      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()
+    }
+  }
+  
+  function getAreasHandler(value: any) {
+    state.rows3[state.rows3.length - 1][0].value = value
+  }
+  
+  /**
+   * 保存
+   */
+  async function getFormData() {
+    try {
+      await formRef.value.validate()
+    } catch (error: any) {
+      console.log(error)
+      ElMessage.error('表单校验失败')
+      state.formData = {}
+      return false
+    }
+    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
+  }
+  
+  /**
+   * 重置表单
+   */
+  async function resetFormData() {
+    // 使用组件内置的 resetForm 方法
+    row1Ref.value?.resetForm?.()
+    row2Ref.value?.resetForm?.()
+    row3Ref.value?.resetForm?.()
+    setTimeout(()=>{
+        // 重置表单验证状态
+        formRef.value?.clearValidate?.()
+        // 清空结果显示
+        state.formData = {}
+        ElMessage.success('表单重置成功')
+    }, 0)
+  }
+  
+  /**
+   * 重置表单数据到指定值或默认值
+   * @param targetRows 要重置的rows数据
+   * @param defaultValues 默认值对象，key为字段key，value为默认值
+   */
+  function resetFormToDefaults(targetRows: any[], defaultValues: Record<string, any> = {}) {
+    for (let rowIndex = 0; rowIndex < targetRows.length; rowIndex++) {
+      const row = targetRows[rowIndex]
+      for (let colIndex = 0; colIndex < row.length; colIndex++) {
+        const item = row[colIndex]
+        if (item.key) {
+          // 如果提供了默认值，使用默认值，否则根据组件类型重置
+          if (defaultValues.hasOwnProperty(item.key)) {
+            item.value = cloneDeep(defaultValues[item.key])
+          } else {
+            // 根据组件类型或当前值类型设置默认值
+            if (Array.isArray(item.value)) {
+              item.value = []
+            } else if (typeof item.value === 'number') {
+              item.value = 0
+            } else if (typeof item.value === 'boolean') {
+              item.value = false
+            } else {
+              item.value = ''
+            }
+          }
+  
+          // 重置删除的文件列表
+          if (item.delValue !== undefined) {
+            item.delValue = defaultValues[`${item.key}_delValue`]
+              ? cloneDeep(defaultValues[`${item.key}_delValue`])
+              : []
+          }
+        }
+  
+        // 检查子项
+        if (item.children && Array.isArray(item.children)) {
+          for (let childIndex = 0; childIndex < item.children.length; childIndex++) {
+            const child = item.children[childIndex]
+            if (child.key) {
+              // 重置子项
+              if (defaultValues.hasOwnProperty(child.key)) {
+                child.value = cloneDeep(defaultValues[child.key])
+              } else {
+                if (Array.isArray(child.value)) {
+                  child.value = []
+                } else if (typeof child.value === 'number') {
+                  child.value = 0
+                } else if (typeof child.value === 'boolean') {
+                  child.value = false
+                } else {
+                  child.value = ''
+                }
+              }
+  
+              // 重置子项删除的文件列表
+              if (child.delValue !== undefined) {
+                child.delValue = defaultValues[`${child.key}_delValue`]
+                  ? cloneDeep(defaultValues[`${child.key}_delValue`])
+                  : []
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  /**
+   * 批量设置表单值
+   * @param targetRows 要设置的rows数据
+   * @param values 值对象，key为字段key，value为要设置的值
+   */
+  function setFormValues(targetRows: any[], values: Record<string, any> = {}) {
+    for (let rowIndex = 0; rowIndex < targetRows.length; rowIndex++) {
+      const row = targetRows[rowIndex]
+      for (let colIndex = 0; colIndex < row.length; colIndex++) {
+        const item = row[colIndex]
+        if (item.key && values.hasOwnProperty(item.key)) {
+          item.value = cloneDeep(values[item.key])
+        }
+  
+        // 检查子项
+        if (item.children && Array.isArray(item.children)) {
+          for (let childIndex = 0; childIndex < item.children.length; childIndex++) {
+            const child = item.children[childIndex]
+            if (child.key && values.hasOwnProperty(child.key)) {
+              child.value = cloneDeep(values[child.key])
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  /**
+   * 重置所有表单到默认值（新的重置方法）
+   * @param customDefaults 自定义默认值
+   */
+  function resetAllFormsToDefaults(customDefaults: Record<string, any> = {}) {
+    // 重置第一个表单
+    resetFormToDefaults(state.rows, customDefaults)
+  
+    // 重置第二个表单
+    resetFormToDefaults(state.rows2, customDefaults)
+  
+    // 重置第三个表单
+    resetFormToDefaults(state.rows3, customDefaults)
+  
+    // 重置表单验证状态
+    formRef.value?.clearValidate?.()
+  
+    // 清空结果显示
+    state.formData = {}
+  
+    ElMessage.success('表单重置到默认值成功')
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .demo-container {
+    padding: 20px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  
+  .control-panel {
+    background: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  
+    h3 {
+      margin: 0 0 20px 0;
+      color: #333;
+    }
+  
+    h4 {
+      margin: 15px 0 10px 0;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+  
+  .config-section,
+  .upload-section,
+  .action-section {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e0e0e0;
+  
+    .config-select {
+      width: 300px;
+      margin-right: 10px;
+    }
+  
+    input[type='file'] {
+      margin-right: 10px;
+    }
+  
+    .el-button {
+      margin-right: 10px;
+      margin-bottom: 5px;
+    }
+  }
+  
+  .form-container {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+    margin-bottom: 20px;
+  }
+  
+  .empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+  }
+  
+  .data-card {
+    margin-top: 20px;
+  
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  
+    .form-data-display {
+      background-color: #f5f7fa;
+      padding: 15px;
+      border-radius: 4px;
+      font-size: 12px;
+      line-height: 1.5;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .config-select {
+      width: 100% !important;
+      margin-bottom: 10px;
+    }
+  
+    .el-button {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+  </style>
+  

package/dist/ComponentDemo/ImageDemo.vue

@@ -0,0 +1,27 @@
+<template>
+	<NsImage :src="src" :apiUrl="apiUrl" :hasPreview="hasPreview">
+    <img
+      :src="ThemeVar.VARS.getPropertyValue('--matrix-empty-img')"
+      style="width: 100%; height: 100%"
+      @click.stop
+    />
+  </NsImage>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { ThemeVar } from '../../packages/utils/loadCssVars'
+const src = ref('')
+const hasPreview = ref(true)
+const apiUrl = reactive( {
+    type: Object,
+    default: ()=>({
+      method: 'get',
+      url: '/tool/file/getFileDetail',
+      paramkey: 'fileIds',
+      params: {},
+    }),
+  })
+</script>
+<style lang="scss" scoped>
+</style>

package/dist/ComponentDemo/MDDemo.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="dm">
+      <NsMD class="dm-ui" :msg="msg"></NsMD>
+    </div>
+</template>
+<script setup lang="ts" name="">
+import { ref } from 'vue';
+
+const msg = ref('好的，我可以为您写一个项目需求文档的模板。由于知识库为空，我将基于通用项目管理知识和最佳实践来构建此文档。请注意，这只是一个模板，您需要根据您的具体项目进行调整和完善。\n\n---\n\n## 项目需求文档\n\n**项目名称：** [在此处填写项目名称]\n\n**版本：** 1.0\n\n**日期：** 2023年10月27日\n\n**作者：** [您的姓名/团队名称]\n\n### 1. 引言\n\n**1.1 目的**\n\n本文档旨在详细描述[项目名称]的项目需求，为项目的规划、设计、开发、测试和部署提供明确的指导和依据。\n\n**1.2 范围**\n\n本文档涵盖项目的目标、功能、性能、用户界面、安全、约束条件以及验收标准。\n\n**1.3 目标读者**\n\n*   项目经理\n*   开发团队\n*   测试团队\n*   业务分析师\n*   利益相关者\n\n### 2. 项目背景\n\n**2.1 背景描述**\n\n[详细描述项目产生的背景，以及项目解决的问题或满足的需求。]\n\n**2.2 现有系统/流程描述**\n\n[如果项目涉及替换或改进现有系统/流程，请详细描述现有系统/流程的情况。]\n\n### 3. 项目目标\n\n**3.1 业务目标**\n\n[描述项目对业务的影响，例如提高效率、降低成本、增加收入等。]\n\n**3.2 用户目标**\n\n[描述用户通过使用项目后可以获得什么价值。]\n\n### 4. 功能需求\n\n| ID | 功能描述 | 优先级 | 备注 |\n|---|---|---|---|\n| 1 | [功能描述1] | 高 | [相关信息] |\n| 2 | [功能描述2] | 中 | [相关信息] |\n| 3 | [功能描述3] | 低 | [相关信息] |\n| ... | ... | ... | ... |\n\n*   **优先级：** 高 (必须实现)、中 (重要但可推迟)、低 (可选功能)\n\n### 5. 非功能需求\n\n**5.1 性能需求**\n\n*   响应时间：[例如：页面加载时间不超过3秒]\n*   并发用户数：[例如：支持1000个并发用户]\n*   数据存储容量：[例如：需要存储1TB的数据]\n\n**5.2 安全需求**\n\n*   用户认证：[例如：采用用户名/密码认证、OAuth认证]\n*   数据加密：[例如：采用SSL/TLS加密传输数据]\n*   权限控制：[例如：不同用户具有不同的权限]\n\n**5.3 可用性需求**\n\n*   系统可用时间：[例如：99.9%可用性]\n*   故障恢复：[例如：数据备份和恢复机制]\n\n**5.4 可靠性需求**\n\n*   错误率：[例如：系统错误率低于0.1%]\n\n**5.5 可维护性需求**\n\n*   代码可读性：[例如：代码规范、注释]\n*   模块化设计：[例如：采用模块化架构]\n\n**5.6 可扩展性需求**\n\n*   系统架构：[例如：支持水平扩展]\n\n### 6. 用户界面 (UI) 需求\n\n*   界面风格：[例如：简洁、现代]\n*   布局：[例如：响应式布局]\n*   主要页面：[例如：首页、登录页面、功能页面]\n*   [可包含UI原型图或线框图]\n\n### 7. 约束条件\n\n*   技术限制：[例如：使用的技术栈]\n*   预算限制：[例如：项目预算]\n*   时间限制：[例如：项目截止日期]\n*   资源限制：[例如：人力资源]\n\n### 8. 验收标准\n\n*   功能测试：所有功能模块必须通过测试。\n*   性能测试：系统必须满足性能需求。\n*   安全测试：系统必须通过安全测试。\n*   用户验收测试：用户必须对系统感到满意。\n\n### 9. 风险评估\n\n| 风险描述 | 可能性 | 影响 | 缓解措施 |\n|---|---|---|---|\n| [风险1] | 高 | 高 | [缓解措施1] |\n| [风险2] | 中 | 中 | [缓解措施2] |\n| ... | ... | ... | ... |\n\n### 10. 术语表\n\n*   [术语1：定义]\n*   [术语2：定义]\n*   ...\n\n---\n\n请注意，这是一个通用模板。您需要根据您的具体项目需求进行修改和完善。  由于**知识库中未找到您要的答案！**，我无法根据任何特定信息为您定制文档。 如果您能提供更详细的项目信息，我可以更好地帮助您')
+</script>
+<style lang="scss" scoped>
+.dm {
+  width: 100%;
+  height: 100%;
+  .dm-ui {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>