up

frontent/ops_vue_js/src/components/HeardMain.vue

@@ -1,20 +1,22 @@
 <script setup>
 import { useUserStore } from "@/stores/user";
 
-import { RouterLink } from "vue-router";
+import { RouterLink, useRouter } from "vue-router";
 
 import { useI18n } from "vue-i18n";
 
 import { myfuncs } from "@/myfunc.js";
 import { onMounted, ref } from "vue";
 
-
+// import { Tooltip } from "@tabler/core";
+// import { Dropdown } from 'bootstrap'
 
 // 使用 vue-i18n 的 Composition API
 const { t, locale } = useI18n();
 const userStore = useUserStore();
 const theTeme = ref("light");
 const lang_sele = ref(null);
+const router = useRouter();
 
 function set_them(temp) {
   theTeme.value = temp;
@@ -30,6 +32,12 @@ function changeLanguage(lang) {
   //console.log("selectedLang:",selectedLang);
 }
 
+function logOut() {
+  //console.log("logout");
+  userStore.logout();
+  router.push("/login");
+}
+
 onMounted(() => {
   const savedTheme = myfuncs.getThemefromStorge();
   theTeme.value = savedTheme;
@@ -42,10 +50,8 @@ onMounted(() => {
     }
   }
 
-
   //userlogin
-  userStore.loginFromStoreCookie()
-
+  userStore.loginFromStoreCookie();
 });
 </script>
 
@@ -169,30 +175,32 @@ onMounted(() => {
           </router-link>
         </div>
 
-        <div v-if="userStore.isLoggedIn" class="nav-item dropdown">
-          <a
-            href="#"
-            class="nav-link d-flex lh-1 p-0 px-2"
-            data-bs-toggle="dropdown"
-            aria-label="Open user menu"
-          >
-            <span
-              class="avatar avatar-sm"
-              style="background-image: url(./static/avatars/000m.jpg)"
+        <div v-else class="nav-item">
+          <div class="dropdown">
+            <div
+              
+              class="nav-link d-flex lh-1 p-0 px-2"
+              data-bs-toggle="dropdown"
+              aria-label="Open user menu"
             >
-            </span>
-            <div class="d-none d-xl-block ps-2">
-              <div>Paweł Kuna</div>
-              <div class="mt-1 small text-secondary">UI Designer</div>
+              <span
+                class="avatar avatar-sm"
+                style="background-image: url(./static/avatars/000m.jpg)"
+              >
+              </span>
+              <div class="d-none d-xl-block ps-2">
+                <div>Paweł Kuna</div>
+                <div class="mt-1 small text-secondary">UI Designer</div>
+              </div>
+            </div>
+            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+              <a href="#" class="dropdown-item">Status</a>
+              <a href="./profile.html" class="dropdown-item">Profile</a>
+              <a href="#" class="dropdown-item">Feedback</a>
+              <div class="dropdown-divider"></div>
+              <a href="./settings.html" class="dropdown-item">Settings</a>
+              <div @click="logOut" class="dropdown-item">Logout</div>
             </div>
-          </a>
-          <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
-            <a href="#" class="dropdown-item">Status</a>
-            <a href="./profile.html" class="dropdown-item">Profile</a>
-            <a href="#" class="dropdown-item">Feedback</a>
-            <div class="dropdown-divider"></div>
-            <a href="./settings.html" class="dropdown-item">Settings</a>
-            <a href="./sign-in.html" class="dropdown-item">Logout</a>
           </div>
         </div>
       </div>