af-mobile-client-vue3 1.1.53 → 1.2.0

package/src/components/data/XOlMap/utils/wgs84ToGcj02.js

@@ -1,154 +1,154 @@
-// 导入proj控件
-import * as proj from 'ol/proj'
-
-function forEachPoint(func) {
-  return function (input, opt_output, opt_dimension) {
-    const len = input.length
-
-    const dimension = opt_dimension || 2
-    let output
-
-    if (opt_output) {
-      output = opt_output
-    }
-    else {
-      if (dimension !== 2) {
-        output = input.slice()
-      }
-      else {
-        output = [len]
-      }
-    }
-    for (let offset = 0; offset < len; offset += dimension) {
-      func(input, output, offset)
-    }
-    return output
-  }
-}
-
-const gcj02 = {}
-const PI = Math.PI
-const AXIS = 6378245.0
-// eslint-disable-next-line no-loss-of-precision
-const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
-
-function delta(wgLon, wgLat) {
-  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
-  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
-  const radLat = (wgLat / 180.0) * PI
-  let magic = Math.sin(radLat)
-  magic = 1 - OFFSET * magic * magic
-  const sqrtMagic = Math.sqrt(magic)
-  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
-  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
-  return [dLon, dLat]
-}
-
-function outOfChina(lon, lat) {
-  if (lon < 72.004 || lon > 137.8347) {
-    return true
-  }
-  return lat < 0.8293 || lat > 55.8271
-}
-
-function transformLat(x, y) {
-  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
-  return ret
-}
-
-function transformLon(x, y) {
-  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
-  return ret
-}
-
-gcj02.toWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng - deltaD[0] // 改回减法
-    lat = lat - deltaD[1] // 改回减法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng + deltaD[0] // 改回加法
-    lat = lat + deltaD[1] // 改回加法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-const sphericalMercator = {}
-const RADIUS = 6378137
-const MAX_LATITUDE = 85.0511287798
-const RAD_PER_DEG = Math.PI / 180
-
-sphericalMercator.forward = forEachPoint((input, output, offset) => {
-  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
-  const sin = Math.sin(lat * RAD_PER_DEG)
-  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
-  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
-})
-
-sphericalMercator.inverse = forEachPoint((input, output, offset) => {
-  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
-  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
-})
-
-const projzh = {}
-
-projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
-  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
-  const output = projzh.smerc2ll(input, input, opt_dimension)
-  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
-}
-
-// smerc2gmerc 需要修改
-
-projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-// gmerc2smerc 需要修改
-
-projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.ll2smerc = sphericalMercator.forward
-projzh.smerc2ll = sphericalMercator.inverse
-
-// 定义WGS84转GCJ02的投影
-const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
-export const wgs84ToGcj02Projection = new proj.Projection({
-  code: 'WGS84-TO-GCJ02',
-  extent,
-  units: 'm',
-})
-
-// 添加投影和转换方法
-proj.addProjection(wgs84ToGcj02Projection)
-// 注意这里转换方法的顺序与原来相反
-proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
-proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
+// 导入proj控件
+import * as proj from 'ol/proj'
+
+function forEachPoint(func) {
+  return function (input, opt_output, opt_dimension) {
+    const len = input.length
+
+    const dimension = opt_dimension || 2
+    let output
+
+    if (opt_output) {
+      output = opt_output
+    }
+    else {
+      if (dimension !== 2) {
+        output = input.slice()
+      }
+      else {
+        output = [len]
+      }
+    }
+    for (let offset = 0; offset < len; offset += dimension) {
+      func(input, output, offset)
+    }
+    return output
+  }
+}
+
+const gcj02 = {}
+const PI = Math.PI
+const AXIS = 6378245.0
+// eslint-disable-next-line no-loss-of-precision
+const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
+
+function delta(wgLon, wgLat) {
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
+  const radLat = (wgLat / 180.0) * PI
+  let magic = Math.sin(radLat)
+  magic = 1 - OFFSET * magic * magic
+  const sqrtMagic = Math.sqrt(magic)
+  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
+  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
+  return [dLon, dLat]
+}
+
+function outOfChina(lon, lat) {
+  if (lon < 72.004 || lon > 137.8347) {
+    return true
+  }
+  return lat < 0.8293 || lat > 55.8271
+}
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
+  return ret
+}
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
+  return ret
+}
+
+gcj02.toWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng - deltaD[0] // 改回减法
+    lat = lat - deltaD[1] // 改回减法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng + deltaD[0] // 改回加法
+    lat = lat + deltaD[1] // 改回加法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+const sphericalMercator = {}
+const RADIUS = 6378137
+const MAX_LATITUDE = 85.0511287798
+const RAD_PER_DEG = Math.PI / 180
+
+sphericalMercator.forward = forEachPoint((input, output, offset) => {
+  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
+  const sin = Math.sin(lat * RAD_PER_DEG)
+  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
+  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
+})
+
+sphericalMercator.inverse = forEachPoint((input, output, offset) => {
+  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
+  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
+})
+
+const projzh = {}
+
+projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
+  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
+  const output = projzh.smerc2ll(input, input, opt_dimension)
+  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
+}
+
+// smerc2gmerc 需要修改
+
+projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+// gmerc2smerc 需要修改
+
+projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.ll2smerc = sphericalMercator.forward
+projzh.smerc2ll = sphericalMercator.inverse
+
+// 定义WGS84转GCJ02的投影
+const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
+export const wgs84ToGcj02Projection = new proj.Projection({
+  code: 'WGS84-TO-GCJ02',
+  extent,
+  units: 'm',
+})
+
+// 添加投影和转换方法
+proj.addProjection(wgs84ToGcj02Projection)
+// 注意这里转换方法的顺序与原来相反
+proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
+proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)

package/src/composables/dark.ts

@@ -0,0 +1,5 @@
+import { useDark, usePreferredDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
+export const preferredDark = usePreferredDark()

package/src/config/routes.ts

@@ -0,0 +1,5 @@
+// 定义导航栏和标签栏可见的路由白名单
+export const routeWhiteList: readonly string[] = [
+  'ComponentView', // 首页
+  'userProfile', // 个人中心
+]

package/src/layout/PageLayout.vue

@@ -1,51 +1,9 @@
 <script setup lang="ts">
-import Tabbar from '@af-mobile-client-vue3/components/core/Tabbar/index.vue'
-import useRouteCache from '@af-mobile-client-vue3/stores/modules/routeCache'
-import useRouteTransitionNameStore from '@af-mobile-client-vue3/stores/modules/routeTransitionName'
-import { getFunction } from '@af-mobile-client-vue3/utils/common'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-const keepAliveRouteNames = computed(() => {
-  return useRouteCache().routeCaches as string[]
-})
-const routeTransitionNameStore = useRouteTransitionNameStore()
-const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
-
-const tabbarData: any = [...getFunction().children.sort((a, b) => a.position - b.position).map((item) => {
-  return {
-    icon: item.icon ? item.icon : 'svg:appDome',
-    title: item.name,
-    to: {
-      name: item.link,
-    },
-  }
-})]
-
-const routeState = useRoute()
 </script>
 
 <template>
-  <div class="pageLayout">
-    <!--  transition 包裹 router-view 控制台会有警告，router-view在外层会导致动画开始时会闪过一帧上一级页面。先忽略警告这样写 -->
-    <transition :name="routeTransitionName">
-      <router-view v-slot="{ Component, route }">
-        <keep-alive :include="keepAliveRouteNames">
-          <div :key="route.name" class="app-wrapper">
-            <component :is="Component" />
-          </div>
-        </keep-alive>
-      </router-view>
-    </transition>
-    <Tabbar v-show="routeState.meta.index !== undefined" :tabbar-data="tabbarData" />
-  </div>
+  <div class="pageLayout" />
 </template>
 
 <style lang="less" scoped>
-.app-wrapper {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-}
 </style>

package/src/locales/en-US.json

@@ -1,12 +1,22 @@
 {
-  "home": {
+  "menus": {
+    "home": "Home",
+    "profile": "My Center",
     "darkMode": "🌗 Dark Mode",
     "mockGuide": "💿 Mock Guide",
     "language": "📚 Language",
     "404Demo": "🙅 Page 404 Demo",
     "echartsDemo": "📊 Echarts Demo",
     "persistPiniaState": "🍍 Persistent Pinia state",
-    "unocssExample": "🎨 Unocss example"
+    "unocssExample": "🎨 Unocss example",
+    "keepAlive": "🧡 KeepAlive Demo",
+    "scrollCache": "📜 Scroll Cache Demo",
+    "login": "🔒 Login",
+    "register": "Register",
+    "settings": "Settings",
+    "basicSettings": "Basic Settings",
+    "exampleComponents": "Example components",
+    "forgot-password": "Forgot Password"
   },
   "mock": {
     "fromAsyncData": "Data from asynchronous requests",
@@ -21,5 +31,74 @@
     "April": "Apr",
     "May": "May",
     "June": "Jun"
+  },
+  "layouts": {
+    "home": "HOME",
+    "profile": "PROFILE"
+  },
+  "profile": {
+    "login": "Login",
+    "settings": "Settings",
+    "docs": "Docs"
+  },
+  "keepAlive": {
+    "label": "The current component will be cached"
+  },
+  "scrollCache": {
+    "sectionTitle": "Section title",
+    "sectionText": "Section text text text text text text text text text text",
+    "finished": "Already at the bottom ~",
+    "loading": "Loading..."
+  },
+  "login": {
+    "login": "Sign In",
+    "logout": "Sign Out",
+    "email": "Email",
+    "password": "Password",
+    "pleaseEnterEmail": "Please enter email",
+    "pleaseEnterPassword": "Please enter password",
+    "sign-up": "Click to sign up",
+    "forgot-password": "Forgot password?"
+  },
+  "forgot-password": {
+    "email": "Email",
+    "code": "Code",
+    "password": "Password",
+    "comfirmPassword": "Password again",
+    "pleaseEnterEmail": "Please enter email",
+    "pleaseEnterCode": "Please enter code",
+    "pleaseEnterPassword": "Please enter password",
+    "pleaseEnterConfirmPassword": "Please enter password again",
+    "passwordsDoNotMatch": "Passwords do not match",
+    "confirm": "Confirm",
+    "backToLogin": "Back to login",
+    "getCode": "Get code",
+    "gettingCode": "Getting code",
+    "sendCodeSuccess": "Sent, the code is",
+    "passwordResetSuccess": "Password reset succeeded"
+  },
+  "register": {
+    "email": "Email",
+    "code": "Code",
+    "nickname": "Nickname",
+    "password": "Password",
+    "comfirmPassword": "Password again",
+    "pleaseEnterEmail": "Please enter email",
+    "pleaseEnterCode": "Please enter code",
+    "pleaseEnterNickname": "Please enter nickname",
+    "pleaseEnterPassword": "Please enter password",
+    "pleaseEnterConfirmPassword": "Please enter password again",
+    "passwordsDoNotMatch": "Passwords do not match",
+    "confirm": "Confirm",
+    "backToLogin": "Back to login",
+    "getCode": "Get code",
+    "gettingCode": "Getting code",
+    "sendCodeSuccess": "Sent, the code is",
+    "registerSuccess": "Register succeeded"
+  },
+  "settings": {
+    "logout": "Sign Out",
+    "currentVersion": "Current Version",
+    "comfirmTitle": "Confirm Exit?"
   }
 }

package/src/locales/zh-CN.json

@@ -1,12 +1,22 @@
 {
-  "home": {
+  "menus": {
+    "home": "主页",
+    "profile": "个人中心",
     "darkMode": "🌗 暗黑模式",
     "mockGuide": "💿 Mock 指南",
     "language": "📚 语言",
     "echartsDemo": "📊 Echarts 演示",
     "persistPiniaState": "🍍 持久化 Pinia 状态",
     "404Demo": "🙅 404页 演示",
-    "unocssExample": "🎨 Unocss 示例"
+    "unocssExample": "🎨 Unocss 示例",
+    "keepAlive": "🧡 KeepAlive 演示",
+    "scrollCache": "📜 滚动缓存 演示",
+    "login": "🔒 用户登录",
+    "register": "用户注册",
+    "settings": "设置",
+    "basicSettings": "基本设置",
+    "exampleComponents": "示例组件",
+    "forgot-password": "忘记密码"
   },
   "mock": {
     "fromAsyncData": "来自异步请求的数据",
@@ -21,5 +31,74 @@
     "April": "4月",
     "May": "5月",
     "June": "6月"
+  },
+  "layouts": {
+    "home": "首页",
+    "profile": "我的"
+  },
+  "profile": {
+    "login": "登录",
+    "settings": "设置",
+    "docs": "文档"
+  },
+  "keepAlive": {
+    "label": "当前组件将会被缓存"
+  },
+  "scrollCache": {
+    "sectionTitle": "段落标题",
+    "sectionText": "段落内容段落内容段落内容段落内容段落内容段落内容",
+    "finished": "已经到底啦 ~",
+    "loading": "加载中..."
+  },
+  "login": {
+    "login": "登录",
+    "logout": "退出",
+    "email": "邮箱",
+    "password": "密码",
+    "pleaseEnterEmail": "请输入邮箱",
+    "pleaseEnterPassword": "请输入密码",
+    "sign-up": "还没有账号？点击注册",
+    "forgot-password": "忘记密码？"
+  },
+  "forgot-password": {
+    "email": "邮箱",
+    "code": "验证码",
+    "password": "密码",
+    "comfirmPassword": "再次输入密码",
+    "pleaseEnterEmail": "请输入邮箱",
+    "pleaseEnterCode": "请输入验证码",
+    "pleaseEnterPassword": "请输入密码",
+    "pleaseEnterConfirmPassword": "请再次输入密码",
+    "passwordsDoNotMatch": "两次输入的密码不一致",
+    "confirm": "确认",
+    "backToLogin": "返回登录",
+    "getCode": "获取验证码",
+    "gettingCode": "获取中",
+    "sendCodeSuccess": "已发送，验证码为",
+    "passwordResetSuccess": "密码重置成功"
+  },
+  "register": {
+    "email": "邮箱",
+    "code": "验证码",
+    "nickname": "昵称",
+    "password": "密码",
+    "comfirmPassword": "再次输入密码",
+    "pleaseEnterEmail": "请输入邮箱",
+    "pleaseEnterCode": "请输入验证码",
+    "pleaseEnterNickname": "请输入昵称",
+    "pleaseEnterPassword": "请输入密码",
+    "pleaseEnterConfirmPassword": "请再次输入密码",
+    "passwordsDoNotMatch": "两次输入的密码不一致",
+    "confirm": "确认",
+    "backToLogin": "返回登录",
+    "getCode": "获取验证码",
+    "gettingCode": "获取中",
+    "sendCodeSuccess": "已发送，验证码为",
+    "registerSuccess": "注册成功"
+  },
+  "settings": {
+    "logout": "退出登录",
+    "currentVersion": "当前版本",
+    "comfirmTitle": "确认退出？"
   }
 }

package/src/main.ts

@@ -3,17 +3,16 @@ import bootstrap from '@af-mobile-client-vue3/bootstrap'
 import Plugins from '@af-mobile-client-vue3/plugins'
 import router from '@af-mobile-client-vue3/router'
 import pinia from '@af-mobile-client-vue3/stores'
+import { i18n } from '@af-mobile-client-vue3/utils/i18n'
 import { createHead } from '@unhead/vue/client'
 import { createApp } from 'vue'
 import 'virtual:uno.css'
 import '@af-mobile-client-vue3/styles/app.less'
-import 'vant/lib/index.css'
-import 'vant/lib/tabbar/index.css'
-import 'vant/lib/tabbar-item/index.css'
-// svg icon
-import 'virtual:svg-icons-register'
+import '@af-mobile-client-vue3/styles/var.less'
+
 // Vant 桌面端适配
 import '@vant/touch-emulator'
+
 /* --------------------------------
 Vant 中有个别组件是以函数的形式提供的，
 包括 Toast，Dialog，Notify 和 ImagePreview 组件。
@@ -30,8 +29,9 @@ import 'vant/es/image-preview/style'
   const head = createHead()
 
   app.use(head)
-  app.use(pinia)
   app.use(router)
+  app.use(pinia)
+  app.use(i18n)
   app.use(Plugins)
 
   await bootstrap(router)