优化

monisuo-admin/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)
+}

monisuo-admin/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)
+}

monisuo-admin/src/plugins/echarts.ts

@@ -0,0 +1,44 @@
+import type { App } from 'vue'
+
+import { BarChart, GaugeChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
+import {
+  DatasetComponent,
+  DataZoomComponent,
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  TransformComponent,
+  VisualMapComponent,
+} from 'echarts/components'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+
+// 注册所有需要的组件
+use([
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  PieChart,
+  RadarChart,
+  GaugeChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  GraphicComponent,
+])
+
+export default {
+  install(app: App) {
+    app.component('VChart', VChart)
+  },
+}

monisuo-admin/src/plugins/i18n/en.json

@@ -0,0 +1,115 @@
+{
+  "premium": {
+    "premium": "premium",
+    "UpgradeNow": "Upgrade Now"
+  },
+  "marketing": {
+    "hero": {
+      "learnPeople": "More than 1K+ people joined",
+      "getMore": "Get more",
+      "title": "Do you dare to use 365 days to witness a complete transformation?",
+      "subtitle": "The hourglass of time is bursting with thunder. When the quantitative change breaks through the critical point, every morning and evening you work hard will turn into a sea of stars!"
+    },
+    "features": {
+      "title": "Features",
+      "feature1": {
+        "title": "Use modern technology",
+        "description": "More modern component library, free to customize each component"
+      },
+      "feature2": {
+        "title": "Easy to deploy",
+        "description": "One-click deployment to your server, no complicated configuration required"
+      },
+      "feature3": {
+        "title": "Open source code",
+        "description": "Every line of code is open source, you can modify and extend it freely"
+      },
+      "feature4": {
+        "title": "Community support",
+        "description": "You can find help in the community and share your experience"
+      }
+    },
+    "evaluation": {
+      "title": "Evaluation",
+      "subtitle": "These evaluations are simulated data, not actual data"
+    },
+    "pricingPlans": {
+      "title": "Pricing Plans",
+      "subtitle": "Choose the plan that suits you",
+      "buy": "Get it now",
+      "hobby": {
+        "title": "Hobby",
+        "description": "Suitable for beginners",
+        "price": "399",
+        "discount": "599",
+        "unit": "$",
+        "billing": {
+          "cycle": "",
+          "period": ""
+        },
+        "features": {
+          "feature1": "Use part of the website code",
+          "feature2": "Get the latest technology updates",
+          "feature3": "More than 100 components",
+          "feature4": "More than 100 pages"
+        }
+      },
+      "starter": {
+        "title": "Starter",
+        "description": "Suitable for beginners",
+        "price": "599",
+        "discount": "899",
+        "unit": "$",
+        "billing": {
+          "cycle": "",
+          "period": ""
+        },
+        "features": {
+          "feature1": "Use the entire site's code",
+          "feature2": "Read the excellent online documentation",
+          "feature3": "Get the latest technical updates",
+          "feature4": "Over 200 components",
+          "feature5": "Over 200 pages"
+        }
+      },
+      "business": {
+        "title": "Business",
+        "description": "Suitable for beginners",
+        "price": "199",
+        "discount": "399",
+        "unit": "$",
+        "billing": {
+          "cycle": "",
+          "period": ""
+        },
+        "features": {
+          "feature1": "Use the entire site's code",
+          "feature2": "Read the excellent online documentation",
+          "feature3": "Get the latest technical updates",
+          "feature4": "Over 200 components",
+          "feature5": "Over 200 pages",
+          "feature6": "Private assistant support"
+        }
+      }
+    },
+    "setup": {
+      "title": "Setup",
+      "subtitle": "Just 3 minutes to start using"
+    }
+  },
+  "login": "Login",
+  "email": "Email",
+  "password": "Password",
+  "download": "Download",
+  "logout": "Log out",
+  "forgotPassword": "Forgot password?",
+  "register": "Register",
+  "language": "English",
+  "forgotPasswordPage": {
+    "continue": "continue"
+  },
+  "homePage": {
+    "searchKeyWords": "Search Menu"
+  },
+  "changeLanguage": "Change Language"
+}

monisuo-admin/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 = 'en'
+
+export const appLocale = useStorage<Language>('app-locale', DEFAULT_LOCALE)
+
+watch(appLocale, (newLocale) => {
+  if (!SUPPORTED_LOCALES.has(newLocale)) {
+    appLocale.value = DEFAULT_LOCALE
+  }
+}, { immediate: true })

monisuo-admin/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)
+}

monisuo-admin/src/plugins/i18n/zh.json

@@ -0,0 +1,115 @@
+{
+  "premium": {
+    "premium": "会员计划",
+    "UpgradeNow": "现在升级"
+  },
+  "marketing": {
+    "hero": {
+      "learnPeople": "超过 1K+ 人加入",
+      "getMore": "获取更多",
+      "title": "每个0.01%的进化都在熔铸命运的质变，敢不敢用365天见证脱胎换骨？",
+      "subtitle": "时光沙漏正迸发着惊雷，当量变冲破临界点，你埋首耕耘的每个晨昏都将化作星辰大海！"
+    },
+    "features": {
+      "title": "功能",
+      "feature1": {
+        "title": "使用现代技术",
+        "description": "更加现代化的组件库，自由定制每一个组件"
+      },
+      "feature2": {
+        "title": "部署简单",
+        "description": "一键部署到您的服务器，无需复杂的配置"
+      },
+      "feature3": {
+        "title": "代码开源",
+        "description": "每一行代码都是开源的，您可以自由地修改和扩展"
+      },
+      "feature4": {
+        "title": "社区支持",
+        "description": "你可以在社区中找到帮助，也可以分享你的经验"
+      }
+    },
+    "evaluation": {
+      "title": "评价",
+      "subtitle": "这些评价都是模拟数据，并非实际数据"
+    },
+    "pricingPlans": {
+      "title": "定价计划",
+      "subtitle": "选择最适合你的计划",
+      "buy": "立即购买",
+      "hobby": {
+        "title": "业余爱好者",
+        "description": "三年提高技能",
+        "price": "399",
+        "discount": "599",
+        "unit": "¥",
+        "billing": {
+          "cycle": "",
+          "period": ""
+        },
+        "features": {
+          "feature1": "使用网站部分代码",
+          "feature2": "获取最新的技术更新",
+          "feature3": "超过 100 个组件",
+          "feature4": "超过 100 个页面"
+        }
+      },
+      "starter": {
+        "title": "入门计划",
+        "description": "五年提高技能",
+        "price": "599",
+        "discount": "899",
+        "unit": "¥",
+        "billing": {
+          "cycle": "",
+          "period": ""
+        },
+        "features": {
+          "feature1": "使用网站全部代码",
+          "feature2": "阅读精彩的在线文档",
+          "feature3": "获取最新的技术更新",
+          "feature4": "超过 200 个组件",
+          "feature5": "超过 200 个页面"
+        }
+      },
+      "business": {
+        "title": "商务计划",
+        "description": "十年提高技能",
+        "price": "199",
+        "discount": "399",
+        "unit": "$",
+        "billing": {
+          "cycle": "",
+          "period": ""
+        },
+        "features": {
+          "feature1": "使用网站全部代码",
+          "feature2": "阅读精彩的在线文档",
+          "feature3": "获取最新的技术更新",
+          "feature4": "超过 200 个组件",
+          "feature5": "超过 200 个页面",
+          "feature6": "私人助理支持"
+        }
+      }
+    },
+    "setup": {
+      "title": "快速开始",
+      "subtitle": "只需 3 分钟即可开始使用"
+    }
+  },
+  "login": "登录",
+  "email": "邮箱",
+  "password": "密码",
+  "download": "下载",
+  "logout": "退出",
+  "forgotPassword": "忘记密码?",
+  "register": "注册",
+  "language": "中文",
+  "forgotPasswordPage": {
+    "continue": "下一步"
+  },
+  "homePage": {
+    "searchKeyWords": "搜索菜单"
+  },
+  "changeLanguage": "语言切换"
+}

monisuo-admin/src/plugins/index.ts

@@ -0,0 +1,21 @@
+import type { App } from 'vue'
+
+import { setupAutoAnimate } from './auto-animate/setup'
+import { setupDayjs } from './dayjs/setup'
+import echarts from './echarts'
+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)
+  app.use(echarts)
+}

monisuo-admin/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,
+  })
+}

monisuo-admin/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

monisuo-admin/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)
+}

monisuo-admin/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,
+  })
+}