paopao-ce/web/src/components/main-nav.vue

<template>
    <n-card size="small" :bordered="true" class="nav-title-card">
        <template #header>
            <div class="navbar">
                <n-button
                    class="back-btn"
                    v-if="back"
                    @click="goBack"
                    quaternary
                    circle
                    size="small"
                >
                    <template #icon>
                        <n-icon><chevron-left-round /></n-icon>
                    </template>
                </n-button>

                {{ props.title }}

                <n-switch
                    :value="store.state.theme === 'dark'"
                    @update:value="switchTheme"
                    size="small"
                    class="theme-switch-wrap"
                >
                    <template #checked-icon>
                        <n-icon :component="LightModeOutlined" />
                    </template>
                    <template #unchecked-icon>
                        <n-icon :component="DarkModeOutlined" />
                    </template>
                </n-switch>
            </div>
        </template>
    </n-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { useOsTheme } from 'naive-ui';
import { LightModeOutlined, DarkModeOutlined, ChevronLeftRound } from '@vicons/material';

const store = useStore();
const router = useRouter();

const props = withDefaults(
    defineProps<{
        title: string;
        back?: boolean;
    }>(),
    {
        title: '',
        back: false,
    }
);
const switchTheme = (theme: boolean) => {
    if (theme) {
        localStorage.setItem('PAOPAO_THEME', 'dark');
        store.commit('triggerTheme', 'dark');
    } else {
        localStorage.setItem('PAOPAO_THEME', 'light');
        store.commit('triggerTheme', 'light');
    }
};
const goBack = () => {
    if (window.history.length <= 1) {
        router.push({
            path: '/',
        });
    } else {
        router.go(-1);
    }
};

onMounted(() => {
    if (!localStorage.getItem('PAOPAO_THEME')) {
        switchTheme((useOsTheme() as unknown as string) === 'dark');
    }
});
</script>

<style lang="less">
.nav-title-card {
    z-index: 99;
    width: 100%;
    top: 0;
    position: sticky;
    border-radius: 0;
    border-bottom: 0;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);

    .navbar {
        height: 30px;
        position: relative;
        display: flex;
        align-items: center;

        .back-btn {
            margin-right: 8px;
        }

        .theme-switch-wrap {
            position: absolute;
            right: 0;
            top: calc(50% - 9px);
        }
    }
}
.dark {
    .nav-title-card {
        background-color: rgba(16, 16, 20, 0.75);
    }
}
</style>