uview-pro 0.0.8 → 0.0.10

package/changelog.md

@@ -1,8 +1,23 @@
+## 0.0.10（2025-08-26）
+
+### ✨ Features | 新功能
+
+-   添加 easycom 组件自动扫描 ([b125039](https://gitee.com/anyup/uView-Pro/commit/b1250390a4f594f5deaa133d7a92bd6e72707890))
+-   增强 u-select 组件的类型安全和功能 ([38635e9](https://gitee.com/anyup/uView-Pro/commit/38635e963f9eff6e4c730692e8c97f10b3a092c5))
+
+## 0.0.9（2025-08-25）
+
+### ♻️ Code Refactoring | 代码重构
+
+-   优化全局工具导出方式 ([7a80b6f](https://gitee.com/anyup/uView-Pro/commit/7a80b6f99ad3022ca995f99f8ec6803af7941eb9))
+
 ## 0.0.8（2025-08-25）
+
 ### ♻️ Code Refactoring | 代码重构
 
 -   重构组件 Props 属性定义，每个组件具有完善的 ts 类型定义 ([8cc0de7](https://gitee.com/anyup/uView-Pro/commit/8cc0de7c1527b48dd223d89207135eea01766294))
 -   重构类型定义并统一到全局类型文件 global types ([b0fd010](https://gitee.com/anyup/uView-Pro/commit/b0fd0107289eb1c6df2f58d91b63d9b25902caee))
+
 ## 0.0.7（2025-08-21）
 
 ### 🐛 Bug Fixes | Bug 修复

package/components/u-select/types.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import type { SelectMode } from '../../types/global';
+import type { SelectListItem, SelectMode } from '../../types/global';
 
 /**
  * SelectProps 列选择器 props 类型定义
@@ -7,7 +7,7 @@ import type { SelectMode } from '../../types/global';
  */
 export const SelectProps = {
     /** 列数据 */
-    list: { type: Array as PropType<any[]>, default: () => [] },
+    list: { type: Array as PropType<SelectListItem[] | SelectListItem[][]>, default: () => [] },
     /** 是否显示边框 */
     border: { type: Boolean, default: true },
     /** 通过双向绑定控制组件的弹出与收起 */

package/components/u-select/u-select.vue

@@ -9,45 +9,29 @@
 			<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
 		</view>
 	</view> -->
-        <u-popup
-            :maskCloseAble="maskCloseAble"
-            mode="bottom"
-            :popup="false"
-            v-model="popupValue"
-            length="auto"
-            :safeAreaInsetBottom="safeAreaInsetBottom"
-            @close="close"
-            :z-index="uZIndex"
-        >
+        <u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="popupValue" length="auto"
+            :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
             <view class="u-select">
                 <view class="u-select__header" @touchmove.stop.prevent="">
-                    <view
-                        class="u-select__header__cancel u-select__header__btn"
-                        :style="{ color: cancelColor }"
-                        hover-class="u-hover-class"
-                        :hover-stay-time="150"
-                        @tap="getResult('cancel')"
-                    >
+                    <view class="u-select__header__cancel u-select__header__btn" :style="{ color: cancelColor }"
+                        hover-class="u-hover-class" :hover-stay-time="150" @tap="getResult('cancel')">
                         {{ cancelText }}
                     </view>
                     <view class="u-select__header__title">
                         {{ title }}
                     </view>
-                    <view
-                        class="u-select__header__confirm u-select__header__btn"
-                        :style="{ color: moving ? cancelColor : confirmColor }"
-                        hover-class="u-hover-class"
-                        :hover-stay-time="150"
-                        @touchmove.stop=""
-                        @tap.stop="getResult('confirm')"
-                    >
+                    <view class="u-select__header__confirm u-select__header__btn"
+                        :style="{ color: moving ? cancelColor : confirmColor }" hover-class="u-hover-class"
+                        :hover-stay-time="150" @touchmove.stop="" @tap.stop="getResult('confirm')">
                         {{ confirmText }}
                     </view>
                 </view>
                 <view class="u-select__body">
-                    <picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector" @pickstart="pickstart" @pickend="pickend" v-if="modelValue">
+                    <picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector"
+                        @pickstart="pickstart" @pickend="pickend" v-if="modelValue">
                         <picker-view-column v-for="(item, index) in columnData" :key="index">
-                            <view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="index1">
+                            <view class="u-select__body__picker-view__item" v-for="(item1, index1) in item"
+                                :key="index1">
                                 <view class="u-line-1">{{ item1[labelName] }}</view>
                             </view>
                         </picker-view-column>
@@ -61,6 +45,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
 import { SelectProps } from './types';
+import type { SelectListItem } from '../../types/global';
 
 defineOptions({
     name: 'u-select'
@@ -94,9 +79,9 @@ const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'click']);
 
 const defaultSelector = ref<number[]>([0]);
 // picker-view的数据
-const columnData = ref<any[][]>([]);
+const columnData = ref<SelectListItem[][]>([]);
 // 每次队列发生变化时，保存选择的结果
-const selectValue = ref<any[]>([]);
+const selectValue = ref<SelectListItem[]>([]);
 // 上一次列变化时的index
 const lastSelectIndex = ref<number[]>([]);
 // 列数
@@ -164,7 +149,7 @@ function setColumnNum() {
 
 // 获取需要展示在picker中的列数据
 function setColumnData() {
-    let data: any[][] = [];
+    let data: SelectListItem[][] = [];
     selectValue.value = [];
     if (props.mode == 'mutil-column-auto') {
         // 获得所有数据中的第一个元素
@@ -173,7 +158,7 @@ function setColumnData() {
         for (let i = 0; i < columnNum.value; i++) {
             // 第一列默认为整个list数组
             if (i == 0) {
-                data[i] = props.list;
+                data[i] = is2DList(props.list) ? props.list[i] || [] : props.list as SelectListItem[];
                 column = column && typeof column === 'object' ? column[props.childName] : [];
             } else {
                 // 大于第一列时，判断是否有默认选中的，如果没有就用该列的第一项
@@ -185,9 +170,9 @@ function setColumnData() {
             }
         }
     } else if (props.mode == 'single-column') {
-        data[0] = props.list;
+        data[0] = Array.isArray(props.list) && !is2DList(props.list) ? props.list as SelectListItem[] : [];
     } else if (props.mode == 'mutil-column') {
-        data = props.list as any[][];
+        data = is2DList(props.list) ? props.list : [props.list as SelectListItem[]];
     }
     columnData.value = data;
 }
@@ -286,6 +271,11 @@ function getResult(event: 'update:modelValue' | 'confirm' | 'cancel' | 'click' |
 function selectHandler() {
     emit('click');
 }
+
+// 类型守卫提前声明
+function is2DList(list: SelectListItem[] | SelectListItem[][]): list is SelectListItem[][] {
+    return Array.isArray(list) && list.length > 0 && Array.isArray(list[0]);
+}
 </script>
 
 <style scoped lang="scss">

package/index.ts

@@ -9,7 +9,7 @@ import timeFormat from './libs/function/timeFormat';
 // 时间戳格式化,返回多久之前
 import timeFrom from './libs/function/timeFrom';
 // 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
-import colorGradient from './libs/function/colorGradient';
+import colorGradients from './libs/function/colorGradient';
 // 生成全局唯一guid字符串
 import guid from './libs/function/guid';
 // 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
@@ -75,8 +75,8 @@ export interface UViewUtils {
     timeFormat: typeof timeFormat;
     date: typeof timeFormat;
     timeFrom: typeof timeFrom;
-    colorGradient: typeof colorGradient.colorGradient;
-    colorToRgba: typeof colorGradient.colorToRgba;
+    colorGradient: typeof colorGradients.colorGradient;
+    colorToRgba: typeof colorGradients.colorToRgba;
     guid: typeof guid;
     color: typeof color;
     sys: typeof sys;
@@ -89,8 +89,8 @@ export interface UViewUtils {
     post: typeof http.post;
     put: typeof http.put;
     delete: typeof http.delete;
-    hexToRgb: typeof colorGradient.hexToRgb;
-    rgbToHex: typeof colorGradient.rgbToHex;
+    hexToRgb: typeof colorGradients.hexToRgb;
+    rgbToHex: typeof colorGradients.rgbToHex;
     test: typeof test;
     random: typeof random;
     deepClone: typeof deepClone;
@@ -118,8 +118,8 @@ export const $u: UViewUtils = {
     timeFormat: timeFormat,
     date: timeFormat, // 另名date
     timeFrom,
-    colorGradient: colorGradient.colorGradient,
-    colorToRgba: colorGradient.colorToRgba,
+    colorGradient: colorGradients.colorGradient,
+    colorToRgba: colorGradients.colorToRgba,
     guid,
     color,
     sys,
@@ -132,8 +132,8 @@ export const $u: UViewUtils = {
     post: http.post,
     put: http.put,
     delete: http.delete,
-    hexToRgb: colorGradient.hexToRgb,
-    rgbToHex: colorGradient.rgbToHex,
+    hexToRgb: colorGradients.hexToRgb,
+    rgbToHex: colorGradients.rgbToHex,
     test,
     random,
     deepClone,
@@ -164,3 +164,39 @@ const install = (): void => {
 export default {
     install
 };
+
+// 工具方法单独导出，支持 import { deepClone } from 'uview-pro'
+export {
+    queryParams,
+    route,
+    timeFormat,
+    timeFrom,
+    guid,
+    color,
+    sys,
+    os,
+    type2icon,
+    randomArray,
+    deepClone,
+    deepMerge,
+    addUnit,
+    test,
+    random,
+    trim,
+    toast,
+    debounce,
+    throttle,
+    getRect,
+    getParent,
+    $parent,
+    parent,
+    parentData,
+    dispatch,
+    broadcast,
+    http,
+    config,
+    zIndex
+};
+
+// 颜色相关方法单独导出
+export const { colorGradient, colorToRgba, hexToRgb, rgbToHex } = colorGradients;

package/package.json

@@ -1,8 +1,8 @@
 {
     "id": "uview-pro",
     "name": "uview-pro",
-    "displayName": "uView Pro 基于Vue3+TS全面重构的UI组件库，拥有70+精选组件",
-    "version": "0.0.8",
+    "displayName": "【Vue3重构版】uView Pro 基于Vue3+TS全面重构的70+精选UI组件库",
+    "version": "0.0.10",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",

package/readme.md

@@ -69,7 +69,7 @@ uView Pro QQ 交流群： [点击进入](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027
 
 <table class="table">
     <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat.png?updatedAt=1755597368053" width="250" height="345" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat.png?updatedAt=1756174917808" width="250" height="345" ></td>
         <td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
     </tr>
     <tr>
@@ -103,85 +103,124 @@ pnpm add uview-pro
 
 [https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
 
-## 快速上手
+## 配置
 
-1. `main.ts`引入 uView 库
+uView Pro 支持 `npm` 和 `uni_modules` 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 easycom 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：
+
+### 1. 安装 uView Pro
+
+-   npm 安装：
+
+```bash
+npm install uview-pro
+# 或
+yarn add uview-pro
+# 或
+pnpm add uview-pro
+```
+
+-   uni_modules 安装：
+
+通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
+
+[插件市场：https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
+
+### 2. 引入 uView Pro 主库
+
+在 `main.ts` 中引入并注册 uView Pro：
 
 ```js
 // main.ts
 import { createSSRApp } from 'vue';
-// npm安装方式
+// npm 方式
 import uViewPro from 'uview-pro';
-
-// uni_modules安装方式
-// import uViewPro from '@/uni_modules/uview-pro';
+// uni_modules 方式
+// import uViewPro from "@/uni_modules/uview-pro";
 
 export function createApp() {
     const app = createSSRApp(App);
     app.use(uViewPro);
-    // 其他配置
     return {
         app
     };
 }
 ```
 
-2. `App.vue`引入基础样式(注意 style 标签需声明 scss 属性支持)
+### 3. 引入全局样式
 
-```css
-/* App.vue */
-<style lang="scss">
-/* npm安装方式 */
-@import "uview-pro/index.scss";
+在 `uni.scss` 中引入主题样式：
 
-/* uni_modules安装方式 */
-/* @import "@/uni_modules/uview-pro/index.scss"; */
-</style>
+```scss
+/* uni.scss */
+// npm 方式
+@import 'uview-pro/theme.scss';
+// uni_modules 方式
+// @import "@/uni_modules/uview-pro/theme.scss";
 ```
 
-3. `uni.scss`引入全局 scss 变量文件
-
-```css
-/* npm安装方式 */
-@import 'uview-pro/theme.scss';
+在 `App.vue` 首行引入基础样式：
 
-/* uni_modules安装方式 */
-/* @import '@/uni_modules/uview-pro/theme.scss'; */
+```scss
+<style lang="scss">
+  // npm 方式
+  @import "uview-pro/index.scss";
+  // uni_modules 方式
+  // @import "@/uni_modules/uview-pro/index.scss";
+</style>
 ```
 
-4. `pages.json`配置 easycom 规则(按需引入)
+### 4. 配置 easycom 自动引入组件
 
-```js
+在 `pages.json` 中配置 easycom 规则，实现组件自动引入：
+
+```json
 // pages.json
 {
     "easycom": {
-        // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
+        "autoscan": true,
         "custom": {
-            // uni_modules安装的方式需要前面的"@/uni_modules/"，npm安装的方式无需"@/"，以下方式任选其一
-            // npm安装方式
+            // npm 方式
             "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
-            // uni_modules安装方式
+            // uni_modules 方式
             // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
         }
     },
-    // 此为本身已有的内容
     "pages": [
-        // ......
+        // ...
     ]
 }
 ```
 
-请通过[快速上手](https://uview-pro.netlify.app/components/quickstart.html)了解更详细的内容
+**温馨提示**
+
+-   1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
+-   2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
+-   3.一定要放在 `custom` 内，否则无效。
+
+### 5. Volar 类型提示支持
+
+如需在 CLI 项目中获得 Volar 的全局类型提示，请在 `tsconfig.json` 中添加：
+
+```json
+{
+    "compilerOptions": {
+        // npm 方式
+        "types": ["uview-pro/types"]
+        // uni_modules 方式
+        // "types": ["@/uni_modules/uview-pro/types"]
+    }
+}
+```
 
-## 使用方法
+> HBuilderX 项目暂不支持 tsconfig.json 的 types 配置，CLI 项目推荐配置以获得最佳 TS 体验。
 
-配置 easycom 规则后，自动按需引入，无需`import`组件，直接引用即可。
+### 6. 组件使用
 
-> 注意：配置完以上规则后，一定要重新运行 uni-app 项目，否则不会生效
+配置完成后，无需 import 和 components 注册，可直接在 SFC 中使用 uView Pro 组件：
 
-```html
+```vue
 <template>
-    <u-button>按钮</u-button>
+    <u-button type="primary">按钮</u-button>
 </template>
 ```
 

package/types/global.d.ts

@@ -148,6 +148,14 @@ export type RowAlign = 'top' | 'center' | 'bottom';
 export type SearchShape = 'round' | 'square';
 // select 组件 mode single-column-单列，mutil-column-多列，mutil-column-auto-多列联动
 export type SelectMode = 'single-column' | 'mutil-column' | 'mutil-column-auto';
+// select 组件 list item
+export type SelectListItem = {
+    label: string;
+    value: string | number;
+    children?: SelectListItem[];
+    extra?: any;
+    [key: string]: any;
+};
 // Step 组件 mode
 export type StepsListItem = {
     name: string;