Initial commit: 网络验证平台

frontend/src/plugins/auto-animate/setup.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue'
+
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+
+export function setupAutoAnimate(app: App) {
+  app.use(autoAnimatePlugin)
+}

frontend/src/plugins/dayjs/setup.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn'
+
+export function setupDayjs() {
+  dayjs.locale('zh-cn')
+  dayjs.extend(relativeTime)
+}

frontend/src/plugins/i18n/index.ts

@@ -0,0 +1,18 @@
+import { useStorage } from '@vueuse/core'
+
+export type Language = 'en' | 'zh'
+
+export const SUPPORTED_LOCALES = new Set<Language>([
+  'en',
+  'zh',
+])
+
+export const DEFAULT_LOCALE: Language = 'zh'
+
+export const appLocale = useStorage<Language>('app-locale', DEFAULT_LOCALE)
+
+watch(appLocale, (newLocale) => {
+  if (!SUPPORTED_LOCALES.has(newLocale)) {
+    appLocale.value = DEFAULT_LOCALE
+  }
+}, { immediate: true })

frontend/src/plugins/i18n/setup.ts

@@ -0,0 +1,22 @@
+import type { App } from 'vue'
+
+import { createI18n } from 'vue-i18n'
+
+import type { Language } from '.'
+
+import { appLocale, DEFAULT_LOCALE } from '.'
+import en from './en.json'
+import zh from './zh.json'
+
+export function setupI18n(app: App) {
+  const i18n = createI18n({
+    legacy: false,
+    locale: appLocale.value,
+    fallbackLocale: DEFAULT_LOCALE,
+    messages: <Record<Language, Record<string, any>>>{
+      zh,
+      en,
+    },
+  })
+  app.use(i18n)
+}

frontend/src/plugins/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+
+import { setupAutoAnimate } from './auto-animate/setup'
+import { setupDayjs } from './dayjs/setup'
+import { setupI18n } from './i18n/setup'
+import { setupNProgress } from './nprogress/setup'
+import { setupPinia } from './pinia/setup'
+import { setupRouter } from './router/setup'
+import { setupTanstackVueQuery } from './tanstack-vue-query/setup'
+
+export function setupPlugins(app: App) {
+  setupDayjs()
+  setupNProgress()
+  setupAutoAnimate(app)
+  setupTanstackVueQuery(app)
+  setupI18n(app)
+  setupPinia(app)
+  setupRouter(app)
+}

frontend/src/plugins/nprogress/setup.ts

@@ -0,0 +1,12 @@
+import nprogress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+import '@/assets/nprogress.css'
+
+export function setupNProgress() {
+  nprogress.configure({
+    showSpinner: true,
+    speed: 500,
+    trickleSpeed: 200,
+  })
+}

frontend/src/plugins/pinia/setup.ts

@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+
+import { createPinia } from 'pinia'
+import { createPersistedState } from 'pinia-plugin-persistedstate'
+
+const pinia = createPinia()
+
+const persistedState = createPersistedState({
+  storage: sessionStorage,
+})
+pinia.use(persistedState)
+
+export function setupPinia(app: App) {
+  app.use(pinia)
+}
+
+export default pinia

frontend/src/plugins/router/setup.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue'
+
+import router from '@/router'
+
+export function setupRouter(app: App) {
+  app.use(router)
+}

frontend/src/plugins/tanstack-vue-query/setup.ts

@@ -0,0 +1,18 @@
+import type { App } from 'vue'
+
+import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+})
+
+export function setupTanstackVueQuery(app: App) {
+  app.use(VueQueryPlugin, {
+    enableDevtoolsV6Plugin: true,
+    queryClient,
+  })
+}