更新 依赖更新最新版本

修改 vite.config.js __VERSION__更名为__NEXT_VERSION__
修改 wartermark 更名为 watermark
修复 一键恢复默认和更新升级操作会退出当前会话到登录界面的问题
优化 /src/utils/storage 下 key 编写成 ${__NEXT_NAME__}:${key}，防止部署多套系统到同一域名不同目录时，变量共用的问题（__NEXT_NAME__为 package.json 中的 name）

package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin.ui.plus",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "vue3 vite admin plus",
   "author": "",
   "license": "MIT",

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <el-config-provider :size="getGlobalComponentSize" :locale="getGlobalI18n">
-    <router-view v-show="themeConfig.lockScreenTime > 1" />
+    <router-view v-show="getLockScreen" />
     <LockScreen v-if="themeConfig.isLockScreen" />
-    <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
+    <Setings ref="setingsRef" v-show="getLockScreen" />
     <CloseFull v-if="!themeConfig.isLockScreen" />
     <Upgrade v-if="getVersion" />
   </el-config-provider>
@@ -34,12 +34,18 @@ const stores = useTagsViewRoutes()
 const storesThemeConfig = useThemeConfig()
 const { themeConfig } = storeToRefs(storesThemeConfig)
 
+// 设置锁屏时组件显示隐藏
+const getLockScreen = computed(() => {
+  // 防止锁屏后，刷新出现不相关界面
+  return themeConfig.value.isLockScreen ? themeConfig.value.lockScreenTime > 1 : themeConfig.value.lockScreenTime >= 0
+})
+
 // 获取版本号
 const getVersion = computed(() => {
   let isVersion = false
   if (route.path !== '/login') {
     // @ts-ignore
-    const currentVersion = __VERSION__
+    const currentVersion = __NEXT_VERSION__
     const lastVersion = Local.get('version')
     if (!lastVersion) {
       Local.set('version', currentVersion)

src/i18n/lang/en.ts

@@ -164,8 +164,8 @@ export default {
     fourIsGrayscale: 'Grey model',
     fourIsInvert: 'Color weak mode',
     fourIsDark: 'Dark Mode',
-    fourIsWartermark: 'Turn on watermark',
-    fourWartermarkText: 'Watermark copy',
+    fourIsWatermark: 'Turn on watermark',
+    fourWatermarkText: 'Watermark copy',
     fiveTitle: 'Other settings',
     fiveTagsStyle: 'Tagsview style',
     fiveAnimation: 'page animation',

src/i18n/lang/zh-cn.ts

@@ -164,8 +164,8 @@ export default {
     fourIsGrayscale: '灰色模式',
     fourIsInvert: '色弱模式',
     fourIsDark: '深色模式',
-    fourIsWartermark: '开启水印',
-    fourWartermarkText: '水印文案',
+    fourIsWatermark: '开启水印',
+    fourWatermarkText: '水印文案',
     fiveTitle: '其它设置',
     fiveTagsStyle: '标签页风格',
     fiveAnimation: '主页面切换动画',

src/i18n/lang/zh-tw.ts

@@ -164,8 +164,8 @@ export default {
     fourIsGrayscale: '灰色模式',
     fourIsInvert: '色弱模式',
     fourIsDark: '深色模式',
-    fourIsWartermark: '開啟浮水印',
-    fourWartermarkText: '浮水印文案',
+    fourIsWatermark: '開啟浮水印',
+    fourWatermarkText: '浮水印文案',
     fiveTitle: '其它設定',
     fiveTagsStyle: 'Tagsview 風格',
     fiveAnimation: '主頁面切換動畫',

src/layout/component/columnsAside.vue

@@ -84,6 +84,7 @@ const setShowLogo = computed(() => {
 
 // 设置菜单高亮位置移动
 const setColumnsAsideMove = (k: number) => {
+  if (k === undefined) return false
   state.liIndex = k
   columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`
 }
@@ -208,7 +209,8 @@ watch(
   background: var(--next-bg-columnsMenuBar);
   ul {
     position: relative;
-    .layout-columns-active {
+    .layout-columns-active,
+    .layout-columns-active a {
       color: var(--next-color-columnsMenuBarActiveColor) !important;
       transition: 0.3s ease-in-out;
     }

src/layout/navBars/breadcrumb/setings.vue

@@ -302,15 +302,15 @@
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
-          <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsWartermark') }}</div>
+          <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsWatermark') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isWartermark" size="small" @change="onWartermarkChange"></el-switch>
+            <el-switch v-model="getThemeConfig.isWatermark" size="small" @change="onWatermarkChange"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt14">
-          <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourWartermarkText') }}</div>
+          <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourWatermarkText') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input v-model="getThemeConfig.wartermarkText" size="default" style="width: 90px" @input="onWartermarkTextInput"></el-input>
+            <el-input v-model="getThemeConfig.watermarkText" size="default" style="width: 90px" @input="onWatermarkTextInput"></el-input>
           </div>
         </div>
 
@@ -472,11 +472,12 @@ import { storeToRefs } from 'pinia'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import { useChangeColor } from '/@/utils/theme'
 import { verifyAndSpace } from '/@/utils/toolsValidate'
-import { Local, Session } from '/@/utils/storage'
-import Watermark from '/@/utils/wartermark'
+import { Local } from '/@/utils/storage'
+import Watermark from '/@/utils/watermark'
 import commonFunction from '/@/utils/commonFunction'
 import other from '/@/utils/other'
 import mittBus from '/@/utils/mitt'
+import { getToken, setToken } from '/@/api/admin/http-client'
 
 // 定义变量内容
 // 预定义主要颜色
@@ -668,15 +669,15 @@ const onAddDarkChange = () => {
   else body.setAttribute('data-theme', '')
 }
 // 4、界面显示 --> 开启水印
-const onWartermarkChange = () => {
-  getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del()
+const onWatermarkChange = () => {
+  getThemeConfig.value.isWatermark ? Watermark.set(getThemeConfig.value.watermarkText) : Watermark.del()
   setLocalThemeConfig()
 }
 // 4、界面显示 --> 水印文案
-const onWartermarkTextInput = (val: string) => {
-  getThemeConfig.value.wartermarkText = verifyAndSpace(val)
-  if (getThemeConfig.value.wartermarkText === '') return false
-  if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText)
+const onWatermarkTextInput = (val: string) => {
+  getThemeConfig.value.watermarkText = verifyAndSpace(val)
+  if (getThemeConfig.value.watermarkText === '') return false
+  if (getThemeConfig.value.isWatermark) Watermark.set(getThemeConfig.value.watermarkText)
   setLocalThemeConfig()
 }
 // 5、布局切换
@@ -734,11 +735,12 @@ const onCopyConfigClick = () => {
 }
 // 一键恢复默认
 const onResetConfigClick = () => {
+  const token = getToken()
   Local.clear()
-  Session.clear()
+  setToken(token)
   window.location.reload()
   // @ts-ignore
-  Local.set('version', __VERSION__)
+  Local.set('version', __NEXT_VERSION__)
 }
 // 初始化菜单样式等
 const initSetStyle = () => {
@@ -771,7 +773,7 @@ onMounted(() => {
       // 深色模式
       if (getThemeConfig.value.isIsDark) onAddDarkChange()
       // 开启水印
-      onWartermarkChange()
+      onWatermarkChange()
       // 语言国际化
       if (Local.get('themeConfig')) locale.value = Local.get('themeConfig').globalI18n
       // 初始化菜单样式等

src/layout/upgrade/index.vue

@@ -36,7 +36,8 @@ import { reactive, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import { useThemeConfig } from '/@/stores/themeConfig'
-import { Local, Session } from '/@/utils/storage'
+import { Local } from '/@/utils/storage'
+import { getToken, setToken } from '/@/api/admin/http-client'
 
 // 定义变量内容
 const { t } = useI18n()
@@ -45,7 +46,7 @@ const { themeConfig } = storeToRefs(storesThemeConfig)
 const state = reactive({
   isUpgrade: false,
   // @ts-ignore
-  version: __VERSION__,
+  version: __NEXT_VERSION__,
   isLoading: false,
   btnTxt: '',
 })
@@ -63,8 +64,9 @@ const onUpgrade = () => {
   state.isLoading = true
   state.btnTxt = t('message.upgrade.btnTwoLoading')
   setTimeout(() => {
+    const token = getToken()
     Local.clear()
-    Session.clear()
+    setToken(token)
     window.location.reload()
     Local.set('version', state.version)
   }, 2000)

src/stores/themeConfig.ts

@@ -70,7 +70,7 @@ export const useThemeConfig = defineStore('themeConfig', {
       // 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
       isFixedHeaderChange: false,
       // 是否开启经典布局分割菜单（仅经典布局生效）
-      isClassicSplitMenu: false,
+      isClassicSplitMenu: true,
       // 是否开启自动锁屏
       isLockScreen: false,
       // 开启自动锁屏倒计时(s/秒)
@@ -104,9 +104,9 @@ export const useThemeConfig = defineStore('themeConfig', {
       // 是否开启色弱模式
       isInvert: false,
       // 是否开启水印
-      isWartermark: false,
+      isWatermark: false,
       // 水印文案
-      wartermarkText: '中台Admin',
+      watermarkText: '中台Admin',
 
       /**
        * 其它设置
@@ -127,7 +127,7 @@ export const useThemeConfig = defineStore('themeConfig', {
        * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
        */
       // 布局切换：可选值"<默认 defaults | 经典 classic | 横向 transverse | 分栏 columns>"，默认 defaults
-      layout: 'columns',
+      layout: 'classic',
 
       /**
        * 后端控制路由

src/types/pinia.d.ts

@@ -75,8 +75,8 @@ declare interface ThemeConfigState {
     isGrayscale: boolean
     isInvert: boolean
     isIsDark: boolean
-    isWartermark: boolean
-    wartermarkText: string
+    isWatermark: boolean
+    watermarkText: string
     tagsStyle: string
     animation: string
     columnsAsideStyle: string

src/utils/other.ts

@@ -53,8 +53,10 @@ export function useTitle() {
 export function setTagsViewNameI18n(item: any) {
   let tagsViewName: string = ''
   const { query, params, meta } = item
+  // 修复tagsViewName匹配到其他含下列单词的路由
+  const pattern = /^\{("(zh-cn|en|zh-tw)":"[^,]+",?){1,3}}$/
   if (query?.tagsViewName || params?.tagsViewName) {
-    if (/\/zh-cn|en|zh-tw\//.test(query?.tagsViewName) || /\/zh-cn|en|zh-tw\//.test(params?.tagsViewName)) {
+    if (pattern.test(query?.tagsViewName) || pattern.test(params?.tagsViewName)) {
       // 国际化
       const urlTagsParams = (query?.tagsViewName && JSON.parse(query?.tagsViewName)) || (params?.tagsViewName && JSON.parse(params?.tagsViewName))
       tagsViewName = urlTagsParams[i18n.global.locale.value]

src/utils/storage.ts

@@ -8,18 +8,22 @@ import Cookies from 'js-cookie'
  * @method clear 移除全部永久缓存
  */
 export const Local = {
+  getKey(key: string) {
+    // @ts-ignore
+    return `${__NEXT_NAME__}:${key}`
+  },
   // 设置永久缓存
   set(key: string, val: any) {
-    window.localStorage.setItem(key, JSON.stringify(val))
+    window.localStorage.setItem(Local.getKey(key), JSON.stringify(val))
   },
   // 获取永久缓存
   get(key: string) {
-    let json = <string>window.localStorage.getItem(key)
+    let json = <string>window.localStorage.getItem(Local.getKey(key))
     return JSON.parse(json)
   },
   // 移除永久缓存
   remove(key: string) {
-    window.localStorage.removeItem(key)
+    window.localStorage.removeItem(Local.getKey(key))
   },
   // 移除全部永久缓存
   clear() {
@@ -38,18 +42,18 @@ export const Session = {
   // 设置临时缓存
   set(key: string, val: any) {
     if (key === 'token') return Cookies.set(key, val)
-    window.sessionStorage.setItem(key, JSON.stringify(val))
+    window.sessionStorage.setItem(Local.getKey(key), JSON.stringify(val))
   },
   // 获取临时缓存
   get(key: string) {
     if (key === 'token') return Cookies.get(key)
-    let json = <string>window.sessionStorage.getItem(key)
+    let json = <string>window.sessionStorage.getItem(Local.getKey(key))
     return JSON.parse(json)
   },
   // 移除临时缓存
   remove(key: string) {
     if (key === 'token') return Cookies.remove(key)
-    window.sessionStorage.removeItem(key)
+    window.sessionStorage.removeItem(Local.getKey(key))
   },
   // 移除全部临时缓存
   clear() {

src/views/example/pages/filtering/index.vue

@@ -8,21 +8,12 @@
       element-loading-background="rgba(255, 255, 255, 0.1)"
       :class="{ 'min-h-360': state.tableData.data.length <= 0 }"
     >
-      <div
-        v-for="(val, key) in filtering"
-        :key="key"
-        :ref="
-          (el) => {
-            if (el) dlRefs[key] = el
-          }
-        "
-        class="filtering-list-flex"
-      >
+      <div v-for="(val, key) in state.filtering" :key="key" ref="dlRefs" class="filtering-list-flex">
         <div class="filtering-list-title">{{ val.title }}</div>
         <div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
-          <span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">{{
-            v.label
-          }}</span>
+          <span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">
+            {{ v.label }}
+          </span>
           <div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
             <span>{{ val.isMore ? '收起' : '展开' }}</span>
             <i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
@@ -84,7 +75,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="example/pagesFiltering">
+<script setup lang="ts" name="pagesFiltering">
 import { ref, reactive, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { filtering, filterList } from './mock'

src/views/example/pages/listAdapt/index.vue

@@ -73,7 +73,7 @@ const state = reactive({
 // 当前列表项点击
 const onTableItemClick = (v: FilterListType) => {
   router.push({
-    path: '/example/pages/filteringDetails',
+    path: '/example/pages/filtering/details',
     query: { id: v.id },
   })
 }

vite.config.ts

@@ -33,7 +33,7 @@ const viteConfig = defineConfig(({ mode, command }: ConfigEnv) => {
     },
     server: {
       host: '0.0.0.0',
-      port: env.VITE_PORT as unknown as number,
+      port: env.VITE_PORT,
       open: env.VITE_OPEN,
       proxy: {
         '/gitee': {
@@ -66,7 +66,8 @@ const viteConfig = defineConfig(({ mode, command }: ConfigEnv) => {
       __VUE_I18N_LEGACY_API__: JSON.stringify(false),
       __VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
       __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
-      __VERSION__: JSON.stringify(process.env.npm_package_version),
+      __NEXT_VERSION__: JSON.stringify(process.env.npm_package_version),
+      __NEXT_NAME__: JSON.stringify(process.env.npm_package_name),
     },
   }
 })