vue3-components-plus 3.0.19 → 3.0.21

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 75535596
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 75535596
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -10,10 +10,6 @@ vue3-components-plus  是一个功能丰富的 Vue 3 企业级组件库，提供
 
 ## 📸 部分组件预览
 
-### NsVideo
-
-![emh1eWluZw==](https://tc-cdn.processon.com/po/605c2da663768970077b1422-695db61dbffe264705f9b033)
-
 ### NsDialog
 
 ![emh1eWluZw==](https://tc-cdn.processon.com/po/605c2da663768970077b1422-695db64084aa6b1f690b64aa)
@@ -52,7 +48,6 @@ vue3-components-plus  是一个功能丰富的 Vue 3 企业级组件库，提供
 
 - ✅ **NsOffice**: 办公文档统一预览（Excel/PDF/Word）
 - ✅ **NsForm**: 动态表单生成和管理
-- ✅ **NsVideo**: 专业视频播放器
 - ✅ **NsDialog**: 灵活弹窗对话框
 - ✅ **NsPdf**: PDF文档预览和搜索
 - ✅ **NsExcel**: Excel预览和编辑
@@ -235,7 +230,7 @@ app.use(NsComponents)
 
 ## 📋 组件列表
 
-### 1. NsOffice - 办公文档统一预览组件
+### NsOffice - 办公文档统一预览组件
 
 支持格式：Excel(.xlsx/.xls)、PDF(.pdf)、Word(.docx/.doc)
 
@@ -268,7 +263,7 @@ officeRef.value?.refresh()
 </script>
 ```
 
-### 2. NsForm - 动态表单组件
+### NsForm - 动态表单组件
 
 ```vue
 <template>
@@ -306,164 +301,7 @@ const isValid = formRef.value?.validate()
 </script>
 ```
 
-### 3. NsVideo - 视频播放组件
-
-```vue
-<template>
-  <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>
-    <template #video-player-cover><span>播放器canvas画布区域（除head+foot+tree区域）</span></template>
-  </NsVideo>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { NsVideo } from 'vue3-components-plus'
-
-const nsVideoRef = ref()
-
-// 视频配置数据
-const videoData = {
-  // 显示视频关闭按钮
-  showClose: true,
-  // 是否支持全屏
-  hasFullScreen: true,
-  // 显示树
-  showTree: true,
-  // 树数据
-  treeData: [
-    {
-      id: '1',
-      label: '分组1',
-      children: [
-        {
-          videoModel: 'easyplayer',
-          id: '111',
-          label: '视频A',
-          url: 'ws://example.com/rtp/video.live.flv',
-          deviceId: 'a1',
-          channelId: 'a11',
-          icontype: 'on',
-        }
-      ]
-    }
-  ],
-  // 树节点对应的key
-  treeNodeKey: 'id',
-  // 树节点展开的key
-  treeExpandedKeys: ['11'],
-  // 树节点属性
-  treeOptions: {
-    icontype: 'icontype',
-    background: 'background',
-    videoUrlKey: 'url',
-    children: 'children',
-    label: 'label',
-  },
-  // 获取、设置打开的播放视频信息
-  videoInfos: [
-    {
-      index: 0,
-      url: 'https://example.com/video.flv',
-      info: {
-        videoModel: 'easyplayer',
-        id: 'video1',
-        url: 'https://example.com/video.flv',
-        deviceId: 'c1',
-        channelId: 'c11',
-      },
-    }
-  ],
-  // 单点播放
-  videoSingleUrl: false,
-  // 已经在播放的是否关闭后再点击打开
-  videoSingleClose: false,
-  // 播放模式: 1: 单击,2: 双击
-  videoPlayModel: 1,
-  // 分屏模式: 1: 单屏, 2: 四屏, 3: 九屏
-  videoSplitType: 1,
-  // 显示分屏按钮
-  showVideoSplit: true,
-  // 显示方向控制按钮
-  showVideoCtrls: false,
-  // 禁止控制按钮默认请求行为
-  stopVideoCtrlMethods: true,
-  // 单个视频错误最大次数
-  videoErrorMaxCount: 3,
-  // easyplayer配置
-  videoConfig: {
-    MSE: true,
-    WCS: true,
-    WASM: true,
-    WASMSIMD: true,
-    isLive: true,
-    hasAudio: false,
-    stretch: false
-  },
-  // 事件回调
-  treeClick: () => { console.log('点击树节点') },
-  treeDBClick: () => { console.log('双击树节点') },
-  treeRightMenu: () => { console.log('右键树菜单') },
-  treeExpand: () => { console.log('展开树节点') },
-  videoError: () => { console.log('视频错误') },
-}
-
-// 视频操作事件
-const videoEvent = {
-  videoOriginalInfo: (info) => { console.log('视频原始信息:', info) },
-  up: () => { console.log('向上移动') },
-  down: () => { console.log('向下移动') },
-  left: () => { console.log('向左移动') },
-  right: () => { console.log('向右移动') },
-  zoomin: () => { console.log('放大') },
-  zoomout: () => { console.log('缩小') },
-  stop: () => { console.log('停止') },
-  speed: () => { console.log('设置速度') },
-  speak: () => { console.log('开始说话') },
-  scan: () => { console.log('扫描') },
-  cruise: () => { console.log('巡航') },
-  call: () => { console.log('调用') },
-}
-
-// 获取原始视频信息
-const videoInfo = nsVideoRef.value?.getOriginalInfo()
-
-// 设置视频URL
-nsVideoRef.value?.setVideoUrl('ws://example.com/rtp/video.live.flv', false, 1, {
-  videoModel: 'easyplayer'
-})
-
-// 移除视频
-nsVideoRef.value?.removeVideo(1, true)
-
-// 分屏变化回调
-function changeSplitHandler(num) {
-  console.log('分屏模式:', num)
-}
-</script>
-```
-
-**前置准备：**
-
-1. 复制播放器资源：`js文件夹` 到 `public/` 目录中
-2. 复制播放器资源：`cdn文件夹` 到 `public/` 目录中
-3. 在 `index.html` 中引入：
-
-```html
-<script src="./js/EasyPlayer-pro.js"></script>
-<script src="./cdn/h5player/h5player.min.js"></script>
-```
-
-### 4. NsDialog - 弹出框组件
+### NsDialog - 弹出框组件
 
 ```javascript
 import { NsDialog, closeAllNsDialog } from 'vue3-components-plus'
@@ -533,7 +371,7 @@ NsDialog({
 closeAllNsDialog()
 ```
 
-### 5. NsPdf - PDF预览组件
+### NsPdf - PDF预览组件
 
 ```vue
 <template>
@@ -553,7 +391,7 @@ function searchKeyword() {
 </script>
 ```
 
-### 6. NsExcel - Excel预览/编辑组件
+### NsExcel - Excel预览/编辑组件
 
 ```vue
 <template>
@@ -561,7 +399,7 @@ function searchKeyword() {
 </template>
 ```
 
-### 7. NsWord - Word预览组件
+### NsWord - Word预览组件
 
 ```vue
 <template>
@@ -569,7 +407,7 @@ function searchKeyword() {
 </template>
 ```
 
-### 8. NsImage - 图片预览组件
+### NsImage - 图片预览组件
 
 ```vue
 <template>
@@ -577,7 +415,7 @@ function searchKeyword() {
 </template>
 ```
 
-### 9. NsMD - Markdown编辑器组件
+### NsMD - Markdown编辑器组件
 
 ```vue
 <template>
@@ -585,7 +423,7 @@ function searchKeyword() {
 </template>
 ```
 
-### 10. NsSaturationline - 饱和度线组件
+### NsSaturationline - 饱和度线组件
 
 ```vue
 <template>
@@ -593,7 +431,7 @@ function searchKeyword() {
 </template>
 ```
 
-### 11. NsAutoScreen - 自适应屏幕工具
+### NsAutoScreen - 自适应屏幕工具
 
 ```javascript
 import { autoScaleInit, sacle_x, sacle_y } from 'vue3-components-plus'
@@ -999,12 +837,11 @@ app.mount('#app')
 
 ```javascript
 // 按需引入组件和函数
-import { NsForm, NsVideo, get, post, autoScaleInit } from 'vue3-components-plus'
+import { NsForm, get, post, autoScaleInit } from 'vue3-components-plus'
 
 // 在组件中使用
 const app = createApp(App)
 app.use(NsForm)
-app.use(NsVideo)
 
 autoScaleInit(document.querySelector('body'), {
   designWidth: 1920,
@@ -1016,10 +853,19 @@ autoScaleInit(document.querySelector('body'), {
 ## 更新日志
 
 ```text
-version: 3.0.18
+version: 3.0.21
+日期: 2026-03-17
+更新内容：
+1. NsTableContainer刷新后数据偶尔不更新的bug
+```
+
+
+```text
+version: 3.0.20
 日期: 2026-03-17
 更新内容：
-1. NsTableContainer按钮禁用颜色修改
+1. NsTableContainer增加插槽#page-content，替换表格区域
+2. NsTableContainer按钮禁用颜色修改
 ```
 
 ```text

package/dist/ComponentDemo/DialogDemo.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import VideoDemo from '@/views/VideoDemo.vue'
+import FormDemo from '@/views/FormDemo.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 // 扩展Window接口
@@ -37,7 +37,7 @@ function openDialog(data = {}) {
       class: 'xxx',
       title: '测试',
       // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
-      dom: VideoDemo, // 也可以通过异步方式：import("@/views/VideoDemo.vue") 和 () => import("@/views/VideoDemo.vue")
+      dom: FormDemo, // 也可以通过异步方式：import("@/views/FormDemo.vue") 和 () => import("@/views/FormDemo.vue")
       domCompleted: (domRef: any)=>{
         // dom加载完成或触发函数，domRef为dom实例可以执行defineExpose暴露出的函数
         console.log('组件加载完成，domRef:', domRef)

package/dist/ComponentDemo/FormDemo.vue

@@ -66,6 +66,20 @@
             gapV="10px"
           ></NsForm>
         </NsFormTitle>
+        <NsFormTitle title="文件上传">
+          <NsForm
+            ref="rowUploadRef"
+            :readOnly="state.readOnly"
+            backgroundColor="#fff"
+            :model="state.model"
+            :rows="state.rowsUpload"
+            formPropKey="rowsUpload"
+            labelColor="#606266"
+            labelWidth="150"
+            gapH="20px"
+            gapV="10px"
+          ></NsForm>
+        </NsFormTitle>
       </el-form>
     </div>
   </div>
@@ -73,9 +87,9 @@
 
 <script setup lang="ts">
 import { h, onMounted, reactive, ref } from 'vue'
-import { cloneDeep } from 'lodash-es'
-import { nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
+import type { UploadRequestOptions, UploadFile, UploadFiles } from 'element-plus'
+import { useFileUpload } from '../../packages/components/NsForm/uploadHook'
 
 // ------------全局的函数（不需要引入直接使用）------------
 // import { getAllFormKvData, getAllFormNodeByKey, getAllFormNodeRefByKey } from "vue3-components-plus";
@@ -115,8 +129,9 @@ const row1Ref = ref()
 const row2Ref = ref()
 const row3Ref = ref()
 const row4Ref = ref()
+const rowUploadRef = ref()
 
-const state = reactive({
+const state = reactive<any>({
   formData: {},
   readOnly: props.readOnly,
   model: props.readOnly ? '' : 'vertical',
@@ -481,10 +496,100 @@ const state = reactive({
       },
     ],
   ],
+  uploadFileList: [] as UploadFiles,
+  rowsUpload: [
+    [
+      {
+        key: 'upload_file',
+        label: '上传模型文件',
+        value: [],
+        component: 'ElUpload',
+        params: {
+          drag: true,
+          multiple: true,
+          limit: 2,
+          action: '#',
+          accept: '.txt,.md,.json,.jpg,.png,.pdf',
+          disabled: props.readOnly,
+          fileList: [],
+          httpRequest: mockUploadRequest,
+          rules: [
+            {
+              required: true,
+              message: '请上传模型或文档',
+              trigger: 'change',
+            },
+          ],
+        },
+        slots: {
+          default: () =>
+            h('div', { class: 'upload-trigger' }, [
+              h('p', { class: 'upload-title' }, '点击或拖拽上传'),
+              h('p', { class: 'upload-sub' }, '自动模拟上传成功，最多2个文件'),
+            ]),
+          tip: () => h('div', { class: 'el-upload__tip' }, '仅演示，文件信息会写入表单数据'),
+        },
+        events: {
+          success: handleUploadSuccess,
+          change: handleUploadChange,
+          remove: handleUploadRemove,
+        },
+      },
+    ],
+  ],
 })
 
-function changeHandler(v) {
-  ElMessage.info(v)
+state.rowsUpload[0][0].params.fileList = state.uploadFileList
+
+const uploadFieldKey = 'upload_file'
+const uploadFormKey = 'rowsUpload'
+const { handleRemoveFile, handleFileSuccessFile, handleCheckFileRequire } = useFileUpload(state)
+
+function mockUploadRequest(options: UploadRequestOptions) {
+  const { file, onSuccess, onError } = options
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      const response = {
+        code: 0,
+        data: {
+          fileName: file.name,
+          filePath: URL.createObjectURL(file),
+          fileSize: (file as any).size || (file as any).raw?.size || 0,
+        },
+        message: 'ok',
+      }
+      onSuccess?.(response as any)
+      resolve(response)
+    }, 400)
+
+    ;(options as any).abort = () => {
+      clearTimeout(timer)
+      const error = new Error('已取消') as any
+      onError?.(error)
+      reject(error)
+    }
+  })
+}
+
+function handleUploadSuccess(response: unknown, file: UploadFile, fileList: UploadFiles) {
+  state.uploadFileList.splice(0, state.uploadFileList.length, ...(fileList || []))
+  handleFileSuccessFile(response as any, file as any, fileList as any, uploadFieldKey, state.rowsUpload)
+  handleCheckFileRequire(state.rowsUpload, uploadFieldKey, formRef, uploadFormKey)
+}
+
+function handleUploadChange(_file: UploadFile, fileList: UploadFiles) {
+  state.uploadFileList.splice(0, state.uploadFileList.length, ...(fileList || []))
+  handleCheckFileRequire(state.rowsUpload, uploadFieldKey, formRef, uploadFormKey)
+}
+
+function handleUploadRemove(file: UploadFile, fileList: UploadFiles) {
+  state.uploadFileList.splice(0, state.uploadFileList.length, ...(fileList || []))
+  handleRemoveFile(file as any, fileList as any, uploadFieldKey, state.rowsUpload)
+  handleCheckFileRequire(state.rowsUpload, uploadFieldKey, formRef, uploadFormKey)
+}
+
+function changeHandler(v: boolean) {
+  ElMessage.info(v ? '启用' : '禁用')
 }
 
 function detAreaModeChange(value: any) {
@@ -527,7 +632,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 dataUpload = rowUploadRef.value?.getFormKvData?.()
+  const data = { ...data1, ...data2, ...data3, ...data4, ...dataUpload }
   state.formData = data
   ElMessage.success('表单校验成功')
   return data
@@ -542,6 +648,8 @@ async function resetFormData() {
   row2Ref.value?.resetForm?.()
   row3Ref.value?.resetForm?.()
   row4Ref.value?.resetForm?.()
+  rowUploadRef.value?.resetForm?.()
+  state.uploadFileList.splice(0, state.uploadFileList.length)
   setTimeout(() => {
     // 重置表单验证状态
     formRef.value?.clearValidate?.()
@@ -567,16 +675,20 @@ async function getDetail() {
       region: 'haidian,pudong', //['beijing', 'haidian'],
       department: ['company', 'tech', 'frontend'],
       single_level_cascader: 'shanghai',
+      upload_file: [],
     }
     row1Ref.value?.resetForm()
     row2Ref.value?.resetForm()
     row3Ref.value?.resetForm()
     row4Ref.value?.resetForm()
+    rowUploadRef.value?.resetForm()
+    state.uploadFileList.splice(0, state.uploadFileList.length)
     setTimeout(() => {
       row1Ref.value?.setFormData?.(res)
       row2Ref.value?.setFormData?.(res)
       row3Ref.value?.setFormData?.(res)
       row4Ref.value?.setFormData?.(res)
+      rowUploadRef.value?.setFormData?.(res)
     }, 10)
     return
     // 特殊处理
@@ -700,6 +812,21 @@ onMounted(() => {
   }
 }
 
+.upload-trigger {
+  padding: 12px 8px;
+  text-align: center;
+  color: #606266;
+  .upload-title {
+    margin: 0 0 4px;
+    font-weight: 600;
+  }
+  .upload-sub {
+    margin: 0;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
 @media (max-width: 768px) {
   .config-select {
     width: 100% !important;

package/dist/ComponentDemo/NsTableDemo/index.vue

@@ -27,6 +27,10 @@
       @add="handleAdd"
       @selection-change="handleSelectionChange"
     >
+      <!-- 替代表格插槽 -->
+      <!-- <template #page-content>
+        <div>替代表格插槽</div>
+      </template> -->
       <!-- 自定义状态列 -->
       <template #status="{ row }">
         <el-tag :type="getStatusType(row.status)">
@@ -84,7 +88,15 @@
 
 <script setup lang="ts">
 import { Delete, Edit, View } from '@element-plus/icons-vue'
-import { ElDatePicker, ElInput, ElMessage, ElMessageBox, ElPopconfirm, ElSelect, ElSwitch } from 'element-plus'
+import {
+  ElDatePicker,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElPopconfirm,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus'
 import { onMounted, ref } from 'vue'
 import { fetchDepartmentOptions, fetchStatusOptions, filterUsers, mockUsers } from './mockData.js'
 
@@ -104,37 +116,23 @@ const tableData = ref([])
 const total = ref(0)
 
 const searchItems = ref([
-{
-    prop: "mounth",
-    label: "归属月",
+  {
+    prop: 'mounth',
+    label: '归属月',
     span: 6,
     component: ElSelect,
     attrs: {
-      placeholder: "请选择归属月",
+      placeholder: '请选择归属月',
       clearable: true,
-      options: [
-        {
-          value: "Option1",
-          label: "Option1"
-        },
-        {
-          value: "Option2",
-          label: "Option2",
-        },
-        {
-          value: "Option3",
-          label: "Option3"
-        },
-        {
-          value: "Option4",
-          label: "Option4",
-        },
-        {
-          value: "Option5",
-          label: "Option5"
-        }
-      ]
-    }
+      type: 'month',
+    },
+    children: Array.from({ length: 12 }, (_, i) => {
+      return {
+        label: `${i + 1}月`,
+        value: String(i + 1),
+      }
+    }),
+    defaultValue: '3', // 默认选中3月
   },
   {
     prop: 'username',
@@ -279,7 +277,7 @@ const columns = ref([
         'min-width': 100, // 最小宽度
       },
       { prop: 'gender', label: '性别', slot: 'gender', width: 80 },
-    ]
+    ],
   },
   // 多级表头示例：组织信息
   {
@@ -287,7 +285,7 @@ const columns = ref([
     children: [
       { prop: 'department', label: '部门', slot: 'department', width: 120 },
       { prop: 'status', label: '状态', slot: 'status', width: 100 },
-    ]
+    ],
   },
   // 多级表头示例：联系方式
   {
@@ -313,7 +311,7 @@ const columns = ref([
           return row.email.includes(value)
         },
       },
-    ]
+    ],
   },
   {
     prop: 'createTime',