public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-26 01:44:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: tdesign theme toggle and demos (#7087)

Browse Source
This commit is contained in:
ppxb
2026-01-10 14:11:08 +08:00
committed by GitHub
parent 343d8a1c1e
commit 19b2d7af41
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web-tdesign/src/app.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { GlobalConfigProvider } from 'tdesign-vue-next'; import type { GlobalConfigProvider } from 'tdesign-vue-next';
import { onMounted } from 'vue'; import { watch } from 'vue';
import { usePreferences } from '@vben/preferences'; import { usePreferences } from '@vben/preferences';
@@ -12,12 +12,13 @@ import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
defineOptions({ name: 'App' }); defineOptions({ name: 'App' });
const { isDark } = usePreferences(); const { isDark } = usePreferences();
onMounted(() => { watch(
document.documentElement.setAttribute( () => isDark.value,
'theme-mode', (dark) => {
isDark.value ? 'dark' : '', document.documentElement.setAttribute('theme-mode', dark ? 'dark' : '');
); },
}); { immediate: true },
);
const customConfig: GlobalConfigProvider = { const customConfig: GlobalConfigProvider = {
// 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档 // 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档

6
apps/web-tdesign/src/views/demos/tdesign/index.vue
View File

@@ -38,7 +38,7 @@ function notify(type: NotificationType) {
description="支持多语言，主题功能集成切换等" description="支持多语言，主题功能集成切换等"
title="TDesign Vue组件使用演示" title="TDesign Vue组件使用演示"
> >
<Card class="mb-5" title="按钮"> <Card class="!mb-5" title="按钮">
<Space> <Space>
<Button>Default</Button> <Button>Default</Button>
<Button theme="primary"> Primary </Button> <Button theme="primary"> Primary </Button>
@@ -46,7 +46,7 @@ function notify(type: NotificationType) {
<Button theme="danger"> Error </Button> <Button theme="danger"> Error </Button>
</Space> </Space>
</Card> </Card>
<Card class="mb-5" title="Message"> <Card class="!mb-5" title="Message">
<Space> <Space>
<Button @click="info"> 信息 </Button> <Button @click="info"> 信息 </Button>
<Button theme="danger" @click="error"> 错误 </Button> <Button theme="danger" @click="error"> 错误 </Button>
@@ -55,7 +55,7 @@ function notify(type: NotificationType) {
</Space> </Space>
</Card> </Card>
<Card class="mb-5" title="Notification"> <Card class="!mb-5" title="Notification">
<Space> <Space>
<Button @click="notify('info')"> 信息 </Button> <Button @click="notify('info')"> 信息 </Button>
<Button theme="danger" @click="notify('error')"> 错误 </Button> <Button theme="danger" @click="notify('error')"> 错误 </Button>