classroom-instruments/src/plugins/naive.ts

import type { App } from 'vue';
import * as NaiveUI from 'naive-ui';
import { computed } from 'vue';

// import { MessageProviderProps } from 'naive-ui';
import { lighten } from '@/utils';
import setting from '@/settings/designSetting';

// NaiveUI 全局方法注册
const configProviderPropsRef = computed(() => ({
  theme: undefined,
  themeOverrides: {
    common: {
      primaryColor: setting.appTheme,
      primaryColorHover: lighten(setting.appTheme, 6),
      primaryColorPressed: lighten(setting.appTheme, 6)
    },
    LoadingBar: {
      colorLoading: setting.appTheme
    }
  }
}));

// const messageProviderPropsRef = computed(
//   () =>
//     ({
//       closable: false,
//       containerStyle: 'undefined',
//       duration: 3,
//       keepAliveOnHover: false,
//       max: 1,
//       placement: 'top',
//       to: 'body'
//     } as MessageProviderProps)
// );

// const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
//   ['message', 'dialog', 'notification', 'loadingBar'],
//   {
//     configProviderProps: configProviderPropsRef
//   }
// )

// const w = window as any
// window['$message'] = message
// window['$dialog'] = dialog
// window['$notification'] = notification
// window['$loading'] = loadingBar

const naive = NaiveUI.create({
  components: [
    NaiveUI.NMessageProvider,
    NaiveUI.NDialogProvider,
    NaiveUI.NConfigProvider,
    NaiveUI.NInput,
    NaiveUI.NButton,
    NaiveUI.NForm,
    NaiveUI.NFormItem,
    NaiveUI.NCheckboxGroup,
    NaiveUI.NCheckbox,
    NaiveUI.NIcon,
    NaiveUI.NLayout,
    NaiveUI.NLayoutHeader,
    NaiveUI.NLayoutContent,
    NaiveUI.NLayoutFooter,
    NaiveUI.NLayoutSider,
    NaiveUI.NMenu,
    NaiveUI.NBreadcrumb,
    NaiveUI.NBreadcrumbItem,
    NaiveUI.NDropdown,
    NaiveUI.NSpace,
    NaiveUI.NTooltip,
    NaiveUI.NAvatar,
    NaiveUI.NTabs,
    NaiveUI.NTabPane,
    NaiveUI.NCard,
    NaiveUI.NRow,
    NaiveUI.NCol,
    NaiveUI.NDrawer,
    NaiveUI.NDrawerContent,
    NaiveUI.NDivider,
    NaiveUI.NSwitch,
    NaiveUI.NBadge,
    NaiveUI.NAlert,
    NaiveUI.NElement,
    NaiveUI.NTag,
    NaiveUI.NNotificationProvider,
    NaiveUI.NProgress,
    NaiveUI.NDatePicker,
    NaiveUI.NGrid,
    NaiveUI.NGridItem,
    NaiveUI.NList,
    NaiveUI.NListItem,
    NaiveUI.NThing,
    NaiveUI.NDataTable,
    NaiveUI.NPopover,
    NaiveUI.NPagination,
    NaiveUI.NSelect,
    NaiveUI.NRadioGroup,
    NaiveUI.NRadio,
    NaiveUI.NSteps,
    NaiveUI.NStep,
    NaiveUI.NInputGroup,
    NaiveUI.NResult,
    NaiveUI.NDescriptions,
    NaiveUI.NDescriptionsItem,
    NaiveUI.NTable,
    NaiveUI.NInputNumber,
    NaiveUI.NLoadingBarProvider,
    NaiveUI.NModal,
    NaiveUI.NUpload,
    NaiveUI.NTree,
    NaiveUI.NSpin,
    NaiveUI.NTimePicker,
    NaiveUI.NBackTop,
    NaiveUI.NSkeleton
  ]
});

const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
  ['message', 'dialog', 'notification', 'loadingBar'],
  {
    configProviderProps: configProviderPropsRef
    // messageProviderProps: messageProviderPropsRef
  }
);

(window as any)['$message'] = message;
(window as any)['$loadingBar'] = loadingBar;

// const w = window as any
// window['$message'] = message
// window['$dialog'] = dialog
// window['$notification'] = notification
// window['$loading'] = loadingBar

export function setupNaive(app: App<Element>) {
  app.use(naive);
}