matrix_components 2.0.300

package/README.md

@@ -0,0 +1,438 @@
+# **组件库2.0**
+```
+version:2.0.300
+2025年10月9日14:58:45
+更新日志：
+1.支持输入框自定义正则： v-length.regex="{ maxLength: 100, pattern: /^[a-zA-Z0-9]*$/ }"
+```
+
+```
+version:2.0.299
+2025年9月29日18:59:38
+更新日志：
+1.NsDialog弹出框支持返回dom动态组件Ref
+2.绑定window.__dialogInstances, 保存所有弹出框实例
+```
+
+```
+version:2.0.298
+2025年9月24日17:03:10
+更新日志：
+1.NsOffice样式修改
+```
+
+```
+version:2.0.297
+2025年9月19日16:54:21
+更新日志：
+1.添加NsDialog支持允许穿透, modal:false即可穿透
+```
+
+```
+version:2.0.296
+2025年9月18日13:21:31
+更新日志：
+1.优化NsExcel非弹窗模式切换file时重新加载
+2.增加NsOffice组件
+```
+
+```
+version:2.0.295
+2025年9月18日09:56:34
+更新日志：
+1.NsVideo没有树结构时，样式修改
+```
+
+```
+version:2.0.294
+2025年9月15日15:50:49
+更新日志：
+1.NsDialog弹出框支持x/y定位和放大还原功能
+```
+
+```
+version:2.0.293
+2025年9月15日15:50:49
+更新日志：
+1.NsWord预览组件
+2.修改NsExcel，支持url和上传文件方式预览，新增只读模式
+```
+
+```
+version:2.0.292
+2025年8月13日10:30:59
+更新日志：
+1.NsPdf预览组件支持搜索功能
+```
+
+## 创建公共组件库步骤
+
+- npm create vue@latest
+- 主目录：创建packages（任意文件夹）, 创建全局导出文件index.ts
+
+  ```
+  主index.ts
+  import NsXX from './packages/NsXX/index.ts'
+  const components = { NsXX, 其他公共组件 }
+  const NsComponents = {
+    install: (app: App)=> {
+      Object.Keys(components).forEach((compName)=>{
+        app.component(compName, components[compName])
+      })
+    }
+  }
+  // 按需导出
+  export {
+    NsXX,
+    其他公共组件
+  }
+  // 全局导入
+  export default NsComponents
+  ```
+
+- 子目录：NsXX目录，创建独立导出index.ts
+
+  ```
+  子index.ts：
+  import NsXX from './comps/index.ts'
+  // 按需导出
+  NsXX.install = (app)=>{
+    app.component(NsXX.name, NsXX)
+  }
+  // 导出子组件
+  export default NsXX
+  ```
+
+- 配置package.json
+
+  ```
+  {
+    "name": "matrix_components", // 打包的名称
+    "version": "2.0.100", // 版本号
+    "private": false, // 是否私有
+    "type": "module",
+    "files": [
+      "dist"
+    ],
+    "main": "./dist/matrix_components.umd.cjs",
+    "module": "./dist/matrix_components.js",
+    "exports": {
+      "./dist/matrix_components.css": "./dist/matrix_components.css",
+      "./css": "./dist/matrix_components.css",
+      ".": {
+        "import": "./dist/matrix_components.js",
+        "require": "./dist/matrix_components.umd.cjs"
+      }
+    },
+    "publishConfig": {
+      "registry": "http://199.10.9.178:8081/repository/npm-hosted/"
+    },
+    ...
+  }
+  ```
+
+- 配置vite.config.ts
+
+  ```
+  build: {
+    outDir: "dist",
+    lib: {
+      // 指定入口主文件！！！！
+      entry: fileURLToPath(new URL("./pacakges/index.ts"), import.meta.url),
+      // 组件库导出后可以使用的全局变量
+      name: 'MatrixComponents',
+      // 不指定为package.json的name属性
+      fileName: 'matrix_components',
+    }，
+    rollupOptions: {
+      // 使用外部依赖（打包时删除的包，避免打入到组件库中）
+      external: ["vue"],
+      output: {
+        // 主index.ts导出多个module时需要指定"named"否则报警告，默认为"default"
+        exports: 'named',
+        // 配合external: ["vue"]， 使用外部项目的变量映射
+        globals: {
+           vue: 'Vue',
+        },
+      }
+    },
+    // 【可选】压缩方式，viet3+需安装pnpm i terser -D
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+      format: {
+        comments: false,
+      },
+    },
+  }
+  ```
+
+- 打包
+
+  ```
+   npm run build
+  ```
+
+- 当前项目main.ts使用
+
+  ```
+  import NsComponents from '../dist/matrix_components.js'
+  // 按需引入
+  // import {NsXX} from '../dist/matrix_components,js'
+  ...
+  app.use(NsComponents)
+  // 按需引入
+  // app.use(NsXX)
+
+  ```
+
+- 当前项目Test.vue使用
+
+  ```
+  <template>
+    <NsXX />
+  </template>
+  ```
+
+## 使用公共组件库
+
+```
+  // 1. 引入组件库
+  pnpm i element-plus
+  pnpm i matrix_components -S --registry=http://199.10.9.178:8081/repository/npm-group/
+  // 安装失败：pnpm i matrix_components --registry=http://199.10.9.178:8081/repository/npm-hosted/
+  
+  // 非初始化安装
+  pnpm i -S --registry=http://199.10.9.178:8081/repository/npm-group/
+
+  // 2. main.ts中引入
+  // 安装 Element-Plus
+  import 'element-plus/dist/index.css'
+  import ElementPlus from 'element-plus'
+  import zhCn from 'element-plus/es/locale/lang/zh-cn'
+  app.use(ElementPlus, {
+    locale: zhCn,
+  })
+  // 安装组件库(ts需要//@ts-ignore)
+  //@ts-ignore
+  import NsComponents from 'matrix_components'
+  import 'matrix_components/dist/matrix_components.css'
+  app.use(NsComponents)
+
+```
+
+### 1. 视频组件（NsVideo）
+
+```
+// 1. 复制播放器资源
+js文件夹 到 public/目录中
+cdn文件夹 到 public/目录中
+
+// 2. index.html中引入
+<script src="./js/EasyPlayer-pro.js"></script>
+<script src="./cdn/h5player/h5player.min.js"></script>
+
+// 3.安装公共组件库 (安装过则无需安装)
+//@ts-ignore
+import NsComponents from 'matrix_components'
+import 'matrix_components/dist/matrix_components.css'
+app.use(NsComponents)
+
+// 4. 项目组件中引入视频组件, NsVideo组件配置参考NsVideo目录ReadMe.md和VideoDemo.vue
+<template>
+    <NsVideo class="nsvideo" ref="nsVideoRef" v-bind="videoData" v-on="videoEvent" @changeSplit='changeSplitHandler'>
+      <!-- 自定义插槽
+      <template #video-tree><span>左侧树-自定义插槽</span></template>
+      <template #video-player-head><span>播放区域头部-自定义插槽</span></template>
+      <template #video-player-view><span>播放区域主体-自定义插槽</span></template>
+      <template #video-player-foot><span>播放区域底部控制按钮-自定义插槽</span></template>
+      -->
+    </NsVideo>
+</template>
+```
+
+### 2. 自适应函数（autoScaleInit）
+
+```
+// 1. 安装公共组件库 (安装过则无需安装)
+//@ts-ignore
+import NsComponents, { autoScaleInit } from 'matrix_components'
+import 'matrix_components/dist/matrix_components.css'
+app.use(NsComponents)
+
+// 2. 在main.t中初始化，建议在App创建之前
+autoScaleInit(document.querySelector('body'), {
+    designWidth: 1920,
+    designHeight: 920,
+    mode: 'stretch', // 可选 horizontal/vertical/stretch
+});
+
+```
+
+### 3. 弹出框组件（NsDialog）
+```
+import { NsDialog } from 'matrix_components'
+NsDialog({
+    title: '测试',
+    // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
+    dom: VideoDemo, // 也可以通过异步方式：import("@/views/VideoDemo.vue") 和 () => import("@/views/VideoDemo.vue")
+    option: {
+        // dom对应的自定义组件props属性
+        ...data,
+    },
+    events: {
+        // dom组件内部自定义事件emit('btnClick', xxx)
+        btnClick: () => {
+            console.log("点击中间区域内容");
+        },
+    },
+    modalColor: 'rgb(0 21 115 / 20%)', // 遮罩层颜色
+    width: '800px', // 宽度, 整个弹出框的高度，非内容高度
+    height: '450px', // 高度, 不配置则默认为内容高度
+    dialogPadding: [10, 20], // 弹窗内padding
+    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("点击关闭");
+    },
+    closed: () => { // 弹窗销毁时触发
+        console.log("完成关闭");
+    },
+    // 头部+底部自定义配置
+    // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
+    headerDom: xxx,
+    headerOption: {},
+    headerEvents: {},
+    // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
+    footerDom: yyy,
+    footerOption: {},
+    footerEvents: {},
+    // 底部按钮名称
+    footerTitle: {
+      close: "取消",
+      confirm: "确定",
+    },
+  }, true, '#app') // true为是否遮罩（非必填）， '#app'为挂载点（非必填）
+```
+
+### 4. 指令集（v-permission / v-length / v-event-unuse / v-event-use / v-sline）
+```
+// 使用方法
+// 1. 按钮权限 v-permission.class.display / v-permission.id.display / v-permission.class / v-permission.id(默认)
+<button id="zuhu_list_add" v-permission>新增</button>
+
+// 使用按钮权限时，需要在外部项目中通过注入权限数据实现（注意：需要在引入公共组件库之前！！！）
+app.provide('btnsPermission', btnsPermission)
+// NsComponents为引入公共组件库
+app.use(NsComponents)
+
+// 2. 长度限制(默认50位)：v-length[.number][="100"]， 如：v-length.number="11" / v-length
+<el-input placeholder="请输入手机号" v-length.number="11"/>
+<el-input placeholder="请输入用户名" v-length />
+
+// 3. span单行显示并隐藏溢出文本： 'v-sline'
+<span v-sline >xxxx</span>
+
+// 4. 用在能点击下层事件时：event-use (阻止穿透事件) / event-unuse (穿透事件)
+<div v-event-use></div>
+<div>无法点击到</div>
+
+<div v-event-unuse></div>
+<div>可以点击到</div>
+
+```
+
+
+### 5. sm2加密（getEncryptSm2）
+```
+// 使用方法
+import NsComponents, { getEncryptSm2 } from 'matrix_components'
+app.use(NsComponents)
+const encrypArrs = getEncryptSm2(publicKey, ["xxx", "yyy"], isAdd04=false, cipherMode=1)
+
+```
+
+### 6. get/post请求（http/get）
+```
+// 使用方法
+// 1. main.ts中引入, 并指定app.config.globalProperties.$BaseUrl全局请求地址
+import NsComponents from 'matrix_components'
+
+// 请求地址的baseUrl使用时必须get/psot必须传值，建议在app.use(NsComponents)之前设置
+app.config.globalProperties.$BaseUrl = "http://xxx";
+app.use(NsComponents)
+
+// 【可选】请求添加的token头的key，默认为satoken。token的key和value需要在外部项目中自己设置
+app.config.globalProperties.$TonkenKey = "satoken";
+// 【可选】
+app.config.globalProperties.$LogoutCallback = ()=>{
+  // 退出登录回调或者401回调
+};
+
+// 2. xx.vue / xx.ts  调用获取get、post请求
+import { get, post } from 'matrix_components'
+export const login = (data) => post('/mag/AccAdmin/doLogin', data);
+```
+
+### 7. NsPdf组件
+```
+// 使用方法
+import { NsPdf } from 'matrix_components'
+<NsPdf ref="pdfRef" :url="pdfUrl"></NsPdf>
+const pdfRef = ref()
+
+function searchKeyword() {
+  pdfRef.value?.search('人')
+}
+```
+
+### 8. NsOffice组件
+```
+// 统一的办公文档预览组件，根据文件URL自动选择合适的组件
+// 支持格式：Excel(.xlsx/.xls)、PDF(.pdf)、Word(.docx/.doc)
+
+// 使用方法
+import { NsOffice } from 'matrix_components'
+
+// 基础使用
+<NsOffice :url="fileUrl" />
+
+// Excel编辑模式（仅对Excel文件有效）
+<NsOffice :url="excelUrl" :isEdit="true" />
+
+// 获取组件信息
+<NsOffice ref="officeRef" :url="fileUrl" />
+const officeRef = ref()
+
+// 获取文件类型
+const fileType = officeRef.value?.getFileType() // 'excel' | 'pdf' | 'word' | 'unsupported'
+
+// 获取当前激活的组件实例
+const activeComponent = officeRef.value?.getActiveComponent()
+
+// 刷新组件
+officeRef.value?.refresh()
+```

package/dist/ComponentDemo/DialogDemo.vue

@@ -0,0 +1,208 @@
+<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>