xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-17 17:26:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(components): replace NTooltip with IconTooltip and optimize the layout of related components.

Browse Source
This commit is contained in:
Azir-11 2025-08-12 23:36:41 +08:00 committed by Soybean
parent a55b4dc073
commit 4005763c00
3 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/modules/theme-drawer/components/layout-mode-card.vue
View File

@ -80,7 +80,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
class="flex-col-center cursor-pointer" class="flex-col-center cursor-pointer"
@click="handleChangeMode(key)" @click="handleChangeMode(key)"
> >
<NTooltip :placement="item.placement"> <IconTooltip :placement="item.placement">
<template #trigger> <template #trigger>
<div <div
class="h-64px w-96px gap-6px rd-4px p-6px shadow ring-2 ring-transparent transition-all hover:ring-primary" class="h-64px w-96px gap-6px rd-4px p-6px shadow ring-2 ring-transparent transition-all hover:ring-primary"
@ -92,7 +92,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
</div> </div>
</template> </template>
{{ $t(`theme.layout.layoutMode.${key}_detail`) }} {{ $t(`theme.layout.layoutMode.${key}_detail`) }}
</NTooltip> </IconTooltip>
<p class="mt-8px text-12px">{{ $t(themeLayoutModeRecord[key]) }}</p> <p class="mt-8px text-12px">{{ $t(themeLayoutModeRecord[key]) }}</p>
</div> </div>
</div> </div>

2
src/layouts/modules/theme-drawer/components/setting-item.vue
View File

@ -13,7 +13,7 @@ defineProps<Props>();
<template> <template>
<div class="w-full flex-y-center justify-between"> <div class="w-full flex-y-center justify-between">
<div> <div class="flex-y-center">
<span class="pr-8px text-base-text">{{ label }}</span> <span class="pr-8px text-base-text">{{ label }}</span>
<slot name="suffix"></slot> <slot name="suffix"></slot>
</div> </div>

41
src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue
View File

@ -36,27 +36,28 @@ const swatches: string[] = [
<template> <template>
<NDivider>{{ $t('theme.appearance.themeColor.title') }}</NDivider> <NDivider>{{ $t('theme.appearance.themeColor.title') }}</NDivider>
<div class="flex-col-stretch gap-12px"> <div class="flex-col-stretch gap-12px">
<NTooltip placement="top-start"> <SettingItem key="recommend-color" :label="$t('theme.appearance.recommendColor')">
<template #trigger> <template #suffix>
<SettingItem key="recommend-color" :label="$t('theme.appearance.recommendColor')"> <IconTooltip>
<NSwitch v-model:value="themeStore.recommendColor" /> <p>
</SettingItem> <span class="pr-12px">{{ $t('theme.appearance.recommendColorDesc') }}</span>
<br />
<NButton
text
tag="a"
href="https://uicolors.app/create"
target="_blank"
rel="noopener noreferrer"
class="text-gray"
>
https://uicolors.app/create
</NButton>
</p>
</IconTooltip>
</template> </template>
<p> <NSwitch v-model:value="themeStore.recommendColor" />
<span class="pr-12px">{{ $t('theme.appearance.recommendColorDesc') }}</span> </SettingItem>
<br />
<NButton
text
tag="a"
href="https://uicolors.app/create"
target="_blank"
rel="noopener noreferrer"
class="text-gray"
>
https://uicolors.app/create
</NButton>
</p>
</NTooltip>
<SettingItem <SettingItem
v-for="(_, key) in themeStore.themeColors" v-for="(_, key) in themeStore.themeColors"
:key="key" :key="key"