<template>
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme="appInfo.appTheme === 'dark' ? darkTheme : undefined"
  >
    <!-- <n-theme-editor> -->
    <n-global-style />
    <n-message-provider>
      <n-dialog-provider>
        <RouterView />
      </n-dialog-provider>
    </n-message-provider>
    <!-- </n-theme-editor> -->
  </n-config-provider>
</template>

<script setup lang="ts">
import {
  useOsTheme,
  darkTheme,
  zhCN,
  dateZhCN,
  NConfigProvider,
  NGlobalStyle,
  NMessageProvider,
  NDialogProvider,
} from "naive-ui";
import { useAppStore } from "./stores/modules/app";
import { watch } from "vue";
const appInfo = useAppStore();
const osTheme = useOsTheme();

appInfo.appTheme === "" && appInfo.setAppTheme(osTheme.value as string);

watch(osTheme, (val) => {
  appInfo.setAppTheme(val as string);
});
</script>

<style lang="scss">
@import "./styles/transition.scss";
</style>
