Browse Source

添加登录健权及登录页面隐藏内容

yangg 1 year ago
parent
commit
1252250b9c

+ 1 - 1
.env

@@ -1 +1 @@
-VITE_API_URL=http://192.168.8.107:9999
+VITE_API_URL=http://192.168.8.101:8080

+ 1 - 1
.env.development

@@ -1 +1 @@
-VITE_API_URL=http://192.168.8.107:9999
+VITE_API_URL=http://192.168.8.101:9999

+ 3 - 8
src/App.vue

@@ -1,14 +1,9 @@
 <template>
 <template>
     <div
     <div
         class="main-section antialiased relative font-nunito text-sm font-normal "
         class="main-section antialiased relative font-nunito text-sm font-normal "
-        :class="[store.sidebar ? 'toggle-sidebar' : '', store.menu, store.layout, store.rtlClass]"
+        :class="[store.state.sidebar ? 'toggle-sidebar' : '', store.state.menu, store.state.layout, store.state.rtlClass]"
     >
     >
         <component v-bind:is="mainLayout"></component>
         <component v-bind:is="mainLayout"></component>
-        <div class="relative inline-flex align-middle fixed-bottom button-group">
-<!--   <button type="button" @click="godashbord" class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">Left</button>
-  <button type="button" @click="golist" class="btn btn-dark rounded-none">Middle</button>
-  <button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">Right</button> -->
-</div>
     </div>
     </div>
 </template>
 </template>
 
 
@@ -22,7 +17,7 @@
     import { useMeta } from '@/composables/use-meta';
     import { useMeta } from '@/composables/use-meta';
     import router from '@/router';
     import router from '@/router';
 
 
-    const store:any = useStore();
+    const store = useStore();
 
 
    const godashbord=()=>{
    const godashbord=()=>{
         router.push(({path:'/apps/applist'}))
         router.push(({path:'/apps/applist'}))
@@ -35,7 +30,7 @@
     useMeta({ title: 'Sales Admin' });
     useMeta({ title: 'Sales Admin' });
 
 
     const mainLayout = computed(() => {
     const mainLayout = computed(() => {
-        return store.mainLayout === 'auth' ? authLayout : appLayout;
+        return store.state.mainLayout === 'auth' ? authLayout : appLayout;
     });
     });
 </script>
 </script>
 <style>
 <style>

+ 2 - 2
src/api/common.js

@@ -13,7 +13,7 @@ import Storage from '@/utils/storage'
  * @returns {string}
  * @returns {string}
  */
  */
 export function getValidateCodeUrl(scene, uuid) {//${api.admin}
 export function getValidateCodeUrl(scene, uuid) {//${api.admin}
-  return `http://192.168.8.101:9998/captchas/${uuid}/${scene}?rmd=${new Date().getTime()}`
+  return `${import.meta.env.VITE_API_URL}/captchas/${uuid}/${scene}?rmd=${new Date().getTime()}`
 }
 }
 
 
 /**
 /**
@@ -21,7 +21,7 @@ export function getValidateCodeUrl(scene, uuid) {//${api.admin}
  */
  */
 export function getValidator() {//${api.admin}
 export function getValidator() {//${api.admin}
   return request({
   return request({
-    url: `http://192.168.8.101:9998/validator`,
+    url: `${import.meta.env.VITE_API_URL}/validator`,
     method: 'GET',
     method: 'GET',
     needToken: false
     needToken: false
   })
   })

+ 86 - 116
src/components/ThemeCustomizer.vue

@@ -1,69 +1,49 @@
 <template>
 <template>
     <div>
     <div>
-        <div
-            class="fixed inset-0 bg-[black]/60 z-[51] px-4 hidden transition-[display]"
-            :class="{ '!block': showCustomizer }"
-            @click="showCustomizer = false"
-        ></div>
+        <div class="fixed inset-0 bg-[black]/60 z-[51] px-4 hidden transition-[display]"
+            :class="{ '!block': showCustomizer }" @click="showCustomizer = false"></div>
 
 
-        <nav
-            class="bg-white fixed ltr:-right-[400px] rtl:-left-[400px] top-0 bottom-0 w-full max-w-[400px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-[right] duration-300 z-[51] dark:bg-[#0e1726] p-4"
-            :class="{ 'ltr:!right-0 rtl:!left-0': showCustomizer }"
-        >
-            <a
-                href="javascript:;"
+        <nav class="bg-white fixed ltr:-right-[400px] rtl:-left-[400px] top-0 bottom-0 w-full max-w-[400px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-[right] duration-300 z-[51] dark:bg-[#0e1726] p-4"
+            :class="{ 'ltr:!right-0 rtl:!left-0': showCustomizer }">
+            <a href="javascript:;"
                 class="bg-primary ltr:rounded-tl-full rtl:rounded-tr-full ltr:rounded-bl-full rtl:rounded-br-full absolute ltr:-left-12 rtl:-right-12 top-0 bottom-0 my-auto w-12 h-10 flex justify-center items-center text-white cursor-pointer"
                 class="bg-primary ltr:rounded-tl-full rtl:rounded-tr-full ltr:rounded-bl-full rtl:rounded-br-full absolute ltr:-left-12 rtl:-right-12 top-0 bottom-0 my-auto w-12 h-10 flex justify-center items-center text-white cursor-pointer"
-                @click="showCustomizer = !showCustomizer"
-            >
+                @click="showCustomizer = !showCustomizer">
                 <icon-settings class="animate-[spin_3s_linear_infinite] w-5 h-5" />
                 <icon-settings class="animate-[spin_3s_linear_infinite] w-5 h-5" />
             </a>
             </a>
-            <perfect-scrollbar
-                :options="{
-                    swipeEasing: true,
-                    wheelPropagation: false,
-                }"
-                class="relative h-full overflow-x-hidden ltr:pr-3 rtl:pl-3 ltr:-mr-3 rtl:-ml-3"
-            >
+            <perfect-scrollbar :options="{
+                swipeEasing: true,
+                wheelPropagation: false,
+            }" class="relative h-full overflow-x-hidden ltr:pr-3 rtl:pl-3 ltr:-mr-3 rtl:-ml-3">
                 <div>
                 <div>
                     <div class="text-center relative pb-5">
                     <div class="text-center relative pb-5">
-                        <a
-                            href="javascript:;"
+                        <a href="javascript:;"
                             class="absolute top-0 ltr:right-0 rtl:left-0 opacity-30 hover:opacity-100 dark:text-white"
                             class="absolute top-0 ltr:right-0 rtl:left-0 opacity-30 hover:opacity-100 dark:text-white"
-                            @click="showCustomizer = false"
-                        >
+                            @click="showCustomizer = false">
                             <icon-x class="w-5 h-5" />
                             <icon-x class="w-5 h-5" />
                         </a>
                         </a>
                         <h4 class="mb-1 dark:text-white">TEMPLATE CUSTOMIZER</h4>
                         <h4 class="mb-1 dark:text-white">TEMPLATE CUSTOMIZER</h4>
-                        <p class="text-white-dark">Set preferences that will be cookied for your live preview demonstration.</p>
+                        <p class="text-white-dark">Set preferences that will be cookied for your live preview
+                            demonstration.</p>
                     </div>
                     </div>
                     <div class="border border-dashed border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md mb-3 p-3">
                     <div class="border border-dashed border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md mb-3 p-3">
                         <h5 class="mb-1 text-base dark:text-white leading-none">Color Scheme</h5>
                         <h5 class="mb-1 text-base dark:text-white leading-none">Color Scheme</h5>
                         <p class="text-white-dark text-xs">Overall light or dark presentation.</p>
                         <p class="text-white-dark text-xs">Overall light or dark presentation.</p>
                         <div class="grid grid-cols-3 gap-2 mt-3">
                         <div class="grid grid-cols-3 gap-2 mt-3">
-                            <button
-                                type="button"
-                                class="btn"
-                                :class="[store.theme === 'light' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleTheme('light')"
-                            >
+                            <button type="button" class="btn"
+                                :class="[store.state.theme === 'light' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleTheme('light')">
                                 <icon-sun class="w-5 h-5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                 <icon-sun class="w-5 h-5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                 Light
                                 Light
                             </button>
                             </button>
-                            <button
-                                type="button"
-                                class="btn"
-                                :class="[store.theme === 'dark' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleTheme('dark')"
-                            >
+                            <button type="button" class="btn"
+                                :class="[store.state.theme === 'dark' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleTheme('dark')">
                                 <icon-moon class="w-5 h-5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                 <icon-moon class="w-5 h-5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                 Dark
                                 Dark
                             </button>
                             </button>
-                            <button
-                                type="button"
-                                class="btn"
-                                :class="[store.theme === 'system' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleTheme('system')"
-                            >
+                            <button type="button" class="btn"
+                                :class="[store.state.theme === 'system' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleTheme('system')">
                                 <icon-laptop class="w-5 h-5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                 <icon-laptop class="w-5 h-5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                 System
                                 System
                             </button>
                             </button>
@@ -74,34 +54,26 @@
                         <h5 class="mb-1 text-base dark:text-white leading-none">Navigation Position</h5>
                         <h5 class="mb-1 text-base dark:text-white leading-none">Navigation Position</h5>
                         <p class="text-white-dark text-xs">Select the primary navigation paradigm for your app.</p>
                         <p class="text-white-dark text-xs">Select the primary navigation paradigm for your app.</p>
                         <div class="grid grid-cols-3 gap-2 mt-3">
                         <div class="grid grid-cols-3 gap-2 mt-3">
-                            <button
-                                type="button"
-                                class="btn"
-                                :class="[store.menu === 'horizontal' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleMenu('horizontal')"
-                            >
+                            <button type="button" class="btn"
+                                :class="[store.state.menu === 'horizontal' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleMenu('horizontal')">
                                 Horizontal
                                 Horizontal
                             </button>
                             </button>
-                            <button
-                                type="button"
-                                class="btn"
-                                :class="[store.menu === 'vertical' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleMenu('vertical')"
-                            >
+                            <button type="button" class="btn"
+                                :class="[store.state.menu === 'vertical' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleMenu('vertical')">
                                 Vertical
                                 Vertical
                             </button>
                             </button>
-                            <button
-                                type="button"
-                                class="btn"
-                                :class="[store.menu === 'collapsible-vertical' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleMenu('collapsible-vertical')"
-                            >
+                            <button type="button" class="btn"
+                                :class="[store.state.menu === 'collapsible-vertical' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleMenu('collapsible-vertical')">
                                 Collapsible
                                 Collapsible
                             </button>
                             </button>
                         </div>
                         </div>
                         <div class="mt-5 text-primary">
                         <div class="mt-5 text-primary">
                             <label class="inline-flex mb-0">
                             <label class="inline-flex mb-0">
-                                <input v-model="store.semidark" type="checkbox" class="form-checkbox" @change="store.toggleSemidark(store.semidark)" />
+                                <input v-model="store.state.semidark" type="checkbox" class="form-checkbox"
+                                    @change="toggleSemidark(store.state.semidark)" />
                                 <span>Semi Dark (Sidebar & Header)</span>
                                 <span>Semi Dark (Sidebar & Header)</span>
                             </label>
                             </label>
                         </div>
                         </div>
@@ -110,20 +82,14 @@
                         <h5 class="mb-1 text-base dark:text-white leading-none">Layout Style</h5>
                         <h5 class="mb-1 text-base dark:text-white leading-none">Layout Style</h5>
                         <p class="text-white-dark text-xs">Select the primary layout style for your app.</p>
                         <p class="text-white-dark text-xs">Select the primary layout style for your app.</p>
                         <div class="flex gap-2 mt-3">
                         <div class="flex gap-2 mt-3">
-                            <button
-                                type="button"
-                                class="btn flex-auto"
-                                :class="[store.layout === 'boxed-layout' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleLayout('boxed-layout')"
-                            >
+                            <button type="button" class="btn flex-auto"
+                                :class="[store.state.layout === 'boxed-layout' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleLayout('boxed-layout')">
                                 Box
                                 Box
                             </button>
                             </button>
-                            <button
-                                type="button"
-                                class="btn flex-auto"
-                                :class="[store.layout === 'full' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleLayout('full')"
-                            >
+                            <button type="button" class="btn flex-auto"
+                                :class="[store.state.layout === 'full' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleLayout('full')">
                                 Full
                                 Full
                             </button>
                             </button>
                         </div>
                         </div>
@@ -132,20 +98,14 @@
                         <h5 class="mb-1 text-base dark:text-white leading-none">Direction</h5>
                         <h5 class="mb-1 text-base dark:text-white leading-none">Direction</h5>
                         <p class="text-white-dark text-xs">Select the direction for your app.</p>
                         <p class="text-white-dark text-xs">Select the direction for your app.</p>
                         <div class="flex gap-2 mt-3">
                         <div class="flex gap-2 mt-3">
-                            <button
-                                type="button"
-                                class="btn flex-auto"
-                                :class="[store.rtlClass === 'ltr' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleRTL('ltr')"
-                            >
+                            <button type="button" class="btn flex-auto"
+                                :class="[store.state.rtlClass === 'ltr' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleRTL('ltr')">
                                 LTR
                                 LTR
                             </button>
                             </button>
-                            <button
-                                type="button"
-                                class="btn flex-auto"
-                                :class="[store.rtlClass === 'rtl' ? 'btn-primary' : 'btn-outline-primary']"
-                                @click="store.toggleRTL('rtl')"
-                            >
+                            <button type="button" class="btn flex-auto"
+                                :class="[store.state.rtlClass === 'rtl' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleRTL('rtl')">
                                 RTL
                                 RTL
                             </button>
                             </button>
                         </div>
                         </div>
@@ -156,33 +116,19 @@
                         <p class="text-white-dark text-xs">Sticky or Floating.</p>
                         <p class="text-white-dark text-xs">Sticky or Floating.</p>
                         <div class="mt-3 flex items-center gap-3 text-primary">
                         <div class="mt-3 flex items-center gap-3 text-primary">
                             <label class="inline-flex mb-0">
                             <label class="inline-flex mb-0">
-                                <input
-                                    :checked="store.navbar === 'navbar-sticky'"
-                                    type="radio"
-                                    value="navbar-sticky"
-                                    class="form-radio"
-                                    @change="store.toggleNavbar('navbar-sticky')"
-                                />
+                                <input :checked="store.state.navbar === 'navbar-sticky'" type="radio" value="navbar-sticky"
+                                    class="form-radio" @change="toggleNavbar('navbar-sticky')" />
                                 <span>Sticky</span>
                                 <span>Sticky</span>
                             </label>
                             </label>
                             <label class="inline-flex mb-0">
                             <label class="inline-flex mb-0">
-                                <input
-                                    :checked="store.navbar === 'navbar-floating'"
-                                    type="radio"
-                                    value="navbar-floating"
-                                    class="form-radio"
-                                    @change="store.toggleNavbar('navbar-floating')"
-                                />
+                                <input :checked="store.state.navbar === 'navbar-floating'" type="radio"
+                                    value="navbar-floating" class="form-radio"
+                                    @change="toggleNavbar('navbar-floating')" />
                                 <span>Floating</span>
                                 <span>Floating</span>
                             </label>
                             </label>
                             <label class="inline-flex mb-0">
                             <label class="inline-flex mb-0">
-                                <input
-                                    :checked="store.navbar === 'navbar-static'"
-                                    type="radio"
-                                    value="navbar-static"
-                                    class="form-radio"
-                                    @change="store.toggleNavbar('navbar-static')"
-                                />
+                                <input :checked="store.state.navbar === 'navbar-static'" type="radio" value="navbar-static"
+                                    class="form-radio" @change="toggleNavbar('navbar-static')" />
                                 <span>Static</span>
                                 <span>Static</span>
                             </label>
                             </label>
                         </div>
                         </div>
@@ -192,7 +138,8 @@
                         <h5 class="mb-1 text-base dark:text-white leading-none">Router Transition</h5>
                         <h5 class="mb-1 text-base dark:text-white leading-none">Router Transition</h5>
                         <p class="text-white-dark text-xs">Animation of main content.</p>
                         <p class="text-white-dark text-xs">Animation of main content.</p>
                         <div class="mt-3">
                         <div class="mt-3">
-                            <select v-model="store.animation" class="form-select border-primary text-primary" @change="store.toggleAnimation()">
+                            <select v-model="store.state.animation" class="form-select border-primary text-primary"
+                                @change="toggleAnimation()">
                                 <option value="">None</option>
                                 <option value="">None</option>
                                 <option value="animate__fadeIn">Fade</option>
                                 <option value="animate__fadeIn">Fade</option>
                                 <option value="animate__fadeInDown">Fade Down</option>
                                 <option value="animate__fadeInDown">Fade Down</option>
@@ -213,13 +160,36 @@
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-    import { ref } from 'vue';
-    import store from '@/stores';
-    import IconSettings from '@/components/icon/icon-settings.vue';
-    import IconX from '@/components/icon/icon-x.vue';
-    import IconSun from '@/components/icon/icon-sun.vue';
-    import IconMoon from '@/components/icon/icon-moon.vue';
-    import IconLaptop from '@/components/icon/icon-laptop.vue';
+import { ref } from 'vue';
+import store from '@/stores';
+import IconSettings from '@/components/icon/icon-settings.vue';
+import IconX from '@/components/icon/icon-x.vue';
+import IconSun from '@/components/icon/icon-sun.vue';
+import IconMoon from '@/components/icon/icon-moon.vue';
+import IconLaptop from '@/components/icon/icon-laptop.vue';
+
+const showCustomizer = ref(false);
+
+const toggleTheme = (theme) => {
+    store.dispatch('toggleTheme', theme);
+};
+const toggleMenu = (menu) => {
+  store.dispatch('toggleMenu', menu);
+};
+const toggleSemidark=(value)=>{
+    store.dispatch('toggleSemidark', value);
+}
+const toggleLayout=(layout)=>{
+    store.dispatch('toggleLayout', layout);
+}
+const toggleRTL=(RTL)=>{
+    store.dispatch('toggleRTL', RTL);
+}
+const toggleNavbar=(navbar)=>{
+    store.dispatch('toggleNavbar', navbar);
+}
+const toggleAnimation=()=>{
+    store.dispatch('toggleAnimation');
+}
 
 
-    const showCustomizer = ref(false);
 </script>
 </script>

+ 209 - 224
src/components/layout/Header.vue

@@ -1,98 +1,75 @@
 <template>
 <template>
-    <header class="z-40" :class="{ dark: store.semidark && store.menu === 'horizontal' }">
+    <header class="z-40" :class="{ dark: store.state.semidark && store.state.menu === 'horizontal' }">
         <div class="shadow-sm">
         <div class="shadow-sm">
             <div class="relative bg-white flex w-full items-center px-5 py-2.5 dark:bg-[#0e1726]">
             <div class="relative bg-white flex w-full items-center px-5 py-2.5 dark:bg-[#0e1726]">
                 <div class="horizontal-logo flex lg:hidden justify-between items-center ltr:mr-2 rtl:ml-2">
                 <div class="horizontal-logo flex lg:hidden justify-between items-center ltr:mr-2 rtl:ml-2">
                     <router-link to="/" class="main-logo flex items-center shrink-0">
                     <router-link to="/" class="main-logo flex items-center shrink-0">
                         <img class="w-8 ltr:-ml-1 rtl:-mr-1 inline" src="/src/assets/images/logo.png" alt="" />
                         <img class="w-8 ltr:-ml-1 rtl:-mr-1 inline" src="/src/assets/images/logo.png" alt="" />
                         <span
                         <span
-                            class="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle hidden md:inline dark:text-white-light transition-all duration-300"
-                            >V3studio App</span
-                        >
+                            class="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle hidden md:inline dark:text-white-light transition-all duration-300">V3studio
+                            App</span>
 
 
                     </router-link>
                     </router-link>
-<!-- 原导航 -->
-                    <!-- <a
-                        href="javascript:;"
+                    <!-- 原导航 -->
+                    <a href="javascript:;"
                         class="collapse-icon flex-none dark:text-[#d0d2d6] hover:text-primary dark:hover:text-primary flex lg:hidden ltr:ml-2 rtl:mr-2 p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
                         class="collapse-icon flex-none dark:text-[#d0d2d6] hover:text-primary dark:hover:text-primary flex lg:hidden ltr:ml-2 rtl:mr-2 p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
-                        @click="store.toggleSidebar()"
-                    >
+                        @click="toggleSidebars">
                         <icon-menu class="w-5 h-5" />
                         <icon-menu class="w-5 h-5" />
-                    </a> -->
+                    </a>
                 </div>
                 </div>
 
 
                 <!-- 头部中间功能--待开发 -->
                 <!-- 头部中间功能--待开发 -->
-                <!-- <div class="ltr:mr-2 rtl:ml-2 hidden sm:block">
+                <div class="ltr:mr-2 rtl:ml-2 hidden sm:block">
                     <ul class="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
                     <ul class="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
                         <li>
                         <li>
-                            <router-link
-                                to="/apps/calendar"
-                                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            >
+                            <router-link to="/apps/calendar"
+                                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
                                 <icon-calendar />
                                 <icon-calendar />
                             </router-link>
                             </router-link>
                         </li>
                         </li>
                         <li>
                         <li>
-                            <router-link
-                                to="/apps/todolist"
-                                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            >
+                            <router-link to="/apps/todolist"
+                                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
                                 <icon-edit />
                                 <icon-edit />
                             </router-link>
                             </router-link>
                         </li>
                         </li>
                         <li>
                         <li>
-                            <router-link
-                                to="/apps/chat"
-                                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            >
+                            <router-link to="/apps/chat"
+                                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
                                 <icon-chat-notification />
                                 <icon-chat-notification />
                             </router-link>
                             </router-link>
                         </li>
                         </li>
                     </ul>
                     </ul>
-                </div> -->
+                </div>
                 <div
                 <div
-                    class="sm:flex-1 ltr:sm:ml-0 ltr:ml-auto sm:rtl:mr-0 rtl:mr-auto flex items-center space-x-1.5 lg:space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]"
-                >
-                    <!-- <div class="sm:ltr:mr-auto sm:rtl:ml-auto">
+                    class="sm:flex-1 ltr:sm:ml-0 ltr:ml-auto sm:rtl:mr-0 rtl:mr-auto flex items-center space-x-1.5 lg:space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
+                    <div class="sm:ltr:mr-auto sm:rtl:ml-auto">
                         <form
                         <form
                             class="sm:relative absolute inset-x-0 sm:top-0 top-1/2 sm:translate-y-0 -translate-y-1/2 sm:mx-0 mx-4 z-10 sm:block hidden"
                             class="sm:relative absolute inset-x-0 sm:top-0 top-1/2 sm:translate-y-0 -translate-y-1/2 sm:mx-0 mx-4 z-10 sm:block hidden"
-                            :class="{ '!block': search }"
-                            @submit.prevent="search = false"
-                        >
-        
+                            :class="{ '!block': search }" @submit.prevent="search = false">
+
                         </form>
                         </form>
 
 
-                        <button
-                            type="button"
+                        <button type="button"
                             class="search_btn sm:hidden p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
                             class="search_btn sm:hidden p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            @click="search = !search"
-                        >
+                            @click="search = !search">
                             <icon-search class="w-4.5 h-4.5 mx-auto dark:text-[#d0d2d6]" />
                             <icon-search class="w-4.5 h-4.5 mx-auto dark:text-[#d0d2d6]" />
                         </button>
                         </button>
-                    </div> -->
+                    </div>
                     <div>
                     <div>
-                        <a
-                            href="javascript:;"
-                            v-show="store.theme === 'light'"
+                        <a href="javascript:;" v-show="store.state.theme === 'light'"
                             class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
                             class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            @click="store.toggleTheme('dark')"
-                        >
+                            @click="toggleTheme('dark')">
                             <icon-sun />
                             <icon-sun />
                         </a>
                         </a>
-                        <a
-                            href="javascript:;"
-                            v-show="store.theme === 'dark'"
+                        <a href="javascript:;" v-show="store.state.theme === 'dark'"
                             class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
                             class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            @click="store.toggleTheme('system')"
-                        >
+                            @click="toggleTheme('system')">
                             <icon-moon />
                             <icon-moon />
                         </a>
                         </a>
-                        <a
-                            href="javascript:;"
-                            v-show="store.theme === 'system'"
+                        <a href="javascript:;" v-show="store.state.theme === 'system'"
                             class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
                             class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            @click="store.toggleTheme('dark')"
-                        >
+                            @click="toggleTheme('dark')">
                             <!-- <icon-laptop /> -->
                             <!-- <icon-laptop /> -->
                             <icon-sun />
                             <icon-sun />
 
 
@@ -100,30 +77,30 @@
                     </div>
                     </div>
 
 
 
 
-                   
+
 
 
                     <!-- <div class="dropdown shrink-0">
                     <!-- <div class="dropdown shrink-0">
-                        <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8">
-                            <button
-                                type="button"
-                                class="relative block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
-                            >
+                        <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'"
+                            offsetDistance="8">
+                            <button type="button"
+                                class="relative block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
                                 <icon-bell-bing />
                                 <icon-bell-bing />
 
 
                                 <span class="flex absolute w-3 h-3 ltr:right-0 rtl:left-0 top-0">
                                 <span class="flex absolute w-3 h-3 ltr:right-0 rtl:left-0 top-0">
                                     <span
                                     <span
-                                        class="animate-ping absolute ltr:-left-[3px] rtl:-right-[3px] -top-[3px] inline-flex h-full w-full rounded-full bg-success/50 opacity-75"
-                                    ></span>
+                                        class="animate-ping absolute ltr:-left-[3px] rtl:-right-[3px] -top-[3px] inline-flex h-full w-full rounded-full bg-success/50 opacity-75"></span>
                                     <span class="relative inline-flex rounded-full w-[6px] h-[6px] bg-success"></span>
                                     <span class="relative inline-flex rounded-full w-[6px] h-[6px] bg-success"></span>
                                 </span>
                                 </span>
                             </button>
                             </button>
                             <template #content="{ close }">
                             <template #content="{ close }">
-                                <ul class="!py-0 text-dark dark:text-white-dark w-[300px] sm:w-[350px] divide-y dark:divide-white/10">
+                                <ul
+                                    class="!py-0 text-dark dark:text-white-dark w-[300px] sm:w-[350px] divide-y dark:divide-white/10">
                                     <li>
                                     <li>
                                         <div class="flex items-center px-4 py-2 justify-between font-semibold">
                                         <div class="flex items-center px-4 py-2 justify-between font-semibold">
                                             <h4 class="text-lg">Notification</h4>
                                             <h4 class="text-lg">Notification</h4>
                                             <template v-if="notifications.length">
                                             <template v-if="notifications.length">
-                                                <span class="badge bg-primary/80" v-text="notifications.length + 'New'"></span>
+                                                <span class="badge bg-primary/80"
+                                                    v-text="notifications.length + 'New'"></span>
                                             </template>
                                             </template>
                                         </div>
                                         </div>
                                     </li>
                                     </li>
@@ -132,24 +109,21 @@
                                             <div class="group flex items-center px-4 py-2">
                                             <div class="group flex items-center px-4 py-2">
                                                 <div class="grid place-content-center rounded">
                                                 <div class="grid place-content-center rounded">
                                                     <div class="w-12 h-12 relative">
                                                     <div class="w-12 h-12 relative">
-                                                        <img
-                                                            class="w-12 h-12 rounded-full object-cover"
-                                                            :src="`/assets/images/${notification.profile}`"
-                                                            alt=""
-                                                        />
-                                                        <span class="bg-success w-2 h-2 rounded-full block absolute right-[6px] bottom-0"></span>
+                                                        <img class="w-12 h-12 rounded-full object-cover"
+                                                            :src="`/assets/images/${notification.profile}`" alt="" />
+                                                        <span
+                                                            class="bg-success w-2 h-2 rounded-full block absolute right-[6px] bottom-0"></span>
                                                     </div>
                                                     </div>
                                                 </div>
                                                 </div>
                                                 <div class="ltr:pl-3 rtl:pr-3 flex flex-auto">
                                                 <div class="ltr:pl-3 rtl:pr-3 flex flex-auto">
                                                     <div class="ltr:pr-3 rtl:pl-3">
                                                     <div class="ltr:pr-3 rtl:pl-3">
                                                         <h6 v-html="notification.message"></h6>
                                                         <h6 v-html="notification.message"></h6>
-                                                        <span class="text-xs block font-normal dark:text-gray-500" v-text="notification.time"></span>
+                                                        <span class="text-xs block font-normal dark:text-gray-500"
+                                                            v-text="notification.time"></span>
                                                     </div>
                                                     </div>
-                                                    <button
-                                                        type="button"
+                                                    <button type="button"
                                                         class="ltr:ml-auto rtl:mr-auto text-neutral-300 hover:text-danger opacity-0 group-hover:opacity-100"
                                                         class="ltr:ml-auto rtl:mr-auto text-neutral-300 hover:text-danger opacity-0 group-hover:opacity-100"
-                                                        @click="removeNotification(notification.id)"
-                                                    >
+                                                        @click="removeNotification(notification.id)">
                                                         <icon-x-circle />
                                                         <icon-x-circle />
                                                     </button>
                                                     </button>
                                                 </div>
                                                 </div>
@@ -159,14 +133,17 @@
                                     <template v-if="notifications.length">
                                     <template v-if="notifications.length">
                                         <li>
                                         <li>
                                             <div class="p-4">
                                             <div class="p-4">
-                                                <button class="btn btn-primary block w-full btn-small" @click="close()">Read All Notifications</button>
+                                                <button class="btn btn-primary block w-full btn-small"
+                                                    @click="close()">Read All Notifications</button>
                                             </div>
                                             </div>
                                         </li>
                                         </li>
                                     </template>
                                     </template>
                                     <template v-if="!notifications.length">
                                     <template v-if="!notifications.length">
                                         <li>
                                         <li>
-                                            <div class="!grid place-content-center hover:!bg-transparent text-lg min-h-[200px]">
-                                                <div class="mx-auto ring-4 ring-primary/30 rounded-full mb-4 text-primary">
+                                            <div
+                                                class="!grid place-content-center hover:!bg-transparent text-lg min-h-[200px]">
+                                                <div
+                                                    class="mx-auto ring-4 ring-primary/30 rounded-full mb-4 text-primary">
                                                     <icon-info-circle :fill="true" class="w-10 h-10" />
                                                     <icon-info-circle :fill="true" class="w-10 h-10" />
                                                 </div>
                                                 </div>
                                                 No data available.
                                                 No data available.
@@ -179,28 +156,28 @@
                     </div> -->
                     </div> -->
 
 
                     <div class="dropdown shrink-0">
                     <div class="dropdown shrink-0">
-                        <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8" class="!block">
+                        <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'"
+                            offsetDistance="8" class="!block">
                             <button type="button" class="relative group block">
                             <button type="button" class="relative group block">
-                                <img
-                                    class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100"
-                                    src="/assets/images/me.jpg"
-                                    alt=""
-                                />
+                                <img class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100"
+                                    src="/assets/images/me.jpg" alt="" />
                             </button>
                             </button>
                             <template #content="{ close }">
                             <template #content="{ close }">
-                                <ul class="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
+                                <ul
+                                    class="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
                                     <li>
                                     <li>
                                         <div class="flex items-center px-4 py-4">
                                         <div class="flex items-center px-4 py-4">
                                             <div class="flex-none">
                                             <div class="flex-none">
-                                                <img class="rounded-md w-10 h-10 object-cover" src="/assets/images/me.jpg" alt="" />
+                                                <img class="rounded-md w-10 h-10 object-cover"
+                                                    src="/assets/images/me.jpg" alt="" />
                                             </div>
                                             </div>
                                             <div class="ltr:pl-4 rtl:pr-4 truncate">
                                             <div class="ltr:pl-4 rtl:pr-4 truncate">
                                                 <h4 class="text-base">
                                                 <h4 class="text-base">
-                                                    Johnny Liang<span class="text-xs bg-success-light rounded text-success px-1 ltr:ml-2 rtl:ml-2">Pro</span>
+                                                    Johnny Liang<span
+                                                        class="text-xs bg-success-light rounded text-success px-1 ltr:ml-2 rtl:ml-2">Pro</span>
                                                 </h4>
                                                 </h4>
-                                                <a class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white" href="javascript:;"
-                                                    >johndoe@gmail.com</a
-                                                >
+                                                <a class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white"
+                                                    href="javascript:;">johndoe@gmail.com</a>
                                             </div>
                                             </div>
                                         </div>
                                         </div>
                                     </li>
                                     </li>
@@ -211,10 +188,10 @@
                                             个人信息
                                             个人信息
                                         </router-link>
                                         </router-link>
                                     </li>
                                     </li>
-                                   
-                                
+
+
                                     <li class="border-t border-white-light dark:border-white-light/10">
                                     <li class="border-t border-white-light dark:border-white-light/10">
-                                        <router-link to="/auth/boxed-signin" class="text-danger !py-3" @click="close()">
+                                        <router-link to="/login" class="text-danger !py-3" @click="close()">
                                             <icon-logout class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 rotate-90 shrink-0" />
                                             <icon-logout class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 rotate-90 shrink-0" />
 
 
                                             退出
                                             退出
@@ -227,147 +204,155 @@
                 </div>
                 </div>
             </div>
             </div>
 
 
-  
+
         </div>
         </div>
     </header>
     </header>
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-    import { ref, onMounted, computed, reactive, watch } from 'vue';
-    import { useI18n } from 'vue-i18n';
-
-    import appSetting from '@/app-setting';
-
-    import { useRoute } from 'vue-router';
-    import { useStore } from 'vuex';
-
-    import IconMenu from '@/components/icon/icon-menu.vue';
-    import IconCalendar from '@/components/icon/icon-calendar.vue';
-    import IconEdit from '@/components/icon/icon-edit.vue';
-    import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
-    import IconSearch from '@/components/icon/icon-search.vue';
-    import IconXCircle from '@/components/icon/icon-x-circle.vue';
-    import IconSun from '@/components/icon/icon-sun.vue';
-    import IconMoon from '@/components/icon/icon-moon.vue';
-    import IconLaptop from '@/components/icon/icon-laptop.vue';
-    import IconMailDot from '@/components/icon/icon-mail-dot.vue';
-    import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
-    import IconInfoCircle from '@/components/icon/icon-info-circle.vue';
-    import IconBellBing from '@/components/icon/icon-bell-bing.vue';
-    import IconUser from '@/components/icon/icon-user.vue';
-    import IconMail from '@/components/icon/icon-mail.vue';
-    import IconLockDots from '@/components/icon/icon-lock-dots.vue';
-    import IconLogout from '@/components/icon/icon-logout.vue';
-    import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
-    import IconCaretDown from '@/components/icon/icon-caret-down.vue';
-    import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
-    import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
-    import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
-    import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
-    import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
-    import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
-    import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
-
-    const store = useStore();
-    const route = useRoute();
-    const search = ref(false);
-
-    // multi language
-    const i18n = reactive(useI18n());
-    const changeLanguage = (item: any) => {
-        i18n.locale = item.code;
-        appSetting.toggleLanguage(item);
-    };
-    const currentFlag = computed(() => {
-        return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
-    });
-
-    const notifications = ref([
-        {
-            id: 1,
-            profile: 'user-profile.jpeg',
-            message: '<strong class="text-sm mr-1">John Doe</strong>invite you to <strong>Prototyping</strong>',
-            time: '45 min ago',
-        },
-        {
-            id: 2,
-            profile: 'profile-34.jpeg',
-            message: '<strong class="text-sm mr-1">Adam Nolan</strong>mentioned you to <strong>UX Basics</strong>',
-            time: '9h Ago',
-        },
-        {
-            id: 3,
-            profile: 'profile-16.jpeg',
-            message: '<strong class="text-sm mr-1">Anna Morgan</strong>Upload a file',
-            time: '9h Ago',
-        },
-    ]);
-
-    const messages = ref([
-        {
-            id: 1,
-            image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-success-light dark:bg-success text-success dark:text-success-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>',
-            title: 'Congratulations!',
-            message: 'Your OS has been updated.',
-            time: '1hr',
-        },
-        {
-            id: 2,
-            image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-info-light dark:bg-info text-info dark:text-info-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span>',
-            title: 'Did you know?',
-            message: 'You can switch between artboards.',
-            time: '2hr',
-        },
-        {
-            id: 3,
-            image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-danger-light dark:bg-danger text-danger dark:text-danger-light"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>',
-            title: 'Something went wrong!',
-            message: 'Send Reposrt',
-            time: '2days',
-        },
-        {
-            id: 4,
-            image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-warning-light dark:bg-warning text-warning dark:text-warning-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">    <circle cx="12" cy="12" r="10"></circle>    <line x1="12" y1="8" x2="12" y2="12"></line>    <line x1="12" y1="16" x2="12.01" y2="16"></line></svg></span>',
-            title: 'Warning',
-            message: 'Your password strength is low.',
-            time: '5days',
-        },
-    ]);
-
-    onMounted(() => {
-        setActiveDropdown();
-    });
-
-    watch(route, (to, from) => {
-        setActiveDropdown();
-    });
-
-    const setActiveDropdown = () => {
-        const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
-        if (selector) {
-            selector.classList.add('active');
-            const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
-            for (let i = 0; i < all.length; i++) {
-                all[0]?.classList.remove('active');
-            }
-            const ul: any = selector.closest('ul.sub-menu');
-            if (ul) {
-                let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
-                if (ele) {
-                    ele = ele[0];
-                    setTimeout(() => {
-                        ele?.classList.add('active');
-                    });
-                }
+import { ref, onMounted, computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import appSetting from '@/app-setting';
+
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+import IconMenu from '@/components/icon/icon-menu.vue';
+import IconCalendar from '@/components/icon/icon-calendar.vue';
+import IconEdit from '@/components/icon/icon-edit.vue';
+import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
+import IconSearch from '@/components/icon/icon-search.vue';
+import IconXCircle from '@/components/icon/icon-x-circle.vue';
+import IconSun from '@/components/icon/icon-sun.vue';
+import IconMoon from '@/components/icon/icon-moon.vue';
+import IconLaptop from '@/components/icon/icon-laptop.vue';
+import IconMailDot from '@/components/icon/icon-mail-dot.vue';
+import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
+import IconInfoCircle from '@/components/icon/icon-info-circle.vue';
+import IconBellBing from '@/components/icon/icon-bell-bing.vue';
+import IconUser from '@/components/icon/icon-user.vue';
+import IconMail from '@/components/icon/icon-mail.vue';
+import IconLockDots from '@/components/icon/icon-lock-dots.vue';
+import IconLogout from '@/components/icon/icon-logout.vue';
+import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
+import IconCaretDown from '@/components/icon/icon-caret-down.vue';
+import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
+import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
+import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
+import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
+import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
+import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
+import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
+
+const store = useStore();
+const route = useRoute();
+const search = ref(false);
+
+// multi language
+const i18n = reactive(useI18n());
+const changeLanguage = (item: any) => {
+    i18n.locale = item.code;
+    appSetting.toggleLanguage(item);
+};
+const currentFlag = computed(() => {
+    return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
+});
+
+const notifications = ref([
+    {
+        id: 1,
+        profile: 'user-profile.jpeg',
+        message: '<strong class="text-sm mr-1">John Doe</strong>invite you to <strong>Prototyping</strong>',
+        time: '45 min ago',
+    },
+    {
+        id: 2,
+        profile: 'profile-34.jpeg',
+        message: '<strong class="text-sm mr-1">Adam Nolan</strong>mentioned you to <strong>UX Basics</strong>',
+        time: '9h Ago',
+    },
+    {
+        id: 3,
+        profile: 'profile-16.jpeg',
+        message: '<strong class="text-sm mr-1">Anna Morgan</strong>Upload a file',
+        time: '9h Ago',
+    },
+]);
+
+const messages = ref([
+    {
+        id: 1,
+        image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-success-light dark:bg-success text-success dark:text-success-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>',
+        title: 'Congratulations!',
+        message: 'Your OS has been updated.',
+        time: '1hr',
+    },
+    {
+        id: 2,
+        image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-info-light dark:bg-info text-info dark:text-info-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span>',
+        title: 'Did you know?',
+        message: 'You can switch between artboards.',
+        time: '2hr',
+    },
+    {
+        id: 3,
+        image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-danger-light dark:bg-danger text-danger dark:text-danger-light"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>',
+        title: 'Something went wrong!',
+        message: 'Send Reposrt',
+        time: '2days',
+    },
+    {
+        id: 4,
+        image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-warning-light dark:bg-warning text-warning dark:text-warning-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">    <circle cx="12" cy="12" r="10"></circle>    <line x1="12" y1="8" x2="12" y2="12"></line>    <line x1="12" y1="16" x2="12.01" y2="16"></line></svg></span>',
+        title: 'Warning',
+        message: 'Your password strength is low.',
+        time: '5days',
+    },
+]);
+
+onMounted(() => {
+    setActiveDropdown();
+});
+
+watch(route, (to, from) => {
+    setActiveDropdown();
+});
+
+const setActiveDropdown = () => {
+    const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
+    if (selector) {
+        selector.classList.add('active');
+        const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
+        for (let i = 0; i < all.length; i++) {
+            all[0]?.classList.remove('active');
+        }
+        const ul: any = selector.closest('ul.sub-menu');
+        if (ul) {
+            let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
+            if (ele) {
+                ele = ele[0];
+                setTimeout(() => {
+                    ele?.classList.add('active');
+                });
             }
             }
         }
         }
-    };
+    }
+};
+
+const removeNotification = (value: number) => {
+    notifications.value = notifications.value.filter((d) => d.id !== value);
+};
+
+const removeMessage = (value: number) => {
+    messages.value = messages.value.filter((d) => d.id !== value);
+};
+const toggleSidebars = () => {
+    store.dispatch('toggleSidebar');
+};
 
 
-    const removeNotification = (value: number) => {
-        notifications.value = notifications.value.filter((d) => d.id !== value);
-    };
+const toggleTheme = (theme) => {
+    store.dispatch('toggleTheme', theme);
+};
 
 
-    const removeMessage = (value: number) => {
-        messages.value = messages.value.filter((d) => d.id !== value);
-    };
 </script>
 </script>

+ 1 - 1
src/components/layout/Sidebar.vue

@@ -70,7 +70,7 @@
                                     <vue-collapsible :isOpen="activeDropdown === 'invoice'">
                                     <vue-collapsible :isOpen="activeDropdown === 'invoice'">
                                         <ul class="sub-menu text-gray-500">
                                         <ul class="sub-menu text-gray-500">
                                             <li>
                                             <li>
-                                                <router-link to="/apps/applist"
+                                                <router-link to="/login"
                                                     @click="toggleMobileMenu">所有应用</router-link>
                                                     @click="toggleMobileMenu">所有应用</router-link>
                                             </li>
                                             </li>
                                             <li>
                                             <li>

+ 0 - 1
src/layouts/app-layout.vue

@@ -99,7 +99,6 @@ const goToTop = () => {
     document.documentElement.scrollTop = 0;
     document.documentElement.scrollTop = 0;
 };
 };
 const toggleSidebar = () => {
 const toggleSidebar = () => {
-    console.log(store.dispatch('toggleSidebar'));
     store.dispatch('toggleSidebar');
     store.dispatch('toggleSidebar');
 };
 };
 </script>
 </script>

+ 34 - 43
src/layouts/auth-layout.vue

@@ -1,43 +1,35 @@
 <template>
 <template>
-    <div class="text-black dark:text-white-dark">
+    <div class="text-black dark:text-white-dark h-screen">
         <!-- screen loader -->
         <!-- screen loader -->
-        <div
-            v-show="store.isShowMainLoader"
-            class="screen_loader fixed inset-0 bg-[#fafafa] dark:bg-[#060818] z-[60] grid place-content-center animate__animated"
-        >
+        <div v-show="store.state.isShowMainLoader"
+            class="screen_loader fixed inset-0 bg-[#fafafa] dark:bg-[#060818] z-[60] grid place-content-center animate__animated">
             <svg width="64" height="64" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg" fill="#4361ee">
             <svg width="64" height="64" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg" fill="#4361ee">
                 <path
                 <path
-                    d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"
-                >
-                    <animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s" repeatCount="indefinite" />
+                    d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
+                    <animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s"
+                        repeatCount="indefinite" />
                 </path>
                 </path>
                 <path
                 <path
-                    d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"
-                >
-                    <animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s" repeatCount="indefinite" />
+                    d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z">
+                    <animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s"
+                        repeatCount="indefinite" />
                 </path>
                 </path>
             </svg>
             </svg>
         </div>
         </div>
 
 
         <div class="fixed bottom-6 ltr:right-6 rtl:left-6 z-50">
         <div class="fixed bottom-6 ltr:right-6 rtl:left-6 z-50">
             <template v-if="showTopButton">
             <template v-if="showTopButton">
-                <button
-                    type="button"
+                <button type="button"
                     class="btn btn-outline-primary rounded-full p-2 animate-pulse bg-[#fafafa] dark:bg-[#060818] dark:hover:bg-primary"
                     class="btn btn-outline-primary rounded-full p-2 animate-pulse bg-[#fafafa] dark:bg-[#060818] dark:hover:bg-primary"
-                    @click="goToTop"
-                >
-                    <svg width="24" height="24" class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            opacity="0.5"
-                            fill-rule="evenodd"
-                            clip-rule="evenodd"
+                    @click="goToTop">
+                    <svg width="24" height="24" class="h-4 w-4" viewBox="0 0 24 24" fill="none"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd"
                             d="M12 20.75C12.4142 20.75 12.75 20.4142 12.75 20L12.75 10.75L11.25 10.75L11.25 20C11.25 20.4142 11.5858 20.75 12 20.75Z"
                             d="M12 20.75C12.4142 20.75 12.75 20.4142 12.75 20L12.75 10.75L11.25 10.75L11.25 20C11.25 20.4142 11.5858 20.75 12 20.75Z"
-                            fill="currentColor"
-                        />
+                            fill="currentColor" />
                         <path
                         <path
                             d="M6.00002 10.75C5.69667 10.75 5.4232 10.5673 5.30711 10.287C5.19103 10.0068 5.25519 9.68417 5.46969 9.46967L11.4697 3.46967C11.6103 3.32902 11.8011 3.25 12 3.25C12.1989 3.25 12.3897 3.32902 12.5304 3.46967L18.5304 9.46967C18.7449 9.68417 18.809 10.0068 18.6929 10.287C18.5768 10.5673 18.3034 10.75 18 10.75L6.00002 10.75Z"
                             d="M6.00002 10.75C5.69667 10.75 5.4232 10.5673 5.30711 10.287C5.19103 10.0068 5.25519 9.68417 5.46969 9.46967L11.4697 3.46967C11.6103 3.32902 11.8011 3.25 12 3.25C12.1989 3.25 12.3897 3.32902 12.5304 3.46967L18.5304 9.46967C18.7449 9.68417 18.809 10.0068 18.6929 10.287C18.5768 10.5673 18.3034 10.75 18 10.75L6.00002 10.75Z"
-                            fill="currentColor"
-                        />
+                            fill="currentColor" />
                     </svg>
                     </svg>
                 </button>
                 </button>
             </template>
             </template>
@@ -46,24 +38,23 @@
     </div>
     </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-    import { ref, onMounted } from 'vue';
-    import { useStore } from 'vuex';
-    const store:any = useStore();
-    const showTopButton = ref(false);
-    onMounted(() => {
-        window.onscroll = () => {
-            if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
-                showTopButton.value = true;
-            } else {
-                showTopButton.value = false;
-            }
-        };
-
-        store.toggleMainLoader();
-    });
-
-    const goToTop = () => {
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
+import { ref, onMounted } from 'vue';
+import store from '@/stores';
+const showTopButton = ref(false);
+onMounted(() => {
+    window.onscroll = () => {
+        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+            showTopButton.value = true;
+        } else {
+            showTopButton.value = false;
+        }
     };
     };
+    store.dispatch('toggleMainLoader');
+    /* store.toggleMainLoader(); */
+});
+
+const goToTop = () => {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+};
 </script>
 </script>

+ 2 - 4
src/permission.js

@@ -6,7 +6,7 @@ import { ElMessage } from 'element-plus'
 import Storage from '@/utils/storage'
 import Storage from '@/utils/storage'
 //import  {Foundation}  from './ui-utils/index'
 //import  {Foundation}  from './ui-utils/index'
 
 
-const whiteList = ['/login', '/franchise/login', '/payType']
+const whiteList = ['/login', '/franchise/login']
 
 
 let toFirstRoute = function getTopRoutePath(router, next) {
 let toFirstRoute = function getTopRoutePath(router, next) {
   const excludes = [
   const excludes = [
@@ -30,12 +30,10 @@ let toFirstRoute = function getTopRoutePath(router, next) {
 }
 }
 console.log(router);
 console.log(router);
 router.beforeEach(async (to, from, next) => {
 router.beforeEach(async (to, from, next) => {
-/*   NProgress.start() */
   const store = useStore()
   const store = useStore()
-  console.log(store);
   const refreshToken = Storage.getItem('admin_refresh_token')
   const refreshToken = Storage.getItem('admin_refresh_token')
   if (refreshToken) {
   if (refreshToken) {
-    if ((to.path === '/login' || to.path === '/franchise/login' || to.path === '/payType') && store.getters.addRouters.length) {
+    if ((to.path === '/login' || to.path === '/franchise/login') && store.getters.addRouters.length) {
       toFirstRoute(router, next)
       toFirstRoute(router, next)
      /*  NProgress.done() */
      /*  NProgress.done() */
     } else {
     } else {

+ 17 - 7
src/router/index.ts

@@ -1,16 +1,13 @@
 import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory, Router } from 'vue-router';
 import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory, Router } from 'vue-router';
 import { useStore } from 'vuex';
 import { useStore } from 'vuex';
 import appSetting from '@/app-setting';
 import appSetting from '@/app-setting';
+import HomeView from '../views/index.vue';
 
 
 const constantRouterMap: RouteRecordRaw[] = [
 const constantRouterMap: RouteRecordRaw[] = [
-    { path: '/login', component: () => import('@/views/auth/boxed-signin.vue') },
-    /*     { path: '/franchise/login', component: () => import('@/views/login/index.vue'), hidden: true },
-        { path: '/404', component: () => import('@/views/errorPage/404.vue'), hidden: true },
-        { path: '/401', component: () => import('@/views/errorPage/401.vue'), hidden: true },
-        { path: '/payType', component: () => import('@/components/payType.vue'), hidden: false }, */
+    { path: '/login', component: () => import('@/views/auth/boxed-signin.vue'),meta: { layout: 'auth' } },
 ];
 ];
 const router = createRouter({
 const router = createRouter({
-    history: createWebHistory(),
+    history: createWebHashHistory(),
     scrollBehavior: () => ({ y: 0 }),
     scrollBehavior: () => ({ y: 0 }),
     routes: constantRouterMap
     routes: constantRouterMap
 })
 })
@@ -20,10 +17,23 @@ const asyncRouterMap: RouteRecordRaw[] = [
         redirect: '/dashboard',
         redirect: '/dashboard',
         name: 'dashboard',
         name: 'dashboard',
         children: [
         children: [
-            { path: 'dashboard', component: () => import('@/views/index.vue'), name: 'dashboard', meta: { title: 'home', icon: 'dashboard' } }
+            { path: '/', component: () => import('@/views/index.vue'), name: 'dashboard', meta: { title: 'home', icon: 'dashboard', layout: 'app'  } }
         ]
         ]
     },
     },
 ]
 ]
+asyncRouterMap.forEach(route => {
+    router.addRoute(route);
+});
+router.beforeEach((to, from, next) => {
+    const store = useStore();
+    //判断当前页面是否带有侧边栏及顶部
+    if (to?.meta?.layout == 'auth') {
+        store.dispatch("setMainLayout",'auth');
+    } else {
+        store.dispatch("setMainLayout",'app');
+    }
+    next(true);
+});
 
 
 export { constantRouterMap, asyncRouterMap };
 export { constantRouterMap, asyncRouterMap };
 export default router;
 export default router;

+ 5 - 11
src/stores/index.ts

@@ -147,10 +147,6 @@ export interface State {
     languageList: Array<{ code: string; name: string }>;
     languageList: Array<{ code: string; name: string }>;
     isShowMainLoader: boolean;
     isShowMainLoader: boolean;
     semidark: boolean;
     semidark: boolean;
-    app: typeof app;
-    permission: typeof permission;
-    tagsView: typeof tagsView;
-    user: typeof user;
 }
 }
 
 
 // 创建 store
 // 创建 store
@@ -165,7 +161,7 @@ const store = createStore<State>({
         isDarkMode: false,
         isDarkMode: false,
         mainLayout: 'app',
         mainLayout: 'app',
         theme: 'light',
         theme: 'light',
-        menu: 'horizontal',
+        menu: 'vertical',
         layout: 'full',
         layout: 'full',
         rtlClass: 'ltr',
         rtlClass: 'ltr',
         animation: '',
         animation: '',
@@ -177,11 +173,8 @@ const store = createStore<State>({
             { code: 'en', name: 'English' },
             { code: 'en', name: 'English' },
         ],
         ],
         isShowMainLoader: true,
         isShowMainLoader: true,
-        semidark: false,
-        app,
-        permission,
-        tagsView,
-        user
+        semidark: false
+
     },
     },
     mutations: {
     mutations: {
         setMainLayout(state, payload) {
         setMainLayout(state, payload) {
@@ -196,6 +189,7 @@ const store = createStore<State>({
         },
         },
         toggleMenu(state, payload) {
         toggleMenu(state, payload) {
             payload = payload || state.menu;
             payload = payload || state.menu;
+            state.sidebar = false; // reset sidebar state
             localStorage.setItem('menu', payload);
             localStorage.setItem('menu', payload);
             state.menu = payload;
             state.menu = payload;
         },
         },
@@ -239,8 +233,8 @@ const store = createStore<State>({
             document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
             document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
         },
         },
         toggleSidebar(state) {
         toggleSidebar(state) {
-            console.log(state.sidebar);
             state.sidebar = !state.sidebar;
             state.sidebar = !state.sidebar;
+            console.log(state);
         },
         },
         toggleMainLoader(state) {
         toggleMainLoader(state) {
             state.isShowMainLoader = true;
             state.isShowMainLoader = true;

+ 2 - 1
src/stores/modules/permission.js

@@ -3,7 +3,8 @@ import { getUserRolesPermissions } from '@/api/login'
 import Storage from '@/utils/storage'
 import Storage from '@/utils/storage'
 import tagsView from './tagsView'
 import tagsView from './tagsView'
 import router from '@/router';
 import router from '@/router';
-console.log(constantRouterMap);
+console.log("constantRouterMap:",constantRouterMap);
+console.log("asyncRouterMap:",asyncRouterMap);
 const permission = {
 const permission = {
   state: {
   state: {
     routers: constantRouterMap,
     routers: constantRouterMap,

+ 10 - 7
src/stores/modules/user.js

@@ -28,10 +28,11 @@ export const mutations = {
    * @param token
    * @param token
    * @constructor
    * @constructor
    */
    */
-  SET_ACCESS_TOKEN: (state, token) => {
-    const expires = new Date(jwt_decode(token).exp * 1000)
-    console.log(112,expires);
-    Storage.setItem('admin_access_token', token, { expires })
+  SET_ACCESS_TOKEN: (state,token) => {
+     // 调试信息
+   // const expires = new Date(jwt_decode(token).exp * 1000)
+    Storage.setItem('admin_access_token', token)
+    console.log('SET_ACCESS_TOKEN mutation called with token:', token)
   },
   },
   /**
   /**
    * 设置刷新令牌
    * 设置刷新令牌
@@ -39,9 +40,10 @@ export const mutations = {
    * @param token
    * @param token
    * @constructor
    * @constructor
    */
    */
-  SET_REFRESH_TOKEN: (state, token) => {
-    const expires = new Date(jwt_decode(token).exp * 1000)
-    Storage.setItem('admin_refresh_token', token, { expires })
+  SET_REFRESH_TOKEN: (state,token) => {
+    console.log('SET_ACCESS_TOKEN mutation called')
+   // const expires = new Date(jwt_decode(token).exp * 1000)
+    Storage.setItem('admin_refresh_token', token)
   },
   },
   /**
   /**
    * 移除用户信息
    * 移除用户信息
@@ -84,6 +86,7 @@ export const actions = {
       if (window.location.href.indexOf('/franchise/login') === -1) {
       if (window.location.href.indexOf('/franchise/login') === -1) {
         API_Login.login(params).then(response => {
         API_Login.login(params).then(response => {
           const { access_token, refresh_token, ...user } = response
           const { access_token, refresh_token, ...user } = response
+          console.log('Committing SET_USER and SET_ACCESS_TOKEN') // 调试信息
           commit('SET_USER', user)
           commit('SET_USER', user)
           commit('SET_ACCESS_TOKEN', access_token)
           commit('SET_ACCESS_TOKEN', access_token)
           commit('SET_REFRESH_TOKEN', refresh_token)
           commit('SET_REFRESH_TOKEN', refresh_token)

+ 2 - 2
src/utils/request.js

@@ -15,7 +15,7 @@ import * as qs from 'qs'
 
 
 // 创建axios实例
 // 创建axios实例
 const service = axios.create({
 const service = axios.create({
-  baseURL: 'http://192.168.8.101:9998',
+  baseURL: import.meta.env.VITE_API_URL,
   timeout: 5000,
   timeout: 5000,
 
 
   paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' })
   paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' })
@@ -49,7 +49,7 @@ service.interceptors.request.use(config => {
     config.headers['Authorization'] = accessToken
     config.headers['Authorization'] = accessToken
   }
   }
   // 如果是上传接口,不限制超时时间${api.admin}
   // 如果是上传接口,不限制超时时间${api.admin}
-  if (config.url === `http://192.168.8.101:9998/uploaders`) {
+  if (config.url === import.meta.env.VITE_API_URL) {
     config.timeout = 0
     config.timeout = 0
   }
   }
   return config
   return config

+ 0 - 1
src/utils/storage.js

@@ -18,7 +18,6 @@ function isCookieKey(key) {
  * @param options
  * @param options
  */
  */
 function setItem(key, value, options = {}) {
 function setItem(key, value, options = {}) {
-  console.log(`Setting item: ${key}, value: ${value}, options:`, options); // 添加日志
   if (options.expires === undefined) {
   if (options.expires === undefined) {
     options.expires = 365 * 10;
     options.expires = 365 * 10;
   }
   }

+ 6 - 9
src/views/auth/boxed-signin.vue

@@ -58,6 +58,7 @@
                                 登录
                                 登录
                             </button>
                             </button>
                         </form> -->
                         </form> -->
+                        <!-- <el-button @click="goHome">测试</el-button> -->
                         <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="login-input">
                         <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="login-input">
                             <el-form-item prop="username">
                             <el-form-item prop="username">
                                 <el-input v-model="loginForm.username" :placeholder="$t('username')" autofocus
                                 <el-input v-model="loginForm.username" :placeholder="$t('username')" autofocus
@@ -226,10 +227,8 @@ const MixinClone = (obj) => {
 const dispatchLoginAction = (params) => {
 const dispatchLoginAction = (params) => {
     loading.value = true;
     loading.value = true;
     return new Promise((resolve, reject) => {
     return new Promise((resolve, reject) => {
-        console.log(store.dispatch);
         store.dispatch('loginAction', params).then((res: any) => {
         store.dispatch('loginAction', params).then((res: any) => {
             loading.value = false;
             loading.value = false;
-            console.log(res);
             if (res) {
             if (res) {
                 try {
                 try {
                     const WS = new WebSocket(res.access_token);
                     const WS = new WebSocket(res.access_token);
@@ -240,13 +239,9 @@ const dispatchLoginAction = (params) => {
                 }
                 }
             }
             }
             const forward = route.query.forward;
             const forward = route.query.forward;
-            console.log(forward);
             let query = JSON.parse(JSON.stringify(route.query));
             let query = JSON.parse(JSON.stringify(route.query));
-            //delete query.forward
-            router.replace({
-                name: 'dashboard'
-            });
-           // router.push({ path: 'dashboard', query }).catch(() => { }); //forward ||
+            delete query.forward
+             router.push({ path: 'dashboard', query }).catch(() => { }); //forward ||
         }).catch(() => {
         }).catch(() => {
             loading.value = false;
             loading.value = false;
             reject();
             reject();
@@ -274,7 +269,6 @@ const submitLogin = (formEl: FormInstance | undefined) => {
                 params.uuid = uuid;
                 params.uuid = uuid;
                 params.captcha = params.validcode;
                 params.captcha = params.validcode;
                 delete params.validcode;
                 delete params.validcode;
-                console.log(params);
                 dispatchLoginAction(params).catch(() => {
                 dispatchLoginAction(params).catch(() => {
                     changeValidcode();
                     changeValidcode();
                 });
                 });
@@ -286,5 +280,8 @@ const submitLogin = (formEl: FormInstance | undefined) => {
         });
         });
     }
     }
 }
 }
+const goHome = () => {
+    router.push({ path: 'dashboard' }).catch(() => { })
+}
 
 
 </script>
 </script>

+ 9 - 9
src/views/index.vue

@@ -15,7 +15,7 @@
                     <div class="flex items-center justify-between dark:text-white-light mb-5">
                     <div class="flex items-center justify-between dark:text-white-light mb-5">
                         <h5 class="font-semibold text-lg">Revenue</h5>
                         <h5 class="font-semibold text-lg">Revenue</h5>
                         <div class="dropdown ltr:ml-auto rtl:mr-auto">
                         <div class="dropdown ltr:ml-auto rtl:mr-auto">
-                            <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="0" class="align-middle">
+                            <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="0" class="align-middle">
                                 <a href="javascript:;">
                                 <a href="javascript:;">
                                     <icon-horizontal-dots class="text-black/70 dark:text-white/70 hover:!text-primary" />
                                     <icon-horizontal-dots class="text-black/70 dark:text-white/70 hover:!text-primary" />
                                 </a>
                                 </a>
@@ -367,7 +367,7 @@
                     <div class="flex items-center justify-between dark:text-white-light mb-5">
                     <div class="flex items-center justify-between dark:text-white-light mb-5">
                         <h5 class="font-semibold text-lg">Transactions</h5>
                         <h5 class="font-semibold text-lg">Transactions</h5>
                         <div class="dropdown ltr:ml-auto rtl:mr-auto">
                         <div class="dropdown ltr:ml-auto rtl:mr-auto">
-                            <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="0" class="align-middle">
+                            <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="0" class="align-middle">
                                 <a href="javascript:;">
                                 <a href="javascript:;">
                                     <icon-horizontal-dots class="text-black/70 dark:text-white/70 hover:!text-primary" />
                                     <icon-horizontal-dots class="text-black/70 dark:text-white/70 hover:!text-primary" />
                                 </a>
                                 </a>
@@ -749,7 +749,7 @@
     import { ref, computed } from 'vue';
     import { ref, computed } from 'vue';
     import apexchart from 'vue3-apexcharts';
     import apexchart from 'vue3-apexcharts';
 
 
-    import { useAppStore } from '@/stores/index';
+    import { useStore } from 'vuex';
 
 
     import IconHorizontalDots from '@/components/icon/icon-horizontal-dots.vue';
     import IconHorizontalDots from '@/components/icon/icon-horizontal-dots.vue';
     import IconDollarSign from '@/components/icon/icon-dollar-sign.vue';
     import IconDollarSign from '@/components/icon/icon-dollar-sign.vue';
@@ -766,12 +766,12 @@
     import IconCaretDown from '@/components/icon/icon-caret-down.vue';
     import IconCaretDown from '@/components/icon/icon-caret-down.vue';
     import IconMultipleForwardRight from '@/components/icon/icon-multiple-forward-right.vue';
     import IconMultipleForwardRight from '@/components/icon/icon-multiple-forward-right.vue';
 
 
-    const store = useAppStore();
+    const store = useStore();
 
 
     // revenue
     // revenue
     const revenueChart = computed(() => {
     const revenueChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
+        const isDark = store.state.theme === 'dark' || store.state.isDarkMode ? true : false;
+        const isRtl = store.state.rtlClass === 'rtl' ? true : false;
 
 
         return {
         return {
             chart: {
             chart: {
@@ -923,7 +923,7 @@
 
 
     // sales by category
     // sales by category
     const salesByCategory = computed(() => {
     const salesByCategory = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+        const isDark = store.state.theme === 'dark' || store.state.isDarkMode ? true : false;
         return {
         return {
             chart: {
             chart: {
                 type: 'donut',
                 type: 'donut',
@@ -1009,7 +1009,7 @@
 
 
     // daily sales
     // daily sales
     const dailySales = computed(() => {
     const dailySales = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+        const isDark = store.state.theme === 'dark' || store.state.isDarkMode ? true : false;
         return {
         return {
             chart: {
             chart: {
                 height: 160,
                 height: 160,
@@ -1092,7 +1092,7 @@
 
 
     // total orders
     // total orders
     const totalOrders = computed(() => {
     const totalOrders = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+        const isDark = store.state.theme === 'dark' || store.state.isDarkMode ? true : false;
         return {
         return {
             chart: {
             chart: {
                 height: 290,
                 height: 290,

+ 1 - 1
theme.config.ts

@@ -2,7 +2,7 @@
 export const $themeConfig = {
 export const $themeConfig = {
     locale: 'zh', // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
     locale: 'zh', // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
     theme: 'light', // light, dark, system
     theme: 'light', // light, dark, system
-    menu: 'horizontal', // vertical, collapsible-vertical, horizontal
+    menu: 'vertical', // vertical, collapsible-vertical, horizontal
     layout: 'full', // full, boxed-layout
     layout: 'full', // full, boxed-layout
     rtlClass: 'ltr', // rtl, ltr
     rtlClass: 'ltr', // rtl, ltr
     animation: '', // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
     animation: '', // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn