hw-cus-ui 1.0.25 → 1.1.1

package/HwCheckbox/README.md

@@ -0,0 +1,111 @@
+# HwCheckbox 组件使用说明
+
+HwCheckbox 是一个复选框组件，支持编辑模式和详情模式，可以显示复选框或只读文本。
+
+## 功能特性
+
+- 支持编辑模式和详情模式
+- 支持双向数据绑定
+- 支持自定义选项数据
+- 支持必填标识显示
+- 支持自定义样式
+
+## 属性 (Props)
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| [marginTop](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L41-L43) | string | '20px' | 上边距 |
+| [pageType](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L44-L46) | string | 'checkbox' | 页面类型，用于区分编辑页面还是详情页面 |
+| [label](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L47-L49) | string | - | 字段标签名称（必填） |
+| [types](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L50-L52) | string | 'add' | 类型标识，用于控制样式显示 |
+| [required](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L53-L55) | boolean | false | 是否必填项，true时会显示红色星号 |
+| [localdata](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L56-L59) | Array<any> | - | 下拉选项数据列表，每项应包含value和text属性 |
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| update:modelValue | (value: string \| number) | 当值变化时触发 |
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <HwCheckbox
+    v-model="checkboxValue"
+    label="选择项"
+    :localdata="checkboxOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwCheckbox from '@/components/HwCheckbox/HwCheckbox.vue';
+
+const checkboxValue = ref('');
+const checkboxOptions = [
+  { value: 'option1', text: '选项1' },
+  { value: 'option2', text: '选项2' },
+  { value: 'option3', text: '选项3' }
+];
+</script>
+```
+
+### 详情模式
+
+```vue
+<template>
+  <HwCheckbox
+    v-model="checkboxValue"
+    label="选择项"
+    :localdata="checkboxOptions"
+    pageType="detail"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwCheckbox from '@/components/HwCheckbox/HwCheckbox.vue';
+
+const checkboxValue = ref('option1');
+const checkboxOptions = [
+  { value: 'option1', text: '选项1' },
+  { value: 'option2', text: '选项2' },
+  { value: 'option3', text: '选项3' }
+];
+</script>
+```
+
+### 必填项
+
+```vue
+<template>
+  <HwCheckbox
+    v-model="checkboxValue"
+    label="必填选择项"
+    :required="true"
+    :localdata="checkboxOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwCheckbox from '@/components/HwCheckbox/HwCheckbox.vue';
+
+const checkboxValue = ref('');
+const checkboxOptions = [
+  { value: 'option1', text: '选项1' },
+  { value: 'option2', text: '选项2' }
+];
+</script>
+```
+
+## 注意事项
+
+1. 组件使用了 uni-data-checkbox 作为基础组件
+2. 在详情模式下，组件只显示选中项的文本，不提供编辑功能
+3. [localdata](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L56-L59) 属性的每个选项对象需要包含 [value](file:///e:/temp/my-components/src/components/HwPickerTree/HwPickerTree.vue#L35-L40) 和 text 属性
+4. [pageType](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L44-L46) 设置为 'detail' 时会显示为只读的详情模式
+5. 组件支持通过插槽自定义内容

package/HwDraggableBottomPopup/README.md

@@ -0,0 +1,127 @@
+# HwDraggableBottomPopup 组件使用说明
+
+HwDraggableBottomPopup 是一个可拖拽的底部弹窗组件，支持触摸拖拽调整位置，适用于需要用户交互调整内容区域的场景。
+
+## 功能特性
+
+- 支持触摸拖拽调整弹窗位置
+- 可自定义弹窗高度
+- 支持拖拽过程中实时调整内容区域高度
+- 防抖处理确保性能
+- 灵活的内容插槽
+
+## 属性 (Props)
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| [heightCalc](file:///e:/temp/my-components/src/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue#L31-L35) | String | '0.4' | 弹窗高度计算比例，相对于屏幕高度的百分比 |
+| [isDrag](file:///e:/temp/my-components/src/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue#L36-L40) | Boolean | true | 是否启用拖拽功能 |
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| changeTop | (top: number) | 拖拽过程中顶部位置变化时触发 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+|--------|------|
+| default | 默认插槽，用于放置弹窗内容 |
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup>
+      <view class="popup-content">
+        <p>这里是弹窗内容</p>
+        <p>可以放置任何内容</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+</script>
+
+<style>
+.popup-content {
+  padding: 20rpx;
+  height: 100%;
+}
+</style>
+```
+
+### 自定义高度
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup :heightCalc="'0.6'">
+      <view class="popup-content">
+        <p>初始高度为屏幕高度的60%</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+</script>
+```
+
+### 禁用拖拽
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup :isDrag="false">
+      <view class="popup-content">
+        <p>此弹窗不可拖拽</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+</script>
+```
+
+### 监听位置变化
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup @changeTop="onTopChange">
+      <view class="popup-content">
+        <p>拖拽弹窗查看位置变化</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+
+const onTopChange = (top) => {
+  console.log('弹窗顶部位置:', top);
+};
+</script>
+```
+
+## 注意事项
+
+1. 组件使用了 uni-app 的触摸事件和系统信息API
+2. 弹窗默认从屏幕底部开始，初始位置在屏幕外
+3. 拖拽功能通过触摸事件实现，支持触摸开始、移动和结束
+4. 弹窗内容区域高度会根据拖拽位置自动调整
+5. 组件使用了防抖函数优化性能，避免频繁更新内容区域高度
+6. 当启用拖拽功能时，组件会添加圆角边框以提供更好的视觉效果
+7. 组件内部使用了 flex 布局，内容区域会自动适应可用空间

package/HwFileUpload/README.md

@@ -0,0 +1,119 @@
+# HwFileUpload 组件使用说明
+
+HwFileUpload 是一个文件上传组件，支持图片和文件上传、预览、下载和删除功能。可通过 [isImg](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L63-L63) 属性控制是图片模式还是文件模式展示。
+
+## 功能特性
+
+- 支持图片和文件上传
+- 支持图片预览功能
+- 支持文件下载功能
+- 支持文件删除功能
+- 可切换图片模式和文件模式
+- 支持多种文件类型的上传限制
+- 支持详情模式和添加模式
+
+## 属性 (Props)
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| [fileType](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L54-L54) | Array | ['pdf', 'xlsx', 'docx', 'doc', 'zip', 'rar', 'exe'] | 允许上传的文件类型列表 |
+| [modelValue](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L55-L55) | Array | - | 绑定值，文件列表 |
+| [isImg](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L63-L63) | boolean | false | 是否为图片模式 |
+| [border](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L64-L64) | boolean | true | 是否显示下边框 |
+| [marginTop](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L65-L65) | string | '20px' | 上边距 |
+| [types](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L66-L66) | string | 'add' | 组件类型，'add' 为添加模式，'detail' 为详情模式 |
+| [required](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L67-L67) | boolean | false | 是否必填 |
+| [label](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L68-L68) | string | - | 标签文本 |
+| [isLink](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L59-L59) | boolean | false | 是否为链接模式 |
+| [baseUrl](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L60-L60) | string | '' | 基础URL |
+| [apiUrl](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L61-L61) | string | '' | API上传地址 |
+| [headers](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L62-L62) | object | {} | 上传请求头 |
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| update:modelValue | (value: any[]) | 当文件列表发生变化时触发 |
+
+## 使用示例
+
+### 图片上传模式
+
+```vue
+<template>
+  <HwFileUpload
+    v-model="imageList"
+    label="图片上传"
+    :isImg="true"
+    :fileType="['jpg', 'jpeg', 'png', 'gif']"
+    :required="true"
+    apiUrl="/api/upload"
+    :headers="headers"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwFileUpload from '@/components/HwFileUpload/HwFileUpload.vue';
+
+const imageList = ref([]);
+const headers = { 'Authorization': 'Bearer token' };
+</script>
+```
+
+### 文件上传模式
+
+```vue
+<template>
+  <HwFileUpload
+    v-model="fileList"
+    label="附件上传"
+    :isImg="false"
+    :fileType="['pdf', 'doc', 'docx', 'xlsx']"
+    :required="true"
+    apiUrl="/api/upload"
+    :headers="headers"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwFileUpload from '@/components/HwFileUpload/HwFileUpload.vue';
+
+const fileList = ref([]);
+const headers = { 'Authorization': 'Bearer token' };
+</script>
+```
+
+### 详情模式（只读）
+
+```vue
+<template>
+  <HwFileUpload
+    v-model="fileList"
+    label="附件列表"
+    :isImg="false"
+    types="detail"
+    :required="false"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwFileUpload from '@/components/HwFileUpload/HwFileUpload.vue';
+
+const fileList = ref([
+  { name: 'example.pdf', url: '/path/to/example.pdf' },
+  { name: 'document.docx', url: '/path/to/document.docx' }
+]);
+</script>
+```
+
+## 注意事项
+
+1. 上传功能需要配置 [apiUrl](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L61-L61) 和 [baseUrl](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L60-L60) 属性
+2. 文件类型限制通过 [fileType](file:///e:/temp/my-components/src/components/HwFileUpload/HwFileUpload.vue#L54-L54) 属性控制
+3. 在详情模式下，组件只显示文件列表，不提供上传、删除等操作
+4. 文件大小显示单位为KB
+5. 图片上传使用 [uni.previewImage](file:///e:/temp/my-components/node_modules/@dcloudio/uni-app-plus/types/index.d.ts#L210-L216) 进行预览
+6. 文件下载使用 [file-saver](file:///e:/temp/my-components/package.json#L24-L24) 库实现

package/HwInput/README.md

@@ -0,0 +1,134 @@
+# HwInput 组件使用说明
+
+HwInput 是一个输入框组件，支持编辑模式和详情模式，可以显示输入框或只读文本。
+
+## 功能特性
+
+- 支持编辑模式和详情模式
+- 支持双向数据绑定
+- 支持自定义样式
+- 支持必填标识显示
+- 支持子值显示
+
+## 属性 (Props)
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| [marginTop](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L42-L42) | string | '20px' | 上边距 |
+| [types](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L43-L43) | string | 'add' | 组件类型，'add'为编辑模式，'detail'为详情模式 |
+| [subValue](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L44-L44) | string | '' | 子值，在详情模式下额外显示的信息 |
+| [styles](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L45-L45) | object | {} | 自定义样式对象 |
+| [required](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L46-L46) | boolean | false | 是否必填，为true时显示红色星号 |
+| [borderBottom](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L47-L47) | string | '1rpx solid rgba(17, 31, 44, 0.12)' | 设置下边框 |
+| [label](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L48-L48) | string | - | 标签文本，必填项 |
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| update:modelValue | (value: string \| number) | 当值变化时触发 |
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <HwInput
+    v-model="inputValue"
+    label="姓名"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwInput from '@/components/HwInput/HwInput.vue';
+
+const inputValue = ref('');
+</script>
+```
+
+### 详情模式
+
+```vue
+<template>
+  <HwInput
+    v-model="inputValue"
+    label="姓名"
+    types="detail"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwInput from '@/components/HwInput/HwInput.vue';
+
+const inputValue = ref('张三');
+</script>
+```
+
+### 必填项
+
+```vue
+<template>
+  <HwInput
+    v-model="inputValue"
+    label="邮箱"
+    :required="true"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwInput from '@/components/HwInput/HwInput.vue';
+
+const inputValue = ref('');
+</script>
+```
+
+### 带子值的详情模式
+
+```vue
+<template>
+  <HwInput
+    v-model="inputValue"
+    label="价格"
+    types="detail"
+    subValue="元"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwInput from '@/components/HwInput/HwInput.vue';
+
+const inputValue = ref('100');
+</script>
+```
+
+### 自定义样式
+
+```vue
+<template>
+  <HwInput
+    v-model="inputValue"
+    label="描述"
+    :styles="{ color: 'blue', fontSize: '36rpx' }"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwInput from '@/components/HwInput/HwInput.vue';
+
+const inputValue = ref('');
+</script>
+```
+
+## 注意事项
+
+1. 组件使用了 uni-easyinput 作为基础组件
+2. 在详情模式下，组件只显示值，不提供编辑功能
+3. [types](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L43-L43) 设置为 'detail' 时会显示为只读的详情模式
+4. 如果 [value](file:///e:/temp/my-components/src/components/HwPickerTree/HwPickerTree.vue#L35-L40) 为空，在详情模式下会显示为 '-'
+5. [subValue](file:///e:/temp/my-components/src/components/HwInput/HwInput.vue#L44-L44) 只在详情模式下且有值时显示