refactor(projects): 代码优化

This commit is contained in:
Soybean 2022-05-11 00:18:36 +08:00
parent 50d7ccd82d
commit a1c7e10574
5 changed files with 24 additions and 28 deletions

View File

@ -4,19 +4,17 @@
class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out" class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
> >
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<div class="h-full"> <transition
<transition :name="theme.pageAnimateMode"
:name="theme.pageAnimateMode" mode="out-in"
mode="out-in" :appear="true"
:appear="true" @before-leave="handleBeforeLeave"
@before-leave="handleBeforeLeave" @after-enter="handleAfterEnter"
@after-enter="handleAfterEnter" >
> <keep-alive :include="routeStore.cacheRoutes">
<keep-alive :include="routeStore.cacheRoutes"> <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
<component :is="Component" v-if="app.reloadFlag" :key="route.path" /> </keep-alive>
</keep-alive> </transition>
</transition>
</div>
</router-view> </router-view>
</div> </div>
</template> </template>

View File

@ -1,17 +1,15 @@
<template> <template>
<n-divider title-placement="center">主题</n-divider> <n-divider title-placement="center">主题模式</n-divider>
<n-space vertical size="large"> <n-space vertical size="large">
<setting-menu label="深色主题"> <setting-menu label="深色主题">
<div class="flex-center"> <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
<n-switch :value="theme.darkMode" @update:value="theme.setDarkMode"> <template #checked>
<template #checked> <icon-mdi-white-balance-sunny class="text-14px text-primary" />
<icon-mdi-white-balance-sunny class="text-14px text-primary" /> </template>
</template> <template #unchecked>
<template #unchecked> <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
<icon-mdi-moon-waning-crescent class="text-14px text-primary" /> </template>
</template> </n-switch>
</n-switch>
</div>
</setting-menu> </setting-menu>
<setting-menu label="跟随系统"> <setting-menu label="跟随系统">
<n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme"> <n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">

View File

@ -1,6 +1,6 @@
{ {
"followSystemTheme": true,
"darkMode": false, "darkMode": false,
"followSystemTheme": true,
"layout": { "layout": {
"minWidth": 900, "minWidth": 900,
"mode": "vertical", "mode": "vertical",

View File

@ -29,8 +29,8 @@ const themeColorList = [
]; ];
const defaultThemeSetting: Theme.Setting = { const defaultThemeSetting: Theme.Setting = {
followSystemTheme: true,
darkMode: false, darkMode: false,
followSystemTheme: true,
layout: { layout: {
minWidth: 900, minWidth: 900,
mode: 'vertical', mode: 'vertical',

View File

@ -98,10 +98,10 @@ declare namespace Service {
declare namespace Theme { declare namespace Theme {
/** 主题配置 */ /** 主题配置 */
interface Setting { interface Setting {
/** 是否自动跟随系统主题 */
followSystemTheme: boolean;
/** 暗黑模式 */ /** 暗黑模式 */
darkMode: boolean; darkMode: boolean;
/** 是否自动跟随系统主题 */
followSystemTheme: boolean;
/** 布局样式 */ /** 布局样式 */
layout: Layout; layout: Layout;
/** 主题颜色 */ /** 主题颜色 */