TuiPlus皮肤管理

1. 概述

组件皮肤管理模块是为了方便开发者对组件进行主题定制，实现不同皮肤风格的应用。该模块能够自动适应当前设置的主题皮肤，提高开发效率和用户体验。

2. 功能特点

2.1 自动适配主题皮肤

组件皮肤管理模块能够根据当前设置的主题皮肤，自动调整组件的样式，确保组件在不同皮肤下保持一致性和美观性。

2.2 灵活的皮肤定制

开发者可以根据需求，为组件设置不同的皮肤。模块提供了丰富的属性和默认值，以便快速定制。

3.皮肤配置选项

以下是为组件皮肤管理模块设置的默认值：

属性名	值	描述
id	'DefaultMode'	主题的唯一标识符
name	'默认'	主题名称
unit	'rpx'	单位
infonormal	'#909399'	信息提示正常状态颜色
infodark	'#82848a'	信息提示深色状态颜色
infodisabled	'#c8c9cc'	信息提示禁用状态颜色
infolight	'#f4f4f5'	信息提示浅色状态颜色
primarynormal	'#2979ff'	主要颜色正常状态颜色
primarydark	'#2b85e4'	主要颜色深色状态颜色
primarydisabled	'#a0cfff'	主要颜色禁用状态颜色
primarylight	'#dcedff'	主要颜色浅色状态颜色
successnormal	'#19be6b'	成功状态正常颜色
successdark	'#18b566'	成功状态深色颜色
successdisabled	'#71d5a1'	成功状态禁用颜色
successlight	'#DFEAE2'	成功状态浅色颜色
warningnormal	'#ff9900'	警告状态正常颜色
warningdark	'#f29100'	警告状态深色颜色
warningdisabled	'#fcbd71'	警告状态禁用颜色
warninglight	'#fff1dd'	警告状态浅色颜色
errornormal	'#fa3534'	错误状态正常颜色
errordark	'#dd6161'	错误状态深色颜色
errordisabled	'#fab6b6'	错误状态禁用颜色
errorlight	'#ffe0e0'	错误状态浅色颜色
colornormal	'#333333'	文本颜色正常状态
colordark	'#606266'	文本颜色深色状态
colordisabled	'#909399'	文本颜色禁用状态
colorlight	'#c0c4cc'	文本颜色浅色状态
colorinverse	'#ffffff'	文本颜色反色状态
bgcolorview	'#ffffff'	视图背景颜色
bgcolorpage	'#f8f8f8'	页面背景颜色
borderbase	'#DCDFE6'	基础边框颜色
borderlight	'#E4E7ED'	浅色边框颜色
borderlighter	'#EBEEF5'	更浅色边框颜色
borderextralight	'#F2F6FC'	额外浅色边框颜色
radiuslarge	20	大尺寸圆角半径
radiusmedium	16	中等尺寸圆角半径
radiussmall	12	小尺寸圆角半径
radiusmini	8	迷你尺寸圆角半径
marginlarge	32	大尺寸外边距
marginmedium	28	中等尺寸外边距
marginsmall	24	小尺寸外边距
marginmini	20	迷你尺寸外边距
paddinglarge	24	大尺寸内边距
paddingmedium	20	中等尺寸内边距
paddingsmall	16	小尺寸内边距
paddingmini	12	迷你尺寸内边距
sizelarge	36	大尺寸字体大小
sizemedium	28	中等尺寸字体大小
sizesmall	24	小尺寸字体大小
sizemini	22	迷你尺寸字体大小

组件皮肤管理模块文档

1. 概述

组件皮肤管理模块提供了一套用于创建、获取、更新和删除主题皮肤的类和方法。以下是对 TuiTheme 和 TuiGetThemeDefault 类的介绍文档。

2. TuiTheme 类

2.1 方法说明

方法名	说明
create()	创建一个新的默认主题皮肤。
getCurSkinTheme()	获取当前主题皮肤，如果未设置则返回默认主题。
updateCurSkinTheme(e: TuiSkinTheme)	更新当前主题皮肤，并同步到本地存储。
add(e: TuiSkinTheme)	添加一个新的主题皮肤到缓存列表。
remove(id: string)	从缓存列表中移除指定ID的主题皮肤。
update(id: string, e: TuiSkinTheme)	更新缓存列表中指定ID的主题皮肤。
getCachethemeList()	获取缓存中的主题皮肤列表。
getTheme(e: string)	根据ID获取特定的主题皮肤。

2.2 使用示例

import { TuiTheme, TuiSkinTheme } from '@/uni_modules/tui-plus'
const theme = new TuiTheme()

//获取当前使用的主题
const curTheme = theme.getCurSkinTheme()


//获取缓存中皮肤列表
let skinThemeList = ref<TuiSkinTheme[]>(theme.getCachethemeList())

//修改指定ID主题配置
theme.updateCurSkinTheme(theme.getTheme(e))

//添加新的主题配置
theme.add(e : TuiSkinTheme)

//移除主题配置
theme.remove(id : string)
- `id` : 主题ID

4. 总结

组件皮肤管理模块通过 TuiTheme 和 TuiGetThemeDefault 类提供了一套完整的皮肤管理解决方案。开发者可以通过这些类的方法来创建、获取、更新和删除主题皮肤，以及获取组件的样式属性，从而实现个性化的主题定制。

示例

<template>
	<t-page title='全局主题管理'>
		<t-card class="m.30" title='皮肤设置' sub-title='TUI库皮肤管理功能为您提供了一个强大而灵活的工具，让您轻松地自定义和切换用户界面的外观。' />
		<t-card class="mblr.30" title="亮点" sub-title="	多套皮肤-完全自定义-实时预览-一键切换-皮肤导出与分享-全局应用-易于集成" />
		<t-section title='我的皮肤' class="mlrb.30"></t-section>
		<t-radio-group class="fv" v-model="curThemeId" @change='themChange'>
			<t-row v-for="(item,index) in skinThemeList" :key="index" class='mlrb.30-tdb-tdr-faic-plr.20' :hover="true">
				<t-radio class="h.90-ff" :value="item.id">{{item.name}}</t-radio>
				<t-row class="faic">
					<t-icon :hover="true" class="mr.30-s.50" type='p' name="edit-pen" :stop="true"
						@click="editcom(item)"></t-icon>
					<t-icon :hover="true" name="trash" class="s.45" :stop="true" type='e'
						@click="remove(item)"></t-icon>
				</t-row>
			</t-row>
		</t-radio-group>
		<t-button class="mblr.30" path="/pages/component/template/editskintheme/editskintheme" type="p">创建新皮肤</t-button>
		<t-section title='官方皮肤' class="m.30"></t-section>
		<t-row v-for="(item,index) in skinThemeCloudList" :key="index" class='mlrb.30-tdb-tdr-faic-plr.20-h.90'>
			<t-text class="ff">{{item.name}}</t-text>
			<t-button size="mini" type='s' suffix-icon="down" @click="down(item)">下载</t-button>
		</t-row>
	</t-page>
</template>

<script setup>
	import { TuiTheme, TuiSkinTheme } from '@/uni_modules/tui-plus'
	import { TuiApi } from '@/api/uriApi.uts'
	const theme = new TuiTheme()
	const curTheme = theme.getCurSkinTheme()
	const curThemeId = ref<string>(curTheme.id)
	let skinThemeList = ref<TuiSkinTheme[]>(theme.getCachethemeList())
	let skinThemeCloudList = ref<TuiSkinTheme[]>([])
	function getThemeList() {
		skinThemeList.value = theme.getCachethemeList()
	}
	function down(e : TuiSkinTheme) {
		theme.add(e)
		getThemeList()
	}
	onLoad((e : OnLoadOptions) => {
		TuiApi('tuitheme').then((res : UTSJSONObject) => {
			skinThemeCloudList.value = JSON.parse<TuiSkinTheme[]>(JSON.stringify(res.getArray('data'))) as TuiSkinTheme[]
		})
	})
	onPageShow(() => {
		getThemeList()
	})
	function themChange(e : string) {
		theme.updateCurSkinTheme(theme.getTheme(e))
	}
	function editcom(e : TuiSkinTheme) {
		uni.navigateTo({
			url: '/pages/component/template/editskintheme/editskintheme?id=' + e.id
		})
	}
	function remove(e : TuiSkinTheme) {
		uni.showModal({
			title: `您确定删除【${e['name']}】主题吗？`,
			success: (res) => {
				if (res.confirm) {
					theme.remove(e.id)
					getThemeList()
				}
			}
		})
	}
</script>