matrix_components 2.0.500 → 2.0.501

package/dist/ComponentDemo/FormDemo.vue

@@ -66,20 +66,6 @@
             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>
@@ -129,7 +115,6 @@ const row1Ref = ref()
 const row2Ref = ref()
 const row3Ref = ref()
 const row4Ref = ref()
-const row5Ref = ref()
 
 const state = reactive({
   formData: {},
@@ -496,104 +481,6 @@ 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) {
@@ -640,8 +527,7 @@ async function getFormData() {
   const data2 = row2Ref.value?.getFormKvData?.()
   const data3 = row3Ref.value?.getFormKvData?.()
   const data4 = row4Ref.value?.getFormKvData?.()
-  const data5 = row5Ref.value?.getFormKvData?.()
-  const data = { ...data1, ...data2, ...data3, ...data4, ...data5 }
+  const data = { ...data1, ...data2, ...data3, ...data4 }
   state.formData = data
   ElMessage.success('表单校验成功')
   return data
@@ -656,7 +542,6 @@ async function resetFormData() {
   row2Ref.value?.resetForm?.()
   row3Ref.value?.resetForm?.()
   row4Ref.value?.resetForm?.()
-  row5Ref.value?.resetForm?.()
   setTimeout(() => {
     // 重置表单验证状态
     formRef.value?.clearValidate?.()
@@ -687,13 +572,11 @@ 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/MDDemo.vue

@@ -1,25 +1,252 @@
 <template>
-    <div class="dm">
-      <NsMD class="dm-ui" :msg="msg"></NsMD>
+  <div class="demo-container">
+    <div class="control-panel">
+      <h3>Markdown 文档预览演示</h3>
+
+      <!-- 文件上传方式 -->
+      <div class="upload-section">
+        <h4>方式一：文件上传</h4>
+        <input
+          type="file"
+          @change="importMd(($event.target as any)?.files?.[0])"
+          accept=".md,.markdown"
+        />
+        <button @click="clearFile" :disabled="!file">清除文件</button>
+      </div>
+
+      <!-- URL方式 -->
+      <div class="url-section">
+        <h4>方式二：URL地址</h4>
+        <input
+          v-model="mdUrl"
+          type="text"
+          placeholder="请输入Markdown文档的URL地址"
+          class="url-input"
+        />
+        <button @click="loadFromUrl" :disabled="!mdUrl.trim()">加载URL</button>
+        <button @click="clearUrl" :disabled="!mdUrl">清除URL</button>
+      </div>
+
+      <!-- 模式切换 -->
+      <div class="mode-section">
+        <h4>显示模式</h4>
+        <button 
+          @click="toggleMode" 
+          :class="['mode-btn', { active: mode === 'dark' }]"
+        >
+          {{ mode === 'light' ? '切换到深色模式' : '切换到浅色模式' }}
+        </button>
+      </div>
     </div>
+
+    <!-- Markdown组件 -->
+    <div class="md-container">
+      <NsMD
+        v-if="showComponent"
+        :content="currentContent"
+        :mode="mode"
+      />
+    </div>
+  </div>
 </template>
-<script setup lang="ts" name="">
-import { onMounted, ref } from 'vue';
-const msg = ref()
-
-onMounted(async () => {
-  const readme = await fetch(`${import.meta.env.VITE_BASE_URL}README.md`)
-  const txt = await readme.text();
-  msg.value = txt
-})
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+const showComponent = ref(true)
+const file = ref()
+const mdUrl = ref(
+  'https://raw.githubusercontent.com/microsoft/vscode/main/README.md',
+)
+const currentContent = ref('')
+const mode = ref<'light' | 'dark'>('light')
+
+async function importMd(f: any) {
+  // 清除URL，使用文件上传
+  mdUrl.value = ''
+  file.value = f
+
+  if (f && (f.name.endsWith('.md') || f.name.endsWith('.markdown'))) {
+    try {
+      // 读取文件内容
+      const text = await f.text()
+      currentContent.value = text
+      reloadComponent()
+    } catch (error) {
+      console.error('读取文件失败:', error)
+      alert('读取文件失败，请重试')
+      clearFile()
+    }
+  } else if (f) {
+    alert('请选择Markdown文件(.md或.markdown)')
+    clearFile()
+  }
+}
+
+async function loadFromUrl() {
+  if (mdUrl.value.trim()) {
+    // 清除文件，使用URL
+    clearFile()
+    try {
+      // 从URL获取Markdown内容
+      const response = await fetch(mdUrl.value.trim())
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const text = await response.text()
+      currentContent.value = text
+      reloadComponent()
+    } catch (error) {
+      console.error('加载URL失败:', error)
+      clearUrl()
+    }
+  }
+}
+
+function clearFile() {
+  file.value = null
+  currentContent.value = ''
+}
+
+function clearUrl() {
+  mdUrl.value = ''
+  currentContent.value = ''
+}
+
+function toggleMode() {
+  mode.value = mode.value === 'light' ? 'dark' : 'light'
+}
+
+// 重新加载组件
+function reloadComponent() {
+  showComponent.value = false
+  nextTick(() => {
+    showComponent.value = true
+  })
+}
+
+// 初始化时加载默认URL
+loadFromUrl()
 </script>
-<style lang="scss" scoped>
-.dm {
-  width: 100%;
-  height: 100%;
-  .dm-ui {
-    width: 100%;
-    height: 100%;
+
+<style scoped lang="scss">
+.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;
+  }
+}
+
+.upload-section,
+.url-section,
+.mode-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+
+  input[type='file'] {
+    margin-right: 10px;
+  }
+
+  .url-input {
+    width: 300px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #409eff;
+    }
+  }
+
+  button {
+    padding: 8px 16px;
+    background: #409eff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:hover:not(:disabled) {
+      background: #337ecc;
+    }
+
+    &:disabled {
+      background: #c0c4cc;
+      cursor: not-allowed;
+    }
+
+    &.mode-btn {
+      background: #666;
+
+      &:hover:not(:disabled) {
+        background: #555;
+      }
+
+      &.active {
+        background: #1890ff;
+
+        &:hover {
+          background: #096dd9;
+        }
+      }
+    }
+  }
+}
+
+.md-container {
+  min-height: 600px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 20px;
+  background: white;
+  overflow: auto;
+  margin-bottom: 20px;
+
+  // 深色模式样式
+  &:has(.markdown-view) {
+    transition: background-color 0.3s ease;
+  }
+}
+
+@media (max-width: 768px) {
+  .url-input {
+    width: 100% !important;
+    margin-bottom: 10px;
+  }
+  
+  .control-panel {
+    padding: 15px;
+  }
+  
+  .upload-section,
+  .url-section,
+  .mode-section {
+    padding: 10px;
   }
 }
 </style>

package/dist/ComponentDemo/ReadMe.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="dm">
+      <NsMD class="dm-ui" :msg="msg"></NsMD>
+    </div>
+</template>
+<script setup lang="ts" name="">
+import { onMounted, ref } from 'vue';
+const msg = ref()
+
+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 {
+  width: 100%;
+  height: 100%;
+  .dm-ui {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>