xydata-tools 1.0.41 → 1.0.42

package/README.md

@@ -1,310 +1,106 @@
-# 鑫义科技前端开发者工具包
-
-## 内网文档：[http://172.16.1.254:8090/display/UX/xydata-tools](http://172.16.1.254:8090/display/UX/xydata-tools)
-
-## 功能
-
-- `aaa` 模版（有独立的登录页面，不支持统一登陆）：SecurityLayout、系统管理
-- `sso` 模版（没有独立的登录页面，支持统一登陆）：SecurityLayout、系统管理
-- `both` 模版（有独立的登录页面，支持统一登陆）： SecurityLayout、一般配合 `sso` 模板的系统管理使用
-- 数据字典页面
-- 组织机构页面
-- 附件上传组件
-- 附件下载组件
-
----
-
-## 使用说明
-
-### 全局注册 Service
-
-在项目中注册请求服务，可放置在 `global.jsx` 或 `app.js` 中：
-
-```javascript
-import { registerService } from "xydata-tools";
-
-registerService("替换你的项目服务");
-```
-
----
-
-### 数据字典使用方法
-
-```javascript
-import React from "react";
-import { DictionaryFront } from "xydata-tools";
-
-const Demo = () => {
-  return <DictionaryFront />;
-};
-
-export default Demo;
-```
-
----
-
-### 组织机构模块
-
-```javascript
-import React from "react";
-import { OrganizationFront } from "xydata-tools";
-
-const Demo = () => {
-  return <OrganizationFront />;
-};
-
-export default Demo;
-```
-
----
-
-### 附件上传组件
-
-基于 `ProformUploadButton` 二次封装的上传组件，支持以下功能：
-
-1. 支持单独使用或在表单内使用。
-2. 支持上传图片、文件，可根据 `listType` 进行多种上传风格切换。
-3. 内置文件大小、格式校验。
-4. 内置常用请求头参数。
-5. 内置图片预览功能（`listType` 为 `"picture"` 或 `"picture-card"` 时可用）。
-6. 兼容所有原生组件功能。
-
-#### 示例代码
-
-```javascript
-import React from "react";
-import { UploadFile } from "xydata-tools";
-import { Form } from "antd";
-
-const Demo = () => {
-  const [form] = Form.useForm();
-
-  // 单独使用
-   <UploadFile
-	title="导入模板"
-	listType="text"
-	accept=".xlsx,.xls"
-	icon={<ImportOutlined />}
-	buttonOptions={{ type: "primary" }}
-	showUploadList={false}
-	onChange={({ fileList }) => {
-	// 通过监听状态为done获取最终的上传结果
-	if (fileList.every((item) => item.status === "done")) {
-		console.log(fileList );
-	}
-	}}
-	checkFile={{
-	suffixs: ["xlsx", "xls"],
-	maxSize: 1024,
-	}}
-	multiple={true}
-  />;
-
-  // 在表单内使用
- <Form form={form}>
-	<UploadFile form={form} name="file" label="图片上传" listType="picture-card" />
- </Form>
-
-  // 在 FormList 内使用
-  <ProFormList {...yourProps}>
-    {(field) => {
-      return <UploadFile key={field.key} name={[field.name, "cover"]} />;
-    }}
-  </ProFormList>;
-};
-
-export default Demo;
-```
-
-#### 参数说明
-
-| 参数名            | 类型                 | 描述                                                                                | 默认值                                            |
-| ----------------- | -------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------- |
-| `form`            | `Antd.Form.Instance` | 表单实例                                                                            | 无                                                |
-| `label`           | `string`             | 表单标签                                                                            | 无                                                |
-| `name`            | `string`             | 表单字段                                                                            | 无                                                |
-| `rules`           | `Array[Object]`      | 表单校验规则                                                                        | 无                                                |
-| `accept`          | `string`             | 接受上传的文件类型                                                                  | 无                                                |
-| `action`          | `string`             | 上传的地址                                                                          | `/api/${注册的服务}/file/upload/v3?type=openFile` |
-| `max`             | `string`             | 最大上传数量，超过最大数量就会隐藏上传按钮                                          | 无                                                |
-| `multiple`        | `boolean`            | 是否支持多选文件，开启后按住 `Ctrl` 可选择多个文件                                  | `false`                                           |
-| `icon`            | `ReactNode`          | `Button` 或 `Dragger` 的图标                                                        | 无                                                |
-| `title`           | `ReactNode`          | `Button` 或 `Dragger` 的标题                                                        | 无                                                |
-| `description`     | `ReactNode`          | 当 `listType` 为 `dragger` 时的描述                                                 | 无                                                |
-| `listType`        | `string`             | 上传列表的内建样式，支持 `text`、`picture`、`picture-card`、`dragger`               | `text`                                            |
-| `showUploadList`  | `Boolean/Object`     | 是否展示文件列表，可设为对象，用于单独设定 `showPreviewIcon` 等配置                 | `true`                                            |
-| `readonly`        | `boolean`            | 是否只读                                                                            | `false`                                           |
-| `disabled`        | `boolean`            | 是否禁用                                                                            | `false`                                           |
-| `checkFile`       | `Object`             | 文件校验配置，包括 `suffixs`（限制的文件格式）和 `maxSize`（文件大小限制，单位 KB） | 无                                                |
-| `onChange`        | `Function`           | 上传文件改变时的回调，上传中、完成、失败都会调用                                    | 无                                                |
-| `formItemOptions` | `Object`             | 表单项配置，覆盖以上设置                                                            | 无                                                |
-| `uploadOptions`   | `Object`             | 上传配置，覆盖以上设置                                                              | 无                                                |
-| `buttonOptions`   | `Object`             | 上传按钮的配置，`listType` 为 `dragger` 时无效                                      | 默认配置了 `loading`                              |
-
----
-
-### 附件下载组件
-
-内置了下载功能的按钮组件，支持以下功能：
-
-1. 支持格式为链接或流的文件下载。
-2. 兼容原生组件功能。
-
-#### 示例代码
-
-```javascript
-import React from "react";
-import { DownloadFile } from "xydata-tools";
-
-const Demo = () => {
-  return (
-    <DownloadFile
-      shape="round"
-      type="link"
-      queryOption={{
-        url: "/api/tb/exportTbExcel",
-        params: { peopleType: 0 },
-        customField: {
-          url: "exportFileUrl",
-          fileName: "exportFileName",
-        },
-      }}
-    />
-  );
-};
-
-export default Demo;
-```
-
-#### 参数说明
-
-| 参数名                     | 类型                 | 描述                                                              | 默认值   |
-| -------------------------- | -------------------- | ----------------------------------------------------------------- | -------- |
-| `text`                     | `String / ReactNode` | 按钮内容                                                          | 下载按钮 |
-| `queryOption`              | `Object`             | 下载设置                                                          | 无       |
-| `queryOption.url`          | `String`             | 接口地址                                                          | 无       |
-| `queryOption.headers`      | `Object`             | 请求头                                                            | 无       |
-| `queryOption.method`       | `String`             | 请求方法，支持 `GET` 或 `POST`                                    | 无       |
-| `queryOption.fileName`     | `String`             | 文件名称                                                          | 无       |
-| `queryOption.params`       | `Object`             | 请求参数                                                          | 无       |
-| `queryOption.customField`  | `Object`             | 自定义返回接口返回的文件名和地址（适用于返回 JSON 的接口）        | 无       |
-| `queryOption.onError`      | `Function`           | 接口异常回调                                                      | 无       |
-| `queryOption.downloadType` | `String`             | 下载类型，`pure` 表示传入的是下载地址（OSS 链接），而不是下载接口 | 无       |
-| 其他                       | `-`                  | 兼容 Antd.Button 所有原生参数                                     | 无       |
-
-
-#### 配套的 提交/回显 方法
-
-```javascript
-
-import { getUploadFileData, setUploadFileData } from "xydata-tools";
- 
-// 获取表单数据
-const getFieldsValue= async () => {
-  const fieldsValue = await form.validateFields();
-  const { cover } = fieldsValue;
-  const data = await getUploadFileData(cover);
-};
- 
-// 回显表单数据
-const renderFieldsValue = async () => {
-  const cover = [
-    {
-      name: "image.png",
-      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-      fileName:'xxx'
-    },
-    {
-      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-    },
-  ];
-  const data = setUploadFileData(cover);
-  form.setFieldsValue({
-    cover: data,
-  });
-};
-```
----
-
-### `sso` 模版的系统管理模块
-
-#### 用户管理
-
-```javascript
-import React from "react";
-import { Sso } from "xydata-tools";
-import { connect } from "umi";
-
-const UserPage = (props) => {
-  const { currentUser } = props;
-  return <Sso.User currentUser={currentUser} />;
-};
-
-export default connect(({ user }) => ({
-  currentUser: user.currentUser,
-}))(UserPage);
-```
-
-#### 权限管理
-
-```javascript
-import React from "react";
-import { Sso } from "xydata-tools";
-
-const PermPage = () => {
-  return <Sso.Permission />;
-};
-
-export default PermPage;
-```
-
-#### 角色管理
-
-```javascript
-<Sso.Role currentUser={currentUser} />
-```
-
-#### 设置权限
-
-```javascript
-<Sso.PermRole currentUser={currentUser} />
-```
-
----
-
-### 本地开发
-
-1. 在项目根目录执行：
-
-   ```bash
-   yarn dev
-   ```
-
-2. 在 example 目录下执行：
-
-   ```bash
-   yarn start
-   ```
-
-3. example 是一个由 `umi` 搭建的后台项目，可直接引用 `xydata-tools` 内的组件进行预览。
-
-4. 新组件可在 `/xydata-tools/src/components` 下进行开发更新。
-
-5. 在 src 内的修改操作将会被实时编译到 dist 文件夹中。
-
-6. 打包发布：
-
-   ```bash
-   npm run prepublishOnly
-   npm config set registry https://registry.npmjs.org
-   npm config set proxy false
-   npm publish -d
-   ```
-
-7. 发布完成后，还原 npm 源（淘宝源）：
-
-   ```bash
-   npm config set registry https://registry.npmmirror.com
-   ```
-
----
+# 鑫义科技前端开发者工具包
+
+内网文档：[http://172.16.1.254:8090/display/UX/xydata-tools](http://172.16.1.254:8090/display/UX/xydata-tools)
+
+# xydata-tools 文档索引
+
+## 📚 文档目录
+
+#### Web 端组件
+
+- [附件上传组件](./组件使用文档/附件上传组件.md)
+
+  - 支持图片、文件上传
+  - 内置文件大小、格式校验
+  - 支持预览功能
+
+- [附件下载组件](./组件使用文档/附件下载组件.md)
+
+  - 支持链接和流式文件下载
+  - 兼容原生按钮功能
+
+- [数据字典组件](./组件使用文档/数据字典.md)
+
+  - 完整的数据字典管理功能
+  - 支持分类管理
+
+- [组织机构组件](./组件使用文档/组织机构.md)
+
+  - 树形结构展示
+  - 人员管理功能
+
+#### uni-app 组件
+
+- [uni-app 文件上传组件](./uni-app组件使用文档.md)
+  - **PicPicker** - 图片选择器组件
+  - **VideoPicker** - 视频选择器组件
+
+### 模版使用文档
+
+- [AAA 模版](./模版使用文档/AAA模版.md)
+
+  - 适用场景：有独立登录页面，不支持统一登录
+  - 包含：SecurityLayout、系统管理模块
+
+- [SSO 模版](./模版使用文档/SSO模版.md)
+
+  - 适用场景：没有独立登录页面，支持统一登录
+  - 包含：SecurityLayout、系统管理模块
+
+- [Both 模版](./模版使用文档/Both模版.md)
+
+  - 适用场景：同时支持独立登录和统一登录
+  - 包含：SecurityLayout
+
+---
+
+## 本地开发
+
+react
+
+1. 在项目根目录执行：
+
+   ```bash
+   yarn dev
+   ```
+
+2. 在 example 目录下执行：
+
+   ```bash
+   yarn start
+   ```
+
+3. example 是一个由 `umi` 搭建的后台项目，可直接引用 `xydata-tools` 内的组件进行预览。
+4. 新组件可在 `/xydata-tools/src/components` 下进行开发更新。
+5. 在 src 内的修改操作将会被实时编译到 dist 文件夹中。
+
+uniapp
+
+1. 在项目根目录执行：
+
+   ```bash
+   yarn dev
+   ```
+
+2. 在 example-uniapp 下运行
+   ```bash
+   yarn link xydata-tools
+   ```
+3. 将 example-uniapp 添加到 H-Builder 中运行
+
+打包发布：
+
+```bash
+npm run prepublishOnly
+npm config set registry https://registry.npmjs.org
+npm config set proxy false
+npm publish -d
+```
+
+发布完成后，还原 npm 源（淘宝源）：
+
+```bash
+npm config set registry https://registry.npmmirror.com
+```
+
+---

package/dist/components/uni-app/PicPicker.vue

@@ -0,0 +1,452 @@
+<template>
+	<view class="pic-picker-box-wrapper">
+		<view class="pic-picker-box" v-if="!readonly">
+			<view class="upload-view">
+				<view class="item flex-center" v-for="(item, index) in imageUrls" :key="index">
+					<image @click.stop="previewImage(imageUrls, index)" style="border-radius: 24rpx;" :src="item"
+						mode="aspectFill" class="avatar"></image>
+					<view class="clear-btn" @click="removeImage(index)">
+						<text class="clear-icon">×</text>
+					</view>
+				</view>
+
+				<!-- 自定义上传按钮插槽，可完全替换容器 -->
+				<slot name="upload-button" :select="selectAndUploadImage" :limit="limit" :count="fileList.length">
+					<!-- 默认上传按钮 -->
+					<view class="item flex-center selection upload-trigger"
+						:class="{ 'no-margin': imageUrls.length === 0 }" v-if="fileList.length < limit"
+						@click="selectAndUploadImage">
+						<image :src="defaultAddImg" style="width: 64rpx;height: 64rpx;"></image>
+						<view class="upload-text">上传图片</view>
+					</view>
+				</slot>
+			</view>
+		</view>
+
+		<block v-else-if="fileList.length">
+			<view class="grid-imgbox" :class="'grid-imgbox' + fileList.length" v-if="fileList.length > 1">
+				<view v-for="(file, i) in fileList" :key="i">
+					<image :src="file.url" mode="aspectFill" @click.stop="previewImage(imageUrls, i)" :lazy-load="true">
+					</image>
+				</view>
+			</view>
+
+			<view class="grid-imgbox grid-imgbox1" v-if="fileList.length === 1">
+				<image :src="fileList[0].url" mode="aspectFill" @click.stop="previewImage(imageUrls, 0)"></image>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+import Compressor from 'compressorjs';
+
+export default {
+	name: 'PicPicker',
+	props: {
+		/** 上传地址 */
+		uploadUrl: {
+			type: String,
+			default: ''
+		},
+		/** 只读模式 */
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		/** 文件列表 */
+		files: {
+			type: Array,
+			default: () => []
+		},
+		/** 最大上传数量限制 */
+		limit: {
+			type: Number,
+			default: 9
+		},
+		/** 上传按钮的默认图标 */
+		defaultAddImg: {
+			type: String,
+			default: require('../../assets/defaultAddPicBg.png')
+		},
+	},
+	data() {
+		return {
+			fileList: [],
+		}
+	},
+	computed: {
+		/** 图片预览URL列表 */
+		imageUrls() {
+			return this.fileList.map(file => file.url)
+		}
+	},
+	watch: {
+		files(val) {
+			this.fileList = val
+		}
+	},
+	mounted() {
+		this.fileList = this.files
+		console.log(this.fileList)
+	},
+	methods: {
+		/**
+		 * 预览图片
+		 */
+		previewImage(urls, current) {
+			uni.previewImage({
+				current,
+				urls,
+				indicator: "number"
+			})
+		},
+
+		/**
+		 * 选择并上传图片
+		 */
+		selectAndUploadImage() {
+			if (this.fileList.length >= this.limit) {
+				return
+			}
+
+			const remainCount = this.limit - this.fileList.length
+
+			uni.chooseImage({
+				count: remainCount,
+				sizeType: ["original", "compressed"],
+				sourceType: ["album"],
+				// #ifndef MP-WEIXIN
+				success: (chooseImageRes) => {
+					if (chooseImageRes.tempFiles.length + this.fileList.length > this.limit) {
+						uni.showToast({
+							icon: 'none',
+							title: `上传最大限制${this.limit}张`
+						})
+						return
+					}
+
+					uni.showLoading({
+						title: '上传中',
+						mask: true
+					})
+
+					chooseImageRes.tempFilePaths.forEach((tempPath, index) => {
+						const tempFile = chooseImageRes.tempFiles[index]
+
+						new Compressor(tempFile, {
+							quality: 0.8,
+							success: (compressedFile) => {
+								this.uploadFile(this.uploadUrl, compressedFile)
+							},
+							error: (err) => {
+								uni.hideLoading()
+								uni.showToast({
+									icon: 'none',
+									title: '图片压缩失败'
+								})
+							},
+						})
+					})
+				},
+				// #endif
+
+				// #ifdef MP-WEIXIN
+				success: (chooseImageRes) => {
+					if (chooseImageRes.tempFiles.length + this.fileList.length > this.limit) {
+						uni.showToast({
+							icon: 'none',
+							title: `上传最大限制${this.limit}张`
+						})
+						return
+					}
+
+					uni.showLoading({
+						title: '上传中',
+						mask: true
+					})
+
+					chooseImageRes.tempFilePaths.forEach((tempPath, index) => {
+						const tempFile = chooseImageRes.tempFiles[index]
+
+						// JPG 格式进行压缩
+						if (tempPath.indexOf('.jpg') !== -1) {
+							uni.compressImage({
+								src: tempFile.path,
+								quality: 100,
+								success: (res) => {
+									this.uploadFileByPath(this.uploadUrl, res.tempFilePath, tempPath)
+								}
+							})
+						} else {
+							this.uploadFileByPath(this.uploadUrl, tempPath, tempPath)
+						}
+					})
+				},
+				// #endif
+			})
+		},
+
+		/**
+		 * 上传文件（非微信小程序，使用 File 对象）
+		 */
+		uploadFile(url, file) {
+			uni.uploadFile({
+				url,
+				file,
+				name: "file",
+				success: (uploadFileRes) => {
+					const result = JSON.parse(uploadFileRes.data)
+
+					const fileInfo = {
+						fileName: result.data.fileName,
+						name: result.data.originFileName,
+						url: result.data.pathUrl
+					}
+					this.fileList.push(fileInfo)
+				},
+				fail: () => {
+					uni.showToast({
+						icon: 'none',
+						title: '上传失败'
+					})
+				},
+				complete: () => {
+					uni.hideLoading()
+					this.emitChange()
+				}
+			})
+		},
+
+		/**
+		 * 上传文件（微信小程序，使用文件路径）
+		 */
+		uploadFileByPath(url, filePath, previewPath) {
+			uni.uploadFile({
+				url,
+				filePath,
+				name: "file",
+				success: (uploadFileRes) => {
+					const result = JSON.parse(uploadFileRes.data)
+
+					const fileInfo = {
+						fileName: result.data.fileName,
+						name: result.data.originFileName,
+						url: result.data.pathUrl
+					}
+					this.fileList.push(fileInfo)
+				},
+				fail: () => {
+					uni.showToast({
+						icon: 'none',
+						title: '上传失败'
+					})
+				},
+				complete: () => {
+					uni.hideLoading()
+					this.emitChange()
+				}
+			})
+		},
+
+		/**
+		 * 删除图片
+		 */
+		removeImage(index) {
+			this.fileList = this.fileList.filter((_, i) => i !== index)
+			this.emitChange()
+		},
+
+		/**
+		 * 触发变更事件
+		 */
+		emitChange() {
+			this.$emit('change', this.fileList)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.pic-picker-box-wrapper {
+	width: 100%;
+}
+
+.flex-align-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-center {
+	display: flex;
+	justify-content: center;
+}
+
+.selection {
+	background: #FBFBFB;
+	border-radius: 16rpx 16rpx 16rpx 16rpx;
+	border: 2rpx dashed #DDDDDD !important;
+	cursor: pointer;
+	transition: all 0.3s;
+
+	&:active {
+		opacity: 0.7;
+	}
+}
+
+.upload-trigger {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+
+	.upload-text {
+		color: #999;
+		font-size: 24rpx;
+		margin-top: 8rpx;
+	}
+}
+
+.grid-imgbox {
+	display: grid;
+	width: calc(100% + 12rpx);
+	margin-right: -12rpx;
+	margin-bottom: -12rpx;
+	--wadth: 200rpx;
+
+	view {
+		width: 100%;
+		height: 100%;
+		padding-right: 12rpx;
+		padding-bottom: 12rpx;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	image {
+		width: 100%;
+		height: 100%;
+		border-radius: 12rpx;
+		display: block;
+	}
+}
+
+.grid-imgbox1 {
+	grid-template-columns: 100%;
+	grid-template-rows: 500rpx;
+}
+
+.grid-imgbox2 {
+	grid-template-columns: 50% 50%;
+	grid-template-rows: 320rpx;
+}
+
+.grid-imgbox3 {
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: var(--wadth);
+}
+
+.grid-imgbox4 {
+	grid-template-columns: 50% 50%;
+	grid-template-rows: 280rpx 280rpx;
+}
+
+.grid-imgbox5 {
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: repeat(2, var(--wadth));
+}
+
+.grid-imgbox6 {
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: repeat(2, var(--wadth));
+}
+
+.grid-imgbox7 {
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: repeat(3, var(--wadth));
+}
+
+.grid-imgbox8 {
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: repeat(3, var(--wadth));
+}
+
+.grid-imgbox9 {
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: repeat(3, var(--wadth));
+}
+
+.pic-picker-box {
+	.upload-view {
+		padding: 8rpx 0;
+		display: flex;
+		flex-wrap: wrap;
+
+		::v-deep.file-picker__box {
+			width: 25% !important;
+			padding-top: 25% !important;
+		}
+
+		.item {
+			width: 160rpx;
+			height: 160rpx;
+			margin-right: 20rpx;
+			margin-bottom: 20rpx;
+			position: relative;
+			border: 1px solid #DDDDDD;
+			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
+			border-radius: 12rpx;
+
+			&.no-margin {
+				margin: 0;
+			}
+
+			.img {
+				width: 160rpx;
+				height: 160rpx;
+			}
+
+			.avatar {
+				width: 100%;
+				height: 100%;
+			}
+
+			.clear-btn {
+				position: absolute;
+				right: -12rpx;
+				top: -12rpx;
+				width: 40rpx;
+				height: 40rpx;
+				background-color: rgba(0, 0, 0, 0.6);
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 2;
+
+				.clear-icon {
+					color: #ffffff;
+					font-size: 28rpx;
+					line-height: 0.1;
+					font-weight: 300;
+				}
+			}
+		}
+	}
+
+	.tips {
+		padding-bottom: 12rpx;
+		font-size: 26rpx;
+		color: #999999;
+	}
+}
+
+
+.face {
+	width: 480rpx;
+	height: 480rpx;
+}
+</style>

package/dist/components/uni-app/VideoPicker.vue

@@ -0,0 +1,462 @@
+<template>
+    <view class="video-picker-wrapper">
+        <view class="video-picker-box" v-if="!readonly">
+            <view class="upload-view">
+                <!-- 视频预览列表 -->
+                <view class="item video-item flex-center" v-for="(video, index) in fileList" :key="index">
+                    <video :id="'videoPlayer' + index" class="avatar" :src="video.url" 
+                        :controls="activeVideoIndex === index" :loop="true"
+                        :show-center-play-btn="false" :muted="activeVideoIndex !== index" 
+                        @click.stop="handleVideoPlay(index)"
+                        @fullscreenchange="handleFullscreenChange"></video>
+
+                    <!-- 播放按钮 -->
+                    <view class="play-btn" v-if="activeVideoIndex !== index" @click.stop="handleVideoPlay(index)">
+                        <image class="play-icon" src="../../assets/videoPlay.png"></image>
+                    </view>
+
+                    <!-- 删除按钮 -->
+                    <view class="clear-btn" @click="removeFile(index)">
+                        <text class="clear-icon">×</text>
+                    </view>
+                </view>
+
+                <!-- 上传中状态 -->
+                <view class="item flex-center upload-trigger uploading" v-if="uploading">
+                    <image class="loading-icon" src="../../assets/loading.png" />
+                    <view class="upload-text" style="font-size: 22rpx;">上传中 {{ uploadProgress }}%</view>
+                    <view class="progress-bar">
+                        <view class="progress-bar-inner" :style="{ width: uploadProgress + '%' }"></view>
+                    </view>
+                </view>
+
+                <!-- 自定义上传按钮插槽 -->
+                <slot name="upload-button" :select="selectAndUploadVideo" :count="fileList.length">
+                    <!-- 默认上传按钮 -->
+                    <view class="item flex-center selection upload-trigger"
+                        :class="{ 'no-margin': fileList.length === 0 }" 
+                        v-if="fileList.length < limit && !uploading"
+                        @click="selectAndUploadVideo">
+                        <image :src="defaultUploadIcon" style="width: 64rpx;height: 64rpx;"></image>
+                        <view class="upload-text">上传视频</view>
+                    </view>
+                </slot>
+            </view>
+        </view>
+
+        <!-- 只读模式 -->
+        <view class="video-readonly" v-else-if="fileList.length">
+            <view class="video-list">
+                <view class="video-item-readonly" v-for="(video, index) in fileList" :key="index">
+                    <video class="video-player" :src="video.url" controls></video>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'VideoPicker',
+    props: {
+        /** 上传地址 */
+        uploadUrl: {
+            type: String,
+            default: ''
+        },
+        /** 只读模式 */
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        /** 视频文件列表 */
+        files: {
+            type: Array,
+            default: () => []
+        }, 
+        /** 最大上传数量 */
+        limit: {
+            type: Number,
+            default: 9
+        },
+        /** 上传按钮的默认图标 */
+        defaultUploadIcon: {
+            type: String,
+            default: require('../../assets/uploadVideoBg.png')
+        },
+    },
+    data() {
+        return {
+            fileList: [],
+            uploading: false,
+            uploadProgress: 0,
+            activeVideoIndex: -1,  // 当前播放的视频索引，-1 表示没有播放
+            videoContext: null,
+        }
+    },
+    watch: {
+        files(val) {
+            this.fileList = val
+        }
+    },
+    mounted() {
+        this.fileList = this.files
+    },
+    methods: {
+        /**
+         * 处理视频播放
+         * @param {number} index - 视频索引
+         */
+        handleVideoPlay(index) {
+            if (this.activeVideoIndex !== index) {
+                this.videoContext = uni.createVideoContext('videoPlayer' + index, this)
+                this.videoContext.requestFullScreen()
+                this.videoContext.play()
+                this.activeVideoIndex = index
+            }
+        },
+
+        /**
+         * 处理全屏变化
+         */
+        handleFullscreenChange(e) {
+            if (!e.detail.fullScreen) {
+                this.activeVideoIndex = -1
+                if (this.videoContext) {
+                    this.videoContext.pause()
+                }
+            }
+        },
+
+        /**
+         * 选择并上传视频
+         */
+        selectAndUploadVideo() {
+            if (this.fileList.length >= this.limit || this.uploading) {
+                if (this.fileList.length >= this.limit) {
+                    uni.showToast({
+                        title: `最多上传${this.limit}个视频`,
+                        icon: 'none'
+                    })
+                }
+                return
+            }
+
+            uni.chooseVideo({
+                sourceType: ['camera', 'album'], 
+                success: (res) => { 
+                    this.uploading = true
+                    this.uploadProgress = 0
+
+                    // 直接上传视频，不获取封面（让服务端处理或用户手动选择）
+                    this.uploadVideo(res.tempFilePath)
+                }
+            })
+        },
+
+        /**
+         * 上传视频
+         * @param {string} filePath - 视频文件路径 
+         */
+        uploadVideo(filePath) {
+            const uploadTask = uni.uploadFile({
+                url: this.uploadUrl,
+                filePath,
+                name: "file",
+                success: (uploadFileRes) => {
+                    const result = JSON.parse(uploadFileRes.data)
+                    console.log('视频上传成功:', result)
+
+                    // 添加视频到列表
+                    const fileInfo = {
+                        fileName: result.data.fileName,
+                        name: result.data.originFileName || 'video',
+                        url: result.data.pathUrl
+                    }
+
+                    this.fileList.push(fileInfo)
+                    this.uploadProgress = 100
+                    this.uploading = false
+                    this.emitChange()
+                },
+                fail: (err) => {
+                    console.error('视频上传失败:', err)
+                    uni.showToast({
+                        icon: 'none',
+                        title: '视频上传失败'
+                    })
+                    this.uploading = false
+                }
+            })
+
+            // 监听上传进度
+            uploadTask.onProgressUpdate((res) => {
+                this.uploadProgress = res.progress
+                this.$emit('progress', {
+                    ...res,
+                    stage: 'video'
+                })
+            })
+        },
+
+        /**
+         * 删除视频
+         * @param {number} index - 视频索引
+         */
+        removeFile(index) {
+            this.fileList.splice(index, 1)
+            
+            // 如果删除的是当前播放的视频，重置播放状态
+            if (this.activeVideoIndex === index) {
+                this.activeVideoIndex = -1
+                if (this.videoContext) {
+                    this.videoContext.pause()
+                }
+            } else if (this.activeVideoIndex > index) {
+                // 如果删除的视频在当前播放视频之前，索引需要减1
+                this.activeVideoIndex--
+            }
+            
+            this.emitChange()
+        },
+
+        /**
+         * 触发变更事件
+         */
+        emitChange() {
+            this.$emit('change', this.fileList)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.video-picker-wrapper {
+    width: 100%;
+}
+
+.flex-align-center {
+    display: flex;
+    align-items: center;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+}
+
+.selection {
+    background: #FBFBFB;
+    border-radius: 16rpx 16rpx 16rpx 16rpx;
+    border: 2rpx dashed #DDDDDD !important;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:active {
+        opacity: 0.7;
+    }
+}
+
+.upload-trigger {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .upload-text {
+        color: #999;
+        font-size: 24rpx;
+        margin-top: 8rpx;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.video-picker-box {
+    .upload-view {
+        padding: 8rpx 0;
+        display: flex;
+        flex-wrap: wrap;
+        min-height: 208rpx;
+
+        .item {
+            width: 160rpx;
+            height: 160rpx;
+            margin-right: 20rpx;
+            margin-bottom: 20rpx;
+            position: relative;
+            border: 1px solid #DDDDDD;
+            box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
+            border-radius: 12rpx;
+
+            &.no-margin {
+                margin: 0;
+            }
+
+            &.video-item {
+                width: 160rpx;
+                height: 160rpx;
+            }
+
+            .avatar {
+                width: 100%;
+                height: 100%;
+                border-radius: 12rpx;
+            }
+
+            .play-btn {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 60rpx;
+                height: 60rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 2;
+
+                .play-icon {
+                    width: 100%;
+                    height: 100%;
+                    opacity: 0.9;
+                }
+            }
+
+            .clear-btn {
+                position: absolute;
+                right: -12rpx;
+                top: -12rpx;
+                width: 40rpx;
+                height: 40rpx;
+                background-color: rgba(0, 0, 0, 0.6);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 2;
+
+                .clear-icon {
+                    color: #ffffff;
+                    font-size: 28rpx;
+                    line-height: 0.1;
+                    font-weight: 300;
+                }
+            }
+
+            .upload-progress {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0.5);
+                border-radius: 12rpx;
+                z-index: 3;
+
+                .progress-mask {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .loading-icon {
+                    font-size: 60rpx;
+                    color: #ffffff;
+                    animation: rotate 0.8s linear infinite;
+                }
+
+                .progress-text {
+                    color: #ffffff;
+                    font-size: 24rpx;
+                    margin-top: 16rpx;
+                }
+
+                .progress-bar {
+                    width: 120rpx;
+                    height: 8rpx;
+                    background-color: rgba(255, 255, 255, 0.3);
+                    border-radius: 4rpx;
+                    margin-top: 16rpx;
+                    overflow: hidden;
+
+                    .progress-bar-inner {
+                        height: 100%;
+                        background-color: #1890ff;
+                        border-radius: 4rpx;
+                        transition: width 0.3s;
+                    }
+                }
+            }
+        }
+
+        .uploading {
+            border: 2rpx dashed #1890ff;
+            background-color: rgba(24, 144, 255, 0.05);
+
+            .loading-icon {
+                height: 48rpx;
+                width: 48rpx;
+                color: #1890ff;
+                animation: rotate 2s linear infinite;
+            }
+
+            .upload-text {
+                color: #1890ff;
+                font-size: 24rpx;
+            }
+
+            .progress-bar {
+                width: 140rpx;
+                height: 12rpx;
+                background-color: #e6f7ff;
+                border-radius: 6rpx;
+                margin-top: 16rpx;
+                overflow: hidden;
+
+                .progress-bar-inner {
+                    height: 100%;
+                    background-color: #1890ff;
+                    border-radius: 6rpx;
+                    transition: width 0.3s;
+                }
+            }
+        }
+    }
+}
+
+.video-readonly {
+    width: 100%;
+
+    .video-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20rpx;
+
+        .video-item-readonly {
+            width: 100%;
+
+            .video-player {
+                width: 100%;
+                height: 400rpx;
+                border-radius: 12rpx;
+            }
+        }
+    }
+}
+
+.tips {
+    padding-bottom: 12rpx;
+    font-size: 26rpx;
+    color: #999999;
+}
+</style>

package/dist/types/uniapp.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/uniapp.js

@@ -0,0 +1,16 @@
+/**
+ * uni-app 专用组件导出
+ * 使用方式: import { PicPicker, VideoPicker } from 'xydata-tools/dist/uniapp'
+ * 
+ * @module uniapp
+ */
+
+/**
+ * PicPicker - uni-app 图片选择上传组件
+ */
+export { default as PicPicker } from "./components/uni-app/PicPicker.vue";
+
+/**
+ * VideoPicker - uni-app 视频选择上传组件
+ */
+export { default as VideoPicker } from "./components/uni-app/VideoPicker.vue";

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "xydata-tools",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "description": "xydata tools",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js", 
+    "./uniapp": "./dist/uniapp.js"
+  },
   "scripts": {
     "dev": "yarn link && father dev",
     "build": "father build",
@@ -28,8 +32,12 @@
     "@babel/core": "7.24.9",
     "@babel/preset-env": "7.24.8",
     "@babel/preset-react": "7.24.7",
+    "@vitejs/plugin-vue2": "2.3.1",
     "father": "4.1.5",
-    "terser": "5.31.3"
+    "terser": "5.31.3",
+    "vue": "2.7.16",
+    "vue-loader": "15.11.1",
+    "vue-template-compiler": "2.7.16"
   },
   "dependencies": {
     "@ant-design/icons": "4.5.0",
@@ -41,6 +49,7 @@
     "querystring": "0.2.1",
     "stringify": "5.2.0",
     "styled-components": "4.4.1",
-    "umi-request": "1.0.8"
+    "umi-request": "1.0.8",
+    "compressorjs": "1.2.1"
   }
 }