优化

monisuo-admin/src/composables/use-auth.ts

@@ -0,0 +1,64 @@
+import { storeToRefs } from 'pinia'
+
+import { useAdminLoginMutation } from '@/services/api/monisuo-admin.api'
+import { useAuthStore } from '@/stores/auth'
+
+export function useAuth() {
+  const router = useRouter()
+
+  const authStore = useAuthStore()
+  const { isLogin, adminInfo } = storeToRefs(authStore)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const loginMutation = useAdminLoginMutation()
+
+  function logout() {
+    authStore.logout()
+    router.push({ path: '/auth/sign-in' })
+  }
+
+  function toHome() {
+    router.push({ path: '/dashboard' })
+  }
+
+  async function login(username: string, password: string) {
+    loading.value = true
+    error.value = null
+
+    try {
+      const result = await loginMutation.mutateAsync({ username, password })
+
+      if (result.code === '0000' && result.data) {
+        authStore.setToken(result.data.token)
+        authStore.setAdminInfo(result.data.adminInfo)
+
+        const redirect = router.currentRoute.value.query.redirect as string
+        if (!redirect || redirect.startsWith('//')) {
+          toHome()
+        }
+        else {
+          router.push(redirect)
+        }
+      }
+      else {
+        error.value = result.msg || '登录失败'
+      }
+    }
+    catch (e: any) {
+      error.value = e.response?.data?.msg || '网络错误，请稍后重试'
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    loading,
+    error,
+    isLogin,
+    adminInfo,
+    logout,
+    login,
+  }
+}

monisuo-admin/src/composables/use-axios.ts

@@ -0,0 +1,38 @@
+import type { AxiosError } from 'axios'
+
+import axios from 'axios'
+
+import { useAuthStore } from '@/stores/auth'
+import env from '@/utils/env'
+
+export function useAxios() {
+  const axiosInstance = axios.create({
+    baseURL: env.VITE_SERVER_API_URL + env.VITE_SERVER_API_PREFIX,
+    timeout: env.VITE_SERVER_API_TIMEOUT,
+  })
+
+  axiosInstance.interceptors.request.use((config) => {
+    const authStore = useAuthStore()
+    if (authStore.token) {
+      config.headers.Authorization = `Bearer ${authStore.token}`
+    }
+    return config
+  }, (error) => {
+    return Promise.reject(error)
+  })
+
+  axiosInstance.interceptors.response.use((response) => {
+    return response
+  }, (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      const authStore = useAuthStore()
+      authStore.logout()
+      window.location.href = '/auth/sign-in'
+    }
+    return Promise.reject(error)
+  })
+
+  return {
+    axiosInstance,
+  }
+}

monisuo-admin/src/composables/use-sidebar.ts

@@ -0,0 +1,63 @@
+import { BellDot, Bug, Coins, DollarSign, Palette, PictureInPicture2, Receipt, Settings, SquareUserRound, TrendingUp, User, Users, Wrench } from 'lucide-vue-next'
+
+import type { NavGroup } from '@/components/app-sidebar/types'
+
+export function useSidebar() {
+  const settingsNavItems = [
+    { title: 'Profile', url: '/settings/', icon: User },
+    { title: 'Account', url: '/settings/account', icon: Wrench },
+    { title: 'Appearance', url: '/settings/appearance', icon: Palette },
+    { title: 'Notifications', url: '/settings/notifications', icon: BellDot },
+    { title: 'Display', url: '/settings/display', icon: PictureInPicture2 },
+  ]
+
+  const navData = ref<NavGroup[]>([
+    {
+      title: 'Monisuo 管理',
+      items: [
+        { title: '数据看板', url: '/monisuo/dashboard', icon: DollarSign },
+        { title: '业务分析', url: '/monisuo/analytics', icon: TrendingUp },
+        { title: '用户管理', url: '/monisuo/users', icon: Users },
+        { title: '币种管理', url: '/monisuo/coins', icon: Coins },
+        { title: '订单审批', url: '/monisuo/orders', icon: Receipt },
+      ],
+    },
+    {
+      title: 'Pages',
+      items: [
+        {
+          title: 'Auth',
+          icon: SquareUserRound,
+          items: [
+            { title: 'Monisuo Login', url: '/auth/monisuo-sign-in' },
+          ],
+        },
+        {
+          title: 'Errors',
+          icon: Bug,
+          items: [
+            { title: '401 | Unauthorized', url: '/errors/401' },
+            { title: '403 | Forbidden', url: '/errors/403' },
+            { title: '404 | Not Found', url: '/errors/404' },
+            { title: '500 | Internal Server Error', url: '/errors/500' },
+            { title: '503 | Maintenance Error', url: '/errors/503' },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Other',
+      items: [
+        { title: 'Settings', icon: Settings, items: settingsNavItems },
+      ],
+    },
+  ])
+
+  const otherPages = ref<NavGroup[]>([])
+
+  return {
+    navData,
+    otherPages,
+    settingsNavItems,
+  }
+}

monisuo-admin/src/composables/use-system-config.ts

@@ -0,0 +1,90 @@
+import type { z } from 'zod'
+
+import { toTypedSchema } from '@vee-validate/zod'
+import { useStorage } from '@vueuse/core'
+import { useForm } from 'vee-validate'
+import { toast } from 'vue-sonner'
+
+import { useCreateSystemMutation, useGetSystemConfigByKeyQuery, useUpdateSystemConfigByKeyMutation } from '@/services/api/example-system-config.api'
+
+export function useSystemConfig<S extends z.ZodObject<z.ZodRawShape>>({
+  key,
+  defaultValue,
+  description,
+  schema,
+}: {
+  key: string
+  defaultValue: Readonly<z.input<S>>
+  description: string
+  schema: S
+}) {
+  const initialConfig = { ...defaultValue } as z.input<S>
+  const formSchema = toTypedSchema(schema)
+
+  const { handleSubmit, resetForm } = useForm({
+    validationSchema: formSchema,
+    initialValues: initialConfig,
+  })
+
+  const localCacheConfig = useStorage<z.input<S>>(key, initialConfig)
+
+  const { data: systemConfigData, isPending: isGetSystemConfigByKeyQueryPending } = useGetSystemConfigByKeyQuery(key)
+  const { mutate: createSystemConfigMutate, isPending: isCreateSystemConfigPending } = useCreateSystemMutation()
+  const { mutate: updateSystemConfigMutate, isPending: isUpdateSystemConfigPending } = useUpdateSystemConfigByKeyMutation(key)
+  const isPending = computed(() => isCreateSystemConfigPending.value || isUpdateSystemConfigPending.value)
+
+  watch(systemConfigData, () => {
+    if (!isGetSystemConfigByKeyQueryPending.value && !systemConfigData.value) {
+      localCacheConfig.value = systemConfigData.value
+      createSystemConfigMutate({
+        key,
+        description,
+        value: JSON.stringify(defaultValue),
+      }, {
+        onSuccess: () => {
+          localCacheConfig.value = initialConfig
+          toast('System config created with default value.', {
+            description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify({ key, description, value: defaultValue }, null, 2))),
+          })
+        },
+      })
+      return
+    }
+
+    const configValue: z.input<S> = systemConfigData.value?.data?.value
+      ? JSON.parse(systemConfigData.value.data.value)
+      : initialConfig
+    localCacheConfig.value = configValue
+    resetForm({
+      values: { ...configValue },
+    })
+  }, { immediate: true, deep: true })
+
+  const onSubmit = handleSubmit((values) => {
+    const config = {
+      key,
+      value: values,
+      description,
+    }
+    // 1. local cache
+    localCacheConfig.value = values as z.input<S>
+
+    // 2. sync to server
+    updateSystemConfigMutate({
+      ...config,
+      value: JSON.stringify(values),
+    }, {
+      onSuccess: () => {
+        toast('You submitted the following values:', {
+          description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(config, null, 2))),
+        })
+      },
+    })
+  })
+
+  return {
+    isPending,
+    isGetting: isGetSystemConfigByKeyQueryPending,
+    onSubmit,
+  }
+}

monisuo-admin/src/composables/use-system-theme.ts

@@ -0,0 +1,29 @@
+import { storeToRefs } from 'pinia'
+import { watch } from 'vue'
+
+import { THEMES } from '@/constants/themes'
+import { useThemeStore } from '@/stores/theme'
+
+export function useSystemTheme() {
+  const themeStore = useThemeStore()
+  const { setTheme, setRadius } = themeStore
+  const { theme, radius } = storeToRefs(themeStore)
+
+  if (typeof document !== 'undefined') {
+    watch(theme, (theme) => {
+      document.documentElement.classList.remove(...THEMES.map(t => `theme-${t}`))
+      document.documentElement.classList.add(`theme-${theme}`)
+    }, { immediate: true })
+
+    watch(radius, (radius) => {
+      document.documentElement.style.setProperty('--radius', `${radius}rem`)
+    }, { immediate: true })
+  }
+
+  return {
+    theme,
+    radius,
+    setTheme,
+    setRadius,
+  }
+}