优化 cl-text 组件的字体大小和颜色，在 pt 配置中无需添加 ! 符号

components/tabbar.uvue

@@ -23,8 +23,8 @@
 					v-if="item.text != null"
 					:pt="{
 						className: parseClass([
-							'!text-xs mt-1',
-							[path == item.pagePath, '!text-primary-500', '!text-surface-400']
+							'text-xs mt-1',
+							[path == item.pagePath, 'text-primary-500', 'text-surface-400']
 						])
 					}"
 					>{{ t(item.text!) }}</cl-text

cool/utils/comm.ts

@@ -610,73 +610,3 @@ export function isEqual(a: any, b: any): boolean {
 
 	return a == b;
 }
-
-/**
- * 检查是否为小程序环境
- * @returns 是否为小程序环境
- */
-export const isMp = (): boolean => {
-	// #ifdef MP
-	return true;
-	// #endif
-
-	return false;
-};
-
-/**
- * 检查是否为App环境
- * @returns 是否为App环境
- */
-export const isApp = (): boolean => {
-	// #ifdef APP
-	return true;
-	// #endif
-
-	return false;
-};
-
-/**
- * 检查是否为App-IOS环境
- * @returns 是否为App-IOS环境
- */
-export const isAppIOS = (): boolean => {
-	// #ifdef APP-IOS
-	return true;
-	// #endif
-	return false;
-};
-
-/**
- * 检查是否为App-Android环境
- * @returns 是否为App-Android环境
- */
-export const isAppAndroid = (): boolean => {
-	// #ifdef APP-ANDROID
-	return true;
-	// #endif
-	return false;
-};
-
-/**
- * 检查是否为H5环境
- * @returns 是否为H5环境
- */
-export const isH5 = (): boolean => {
-	// #ifdef H5
-	return true;
-	// #endif
-
-	return false;
-};
-
-/**
- * 检查是否为鸿蒙环境
- * @returns 是否为鸿蒙环境
- */
-export const isHarmony = (): boolean => {
-	// #ifdef APP-HARMONY
-	return true;
-	// #endif
-
-	return false;
-};

cool/utils/device.ts

@@ -1,3 +1,73 @@
+/**
+ * 检查是否为小程序环境
+ * @returns 是否为小程序环境
+ */
+export const isMp = (): boolean => {
+	// #ifdef MP
+	return true;
+	// #endif
+
+	return false;
+};
+
+/**
+ * 检查是否为App环境
+ * @returns 是否为App环境
+ */
+export const isApp = (): boolean => {
+	// #ifdef APP
+	return true;
+	// #endif
+
+	return false;
+};
+
+/**
+ * 检查是否为App-IOS环境
+ * @returns 是否为App-IOS环境
+ */
+export const isAppIOS = (): boolean => {
+	// #ifdef APP-IOS
+	return true;
+	// #endif
+	return false;
+};
+
+/**
+ * 检查是否为App-Android环境
+ * @returns 是否为App-Android环境
+ */
+export const isAppAndroid = (): boolean => {
+	// #ifdef APP-ANDROID
+	return true;
+	// #endif
+	return false;
+};
+
+/**
+ * 检查是否为H5环境
+ * @returns 是否为H5环境
+ */
+export const isH5 = (): boolean => {
+	// #ifdef H5
+	return true;
+	// #endif
+
+	return false;
+};
+
+/**
+ * 检查是否为鸿蒙环境
+ * @returns 是否为鸿蒙环境
+ */
+export const isHarmony = (): boolean => {
+	// #ifdef APP-HARMONY
+	return true;
+	// #endif
+
+	return false;
+};
+
 /**
  * 获取设备像素比
  * @returns 设备像素比

cool/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./tailwind";
 export * from "./comm";
 export * from "./day";
 export * from "./device";

cool/utils/rect.ts

@@ -1,6 +1,6 @@
 import { config } from "@/config";
 import { router } from "../router";
-import { isH5, isHarmony } from "./comm";
+import { isH5, isHarmony } from "./device";
 import { ctx } from "../ctx";
 import { getPx } from "./parse";
 

cool/utils/tailwind.ts

@@ -0,0 +1,28 @@
+/**
+ * 判断 Tailwind class 字符串中是否包含文本颜色类（如 text-red, text-red-500, text-sky 等）
+ * @param className 传入的 class 字符串
+ * @returns 是否包含文本颜色类
+ */
+export function hasTextColor(className: string): boolean {
+	if (className == "") return false;
+
+	const regex =
+		/\btext-(primary|surface|red|blue|green|yellow|purple|pink|indigo|gray|grey|black|white|orange|amber|lime|emerald|teal|cyan|sky|violet|fuchsia|rose|slate|zinc|neutral|stone)(?:-\d+)?\b/;
+
+	return regex.test(className);
+}
+
+/**
+ * 判断 Tailwind class 字符串中是否包含字体大小类
+ * 支持如 text-xs, text-sm, text-base, text-lg, text-xl, 以及 text-[22px]、text-[22rpx] 等自定义写法
+ * @param className 传入的 class 字符串
+ * @returns 是否包含字体大小类
+ */
+export function hasTextSize(className: string): boolean {
+	if (className == "") return false;
+
+	const regex =
+		/\btext-(xs|sm|md|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|\[\d+[a-zA-Z%]*\])\b/;
+
+	return regex.test(className);
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cool-unix",
-	"version": "8.0.20",
+	"version": "8.0.21",
 	"license": "MIT",
 	"scripts": {
 		"build-ui": "node ./uni_modules/cool-ui/scripts/generate-types.js",

pages/demo/basic/image.uvue

@@ -9,22 +9,42 @@
 				<view class="flex flex-row justify-between">
 					<view class="flex flex-col items-center justify-center">
 						<cl-image :src="url" mode="aspectFill"></cl-image>
-						<cl-text class="!text-sm mt-1">aspectFill</cl-text>
+						<cl-text
+							:pt="{
+								className: 'text-sm mt-1'
+							}"
+							>aspectFill</cl-text
+						>
 					</view>
 
 					<view class="flex flex-col items-center justify-center">
 						<cl-image :src="url" mode="aspectFit"></cl-image>
-						<cl-text class="!text-sm mt-1">aspectFit</cl-text>
+						<cl-text
+							:pt="{
+								className: 'text-sm mt-1'
+							}"
+							>aspectFit</cl-text
+						>
 					</view>
 
 					<view class="flex flex-col items-center justify-center">
 						<cl-image :src="url" mode="heightFix"></cl-image>
-						<cl-text class="!text-sm mt-1">heightFix</cl-text>
+						<cl-text
+							:pt="{
+								className: 'text-sm mt-1'
+							}"
+							>heightFix</cl-text
+						>
 					</view>
 
 					<view class="flex flex-col items-center justify-center">
 						<cl-image :src="url" mode="scaleToFill"></cl-image>
-						<cl-text class="!text-sm mt-1">scaleToFill</cl-text>
+						<cl-text
+							:pt="{
+								className: 'text-sm mt-1'
+							}"
+							>scaleToFill</cl-text
+						>
 					</view>
 				</view>
 			</demo-item>

pages/demo/basic/text.uvue

@@ -6,7 +6,17 @@
 			</demo-item>
 
 			<demo-item :label="t('自定义颜色')">
-				<cl-text color="primary">云想衣裳花想容，春风拂槛露华浓。</cl-text>
+				<cl-text color="primary">明月松间照，清泉石上流。</cl-text>
+				<cl-text color="error">举头望明月，低头思故乡。</cl-text>
+				<cl-text color="success">春眠不觉晓，处处闻啼鸟。</cl-text>
+				<cl-text color="warn">劝君更尽一杯酒，西出阳关无故人。</cl-text>
+				<cl-text color="info">孤帆远影碧空尽，唯见长江天际流。</cl-text>
+				<cl-text
+					:pt="{
+						className: 'text-sky-500'
+					}"
+					>大漠孤烟直，长河落日圆。</cl-text
+				>
 			</demo-item>
 
 			<demo-item :label="t('手机号脱敏')">

pages/demo/components/item.uvue

@@ -1,6 +1,6 @@
 <template>
 	<view class="demo-item dark:!bg-surface-800">
-		<cl-text :pt="{ className: '!text-sm !text-surface-400 mb-2' }" v-if="label != ''">{{
+		<cl-text :pt="{ className: 'text-sm text-surface-400 mb-2' }" v-if="label != ''">{{
 			label
 		}}</cl-text>
 

pages/demo/components/tips.uvue

@@ -2,7 +2,7 @@
 	<view class="bg-surface-100 dark:!bg-surface-700 rounded-lg p-3 mb-3">
 		<cl-text
 			:pt="{
-				className: '!text-sm'
+				className: 'text-sm'
 			}"
 		>
 			<slot></slot>

pages/demo/data/filter-bar.uvue

@@ -43,13 +43,13 @@
 			</demo-item>
 
 			<demo-item>
-				<cl-text pre-wrap :pt="{ className: '!text-sm p-2' }">{{
+				<cl-text pre-wrap :pt="{ className: 'text-sm p-2' }">{{
 					JSON.stringify(filterForm, null, 4)
 				}}</cl-text>
 			</demo-item>
 
 			<demo-item>
-				<cl-text pre-wrap :pt="{ className: '!text-sm p-2' }">{{
+				<cl-text pre-wrap :pt="{ className: 'text-sm p-2' }">{{
 					JSON.stringify(searchForm, null, 4)
 				}}</cl-text>
 			</demo-item>
@@ -84,7 +84,7 @@
 												]
 											]),
 											label: {
-												className: '!text-sm'
+												className: 'text-sm'
 											}
 										}"
 									></cl-checkbox>
@@ -147,7 +147,7 @@
 												]
 											]),
 											label: {
-												className: '!text-sm'
+												className: 'text-sm'
 											}
 										}"
 									></cl-checkbox>
@@ -177,7 +177,7 @@
 												]
 											]),
 											label: {
-												className: '!text-sm'
+												className: 'text-sm'
 											}
 										}"
 									></cl-radio>
@@ -207,7 +207,7 @@
 												]
 											]),
 											label: {
-												className: '!text-sm'
+												className: 'text-sm'
 											}
 										}"
 									></cl-radio>

pages/demo/data/list.uvue

@@ -8,7 +8,15 @@
 			</demo-item>
 
 			<demo-item :label="t('内容靠左')">
-				<cl-list-item :label="t('QQ')" justify="start">
+				<cl-list-item
+					:label="t('QQ')"
+					justify="start"
+					:pt="{
+						label: {
+							className: '!w-10'
+						}
+					}"
+				>
 					<cl-text>615206459</cl-text>
 				</cl-list-item>
 			</demo-item>
@@ -25,6 +33,21 @@
 				</cl-list-item>
 			</demo-item>
 
+			<demo-item :label="t('带图片')">
+				<cl-list-item
+					arrow
+					:pt="{
+						image: {
+							width: 48,
+							height: 48
+						}
+					}"
+					:label="t('神仙都没用')"
+					image="https://unix.cool-js.com/images/demo/avatar.jpg"
+				>
+				</cl-list-item>
+			</demo-item>
+
 			<demo-item :label="t('折叠')">
 				<cl-list-item :label="t('点击展开')" collapse arrow>
 					<template #collapse>

pages/demo/data/pagination.uvue

@@ -38,7 +38,7 @@
 					<template #prev>
 						<cl-text
 							:pt="{
-								className: '!text-sm'
+								className: 'text-sm'
 							}"
 							>{{ t("上一页") }}</cl-text
 						>
@@ -47,7 +47,7 @@
 					<template #next>
 						<cl-text
 							:pt="{
-								className: '!text-sm'
+								className: 'text-sm'
 							}"
 							>{{ t("下一页") }}</cl-text
 						>

pages/demo/data/timeline.uvue

@@ -49,7 +49,7 @@
 							<view class="flex-1 px-3">
 								<cl-text>{{ t("优选灵活配置混合A") }}</cl-text>
 
-								<cl-text class="mr-5 mt-1 !text-sm">{{ t("1000元起") }}</cl-text>
+								<cl-text class="mr-5 mt-1 text-sm">{{ t("1000元起") }}</cl-text>
 
 								<view class="flex flex-row mt-2 items-center">
 									<cl-button size="small" type="light">{{

pages/demo/data/tree.uvue

@@ -43,7 +43,7 @@
 					<cl-text
 						v-if="halfCheckedKeys.length > 0"
 						:pt="{
-							className: '!text-sm p-2'
+							className: 'text-sm p-2'
 						}"
 						>{{ halfCheckedKeys.join("、") }}</cl-text
 					>
@@ -65,7 +65,7 @@
 					<cl-text
 						v-if="expandedKeys.length > 0"
 						:pt="{
-							className: '!text-sm p-2'
+							className: 'text-sm p-2'
 						}"
 						>{{ expandedKeys.join("、") }}</cl-text
 					>

pages/demo/data/waterfall.uvue

@@ -27,7 +27,7 @@
 
 							<cl-row class="mt-2" :pt="{ className: 'justify-end items-center' }">
 								<cl-icon name="heart-line"></cl-icon>
-								<cl-text :pt="{ className: '!text-sm ml-1' }">{{
+								<cl-text :pt="{ className: 'text-sm ml-1' }">{{
 									item["likeCount"]
 								}}</cl-text>
 							</cl-row>

pages/demo/feedback/action-sheet.uvue

@@ -57,7 +57,7 @@
 			<template #item="{ item }">
 				<view class="flex flex-col justify-center items-center">
 					<cl-icon :name="item.icon" :size="46"></cl-icon>
-					<cl-text :pt="{ className: '!text-sm mt-1' }">{{ item.label }}</cl-text>
+					<cl-text :pt="{ className: 'text-sm mt-1' }">{{ item.label }}</cl-text>
 				</view>
 			</template>
 		</cl-action-sheet>

pages/demo/form/checkbox.uvue

@@ -77,7 +77,23 @@
 								{
 									'!bg-surface-700': isDark && isCustom
 								}
+							]),
+							icon: {
+								className: parseClass([
+									[
+										isCustom && checked3.includes(item.value as string),
+										'text-red-500'
+									]
 								])
+							},
+							label: {
+								className: parseClass([
+									[
+										isCustom && checked3.includes(item.value as string),
+										'text-red-500'
+									]
+								])
+							}
 						}"
 					>
 						{{ item.label }}

pages/demo/form/form.uvue

@@ -141,7 +141,7 @@
 			</demo-item>
 
 			<demo-item>
-				<cl-text pre-wrap :pt="{ className: '!text-sm p-2' }">{{
+				<cl-text pre-wrap :pt="{ className: 'text-sm p-2' }">{{
 					JSON.stringify(formData, null, 4)
 				}}</cl-text>
 			</demo-item>

pages/demo/form/radio.uvue

@@ -66,7 +66,17 @@
 								{
 									'!bg-surface-700': isDark && isCustom
 								}
+							]),
+							icon: {
+								className: parseClass([
+									[isCustom && item.value == checked3, 'text-red-500']
 								])
+							},
+							label: {
+								className: parseClass([
+									[isCustom && item.value == checked3, 'text-red-500']
+								])
+							}
 						}"
 					>
 						{{ item.label }}

pages/demo/form/select.uvue

@@ -53,7 +53,7 @@
 				<cl-text
 					:pt="{
 						className:
-							'mb-3 !text-sm p-3 bg-surface-100 dark:!bg-surface-700 rounded-lg'
+							'mb-3 text-sm p-3 bg-surface-100 dark:!bg-surface-700 rounded-lg'
 					}"
 					v-if="form.selected4 != null && isShowValue"
 				>
@@ -120,7 +120,7 @@ type Form = {
 };
 
 const form = reactive<Form>({
-	selected: 1,
+	selected: null,
 	selected2: "2",
 	selected3: [],
 	selected4: 3

pages/demo/form/textarea.uvue

@@ -19,7 +19,7 @@
 						}),
 						inner: {
 							className: parseClass({
-								'!text-sky-700': isColor
+								'text-sky-700': isColor
 							})
 						}
 					}"

pages/set/general.uvue

@@ -7,10 +7,16 @@
 				</cl-list-item>
 
 				<cl-list-item :label="t('多语言')" arrow hoverable @tap="setLocale"> </cl-list-item>
+
+				<cl-list-item :label="t('字体大小')" arrow hoverable @tap="setSize"> </cl-list-item>
 			</cl-list>
 		</view>
 
+		<!-- 语言设置 -->
 		<locale-set :ref="refs.set('localeSet')"></locale-set>
+
+		<!-- 字体大小设置 -->
+		<size-set :ref="refs.set('sizeSet')"></size-set>
 	</cl-page>
 </template>
 
@@ -18,6 +24,7 @@
 import { isDark, toggleTheme, useRefs } from "@/cool";
 import { t } from "@/locale";
 import LocaleSet from "@/components/locale-set.uvue";
+import SizeSet from "@/components/size-set.uvue";
 
 const refs = useRefs();
 
@@ -28,4 +35,8 @@ function onThemeChange() {
 function setLocale() {
 	refs.open("localeSet");
 }
+
+function setSize() {
+	refs.open("sizeSet");
+}
 </script>

pages/template/shop/shopping-cart.uvue

@@ -34,7 +34,7 @@
 			<view class="p-3 rounded-xl bg-white dark:!bg-surface-800 mb-3">
 				<cl-text
 					:pt="{
-						className: '!text-sm'
+						className: 'text-sm'
 					}"
 					>🔥 最新降价商品，限时优惠，抓紧抢购！</cl-text
 				>
@@ -81,7 +81,7 @@
 							>
 								<cl-text
 									:pt="{
-										className: '!text-xs'
+										className: 'text-xs'
 									}"
 									>{{ item.skuName }}</cl-text
 								>
@@ -92,13 +92,13 @@
 						<view class="flex flex-row items-center mb-2">
 							<cl-text
 								:pt="{
-									className: '!text-[22rpx] !text-red-500 mr-[1rpx]'
+									className: 'text-[22rpx] text-red-500 mr-[1rpx]'
 								}"
 								>¥</cl-text
 							>
 							<cl-text
 								:pt="{
-									className: '!text-red-500 !text-[32rpx] mr-auto'
+									className: 'text-red-500 text-[32rpx] mr-auto'
 								}"
 								>{{ item.price }}</cl-text
 							>
@@ -131,7 +131,7 @@
 										value: {
 											className: '!w-[60rpx] rounded-full !px-0',
 											input: {
-												className: '!text-[24rpx]'
+												className: 'text-[24rpx]'
 											}
 										}
 									}"
@@ -191,7 +191,7 @@
 						<cl-text
 							color="info"
 							:pt="{
-								className: '!text-xs'
+								className: 'text-xs'
 							}"
 							>{{ t("合计") }}</cl-text
 						>

pages/user/components/login/phone.uvue

@@ -1,7 +1,7 @@
 <template>
 	<view class="flex flex-col mb-5">
-		<cl-text :pt="{ className: '!text-lg font-bold' }">{{ t("手机登录") }}</cl-text>
-		<cl-text :pt="{ className: '!text-sm mt-2' }" color="info">{{
+		<cl-text :pt="{ className: 'text-lg font-bold' }">{{ t("手机登录") }}</cl-text>
+		<cl-text :pt="{ className: 'text-sm mt-2' }" color="info">{{
 			t("未注册的手机号登录成功后将自动注册")
 		}}</cl-text>
 	</view>

pages/user/components/login/wx.uvue

@@ -7,7 +7,7 @@
 		@close="onEditClose"
 	>
 		<view class="p-4 pt-0">
-			<cl-text color="info" :pt="{ className: '!text-sm' }">
+			<cl-text color="info" :pt="{ className: 'text-sm' }">
 				{{ t("为提供更好的服务，我们邀请您填写昵称、头像等公开信息") }}
 			</cl-text>
 

pages/user/edit-name.uvue

@@ -13,14 +13,14 @@
 				}"
 			>
 				<template #append>
-					<cl-text color="info" :pt="{ className: '!text-sm ml-2' }"
+					<cl-text color="info" :pt="{ className: 'text-sm ml-2' }"
 						>{{ content.length }}/20</cl-text
 					>
 				</template>
 			</cl-input>
 
 			<view class="p-3">
-				<cl-text color="info" :pt="{ className: '!text-sm' }">{{
+				<cl-text color="info" :pt="{ className: 'text-sm' }">{{
 					t("请设置2-20个字符，不包括@<>/等无效字符")
 				}}</cl-text>
 			</view>

pages/user/login.uvue

@@ -14,7 +14,7 @@
 					></cl-image>
 				</view>
 
-				<cl-text :pt="{ className: '!text-xl font-bold mt-3' }">{{ config.name }}</cl-text>
+				<cl-text :pt="{ className: 'text-xl font-bold mt-3' }">{{ config.name }}</cl-text>
 			</view>
 
 			<!-- 手机号登录 -->
@@ -32,18 +32,18 @@
 					inactive-icon="checkbox-blank-circle-line"
 				>
 				</cl-checkbox>
-				<cl-text color="info" :pt="{ className: '!text-xs' }">{{
+				<cl-text color="info" :pt="{ className: 'text-xs' }">{{
 					t("已阅读并同意")
 				}}</cl-text>
 				<cl-text
-					:pt="{ className: '!text-xs' }"
+					:pt="{ className: 'text-xs' }"
 					@tap.stop="toDoc(t('用户协议'), 'userAgreement')"
 				>
 					《{{ t("用户协议") }}》
 				</cl-text>
-				<cl-text color="info" :pt="{ className: '!text-xs' }">、</cl-text>
+				<cl-text color="info" :pt="{ className: 'text-xs' }">、</cl-text>
 				<cl-text
-					:pt="{ className: '!text-xs' }"
+					:pt="{ className: 'text-xs' }"
 					@tap.stop="toDoc(t('隐私政策'), 'privacyPolicy')"
 				>
 					《{{ t("隐私政策") }}》

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

@@ -17,7 +17,7 @@
 			<view class="cl-action-sheet__description" v-if="config.description != ''">
 				<cl-text
 					:pt="{
-						className: '!text-surface-400 !text-md text-center'
+						className: 'text-surface-400 text-md text-center'
 					}"
 					>{{ config.description }}</cl-text
 				>

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-xs', pt.text?.className])
+				className: parseClass(['cl-badge__text text-white text-xs', pt.text?.className])
 			}"
 			v-if="!dot"
 		>

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

@@ -388,6 +388,7 @@ onMounted(() => {
 
 	&__item {
 		@apply relative duration-200;
+		transition-property: transform;
 
 		&-image {
 			@apply w-full h-full rounded-xl;

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

@@ -92,7 +92,7 @@
 					className: parseClass([
 						'cl-button__label',
 						{
-							'!text-sm': size == 'small'
+							'text-sm': size == 'small'
 						},
 						pt.label?.className
 					])

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

@@ -76,7 +76,7 @@
 									<cl-text
 										:pt="{
 											className: parseClass({
-												'!text-primary-500': onItemActive(index, data)
+												'text-primary-500': onItemActive(index, data)
 											})
 										}"
 										>{{ data[labelKey] }}</cl-text

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

@@ -18,7 +18,7 @@
 				className: parseClass([
 					'cl-checkbox__icon mr-1',
 					{
-						'!text-primary-500': isChecked
+						'text-primary-500': isChecked
 					},
 					pt.icon?.className
 				])
@@ -30,7 +30,7 @@
 				className: parseClass([
 					'cl-checkbox__label',
 					{
-						'!text-primary-500': isChecked
+						'text-primary-500': isChecked
 					},
 					pt.label?.className
 				])

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

@@ -54,7 +54,7 @@
 					<view class="cl-cropper__guide-text">
 						<cl-text
 							:pt="{
-								className: '!text-xl'
+								className: 'text-xl'
 							}"
 							color="white"
 						>
@@ -65,7 +65,7 @@
 
 						<cl-text
 							:pt="{
-								className: '!text-xl'
+								className: 'text-xl'
 							}"
 							color="white"
 						>

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

@@ -23,7 +23,7 @@
 				className: parseClass([
 					'cl-empty__text',
 					{
-						'!text-surface-100': isDark
+						'text-surface-100': isDark
 					}
 				])
 			}"

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

@@ -4,7 +4,7 @@
 			<cl-text
 				:pt="{
 					className: parseClass([
-						[isActive, '!text-primary-500'],
+						[isActive, 'text-primary-500'],
 						'text-center',
 						pt.label?.className
 					])

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

@@ -41,7 +41,7 @@
 				<cl-text
 					color="error"
 					:pt="{
-						className: parseClass(['mt-2 !text-sm', pt.error?.className])
+						className: parseClass(['mt-2 text-sm', pt.error?.className])
 					}"
 				>
 					{{ errorText }}

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

@@ -1,30 +1,12 @@
 <template>
-	<text
-		class="cl-icon"
-		:class="[
-			isDark ? 'text-white' : 'text-surface-700',
-			{
-				'!text-primary-500': color == 'primary',
-				'!text-green-500': color == 'success',
-				'!text-yellow-500': color == 'warn',
-				'!text-red-500': color == 'error',
-				'!text-surface-500': color == 'info',
-				'!text-surface-700': color == 'dark',
-				'!text-surface-50': color == 'light',
-				'!text-surface-300': color == 'disabled'
-			},
-			pt.className
-		]"
-		:style="iconStyle"
-		:key="cache.key"
-	>
+	<text class="cl-icon" :class="[ptClassName]" :style="iconStyle" :key="cache.key">
 		{{ icon.text }}
 	</text>
 </template>
 
 <script setup lang="ts">
 import { computed, type PropType } from "vue";
-import { forInObject, get, has, parsePt, useCache, isDark } from "@/cool";
+import { forInObject, get, has, parsePt, useCache, isDark, ctx, hasTextColor } from "@/cool";
 import { icons } from "@/icons";
 import { useSize } from "../../hooks";
 
@@ -66,12 +48,6 @@ const props = defineProps({
 	}
 });
 
-// 缓存
-const { cache } = useCache(() => [props.color]);
-
-// 字号
-const { getRpx } = useSize();
-
 // 透传样式类型定义
 type PassThrough = {
 	className?: string;
@@ -80,6 +56,12 @@ type PassThrough = {
 // 解析透传样式
 const pt = computed(() => parsePt<PassThrough>(props.pt));
 
+// 缓存
+const { cache } = useCache(() => [props.color]);
+
+// 字号
+const { getRpx, ptClassName } = useSize(() => pt.value.className ?? "");
+
 // 图标类型定义
 type Icon = {
 	font: string; // 字体名称
@@ -113,23 +95,58 @@ const icon = computed<Icon>(() => {
 	};
 });
 
+// 图标颜色
+const color = computed(() => {
+	if (props.color != "") {
+		switch (props.color) {
+			case "primary":
+				return ctx.color["primary-500"] as string;
+			case "success":
+				return "#22c55e";
+			case "warn":
+				return "#eab308";
+			case "error":
+				return "#ef4444";
+			case "info":
+				return ctx.color["surface-500"] as string;
+			case "dark":
+				return ctx.color["surface-700"] as string;
+			case "light":
+				return ctx.color["surface-50"] as string;
+			case "disabled":
+				return ctx.color["surface-300"] as string;
+			default:
+				return props.color;
+		}
+	}
+
+	return isDark.value ? "white" : (ctx.color["surface-700"] as string);
+});
+
 // 图标样式
 const iconStyle = computed(() => {
 	const style = {};
 
-	if (props.color != "") {
-		style["color"] = props.color;
+	// 判断是不是有颜色样式
+	if (!hasTextColor(ptClassName.value)) {
+		style["color"] = color.value;
 	}
 
+	// 设置字体
 	if (icon.value.font != "") {
 		style["fontFamily"] = icon.value.font;
 	}
 
+	// 设置字体大小
 	style["fontSize"] = getRpx(props.size!);
+
+	// 设置高度
 	style["height"] = getRpx(props.height ?? props.size!);
-	style["width"] = getRpx(props.width ?? props.size!);
 	style["lineHeight"] = getRpx(props.size!);
 
+	// 设置宽度
+	style["width"] = getRpx(props.width ?? props.size!);
+
 	return style;
 });
 </script>

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

@@ -25,7 +25,7 @@
 					<cl-text
 						v-if="value != ''"
 						:pt="{
-							className: '!text-2xl'
+							className: 'text-2xl'
 						}"
 						>{{ valueText }}</cl-text
 					>
@@ -33,7 +33,7 @@
 					<cl-text
 						v-else
 						:pt="{
-							className: '!text-md !text-surface-400'
+							className: 'text-md text-surface-400'
 						}"
 						>{{ placeholder }}</cl-text
 					>

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

@@ -25,7 +25,7 @@
 					<cl-text
 						v-if="value != ''"
 						:pt="{
-							className: '!text-2xl'
+							className: 'text-2xl'
 						}"
 						>{{ value }}</cl-text
 					>
@@ -33,7 +33,7 @@
 					<cl-text
 						v-else
 						:pt="{
-							className: '!text-md !text-surface-400'
+							className: 'text-md text-surface-400'
 						}"
 						>{{ placeholder }}</cl-text
 					>
@@ -73,7 +73,7 @@
 											<cl-text
 												color="white"
 												:pt="{
-													className: '!text-lg'
+													className: 'text-lg'
 												}"
 												>{{ confirmText }}</cl-text
 											>
@@ -84,7 +84,7 @@
 										<cl-text
 											v-else
 											:pt="{
-												className: '!text-lg'
+												className: 'text-lg'
 											}"
 											>{{ item }}</cl-text
 										>
@@ -120,7 +120,7 @@
 									v-if="item == 'confirm'"
 									color="white"
 									:pt="{
-										className: '!text-lg'
+										className: 'text-lg'
 									}"
 									>{{ confirmText }}</cl-text
 								>

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

@@ -25,7 +25,7 @@
 					<cl-text
 						v-if="value != ''"
 						:pt="{
-							className: '!text-2xl'
+							className: 'text-2xl'
 						}"
 						>{{ valueText }}</cl-text
 					>
@@ -33,7 +33,7 @@
 					<cl-text
 						v-else
 						:pt="{
-							className: '!text-md !text-surface-400'
+							className: 'text-md text-surface-400'
 						}"
 						>{{ placeholder }}</cl-text
 					>
@@ -77,7 +77,7 @@
 								v-else-if="item == 'confirm'"
 								color="white"
 								:pt="{
-									className: '!text-lg'
+									className: 'text-lg'
 								}"
 								>{{ confirmText }}</cl-text
 							>
@@ -85,7 +85,7 @@
 							<cl-text
 								v-else-if="item == 'letter'"
 								:pt="{
-									className: '!text-lg'
+									className: 'text-lg'
 								}"
 								>ABC</cl-text
 							>
@@ -93,7 +93,7 @@
 							<cl-text
 								v-else-if="item == 'number'"
 								:pt="{
-									className: '!text-lg'
+									className: 'text-lg'
 								}"
 								>123</cl-text
 							>
@@ -114,7 +114,7 @@
 							<cl-text
 								v-else
 								:pt="{
-									className: '!text-lg'
+									className: 'text-lg'
 								}"
 								>{{ item }}</cl-text
 							>

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

@@ -13,7 +13,14 @@
 			@tap="prev"
 		>
 			<slot name="prev" :disabled="value == 1">
-				<cl-icon name="arrow-left-s-line"></cl-icon>
+				<cl-icon
+					:name="pt.prevIcon?.name ?? 'arrow-left-s-line'"
+					:size="pt.prevIcon?.size"
+					:color="pt.prevIcon?.color"
+					:pt="{
+						className: pt.prevIcon?.className
+					}"
+				></cl-icon>
 			</slot>
 		</view>
 
@@ -35,9 +42,9 @@
 					className: parseClass([
 						'cl-pagination__item-text',
 						{
-							'is-active': item == value,
-							'is-dark': isDark
-						}
+							'text-white': item == value
+						},
+						pt.itemText?.className
 					])
 				}"
 				>{{ item }}</cl-text
@@ -57,7 +64,14 @@
 			@tap="next"
 		>
 			<slot name="next" :disabled="value == totalPage">
-				<cl-icon name="arrow-right-s-line"></cl-icon>
+				<cl-icon
+					:name="pt.nextIcon?.name ?? 'arrow-right-s-line'"
+					:size="pt.nextIcon?.size"
+					:color="pt.nextIcon?.color"
+					:pt="{
+						className: pt.nextIcon?.className
+					}"
+				></cl-icon>
 			</slot>
 		</view>
 	</view>
@@ -67,6 +81,7 @@
 import type { PassThroughProps } from "../../types";
 import { isDark, parseClass, parsePt } from "@/cool";
 import { computed, ref, watch } from "vue";
+import type { ClIconProps } from "../cl-icon/props";
 
 defineOptions({
 	name: "cl-pagination"
@@ -97,8 +112,11 @@ const emit = defineEmits(["update:modelValue", "change"]);
 type PassThrough = {
 	className?: string;
 	item?: PassThroughProps;
+	itemText?: PassThroughProps;
 	prev?: PassThroughProps;
+	prevIcon?: ClIconProps;
 	next?: PassThroughProps;
+	nextIcon?: ClIconProps;
 };
 
 // 解析透传样式配置
@@ -211,7 +229,7 @@ defineExpose({
 		}
 
 		&.is-dark {
-			@apply bg-surface-700 text-white;
+			@apply bg-surface-700;
 		}
 	}
 
@@ -230,14 +248,5 @@ defineExpose({
 	&__next {
 		margin-left: 5rpx;
 	}
-
-	&__item-text {
-		@apply text-md text-surface-700;
-
-		&.is-dark,
-		&.is-active {
-			@apply text-white;
-		}
-	}
 }
 </style>

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

@@ -3,7 +3,7 @@
 		<view class="cl-picker-view__header" v-if="headers.length > 0">
 			<cl-text
 				:pt="{
-					className: 'flex-1 !text-sm text-center'
+					className: 'flex-1 text-sm text-center'
 				}"
 				v-for="(label, index) in headers"
 				:key="index"
@@ -42,8 +42,8 @@
 						<cl-text
 							:pt="{
 								className: parseClass([
-									[isDark, '!text-surface-500'],
-									[isDark && index == value[columnIndex], '!text-white']
+									[isDark, 'text-surface-500'],
+									[isDark && index == value[columnIndex], 'text-white']
 								])
 							}"
 							>{{ item.label }}</cl-text

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

@@ -90,7 +90,7 @@
 								:size="40"
 								:pt="{
 									className:
-										'absolute right-[24rpx] !text-surface-400 dark:!text-surface-50'
+										'absolute right-[24rpx] text-surface-400 dark:text-surface-50'
 								}"
 								@tap="close"
 								@touchmove.stop

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

@@ -18,7 +18,7 @@
 				className: parseClass([
 					'cl-radio__icon mr-1',
 					{
-						'!text-primary-500': isChecked
+						'text-primary-500': isChecked
 					},
 					pt.icon?.className
 				])
@@ -30,7 +30,7 @@
 				className: parseClass([
 					'cl-radio__label',
 					{
-						'!text-primary-500': isChecked
+						'text-primary-500': isChecked
 					},
 					pt.label?.className
 				])

uni_modules/cool-ui/components/cl-select-date/cl-select-date.uvue

@@ -61,7 +61,7 @@
 						<cl-text
 							v-else
 							:pt="{
-								className: 'text-center !text-surface-400'
+								className: 'text-center text-surface-400'
 							}"
 							>{{ startPlaceholder }}</cl-text
 						>
@@ -88,7 +88,7 @@
 						<cl-text
 							v-else
 							:pt="{
-								className: 'text-center !text-surface-400'
+								className: 'text-center text-surface-400'
 							}"
 							>{{ endPlaceholder }}</cl-text
 						>

uni_modules/cool-ui/components/cl-select-trigger/cl-select-trigger.uvue

@@ -18,7 +18,7 @@
 				:pt="{
 					className: parseClass([
 						{
-							'!text-surface-400': isDisabled
+							'text-surface-400': isDisabled
 						},
 						pt.text?.className
 					])
@@ -30,7 +30,7 @@
 
 			<cl-text
 				:pt="{
-					className: parseClass(['!text-surface-400', pt.placeholder?.className])
+					className: parseClass(['text-surface-400', pt.placeholder?.className])
 				}"
 				v-else
 			>
@@ -42,7 +42,7 @@
 			<cl-icon
 				name="close-circle-fill"
 				:size="32"
-				:pt="{ className: '!text-surface-400' }"
+				:pt="{ className: 'text-surface-400' }"
 			></cl-icon>
 		</view>
 
@@ -51,7 +51,7 @@
 				:name="pt.icon?.name ?? arrowIcon"
 				:size="pt.icon?.size ?? 32"
 				:pt="{
-					className: `!text-surface-400 ${pt.icon?.className}`
+					className: `text-surface-400 ${pt.icon?.className}`
 				}"
 			></cl-icon>
 		</view>

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

@@ -40,7 +40,7 @@
 								className: parseClass([
 									[
 										item.isActive && color == '' && unColor == '',
-										showSlider ? '!text-white' : '!text-primary-500'
+										showSlider ? 'text-white' : 'text-primary-500'
 									],
 									pt.text?.className
 								])

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

@@ -23,7 +23,7 @@
 		<cl-text
 			:color="color"
 			:pt="{
-				className: parseClass(['cl-tag__text !text-sm', pt.text?.className])
+				className: parseClass(['cl-tag__text text-sm', pt.text?.className])
 			}"
 		>
 			<slot></slot>

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

@@ -3,20 +3,10 @@
 	<view
 		class="cl-text"
 		:class="[
-			isDark ? 'text-surface-50' : 'text-surface-700',
 			{
-				'truncate w-full': ellipsis,
-				'cl-text--pre-wrap': preWrap
-			},
-			{
-				'!text-primary-500': color == 'primary',
-				'!text-green-500': color == 'success',
-				'!text-yellow-500': color == 'warn',
-				'!text-red-500': color == 'error',
-				[isDark ? '!text-surface-300' : '!text-surface-500']: color == 'info',
-				'!text-surface-700': color == 'dark',
-				'!text-surface-50': color == 'light',
-				'!text-surface-400': color == 'disabled'
+				'cl-text--pre-wrap': preWrap,
+				'cl-text--ellipsis': ellipsis,
+				'cl-text--default-size': isDefaultSize
 			},
 			ptClassName
 		]"
@@ -34,20 +24,10 @@
 	<text
 		class="cl-text"
 		:class="[
-			isDark ? 'text-surface-50' : 'text-surface-700',
 			{
-				'truncate w-full': ellipsis,
-				'cl-text--pre-wrap': preWrap
-			},
-			{
-				'!text-primary-500': color == 'primary',
-				'!text-green-500': color == 'success',
-				'!text-yellow-500': color == 'warn',
-				'!text-red-500': color == 'error',
-				[isDark ? '!text-surface-300' : '!text-surface-500']: color == 'info',
-				'!text-surface-700': color == 'dark',
-				'!text-surface-50': color == 'light',
-				'!text-surface-400': color == 'disabled'
+				'cl-text--pre-wrap': preWrap,
+				'cl-text--ellipsis': ellipsis,
+				'cl-text--default-size': isDefaultSize
 			},
 			ptClassName
 		]"
@@ -64,7 +44,7 @@
 
 <script setup lang="ts">
 import { computed, type PropType } from "vue";
-import { isDark, parsePt, useCache } from "@/cool";
+import { ctx, hasTextColor, hasTextSize, isDark, parsePt, useCache } from "@/cool";
 import type { ClTextType } from "../../types";
 import { useSize } from "../../hooks";
 
@@ -170,12 +150,46 @@ const pt = computed(() => parsePt<PassThrough>(props.pt));
 // 文本大小
 const { getSize, getLineHeight, ptClassName } = useSize(() => pt.value.className ?? "");
 
+// 文本颜色
+const color = computed(() => {
+	if (props.color != "") {
+		switch (props.color) {
+			case "primary":
+				return ctx.color["primary-500"] as string;
+			case "success":
+				return "#22c55e";
+			case "warn":
+				return "#eab308";
+			case "error":
+				return "#ef4444";
+			case "info":
+				return isDark.value
+					? (ctx.color["surface-300"] as string)
+					: (ctx.color["surface-500"] as string);
+			case "dark":
+				return ctx.color["surface-700"] as string;
+			case "light":
+				return ctx.color["surface-50"] as string;
+			case "disabled":
+				return ctx.color["surface-400"] as string;
+			default:
+				return props.color;
+		}
+	}
+
+	return isDark.value ? "white" : (ctx.color["surface-700"] as string);
+});
+
+// 是否默认大小
+const isDefaultSize = computed(() => !hasTextSize(pt.value.className ?? ""));
+
 // 文本样式
 const textStyle = computed(() => {
 	const style = {};
 
-	if (props.color != "") {
-		style["color"] = props.color;
+	// 判断是不是有颜色样式
+	if (!hasTextColor(ptClassName.value)) {
+		style["color"] = color.value;
 	}
 
 	// 字号
@@ -295,8 +309,6 @@ const content = computed(() => {
 
 <style lang="scss" scoped>
 .cl-text {
-	@apply text-md;
-
 	// #ifndef APP
 	flex-shrink: unset;
 	// #endif
@@ -306,5 +318,13 @@ const content = computed(() => {
 		white-space: pre-wrap;
 		// #endif
 	}
+
+	&--ellipsis {
+		@apply truncate w-full;
+	}
+
+	&--default-size {
+		@apply text-md;
+	}
 }
 </style>

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

@@ -51,7 +51,7 @@
 		/>
 
 		<cl-text
-			:pt="{ className: 'absolute right-2 bottom-2 !text-xs !text-surface-400' }"
+			:pt="{ className: 'absolute right-2 bottom-2 text-xs text-surface-400' }"
 			v-if="showWordLimit"
 			>{{ value.length }} / {{ maxlength }}</cl-text
 		>

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

@@ -29,7 +29,7 @@
 				:pt="{
 					className: parseClass([
 						`mb-1 !font-bold ${pt.title?.className}`,
-						[isDark, '!text-white', '!text-surface-900']
+						[isDark, 'text-white', 'text-surface-900']
 					])
 				}"
 				>{{ title }}</cl-text
@@ -38,7 +38,7 @@
 			<cl-text
 				v-if="content != ''"
 				:pt="{
-					className: `mb-2 !text-sm ${pt.content?.className}`
+					className: `mb-2 text-sm ${pt.content?.className}`
 				}"
 				>{{ content }}</cl-text
 			>
@@ -48,7 +48,7 @@
 			<cl-text
 				v-if="date != ''"
 				:pt="{
-					className: `!text-xs ${pt.date?.className}`
+					className: `text-xs ${pt.date?.className}`
 				}"
 				color="info"
 				>{{ date }}</cl-text

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

@@ -28,10 +28,11 @@
 			>
 				<view class="flex flex-row justify-center">
 					<cl-icon
+						color="white"
 						:name="item.icon"
 						:size="56"
 						:pt="{
-							className: `mb-1 !text-white`
+							className: `mb-1`
 						}"
 						v-if="item.icon != null"
 					></cl-icon>

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

@@ -31,7 +31,7 @@
 					<cl-text
 						:color="color"
 						:pt="{
-							className: parseClass(['!text-md', pt.title?.className])
+							className: parseClass(['text-md', pt.title?.className])
 						}"
 					>
 						{{ title }}

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

@@ -58,7 +58,7 @@
 				:name="icon"
 				:pt="{
 					className: parseClass([
-						[isDark, '!text-white', '!text-surface-400'],
+						[isDark, 'text-white', 'text-surface-400'],
 						pt.icon?.className
 					])
 				}"
@@ -68,8 +68,8 @@
 			<cl-text
 				:pt="{
 					className: parseClass([
-						[isDark, '!text-white', '!text-surface-500'],
-						'!text-xs mt-1 text-center',
+						[isDark, 'text-white', 'text-surface-500'],
+						'text-xs mt-1 text-center',
 						pt.text?.className
 					])
 				}"