Feat: logout

frontend/src/components/AppHeader.vue

@@ -3,7 +3,7 @@ import { router, type RouterMetaInfo } from "@/config/router";
 import logo from "@/assets/logo.png";
 import { useLayoutContainerStore } from "@/stores/useLayoutContainerStore";
 import { useRoute } from "vue-router";
-import { computed, h, reactive } from "vue";
+import { computed, h } from "vue";
 import { useAppRouters } from "@/hooks/useAppRouters";
 import { notification } from "ant-design-vue";
 import {
@@ -14,25 +14,26 @@ import {
   UserOutlined,
   MenuUnfoldOutlined,
   FormatPainterOutlined,
-  FormatPainterFilled,
   TranslationOutlined
 } from "@ant-design/icons-vue";
 import { useScreen } from "@/hooks/useScreen";
 import CardPanel from "./CardPanel.vue";
 import { $t, setLanguage, $t as t } from "@/lang/i18n";
 import { THEME, useAppConfigStore } from "@/stores/useAppConfigStore";
-
+import { logoutUser } from "@/services/apis/index";
 import { message } from "ant-design-vue";
 import { useAppToolsStore } from "@/stores/useAppToolsStore";
-const [messageApi] = message.useMessage();
+// const [messageApi] = message.useMessage();
 const { containerState, changeDesignMode } = useLayoutContainerStore();
 const { getRouteParamsUrl, toPage } = useAppRouters();
-const { setTheme, isDarkTheme } = useAppConfigStore();
+const { setTheme } = useAppConfigStore();
 const { state: appTools } = useAppToolsStore();
 const openNewCardDialog = () => {
   containerState.showNewCardDialog = true;
 };
 
+const { execute } = logoutUser();
+
 const handleToPage = (url: string) => {
   containerState.showPhoneMenu = false;
   toPage({
@@ -170,9 +171,7 @@ const appMenus = computed(() => {
         notification.info({
           placement: "top",
           message: t("TXT_CODE_7b1adf35"),
-          description: t(
-            "TXT_CODE_6b6f1d3"
-          )
+          description: t("TXT_CODE_6b6f1d3")
         });
       },
       conditions: !containerState.isDesignMode,
@@ -190,9 +189,12 @@ const appMenus = computed(() => {
     {
       title: t("TXT_CODE_2c69ab15"),
       icon: LogoutOutlined,
-      click: () => {
-        toPage({ path: "/" });
-        messageApi.success(t("TXT_CODE_e6856d81"));
+      click: async () => {
+        await execute();
+        message.success(t("成功退出登录"));
+        router.go(0);
+        // toPage({ path: "/" });
+        // messageApi.success(t("TXT_CODE_e6856d81"));
       },
       conditions: !containerState.isDesignMode,
       onlyPC: false

frontend/src/services/apis/index.ts

@@ -24,6 +24,12 @@ export const loginUser = useDefineApi<
   method: "POST"
 });
 
+// 用户登出
+export const logoutUser = useDefineApi<any, any>({
+  url: "/api/auth/logout",
+  method: "GET"
+});
+
 // 获取当前登录的用户信息
 export const userInfoApi = useDefineApi<any, BaseUserInfo>({
   url: "/api/auth/"

frontend/src/widgets/NodeList.vue

@@ -17,7 +17,7 @@ import { useOverviewInfo, type ComputedNodeInfo } from "@/hooks/useOverviewInfo"
 import IconBtn from "@/components/IconBtn.vue";
 import NodeSimpleChart from "@/components/NodeSimpleChart.vue";
 
-const props = defineProps<{
+defineProps<{
   card: LayoutCard;
 }>();
 
@@ -105,7 +105,9 @@ const nodeOperations = [
           </template>
           <template #right>
             <a-button class="mr-12" type="primary">{{ t("TXT_CODE_15a381d5") }}</a-button>
-            <a-button>{{ t("TXT_CODE_3a302f23") }}</a-button>
+            <a-button href="https://docs.mcsmanager.com/" target="_black">
+              {{ t("TXT_CODE_3a302f23") }}
+            </a-button>
           </template>
           <template #center>
             <div class="search-input">
@@ -121,13 +123,9 @@ const nodeOperations = [
 
       <a-col :span="24">
         <a-typography-text type="secondary">
-          {{
-            t("TXT_CODE_f9a92e38")
-          }}
+          {{ t("TXT_CODE_f9a92e38") }}
           <br />
-          {{
-            t("TXT_CODE_a65c65c2")
-          }}
+          {{ t("TXT_CODE_a65c65c2") }}
         </a-typography-text>
       </a-col>