兼容 ios 样式

uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.uvue

@@ -30,7 +30,7 @@
 					v-for="(item, index) in config.list"
 					:key="index"
 					:hover-class="`${isDark ? '!bg-surface-900' : '!bg-surface-50'}`"
-					:hover-stay-time="100"
+					:hover-stay-time="250"
 					@tap="onItemTap(item)"
 				>
 					<slot name="item" :item="item">

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

@@ -17,7 +17,7 @@
 	>
 		<cl-text
 			:pt="{
-				className: parseClass(['cl-badge__text !text-white !text-sm', pt.text?.className])
+				className: parseClass(['cl-badge__text !text-white !text-xs', pt.text?.className])
 			}"
 			v-if="!dot"
 		>

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

@@ -74,8 +74,7 @@ const padding = computed(() => (parent == null ? "0" : parseRpx(parent.gutter /
 @use "sass:math";
 
 .cl-col {
-	@apply w-full;
+	@apply w-full overflow-visible;
-	overflow: visible;
 }
 
 @for $i from 1 through 24 {

uni_modules/cool-ui/components/cl-float-view/cl-float-view.uvue

@@ -1,6 +1,9 @@
 <template>
 	<view
 		class="cl-float-view"
+		:class="{
+			'no-dragging': !position.isDragging
+		}"
 		:style="viewStyle"
 		@touchstart="onTouchStart"
 		@touchmove.stop.prevent="onTouchMove"
@@ -126,11 +129,6 @@ const viewStyle = computed(() => {
 	// 设置高度
 	style["height"] = `${props.size}px`;
 
-	// 非拖拽状态下添加过渡动画，使移动更平滑
-	if (!position.isDragging) {
-		style["transition-duration"] = "300ms";
-	}
-
 	return style;
 });
 
@@ -279,6 +277,11 @@ function onTouchEnd() {
 
 <style lang="scss" scoped>
 .cl-float-view {
-	@apply fixed;
+	@apply fixed transition-none;
+
+	&.no-dragging {
+		@apply duration-300;
+		transition-property: left, bottom;
+	}
 }
 </style>

uni_modules/cool-ui/components/cl-input-number/cl-input-number.uvue

@@ -18,7 +18,7 @@
 				pt.op?.minus?.className
 			]"
 			hover-class="!bg-surface-200"
-			:hover-stay-time="50"
+			:hover-stay-time="250"
 			:style="{
 				height: parseRpx(size!),
 				width: parseRpx(size!)
@@ -66,7 +66,7 @@
 				pt.op?.plus?.className
 			]"
 			hover-class="!bg-primary-600"
-			:hover-stay-time="50"
+			:hover-stay-time="250"
 			:style="{
 				height: parseRpx(size!),
 				width: parseRpx(size!)

uni_modules/cool-ui/components/cl-keyboard-car/cl-keyboard-car.uvue

@@ -64,7 +64,7 @@
 							marginRight: index == row.length - 1 ? '0' : '10rpx'
 						}"
 						hover-class="opacity-50"
-						:hover-stay-time="50"
+						:hover-stay-time="250"
 						@touchstart.stop="onCommand(item)"
 					>
 						<slot name="item" :item="item">

uni_modules/cool-ui/components/cl-keyboard-number/cl-keyboard-number.uvue

@@ -42,7 +42,9 @@
 
 			<view class="cl-keyboard-number__list">
 				<cl-row :gutter="10">
-					<cl-col :span="6" v-for="item in list" :key="item">
+					<cl-col :span="18">
+						<cl-row :gutter="10">
+							<cl-col :span="8" v-for="item in list" :key="item">
 								<view
 									class="cl-keyboard-number__item"
 									:class="[
@@ -54,7 +56,7 @@
 										pt.item?.className
 									]"
 									hover-class="opacity-50"
-							:hover-stay-time="50"
+									:hover-stay-time="250"
 									@touchstart.stop="onCommand(item)"
 								>
 									<slot name="item" :item="item">
@@ -77,6 +79,8 @@
 											>
 										</view>
 
+										<view v-else-if="item == '_confirm'"></view>
+
 										<cl-text
 											v-else
 											:pt="{
@@ -88,6 +92,42 @@
 								</view>
 							</cl-col>
 						</cl-row>
+					</cl-col>
+
+					<cl-col :span="6">
+						<view class="cl-keyboard-number__op">
+							<view
+								v-for="item in opList"
+								:key="item"
+								class="cl-keyboard-number__item"
+								:class="[
+									{
+										'is-dark': isDark
+									},
+									`is-keycode-${item}`
+								]"
+								hover-class="opacity-50"
+								:hover-stay-time="250"
+								@touchstart.stop="onCommand(item)"
+							>
+								<cl-icon
+									v-if="item == 'delete'"
+									name="delete-back-2-line"
+									:size="36"
+								></cl-icon>
+
+								<cl-text
+									v-if="item == 'confirm'"
+									color="white"
+									:pt="{
+										className: '!text-lg'
+									}"
+									>{{ confirmText }}</cl-text
+								>
+							</view>
+						</view>
+					</cl-col>
+				</cl-row>
 			</view>
 		</view>
 	</cl-popup>
@@ -99,7 +139,7 @@ import type { PassThroughProps } from "../../types";
 import type { ClPopupProps } from "../cl-popup/props";
 import { ref, computed, watch, type PropType } from "vue";
 import { $t, t } from "@/locale";
-import { isDark, parseClass, parsePt } from "@/cool";
+import { isAppIOS, isDark, parseClass, parsePt } from "@/cool";
 import { vibrate } from "@/uni_modules/cool-vibrate";
 
 defineOptions({
@@ -193,38 +233,26 @@ const maxlength = computed(() => {
 
 // 数字键盘的按键列表，包含数字、删除、00和小数点
 const list = computed(() => {
-	const arr = [
+	const arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "00", "0", ""];
-		"1",
-		"2",
-		"3",
-		"delete",
-		"4",
-		"5",
-		"6",
-		"",
-		"7",
-		"8",
-		"9",
-		"",
-		"00",
-		"0",
-		"",
-		"confirm"
-	];
 
 	// 数字键盘显示为小数点 "."
 	if (props.type == "digit") {
-		arr[14] = ".";
+		arr[11] = ".";
 	}
 
 	// 身份证键盘显示为 "X"
 	if (props.type == "idcard") {
-		arr[14] = "X";
+		arr[11] = "X";
 	}
 
 	return arr;
 });
 
+// 操作按钮列表
+const opList = computed(() => {
+	return ["delete", "confirm"];
+});
+
 // 打开键盘弹窗
 function open() {
 	visible.value = true;
@@ -238,10 +266,12 @@ function close() {
 // 处理键盘按键点击事件
 function onCommand(key: string) {
 	// 震动
+	try {
 		vibrate(1);
+	} catch (error) {}
 
 	// 确认按钮逻辑
-	if (key == "confirm") {
+	if (key == "confirm" || key == "_confirm") {
 		if (value.value == "") {
 			ui.showToast({
 				message: t("请输入内容")
@@ -364,14 +394,17 @@ defineExpose({
 	}
 
 	&__list {
-		@apply relative;
+		@apply relative overflow-visible;
+	}
+
+	&__op {
+		@apply flex flex-col h-full;
 	}
 
 	&__item {
-		@apply flex items-center justify-center rounded-xl bg-white;
+		@apply flex items-center justify-center rounded-xl bg-white overflow-visible;
 		height: 100rpx;
 		margin-top: 10rpx;
-		overflow: visible;
 
 		&.is-dark {
 			@apply bg-surface-800;
@@ -386,14 +419,8 @@ defineExpose({
 		}
 
 		&.is-keycode-confirm {
-			@apply bg-transparent relative;
-		}
-
-		&-confirm {
 			@apply flex flex-col items-center justify-center;
-			@apply bg-primary-500 absolute w-full rounded-xl;
+			@apply bg-primary-500 rounded-xl flex-1;
-			height: 320rpx;
-			top: -220rpx;
 		}
 
 		&.is-empty {

uni_modules/cool-ui/components/cl-keyboard-password/cl-keyboard-password.uvue

@@ -63,7 +63,7 @@
 							marginRight: index == row.length - 1 ? '0' : '10rpx'
 						}"
 						hover-class="opacity-50"
-						:hover-stay-time="50"
+						:hover-stay-time="250"
 						@touchstart.stop="onCommand(item)"
 					>
 						<slot name="item" :item="item">

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

@@ -109,7 +109,7 @@ import {
 	useSlots,
 	type PropType
 } from "vue";
-import { isDark, isHarmony, parseClass, parsePt } from "@/cool";
+import { isAppIOS, isDark, isHarmony, parseClass, parsePt } from "@/cool";
 import type { Justify, PassThroughProps } from "../../types";
 import type { ClIconProps } from "../cl-icon/props";
 
@@ -388,7 +388,7 @@ onMounted(() => {
 		() => {
 			initSwipe();
 		},
-		isHarmony() ? 50 : 0
+		isHarmony() || isAppIOS() ? 50 : 0
 	);
 });
 

uni_modules/cool-ui/components/cl-picker-view/cl-picker-view.uvue

@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { forInObject, isDark, isEqual, isNull, parseClass, rpx2px } from "@/cool";
+import { forInObject, isAppIOS, isDark, isEqual, isNull, parseClass, rpx2px } from "@/cool";
 import type { ClSelectOption } from "../../types";
 import { parseRpx } from "@/cool";
 import { computed } from "vue";
@@ -107,6 +107,10 @@ const headers = computed(() => {
 // 遮罩层样式
 const maskStyle = computed(() => {
 	if (isDark.value) {
+		if(isAppIOS()) {
+			return `background-color: rgba(0, 0, 0, 0);`
+		}
+
 		return `background-image: linear-gradient(
 			180deg,
 			rgba(0, 0, 0, 0),

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

@@ -24,7 +24,7 @@ import {
 } from "vue";
 
 import { drawQrcode, type QrcodeOptions } from "./draw";
-import { canvasToPng, getPx, isHarmony, uuid } from "@/cool";
+import { canvasToPng, getPx, isAppIOS, isHarmony, uuid } from "@/cool";
 import type { ClQrcodeMode } from "../../types";
 
 defineOptions({
@@ -168,7 +168,7 @@ onMounted(() => {
 		() => {
 			drawer();
 		},
-		isHarmony() ? 50 : 0
+		isHarmony() || isAppIOS() ? 50 : 0
 	);
 });
 

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

@@ -53,6 +53,6 @@ defineExpose({
 
 <style lang="scss" scoped>
 .cl-row {
-	@apply flex flex-row flex-wrap relative;
+	@apply flex flex-row flex-wrap relative overflow-visible;
 }
 </style>

uni_modules/cool-ui/components/cl-safe-area/cl-safe-area.uvue

@@ -1,9 +1,9 @@
 <template>
 	<view
 		class="cl-safe-area"
-		:class="[{ 'is-dark': isDark }, pt.className]"
+		:class="[pt.className]"
 		:style="{
-			height: height + 'px'
+			height
 		}"
 	>
 		<slot></slot>
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { getSafeAreaHeight, isDark, parsePt } from "@/cool";
+import { getSafeAreaHeight, parsePt } from "@/cool";
 import { computed, type PropType } from "vue";
 
 defineOptions({
@@ -26,6 +26,10 @@ const props = defineProps({
 	type: {
 		type: String as PropType<"top" | "bottom">,
 		default: "top"
+	},
+	transparent: {
+		type: Boolean,
+		default: false
 	}
 });
 
@@ -40,13 +44,3 @@ const height = computed(() => {
 	return getSafeAreaHeight(props.type) + "px";
 });
 </script>
-
-<style lang="scss" scoped>
-.cl-safe-area {
-	@apply bg-white;
-
-	&.is-dark {
-		@apply bg-surface-900;
-	}
-}
-</style>

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

@@ -317,14 +317,15 @@ function initCanvas() {
 }
 
 onMounted(() => {
-	initCanvas();
-
 	watch(
 		computed(() => [props.width, props.height]),
 		() => {
 			nextTick(() => {
 				initCanvas();
 			});
+		},
+		{
+			immediate: true
 		}
 	);
 });

uni_modules/cool-ui/components/cl-slide-verify/cl-slide-verify.uvue

@@ -45,7 +45,8 @@
 				:class="[
 					{
 						'cl-slide-verify__progress--success': isSuccess,
-						'cl-slide-verify__progress--fail': isFail
+						'cl-slide-verify__progress--fail': isFail,
+						'no-dragging': !isDragging
 					},
 					pt.progress?.className
 				]"
@@ -60,7 +61,8 @@
 						'cl-slide-verify__slider--active': isDragging,
 						'cl-slide-verify__slider--success': isSuccess,
 						'cl-slide-verify__slider--fail': isFail,
-						'cl-slide-verify__slider--dark': isDark
+						'cl-slide-verify__slider--dark': isDark,
+						'no-dragging': !isDragging
 					},
 					pt.slider?.className
 				]"
@@ -268,10 +270,6 @@ const progressStyle = computed(() => {
 		width += props.size / 2;
 	}
 	style["width"] = width + "px"; // 设置宽度
-	if (!isDragging.value) {
-		// 非拖动时添加过渡动画
-		style["transition-duration"] = "300ms";
-	}
 	return style; // 返回样式对象
 });
 
@@ -282,10 +280,6 @@ const sliderStyle = computed(() => {
 		height: props.size + "px", // 滑块高度
 		width: props.size + "px" // 滑块宽度
 	};
-	if (!isDragging.value) {
-		// 非拖动时添加过渡动画
-		style["transition-duration"] = "300ms";
-	}
 	return style; // 返回样式对象
 });
 
@@ -423,6 +417,11 @@ defineExpose({
 .cl-slide-verify {
 	@apply relative rounded-lg w-full flex flex-col items-center justify-center;
 
+	.no-dragging {
+		@apply duration-300;
+		transition-property: left;
+	}
+
 	&__track {
 		@apply relative w-full h-full;
 		@apply bg-surface-100 rounded-lg;
@@ -445,7 +444,7 @@ defineExpose({
 	}
 
 	&__progress {
-		@apply absolute left-0 top-0 h-full;
+		@apply absolute left-0 top-0 h-full transition-none;
 		@apply bg-primary-100;
 
 		&--success {
@@ -458,7 +457,7 @@ defineExpose({
 	}
 
 	&__slider {
-		@apply absolute top-1/2 left-0 z-20;
+		@apply absolute top-1/2 left-0 z-20 transition-none;
 		@apply bg-white rounded-lg;
 		@apply flex items-center justify-center;
 		@apply border border-surface-200;

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

@@ -26,6 +26,7 @@
 					:class="[pt.progress?.className]"
 					:style="progressStyle"
 				></view>
+			</view>
 
 			<!-- 单滑块模式 -->
 			<view
@@ -48,7 +49,6 @@
 					:style="maxThumbStyle"
 				></view>
 			</template>
-			</view>
 
 			<view
 				class="cl-slider__picker"
@@ -531,9 +531,8 @@ onMounted(() => {
 	}
 
 	&__thumb {
-		@apply absolute top-1/2 rounded-full border border-solid border-white;
+		@apply absolute rounded-full border border-solid border-white;
 		@apply bg-primary-500;
-		transform: translateY(-50%);
 		pointer-events: none;
 		z-index: 1;
 		border-width: 4rpx;

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

@@ -50,7 +50,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
-import { isDark, parseClass, parsePt, rpx2px } from "@/cool";
+import { isAppIOS, isDark, parseClass, parsePt, rpx2px } from "@/cool";
 import type { PassThroughProps } from "../../types";
 import { vibrate } from "@/uni_modules/cool-vibrate";
 import { useForm } from "../../hooks";
@@ -145,7 +145,7 @@ const rect = computed<Rect>(() => {
 		width: width + "rpx",
 		size: size + "rpx",
 		left: left + "rpx",
-		translateX: rpx2px(translateX) + "px"
+		translateX: isAppIOS() ? rpx2px(translateX) + "px" : `${translateX}rpx`
 	};
 });
 

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

@@ -6,7 +6,10 @@
 				{
 					'is-expand': hover,
 					'is-dark': isDark,
-					'is-checked': item.isChecked == true && ClTree?.checkable == true,
+					'is-checked':
+						item.isChecked == true &&
+						ClTree?.checkable == true &&
+						ClTree?.multiple == false,
 					'is-half-checked': item.isHalfChecked,
 					'is-disabled': item.disabled,
 					'is-multiple': ClTree?.multiple