xpyy-scm/src/App.vue

<script setup lang="ts">
import {RouterView} from 'vue-router';
import {useI18n} from 'vue-i18n';
import {
  NConfigProvider,
  zhCN,
  dateZhCN,
  koKR,
  dateKoKR,
  type GlobalThemeOverrides,
  NMessageProvider,
} from 'naive-ui';
import {computed} from 'vue';
import {lightVariable} from '@utils';

defineOptions({
  name: 'App',
});

const {locale} = useI18n();

const uiLocale = computed(function() {
  if (locale.value === 'zh') return {locale: zhCN, dateLocale: dateZhCN};

  return {locale: koKR, dateLocale: dateKoKR};
});

const themeConfig: GlobalThemeOverrides = {
  common: {
    primaryColor: lightVariable.primaryColor,
    primaryColorHover: lightVariable.primaryColor4,
    primaryColorPressed: lightVariable.primaryColor,
    primaryColorSuppl: lightVariable.primaryColor,
    infoColor: lightVariable.accentColor,
    infoColorHover: lightVariable.accentColor6,
    infoColorPressed: lightVariable.accentColor,
    infoColorSuppl: lightVariable.accentColor,
  },
  Scrollbar: {
    color: lightVariable.primaryColor8,
    colorHover: lightVariable.primaryColor,
  },
  Menu: {
    itemIconColor: lightVariable.tipFontColor,
    itemIconColorActive: lightVariable.primaryColor,
    itemIconColorHover: lightVariable.primaryColor,
    itemColorHover: lightVariable.primaryColor9,
    itemTextColor: lightVariable.subtitleFontColor,
    itemTextColorHover: lightVariable.primaryColor,
    itemIconColorCollapsed: lightVariable.tipFontColor,
  },
  Layout: {
    color: lightVariable.backgroundColor,
    siderColor: lightVariable.layoutBackgroundColor,
    siderBorderColor: lightVariable.backgroundColor,
  },
  Card: {
    borderRadius: '8px',
  },
};

</script>

<template>
  <NConfigProvider v-bind="uiLocale" :themeOverrides="themeConfig">
    <NMessageProvider>
      <RouterView />
    </NMessageProvider>
  </NConfigProvider>
</template>