jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(projects): 嵌入naive-ui的css vars，替换windicss的extend color

Browse Source
This commit is contained in:
Soybean
2021-11-17 12:28:53 +08:00
parent 27f600c467
commit 2869b4cd33
13 changed files with 114 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/layouts/BasicLayout/components/GlobalHeader/components/ThemeMode.vue
View File

@ -1,26 +1,17 @@
<template>
<hover-container class="px-12px" :show-tooltip="false">
<n-switch :value="theme.darkMode" size="large" @update:value="handleDarkMode">
<template #checked>
<icon-mdi-white-balance-sunny class="text-14px g_text-primary" />
</template>
<template #unchecked>
<icon-mdi-moon-waning-crescent class="text-14px g_text-primary" />
</template>
</n-switch>
<div class="hover:text-primary" @click="toggleDarkMode">
<icon-mdi-moon-waning-crescent v-if="theme.darkMode" class="text-14px" />
<icon-mdi-white-balance-sunny v-else class="text-14px" />
</div>
</hover-container>
</template>
<script lang="ts" setup>
import { NSwitch } from 'naive-ui';
import { HoverContainer } from '@/components';
import { useThemeStore } from '@/store';
const theme = useThemeStore();
const { handleDarkMode } = useThemeStore();
const { toggleDarkMode } = useThemeStore();
</script>
<style scoped>
:deep(.n-switch__rail) {
background-color: #000e1c !important;
}
</style>
<style scoped></style>

2
src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenu.vue
View File

@ -2,7 +2,7 @@
<div class="mb-6px px-4px cursor-pointer" @mouseenter="setTrue" @mouseleave="setFalse">
<div
class="flex-center flex-col py-12px rounded-2px"
:class="{ 'g_text-primary g_bg-primary_active': isActive, 'g_text-primary': isHover }"
:class="{ 'text-primary bg-primary-active': isActive, 'text-primary': isHover }"
>
<component :is="icon" :class="[isMini ? 'text-16px' : 'text-20px']" />
<p

2
src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
View File

@ -15,7 +15,7 @@
:style="{ width: showDrawer ? theme.menuStyle.width + 'px' : '0px' }"
>
<header class="header-height flex-y-center justify-between">
<h2 class="g_text-primary pl-8px text-16px font-bold">{{ title }}</h2>
<h2 class="text-primary pl-8px text-16px font-bold">{{ title }}</h2>
<div class="px-8px text-16px text-gray-600 cursor-pointer" @click="toggleFixedMixMenu">
<icon-mdi:pin-off v-if="app.menu.fixedMix" />
<icon-mdi:pin v-else />

4
src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode/index.vue
View File

@ -3,10 +3,10 @@
<div class="flex-center">
<n-switch :value="theme.darkMode" @update:value="handleDarkMode">
<template #checked>
<icon-mdi-white-balance-sunny class="text-14px g_text-primary" />
<icon-mdi-white-balance-sunny class="text-14px text-primary" />
</template>
<template #unchecked>
<icon-mdi-moon-waning-crescent class="text-14px g_text-primary" />
<icon-mdi-moon-waning-crescent class="text-14px text-primary" />
</template>
</n-switch>
</div>

2
src/layouts/BasicLayout/components/common/GlobalLogo.vue
View File

@ -1,7 +1,7 @@
<template>
<a href="/" class="logo-height nowrap-hidden flex-center cursor-pointer">
<system-logo class="w-32px h-32px" :color="primaryColor" />
<h2 v-show="showTitle" class="g_text-primary pl-8px text-16px font-bold">{{ title }}</h2>
<h2 v-show="showTitle" class="text-primary pl-8px text-16px font-bold">{{ title }}</h2>
</a>
</template>