matrix_components 2.0.478 → 2.0.501

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/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

@@ -1,20 +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 { 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 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>