v1.0.0

src/hooks/useBasicLayout.ts

@@ -0,0 +1,8 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+export function useBasicLayout() {
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+  const isMobile = breakpoints.smaller('sm')
+
+  return { isMobile }
+}

src/hooks/useIconRender.ts

@@ -0,0 +1,36 @@
+import { h } from 'vue'
+import { SvgIcon } from '@/components/common'
+
+export const useIconRender = () => {
+  interface IconConfig {
+    icon?: string
+    color?: string
+    fontSize?: number
+  }
+
+  interface IconStyle {
+    color?: string
+    fontSize?: string
+  }
+
+  const iconRender = (config: IconConfig) => {
+    const { color, fontSize, icon } = config
+
+    const style: IconStyle = {}
+
+    if (color)
+      style.color = color
+
+    if (fontSize)
+      style.fontSize = `${fontSize}px`
+
+    if (!icon)
+      window.console.warn('iconRender: icon is required')
+
+    return () => h(SvgIcon, { icon, style })
+  }
+
+  return {
+    iconRender,
+  }
+}

src/hooks/useLanguage.ts

@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+import { enUS, koKR, zhCN, zhTW } from 'naive-ui'
+import { useAppStore } from '@/store'
+import { setLocale } from '@/locales'
+
+export function useLanguage() {
+  const appStore = useAppStore()
+
+  const language = computed(() => {
+    switch (appStore.language) {
+      case 'en-US':
+        setLocale('en-US')
+        return enUS
+      case 'ko-KR':
+        setLocale('ko-KR')
+        return koKR
+      case 'zh-CN':
+        setLocale('zh-CN')
+        return zhCN
+      case 'zh-TW':
+        setLocale('zh-TW')
+        return zhTW
+      default:
+        setLocale('zh-CN')
+        return zhCN
+    }
+  })
+
+  return { language }
+}

src/hooks/useTheme.ts

@@ -0,0 +1,43 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+import { computed, watch } from 'vue'
+import { darkTheme, useOsTheme } from 'naive-ui'
+import { useAppStore } from '@/store'
+
+export function useTheme() {
+  const appStore = useAppStore()
+
+  const OsTheme = useOsTheme()
+
+  const isDark = computed(() => {
+    if (appStore.theme === 'auto')
+      return OsTheme.value === 'dark'
+    else
+      return appStore.theme === 'dark'
+  })
+
+  const theme = computed(() => {
+    return isDark.value ? darkTheme : undefined
+  })
+
+  const themeOverrides = computed<GlobalThemeOverrides>(() => {
+    if (isDark.value) {
+      return {
+        common: {},
+      }
+    }
+    return {}
+  })
+
+  watch(
+    () => isDark.value,
+    (dark) => {
+      if (dark)
+        document.documentElement.classList.add('dark')
+      else
+        document.documentElement.classList.remove('dark')
+    },
+    { immediate: true },
+  )
+
+  return { theme, themeOverrides }
+}