From 1b6fc90d599a191c95e502ac155936618f051ee6 Mon Sep 17 00:00:00 2001
From: icssoa <615206459@qq.com>
Date: Sun, 7 Sep 2025 11:08:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20cl-text=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E5=AD=97=E4=BD=93=E5=A4=A7=E5=B0=8F=E5=92=8C?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=EF=BC=8C=E5=9C=A8=20pt=20=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=B8=AD=E6=97=A0=E9=9C=80=E6=B7=BB=E5=8A=A0=20!=20=E7=AC=A6?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/tabbar.uvue                        |  4 +-
 cool/utils/comm.ts                            | 70 ----------------
 cool/utils/device.ts                          | 70 ++++++++++++++++
 cool/utils/index.ts                           |  1 +
 cool/utils/rect.ts                            |  2 +-
 cool/utils/tailwind.ts                        | 28 +++++++
 package.json                                  |  2 +-
 pages/demo/basic/image.uvue                   | 28 ++++++-
 pages/demo/basic/text.uvue                    | 12 ++-
 pages/demo/components/item.uvue               |  2 +-
 pages/demo/components/tips.uvue               |  2 +-
 pages/demo/data/filter-bar.uvue               | 12 +--
 pages/demo/data/list.uvue                     | 25 +++++-
 pages/demo/data/pagination.uvue               |  4 +-
 pages/demo/data/timeline.uvue                 |  2 +-
 pages/demo/data/tree.uvue                     |  4 +-
 pages/demo/data/waterfall.uvue                |  2 +-
 pages/demo/feedback/action-sheet.uvue         |  2 +-
 pages/demo/form/checkbox.uvue                 | 18 +++-
 pages/demo/form/form.uvue                     |  2 +-
 pages/demo/form/radio.uvue                    | 12 ++-
 pages/demo/form/select.uvue                   |  4 +-
 pages/demo/form/textarea.uvue                 |  2 +-
 pages/set/general.uvue                        | 11 +++
 pages/template/shop/shopping-cart.uvue        | 12 +--
 pages/user/components/login/phone.uvue        |  4 +-
 pages/user/components/login/wx.uvue           |  2 +-
 pages/user/edit-name.uvue                     |  4 +-
 pages/user/login.uvue                         | 10 +--
 .../cl-action-sheet/cl-action-sheet.uvue      |  2 +-
 .../cool-ui/components/cl-badge/cl-badge.uvue |  2 +-
 .../components/cl-banner/cl-banner.uvue       |  1 +
 .../components/cl-button/cl-button.uvue       |  2 +-
 .../components/cl-cascader/cl-cascader.uvue   |  2 +-
 .../components/cl-checkbox/cl-checkbox.uvue   |  4 +-
 .../components/cl-cropper/cl-cropper.uvue     |  4 +-
 .../cool-ui/components/cl-empty/cl-empty.uvue |  2 +-
 .../cl-filter-item/cl-filter-item.uvue        |  2 +-
 .../components/cl-form-item/cl-form-item.uvue |  2 +-
 .../cool-ui/components/cl-icon/cl-icon.uvue   | 75 ++++++++++-------
 .../cl-keyboard-car/cl-keyboard-car.uvue      |  4 +-
 .../cl-keyboard-number.uvue                   | 10 +--
 .../cl-keyboard-password.uvue                 | 12 +--
 .../cl-pagination/cl-pagination.uvue          | 39 +++++----
 .../cl-picker-view/cl-picker-view.uvue        |  6 +-
 .../cool-ui/components/cl-popup/cl-popup.uvue |  2 +-
 .../cool-ui/components/cl-radio/cl-radio.uvue |  4 +-
 .../cl-select-date/cl-select-date.uvue        |  4 +-
 .../cl-select-trigger/cl-select-trigger.uvue  |  8 +-
 .../cool-ui/components/cl-tabs/cl-tabs.uvue   |  2 +-
 .../cool-ui/components/cl-tag/cl-tag.uvue     |  2 +-
 .../cool-ui/components/cl-text/cl-text.uvue   | 82 ++++++++++++-------
 .../components/cl-textarea/cl-textarea.uvue   |  2 +-
 .../cl-timeline-item/cl-timeline-item.uvue    |  6 +-
 .../cool-ui/components/cl-toast/cl-toast.uvue |  3 +-
 .../components/cl-topbar/cl-topbar.uvue       |  2 +-
 .../components/cl-upload/cl-upload.uvue       |  6 +-
 57 files changed, 406 insertions(+), 239 deletions(-)
 create mode 100644 cool/utils/tailwind.ts

diff --git a/components/tabbar.uvue b/components/tabbar.uvue
index 3873116..7c9ce7d 100644
--- a/components/tabbar.uvue
+++ b/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
diff --git a/cool/utils/comm.ts b/cool/utils/comm.ts
index fb894da..f2b233c 100644
--- a/cool/utils/comm.ts
+++ b/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;
-};
diff --git a/cool/utils/device.ts b/cool/utils/device.ts
index 0d51a0d..b5f73c2 100644
--- a/cool/utils/device.ts
+++ b/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 设备像素比
diff --git a/cool/utils/index.ts b/cool/utils/index.ts
index a1282c2..90c3e69 100644
--- a/cool/utils/index.ts
+++ b/cool/utils/index.ts
@@ -1,3 +1,4 @@
+export * from "./tailwind";
 export * from "./comm";
 export * from "./day";
 export * from "./device";
diff --git a/cool/utils/rect.ts b/cool/utils/rect.ts
index 8cf64d6..13aeb62 100644
--- a/cool/utils/rect.ts
+++ b/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";
 
diff --git a/cool/utils/tailwind.ts b/cool/utils/tailwind.ts
new file mode 100644
index 0000000..bf47477
--- /dev/null
+++ b/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);
+}
diff --git a/package.json b/package.json
index 9ac5cc5..3ef52b1 100644
--- a/package.json
+++ b/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",
diff --git a/pages/demo/basic/image.uvue b/pages/demo/basic/image.uvue
index 2b48aaa..399998d 100644
--- a/pages/demo/basic/image.uvue
+++ b/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>
diff --git a/pages/demo/basic/text.uvue b/pages/demo/basic/text.uvue
index 0a0be4e..1e3c18e 100644
--- a/pages/demo/basic/text.uvue
+++ b/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('手机号脱敏')">
diff --git a/pages/demo/components/item.uvue b/pages/demo/components/item.uvue
index 301df78..1ceffa2 100644
--- a/pages/demo/components/item.uvue
+++ b/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>
 
diff --git a/pages/demo/components/tips.uvue b/pages/demo/components/tips.uvue
index 1df7da8..a3affe1 100644
--- a/pages/demo/components/tips.uvue
+++ b/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>
diff --git a/pages/demo/data/filter-bar.uvue b/pages/demo/data/filter-bar.uvue
index 7cc0999..e7b311c 100644
--- a/pages/demo/data/filter-bar.uvue
+++ b/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>
diff --git a/pages/demo/data/list.uvue b/pages/demo/data/list.uvue
index 2f71a8e..b31c4af 100644
--- a/pages/demo/data/list.uvue
+++ b/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>
diff --git a/pages/demo/data/pagination.uvue b/pages/demo/data/pagination.uvue
index 9a66f26..c13cde3 100644
--- a/pages/demo/data/pagination.uvue
+++ b/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
 						>
diff --git a/pages/demo/data/timeline.uvue b/pages/demo/data/timeline.uvue
index 5a31c7a..4ab0303 100644
--- a/pages/demo/data/timeline.uvue
+++ b/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">{{
diff --git a/pages/demo/data/tree.uvue b/pages/demo/data/tree.uvue
index 771d2ea..3d38537 100644
--- a/pages/demo/data/tree.uvue
+++ b/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
 					>
diff --git a/pages/demo/data/waterfall.uvue b/pages/demo/data/waterfall.uvue
index da7e840..70557d5 100644
--- a/pages/demo/data/waterfall.uvue
+++ b/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>
diff --git a/pages/demo/feedback/action-sheet.uvue b/pages/demo/feedback/action-sheet.uvue
index 8e87289..9053127 100644
--- a/pages/demo/feedback/action-sheet.uvue
+++ b/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>
diff --git a/pages/demo/form/checkbox.uvue b/pages/demo/form/checkbox.uvue
index 37963d6..dbc6fc0 100644
--- a/pages/demo/form/checkbox.uvue
+++ b/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 }}
diff --git a/pages/demo/form/form.uvue b/pages/demo/form/form.uvue
index f085a76..6c29e58 100644
--- a/pages/demo/form/form.uvue
+++ b/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>
diff --git a/pages/demo/form/radio.uvue b/pages/demo/form/radio.uvue
index 39563ba..daa932f 100644
--- a/pages/demo/form/radio.uvue
+++ b/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 }}
diff --git a/pages/demo/form/select.uvue b/pages/demo/form/select.uvue
index 8d23bf8..a23b9a7 100644
--- a/pages/demo/form/select.uvue
+++ b/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
diff --git a/pages/demo/form/textarea.uvue b/pages/demo/form/textarea.uvue
index f3ea77b..10ec3ac 100644
--- a/pages/demo/form/textarea.uvue
+++ b/pages/demo/form/textarea.uvue
@@ -19,7 +19,7 @@
 						}),
 						inner: {
 							className: parseClass({
-								'!text-sky-700': isColor
+								'text-sky-700': isColor
 							})
 						}
 					}"
diff --git a/pages/set/general.uvue b/pages/set/general.uvue
index 660976c..4235d86 100644
--- a/pages/set/general.uvue
+++ b/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>
diff --git a/pages/template/shop/shopping-cart.uvue b/pages/template/shop/shopping-cart.uvue
index 475d0b3..f728e20 100644
--- a/pages/template/shop/shopping-cart.uvue
+++ b/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
 						>
diff --git a/pages/user/components/login/phone.uvue b/pages/user/components/login/phone.uvue
index baffd37..0adced0 100644
--- a/pages/user/components/login/phone.uvue
+++ b/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>
diff --git a/pages/user/components/login/wx.uvue b/pages/user/components/login/wx.uvue
index 106505d..751e3aa 100644
--- a/pages/user/components/login/wx.uvue
+++ b/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>
 
diff --git a/pages/user/edit-name.uvue b/pages/user/edit-name.uvue
index 1453e3e..a263164 100644
--- a/pages/user/edit-name.uvue
+++ b/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>
diff --git a/pages/user/login.uvue b/pages/user/login.uvue
index 88f345e..3400f1c 100644
--- a/pages/user/login.uvue
+++ b/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("隐私政策") }}》
diff --git a/uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.uvue b/uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.uvue
index 8e4f732..a181109 100644
--- a/uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.uvue
+++ b/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
 				>
diff --git a/uni_modules/cool-ui/components/cl-badge/cl-badge.uvue b/uni_modules/cool-ui/components/cl-badge/cl-badge.uvue
index 5fc66a1..7c8b0b2 100644
--- a/uni_modules/cool-ui/components/cl-badge/cl-badge.uvue
+++ b/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"
 		>
diff --git a/uni_modules/cool-ui/components/cl-banner/cl-banner.uvue b/uni_modules/cool-ui/components/cl-banner/cl-banner.uvue
index 55d8691..cfecf52 100644
--- a/uni_modules/cool-ui/components/cl-banner/cl-banner.uvue
+++ b/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;
diff --git a/uni_modules/cool-ui/components/cl-button/cl-button.uvue b/uni_modules/cool-ui/components/cl-button/cl-button.uvue
index f2717bf..5bc49de 100644
--- a/uni_modules/cool-ui/components/cl-button/cl-button.uvue
+++ b/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
 					])
diff --git a/uni_modules/cool-ui/components/cl-cascader/cl-cascader.uvue b/uni_modules/cool-ui/components/cl-cascader/cl-cascader.uvue
index 3aafbb5..18fb71e 100644
--- a/uni_modules/cool-ui/components/cl-cascader/cl-cascader.uvue
+++ b/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
diff --git a/uni_modules/cool-ui/components/cl-checkbox/cl-checkbox.uvue b/uni_modules/cool-ui/components/cl-checkbox/cl-checkbox.uvue
index b145dc1..3395bbb 100644
--- a/uni_modules/cool-ui/components/cl-checkbox/cl-checkbox.uvue
+++ b/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
 				])
diff --git a/uni_modules/cool-ui/components/cl-cropper/cl-cropper.uvue b/uni_modules/cool-ui/components/cl-cropper/cl-cropper.uvue
index 075ab75..56f67eb 100644
--- a/uni_modules/cool-ui/components/cl-cropper/cl-cropper.uvue
+++ b/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"
 						>
diff --git a/uni_modules/cool-ui/components/cl-empty/cl-empty.uvue b/uni_modules/cool-ui/components/cl-empty/cl-empty.uvue
index 9bbb1ed..0eab70e 100644
--- a/uni_modules/cool-ui/components/cl-empty/cl-empty.uvue
+++ b/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
 					}
 				])
 			}"
diff --git a/uni_modules/cool-ui/components/cl-filter-item/cl-filter-item.uvue b/uni_modules/cool-ui/components/cl-filter-item/cl-filter-item.uvue
index cad95fc..b5f2f41 100644
--- a/uni_modules/cool-ui/components/cl-filter-item/cl-filter-item.uvue
+++ b/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
 					])
diff --git a/uni_modules/cool-ui/components/cl-form-item/cl-form-item.uvue b/uni_modules/cool-ui/components/cl-form-item/cl-form-item.uvue
index 1350029..fb84444 100644
--- a/uni_modules/cool-ui/components/cl-form-item/cl-form-item.uvue
+++ b/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 }}
diff --git a/uni_modules/cool-ui/components/cl-icon/cl-icon.uvue b/uni_modules/cool-ui/components/cl-icon/cl-icon.uvue
index b479563..2bea93e 100644
--- a/uni_modules/cool-ui/components/cl-icon/cl-icon.uvue
+++ b/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>
diff --git a/uni_modules/cool-ui/components/cl-keyboard-car/cl-keyboard-car.uvue b/uni_modules/cool-ui/components/cl-keyboard-car/cl-keyboard-car.uvue
index 515fa0d..08c6807 100644
--- a/uni_modules/cool-ui/components/cl-keyboard-car/cl-keyboard-car.uvue
+++ b/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
 					>
diff --git a/uni_modules/cool-ui/components/cl-keyboard-number/cl-keyboard-number.uvue b/uni_modules/cool-ui/components/cl-keyboard-number/cl-keyboard-number.uvue
index 09cedba..9c5d31c 100644
--- a/uni_modules/cool-ui/components/cl-keyboard-number/cl-keyboard-number.uvue
+++ b/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
 								>
diff --git a/uni_modules/cool-ui/components/cl-keyboard-password/cl-keyboard-password.uvue b/uni_modules/cool-ui/components/cl-keyboard-password/cl-keyboard-password.uvue
index 8d4439d..76fd7c8 100644
--- a/uni_modules/cool-ui/components/cl-keyboard-password/cl-keyboard-password.uvue
+++ b/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
 							>
diff --git a/uni_modules/cool-ui/components/cl-pagination/cl-pagination.uvue b/uni_modules/cool-ui/components/cl-pagination/cl-pagination.uvue
index ded37e0..b057423 100644
--- a/uni_modules/cool-ui/components/cl-pagination/cl-pagination.uvue
+++ b/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>
diff --git a/uni_modules/cool-ui/components/cl-picker-view/cl-picker-view.uvue b/uni_modules/cool-ui/components/cl-picker-view/cl-picker-view.uvue
index fe2bbdf..3efa2f9 100644
--- a/uni_modules/cool-ui/components/cl-picker-view/cl-picker-view.uvue
+++ b/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
diff --git a/uni_modules/cool-ui/components/cl-popup/cl-popup.uvue b/uni_modules/cool-ui/components/cl-popup/cl-popup.uvue
index 6d532a5..da49de9 100644
--- a/uni_modules/cool-ui/components/cl-popup/cl-popup.uvue
+++ b/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
diff --git a/uni_modules/cool-ui/components/cl-radio/cl-radio.uvue b/uni_modules/cool-ui/components/cl-radio/cl-radio.uvue
index e3943e3..c3dc027 100644
--- a/uni_modules/cool-ui/components/cl-radio/cl-radio.uvue
+++ b/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
 				])
diff --git a/uni_modules/cool-ui/components/cl-select-date/cl-select-date.uvue b/uni_modules/cool-ui/components/cl-select-date/cl-select-date.uvue
index 141a41d..c396ac2 100644
--- a/uni_modules/cool-ui/components/cl-select-date/cl-select-date.uvue
+++ b/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
 						>
diff --git a/uni_modules/cool-ui/components/cl-select-trigger/cl-select-trigger.uvue b/uni_modules/cool-ui/components/cl-select-trigger/cl-select-trigger.uvue
index 4381b0a..c5c030b 100644
--- a/uni_modules/cool-ui/components/cl-select-trigger/cl-select-trigger.uvue
+++ b/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>
diff --git a/uni_modules/cool-ui/components/cl-tabs/cl-tabs.uvue b/uni_modules/cool-ui/components/cl-tabs/cl-tabs.uvue
index cf33a2d..849dda7 100644
--- a/uni_modules/cool-ui/components/cl-tabs/cl-tabs.uvue
+++ b/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
 								])
diff --git a/uni_modules/cool-ui/components/cl-tag/cl-tag.uvue b/uni_modules/cool-ui/components/cl-tag/cl-tag.uvue
index 93a535a..1228060 100644
--- a/uni_modules/cool-ui/components/cl-tag/cl-tag.uvue
+++ b/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>
diff --git a/uni_modules/cool-ui/components/cl-text/cl-text.uvue b/uni_modules/cool-ui/components/cl-text/cl-text.uvue
index bc96fa6..126ff9e 100644
--- a/uni_modules/cool-ui/components/cl-text/cl-text.uvue
+++ b/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>
diff --git a/uni_modules/cool-ui/components/cl-textarea/cl-textarea.uvue b/uni_modules/cool-ui/components/cl-textarea/cl-textarea.uvue
index 7e8d997..8b2d66c 100644
--- a/uni_modules/cool-ui/components/cl-textarea/cl-textarea.uvue
+++ b/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
 		>
diff --git a/uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.uvue b/uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.uvue
index fd9fc9c..d526ce6 100644
--- a/uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.uvue
+++ b/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
diff --git a/uni_modules/cool-ui/components/cl-toast/cl-toast.uvue b/uni_modules/cool-ui/components/cl-toast/cl-toast.uvue
index 9b90857..e6b0b08 100644
--- a/uni_modules/cool-ui/components/cl-toast/cl-toast.uvue
+++ b/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>
diff --git a/uni_modules/cool-ui/components/cl-topbar/cl-topbar.uvue b/uni_modules/cool-ui/components/cl-topbar/cl-topbar.uvue
index de16e3b..72e6116 100644
--- a/uni_modules/cool-ui/components/cl-topbar/cl-topbar.uvue
+++ b/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 }}
diff --git a/uni_modules/cool-ui/components/cl-upload/cl-upload.uvue b/uni_modules/cool-ui/components/cl-upload/cl-upload.uvue
index a5b5bc3..9ce3357 100644
--- a/uni_modules/cool-ui/components/cl-upload/cl-upload.uvue
+++ b/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
 					])
 				}"