matrix_components 2.0.478 → 2.0.500

package/README.md

@@ -33,6 +33,13 @@ Matrix Components 是一个功能丰富的 Vue 3 企业级组件库，提供办
 ### 浸润线: 
 ![emh1eWluZw==](https://tc-cdn.processon.com/po/605c2da663768970077b1422-695db6d88dbb075444370b13)
 
+```
+version:2.0.500
+2026-01-23
+更新日志：
+1.修改NsSaturationLine文字字体
+```
+
 ```
 version:2.0.478
 2026-01-13

package/dist/ComponentDemo/FormDemo.vue

@@ -66,6 +66,20 @@
             gapV="10px"
           ></NsForm>
         </NsFormTitle>
+        <NsFormTitle title="一维数组配置（新功能）">
+          <NsForm
+            ref="row5Ref"
+            :readOnly="state.readOnly"
+            backgroundColor="#fff"
+            :model="state.model"
+            :rows="state.rows5"
+            formPropKey="rows5"
+            labelColor="#606266"
+            labelWidth="150"
+            gapH="300px"
+            gapV="10px"
+          ></NsForm>
+        </NsFormTitle>
       </el-form>
     </div>
   </div>
@@ -115,6 +129,7 @@ const row1Ref = ref()
 const row2Ref = ref()
 const row3Ref = ref()
 const row4Ref = ref()
+const row5Ref = ref()
 
 const state = reactive({
   formData: {},
@@ -481,6 +496,104 @@ const state = reactive({
       },
     ],
   ],
+  // 一维数组配置示例 - 使用span属性控制布局，支持自动换行
+  // 说明：当一行中的span总和达到24时，会自动换到下一行
+  // 第一行：field1(6) + field2(6) + field3(6) + field4(6) = 24（满行）
+  // 第二行：field5(12) + field6(12) = 24（满行）
+  // 第三行：field7(8) + field8(8) + field9(8) = 24（满行）
+  // 第四行：field10(40%≈10) + field11(60%≈14) = 24（满行）
+  // 第五行：field12和field13未配置span，自动平分剩余空间
+  rows5: [
+    {
+      key: 'field1',
+      label: '字段1（25%）',
+      value: '',
+      component: 'ElInput',
+      span: 6,
+    },
+    {
+      key: 'field2',
+      label: '字段2（25%）',
+      value: '',
+      component: 'ElInput',
+      span: 6,
+    },
+    {
+      key: 'field3',
+      label: '字段3（25%）',
+      value: '',
+      component: 'ElInput',
+      span: 6,
+    },
+    {
+      key: 'field4',
+      label: '字段4（25%）',
+      value: '',
+      component: 'ElInput',
+      span: 6,
+    },
+    {
+      key: 'field5',
+      label: '字段5（50%）',
+      value: '',
+      component: 'ElInput',
+      span: 12,
+    },
+    {
+      key: 'field6',
+      label: '字段6（50%）',
+      value: '',
+      component: 'ElInput',
+      span: 12,
+    },
+    {
+      key: 'field7',
+      label: '字段7（33.33%）',
+      value: '',
+      component: 'ElInput',
+      span: 8,
+    },
+    {
+      key: 'field8',
+      label: '字段8（33.33%）',
+      value: '',
+      component: 'ElInput',
+      span: 8,
+    },
+    {
+      key: 'field9',
+      label: '字段9（33.33%）',
+      value: '',
+      component: 'ElInput',
+      span: 8,
+    },
+    {
+      key: 'field10',
+      label: '字段10（使用百分比40%）',
+      value: '',
+      component: 'ElInput',
+      span: '40%',
+    },
+    {
+      key: 'field11',
+      label: '字段11（使用百分比60%）',
+      value: '',
+      component: 'ElInput',
+      span: '60%',
+    },
+    {
+      key: 'field12',
+      label: '字段12（自动平分）',
+      value: '',
+      component: 'ElInput',
+    },
+    {
+      key: 'field13',
+      label: '字段13（自动平分）',
+      value: '',
+      component: 'ElInput',
+    },
+  ],
 })
 
 function changeHandler(v) {
@@ -527,7 +640,8 @@ async function getFormData() {
   const data2 = row2Ref.value?.getFormKvData?.()
   const data3 = row3Ref.value?.getFormKvData?.()
   const data4 = row4Ref.value?.getFormKvData?.()
-  const data = { ...data1, ...data2, ...data3, ...data4 }
+  const data5 = row5Ref.value?.getFormKvData?.()
+  const data = { ...data1, ...data2, ...data3, ...data4, ...data5 }
   state.formData = data
   ElMessage.success('表单校验成功')
   return data
@@ -542,6 +656,7 @@ async function resetFormData() {
   row2Ref.value?.resetForm?.()
   row3Ref.value?.resetForm?.()
   row4Ref.value?.resetForm?.()
+  row5Ref.value?.resetForm?.()
   setTimeout(() => {
     // 重置表单验证状态
     formRef.value?.clearValidate?.()
@@ -572,11 +687,13 @@ async function getDetail() {
     row2Ref.value?.resetForm()
     row3Ref.value?.resetForm()
     row4Ref.value?.resetForm()
+    row5Ref.value?.resetForm()
     setTimeout(() => {
       row1Ref.value?.setFormData?.(res)
       row2Ref.value?.setFormData?.(res)
       row3Ref.value?.setFormData?.(res)
       row4Ref.value?.setFormData?.(res)
+      row5Ref.value?.setFormData?.(res)
     }, 10)
     return
     // 特殊处理

package/dist/ComponentDemo/ImageDemo.vue

@@ -1,7 +1,7 @@
 <template>
 	<NsImage :src="src" :apiUrl="apiUrl" :hasPreview="hasPreview">
     <img
-      :src="ThemeVar.VARS.getPropertyValue('--matrix-empty-img')"
+      :src="errorSrc"
       style="width: 100%; height: 100%"
       @click.stop
     />
@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { ThemeVar } from '../../packages/utils/loadCssVars'
-const src = ref('')
+import src from '@/assets/b.jpg'
+import errorSrc from '@/assets/a.png'
 const hasPreview = ref(true)
 const apiUrl = reactive( {
     type: Object,
@@ -22,6 +22,7 @@ const apiUrl = reactive( {
       params: {},
     }),
   })
+
 </script>
 <style lang="scss" scoped>
 </style>

package/dist/ComponentDemo/MDDemo.vue

@@ -4,9 +4,14 @@
     </div>
 </template>
 <script setup lang="ts" name="">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+const msg = ref()
 
-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请注意，这是一个通用模板。您需要根据您的具体项目需求进行修改和完善。  由于**知识库中未找到您要的答案！**，我无法根据任何特定信息为您定制文档。 如果您能提供更详细的项目信息，我可以更好地帮助您')
+onMounted(async () => {
+  const readme = await fetch(`${import.meta.env.VITE_BASE_URL}README.md`)
+  const txt = await readme.text();
+  msg.value = txt
+})
 </script>
 <style lang="scss" scoped>
 .dm {