Merge pull request #188 from little3201/vue

面包屑，路由参数补充、完善，user-store添加方法

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-2024 little3201
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

quasar.config.js

@@ -127,7 +127,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: ['Notify', 'SessionStorage']
     },
 
     // animations: 'all', // --- includes all animations

src/boot/axios.ts

@@ -1,5 +1,5 @@
 import { boot } from 'quasar/wrappers'
-import axios, { AxiosInstance } from 'axios'
+import axios, { AxiosInstance, AxiosError } from 'axios'
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
@@ -13,11 +13,41 @@ declare module '@vue/runtime-core' {
 // 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: '/api' })
+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
+
+  // 请求拦截器
+  api.interceptors.request.use(
+    config => {
+      // 将 signal 添加到请求配置中
+      config.signal = signal
+      return config
+    },
+    error => {
+      return Promise.reject(error)
+    }
+  )
+
+  // 响应拦截器
+  api.interceptors.response.use(
+    response => {
+      return response
+    },
+    (error: AxiosError) => {
+      // 如果请求失败，取消后续请求
+      abortController.abort()
+      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

src/components/EssentialLink.vue

@@ -5,7 +5,7 @@
     </q-item-section>
 
     <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label>{{ $t(title) }}</q-item-label>
     </q-item-section>
   </q-item>
 </template>

src/i18n/en-US/index.ts

@@ -81,6 +81,7 @@ export default {
   grant: 'Grants',
   members: 'memberss',
 
+  home: 'Home',
   dashboard: 'Dashboard',
   system: 'System',
   groups: 'Groups',

src/i18n/index.ts

@@ -1,9 +1,9 @@
+import enUS from './en-US'
 import zhCN from './zh-CN'
 import zhTW from './zh-TW'
-import enUS from './en-US'
 
 export default {
+  'en-US': enUS,
   'zh-CN': zhCN,
-  'zh-TW': zhTW,
-  'en-US': enUS
+  'zh-TW': zhTW
 }

src/i18n/zh-CN/index.ts

@@ -81,6 +81,7 @@ export default {
   grant: '授权',
   members: '成员',
 
+  home: '首页',
   dashboard: '控制台',
   system: '系统管理',
   groups: '分组',

src/i18n/zh-TW/index.ts

@@ -81,6 +81,7 @@ export default {
   grant: '授權',
   members: '成員',
 
+  home: '首頁',
   dashboard: '控制台',
   system: '系統管理',
   groups: '分組',

src/layouts/BlankLayout.vue

@@ -0,0 +1,3 @@
+<template>
+    <router-view />
+</template>

src/layouts/MainLayout.vue

@@ -1,29 +1,52 @@
 <template>
   <q-layout view="hHh LpR lFf">
-
     <q-header elevated>
       <q-toolbar>
-        <q-btn id="btn-drawer" title="btn-drawer" dense flat round icon="sym_r_menu" @click="toggleLeftDrawer"
-          aria-disabled="false" />
 
         <q-toolbar-title :shrink="true">
-          <q-img alt="logo" src="/logo-only.svg" style="width: 46px; height: 46px;" />
-          {{ $t('Application') }}
+          <q-img alt="logo" src="/logo-only.svg" style="width: 38px; height: 38px;" />
         </q-toolbar-title>
+        <q-toolbar-title :shrink="true">
+          <span>Management System</span>
+        </q-toolbar-title>
+        <q-btn id="btn-drawer" title="btn-drawer" dense flat round icon="sym_r_menu" @click="toggleLeftDrawer"
+          aria-disabled="false" />
 
-        <q-separator color="white" vertical inset />
-
-        <q-breadcrumbs class="text-grey q-ma-sm" active-color="white" style="font-size: 16px">
-          <q-breadcrumbs-el label="Home" icon="sym_r_home" />
-          <q-breadcrumbs-el label="Components" icon="sym_r_widgets" />
-          <q-breadcrumbs-el label="Breadcrumbs" />
+        <q-breadcrumbs class="q-ma-sm" active-color="white" style="font-size: 16px">
+          <q-breadcrumbs-el v-for="(route, index) in $route.matched" :key="index"
+            :label="$t(route.name ? route.name.toString() : '')"
+            :icon="route.meta.icon ? route.meta.icon.toString() : undefined" />
         </q-breadcrumbs>
 
         <q-space />
+
         <q-toolbar-title :shrink="true">
+          <q-btn icon="sym_r_language" round flat>
+            <q-menu>
+              <q-list dense separator>
+                <q-item clickable v-close-popup :active="locale === 'en-US'" @click="locale = 'en-US'">
+                  <q-item-section>English(US)</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup :active="locale === 'zh-CN'" @click="locale = 'zh-CN'">
+                  <q-item-section>中文（简体）</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup :active="locale === 'zh-TW'" @click="locale = 'zh-TW'">
+                  <q-item-section>中文（繁體）</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+
+          <q-toggle v-model="darkTheme" icon="sym_r_dark_mode" unchecked-icon="sym_r_light_mode"
+            :color="darkTheme ? 'black' : ''" />
+
+          <q-btn flat dense round icon="sym_r_notifications" class="q-mr-md">
+            <q-badge floating color="red" rounded style="top: 0px; right: 0px;" />
+          </q-btn>
           <q-avatar size="md">
             <img alt="avatar" src="https://cdn.quasar.dev/img/avatar.png">
           </q-avatar>
+          <span class="q-ml-sm" style="font-size: 16px;">{{ userStore.getUsername }}</span>
         </q-toolbar-title>
       </q-toolbar>
 
@@ -50,11 +73,18 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from 'stores/user-store'
 import SideBarLeft from './SideBarLeft.vue'
 
+const userStore = useUserStore()
+
+const { locale } = useI18n({ useScope: 'global' })
+const darkTheme = ref(false)
 const leftDrawerOpen = ref(false)
 
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }
 </script>
+src/stores/user-store

src/layouts/SideBarLeft.vue

@@ -2,17 +2,17 @@
   <q-list>
     <q-list>
       <EssentialLink v-bind="{
-        title: 'Dashboard',
+        title: 'dashboard',
         icon: 'sym_r_dashboard',
         link: '/dashboard'
       }" />
 
       <EssentialLink v-bind="{
-        title: 'Home',
-        icon: 'sym_r_dashboard',
+        title: 'home',
+        icon: 'sym_r_home',
         link: '/'
       }" />
-      <q-expansion-item expand-separator icon="sym_r_settings" label="System" default-opened>
+      <q-expansion-item expand-separator icon="sym_r_settings" :label="$t('system')" default-opened>
         <q-card>
           <q-card-section>
             <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
@@ -29,29 +29,29 @@ import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue'
 
 const essentialLinks: EssentialLinkProps[] = [
   {
-    title: 'User',
+    title: 'users',
     icon: 'sym_r_manage_accounts',
-    link: '/system/user'
+    link: '/system/users'
   },
   {
-    title: 'Group',
+    title: 'groups',
     icon: 'sym_r_group',
-    link: '/system/group'
+    link: '/system/groups'
   },
   {
-    title: 'Role',
+    title: 'roles',
     icon: 'sym_r_admin_panel_settings',
-    link: '/system/role'
+    link: '/system/roles'
   },
   {
-    title: 'Dictionary',
+    title: 'dictionaries',
     icon: 'sym_r_library_books',
-    link: '/system/dictionary'
+    link: '/system/dictionaries'
   },
   {
-    title: 'Region',
+    title: 'regions',
     icon: 'sym_r_public',
-    link: '/system/region'
+    link: '/system/regions'
   }
 ]
 </script>