xydata-tools 1.0.48 → 1.0.49

package/README.md

@@ -3,50 +3,44 @@
 内网文档：[http://172.16.1.254:8090/display/UX/xydata-tools](http://172.16.1.254:8090/display/UX/xydata-tools)
 
 # xydata-tools 文档索引
- 
 
-#### Web 端组件
+> **注意**：如果您在 NPM 上查看此文档，链接可能无法正常工作。请访问 [GitLab 仓库](https://172.16.1.252/wuxiaohu/xydata-tools) 查看完整文档。
 
-- [附件上传组件](./docs/组件使用文档/附件上传组件.md)
+#### Web 端组件
 
+- **附件上传组件** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/组件使用文档/附件上传组件.md)
   - 支持图片、文件上传
   - 内置文件大小、格式校验
   - 支持预览功能
 
-- [附件下载组件](./docs/组件使用文档/附件下载组件.md)
-
+- **附件下载组件** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/组件使用文档/附件下载组件.md)
   - 支持链接和流式文件下载
   - 兼容原生按钮功能
 
-- [数据字典组件](./docs/组件使用文档/数据字典.md)
-
+- **数据字典组件** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/组件使用文档/数据字典.md)
   - 完整的数据字典管理功能
   - 支持分类管理
 
-- [组织机构组件](./docs/组件使用文档/组织机构.md)
-
+- **组织机构组件** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/组件使用文档/组织机构.md)
   - 树形结构展示
   - 人员管理功能
 
 #### uni-app 组件
 
-- [MediaPicker - 媒体选择器](./docs/uniapp/MediaPicker.md) 
-- [FilePicker - 文件选择器](./docs/uniapp/FilePicker.md)
-
-### 模版使用文档
+- **MediaPicker - 媒体选择器** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/uniapp/MediaPicker.md)
+- **FilePicker - 文件选择器** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/uniapp/FilePicker.md)
 
-- [AAA 模版](./docs/模版使用文档/AAA模版.md)
+#### 模版使用文档
 
+- **AAA 模版** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/模版使用文档/AAA模版.md)
   - 适用场景：有独立登录页面，不支持统一登录
   - 包含：SecurityLayout、系统管理模块
 
-- [SSO 模版](./docs/模版使用文档/SSO模版.md)
-
+- **SSO 模版** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/模版使用文档/SSO模版.md)
   - 适用场景：没有独立登录页面，支持统一登录
   - 包含：SecurityLayout、系统管理模块
 
-- [Both 模版](./docs/模版使用文档/Both模版.md)
-
+- **Both 模版** - [查看文档](https://172.16.1.252/wuxiaohu/xydata-tools/-/blob/new/docs/模版使用文档/Both模版.md)
   - 适用场景：同时支持独立登录和统一登录
   - 包含：SecurityLayout
 

package/dist/components/both/security-layout/index.js

@@ -21,9 +21,6 @@ var BothSecurityLayout = function BothSecurityLayout(props) {
   var LOGIN_URI = AAALOGIN ? "".concat(window.publicPath, "user/login") : "".concat(window.publicPath);
   var pathName = window.location.pathname;
   useEffect(function () {
-    console.error("构建参数，开发完成，记得删除！");
-    console.log("ENV_DATA:", JSON.stringify(envData));
-    console.log("service:", service);
     if (!token) {
       if (pathName.indexOf("/sso") >= 0 || !AAALOGIN) {
         setSessionStorage("r", window.location.href);

package/dist/components/uni-app/media-picker/media-picker.vue

@@ -107,8 +107,8 @@
 
 					<!-- 图片 -->
 					<template v-else>
-						<image v-if="file.type === 'image'" :src="file.url" mode="aspectFill"
-							:style="{ borderRadius: itemBorderRadius + 'rpx' }" :lazy-load="true"
+						<image v-if="file.type === 'image'" :src="lazyLoadImageSrcs[i]" mode="aspectFill"
+							:style="{ borderRadius: itemBorderRadius + 'rpx' }" :id="componentId + '-imgview-' + i"
 							@load="onMediaLoad('readonly-' + i)" @error="onMediaError('readonly-' + i)">
 						</image>
 
@@ -147,9 +147,9 @@
 							@click="handlePopupItemClick(file, i)">
 
 							<!-- 图片 -->
-							<image v-if="file.type === 'image'" :src="file.url" mode="aspectFill"
-								:style="{ borderRadius: itemBorderRadius + 'rpx' }" @load="onMediaLoad('popup-' + i)"
-								@error="onMediaError('popup-' + i)">
+							<image v-if="file.type === 'image'" :src="popupLazyLoadImageSrcs[i]" mode="aspectFill"
+								:style="{ borderRadius: itemBorderRadius + 'rpx' }" :id="componentId + '-popup-imgview-' + i"
+								@load="onMediaLoad('popup-' + i)" @error="onMediaError('popup-' + i)">
 							</image>
 
 							<!-- 视频 -->
@@ -334,8 +334,16 @@ export default {
 			mediaLoadingStatus: {},
 			fullscreenVideoSrc: '', // 专门用于全屏播放的视频源
 			windowWidth: uni.getSystemInfoSync ? uni.getSystemInfoSync().windowWidth : 375,
+			lazyLoadImageSrcs: [], // 用于图片懒加载，存储进入视图的图片src
+			observer: null,
+			componentId: null, // 组件实例的唯一ID
+			popupLazyLoadImageSrcs: [], // 用于弹窗中图片懒加载，存储进入视图的图片src
+			popupObserver: null, // 弹窗图片懒加载观察器
 		}
 	},
+	created() {
+		this.componentId = 'mp-' + Date.now() + Math.random().toString(36).substr(2, 9);
+	},
 	computed: {
 		// ==================== 媒体类型判断 ====================
 		/** 是否启用图片上传 */
@@ -475,12 +483,27 @@ export default {
 				this.videoFileList = val || []
 			},
 			immediate: true
+		},
+		allFileList: {
+			handler() {
+				this.initLazyObserver(); // 当文件列表变化时重新初始化观察器
+			}
 		}
 	},
 	mounted() {
 		if (!this.uploadUrl) {
 			this.actualUploadUrl = (getApp().globalData && getApp().globalData.uploadUrl) || ''
 		}
+		this.initLazyObserver(); // 在mounted时初始化观察器
+	},
+	onShow() {
+		this.initLazyObserver();
+	},
+	beforeDestroy() {
+		if (this.observer) {
+			this.observer.disconnect();
+			this.observer = null;
+		}
 	},
 	methods: {
 		// ==================== 事件监听辅助方法 ====================
@@ -1092,6 +1115,7 @@ export default {
 			this.$nextTick(() => {
 				setTimeout(() => {
 					this.popupAnimated = true
+					this.initPopupLazyObserver(); // 弹窗打开时初始化懒加载观察器
 				}, 50)
 			})
 		},
@@ -1100,6 +1124,10 @@ export default {
 			this.popupAnimated = false
 			setTimeout(() => {
 				this.popupVisible = false
+				if (this.popupObserver) {
+					this.popupObserver.disconnect(); // 弹窗关闭时断开观察器
+					this.popupObserver = null;
+				}
 			}, 300)
 		},
 
@@ -1112,6 +1140,92 @@ export default {
 			this.$set(this.mediaLoadingStatus, key, true)
 		},
 
+		// ==================== 初始化图片懒加载观察器 ====================
+		/**
+		 * 初始化图片懒加载观察器
+		 */
+		initLazyObserver() {
+			if (this.readonly && this.allFileList.length > 0) {
+				// 确保 observer 每次都被重新创建，以防元素变化
+				if (this.observer) {
+					this.observer.disconnect();
+					this.observer = null;
+				}
+
+				this.lazyLoadImageSrcs = Array(this.allFileList.length).fill(null); 
+
+				this.$nextTick(() => {
+					const currentObserver = uni.createIntersectionObserver(this, { observeAll: true });
+					this.observer = currentObserver; 
+
+					if (!this.observer) {
+						console.warn("IntersectionObserver failed to create.");
+						return;
+					}
+
+					this.observer.relativeToViewport({ top: 0, bottom: 50 });  
+
+					this.allFileList.forEach((file, index) => {
+						if (file.type === 'image') {
+							const sel = '#' + this.componentId + '-imgview-' + index;
+							currentObserver.observe(sel, (res) => {
+								const isVisible = res.intersectionRatio > 0;
+								if (isVisible && !this.lazyLoadImageSrcs[index]) {
+									this.$set(this.lazyLoadImageSrcs, index, file.url); 
+								}
+							});
+						}
+					});
+				});
+			} else if (this.observer) {
+				this.observer.disconnect();
+				this.observer = null;
+			}
+		},
+
+		/**
+		 * 初始化弹窗图片懒加载观察器
+		 */
+		initPopupLazyObserver() {
+			if (this.popupVisible && this.allFileList.length > 0) {
+				if (this.popupObserver) {
+					this.popupObserver.disconnect();
+					this.popupObserver = null;
+				}
+
+				this.popupLazyLoadImageSrcs = Array(this.allFileList.length).fill(null);
+
+				this.$nextTick(() => {
+					const currentPopupObserver = uni.createIntersectionObserver(this, { observeAll: true });
+					this.popupObserver = currentPopupObserver;
+
+					if (!this.popupObserver) {
+						console.warn("Popup IntersectionObserver failed to create.");
+						return;
+					}
+
+					// 在弹窗的scroll-view中创建观察器
+					// 注意：这里需要确保scroll-view的selector是唯一的，或者使用组件内实例
+					this.popupObserver.relativeToViewport({ top: 0, bottom: 50 });
+
+					this.allFileList.forEach((file, index) => {
+						if (file.type === 'image') {
+							const sel = '#' + this.componentId + '-popup-imgview-' + index;
+							currentPopupObserver.observe(sel, (res) => {
+								const isVisible = res.intersectionRatio > 0;
+								if (isVisible && !this.popupLazyLoadImageSrcs[index]) {
+									this.$set(this.popupLazyLoadImageSrcs, index, file.url);
+								}
+							});
+						}
+					});
+				});
+			} else if (this.popupObserver) {
+				this.popupObserver.disconnect();
+				this.popupObserver = null;
+			}
+		},
+
 		// ==================== 通用方法 ====================
 		/**
 		 * 获取所有文件列表