20260722222510

code/fms/fms-vue/src/layouts/components/AppTabs.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { ChevronLeft, ChevronRight, X } from "@lucide/vue";
+import { ArrowLeft, ChevronLeft, ChevronRight, House, Maximize2, Minimize2, RotateCw, X } from "@lucide/vue";
 import { theme } from "antdv-next";
 import { useAppStore } from "@/stores/app";
 
@@ -136,6 +136,22 @@ function handleTabKeydown(event, index) {
   event.preventDefault();
   focusAdjacentTab(index, event.key === "ArrowLeft" ? -1 : 1);
 }
+
+function goConsole() {
+  router.push("/dashboard");
+}
+
+function goBack() {
+  router.back();
+}
+
+function refreshCurrentRoute() {
+  appStore.refreshRoute();
+}
+
+function toggleMaximize() {
+  appStore.toggleContentMaximized();
+}
 </script>
 
 <template>
@@ -148,6 +164,41 @@ function handleTabKeydown(event, index) {
       '--tabs-idle-bg': token.colorFillQuaternary,
     }"
   >
+    <div class="tab-actions">
+      <a-tooltip title="返回上一页" placement="bottom">
+        <button
+          type="button"
+          class="tab-action"
+          aria-label="返回上一页"
+          @click="goBack"
+        >
+          <ArrowLeft />
+        </button>
+      </a-tooltip>
+      <span class="tab-action__divider" />
+      <a-tooltip title="刷新当前页" placement="bottom">
+        <button
+          type="button"
+          class="tab-action"
+          aria-label="刷新当前页"
+          @click="refreshCurrentRoute"
+        >
+          <RotateCw />
+        </button>
+      </a-tooltip>
+      <span class="tab-action__divider" />
+      <a-tooltip title="返回控制台" placement="bottom">
+        <button
+          type="button"
+          class="tab-action"
+          aria-label="返回控制台"
+          @click="goConsole"
+        >
+          <House />
+        </button>
+      </a-tooltip>
+    </div>
+
     <button
       v-if="overflowed"
       type="button"
@@ -200,6 +251,18 @@ function handleTabKeydown(event, index) {
     >
       <ChevronRight />
     </button>
+
+    <a-tooltip :title="appStore.contentMaximized ? '退出最大化' : '应用内最大化'" placement="bottom">
+      <button
+        type="button"
+        class="tab-nav-button tab-maximize"
+        aria-label="应用内最大化"
+        @click="toggleMaximize"
+      >
+        <Minimize2 v-if="appStore.contentMaximized" />
+        <Maximize2 v-else />
+      </button>
+    </a-tooltip>
   </header>
 </template>
 
@@ -319,4 +382,51 @@ function handleTabKeydown(event, index) {
     height: 14px;
   }
 }
+
+.tab-actions {
+  display: flex;
+  flex: none;
+  height: 28px;
+  align-items: center;
+  border: 1px solid var(--fms-border);
+  border-radius: 6px;
+  background: var(--fms-surface);
+  overflow: hidden;
+}
+
+.tab-action {
+  display: grid;
+  width: 30px;
+  height: 100%;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--fms-text-secondary);
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    color: var(--tabs-active-color);
+    background: var(--tabs-active-bg);
+  }
+
+  .lucide {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+.tab-action__divider {
+  flex: none;
+  width: 1px;
+  height: 16px;
+  background: var(--fms-border);
+}
+
+.tab-maximize {
+  margin-left: 2px;
+}
 </style>