feat: enhance project configuration and add new features

src/plugins/_.ts

@@ -0,0 +1,32 @@
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { createHead } from '@unhead/vue/client'
+
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app.config.globalProperties.__DEV__ = __DEV__
+
+  app.use(autoAnimatePlugin) // v-auto-animate="{ duration: 100 }"
+
+  app.use(createHead())
+  app.config.errorHandler = (error, instance, info) => {
+    console.error('Global error:', error)
+    console.error('Component:', instance)
+    console.error('Error Info:', info)
+    // 这里你可以：
+    // 1. 发送错误到日志服务
+    // 2. 显示全局错误提示
+    // 3. 进行错误分析和处理
+  }
+
+  // if (import.meta.env.MODE === 'development' && '1' === ('2' as never)) {
+  //   // TODO: https://github.com/hu3dao/vite-plugin-debug/
+  //   // https://eruda.liriliri.io/zh/docs/#快速上手
+  //   import('eruda').then(({ default: eruda }) => {
+  //     eruda.init({
+  //       defaults: {
+  //         transparency: 0.9,
+  //       },
+  //     })
+  //     /* eruda.show(); */
+  //   })
+  // }
+}

src/plugins/index.ts

@@ -0,0 +1,24 @@
+/**
+ * https://github.com/antfu-collective/vitesse/blob/47618e72dfba76c77b9b85b94784d739e35c492b/src/modules/README.md
+ */
+type UserPlugin = (ctx: UserPluginContext) => void
+type AutoInstallModule = { [K: string]: unknown; install?: UserPlugin }
+type UserPluginContext = { app: import('vue').App<Element> }
+export function setupPlugins(
+  app: import('vue').App,
+  modules: AutoInstallModule | Record<string, unknown>,
+) {
+  console.group('🔌 Plugins')
+  for (const path in modules) {
+    const module = modules[path] as AutoInstallModule
+    if (module.install) {
+      module.install({ app })
+      console.debug(`%c✔ ${path}`, 'color: #07a')
+    } else {
+      if (typeof module.setupPlugins === 'function') continue
+      console.warn(`%c✘ ${path} has no install function`, 'color: #f50')
+    }
+  }
+  console.groupEnd()
+  return app
+}

src/plugins/pinia.ts

@@ -0,0 +1,6 @@
+import { PiniaColada } from '@pinia/colada'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app.use(createPinia().use(piniaPluginPersistedstate))
+  app.use(PiniaColada, {})
+}

src/plugins/primevue.ts

@@ -0,0 +1,28 @@
+/**
+ * 需要把 <DynamicDialog /> <ConfirmDialog /> <Toast /> 放在 App.vue 的 template 中
+ */
+
+import Aura from '@primeuix/themes/aura'
+import zhCN from 'primelocale/zh-CN.json'
+import PrimeVue from 'primevue/config'
+import StyleClass from 'primevue/styleclass'
+
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app.directive('styleclass', StyleClass)
+  app.use(PrimeVue, {
+    locale: {
+      ...zhCN['zh-CN'],
+      completed: '已上传',
+      noFileChosenMessage: '未选择文件',
+      pending: '待上传',
+    }, // usePrimeVue().config.locale
+    theme: {
+      options: {
+        cssLayer: false,
+        darkModeSelector: '.app-dark' /* 'system' */,
+        prefix: 'p',
+      },
+      preset: Aura,
+    },
+  })
+}

src/plugins/router.ts

@@ -0,0 +1,58 @@
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
+import { setupLayouts } from 'virtual:meta-layouts'
+// import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
+import { createRouter, createWebHistory } from 'vue-router'
+import { handleHotUpdate, routes } from 'vue-router/auto-routes'
+
+const setupLayoutsResult = setupLayouts(routes)
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: /* routes ?? */ setupLayoutsResult,
+  scrollBehavior: (_to, _from, savedPosition) => {
+    return savedPosition ?? { left: 0, top: 0 }
+  },
+  strict: true,
+})
+if (import.meta.hot) handleHotUpdate(router)
+if (__DEV__) Object.assign(globalThis, { router })
+router.onError((error) => {
+  console.debug('🚨 [router error]:', error)
+})
+
+export { router, setupLayoutsResult }
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app
+    // 在路由之前注册插件
+    .use(DataLoaderPlugin, { router })
+    // 添加路由会触发初始导航
+    .use(router)
+}
+// ========================================================================
+// =========================== Router Guards ==============================
+// ========================================================================
+{
+  // 警告：路由守卫的创建顺序会影响执行流程，请勿调整
+  createNProgressGuard(router)
+  createLogGuard(router)
+  Object.assign(globalThis, { stack: createStackGuard(router) })
+}
+
+/*
+definePage({
+  meta: { },
+});
+ */
+declare module 'vue-router' {
+  interface RouteMeta {
+    /**
+     * @description 是否在菜单中隐藏
+     */
+    hidden?: boolean
+    /**
+     * @description 菜单标题
+     */
+    title?: string
+  }
+}
+
+export { createGetRoutes } from 'virtual:meta-layouts'

src/plugins/vue-i18n.ts

@@ -0,0 +1,17 @@
+/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ */
+import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
+
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app.use(
+    // https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
+    createI18n({
+      legacy: false, // you must set `false`, to use Composition API
+      locale: navigator.language,
+      messages,
+    }),
+  )
+}