chore: improve env

Author: qmhc

.env

@@ -1,5 +1,38 @@
-VITE_APP_TITLE = Vexip Admin
+# The base path of application.
+BASE_PATH = /
 
-VITE_BASE_LANGUAGE = zh-CN
+# Should drop `console.log` and `debugger` when building.
+DROP_CONSOLE = false
 
-VITE_SUPPORT_DARK_MODE = true
+# The title of application.
+PUBLIC_APP_TITLE = Vexip Admin
+
+# Specify the base language of application.
+PUBLIC_BASE_LANGUAGE = zh-CN
+
+# Whether to support dark mode.
+PUBLIC_SUPPORT_DARK_MODE = true
+
+# Whether to use mock data.
+PUBLIC_USE_MOCK = false
+
+# The api server address.
+PUBLIC_API_SERVER = /
+
+# The base path of api server.
+PUBLIC_API_BASE_PATH = /api
+
+# The resource server address.
+PUBLIC_RESOURCE_SERVER = /
+
+# The base path of resource server.
+PUBLIC_RESOURCE_BASE_PATH = /resource
+
+# Specify oauth log in address if needed.
+PUBLIC_OAUTH_LOGIN_URL =
+
+# Whether to use settings drawer.
+PUBLIC_USE_SETTINGS_DRAWER = true
+
+# Whether to use nav tab.
+PUBLIC_USE_NAV_TAB = true

.env.development

@@ -1,9 +1,5 @@
-VITE_USE_MOCK = true
+PUBLIC_USE_MOCK = true
 
-VITE_BASE_PATH = /
+PUBLIC_BASE_SERVER = http://127.0.0.1
 
-VITE_DROP_CONSOLE = false
-
-VITE_BASE_SERVER = http://127.0.0.1
-
-VITE_RESOURCE_SERVER = http://127.0.0.1
+PUBLIC_RESOURCE_SERVER = http://127.0.0.1

.env.production

@@ -1,5 +1,3 @@
-VITE_USE_MOCK = true
+PUBLIC_USE_MOCK = true
 
-VITE_BASE_PATH = /
-
-VITE_DROP_CONSOLE = true
+PUBLIC_DROP_CONSOLE = true

.eslintrc.cjs

@@ -1,4 +1,6 @@
-module.exports = {
+const { defineConfig } = require('eslint-define-config');
+
+module.exports = defineConfig({
   extends: ['@vexip-ui/eslint-config'],
   root: true
-}
+})

package.json

@@ -16,7 +16,8 @@
     "precommit": "lint-staged -c ./.husky/.lintstagedrc -q --allow-empty",
     "prepare": "is-ci || husky install",
     "prettier": "prettier --write \"**/*.{js,cjs,mjs,ts,json,css,scss,vue,html,md}\"",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "schema2ts": "json2ts -i src/config/schema/app-settings.schema.json -o types/schema.d.ts --style.singleQuote --no-style.semi"
   },
   "dependencies": {
     "@vexip-ui/hooks": "^2.7.0",
@@ -55,10 +56,12 @@
     "@vue/runtime-core": "^3.5.13",
     "dotenv": "^16.4.7",
     "eslint": "^8.57.0",
+    "eslint-define-config": "^2.1.0",
     "fast-glob": "^3.3.3",
     "fs-extra": "^11.2.0",
     "husky": "^9.1.7",
     "is-ci": "^4.1.0",
+    "json-schema-to-typescript": "^15.0.4",
     "kolorist": "^1.8.0",
     "lint-staged": "^15.3.0",
     "minimist": "^1.2.8",

pnpm-lock.yaml

@@ -1,6 +1,4 @@
-window.GLOBAL_CONFIG = {
-  serverUrls: {
-    base: '/api',
-    resource: '/resource'
-  }
-}
+/**
+ * @type {import('../types/global').GlobalConfig}
+ */
+window.GLOBAL_CONFIG = {}

public/global-config.js

@@ -4,7 +4,7 @@ import { isClient } from '@vexip-ui/utils'
 const route = useRoute()
 const { locale, t } = useI18n()
 
-const baseTitle = import.meta.env.VITE_APP_TITLE || ''
+const baseTitle = import.meta.env.PUBLIC_APP_TITLE || ''
 
 watch([() => route.fullPath, () => locale.value], () => {
   if (!isClient) return

src/app.vue

@@ -8,7 +8,7 @@ import RightMessage from './header-right/right-message.vue'
 import RightSearch from './header-right/right-search.vue'
 import ThemeSwitch from './header-right/theme-switch.vue'
 
-import type { LayoutHeaderAction } from 'vexip-ui'
+import type { LayoutExposed, LayoutHeaderAction } from 'vexip-ui'
 
 const { t } = useI18n()
 
@@ -19,6 +19,8 @@ const accessStore = useAccessStore()
 const userStore = useUserStore()
 const navTabStore = useNavTabStore()
 
+const layoutRef = useTemplateRef<LayoutExposed>('layout')
+
 const activeTab = ref('')
 const activeMenu = ref('')
 
@@ -69,6 +71,9 @@ watch(
   },
   { immediate: true }
 )
+watch(activeMenu, value => {
+  layoutRef.value?.expandMenuByLabel(value)
+})
 
 function handleMenuSelect(label: string) {
   router.push(label)
@@ -178,6 +183,7 @@ async function handleSignOut() {
 
 <template>
   <VLayout
+    ref="layout"
     class="vp-layout"
     logo="https://www.vexipui.com/vexip-ui.svg"
     sign-name="Vexip Admin"
@@ -343,7 +349,9 @@ async function handleSignOut() {
 .fade-move {
   &-leave-active,
   &-enter-active {
-    transition: opacity 250ms, transform 250ms;
+    transition:
+      opacity 250ms,
+      transform 250ms;
   }
 
   &-enter-from {

src/layouts/view/view-layout.vue

@@ -6,7 +6,7 @@ import type { LocaleOptions } from 'vexip-ui'
 import type { LanguageConfig } from './types'
 import type { LanguageType } from './helper'
 
-const baseLanguage = import.meta.env.VITE_BASE_LANGUAGE
+const baseLanguage = import.meta.env.PUBLIC_BASE_LANGUAGE
 const localLanguage = typeof navigator !== 'undefined' ? navigator.language : undefined
 
 export const defaultLanguage = localLanguage