Ver Fonte

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

yangg há 1 ano atrás
pai
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>
     <div
         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>
-        <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>
 </template>
 
@@ -22,7 +17,7 @@
     import { useMeta } from '@/composables/use-meta';
     import router from '@/router';
 
-    const store:any = useStore();
+    const store = useStore();
 
    const godashbord=()=>{
         router.push(({path:'/apps/applist'}))
@@ -35,7 +30,7 @@
     useMeta({ title: 'Sales Admin' });
 
     const mainLayout = computed(() => {
-        return store.mainLayout === 'auth' ? authLayout : appLayout;
+        return store.state.mainLayout === 'auth' ? authLayout : appLayout;
     });
 </script>
 <style>

+ 2 - 2
src/api/common.js

@@ -13,7 +13,7 @@ import Storage from '@/utils/storage'
  * @returns {string}
  */
 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}
   return request({
-    url: `http://192.168.8.101:9998/validator`,
+    url: `${import.meta.env.VITE_API_URL}/validator`,
     method: 'GET',
     needToken: false
   })

+ 86 - 116
src/components/ThemeCustomizer.vue

@@ -1,69 +1,49 @@
 <template>
     <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"
-                @click="showCustomizer = !showCustomizer"
-            >
+                @click="showCustomizer = !showCustomizer">
                 <icon-settings class="animate-[spin_3s_linear_infinite] w-5 h-5" />
             </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 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"
-                            @click="showCustomizer = false"
-                        >
+                            @click="showCustomizer = false">
                             <icon-x class="w-5 h-5" />
                         </a>
                         <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 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>
                         <p class="text-white-dark text-xs">Overall light or dark presentation.</p>
                         <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" />
                                 Light
                             </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" />
                                 Dark
                             </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" />
                                 System
                             </button>
@@ -74,34 +54,26 @@
                         <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>
                         <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
                             </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
                             </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
                             </button>
                         </div>
                         <div class="mt-5 text-primary">
                             <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>
                             </label>
                         </div>
@@ -110,20 +82,14 @@
                         <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>
                         <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
                             </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
                             </button>
                         </div>
@@ -132,20 +98,14 @@
                         <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>
                         <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
                             </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
                             </button>
                         </div>
@@ -156,33 +116,19 @@
                         <p class="text-white-dark text-xs">Sticky or Floating.</p>
                         <div class="mt-3 flex items-center gap-3 text-primary">
                             <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>
                             </label>
                             <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>
                             </label>
                             <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>
                             </label>
                         </div>
@@ -192,7 +138,8 @@
                         <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>
                         <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="animate__fadeIn">Fade</option>
                                 <option value="animate__fadeInDown">Fade Down</option>
@@ -213,13 +160,36 @@
 </template>
 
 <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>

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

@@ -1,98 +1,75 @@
 <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="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">
                     <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="" />
                         <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>
-<!-- 原导航 -->
-                    <!-- <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"
-                        @click="store.toggleSidebar()"
-                    >
+                        @click="toggleSidebars">
                         <icon-menu class="w-5 h-5" />
-                    </a> -->
+                    </a>
                 </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]">
                         <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 />
                             </router-link>
                         </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 />
                             </router-link>
                         </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 />
                             </router-link>
                         </li>
                     </ul>
-                </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
                             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>
 
-                        <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"
-                            @click="search = !search"
-                        >
+                            @click="search = !search">
                             <icon-search class="w-4.5 h-4.5 mx-auto dark:text-[#d0d2d6]" />
                         </button>
-                    </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"
-                            @click="store.toggleTheme('dark')"
-                        >
+                            @click="toggleTheme('dark')">
                             <icon-sun />
                         </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"
-                            @click="store.toggleTheme('system')"
-                        >
+                            @click="toggleTheme('system')">
                             <icon-moon />
                         </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"
-                            @click="store.toggleTheme('dark')"
-                        >
+                            @click="toggleTheme('dark')">
                             <!-- <icon-laptop /> -->
                             <icon-sun />
 
@@ -100,30 +77,30 @@
                     </div>
 
 
-                   
+
 
                     <!-- <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 />
 
                                 <span class="flex absolute w-3 h-3 ltr:right-0 rtl:left-0 top-0">
                                     <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>
                             </button>
                             <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>
                                         <div class="flex items-center px-4 py-2 justify-between font-semibold">
                                             <h4 class="text-lg">Notification</h4>
                                             <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>
                                         </div>
                                     </li>
@@ -132,24 +109,21 @@
                                             <div class="group flex items-center px-4 py-2">
                                                 <div class="grid place-content-center rounded">
                                                     <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 class="ltr:pl-3 rtl:pr-3 flex flex-auto">
                                                     <div class="ltr:pr-3 rtl:pl-3">
                                                         <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>
-                                                    <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"
-                                                        @click="removeNotification(notification.id)"
-                                                    >
+                                                        @click="removeNotification(notification.id)">
                                                         <icon-x-circle />
                                                     </button>
                                                 </div>
@@ -159,14 +133,17 @@
                                     <template v-if="notifications.length">
                                         <li>
                                             <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>
                                         </li>
                                     </template>
                                     <template v-if="!notifications.length">
                                         <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" />
                                                 </div>
                                                 No data available.
@@ -179,28 +156,28 @@
                     </div> -->
 
                     <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">
-                                <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>
                             <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>
                                         <div class="flex items-center px-4 py-4">
                                             <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 class="ltr:pl-4 rtl:pr-4 truncate">
                                                 <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>
-                                                <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>
                                     </li>
@@ -211,10 +188,10 @@
                                             个人信息
                                         </router-link>
                                     </li>
-                                   
-                                
+
+
                                     <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" />
 
                                             退出
@@ -227,147 +204,155 @@
                 </div>
             </div>
 
-  
+
         </div>
     </header>
 </template>
 
 <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>

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

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

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

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

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

@@ -1,43 +1,35 @@
 <template>
-    <div class="text-black dark:text-white-dark">
+    <div class="text-black dark:text-white-dark h-screen">
         <!-- 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">
                 <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
-                    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>
             </svg>
         </div>
 
         <div class="fixed bottom-6 ltr:right-6 rtl:left-6 z-50">
             <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"
-                    @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"
-                            fill="currentColor"
-                        />
+                            fill="currentColor" />
                         <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"
-                            fill="currentColor"
-                        />
+                            fill="currentColor" />
                     </svg>
                 </button>
             </template>
@@ -46,24 +38,23 @@
     </div>
 </template>
 <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>

+ 2 - 4
src/permission.js

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

+ 17 - 7
src/router/index.ts

@@ -1,16 +1,13 @@
 import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory, Router } from 'vue-router';
 import { useStore } from 'vuex';
 import appSetting from '@/app-setting';
+import HomeView from '../views/index.vue';
 
 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({
-    history: createWebHistory(),
+    history: createWebHashHistory(),
     scrollBehavior: () => ({ y: 0 }),
     routes: constantRouterMap
 })
@@ -20,10 +17,23 @@ const asyncRouterMap: RouteRecordRaw[] = [
         redirect: '/dashboard',
         name: 'dashboard',
         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 default router;

+ 5 - 11
src/stores/index.ts

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

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

@@ -28,10 +28,11 @@ export const mutations = {
    * @param token
    * @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
    * @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) {
         API_Login.login(params).then(response => {
           const { access_token, refresh_token, ...user } = response
+          console.log('Committing SET_USER and SET_ACCESS_TOKEN') // 调试信息
           commit('SET_USER', user)
           commit('SET_ACCESS_TOKEN', access_token)
           commit('SET_REFRESH_TOKEN', refresh_token)

+ 2 - 2
src/utils/request.js

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

+ 0 - 1
src/utils/storage.js

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

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

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

+ 9 - 9
src/views/index.vue

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

+ 1 - 1
theme.config.ts

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