diff --git a/package.json b/package.json
index e439193b8..4bf82eb61 100644
--- a/package.json
+++ b/package.json
@@ -27,80 +27,80 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.2.1",
-    "@vueuse/core": "^9.0.2",
+    "@vueuse/core": "^9.1.0",
     "@wangeditor/editor": "^5.1.14",
     "@wangeditor/editor-for-vue": "^5.1.10",
-    "@zxcvbn-ts/core": "^2.0.3",
+    "@zxcvbn-ts/core": "^2.0.4",
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "echarts": "^5.3.3",
     "echarts-wordcloud": "^2.0.0",
-    "element-plus": "2.2.11",
+    "element-plus": "2.2.13",
     "intro.js": "^6.0.0",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.17",
+    "pinia": "^2.0.18",
     "pinia-plugin-persist": "^1.0.0",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "url": "^0.11.0",
     "vue": "3.2.37",
-    "vue-i18n": "9.1.10",
+    "vue-i18n": "9.2.2",
     "vue-router": "^4.1.3",
-    "vue-types": "^4.2.0",
+    "vue-types": "^4.2.1",
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
-    "@iconify/json": "^2.1.85",
-    "@intlify/vite-plugin-vue-i18n": "^5.0.1",
-    "@purge-icons/generated": "^0.8.1",
+    "@iconify/json": "^2.1.91",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
+    "@purge-icons/generated": "^0.9.0",
     "@types/intro.js": "^5.1.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.6.2",
+    "@types/node": "^18.7.2",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "@vitejs/plugin-vue": "^3.0.3",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "autoprefixer": "^10.4.8",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-define-config": "^1.5.1",
+    "eslint-define-config": "^1.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.1",
     "less": "^4.1.3",
     "lint-staged": "^13.0.3",
     "plop": "^3.1.1",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.77.2",
-    "stylelint": "^14.9.1",
+    "rollup": "^2.77.3",
+    "stylelint": "^14.10.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended": "^8.0.0",
-    "stylelint-config-standard": "^26.0.0",
+    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-standard": "^27.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "4.7.4",
-    "unplugin-vue-define-options": "^0.6.2",
-    "vite": "3.0.4",
-    "vite-plugin-eslint": "^1.7.0",
+    "unplugin-vue-macros": "^0.8.3",
+    "vite": "3.0.7",
+    "vite-plugin-eslint": "^1.8.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-purge-icons": "^0.8.2",
-    "vite-plugin-style-import": "1.4.1",
+    "vite-plugin-purge-icons": "^0.9.0",
+    "vite-plugin-style-import": "2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.7",
-    "vue-tsc": "^0.39.2",
+    "vue-tsc": "^0.40.1",
     "windicss": "^3.5.6",
     "windicss-analysis": "^0.3.5"
   },
diff --git a/src/components/Footer/src/Footer.vue b/src/components/Footer/src/Footer.vue
index a2b9e94f7..e7a778d65 100644
--- a/src/components/Footer/src/Footer.vue
+++ b/src/components/Footer/src/Footer.vue
@@ -15,7 +15,7 @@ const title = computed(() => appStore.getTitle)
 <template>
   <div
     :class="prefixCls"
-    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
+    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-content-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
   >
     Copyright ©2021-present {{ title }}
   </div>
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
index 8b6e7650d..f1e0e7bd5 100644
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -41,7 +41,7 @@ export const useI18n = (
   const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
     if (!key) return ''
     if (!key.includes('.') && !namespace) return key
-    return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
+    return (t as any)(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
   }
   return {
     ...methods,
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 261a6996a..324da7ece 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-layout';
 
 .@{prefix-cls} {
-  background-color: var(--app-contnet-bg-color);
+  background-color: var(--app-content-bg-color);
   :deep(.@{elNamespace}-scrollbar__view) {
     height: 100% !important;
   }
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index 2000ca977..ace76b61c 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -22,7 +22,7 @@ const getCaches = computed((): string[] => {
 <template>
   <section
     :class="[
-      'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)] dark:bg-[var(--el-bg-color)]',
+      'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
       {
         '!min-h-[calc(100%-var(--app-footer-height))]':
           fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,
diff --git a/src/styles/var.css b/src/styles/var.css
index 23d8b6824..0d7d0df28 100644
--- a/src/styles/var.css
+++ b/src/styles/var.css
@@ -59,7 +59,7 @@
 
   --app-content-padding: 20px;
 
-  --app-contnet-bg-color: #f5f7f9;
+  --app-content-bg-color: #f5f7f9;
 
   --app-footer-height: 50px;
 
diff --git a/tsconfig.json b/tsconfig.json
index 524e4ed61..492e9f0b8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,7 +30,7 @@
       "@types/intro.js",
       "@types/qrcode",
       "vite-plugin-svg-icons/client",
-      "unplugin-vue-define-options"
+      "unplugin-vue-macros/macros-global"
     ],
     "typeRoots": ["./node_modules/@types/", "./types"]
   },
diff --git a/vite.config.ts b/vite.config.ts
index c41b5be46..50a6af031 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,12 +6,12 @@ import WindiCSS from 'vite-plugin-windicss'
 import VueJsx from '@vitejs/plugin-vue-jsx'
 import EslintPlugin from 'vite-plugin-eslint'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
-import styleImport, { ElementPlusResolve } from 'vite-plugin-style-import'
+import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import { viteMockServe } from 'vite-plugin-mock'
-import DefineOptions from 'unplugin-vue-define-options/vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
+import VueMarcos from 'unplugin-vue-macros/vite'
 
 // https://vitejs.dev/config/
 const root = process.cwd()
@@ -34,7 +34,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       Vue(),
       VueJsx(),
       WindiCSS(),
-      styleImport({
+      createStyleImportPlugin({
         resolves: [ElementPlusResolve()],
         libs: [{
           libraryName: 'element-plus',
@@ -70,7 +70,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           setupProdMockServer()
           `
       }),
-      DefineOptions(),
+      VueMarcos(),
       createHtmlPlugin({
         inject: {
           data: {