Merge remote-tracking branch 'origin/main'

build/plugin/index.js

@@ -4,7 +4,7 @@ import vue from '@vitejs/plugin-vue'
  * * 扩展setup插件，支持在script标签中使用name属性
  * usage: <script setup name="MyComp"></script>
  */
-import VueSetupExtend from 'vite-plugin-vue-setup-extend'
+import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'
 
 /**
  * * unocss插件，原子css
@@ -20,7 +20,7 @@ import { configMockPlugin } from './mock'
 import unplugin from './unplugin'
 
 export function createVitePlugins(viteEnv, isBuild) {
-  const plugins = [vue(), VueSetupExtend(), ...unplugin, configHtmlPlugin(viteEnv, isBuild), Unocss()]
+  const plugins = [vue(), vueSetupExtend(), ...unplugin, configHtmlPlugin(viteEnv, isBuild), Unocss()]
 
   if (viteEnv?.VITE_APP_USE_MOCK) {
     plugins.push(configMockPlugin(isBuild))

pnpm-lock.yaml

@@ -30,7 +30,7 @@ specifiers:
   vite: ^2.9.9
   vite-plugin-html: ^3.2.0
   vite-plugin-mock: ^2.9.6
-  vite-plugin-vue-setup-extend: ^0.3.0
+  vite-plugin-vue-setup-extend-plus: ^0.1.0
   vue: ^3.2.31
   vue-router: ^4.0.15
 
@@ -68,7 +68,7 @@ devDependencies:
   vite: 2.9.9_sass@1.49.10
   vite-plugin-html: 3.2.0_vite@2.9.9
   vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.9.9
-  vite-plugin-vue-setup-extend: 0.3.0_vite@2.9.9
+  vite-plugin-vue-setup-extend-plus: 0.1.0
 
 packages:
 
@@ -2788,14 +2788,8 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-vue-setup-extend/0.3.0_vite@2.9.9:
-    resolution: {integrity: sha512-9Nd7Bj4TftB2CoOAD2ZI4cHLW5zjKMF3LNihWbrnAPx3nuGBn33tM9SVUGBVjBB6uv1mGAPavwKCTU0xAD8qhw==}
-    peerDependencies:
-      vite: '>=2.0.0'
-    dependencies:
-      '@vue/compiler-sfc': 3.2.31
-      magic-string: 0.25.9
-      vite: 2.9.9_sass@1.49.10
+  /vite-plugin-vue-setup-extend-plus/0.1.0:
+    resolution: {integrity: sha512-pa27KIsHIBvBMv4xz9uB3UCfAuP2tr7PLlFhCS9vw+aXd326LEHsvhqd3hCQDOR5MjlQVyQH6vwuGr3u+KRiiw==}
     dev: true
 
   /vite/2.9.9_sass@1.49.10:

src/store/modules/tags/helpers.js

@@ -1,7 +1,6 @@
-import { createSessionStorage } from '@/utils/cache'
+import { sStorage } from '@/utils/cache'
 
-export const tagsSS = createSessionStorage({ prefixKey: 'tag_' })
-export const activeTag = tagsSS.get('activeTag')
-export const tags = tagsSS.get('tags')
+export const activeTag = sStorage.get('activeTag')
+export const tags = sStorage.get('tags')
 
 export const WITHOUT_TAG_PATHS = ['/404', '/login', '/redirect']

src/store/modules/tags/index.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
-import { tagsSS, activeTag, tags, WITHOUT_TAG_PATHS } from './helpers'
+import { activeTag, tags, WITHOUT_TAG_PATHS } from './helpers'
 import { router } from '@/router'
+import { sStorage } from '@/utils/cache'
 
 export const useTagsStore = defineStore('tag', {
   state() {
@@ -12,11 +13,11 @@ export const useTagsStore = defineStore('tag', {
   actions: {
     setActiveTag(path) {
       this.activeTag = path
-      tagsSS.set('activeTag', path)
+      sStorage.set('activeTag', path)
     },
     setTags(tags) {
       this.tags = tags
-      tagsSS.set('tags', tags)
+      sStorage.set('tags', tags)
     },
     addTag(tag = {}) {
       this.setActiveTag(tag.path)

src/utils/cache/index.js

@@ -1,15 +1,21 @@
-import { createWebStorage } from './web-storage'
+import { createStorage } from './storage'
+
+const prefixKey = 'Vue_Naive_Admin_'
 
 export const createLocalStorage = function (option = {}) {
-  return createWebStorage({
+  return createStorage({
     prefixKey: option.prefixKey || '',
     storage: localStorage,
   })
 }
 
 export const createSessionStorage = function (option = {}) {
-  return createWebStorage({
+  return createStorage({
     prefixKey: option.prefixKey || '',
     storage: sessionStorage,
   })
 }
+
+export const lStorage = createLocalStorage({ prefixKey })
+
+export const sStorage = createSessionStorage({ prefixKey })

src/utils/cache/storage.js

@@ -1,6 +1,6 @@
 import { isNullOrUndef } from '@/utils/is'
 
-class WebStorage {
+class Storage {
   constructor(option) {
     this.storage = option.storage
     this.prefixKey = option.prefixKey
@@ -50,6 +50,6 @@ class WebStorage {
   }
 }
 
-export function createWebStorage({ prefixKey = '', storage = sessionStorage }) {
-  return new WebStorage({ prefixKey, storage })
+export function createStorage({ prefixKey = '', storage = sessionStorage }) {
+  return new Storage({ prefixKey, storage })
 }

src/utils/token.js

@@ -1,25 +1,23 @@
-import { createLocalStorage } from './cache'
+import { lStorage } from './cache'
 import { refreshToken } from '@/api/auth'
 
 const TOKEN_CODE = 'access_token'
 const DURATION = 6 * 60 * 60
 
-export const lsToken = createLocalStorage()
-
 export function getToken() {
-  return lsToken.get(TOKEN_CODE)
+  return lStorage.get(TOKEN_CODE)
 }
 
 export function setToken(token) {
-  lsToken.set(TOKEN_CODE, token, DURATION)
+  lStorage.set(TOKEN_CODE, token, DURATION)
 }
 
 export function removeToken() {
-  lsToken.remove(TOKEN_CODE)
+  lStorage.remove(TOKEN_CODE)
 }
 
 export async function refreshAccessToken() {
-  const tokenItem = lsToken.getItem(TOKEN_CODE)
+  const tokenItem = lStorage.getItem(TOKEN_CODE)
   if (!tokenItem) {
     return
   }

src/views/login/index.vue

@@ -10,28 +10,33 @@
           <icon-custom-logo mr30 text-50 />
           {{ title }}
         </h5>
-        <div mt-35 w-full max-w-360>
+        <div mt-30 w-full max-w-360>
           <n-input
             v-model:value="loginInfo.name"
             autofocus
             class="text-16 items-center h-50 pl-10"
-            placeholder="请输入用户名"
+            placeholder="admin"
             :maxlength="20"
           >
           </n-input>
         </div>
-        <div mt-35 w-full max-w-360>
+        <div mt-30 w-full max-w-360>
           <n-input
             v-model:value="loginInfo.password"
             class="text-16 items-center h-50 pl-10"
             type="password"
             show-password-on="mousedown"
-            placeholder="密码"
+            placeholder="123456"
             :maxlength="20"
             @keydown.enter="handleLogin"
           />
         </div>
-        <div mt-35 w-full max-w-360>
+
+        <div mt-20 w-full max-w-360>
+          <n-checkbox :checked="isRemember" label="记住我" :on-update:checked="(val) => (isRemember = val)" />
+        </div>
+
+        <div mt-20 w-full max-w-360>
           <n-button w-full h-50 rounded-5 text-16 type="primary" @click="handleLogin">登录</n-button>
         </div>
       </div>
@@ -41,8 +46,9 @@
 
 <script setup>
 import { login } from '@/api/auth'
-import { createLocalStorage } from '@/utils/cache'
+import { lStorage } from '@/utils/cache'
 import { setToken } from '@/utils/token'
+import { useStorage } from '@vueuse/core'
 
 const title = import.meta.env.VITE_APP_TITLE
 
@@ -50,17 +56,21 @@ const router = useRouter()
 const query = unref(router.currentRoute).query
 
 const loginInfo = ref({
-  name: 'admin',
-  password: '123456',
+  name: '',
+  password: '',
 })
 
-const ls = createLocalStorage({ prefixKey: 'login_' })
-const lsLoginInfo = ls.get('loginInfo')
-if (lsLoginInfo) {
-  loginInfo.value.name = lsLoginInfo.name || ''
-  loginInfo.value.password = lsLoginInfo.password || ''
+initLoginInfo()
+
+function initLoginInfo() {
+  const localLoginInfo = lStorage.get('loginInfo')
+  if (localLoginInfo) {
+    loginInfo.value.name = localLoginInfo.name || ''
+    loginInfo.value.password = localLoginInfo.password || ''
+  }
 }
 
+const isRemember = useStorage('isRemember', false)
 async function handleLogin() {
   const { name, password } = loginInfo.value
   if (!name || !password) {
@@ -72,9 +82,12 @@ async function handleLogin() {
     const res = await login({ name, password: password.toString() })
     if (res.code === 0) {
       $message.success('登录成功')
-      ls.set('loginInfo', { name, password })
       setToken(res.data.token)
-
+      if (isRemember.value) {
+        lStorage.set('loginInfo', { name, password })
+      } else {
+        lStorage.remove('loginInfo')
+      }
       if (query.redirect) {
         const path = query.redirect
         Reflect.deleteProperty(query, 'redirect')