uview-pro 0.1.1 → 0.2.0

package/changelog.md

@@ -1,3 +1,38 @@
+## 0.2.0（2025-09-28）
+
+### ♻️ Code Refactoring | 代码重构
+
+- **example:** 优化 about 页面中的链接处理 ([d04ba8a](https://github.com/anyup/uView-Pro/commit/d04ba8a26278b6a0ea4f5e906bfec89ce6954459))
+- **css:** 重构 CSS 样式并添加新样式 ([50b2670](https://github.com/anyup/uView-Pro/commit/50b2670a5e09aff9994a97f60a7d376b5b99a544))
+- **libs:** 重构 libs 工具类代码并优化导出方式 ([10a604e](https://github.com/anyup/uView-Pro/commit/10a604e86f8712ee65c658a019c231b56cdcc7e7))
+- **u-icon:** 移除 customStyle 属性并整合全局样式 ([cd52e14](https://github.com/anyup/uView-Pro/commit/cd52e14739604f1f126205e16383f187f1d38e8e))
+- **props:** 优化 Props 类型定义和样式处理 ([c6ca0de](https://github.com/anyup/uView-Pro/commit/c6ca0de0876cb61671c25e58f33e51674edab266))
+- **u-text:** 优化文本组件的样式和布局 ([885a0cf](https://github.com/anyup/uView-Pro/commit/885a0cf3f348184b3546979f1cc1914ded198411))
+- **u-text:** 优化文本组件样式和属性 ([315d437](https://github.com/anyup/uView-Pro/commit/315d4379148fddbed059e55e5f9a0d0268345e62))
+- **pages:** 优化微信小程序多个页面的用户提示展示，审核相关 ([0f3741f](https://github.com/anyup/uView-Pro/commit/0f3741f65d39f74bc3dc27df8514324e02c3582a))
+- **pages:** 添加微信小程序端布局演示提示 ([9eaac70](https://github.com/anyup/uView-Pro/commit/9eaac70cf143327589d56a627160f33c56585d2e))
+
+### ✨ Features | 新功能
+
+- **components:** 添加 input 组件演示页面 ([91baf00](https://github.com/anyup/uView-Pro/commit/91baf0012e381856b79ca49edb60735928d78099))
+- **collapse:** 更新折叠面板组件默认配置和样式 ([a03e0be](https://github.com/anyup/uView-Pro/commit/a03e0be3a9f8ac8b03dbd406d5d8c37227e869bd))
+- **components:** 新增 Text 组件 ([a034f9d](https://github.com/anyup/uView-Pro/commit/a034f9d029ab38dbf1a066978f3c62c1328c96a5))
+- **hooks:** 重构 useParent 并添加父子组件关系管理 ([37e35d8](https://github.com/anyup/uView-Pro/commit/37e35d84112a08b3d28aa8e5caec12a0a2696594))
+- **hooks:** 新增自定义 Hooks 工具库 ([0b3f680](https://github.com/anyup/uView-Pro/commit/0b3f68051b09917fbd39006093291f6dcc4eb0ef))
+
+### 📝 Documentation | 文档
+
+- 添加 Copilot 提示词 ([c10cd20](https://github.com/anyup/uView-Pro/commit/c10cd201214907ae2ac8228498927a59f8411cfb))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-collapse:** 重构手风琴组件并解决手风琴失效问题 ([a64e607](https://github.com/anyup/uView-Pro/commit/a64e6075f556ffeb3f5ad6b9ea443e3a22f83a86))
+- **u-collapse:** 修复折叠面板内容高度在头条小程序适配 ([5fdcd26](https://github.com/anyup/uView-Pro/commit/5fdcd262ab3e134a97a4f25482d188d93222fddf))
+
+### 👷 Continuous Integration | CI 配置
+
+- **vscode:** 设置 Vue 文件默认格式化工具为 Prettier ([84d5259](https://github.com/anyup/uView-Pro/commit/84d52599f2632e814a137e8d553793fb3cdad1f1))
+
 ## 0.1.1（2025-09-22）
 
 ### ♻️ Code Refactoring | 代码重构

package/components/common/props.ts

@@ -0,0 +1,22 @@
+import type { PropType } from 'vue';
+
+export const stringProp = <T>(defaultVal: T) => ({
+    type: String as unknown as PropType<T>,
+    default: defaultVal
+});
+
+export const stringOrObjectProp = <T>(defaultVal: T) => ({
+    type: [String, Object] as PropType<string | Record<string, any>>,
+    default: defaultVal
+});
+
+export const baseProps = {
+    /**
+     * 自定义根节点样式
+     */
+    customStyle: stringOrObjectProp(''),
+    /**
+     * 自定义根节点样式类
+     */
+    customClass: stringProp('')
+};

package/components/u-collapse/types.ts

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * u-collapse 手风琴 Props
@@ -12,6 +13,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
  * @property {String} hoverClass 样式类名，按下时有效（默认u-hover-class）
  */
 export const CollapseProps = {
+    ...baseProps,
     /** 是否手风琴模式 */
     accordion: { type: Boolean, default: true },
     /** 头部的样式 */

package/components/u-collapse/u-collapse.vue

@@ -1,16 +1,24 @@
 <template>
-    <view class="u-collapse">
+    <view class="u-collapse" :style="$u.toStyle(customStyle)" :class="customClass">
         <slot />
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-collapse',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-import { ref, provide } from 'vue';
+import { ref } from 'vue';
 import { CollapseProps } from './types';
-
-defineOptions({
-    name: 'u-collapse'
-});
+import { $u } from '../../';
 
 /**
  * collapse 手风琴
@@ -48,13 +56,6 @@ function onChange(index: string | number) {
     emit('change', index);
 }
 
-provide('u-collapse', {
-    children,
-    props,
-    init,
-    onChange
-});
-
 defineExpose({
     props,
     children,

package/components/u-collapse-item/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { TextAlign } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-collapse-item 手风琴Item Props
  * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
  */
 export const CollapseItemProps = {
+    ...baseProps,
     /** 标题 */
     title: { type: String, default: '' },
     /** 标题的对齐方式 */

package/components/u-collapse-item/u-collapse-item.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-collapse-item" :style="itemStyle">
+    <view class="u-collapse-item" :style="`${$u.toStyle(itemStyle)}${$u.toStyle(customStyle)}`" :class="customClass">
         <view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="headStyle">
             <template v-if="!slots['title-all']">
                 <view v-if="!slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' }, isShow && activeStyle && !arrow ? activeStyle : '']">
@@ -13,7 +13,7 @@
             <slot v-else name="title-all" />
         </view>
 
-        <view class="u-collapse-body" :style="{ height: isShow ? height + 'px' : '0' }">
+        <view class="u-collapse-body" :style="{ height: isShow ? height : '0' }">
             <view class="u-collapse-content" :id="elId" :style="bodyStyle">
                 <slot></slot>
             </view>
@@ -21,12 +21,22 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-collapse-item',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, inject } from 'vue';
-import { $u } from '../..';
+import { $u, toStyle } from '../..';
 import { CollapseItemProps } from './types';
-
-defineOptions({ name: 'u-collapse-item' });
+import { useParent } from '../../libs/hooks/useParent';
 
 /**
  * collapseItem 手风琴Item
@@ -49,7 +59,7 @@ const instance = getCurrentInstance();
 
 const isShow = ref(false);
 const elId = ref('');
-const height = ref(0); // body内容的高度
+const height = ref('0'); // body内容的高度
 const headStyle = ref<Record<string, any>>({}); // 头部样式，对象形式
 const bodyStyle = ref<Record<string, any>>({}); // 主体部分样式
 const itemStyle = ref<Record<string, any>>({}); // 每个item的整体样式
@@ -58,7 +68,7 @@ const hoverClass = ref(''); // 头部按下时的效果样式类
 const accordion = ref(true); // 是否显示右侧箭头
 const arrow = ref(true);
 
-const parent = inject<any>('u-collapse', null);
+const { parent, parentExposed } = useParent('u-collapse');
 
 watch(
     () => props.open,
@@ -73,17 +83,13 @@ watch(
  */
 function init() {
     if (parent) {
-        // 不存在时才添加本实例
-        if (!parent.children.value.includes(instance?.exposed)) {
-            parent.children.value.push(instance?.exposed);
-        }
-        headStyle.value = parent.props.headStyle;
-        bodyStyle.value = parent.props.bodyStyle;
-        arrowColor.value = parent.props.arrowColor;
-        hoverClass.value = parent.props.hoverClass;
-        arrow.value = parent.props.arrow;
-        itemStyle.value = parent.props.itemStyle;
-        accordion.value = parent.props.accordion;
+        headStyle.value = parentExposed.props.headStyle;
+        bodyStyle.value = parentExposed.props.bodyStyle;
+        arrowColor.value = parentExposed.props.arrowColor;
+        hoverClass.value = parentExposed.props.hoverClass;
+        arrow.value = parentExposed.props.arrow;
+        itemStyle.value = parentExposed.props.itemStyle;
+        accordion.value = parentExposed.props.accordion;
     }
     elId.value = $u.guid();
     nextTick(() => {
@@ -96,16 +102,15 @@ function init() {
  */
 function headClick() {
     if (props.disabled) return;
-
     if (accordion.value && parent) {
-        parent.children.value.forEach((vm: any) => {
-            if (vm.elId !== elId.value) {
-                vm.isShow = false;
+        parent.children.forEach((vm: any) => {
+            if (vm.exposed.elId.value !== elId.value) {
+                vm.exposed.isShow.value = false;
             } else {
-                vm.isShow = !vm.isShow;
+                vm.exposed.isShow.value = !vm.exposed.isShow.value;
                 emit('change', {
                     index: props.index,
-                    show: vm.isShow
+                    show: vm.exposed.isShow.value
                 });
             }
         });
@@ -116,18 +121,20 @@ function headClick() {
             show: isShow.value
         });
     }
-
-    if (isShow.value) parent && parent.onChange && parent.onChange(props.index);
+    if (isShow.value) parentExposed && parentExposed.onChange && parentExposed.onChange(props.index);
 }
 
 /**
  * 查询内容高度
  */
 function queryRect() {
-    // getRect为uView自带的节点查询简化方法，详见文档介绍：https://uviewpro.cn/zh/js/getRect.html
+    // getRect为uView自带的节点查询简化方法，详见文档介绍：https://uviewpro.cn/zh/tools/getRect.html
     // 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
     $u.getRect('#' + elId.value, instance).then((res: any) => {
-        height.value = res.height;
+        height.value = res.height + 'px';
+        // #ifdef MP-TOUTIAO
+        height.value = 'auto';
+        // #endif
     });
 }
 

package/components/u-icon/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { IconLabelPosition, ImgMode } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-icon 组件 Props 类型定义
  * 所有属性均带详细注释，类型安全，便于 IDE 智能提示
  */
 export const IconProps = {
+    ...baseProps,
     /** 图标名称，见示例图标集 */
     name: { type: String, default: '' },
     /** 图标颜色，可接受主题色 */
@@ -40,8 +42,6 @@ export const IconProps = {
     space: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 图片的mode，参考uni-app image组件 */
     imgMode: { type: String as PropType<ImgMode>, default: 'widthFix' },
-    /** 自定义样式，对象形式 */
-    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     /** 用于显示图片小图标时，图片的宽度，单位rpx */
     width: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 用于显示图片小图标时，图片的高度，单位rpx */

package/components/u-icon/u-icon.vue

@@ -10,15 +10,22 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-icon',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { $u } from '../..';
 import { IconProps } from './types';
 
-defineOptions({
-    name: 'u-icon'
-});
-
 /**
  * icon 图标
  * @description 基于字体的图标集，包含了大多数常见场景的图标。

package/components/u-text/types.ts

@@ -0,0 +1,69 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+export const TextProps = {
+    ...baseProps,
+    // 主题颜色
+    type: { type: String as PropType<ThemeType>, default: '' },
+    /** 是否显示文本 */
+    show: { type: Boolean, default: true },
+    /** 显示的值 */
+    text: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 前置图标 */
+    prefixIcon: { type: String, default: '' },
+    /** 后置图标 */
+    suffixIcon: { type: String, default: '' },
+    /** 文本处理模式 */
+    mode: { type: String as PropType<'text' | 'price' | 'phone' | 'name' | 'date' | 'link'>, default: 'text' },
+    /** 链接地址 */
+    href: { type: String, default: '' },
+    /** 格式化规则 */
+    format: { type: [String, Function] as PropType<string | ((val: any) => any)>, default: '' },
+    /** 是否拨打电话 */
+    call: { type: Boolean, default: false },
+    /** 小程序打开方式 */
+    openType: { type: String, default: '' },
+    /** 是否粗体 */
+    bold: { type: Boolean, default: false },
+    /** 是否块状 */
+    block: { type: Boolean, default: false },
+    /** 显示行数，超出省略号 */
+    lines: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 文本颜色 */
+    color: { type: String, default: '#303133' },
+    /** 字体大小 */
+    size: { type: [String, Number] as PropType<string | number>, default: 28 },
+    /** 图标样式 */
+    iconStyle: { type: [Object, String] as PropType<Record<string, any> | string>, default: () => ({ fontSize: '15px' }) },
+    /** 文字样式 */
+    textStyle: { type: [Object, String] as PropType<Record<string, any> | string>, default: () => ({}) },
+    /** 文字装饰 */
+    decoration: { type: String as PropType<'none' | 'underline' | 'line-through'>, default: 'none' },
+    /** 外边距 */
+    margin: { type: [Object, String, Number] as PropType<Record<string, any> | string | number>, default: 0 },
+    /** 行高 */
+    lineHeight: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 对齐方式 */
+    align: { type: String as PropType<'left' | 'center' | 'right'>, default: 'left' },
+    /** 换行方式 */
+    wordWrap: { type: String as PropType<'break-word' | 'normal' | 'anywhere'>, default: 'normal' },
+    /** 语言 */
+    lang: { type: String, default: '' },
+    /** 会话来源 */
+    sessionFrom: { type: String, default: '' },
+    /** 消息标题 */
+    sendMessageTitle: { type: String, default: '' },
+    /** 消息路径 */
+    sendMessagePath: { type: String, default: '' },
+    /** 消息图片 */
+    sendMessageImg: { type: String, default: '' },
+    /** 是否显示消息卡片 */
+    showMessageCard: { type: Boolean, default: false },
+    /** app参数 */
+    appParameter: { type: String, default: '' },
+    /** 表单类型 */
+    formType: { type: String, default: '' }
+};
+
+export type TextProps = ExtractPropTypes<typeof TextProps>;