@mt2025ui/mt-design 1.0.1

package/src/components/MtLayout/MtLayoutItem.vue

@@ -0,0 +1,1049 @@
+<template>
+  <div
+    class="mt-layout-item"
+    :class="[
+      { 'is-collapsed': isCollapsed },
+      { 'has-containers': containers.length > 0 },
+    ]"
+    :style="itemStyle"
+    ref="itemRef"
+  >
+    <!-- Header -->
+    <div class="mt-item-header" v-if="!hideHeader">
+      <!-- Left: Title/Tabs -->
+      <div class="mt-header-left">
+        <!-- Tabs Mode -->
+        <div v-if="containers.length > 0" class="mt-tabs-wrapper">
+          <div class="mt-tabs" ref="tabsRef">
+            <div
+              v-for="c in containers"
+              :key="c.id"
+              class="mt-tab"
+              :class="{ active: activeContainerId === c.id }"
+              :draggable="!gridLock"
+              @click="activateContainer(c.id)"
+              @dragstart="onTabDragStart($event, c.id)"
+              @dragover.prevent
+              @drop.stop="onTabDrop($event, c.id)"
+            >
+              <span class="mt-tab-text">{{ c.title }}</span>
+              <button class="mt-tab-close" @click.stop="closeContainer(c.id)">
+                <CloseIcon />
+              </button>
+            </div>
+          </div>
+
+          <!-- Overflow Menu Button -->
+          <div v-if="showOverflowBtn" class="mt-tabs-overflow">
+            <button
+              class="mt-icon-btn overflow-btn"
+              @click.stop="toggleOverflowMenu"
+              ref="overflowBtnRef"
+            >
+              <MenuIcon />
+            </button>
+
+            <!-- Dropdown Menu -->
+            <Teleport to="body">
+              <div
+                v-if="showOverflowMenu"
+                class="mt-overflow-menu"
+                :style="overflowMenuStyle"
+                @click.stop
+              >
+                <div
+                  v-for="c in containers"
+                  :key="c.id"
+                  class="mt-menu-item"
+                  :class="{ active: activeContainerId === c.id }"
+                  @click="selectFromMenu(c.id)"
+                >
+                  <span class="mt-menu-text">{{ c.title }}</span>
+                  <button
+                    class="mt-menu-close"
+                    @click.stop="closeContainer(c.id)"
+                  >
+                    <CloseIcon />
+                  </button>
+                </div>
+              </div>
+            </Teleport>
+          </div>
+        </div>
+        <!-- Title Mode -->
+        <div v-else class="mt-title">
+          {{ title || "Grid" }}
+        </div>
+      </div>
+
+      <!-- Right: Collapse & Grid Lock -->
+      <div class="mt-header-right">
+        <button
+          v-if="collapsible"
+          class="mt-icon-btn collapse-btn"
+          @click="toggleCollapse"
+        >
+          <span class="arrow" :class="{ rotated: isCollapsed }">▼</span>
+        </button>
+        <button class="mt-icon-btn lock-btn" @click="toggleGridLock">
+          <LockIcon v-if="gridLock" />
+          <UnlockIcon v-else />
+        </button>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div
+      class="mt-item-content"
+      :id="contentId"
+      v-show="!isCollapsed"
+      @dragover.prevent
+      @drop="onContentDrop"
+    >
+      <slot></slot>
+      <!-- If no containers and no default slot content, maybe show a drop zone hint? -->
+      <div v-if="containers.length === 0 && !$slots.default" class="empty-hint">
+        Empty Grid
+      </div>
+    </div>
+
+    <!-- Splitter (if not last) -->
+    <div
+      v-if="!isLast"
+      class="mt-layout-splitter"
+      :class="[
+        { locked: splitLock },
+        direction === 'horizontal' ? 'splitter-h' : 'splitter-v',
+      ]"
+      @mousedown="onSplitterMouseDown"
+    >
+      <div class="splitter-handle"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  inject,
+  provide,
+  onMounted,
+  onBeforeUnmount,
+  reactive,
+  watch,
+  nextTick,
+} from "vue";
+import LockIcon from "./icons/LockIcon.vue";
+import UnlockIcon from "./icons/UnlockIcon.vue";
+import CloseIcon from "./icons/CloseIcon.vue";
+import MenuIcon from "./icons/MenuIcon.vue";
+import { registerItem, unregisterItem, getItem } from "./registry";
+
+const props = defineProps({
+  title: String,
+  collapsible: {
+    type: Boolean,
+    default: true,
+  },
+  splitLock: {
+    type: Boolean,
+    default: false,
+  },
+  minSize: {
+    type: [Number, String],
+    default: 50,
+  },
+  initSize: {
+    type: [Number, String],
+    default: undefined,
+  },
+  hideHeader: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isCollapsed = ref(false);
+const gridLock = ref(false);
+const itemRef = ref<HTMLElement | null>(null);
+const itemSize = ref<string | undefined>(undefined);
+const tabsRef = ref<HTMLElement | null>(null);
+const overflowBtnRef = ref<HTMLElement | null>(null);
+const showOverflowBtn = ref(false);
+const showOverflowMenu = ref(false);
+const overflowMenuStyle = reactive({
+  top: "0px",
+  left: "0px",
+});
+
+// Parent Layout Context
+const layout = inject<any>("mt-layout");
+const itemId = `item-${Math.random().toString(36).substr(2, 9)}`;
+const contentId = `content-${itemId}`;
+
+// Check if last item
+const isLast = computed(() => layout?.isLastItem(itemId));
+const direction = computed(() => layout?.direction.value || "horizontal");
+
+// Container Management
+const containers = reactive<any[]>([]);
+const activeContainerId = ref<string | null>(null);
+
+const registerContainer = (c: any) => {
+  containers.push(c);
+  if (containers.length === 1) {
+    activateContainer(c.id);
+  } else if (containers.length > 1) {
+    // If adding a new container and we already have some, switch to it?
+    // Usually yes.
+    activateContainer(c.id);
+  }
+};
+
+const unregisterContainer = (id: string) => {
+  const idx = containers.findIndex((c) => c.id === id);
+  if (idx > -1) {
+    containers.splice(idx, 1);
+    if (activeContainerId.value === id) {
+      activeContainerId.value = containers.length > 0 ? containers[0].id : null;
+    }
+  }
+};
+
+const releaseContainer = (id: string) => {
+  const idx = containers.findIndex((c) => c.id === id);
+  if (idx > -1) {
+    const [c] = containers.splice(idx, 1);
+    if (activeContainerId.value === id) {
+      activeContainerId.value = containers.length > 0 ? containers[0].id : null;
+    }
+    return c;
+  }
+  return null;
+};
+
+const updateContainerTitle = (id: string, title: string) => {
+  const c = containers.find((c) => c.id === id);
+  if (c) c.title = title;
+};
+
+const activateContainer = (id: string) => {
+  activeContainerId.value = id;
+  containers.forEach((c) => {
+    c.setActive(c.id === id);
+  });
+};
+
+const closeContainer = (id: string) => {
+  if (gridLock.value) return;
+  // For closing, we just unregister.
+  // The MtContainer component will likely be unmounted by Vue if it was in a v-for?
+  // No, if it's static in slot, it won't be unmounted.
+  // We need to tell the container to hide or destroy itself?
+  // But we can't destroy the user's component.
+  // We just remove it from the tabs. The content will disappear because `isActive` becomes false.
+  unregisterContainer(id);
+};
+
+provide("mt-layout-item", {
+  itemId,
+  contentId,
+  registerContainer,
+  unregisterContainer,
+  updateContainerTitle,
+});
+
+const checkOverflow = () => {
+  if (tabsRef.value) {
+    const el = tabsRef.value;
+    showOverflowBtn.value = el.scrollWidth > el.clientWidth;
+  }
+};
+
+const toggleOverflowMenu = () => {
+  showOverflowMenu.value = !showOverflowMenu.value;
+  if (showOverflowMenu.value && overflowBtnRef.value) {
+    nextTick(() => {
+      const btnRect = overflowBtnRef.value!.getBoundingClientRect();
+      const menuWidth = 200; // Min width of menu
+      const windowWidth = window.innerWidth;
+
+      overflowMenuStyle.top = `${btnRect.bottom + 4}px`;
+
+      // Default: Align right edge of menu with right edge of button
+      let left = btnRect.right - menuWidth;
+
+      // Check if it overflows left edge of screen
+      if (left < 0) {
+        // Align left edge of menu with left edge of button
+        left = btnRect.left;
+      }
+
+      // Check if it overflows right edge of screen (shouldn't happen with default right alignment unless button is very far left, but good to check)
+      if (left + menuWidth > windowWidth) {
+        // Force it to fit within window
+        left = windowWidth - menuWidth - 4;
+      }
+
+      overflowMenuStyle.left = `${left}px`;
+    });
+  }
+};
+
+const closeOverflowMenu = () => {
+  showOverflowMenu.value = false;
+};
+
+const selectFromMenu = (id: string) => {
+  // Move to first position
+  const idx = containers.findIndex((c) => c.id === id);
+  if (idx > 0) {
+    const item = containers.splice(idx, 1)[0];
+    containers.unshift(item);
+  }
+
+  activateContainer(id);
+  closeOverflowMenu();
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+// Listen for outside clicks to close menu
+onMounted(() => {
+  document.addEventListener("click", closeOverflowMenu);
+  // Initial check if tabsRef exists (it might if containers has items initially)
+  if (tabsRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      checkOverflow();
+    });
+    resizeObserver.observe(tabsRef.value);
+  }
+});
+
+watch(tabsRef, (newVal) => {
+  if (newVal) {
+    if (resizeObserver) resizeObserver.disconnect();
+    resizeObserver = new ResizeObserver(() => {
+      checkOverflow();
+    });
+    resizeObserver.observe(newVal);
+    checkOverflow();
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", closeOverflowMenu);
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+// Watch for changes that might affect overflow
+watch(
+  () => containers.length,
+  () => {
+    nextTick(checkOverflow);
+  }
+);
+
+// itemSize watcher is handled by ResizeObserver now
+
+// Resizing Logic
+const onSplitterMouseDown = (e: MouseEvent) => {
+  if (props.splitLock || gridLock.value) return;
+
+  e.preventDefault();
+  const startX = e.clientX;
+  const startY = e.clientY;
+
+  // Get initial size of current item
+  const rect = itemRef.value?.getBoundingClientRect();
+  if (!rect) return;
+
+  // Get computed style to check for border width
+  let borderSize = 0;
+  if (itemRef.value) {
+    const computedStyle = window.getComputedStyle(itemRef.value);
+    if (layout.direction.value === "horizontal") {
+      borderSize =
+        parseFloat(computedStyle.borderLeftWidth) +
+        parseFloat(computedStyle.borderRightWidth);
+    } else {
+      borderSize =
+        parseFloat(computedStyle.borderTopWidth) +
+        parseFloat(computedStyle.borderBottomWidth);
+    }
+  }
+
+  // Get initial size without border
+  const startSize =
+    (layout.direction.value === "horizontal" ? rect.width : rect.height) -
+    borderSize;
+
+  // Determine resizing mode:
+  // Mode 1 (current item has fixed and next item is flex (no itemSize) or no next item): Resize current item (if it has fixed width or no next item).
+  // Mode 2 (current item has fixed and next item has fixed): resize current item and next item inverted.
+  // Mode 3 (current item is flex (no itemSize) and next item has fixed): resize next item inverted.
+
+  let targetItem: any = null;
+  let resizeMode: "current" | "next" | "both" = "current";
+  let nextItemStartSize = 0;
+  let nextItem: any = null;
+
+  if (layout && layout.items) {
+    const index = layout.items.findIndex((i: any) => i.id === itemId);
+    if (index > -1 && index < layout.items.length - 1) {
+      nextItem = layout.items[index + 1];
+      targetItem = nextItem;
+
+      // Check if next item has fixed size (explicitly set via setSize)
+      const nextItemHasFixedSize = nextItem.getSize && !!nextItem.getSize();
+
+      // Get next item's current size for calculation if needed
+      if (nextItemHasFixedSize) {
+        const nextSizeStr = nextItem.getSize();
+        if (typeof nextSizeStr === "string" && nextSizeStr.endsWith("px")) {
+          nextItemStartSize = parseInt(nextSizeStr);
+        } else {
+          // If next item has size but not px? Fallback to DOM size
+          const nextEl = itemRef.value?.nextElementSibling;
+          if (nextEl) {
+            const rect = nextEl.getBoundingClientRect();
+            // Get border size for next item
+            let nextBorderSize = 0;
+            const nextComputedStyle = window.getComputedStyle(nextEl);
+            if (layout.direction.value === "horizontal") {
+              nextBorderSize =
+                parseFloat(nextComputedStyle.borderLeftWidth) +
+                parseFloat(nextComputedStyle.borderRightWidth);
+            } else {
+              nextBorderSize =
+                parseFloat(nextComputedStyle.borderTopWidth) +
+                parseFloat(nextComputedStyle.borderBottomWidth);
+            }
+            // IMPORTANT: Check direction for correct dimension and subtract border size
+            nextItemStartSize =
+              (layout.direction.value === "horizontal"
+                ? rect.width
+                : rect.height) - nextBorderSize;
+          }
+        }
+      } else {
+        // Next item is flex (no explicit size set)
+        nextItemStartSize = 0;
+
+        // For Mode 3, we still need the current DOM size to convert to fixed
+        if (!itemSize.value) {
+          const nextEl = itemRef.value?.nextElementSibling;
+          if (nextEl) {
+            const rect = nextEl.getBoundingClientRect();
+            // Get border size for next item
+            let nextBorderSize = 0;
+            const nextComputedStyle = window.getComputedStyle(nextEl);
+            if (layout.direction.value === "horizontal") {
+              nextBorderSize =
+                parseFloat(nextComputedStyle.borderLeftWidth) +
+                parseFloat(nextComputedStyle.borderRightWidth);
+            } else {
+              nextBorderSize =
+                parseFloat(nextComputedStyle.borderTopWidth) +
+                parseFloat(nextComputedStyle.borderBottomWidth);
+            }
+            // IMPORTANT: Check direction for correct dimension and subtract border size
+            nextItemStartSize =
+              (layout.direction.value === "horizontal"
+                ? rect.width
+                : rect.height) - nextBorderSize;
+          }
+        }
+      }
+
+      // Determine resize mode based on current and next item's size status
+      if (itemSize.value) {
+        // Current item has fixed size
+        if (nextItemHasFixedSize) {
+          // Next item also has fixed size - Mode 2
+          resizeMode = "both";
+        } else {
+          // Next item is flex - Mode 1
+          resizeMode = "current";
+        }
+      } else {
+        // Current item is flex - Mode 3
+        resizeMode = "next";
+      }
+    } else {
+      // No next item - Mode 1
+      resizeMode = "current";
+    }
+  } else {
+    // No layout or items - Mode 1
+    resizeMode = "current";
+  }
+
+  const onMouseMove = (moveEvent: MouseEvent) => {
+    const deltaX = moveEvent.clientX - startX;
+    const deltaY = moveEvent.clientY - startY;
+
+    const delta = layout.direction.value === "horizontal" ? deltaX : deltaY;
+
+    if (resizeMode === "next" && targetItem) {
+      // Mode 3: Current item is flex, next item has fixed size
+      // Dragging right (positive delta) -> Next item should shrink (negative change)
+      // Dragging down (positive delta) -> Next item should shrink (negative change)
+      const newSize = Math.max(
+        Number(props.minSize),
+        nextItemStartSize - delta
+      );
+      targetItem.setSize(`${newSize}px`);
+    } else if (resizeMode === "both" && targetItem) {
+      // Mode 2: Both current and next items have fixed sizes
+      // Resize current item and next item inverted
+      const newCurrentSize = Math.max(Number(props.minSize), startSize + delta);
+      const newNextSize = Math.max(
+        Number(props.minSize),
+        nextItemStartSize - delta
+      );
+      itemSize.value = `${newCurrentSize}px`;
+      targetItem.setSize(`${newNextSize}px`);
+    } else {
+      // Mode 1: Current item has fixed size, next item is flex or no next item
+      // Standard behavior: Resize current item
+      // Dragging right/down (positive delta) -> Current item should grow
+      const newSize = Math.max(Number(props.minSize), startSize + delta);
+      itemSize.value = `${newSize}px`;
+    }
+  };
+
+  const onMouseUp = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+};
+
+// Drag and Drop Logic (Tabs)
+const onTabDragStart = (e: DragEvent, id: string) => {
+  if (gridLock.value || !e.dataTransfer) return;
+  e.dataTransfer.setData("text/mt-container-id", id);
+  e.dataTransfer.setData("text/mt-source-item-id", itemId);
+  e.dataTransfer.effectAllowed = "move";
+};
+
+const onTabDrop = (e: DragEvent, targetId: string) => {
+  if (gridLock.value) return;
+
+  const sourceId = e.dataTransfer?.getData("text/mt-container-id");
+  const sourceItemId = e.dataTransfer?.getData("text/mt-source-item-id");
+
+  if (!sourceId || !sourceItemId) return;
+
+  if (sourceItemId === itemId) {
+    // Reorder within same item
+    const oldIndex = containers.findIndex((c) => c.id === sourceId);
+    const newIndex = containers.findIndex((c) => c.id === targetId);
+
+    if (oldIndex > -1 && newIndex > -1 && oldIndex !== newIndex) {
+      // Move element
+      const item = containers.splice(oldIndex, 1)[0];
+      containers.splice(newIndex, 0, item);
+    }
+  }
+  // If different item, it's handled by onContentDrop or we could handle it here too.
+  // But dropping on a tab usually implies inserting AT that position, whereas dropping on content implies appending.
+  // For simplicity, we only handle local reorder here.
+};
+
+const onContentDrop = (e: DragEvent) => {
+  if (gridLock.value) return;
+
+  const containerId = e.dataTransfer?.getData("text/mt-container-id");
+  const sourceItemId = e.dataTransfer?.getData("text/mt-source-item-id");
+
+  if (containerId && sourceItemId && sourceItemId !== itemId) {
+    const sourceItem = getItem(sourceItemId);
+    if (sourceItem) {
+      const container = sourceItem.releaseContainer(containerId);
+      if (container) {
+        registerContainer(container);
+        container.setOwner(contentId, itemId);
+      }
+    }
+  }
+};
+
+const toggleCollapse = () => {
+  if (!gridLock.value) {
+    // Assuming lock also prevents collapse? Requirement doesn't say, but usually yes.
+    // Requirement: "layout grid support hide/expand, each layout grid also needs switch property also control whether can hide/expand"
+    // That switch property is `collapsible`.
+    isCollapsed.value = !isCollapsed.value;
+  }
+};
+
+const toggleGridLock = () => {
+  gridLock.value = !gridLock.value;
+};
+
+const itemStyle = computed(() => {
+  const style: any = {};
+
+  // If collapsed, we force inline styles to null/empty so CSS classes can take over.
+  // Crucially, we must clear width/height and flex.
+  if (isCollapsed.value) {
+    if (layout.direction.value === "horizontal") {
+      style.width = null;
+      style.height = null;
+    } else {
+      style.height = null;
+      style.width = null;
+    }
+    style.flex = null;
+    return style;
+  }
+
+  if (itemSize.value) {
+    if (layout.direction.value === "horizontal") {
+      style.width = itemSize.value;
+      style.flex = "none";
+    } else {
+      style.height = itemSize.value;
+      style.flex = "none";
+    }
+  } else {
+    style.flex = "1";
+  }
+  return style;
+});
+
+onMounted(() => {
+  if (props.initSize) {
+    itemSize.value =
+      typeof props.initSize === "number"
+        ? `${props.initSize}px`
+        : props.initSize;
+  }
+  layout?.addItem({
+    id: itemId,
+    getSize: () => itemSize.value,
+    setSize: (v: string | undefined) => (itemSize.value = v),
+  });
+  registerItem(itemId, {
+    releaseContainer,
+    // other methods if needed
+  });
+});
+
+onBeforeUnmount(() => {
+  layout?.removeItem(itemId);
+  unregisterItem(itemId);
+});
+</script>
+
+<style lang="scss" scoped>
+.mt-layout-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  transition: flex 0.1s; // smooth resize? maybe no
+
+  &.is-collapsed {
+    flex: 0 0 auto !important;
+
+    // Vertical collapse (default)
+    height: 32px;
+    overflow: hidden;
+
+    .mt-item-content {
+      display: none;
+    }
+  }
+
+  // Horizontal collapse overrides
+  .mt-layout-horizontal > & {
+    &.is-collapsed {
+      width: 32px; // Collapsed width
+      height: auto; // Reset height
+
+      .mt-item-header {
+        flex-direction: column;
+        width: 32px;
+        height: 100%;
+        padding: 4px 0;
+
+        .mt-header-left {
+          flex-direction: column;
+          width: 100%;
+
+          .mt-title {
+            padding: 4px 0;
+            white-space: nowrap;
+            writing-mode: vertical-rl;
+            text-orientation: mixed;
+          }
+
+          .mt-tabs-wrapper {
+            display: none; // Hide tabs when horizontally collapsed
+          }
+        }
+
+        .mt-header-right {
+          flex-direction: column;
+          width: 100%;
+          margin-top: auto;
+
+          .collapse-btn {
+            margin: 0 0 4px;
+
+            .arrow {
+              // Adjust rotation for vertical bar
+              transform: rotate(-90deg);
+
+              &.rotated {
+                transform: rotate(90deg);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .mt-item-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 32px;
+    padding: 0 4px;
+    user-select: none;
+    background: #f0f0f0;
+    border-bottom: 1px solid #e0e0e0;
+
+    .mt-header-left {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      overflow: hidden;
+
+      .mt-title {
+        padding-left: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #444;
+      }
+
+      .mt-tabs-wrapper {
+        position: relative;
+        display: flex;
+        flex: 1;
+        align-items: flex-end;
+        height: 100%;
+        padding-top: 4px;
+        overflow: hidden;
+
+        .mt-tabs {
+          display: flex;
+          flex: 1;
+          align-items: flex-end;
+          height: 100%;
+          overflow: hidden; /* Hide scrollbar, use overflow menu */
+
+          .mt-tab {
+            display: flex;
+            flex-shrink: 0; /* Prevent tabs from shrinking too small */
+            align-items: center;
+            min-width: 80px;
+            max-width: 160px;
+            height: 28px;
+            padding: 0 10px;
+            margin-right: 1px;
+            font-size: 12px;
+            color: #666;
+            cursor: pointer;
+            background: #e6e6e6;
+            border: 1px solid transparent;
+            border-bottom: none;
+            border-radius: 4px 4px 0 0;
+
+            &.active {
+              position: relative;
+              z-index: 1;
+              font-weight: 500;
+              color: #333;
+              background: #fff;
+              border-color: #e0e0e0;
+            }
+
+            &:hover:not(.active) {
+              color: #444;
+              background: #eaeaea;
+            }
+
+            .mt-tab-text {
+              flex: 1;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .mt-tab-close {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding: 2px;
+              margin-left: 6px;
+              color: #666;
+              cursor: pointer;
+              background: none;
+              border: none;
+              border-radius: 4px;
+              opacity: 0;
+
+              svg {
+                width: 12px;
+                height: 12px;
+              }
+
+              &:hover {
+                color: #333;
+                background-color: rgb(0 0 0 / 10%);
+              }
+            }
+
+            &:hover .mt-tab-close,
+            &.active .mt-tab-close {
+              opacity: 1;
+            }
+          }
+        }
+
+        .mt-tabs-overflow {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          z-index: 2;
+          display: flex;
+          align-items: center;
+          height: 28px;
+          padding: 0 4px;
+          background: #f0f0f0; /* Match header bg */
+          border-left: 1px solid #e0e0e0;
+
+          .overflow-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            padding: 4px;
+            color: #666;
+            cursor: pointer;
+            background-color: transparent !important;
+            border: none;
+            border-radius: 4px;
+
+            svg {
+              width: 14px;
+              height: 14px;
+            }
+
+            &:hover {
+              color: #333;
+              background-color: rgb(0 0 0 / 5%) !important;
+            }
+          }
+        }
+      }
+    }
+
+    .mt-header-right {
+      display: flex;
+      align-items: center;
+
+      .mt-icon-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        color: #666;
+        cursor: pointer;
+        background: none;
+        background-color: transparent !important; /* Force transparent */
+        border: none;
+        border-radius: 4px;
+
+        svg {
+          width: 14px;
+          height: 14px;
+        }
+
+        &:hover {
+          color: #333;
+          background-color: rgb(0 0 0 / 5%) !important;
+        }
+      }
+
+      .collapse-btn {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+
+        .arrow {
+          display: inline-block;
+          font-size: 10px;
+          color: #666;
+          transition: transform 0.2s;
+
+          &.rotated {
+            transform: rotate(-90deg);
+          }
+        }
+
+        &:hover .arrow {
+          color: #333;
+        }
+      }
+    }
+  }
+
+  .mt-item-content {
+    position: relative;
+    flex: 1;
+    padding: 8px;
+    overflow: auto;
+  }
+
+  /* Custom scrollbar styles */
+  .mt-item-content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .mt-item-content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  .mt-item-content::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+  }
+
+  .mt-item-content::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
+  }
+
+  /* When containers are present, let the container handle scrolling and remove padding */
+  &.has-containers .mt-item-content {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .mt-layout-splitter {
+    position: absolute;
+    z-index: 10;
+    background-color: transparent;
+    transition: background-color 0.2s;
+
+    &.splitter-h {
+      top: 0;
+      right: -2px; // overlap a bit
+      bottom: 0;
+      width: 4px;
+      cursor: col-resize;
+    }
+
+    &.splitter-v {
+      right: 0;
+      bottom: -2px; // overlap a bit
+      left: 0;
+      height: 4px;
+      cursor: row-resize;
+    }
+
+    &:hover {
+      background-color: #1890ff;
+    }
+
+    &.locked {
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: #ff4d4f;
+      }
+    }
+  }
+}
+
+.mt-overflow-menu {
+  position: fixed;
+  z-index: 99999; /* Ensure highest z-index */
+  min-width: 200px;
+  max-height: 300px;
+  padding: 4px 0;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
+
+  .mt-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    font-size: 12px;
+    color: #333;
+    cursor: pointer;
+
+    &:hover {
+      background: #f5f5f5;
+    }
+
+    &.active {
+      color: #1890ff;
+      background: #e6f7ff;
+    }
+
+    .mt-menu-text {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .mt-menu-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px;
+      margin-left: 8px;
+      color: #999;
+      cursor: pointer;
+      background: none;
+      border: none;
+      border-radius: 4px;
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+
+      &:hover {
+        color: #666;
+        background-color: rgb(0 0 0 / 10%);
+      }
+    }
+  }
+}
+
+:deep(.mt-item-header *) {
+  outline: none;
+}
+</style>