1. 配置axios; 2. button添加title; 3. 修改布局

.vscode/settings.json

@@ -2,6 +2,7 @@
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": true,
   "editor.formatOnSave": true,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.codeActionsOnSave": [
     "source.fixAll.eslint"
   ],

package.json

@@ -5,6 +5,7 @@
   "productName": "leafage-ms",
   "author": "wq.li <[email protected]>",
   "private": true,
+  "type": "module",
   "scripts": {
     "lint": "eslint --ext .js,.ts,.vue ./",
     "test": "echo \"No test specified\" && exit 0",
@@ -14,15 +15,15 @@
   "dependencies": {
     "@quasar/extras": "^1.16.11",
     "axios": "^1.6.8",
+    "lottie-web": "^5.12.2",
     "pinia": "^2.1.7",
-    "quasar": "^2.15.1",
+    "quasar": "^2.16.4",
     "vue": "^3.4.21",
-    "vue-i18n": "^9.11.0",
-    "vue-router": "^4.3.0"
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
-    "@quasar/app-vite": "^1.8.0",
+    "@quasar/app-vite": "^1.9.3",
     "@types/node": "^20.12.5",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
@@ -33,8 +34,7 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.24.0",
-    "lottie-web": "^5.12.2",
-    "msw": "^2.2.13",
+    "msw": "^2.3.0",
     "postcss": "^8.4.38",
     "typescript": "^5.4.4"
   },

public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.13'
+const PACKAGE_VERSION = '2.3.0'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

quasar.config.js → quasar.config.cjs

@@ -31,7 +31,8 @@ module.exports = configure(function (ctx) {
     boot: [
       'i18n',
       'axios',
-      'msw-server'
+      'msw-server',
+      'router'
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
@@ -105,22 +106,22 @@ module.exports = configure(function (ctx) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true
-      open: true // opens browser window automatically
-      // proxy: {
-      //   '^/api': {
-      //     target: 'http://127.0.0.1:8763',
-      //     changeOrigin: true,
-      //     rewrite: (path) => path.replace(/^\/api/, '')
-      //   }
-      // }
+      open: true, // opens browser window automatically
+      proxy: {
+        '^/api': {
+          target: 'http://127.0.0.1:8763',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
+      }
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
       config: {
         dark: 'auto',
         notify: {
-          position: 'top'
+          progress: true
         }
       },
 

src/boot/axios.ts

@@ -1,56 +1,41 @@
 import { boot } from 'quasar/wrappers'
-import axios, { AxiosInstance, AxiosError } from 'axios'
+import axios, { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+import { Notify } from 'quasar'
 
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $api: AxiosInstance;
-  }
-}
+const abortControllerMap: Map<string, AbortController> = new Map()
 
-// Be careful when using SSR for cross-request state pollution
-// due to creating a Singleton instance here;
-// If any client changes this (global) instance, it might be a
-// good idea to move this instance creation inside of the
-// "export default () => {}" function below (which runs individually
-// for each client)
-const api = axios.create({ baseURL: process.env.API })
-
-export default boot(({ app }) => {
-  // for use inside Vue files (Options API) through this.$api
-
-  // 创建 AbortController 实例
-  const abortController = new AbortController()
-
-  // 获取 AbortController 的信号
-  const signal = abortController.signal
+const api: AxiosInstance = axios.create({ baseURL: process.env.API, timeout: 10000 })
 
+export default boot(() => {
   // 请求拦截器
   api.interceptors.request.use(
-    config => {
+    (config: InternalAxiosRequestConfig) => {
+      // 创建 AbortController 实例
+      const abortController = new AbortController()
       // 将 signal 添加到请求配置中
-      config.signal = signal
+      const url = config.url || ''
+      config.signal = abortController.signal
+      abortControllerMap.set(url, abortController)
       return config
     },
-    error => {
+    (error: AxiosError) => {
+      Notify.create({ type: 'negative', message: error.message })
       return Promise.reject(error)
     }
   )
 
   // 响应拦截器
   api.interceptors.response.use(
-    response => {
+    (response: AxiosResponse) => {
+      const url = response.config.url || ''
+      abortControllerMap.delete(url)
       return response
     },
     (error: AxiosError) => {
-      // 如果请求失败，取消后续请求
-      // abortController.abort()
+      Notify.create({ type: 'negative', message: error.message })
       return Promise.reject(error)
     }
   )
-
-  app.config.globalProperties.$api = api
-  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-  //       so you can easily perform requests against your app's API
 })
 
 export { api }

src/boot/i18n.ts

@@ -1,26 +1,7 @@
 import { boot } from 'quasar/wrappers'
 import { createI18n } from 'vue-i18n'
-
 import messages from 'src/i18n'
 
-export type MessageLanguages = keyof typeof messages
-// Type-define 'en-US' as the master schema for the resource
-export type MessageSchema = typeof messages['en-US']
-
-// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
-/* eslint-disable @typescript-eslint/no-empty-interface */
-declare module 'vue-i18n' {
-  // define the locale messages schema
-  export interface DefineLocaleMessage extends MessageSchema { }
-
-  // define the datetime format schema
-  export interface DefineDateTimeFormat { }
-
-  // define the number format schema
-  export interface DefineNumberFormat { }
-}
-/* eslint-enable @typescript-eslint/no-empty-interface */
-
 export default boot(({ app }) => {
   const i18n = createI18n({
     locale: 'en-US',

src/boot/router.ts

@@ -0,0 +1,22 @@
+import { boot } from 'quasar/wrappers'
+import { useUserStore } from 'stores/user-store'
+
+export default boot(({ router, store }) => {
+  router.beforeEach((to, from, next) => {
+    // Now you need to add your authentication logic here, like calling an API endpoint
+    const userStore = useUserStore(store)
+    if (userStore.getUsername) {
+      if (to.path === '/login') {
+        next('/')
+      } else {
+        next()
+      }
+    } else {
+      if (to.path === '/login') {
+        next()
+      } else {
+        next(`/login?redirect=${to.path}`)
+      }
+    }
+  })
+})

src/components/EssentialLink.vue

@@ -17,6 +17,7 @@ export interface EssentialLinkProps {
   icon?: string;
 }
 withDefaults(defineProps<EssentialLinkProps>(), {
+  title: '',
   link: '#',
   icon: ''
 })

src/i18n/en-US/index.ts

@@ -26,11 +26,10 @@ export default {
 
   no: 'NO.',
   name: 'Name',
-  alias: 'Alias',
   id: 'ID',
   superior: 'Superior',
   description: 'Description',
-  modifyTime: 'Modify Time',
+  lastModifiedDate: 'Last Modified Date',
 
   username: 'Username',
   password: 'Password',

src/i18n/zh-CN/index.ts

@@ -26,11 +26,10 @@ export default {
 
   no: '序号',
   name: '名称',
-  alias: '别名',
   id: '主键',
   superior: '上级',
   description: '描述',
-  modifyTime: '更新时间',
+  lastModifiedDate: '更新时间',
 
   username: '账号',
   password: '密码',

src/i18n/zh-TW/index.ts

@@ -26,11 +26,10 @@ export default {
 
   no: '序號',
   name: '名稱',
-  alias: '別名',
   id: '主鍵',
   superior: '上級',
   description: '描述',
-  modifyTime: '更新時間',
+  lastModifiedDate: '更新時間',
 
   username: '賬號',
   password: '密碼',

src/layouts/MainLayout.vue

@@ -3,11 +3,12 @@
     <q-header elevated>
       <q-toolbar>
         <q-toolbar-title :shrink="true">
+          <q-img alt="logo" src="/logo-only.svg" style="width: 2em; height: 2em;" />
           <span>Management System</span>
         </q-toolbar-title>
         <q-toolbar-title>
-          <q-btn id="btn-drawer" title="btn-drawer" dense flat round icon="sym_r_menu" @click="toggleLeftDrawer"
-            aria-disabled="false" />
+          <q-btn title="drawer" type="button" dense flat round icon="sym_r_menu"
+            @click="leftDrawerOpen = !leftDrawerOpen" aria-disabled="false" />
         </q-toolbar-title>
 
         <!-- <q-breadcrumbs class="q-ma-sm" active-color="white" style="font-size: 16px">
@@ -16,10 +17,7 @@
             :icon="route.meta.icon ? route.meta.icon.toString() : undefined" />
         </q-breadcrumbs> -->
 
-        <q-toggle size="sm" v-model="$q.dark.isActive" icon="sym_r_dark_mode" unchecked-icon="sym_r_light_mode"
-          :color="$q.dark.isActive ? 'black' : ''" />
-
-        <q-btn icon="sym_r_translate" round flat dense>
+        <q-btn title="language" icon="sym_r_language" round flat dense>
           <q-menu>
             <q-list dense separator>
               <q-item clickable v-close-popup :active="locale === 'en-US'" @click="locale = 'en-US'">
@@ -35,17 +33,20 @@
           </q-menu>
         </q-btn>
 
+        <q-toggle size="sm" v-model="$q.dark.isActive" icon="sym_r_dark_mode" unchecked-icon="sym_r_light_mode"
+          :color="$q.dark.isActive ? 'black' : ''" />
+
         <q-chip clickable color="primary" text-color="white">
-          <q-avatar size="sm">
-            <img alt="avatar" src="https://cdn.quasar.dev/img/avatar.png">
+          <q-avatar size="32px">
+            <img alt="avatar" src="https://cdn.quasar.dev/img/avatar.png" width="32px" height="32px">
           </q-avatar>{{ userStore.getUsername }}
           <q-menu>
             <q-list dense separator>
               <q-item clickable v-close-popup>
-                <q-item-section>Sign out</q-item-section>
+                <q-item-section>Change Password</q-item-section>
               </q-item>
-              <q-item clickable v-close-popup>
-                <q-item-section>Home</q-item-section>
+              <q-item clickable v-close-popup @click="onLogout">
+                <q-item-section>Sign Out</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -59,6 +60,7 @@
 
     <q-page-container class="overflow-hidden">
       <router-view />
+      <slot></slot>
     </q-page-container>
 
     <q-footer class="bg-transparent">
@@ -72,15 +74,25 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from 'stores/user-store'
+import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { api } from 'boot/axios'
+
 import SideBarLeft from './SideBarLeft.vue'
 
 const userStore = useUserStore()
+const { replace } = useRouter()
+const $q = useQuasar()
 
 const { locale } = useI18n({ useScope: 'global' })
 
-const leftDrawerOpen = ref(false)
+const leftDrawerOpen = ref<boolean>(false)
+
+function onLogout() {
+  api.post('/logout').then(() => {
+    userStore.clearUser()
 
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value
+    replace('/login')
+  }).catch(error => $q.notify({ type: 'negative', message: error.message }))
 }
 </script>

src/layouts/SideBarLeft.vue

@@ -1,12 +1,6 @@
 <template>
   <q-list>
     <q-list>
-      <EssentialLink v-bind="{
-        title: 'dashboard',
-        icon: 'sym_r_dashboard',
-        link: '/dashboard'
-      }" />
-
       <EssentialLink v-bind="{
         title: 'home',
         icon: 'sym_r_home',