matrix_components 2.0.300 → 2.0.302

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix_components",
-  "version": "2.0.300",
+  "version": "2.0.302",
   "private": false,
   "type": "module",
   "files": [
@@ -22,7 +22,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "vite build",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
@@ -36,6 +36,8 @@
   },
   "dependencies": {
     "docx-preview": "^0.3.6",
+    "konva": "^10.0.2",
+    "vue-konva": "^3.2.6",
     "vue3-pdf-app": "^1.0.3",
     "x-data-spreadsheet": "^1.1.9",
     "xlsx": "^0.18.5"
@@ -66,6 +68,7 @@
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@types/vue": "^2.0.0",
+    "@vue/test-utils": "^2.4.6",
     "axios": "^1.9.0",
     "element-plus": "^2.10.5",
     "jsdom": "^27.0.0",
@@ -75,7 +78,6 @@
     "sm-crypto": "^0.3.13",
     "vitest": "^3.2.4",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "@vue/test-utils": "^2.4.6"
+    "vue-router": "^4.5.0"
   }
 }

package/dist/ComponentDemo/DialogDemo.vue

@@ -1,208 +0,0 @@
-<template>
-  <div>
-    <el-button type="warning" @click="openDialog({ params: { test: '222' } })">弹出框组件</el-button>
-    <el-button type="primary" @click="updateDialogOption">更新弹窗选项</el-button>
-    <el-button type="success" @click="callDialogMethod">调用弹窗方法</el-button>
-    <!-- 为每个打开的弹窗生成一个关闭按钮 -->
-    <div v-for="(instance, index) in dialogInstances" :key="instance.id" style="margin-top: 10px;">
-      <el-button type="danger" @click="closeDialog(instance)">关闭弹窗 {{ index + 1 }}</el-button>
-    </div>
-
-    <!-- 全部关闭按钮 -->
-    <el-button v-if="dialogInstances.length > 0" type="danger" @click="closeAllDialogs" style="margin-top: 10px;">关闭所有弹窗</el-button>
-  </div>
-</template>
-<script setup lang="ts">
-import VideoDemo from '@/views/VideoDemo.vue'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-// 扩展Window接口
-declare global {
-  interface Window {
-    __dialogInstances: any[];
-    NsDialog: any;
-  }
-}
-
-// 保存当前打开的弹窗实例数组
-const dialogInstances = ref<any[]>([])
-const openIndex = ref(0);
-function openDialog(data = {}) {
-  openIndex.value++;
-  if(dialogInstances.value.length === 0) {
-    openIndex.value = 0;
-  }
-  window.NsDialog(
-    {
-      class: 'xxx',
-      title: '测试',
-      // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
-      dom: VideoDemo, // 也可以通过异步方式：import("@/views/VideoDemo.vue") 和 () => import("@/views/VideoDemo.vue")
-      domCompleted: (domRef: any)=>{
-        // dom加载完成或触发函数，domRef为dom实例可以执行defineExpose暴露出的函数
-        console.log('组件加载完成，domRef:', domRef)
-        domRef?.xxx?.()
-      },
-      option: {
-        // dom对应的自定义组件props属性
-        ...data,
-      },
-      events: {
-        // dom组件内部自定义事件emit('btnClick', xxx)
-        btnClick: () => {
-          console.log('点击中间区域内容')
-        },
-      },
-      width: '800px', // 宽度, 整个弹出框的高度，非内容高度
-      height: '450px', // 高度, 不配置则默认为内容高度
-      dialogPadding: [10, 20], // 弹窗内padding
-      // 弹窗绝对定位
-      x: 250 + openIndex.value * 20,
-      y: 100 + openIndex.value * 20,
-      // 设置函数时，则有放大和还原按钮，且按返回的对象设置弹出框。（会关闭拖动功能）
-      // maxSize: function () {
-      //   return { width: '100%', height: '800px', x: 0, y: 100 }
-      // },
-      modal: false, // 模态框
-      modalColor: 'rgb(0 21 115 / 20%)', // 遮罩层颜色
-      showFooter: true, // 默认显示底部按钮
-      immediately: false, // true立即取消弹出框, false异步请求后取消弹出框，默认false
-      draggable: true, // 是否可拖拽，默认false
-      // 底部确认按钮回调事件
-      confirm: async (closeFn: any, componentRef: any, footerLoading: any) => {
-        // 2.componentRef可以调用内部函数，前提需要defineExpose
-        try {
-          const selectRows = componentRef?.value?.getSelectedRows()
-          console.log('点击确认，选择数据：', selectRows)
-        } catch (e) {
-          console.log(e)
-          await new Promise((resolve) => setTimeout(resolve, 1000))
-        }
-        // 3.footerLoading可以控制底部loading状态
-        if (footerLoading) {
-          footerLoading.value = false
-        }
-        // 1.请求数据，再关闭
-        if (closeFn) {
-          closeFn()
-        }
-      },
-      close: () => {
-        // 关闭弹出时立即出发
-        console.log('点击关闭')
-        // 更新dialogInstances数组
-        updateDialogInstances()
-      },
-      closed: () => {
-        // 弹窗销毁时触发
-        console.log('完成关闭')
-        // 更新dialogInstances数组
-        updateDialogInstances()
-      },
-      // 头部+底部自定义配置
-      /*
-      // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
-      headerDom: xxx,
-      headerOption: {},
-      headerEvents: {},
-      // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
-      footerDom: yyy,
-      footerOption: {},
-      footerEvents: {},
-      // 底部按钮名称
-      footerTitle: {
-        close: "取消",
-        confirm: "确定",
-      },
-      */
-    },
-    true,
-    '#app',
-  ) // true为是否遮罩（非必填）， '#app'为挂载点（非必填）
-
-  // 更新dialogInstances数组
-  updateDialogInstances()
-
-  setTimeout(()=>{
-    const data = window.__dialogInstances;
-    console.log('当前所有弹窗实例:', data)
-  }, 333)
-}
-
-// 更新dialogInstances数组
-function updateDialogInstances() {
-  // 使用setTimeout确保在DOM更新后执行
-  setTimeout(() => {
-    dialogInstances.value = [...window.__dialogInstances]
-  }, 0)
-}
-
-// 更新弹窗选项
-function updateDialogOption() {
-  if (dialogInstances.value.length > 0) {
-    // 更新最后一个弹窗的选项
-    const lastInstance = dialogInstances.value[dialogInstances.value.length - 1]
-    lastInstance.updateOption({
-      params: { test: 'updated_' + Date.now() }
-    })
-    console.log('已更新弹窗选项')
-  } else {
-    console.warn('没有打开的弹窗实例')
-  }
-}
-
-// 调用弹窗内组件的方法
-function callDialogMethod() {
-  if (dialogInstances.value.length > 0) {
-    // 调用最后一个弹窗内组件的方法
-    const lastInstance = dialogInstances.value[dialogInstances.value.length - 1]
-    if (lastInstance.domRef) {
-      // 使用新的callMethod方法调用组件方法
-      // 注意：这里需要组件内部通过defineExpose暴露方法
-      lastInstance.callMethod('defineExpose暴露的方法名', 'arg1', 'arg2')
-      console.log('已调用弹窗内组件方法')
-    } else {
-      console.warn('组件引用不存在')
-    }
-  } else {
-    console.warn('没有打开的弹窗实例')
-  }
-}
-
-// 关闭指定弹窗
-async function closeDialog(instance: any) {
-  if (instance) {
-    // 使用新的close方法关闭弹窗
-    await instance.close()
-    console.log('已关闭指定弹窗')
-  } else {
-    console.warn('弹窗实例不存在')
-  }
-}
-
-// 关闭所有弹窗
-function closeAllDialogs() {
-  // 关闭所有弹窗
-  dialogInstances.value.forEach(instance => {
-    instance.close()
-  })
-  openIndex.value = 0;
-  console.log('已关闭所有弹窗')
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    openDialog({ params: { test: '1' } })
-  }, 300)
-
-  // 初始化dialogInstances数组
-  updateDialogInstances()
-})
-
-onUnmounted(()=>{
-  window.__dialogInstances.forEach(item=>{
-    item.close()
-  })
-})
-</script>
-<style scoped></style>

package/dist/ComponentDemo/ExcelDemo.vue

@@ -1,263 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="control-panel">
-      <h3>Excel 预览演示</h3>
-
-      <!-- 文件上传方式 -->
-      <div class="upload-section">
-        <h4>方式一：文件上传</h4>
-        <el-form-item label="弹框模式:">
-          <el-switch v-model="isShowDialog" @change="hideExcelHandler" />
-        </el-form-item>
-        <input
-          type="file"
-          @change="importExcel(($event.target as any)?.files?.[0])"
-          accept=".xls,.xlsx"
-        />
-        <button @click="clearFile" :disabled="!file">清除文件</button>
-      </div>
-
-      <!-- URL方式 -->
-      <div class="url-section">
-        <h4>方式二：URL地址</h4>
-        <input
-          v-model="excelUrl"
-          type="text"
-          placeholder="请输入Excel文件的URL地址"
-          class="url-input"
-        />
-        <button @click="loadFromUrl" :disabled="!excelUrl.trim()">加载URL</button>
-        <button @click="clearUrl" :disabled="!excelUrl">清除URL</button>
-      </div>
-      <button @click="exportExcel" class="export-btn">导出数据</button>
-    </div>
-
-    <!-- Excel组件 -->
-    <div class="excel-container">
-      <NsExcel
-        v-if="counts"
-        class="excel"
-        :file="file"
-        :isShowDialog="isShowDialog"
-        dialogWidth="1200px"
-        dialogHeight="700px"
-        ref="excelRef"
-        exportType="2"
-        @dialogExport="dialogExport"
-      ></NsExcel>
-    </div>
-    <!-- 导出数据展示 -->
-    <div class="data-display">
-      <div class="data-section">
-        <h4>导出数据格式1 (原始格式)</h4>
-        <pre>{{ data1 }}</pre>
-      </div>
-      <div class="data-section">
-        <h4>导出数据格式2 (Excel格式)</h4>
-        <pre>{{ data2 }}</pre>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
-
-const counts = ref(true)
-const isShowDialog = ref(false)
-const file = ref()
-const excelRef = ref()
-const data1 = ref()
-const data2 = ref()
-const excelUrl = ref(
-  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
-)
-
-function hideExcelHandler(val: boolean) {
-  counts.value = false
-  nextTick(() => {
-    counts.value = true
-    isShowDialog.value = val
-  })
-}
-
-function importExcel(f: any) {
-  // 清除URL，使用文件上传
-  excelUrl.value = ''
-  file.value = f
-}
-
-function loadFromUrl() {
-  if (excelUrl.value.trim()) {
-    // 清除文件，使用URL
-    file.value = excelUrl.value.trim()
-  }
-}
-
-function clearFile() {
-  file.value = null
-  data1.value = null
-  data2.value = null
-}
-
-function clearUrl() {
-  excelUrl.value = ''
-  data1.value = null
-  data2.value = null
-}
-
-function dialogExport(data: any) {
-  console.warn(`excel导出数据：${data}`)
-}
-
-function exportExcel() {
-  if (excelRef.value) {
-    data1.value = excelRef.value.exportExcel(1)
-    data2.value = excelRef.value.exportExcel(2)
-  }
-}
-</script>
-<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,
-.example-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;
-    }
-  }
-}
-
-.export-btn {
-  padding: 10px 20px;
-  background: #67c23a;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: bold;
-
-  &:hover {
-    background: #5daf34;
-  }
-}
-
-.excel {
-  width: 100%;
-  height: 500px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-
-.data-display {
-  display: flex;
-  gap: 20px;
-  margin-top: 20px;
-
-  .data-section {
-    flex: 1;
-    background: #f9f9f9;
-    border-radius: 8px;
-    padding: 15px;
-
-    h4 {
-      margin: 0 0 10px 0;
-      color: #333;
-      font-size: 14px;
-    }
-
-    pre {
-      background: white;
-      padding: 15px;
-      border-radius: 4px;
-      border: 1px solid #e0e0e0;
-      max-height: 300px;
-      overflow: auto;
-      font-size: 12px;
-      line-height: 1.4;
-      margin: 0;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-  }
-}
-
-.excel-container {
-  height: 300px;
-}
-
-@media (max-width: 768px) {
-  .data-display {
-    flex-direction: column;
-  }
-
-  .url-input {
-    width: 100% !important;
-    margin-bottom: 10px;
-  }
-}
-</style>

package/dist/ComponentDemo/OfficeDemo.vue

@@ -1,189 +0,0 @@
-<template>
-  <div class="office-demo">
-    <h2>NsOffice 组件演示</h2>
-
-    <div class="demo-controls">
-      <!-- 文件上传方式 -->
-      <div class="upload-section">
-        <h3>方式一：文件上传</h3>
-        <input
-          type="file"
-          @change="importFile(($event.target as any)?.files?.[0])"
-          accept=".docx,.xlsx,.xls,.pdf"
-        />
-        <el-button @click="clearFile" :disabled="!file">清除文件</el-button>
-      </div>
-
-      <!-- URL方式 -->
-      <el-form :model="form" label-width="120px" inline>
-        <el-form-item label="文件URL:">
-          <el-input v-model="form.url" placeholder="请输入文件URL" style="width: 400px" />
-        </el-form-item>
-
-        <el-form-item label="Excel编辑模式:">
-          <el-switch v-model="form.isEdit" />
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="loadFile">加载文件</el-button>
-          <el-button @click="clearUrl">清空</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <div class="demo-content">
-      <el-card v-if="currentUrl">
-        <template #header>
-          <div class="card-header">
-            <span>当前文件: {{ getFileName(currentUrl) }}</span>
-            <span class="file-type">类型: {{ getFileTypeDisplay() }}</span>
-          </div>
-        </template>
-
-        <div class="office-container">
-          <NsOffice v-bind="form" ref="officeRef" />
-        </div>
-      </el-card>
-
-      <el-empty v-else description="请输入文件URL或选择预设文件" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-const form = reactive({
-  url: '',
-  isEdit: false,
-  isShowDialog: false,
-  dialogWidth: '1200px',
-  dialogHeight: '700px',
-})
-
-const currentUrl = ref('')
-const officeRef = ref()
-const file = ref()
-
-// 文件上传处理
-function importFile(f: any) {
-  // 清除URL，使用文件上传
-  form.url = ''
-  file.value = f
-
-  if (f && (f.name.endsWith('.docx') || f.name.endsWith('.xlsx') || f.name.endsWith('.xls') || f.name.endsWith('.pdf'))) {
-    // 创建文件URL
-    const fileUrl = URL.createObjectURL(f)
-    currentUrl.value = fileUrl
-    form.url = fileUrl
-  } else if (f) {
-    alert('请选择支持的文件格式（.docx, .xlsx, .xls, .pdf）')
-    clearFile()
-  }
-}
-
-const loadFile = () => {
-  if (form.url.trim()) {
-    currentUrl.value = form.url.trim()
-  }
-}
-
-const clearFile = () => {
-  file.value = null
-  if (currentUrl.value.startsWith('blob:')) {
-    URL.revokeObjectURL(currentUrl.value)
-  }
-  currentUrl.value = ''
-  form.url = ''
-}
-
-const clearUrl = () => {
-  form.url = ''
-  currentUrl.value = ''
-}
-
-const getFileName = (url: string) => {
-  if (!url) return ''
-  const parts = url.split('/')
-  return parts[parts.length - 1]
-}
-
-const getFileTypeDisplay = () => {
-  if (officeRef.value) {
-    const fileType = officeRef.value.getFileType()
-    switch (fileType) {
-      case 'excel':
-        return 'Excel文档'
-      case 'pdf':
-        return 'PDF文档'
-      case 'word':
-        return 'Word文档'
-      case 'unsupported':
-        return '不支持的格式'
-      default:
-        return '未知'
-    }
-  }
-  return '未知'
-}
-</script>
-
-<style scoped>
-.office-demo {
-  padding: 20px;
-}
-
-.demo-controls {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #f5f5f5;
-  border-radius: 8px;
-}
-
-.upload-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-}
-
-.upload-section h3 {
-  margin: 0 0 10px 0;
-  color: #666;
-  font-size: 14px;
-}
-
-.upload-section input[type='file'] {
-  margin-right: 10px;
-}
-
-.preset-files {
-  margin-top: 20px;
-}
-
-.preset-files h3 {
-  margin-bottom: 10px;
-  color: #666;
-}
-
-.demo-content {
-  min-height: 700px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.file-type {
-  color: #409eff;
-  font-size: 14px;
-}
-
-.office-container {
-  height: 600px;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-}
-</style>