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

2025-09-07 11:08:01 +08:00
parent 8e583121e4
commit 1b6fc90d59
57 changed files with 406 additions and 239 deletions
--- 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>
--- 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('手机号脱敏')">
--- 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>

--- 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>
--- 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>
--- 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>
--- 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
 						>
--- 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">{{
--- 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
 					>
--- 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>
--- 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>
--- 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 }}
--- 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>
--- 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 }}
--- 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
--- 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
 							})
 						}
 					}"
--- 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>
--- 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
 						>
--- 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>
--- 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>

--- 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>
--- 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("隐私政策") }}》