NCZY/WAI_Project_UNIX
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
icssoa
2025-09-07 11:08:01 +08:00
parent 8e583121e4
commit 1b6fc90d59
57 changed files with 406 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.uvue
View File

@@ -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
>

2
uni_modules/cool-ui/components/cl-badge/cl-badge.uvue
View File

@@ -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"
>

1
uni_modules/cool-ui/components/cl-banner/cl-banner.uvue
View File

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

2
uni_modules/cool-ui/components/cl-button/cl-button.uvue
View File

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

2
uni_modules/cool-ui/components/cl-cascader/cl-cascader.uvue
View File

@@ -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

4
uni_modules/cool-ui/components/cl-checkbox/cl-checkbox.uvue
View File

@@ -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
])

4
uni_modules/cool-ui/components/cl-cropper/cl-cropper.uvue
View File

@@ -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"
>

2
uni_modules/cool-ui/components/cl-empty/cl-empty.uvue
View File

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

2
uni_modules/cool-ui/components/cl-filter-item/cl-filter-item.uvue
View File

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

2
uni_modules/cool-ui/components/cl-form-item/cl-form-item.uvue
View File

@@ -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 }}

75
uni_modules/cool-ui/components/cl-icon/cl-icon.uvue
View File

@@ -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>

4
uni_modules/cool-ui/components/cl-keyboard-car/cl-keyboard-car.uvue
View File

@@ -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
>

10
uni_modules/cool-ui/components/cl-keyboard-number/cl-keyboard-number.uvue
View File

@@ -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
>

12
uni_modules/cool-ui/components/cl-keyboard-password/cl-keyboard-password.uvue
View File

@@ -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
>

39
uni_modules/cool-ui/components/cl-pagination/cl-pagination.uvue
View File

@@ -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>

6
uni_modules/cool-ui/components/cl-picker-view/cl-picker-view.uvue
View File

@@ -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

2
uni_modules/cool-ui/components/cl-popup/cl-popup.uvue
View File

@@ -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

4
uni_modules/cool-ui/components/cl-radio/cl-radio.uvue
View File

@@ -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
])

4
uni_modules/cool-ui/components/cl-select-date/cl-select-date.uvue
View File

@@ -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
>

8
uni_modules/cool-ui/components/cl-select-trigger/cl-select-trigger.uvue
View File

@@ -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>

2
uni_modules/cool-ui/components/cl-tabs/cl-tabs.uvue
View File

@@ -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
])

2
uni_modules/cool-ui/components/cl-tag/cl-tag.uvue
View File

@@ -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>

82
uni_modules/cool-ui/components/cl-text/cl-text.uvue
View File

@@ -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>

2
uni_modules/cool-ui/components/cl-textarea/cl-textarea.uvue
View File

@@ -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
>

6
uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.uvue
View File

@@ -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

3
uni_modules/cool-ui/components/cl-toast/cl-toast.uvue
View File

@@ -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>

2
uni_modules/cool-ui/components/cl-topbar/cl-topbar.uvue
View File

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

6
uni_modules/cool-ui/components/cl-upload/cl-upload.uvue
View File

@@ -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
])
}"