优化 ios 样式兼容

components/tabbar.uvue

@@ -6,9 +6,9 @@
 			}
 		}"
 	>
-		<view class="tabbar" :class="{ 'is-dark': isDark }">
+		<view class="custom-tabbar" :class="{ 'is-dark': isDark }">
 			<view
-				class="tabbar-item"
+				class="custom-tabbar-item"
 				v-for="item in list"
 				:key="item.pagePath"
 				@tap="router.to(item.pagePath)"
@@ -39,6 +39,10 @@ import { ctx, isDark, parseClass, router } from "@/cool";
 import { t } from "@/locale";
 import { computed } from "vue";
 
+defineOptions({
+	name: "custom-tabbar"
+});
+
 type Item = {
 	icon: string;
 	icon2: string;
@@ -67,10 +71,10 @@ uni.hideTabBar();
 </script>
 
 <style lang="scss" scoped>
-.tabbar {
+.custom-tabbar {
 	@apply flex flex-row items-center flex-1;
 
-	.tabbar-item {
+	&-item {
 		@apply flex flex-col items-center justify-center flex-1;
 	}
 }

icons/demo/index.ts

@@ -1,135 +0,0 @@
-export const demo = {
-	"text": "f201",
-	"image-line": "ee4b",
-	"price-tag-3-line": "f023",
-	"price-tag-3-fill": "f022",
-	"image-fill": "ee4a",
-	"keyboard-box-line": "ee73",
-	"keyboard-box-fill": "ee72",
-	"input-field": "f47a",
-	"qr-code-fill": "f03c",
-	"barcode-line": "eaa2",
-	"barcode-fill": "eaa1",
-	"checkbox-line": "eb85",
-	"checkbox-fill": "eb82",
-	"radio-button-line": "f050",
-	"radio-button-fill": "f04f",
-	"equalizer-2-line": "f405",
-	"equalizer-2-fill": "f404",
-	"calendar-line": "eb27",
-	"calendar-fill": "eb26",
-	"calendar-schedule-fill": "f3f2",
-	"calendar-schedule-line": "f3f3",
-	"time-line": "f20f",
-	"time-fill": "f20e",
-	"toggle-line": "f219",
-	"toggle-fill": "f218",
-	"star-line": "f18b",
-	"star-fill": "f186",
-	"list-check": "eeba",
-	"timeline-view": "f46f",
-	"multi-image-line": "f5ee",
-	"timer-fill": "f212",
-	"timer-line": "f215",
-	"progress-2-line": "f47e",
-	"progress-2-fill": "f47d",
-	"send-plane-line": "f0da",
-	"send-plane-fill": "f0d9",
-	"t-box-line": "f1d3",
-	"t-box-fill": "f1d2",
-	"edit-2-fill": "ec7f",
-	"edit-2-line": "ec80",
-	"layout-2-line": "ee7f",
-	"layout-2-fill": "ee7e",
-	"layout-column-fill": "ee8c",
-	"layout-column-line": "ee8d",
-	"mouse-line": "ef7d",
-	"mouse-fill": "ef7c",
-	"file-upload-line": "ed15",
-	"file-upload-fill": "ed14",
-	"page-separator": "efbd",
-	"carousel-view": "f42c",
-	"list-view": "f44c",
-	"text-block": "f46d",
-	"percent-line": "efe6",
-	"percent-fill": "efe5",
-	"navigation-line": "ef89",
-	"navigation-fill": "ef88",
-	"menu-line": "ef3e",
-	"upload-line": "f250",
-	"upload-fill": "f24f",
-	"shield-check-fill": "f0ff",
-	"shield-check-line": "f100",
-	"loader-4-line": "eec6",
-	"t-shirt-line": "f1d9",
-	"t-shirt-fill": "f1d8",
-	"add-circle-line": "ea11",
-	"add-circle-fill": "ea10",
-	"number-1": "efa0",
-	"check-line": "eb7b",
-	"check-fill": "eb7a",
-	"checkbox-multiple-line": "eb89",
-	"checkbox-multiple-fill": "eb88",
-	"collapse-vertical-line": "f52e",
-	"align-top": "ea29",
-	"notification-badge-line": "ef98",
-	"notification-badge-fill": "ef97",
-	"input-method-line": "ee60",
-	"input-method-fill": "ee5f",
-	"text-snippet": "f46e",
-	"window-2-line": "f2c4",
-	"window-2-fill": "f2c3",
-	"qr-code-line": "f03d",
-	"message-2-line": "ef44",
-	"message-2-fill": "ef43",
-	"chat-check-line": "eb55",
-	"chat-check-fill": "eb54",
-	"chat-4-line": "eb53",
-	"chat-4-fill": "eb52",
-	"seo-line": "f3a4",
-	"seo-fill": "f3a3",
-	"crop-line": "ec02",
-	"crop-fill": "ec01",
-	"shadow-line": "f45a",
-	"shadow-fill": "f459",
-	"puzzle-2-line": "f450",
-	"puzzle-2-fill": "f44f",
-	"markdown-line": "ef1e",
-	"markdown-fill": "ef1d",
-	"stacked-view": "f464",
-	"dropdown-list": "f3c3",
-	"increase-decrease-line": "ee53",
-	"increase-decrease-fill": "ee52",
-	"timer-2-line": "f211",
-	"timer-2-fill": "f210",
-	"parent-line": "efca",
-	"parent-fill": "efc9",
-	"function-add-line": "f4df",
-	"function-add-fill": "f4de",
-	"error-warning-line": "eca1",
-	"error-warning-fill": "eca0",
-	"arrow-up-box-line": "f562",
-	"arrow-up-box-fill": "f561",
-	"layout-bottom-fill": "ee8a",
-	"layout-right-fill": "ee9a",
-	"layout-right-line": "ee9b",
-	"layout-top-fill": "eea0",
-	"layout-top-line": "eea1",
-	"layout-left-line": "ee94",
-	"layout-left-fill": "ee93",
-	"layout-top-2-line": "ee9f",
-	"layout-top-2-fill": "ee9e",
-	"layout-right-2-line": "ee99",
-	"layout-right-2-fill": "ee98",
-	"layout-bottom-2-line": "ee89",
-	"layout-bottom-2-fill": "ee88",
-	"layout-left-2-line": "ee92",
-	"layout-left-2-fill": "ee91",
-	"layout-row-fill": "ee9c",
-	"layout-row-line": "ee9d",
-	"table-fill": "f1dd",
-	"table-line": "f1de",
-	"layout-bottom-line": "ee8b",
-	"picture-in-picture-line": "eff4",
-	"picture-in-picture-fill": "eff3"
-};

icons/index.scss

@@ -1,3 +1,2 @@
-@import "./demo/index.scss";
 @import "./iconfont/index.scss";
 @import "./remixicon/index.scss";

icons/index.ts

@@ -1,9 +1,7 @@
-import { demo } from "./demo";
 import { iconfont } from "./iconfont";
 import { remixicon } from "./remixicon";
 
 export const icons = {
-	demo,
 	iconfont,
 	remixicon
 };

icons/remixicon/index.ts

@@ -715,5 +715,80 @@ export const remixicon = {
 	"font-size": "ed8d",
 	"font-size-2": "ed8c",
 	"font-color": "ed8b",
-	"node-tree": "ef90"
+	"node-tree": "ef90",
+	"price-tag-3-line": "f023",
+	"price-tag-3-fill": "f022",
+	"input-field": "f47a",
+	"timeline-view": "f46f",
+	"progress-2-line": "f47e",
+	"progress-2-fill": "f47d",
+	"t-box-line": "f1d3",
+	"t-box-fill": "f1d2",
+	"edit-2-fill": "ec7f",
+	"edit-2-line": "ec80",
+	"layout-2-line": "ee7f",
+	"layout-2-fill": "ee7e",
+	"layout-column-fill": "ee8c",
+	"layout-column-line": "ee8d",
+	"mouse-line": "ef7d",
+	"mouse-fill": "ef7c",
+	"file-upload-line": "ed15",
+	"file-upload-fill": "ed14",
+	"page-separator": "efbd",
+	"carousel-view": "f42c",
+	"list-view": "f44c",
+	"text-block": "f46d",
+	"percent-line": "efe6",
+	"percent-fill": "efe5",
+	"upload-fill": "f24f",
+	"t-shirt-line": "f1d9",
+	"t-shirt-fill": "f1d8",
+	"number-1": "efa0",
+	"check-fill": "eb7a",
+	"checkbox-multiple-line": "eb89",
+	"checkbox-multiple-fill": "eb88",
+	"collapse-vertical-line": "f52e",
+	"align-top": "ea29",
+	"window-2-line": "f2c4",
+	"window-2-fill": "f2c3",
+	"seo-line": "f3a4",
+	"seo-fill": "f3a3",
+	"shadow-line": "f45a",
+	"shadow-fill": "f459",
+	"puzzle-2-line": "f450",
+	"puzzle-2-fill": "f44f",
+	"markdown-line": "ef1e",
+	"markdown-fill": "ef1d",
+	"stacked-view": "f464",
+	"dropdown-list": "f3c3",
+	"timer-2-line": "f211",
+	"timer-2-fill": "f210",
+	"parent-line": "efca",
+	"parent-fill": "efc9",
+	"function-add-line": "f4df",
+	"function-add-fill": "f4de",
+	"arrow-up-box-line": "f562",
+	"arrow-up-box-fill": "f561",
+	"layout-bottom-fill": "ee8a",
+	"layout-right-fill": "ee9a",
+	"layout-right-line": "ee9b",
+	"layout-top-fill": "eea0",
+	"layout-top-line": "eea1",
+	"layout-left-line": "ee94",
+	"layout-left-fill": "ee93",
+	"layout-top-2-line": "ee9f",
+	"layout-top-2-fill": "ee9e",
+	"layout-right-2-line": "ee99",
+	"layout-right-2-fill": "ee98",
+	"layout-bottom-2-line": "ee89",
+	"layout-bottom-2-fill": "ee88",
+	"layout-left-2-line": "ee92",
+	"layout-left-2-fill": "ee91",
+	"layout-row-fill": "ee9c",
+	"layout-row-line": "ee9d",
+	"table-fill": "f1dd",
+	"table-line": "f1de",
+	"layout-bottom-line": "ee8b",
+	"picture-in-picture-line": "eff4",
+	"picture-in-picture-fill": "eff3"
 };

pages/demo/basic/tag.uvue

@@ -8,7 +8,7 @@
 			</demo-item>
 
 			<demo-item :label="t('不同类型')">
-				<view class="flex flex-row">
+				<view class="flex flex-row flex-wrap">
 					<cl-tag type="primary">{{ t("主要") }}</cl-tag>
 					<cl-tag type="success">{{ t("成功") }}</cl-tag>
 					<cl-tag type="warn">{{ t("警告") }}</cl-tag>
@@ -38,7 +38,7 @@
 			</demo-item>
 
 			<demo-item :label="t('镂空')">
-				<view class="flex flex-row">
+				<view class="flex flex-row flex-wrap">
 					<cl-tag type="primary" plain>{{ t("主要") }}</cl-tag>
 					<cl-tag type="success" plain>{{ t("成功") }}</cl-tag>
 					<cl-tag type="warn" plain>{{ t("警告") }}</cl-tag>

pages/demo/form/input-otp.uvue

@@ -10,33 +10,31 @@
 			</demo-item>
 
 			<demo-item :label="t('自定义')">
-				<view class="mb-3">
+				<cl-input-otp
-					<cl-input-otp
+					:length="isLength ? 6 : 4"
-						:length="isLength ? 6 : 4"
+					:disabled="isDisabled"
-						:disabled="isDisabled"
+					:pt="{
-						:pt="{
+						item: {
-							item: {
+							className: parseClass({
-								className: parseClass({
+								'!bg-sky-100': isCustom,
-									'!bg-sky-100': isCustom,
+								'!border-white': isCustom
-									'!border-white': isCustom
+							})
-								})
+						},
-							},
+						value: {
-							value: {
+							className: parseClass({
-								className: parseClass({
+								'!text-sky-700': isCustom
-									'!text-sky-700': isCustom
+							})
-								})
+						},
-							},
+						cursor: {
-							cursor: {
+							className: parseClass({
-								className: parseClass({
+								'!bg-sky-700': isCustom
-									'!bg-sky-700': isCustom
+							})
-								})
+						}
-							}
+					}"
-						}"
+					@done="toDone"
-						@done="toDone"
+				></cl-input-otp>
-					></cl-input-otp>
-				</view>
 
-				<cl-list border>
+				<cl-list border :pt="{ className: 'mt-5' }">
 					<cl-list-item :label="t('长度为6')">
 						<cl-switch v-model="isLength"></cl-switch>
 					</cl-list-item>

pages/demo/form/input.uvue

@@ -60,33 +60,31 @@
 			</demo-item>
 
 			<demo-item :label="t('自定义')">
-				<view class="mb-3">
+				<cl-input
-					<cl-input
+					v-model="content"
-						v-model="content"
+					:border="isBorder"
-						:border="isBorder"
+					:suffix-icon="isRightIcon ? 'text' : ''"
-						:suffix-icon="isRightIcon ? 'text' : ''"
+					:prefix-icon="isLeftIcon ? 'search-line' : ''"
-						:prefix-icon="isLeftIcon ? 'search-line' : ''"
+					:disabled="isDisabled"
-						:disabled="isDisabled"
+					:pt="{
-						:pt="{
+						className: parseClass({
+							'!bg-sky-100': isColor,
+							'!border-sky-700': isColor
+						}),
+						inner: {
 							className: parseClass({
-								'!bg-sky-100': isColor,
+								'!text-sky-700': isColor
-								'!border-sky-700': isColor
+							})
-							}),
+						},
-							inner: {
+						prefixIcon: {
-								className: parseClass({
+							className: parseClass({
-									'!text-sky-700': isColor
+								'!text-sky-700': isColor
-								})
+							})
-							},
+						}
-							prefixIcon: {
+					}"
-								className: parseClass({
+				></cl-input>
-									'!text-sky-700': isColor
-								})
-							}
-						}"
-					></cl-input>
-				</view>
 
-				<cl-list border>
+				<cl-list border :pt="{ className: 'mt-5' }">
 					<cl-list-item :label="t('边框')">
 						<cl-switch v-model="isBorder"></cl-switch>
 					</cl-list-item>

pages/demo/form/keyboard.uvue

@@ -2,7 +2,7 @@
 	<cl-page>
 		<view class="p-3">
 			<demo-item :label="t('数字键盘')">
-				<view class="mb-3">
+				<view class="mb-3 overflow-visible">
 					<cl-input type="number" v-model="content"></cl-input>
 				</view>
 
@@ -44,7 +44,7 @@
 			</demo-item>
 
 			<demo-item :label="t('车牌号键盘')">
-				<view class="flex mb-3 justify-center flex-row">
+				<view class="flex mb-3 justify-center flex-row overflow-visible">
 					<cl-input-otp
 						input-type="text"
 						:length="8"

pages/demo/form/textarea.uvue

@@ -6,28 +6,26 @@
 			</demo-item>
 
 			<demo-item :label="t('自定义')">
-				<view class="mb-3">
+				<cl-textarea
-					<cl-textarea
+					v-model="content"
-						v-model="content"
+					:border="isBorder"
-						:border="isBorder"
+					:disabled="isDisabled"
-						:disabled="isDisabled"
+					:show-word-limit="isShowCount"
-						:show-word-limit="isShowCount"
+					:auto-height="isAutoHeight"
-						:auto-height="isAutoHeight"
+					:pt="{
-						:pt="{
+						className: parseClass({
+							'!bg-sky-100': isColor,
+							'!border-sky-700': isColor
+						}),
+						inner: {
 							className: parseClass({
-								'!bg-sky-100': isColor,
+								'!text-sky-700': isColor
-								'!border-sky-700': isColor
+							})
-							}),
+						}
-							inner: {
+					}"
-								className: parseClass({
+				></cl-textarea>
-									'!text-sky-700': isColor
-								})
-							}
-						}"
-					></cl-textarea>
-				</view>
 
-				<cl-list border>
+				<cl-list border :pt="{ className: 'mt-5' }">
 					<cl-list-item :label="t('边框')">
 						<cl-switch v-model="isBorder"></cl-switch>
 					</cl-list-item>

pages/index/home.uvue

@@ -74,7 +74,7 @@
 		</view>
 
 		<!-- 自定义底部导航栏 -->
-		<tabbar></tabbar>
+		<custom-tabbar></custom-tabbar>
 
 		<!-- 主题设置 -->
 		<locale-set :ref="refs.set('localeSet')"></locale-set>
@@ -92,7 +92,7 @@ import { useUi } from "@/uni_modules/cool-ui";
 import { config } from "@/config";
 import LocaleSet from "@/components/locale-set.uvue";
 import SizeSet from "@/components/size-set.uvue";
-import Tabbar from "@/components/tabbar.uvue";
+import CustomTabbar from "@/components/tabbar.uvue";
 
 const ui = useUi();
 const refs = useRefs();

pages/index/my.uvue

@@ -237,7 +237,7 @@
 		</view>
 
 		<!-- 自定义底部导航栏 -->
-		<tabbar></tabbar>
+		<custom-tabbar></custom-tabbar>
 	</cl-page>
 </template>
 
@@ -245,7 +245,7 @@
 import { router, userInfo, useStore } from "@/cool";
 import { t } from "@/locale";
 import { useUi } from "@/uni_modules/cool-ui";
-import Tabbar from "@/components/tabbar.uvue";
+import CustomTabbar from "@/components/tabbar.uvue";
 
 const { user } = useStore();
 const ui = useUi();

pages/index/template.uvue

@@ -21,12 +21,12 @@
 		</view>
 
 		<!-- 自定义底部导航栏 -->
-		<tabbar></tabbar>
+		<custom-tabbar></custom-tabbar>
 	</cl-page>
 </template>
 
 <script setup lang="ts">
-import Tabbar from "@/components/tabbar.uvue";
+import CustomTabbar from "@/components/tabbar.uvue";
 import { router } from "@/cool";
 import { t } from "@/locale";
 import { useUi } from "@/uni_modules/cool-ui";

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

@@ -233,13 +233,13 @@ function animateCursor(isIncreasing: boolean) {
 
 <style lang="scss" scoped>
 .cl-input-otp {
-	@apply relative;
+	@apply relative overflow-visible;
 
 	&__inner {
 		@apply absolute top-0 h-full z-10;
 		opacity: 0;
-		left: -100%;
+		left: 0;
-		width: 200%;
+		width: 100%;
 	}
 
 	&__list {

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 } from "@/cool";
+import { 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: translateX + "rpx"
+		translateX: rpx2px(translateX) + "px"
 	};
 });