xydata-tools-uniapp 1.0.0 → 1.0.1

package/README.md

@@ -1,60 +1,116 @@
-# xydata-tools-uniapp
-
-鑫义科技 uni-app 组件库，从 `xydata-tools` 独立拆分而来，专注于 uni-app 端（微信小程序 / H5 / App）的组件能力。
-
-## 组件清单
-
-- **MediaPicker** - 媒体（图片/视频）选择上传组件，支持图片水印、拖拽排序、只读预览等
-- **FilePicker** - 文件选择上传组件
-
-## 本地开发
-
-1. 在项目根目录执行：
-
-    ```bash
-    yarn dev
-    ```
-
-2. 在 example-uniapp 下运行：
-
-    ```bash
-    yarn link xydata-tools-uniapp
-    ```
-
-3. 将 example-uniapp 添加到 H-Builder 中运行
-
-    > example-uniapp 的 `pages.json` 中 `easycom` 已配置好组件路径，会自动扫描引入。
-
-## 构建发布
-
-```bash 
-npm run prepublishOnly
-```
-
-发布 npm 包：
-
-```bash
-npm config set registry https://registry.npmjs.org
-npm publish -d
-```
-
-发布完成后，还原 npm 源（淘宝源）：
-
-```bash
-npm config set registry https://registry.npmmirror.com
-```
-
-## 目录结构
-
-```
-src/
-  index.js              # 组件库入口（导出 MediaPicker / FilePicker）
-  index.d.ts            # 类型声明
-  components/uni-app/   # uni-app 组件源码
-  utils/                # 共享工具（watermark-shared 等）
-  assets/               # 组件图片资源
-example-uniapp/         # 示例工程（HBuilder 直接运行）
-docs/                   # 组件文档
-```
-
----
+# xydata-tools-uniapp
+
+鑫义科技 uni-app 组件库，提供跨 H5、微信小程序和 App 的媒体、附件选择上传能力。
+
+## 组件
+
+| 组件 | 用途 |
+| --- | --- |
+| `MediaPicker` | 图片、视频选择上传，支持拖拽排序、只读预览和图片水印 |
+| `FilePicker` | 文档、压缩包和图片附件选择上传、预览与删除 |
+
+## 安装
+
+```bash
+npm install xydata-tools-uniapp
+# 或
+yarn add xydata-tools-uniapp
+```
+
+## 引用方式
+
+### H5
+
+H5 推荐从包入口引入，并在当前页面注册组件。这样运行时和编辑器都能识别组件及其 Props。
+
+```vue
+<script>
+import { MediaPicker, FilePicker } from 'xydata-tools-uniapp';
+
+export default {
+  components: { MediaPicker, FilePicker },
+};
+</script>
+```
+
+### 微信小程序
+
+微信小程序优先推荐使用 easycom。它由 uni-app 编译器直接解析组件路径，使用页面无需重复 import 或注册，最适合小程序项目。
+
+```js
+// 如需显式注册或 easycom 无法解析，再使用深层 .vue 路径
+import MediaPicker from 'xydata-tools-uniapp/dist/components/uni-app/media-picker/media-picker.vue';
+import FilePicker from 'xydata-tools-uniapp/dist/components/uni-app/file-picker/file-picker.vue';
+
+export default {
+  components: { MediaPicker, FilePicker },
+};
+```
+
+在 `pages.json` 中配置：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^MediaPicker$": "xydata-tools-uniapp/dist/components/uni-app/media-picker/media-picker.vue",
+      "^FilePicker$": "xydata-tools-uniapp/dist/components/uni-app/file-picker/file-picker.vue"
+    }
+  }
+}
+```
+
+### 编辑器提示
+
+easycom 负责自动引入和编译，不一定能提供模板 Props 提示。需要编辑器提示时，在当前页面显式 import 并写入 `components`；这属于开发体验优化，不改变微信小程序的首选运行方式。
+
+## 本地开发
+
+```bash
+# 组件库根目录
+yarn dev
+
+# 示例工程目录，建立本地链接
+yarn link xydata-tools-uniapp
+```
+
+然后使用 HBuilderX 打开 `example-uniapp`。示例页面采用显式 import 和注册，便于同时验证 H5、微信小程序和编辑器提示。
+
+## 构建与发布
+
+`prepack` 会在发布前自动执行 Father 构建、Vue 内 SCSS 编译、已编译 SCSS 清理，以及发布产物检查。
+
+```bash
+npm run prepack
+npm publish
+```
+
+`npm publish` 会自动触发 `prepack`，通常不需要手动重复执行。发布前可使用 `npm pack --dry-run` 查看最终文件清单。
+
+## 类型声明
+
+公开类型位于 `src/types`，按组件或模块拆分。构建后入口为 `dist/types/index.d.ts`，组件深层 `.vue` 路径旁保留对应的声明桥接文件。
+
+```ts
+import {
+  FilePicker,
+  MediaPicker,
+  type MediaFile,
+  type WatermarkConfig,
+} from 'xydata-tools-uniapp';
+```
+
+## 目录结构
+
+```text
+src/
+  index.js              # 包入口
+  types/                # 公开类型声明
+  components/uni-app/   # uni-app 组件源码
+  utils/                # 水印及共享工具
+  assets/               # 组件资源
+docs/uniapp/            # 组件文档
+example-uniapp/         # 示例工程
+scripts/                # 发布产物检查脚本
+```

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

@@ -628,6 +628,172 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import './styles.scss';
+<style>
+.file-picker-wrapper {
+  width: 100%;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.file-picker-box .upload-view {
+  padding: 8rpx 0;
+}
+.file-picker-box .upload-view .file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 20rpx;
+  margin-top: 12rpx;
+  background-color: #fff;
+  border-radius: 8rpx;
+  border: 2rpx solid #e5e5e5;
+  transition: all 0.3s;
+}
+.file-picker-box .upload-view .file-item:active {
+  background-color: #f5f5f5;
+}
+.file-picker-box .upload-view .file-item .file-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.file-picker-box .upload-view .file-item .file-info .file-icon {
+  width: 56rpx;
+  height: 56rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+.file-picker-box .upload-view .file-item .file-info .file-icon .icon-image {
+  width: 100%;
+  height: 100%;
+}
+.file-picker-box .upload-view .file-item .file-info .file-icon .loading-icon {
+  width: 100%;
+  height: 100%;
+  animation: rotate 2s linear infinite;
+}
+.file-picker-box .upload-view .file-item .file-info .file-content {
+  flex: 1;
+  min-width: 0;
+}
+.file-picker-box .upload-view .file-item .file-info .file-content .file-name {
+  display: block;
+  font-size: 28rpx;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-picker-box .upload-view .file-item .file-actions {
+  margin-left: 16rpx;
+  position: relative;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.file-picker-box .upload-view .file-item .file-actions .delete-btn {
+  color: #fff;
+  font-size: 32rpx;
+  line-height: 1;
+  font-weight: 300;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding-bottom: 2px;
+}
+.file-picker-box .upload-view .file-item .file-actions .delete-btn:active {
+  opacity: 0.8;
+}
+.file-picker-box .upload-view .file-item .progress-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8rpx;
+  background-color: #e6f7ff;
+  border-radius: 0 0 12rpx 12rpx;
+  overflow: hidden;
+}
+.file-picker-box .upload-view .file-item .progress-bar .progress-bar-inner {
+  height: 100%;
+  background-color: #1890ff;
+  transition: width 0.3s;
+}
+.file-picker-box .upload-view .file-item.uploading-item {
+  border-color: #1890ff;
+  background-color: rgba(24, 144, 255, 0.05);
+  position: relative;
+  padding-bottom: 24rpx;
+}
+.file-picker-box .upload-view .file-item.uploading-item .file-name {
+  color: #1890ff;
+}
+.file-picker-box .upload-view .upload-btn {
+  width: 100%;
+  height: 80rpx;
+  background-color: #fff;
+  color: #1890ff;
+  border: 2rpx solid #1890ff;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  transition: all 0.3s;
+}
+.file-picker-box .upload-view .upload-btn:active {
+  opacity: 0.8;
+  background-color: #ecf5ff;
+}
+.file-picker-box .upload-view .upload-btn::after {
+  border: none;
+}
+
+.file-readonly .file-item {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  margin-bottom: 12rpx;
+  background-color: #fff;
+  border-radius: 8rpx;
+  border: 2rpx solid #e5e5e5;
+  transition: all 0.3s;
+}
+.file-readonly .file-item:active {
+  background-color: #f5f5f5;
+}
+.file-readonly .file-item .file-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.file-readonly .file-item .file-info .file-icon {
+  width: 56rpx;
+  height: 56rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+.file-readonly .file-item .file-info .file-icon .icon-image {
+  width: 100%;
+  height: 100%;
+}
+.file-readonly .file-item .file-info .file-content {
+  flex: 1;
+  min-width: 0;
+}
+.file-readonly .file-item .file-info .file-content .file-name {
+  display: block;
+  font-size: 28rpx;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

package/dist/components/uni-app/file-picker/file-picker.vue.d.ts

@@ -0,0 +1 @@
+export { default } from '../../../types/file-picker';