优化细节

pages/demo/layout/topbar.uvue

@@ -27,6 +27,22 @@
 				<cl-topbar :title="t('标题')" color="white" background-color="#409EFF"> </cl-topbar>
 			</demo-item>
 
+			<demo-item :label="t('使用 PT 自定义颜色')">
+				<cl-topbar
+					:title="t('标题')"
+					:pt="{
+						className: 'bg-surface-800',
+						title: {
+							className: 'text-white'
+						},
+						back: {
+							className: 'text-white'
+						}
+					}"
+				>
+				</cl-topbar>
+			</demo-item>
+
 			<demo-item :label="t('自定义返回图标')">
 				<cl-topbar
 					:title="t('标题')"

uni_modules/cool-ui/components/cl-back-top/props.ts

@@ -0,0 +1,4 @@
+export type ClBackTopProps = {
+	className?: string;
+	top?: number | any;
+};

uni_modules/cool-ui/components/cl-badge/props.ts

@@ -1,7 +1,8 @@
-import type { Type } from "../../types";
+import type { PassThroughProps, Type } from "../../types";
 
 export type ClBadgePassThrough = {
 	className?: string;
+	text?: PassThroughProps;
 };
 
 export type ClBadgeProps = {

uni_modules/cool-ui/components/cl-form-item/props.ts

@@ -1,4 +1,4 @@
-import type { ClFormLabelPosition, PassThroughProps } from "../../types";
+import type { ClFormLabelPosition, ClFormRule, PassThroughProps } from "../../types";
 
 export type ClFormItemPassThrough = {
 	className?: string;
@@ -13,6 +13,7 @@ export type ClFormItemProps = {
 	pt?: ClFormItemPassThrough;
 	label?: string;
 	prop?: string;
+	rules?: ClFormRule[];
 	labelPosition?: ClFormLabelPosition;
 	labelWidth?: string | any;
 	showAsterisk?: boolean | any;

uni_modules/cool-ui/components/cl-form/props.ts

@@ -14,4 +14,5 @@ export type ClFormProps = {
 	showAsterisk?: boolean;
 	showMessage?: boolean;
 	disabled?: boolean;
+	scrollToError?: boolean;
 };

uni_modules/cool-ui/components/cl-list-view/props.ts

@@ -1,9 +1,13 @@
-import type { ClListViewItem, PassThroughProps } from "../../types";
+import type { ClListViewItem, ClListViewGroup, ClListViewVirtualItem, PassThroughProps, ClListViewRefresherStatus } from "../../types";
 
 export type ClListViewPassThrough = {
 	className?: string;
 	item?: PassThroughProps;
+	itemHover?: PassThroughProps;
+	list?: PassThroughProps;
 	indexBar?: PassThroughProps;
+	scroller?: PassThroughProps;
+	refresher?: PassThroughProps;
 };
 
 export type ClListViewProps = {
@@ -16,12 +20,14 @@ export type ClListViewProps = {
 	bottomHeight?: number;
 	bufferSize?: number;
 	virtual?: boolean;
-	// 下拉刷新相关属性
+	scrollIntoView?: string;
+	scrollWithAnimation?: boolean;
+	showScrollbar?: boolean;
 	refresherEnabled?: boolean;
 	refresherThreshold?: number;
-	refresherTriggered?: boolean;
 	refresherBackground?: string;
 	refresherDefaultText?: string;
 	refresherPullingText?: string;
 	refresherRefreshingText?: string;
+	showBackTop?: boolean;
 };

uni_modules/cool-ui/components/cl-loadmore/props.ts

@@ -13,4 +13,5 @@ export type ClLoadmoreProps = {
 	loadingText?: string;
 	finish?: boolean;
 	finishText?: string;
+	safeAreaBottom?: boolean;
 };

uni_modules/cool-ui/components/cl-sign/cl-sign.uvue

@@ -295,6 +295,7 @@ function initCanvas() {
 		success: (context: CanvasContext) => {
 			// 获取绘图上下文
 			drawCtx = context.getContext("2d")!;
+
 			// 设置宽高
 			drawCtx!.canvas.width = props.width * dpr;
 			drawCtx!.canvas.height = props.height * dpr;

uni_modules/cool-ui/components/cl-text/props.ts

@@ -9,6 +9,7 @@ export type ClTextProps = {
 	pt?: ClTextPassThrough;
 	value?: string | number | any;
 	color?: string;
+	size?: number | string | any;
 	type?: ClTextType;
 	mask?: boolean;
 	currency?: string;

uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.uvue

@@ -1,5 +1,5 @@
 <template>
-	<view class="cl-timeline-item" :class="[pt.classNames]">
+	<view class="cl-timeline-item" :class="[pt.className]">
 		<view class="cl-timeline-item__left">
 			<cl-icon
 				v-if="icon != ''"
@@ -99,7 +99,7 @@ const props = defineProps({
 });
 
 type PassThrough = {
-	classNames?: string;
+	className?: string;
 	icon?: PassThroughProps;
 	title?: PassThroughProps;
 	content?: PassThroughProps;

uni_modules/cool-ui/components/cl-timeline-item/props.ts

@@ -1,7 +1,7 @@
 import type { PassThroughProps } from "../../types";
 
 export type ClTimelineItemPassThrough = {
-	classNames?: string;
+	className?: string;
 	icon?: PassThroughProps;
 	title?: PassThroughProps;
 	content?: PassThroughProps;

uni_modules/cool-ui/components/cl-timeline/cl-timeline.uvue

@@ -1,5 +1,5 @@
 <template>
-	<view class="cl-timeline" :class="[pt.classNames]">
+	<view class="cl-timeline" :class="[pt.className]">
 		<slot></slot>
 	</view>
 </template>
@@ -20,7 +20,7 @@ const props = defineProps({
 });
 
 type PassThrough = {
-	classNames?: string;
+	className?: string;
 };
 
 const pt = computed(() => parsePt<PassThrough>(props.pt));

uni_modules/cool-ui/components/cl-timeline/props.ts

@@ -1,5 +1,5 @@
 export type ClTimelinePassThrough = {
-	classNames?: string;
+	className?: string;
 };
 
 export type ClTimelineProps = {

uni_modules/cool-ui/components/cl-topbar/cl-topbar.uvue

@@ -7,16 +7,16 @@
 
 	<view
 		class="cl-topbar"
-		:class="[{ 'cl-topbar--fixed': fixed }, pt.classNames]"
-		:style="{
-			paddingTop: offsetTop,
-			backgroundColor
-		}"
+		:class="[{ 'cl-topbar--fixed': fixed }, pt.className]"
+		:style="topbarStyle"
 	>
 		<view class="cl-topbar__inner" :style="{ height }">
 			<view class="cl-topbar__prepend">
 				<view v-if="showBack" class="cl-topbar__icon" @tap="back()">
 					<cl-icon
+						:pt="{
+							className: pt.back?.className
+						}"
 						:name="backIcon"
 						:size="pt.back?.size ?? 48"
 						:color="pt.back?.color ?? color"
@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import { computed, type PropType } from "vue";
-import { getConfig, parseClass, parsePt, parseRpx, router } from "@/cool";
+import { getConfig, getSafeAreaHeight, parseClass, parsePt, parseRpx, router } from "@/cool";
 import type { PassThroughProps } from "../../types";
 import type { ClIconProps } from "../cl-icon/props";
 
@@ -109,11 +109,9 @@ const props = defineProps({
 	}
 });
 
-const { safeAreaInsets } = uni.getWindowInfo();
-
 // 定义样式透传的类型接口
 type PassThrough = {
-	classNames?: string;
+	className?: string;
 	title?: PassThroughProps;
 	back?: ClIconProps;
 };
@@ -124,7 +122,7 @@ const pt = computed(() => parsePt<PassThrough>(props.pt));
 // 使用设备安全区域顶部边距
 const offsetTop = computed(() => {
 	if (props.safeAreaTop) {
-		return safeAreaInsets.top + "px";
+		return getSafeAreaHeight("top") + "px";
 	}
 
 	return "0px";
@@ -181,6 +179,20 @@ const color = computed(() => {
 	return getConfig("navTxtStyle");
 });
 
+// 导航栏样式
+const topbarStyle = computed(() => {
+	const style = {
+		paddingTop: offsetTop.value
+	};
+
+	// 不与 pt 样式中的背景色冲突
+	if (pt.value.className == null || !pt.value.className.includes("bg-")) {
+		style["backgroundColor"] = backgroundColor.value;
+	}
+
+	return style;
+});
+
 // 返回按钮点击事件
 function back() {
 	if (props.backPath != "") {

uni_modules/cool-ui/components/cl-topbar/props.ts

@@ -2,7 +2,7 @@ import type { PassThroughProps } from "../../types";
 import type { ClIconProps } from "../cl-icon/props";
 
 export type ClTopbarPassThrough = {
-	classNames?: string;
+	className?: string;
 	title?: PassThroughProps;
 	back?: ClIconProps;
 };

uni_modules/cool-ui/components/cl-waterfall/cl-waterfall.uvue

@@ -1,7 +1,7 @@
 <template>
 	<view
 		class="cl-waterfall"
-		:class="[pt.classNames]"
+		:class="[pt.className]"
 		:style="{
 			padding: `0 ${props.gutter / 2}rpx`
 		}"
@@ -72,7 +72,7 @@ const props = defineProps({
 const { proxy } = getCurrentInstance()!;
 
 type PassThrough = {
-	classNames?: string;
+	className?: string;
 };
 
 const pt = computed(() => parsePt<PassThrough>(props.pt));

uni_modules/cool-ui/components/cl-waterfall/props.ts

@@ -1,5 +1,5 @@
 export type ClWaterfallPassThrough = {
-	classNames?: string;
+	className?: string;
 };
 
 export type ClWaterfallProps = {

uni_modules/cool-ui/index.d.ts

@@ -1,9 +1,10 @@
-import type { ClActionSheetItem, ClActionSheetOptions, PassThroughProps, Type, ClButtonType, Size, ClListViewItem, ClFormLabelPosition, ClFormRule, ClFormValidateError, ClInputType, ClListItem, Justify, ClConfirmAction, ClConfirmOptions, ClToastOptions, ClSelectOption, ClPopupDirection, ClQrcodeMode, ClSelectDateShortcut, ClTabsItem, ClTextType, ClUploadItem } from "./types";
+import type { ClActionSheetItem, ClActionSheetOptions, PassThroughProps, Type, ClButtonType, Size, ClListViewItem, ClFormLabelPosition, ClFormRule, ClFormValidateError, ClInputType, ClListItem, Justify, ClListViewGroup, ClListViewVirtualItem, ClListViewRefresherStatus, ClConfirmAction, ClConfirmOptions, ClToastOptions, ClSelectOption, ClPopupDirection, ClQrcodeMode, ClSelectDateShortcut, ClTabsItem, ClTextType, ClUploadItem } from "./types";
 import { type UiInstance } from "./hooks";
 import { type QrcodeOptions } from "./draw";
 
 import type { ClActionSheetProps, ClActionSheetPassThrough } from "./components/cl-action-sheet/props";
 import type { ClAvatarProps, ClAvatarPassThrough } from "./components/cl-avatar/props";
+import type { ClBackTopProps } from "./components/cl-back-top/props";
 import type { ClBadgeProps, ClBadgePassThrough } from "./components/cl-badge/props";
 import type { ClBannerProps, ClBannerPassThrough } from "./components/cl-banner/props";
 import type { ClButtonProps, ClButtonPassThrough } from "./components/cl-button/props";
@@ -33,7 +34,6 @@ import type { ClListViewProps, ClListViewPassThrough } from "./components/cl-lis
 import type { ClLoadingProps, ClLoadingPassThrough } from "./components/cl-loading/props";
 import type { ClLoadmoreProps, ClLoadmorePassThrough } from "./components/cl-loadmore/props";
 import type { ClNoticebarProps, ClNoticebarPassThrough } from "./components/cl-noticebar/props";
-import type { ClPageBackTopProps } from "./components/cl-page-back-top/props";
 import type { ClPageProps } from "./components/cl-page/props";
 import type { ClPageThemeProps } from "./components/cl-page-theme/props";
 import type { ClPageUiProps } from "./components/cl-page-ui/props";
@@ -74,6 +74,7 @@ declare module "vue" {
 	export interface GlobalComponents {
 		"cl-action-sheet": (typeof import('./components/cl-action-sheet/cl-action-sheet.uvue')['default']) & import('vue').DefineComponent<ClActionSheetProps>;
 		"cl-avatar": (typeof import('./components/cl-avatar/cl-avatar.uvue')['default']) & import('vue').DefineComponent<ClAvatarProps>;
+		"cl-back-top": (typeof import('./components/cl-back-top/cl-back-top.uvue')['default']) & import('vue').DefineComponent<ClBackTopProps>;
 		"cl-badge": (typeof import('./components/cl-badge/cl-badge.uvue')['default']) & import('vue').DefineComponent<ClBadgeProps>;
 		"cl-banner": (typeof import('./components/cl-banner/cl-banner.uvue')['default']) & import('vue').DefineComponent<ClBannerProps>;
 		"cl-button": (typeof import('./components/cl-button/cl-button.uvue')['default']) & import('vue').DefineComponent<ClButtonProps>;
@@ -103,7 +104,6 @@ declare module "vue" {
 		"cl-loading": (typeof import('./components/cl-loading/cl-loading.uvue')['default']) & import('vue').DefineComponent<ClLoadingProps>;
 		"cl-loadmore": (typeof import('./components/cl-loadmore/cl-loadmore.uvue')['default']) & import('vue').DefineComponent<ClLoadmoreProps>;
 		"cl-noticebar": (typeof import('./components/cl-noticebar/cl-noticebar.uvue')['default']) & import('vue').DefineComponent<ClNoticebarProps>;
-		"cl-page-back-top": (typeof import('./components/cl-page-back-top/cl-page-back-top.uvue')['default']) & import('vue').DefineComponent<ClPageBackTopProps>;
 		"cl-page": (typeof import('./components/cl-page/cl-page.uvue')['default']) & import('vue').DefineComponent<ClPageProps>;
 		"cl-page-theme": (typeof import('./components/cl-page-theme/cl-page-theme.uvue')['default']) & import('vue').DefineComponent<ClPageThemeProps>;
 		"cl-page-ui": (typeof import('./components/cl-page-ui/cl-page-ui.uvue')['default']) & import('vue').DefineComponent<ClPageUiProps>;