Base6-UI

文档

组件

• AppProvider
• BaseDataTable
• BaseDialog
• BaseInputNumber
• BaseLayout
  • Aside
• BaseProgress
• BaseRadio
• BaseSelect
• BaseSlider
• BaseSwitch

基础使用

1. Base6UI基于naive-ui开发，使用参照naive-ui组件库提供props及用法

2. 项目根目录引入以下代(码组件库按需引入)：

   /**
    * 注册全局函数
    * 渲染base6风格 comfirmTip和message
    * 
    */
   import { registerGlobalMethods } from 'base6-ui'
   import 'base6-ui/index.css'

3. AppProvider组件注册$loadingBar、$dialog、$message、$notification方案，具体使用

       <NConfigProvider :theme="appTheme" :theme-overrides="naiveTheme" class="h-full">
           <AppProvider>
               <RouterView class="bg-layout" />
           </AppProvider>
       </NConfigProvider>

4. 组件库提供亮色/暗色两种主题覆盖配置（darkThemeOverrides, lightThemeOverrides）代码参照如下主题配置：

   import { darkThemeOverrides, lightThemeOverrides, AppProvider } from 'base6-ui'
   import useWatermarkHook from '@/hooks/useWatermark'
   import { useThemeStore } from '@/store/modules/theme'
   import { useLayoutStore } from '@/store/modules/layout'
   import { storeToRefs } from 'pinia'
   import { computed, watch } from 'vue'
   import { darkTheme, type GlobalThemeOverrides } from 'naive-ui'
   import { getNaiveTheme } from '@/utils/layout'
   
   const { watermarkOptions } = useWatermarkHook()
   
   const { isUseWatermark, isDarkMode } = storeToRefs(useThemeStore())
   const { layoutConfig } = storeToRefs(useLayoutStore())
   
   const appTheme = computed(() => isDarkMode.value ? darkTheme : undefined)
   
   let naiveTheme: GlobalThemeOverrides = {
       ...getNaiveTheme({ primary: layoutConfig.value.themeColor }),
       ...lightThemeOverrides
   }
   
   const { themeColor } = layoutConfig.value
   watch(
   () => isDarkMode.value,
   (curVal) => {
       if (curVal) {
           naiveTheme = {
               ...getNaiveTheme({ primary: layoutConfig.value.themeColor }),
               ...darkThemeOverrides
           }
       } else {
           naiveTheme = {
               ...getNaiveTheme({ primary: layoutConfig.value.themeColor }),
               ...lightThemeOverrides
           }
       }
   },
   {
       immediate: true
   }
   )