@mt2025ui/mt-design 1.0.1

package/src/components/MtLayout/MtFloatingPanel.vue

@@ -0,0 +1,583 @@
+<template>
+  <div
+    class="mt-floating-panel"
+    :class="{
+      'is-collapsed': isCollapsed,
+      'is-mini': mini,
+      'is-interacting': isDragging || isResizing,
+    }"
+    :style="itemStyle"
+    ref="itemRef"
+  >
+    <!-- Header -->
+    <div class="mt-float-header" @mousedown="onHeaderMouseDown">
+      <!-- Left: Icon & Title -->
+      <div class="mt-header-left" v-if="!mini">
+        <div class="mt-icon">
+          <slot name="icon">
+            <!-- Default Icon (e.g. simple rect) -->
+            <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+              <path d="M1 2h14v12H1z" fill="none" stroke="currentColor" />
+              <path d="M1 5h14" stroke="currentColor" />
+            </svg>
+          </slot>
+        </div>
+        <span class="mt-title">{{ title }}</span>
+      </div>
+
+      <!-- Right: Actions -->
+      <div class="mt-header-right" v-if="!mini">
+        <button
+          v-if="collapsible"
+          class="mt-icon-btn collapse-btn"
+          @mousedown.stop
+          @click="toggleCollapse"
+        >
+          <svg
+            viewBox="0 0 16 16"
+            width="12"
+            height="12"
+            fill="currentColor"
+            class="arrow"
+            :class="{ rotated: isCollapsed }"
+          >
+            <path d="M8 11L3 6h10z" />
+          </svg>
+        </button>
+        <button class="mt-icon-btn close-btn" @mousedown.stop @click="close">
+          <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+            <path
+              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="mt-float-content" v-show="!isCollapsed">
+      <slot></slot>
+    </div>
+
+    <!-- Resize Handle -->
+    <div
+      v-if="resizable && !isCollapsed"
+      class="mt-resize-handle"
+      @mousedown="onResizeMouseDown"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Floating Panel",
+  },
+  width: {
+    type: [Number, String],
+    default: 300,
+  },
+  height: {
+    type: [Number, String],
+    default: 400,
+  },
+  x: {
+    type: String as () => "left" | "right",
+    default: "right",
+  },
+  y: {
+    type: String as () => "top" | "bottom",
+    default: "bottom",
+  },
+  xOffset: {
+    type: Number,
+    default: 20,
+  },
+  yOffset: {
+    type: Number,
+    default: 20,
+  },
+  collapsible: {
+    type: Boolean,
+    default: true,
+  },
+  defaultCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+  mini: {
+    type: Boolean,
+    default: false,
+  },
+  resizable: {
+    type: Boolean,
+    default: false,
+  },
+  heightOffset: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(["close"]);
+
+const isCollapsed = ref(props.defaultCollapsed);
+const itemRef = ref<HTMLElement | null>(null);
+const isDragging = ref(false);
+const isResizing = ref(false);
+
+// Current positions (offsets from the configured edge)
+const currentX = ref(props.xOffset);
+const currentY = ref(props.yOffset);
+const currentHeight = ref<number | string>(props.height);
+
+const itemStyle = computed(() => {
+  const style: any = {
+    position: "absolute",
+    zIndex: 1000,
+    width: typeof props.width === "number" ? `${props.width}px` : props.width,
+  };
+
+  // If not collapsed, apply height
+  if (!isCollapsed.value) {
+    let h = currentHeight.value;
+
+    // If props.height is a percentage string (e.g., "50%"), we want to apply calculation: calc(50% - offset)
+    // If it's a number (pixels), we apply: number - offset
+
+    if (h === "auto" || h === undefined || h === null) {
+      style.height = "auto";
+    } else {
+      // Convert unitless string "400" to number 400
+      let numericH: number | null = null;
+
+      if (typeof h === "number") {
+        numericH = h;
+      } else if (typeof h === "string" && /^\d+(\.\d+)?$/.test(h)) {
+        numericH = parseFloat(h);
+      }
+
+      if (numericH !== null) {
+        // It's a numeric value (pixels)
+        style.height = `${Math.max(0, numericH + props.heightOffset)}px`;
+      } else if (typeof h === "string") {
+        // It's a string with units (e.g. "50%", "100vh", "300px")
+        if (props.heightOffset !== 0) {
+          const sign = props.heightOffset > 0 ? "+" : "-";
+          style.height = `calc(${h} ${sign} ${Math.abs(props.heightOffset)}px)`;
+        } else {
+          style.height = h;
+        }
+      }
+    }
+  } else {
+    style.height = "auto";
+  }
+
+  // Positioning
+  if (props.x === "left") {
+    style.left = `${currentX.value}px`;
+    style.right = "auto";
+  } else {
+    style.right = `${currentX.value}px`;
+    style.left = "auto";
+  }
+
+  if (props.y === "top") {
+    style.top = `${currentY.value}px`;
+    style.bottom = "auto";
+  } else {
+    // If anchored to bottom, ensure it doesn't disappear when collapsed
+    // If collapsed, the height is just the header (32px or 8px for mini).
+    // If currentY (offset from bottom) is very small, it's fine.
+    // BUT if the logic implies dragging might have pushed it down?
+    // Wait, the user requirement says: "If positioning is bottom, when collapsed,
+    // the bottom value cannot be less than the component header height."
+    // This sounds like they want to prevent it from being hidden if the parent is too small?
+    // Or maybe they mean "If I collapse it, it shouldn't shrink 'down' off screen"?
+
+    // Actually, "bottom value" usually means `bottom: 20px`.
+    // If I collapse it, the `bottom` property stays `20px`. The top moves down.
+    // This is standard CSS behavior for `bottom` positioning.
+
+    // However, if the user means "don't let the header go below the viewport",
+    // that's usually handled by drag constraints.
+
+    // Re-reading: "bottom的值不能小于组件标题栏的高度" -> "The bottom value cannot be less than the component header height"
+    // This might mean ensuring `currentY` is at least 32px?
+    // Or does it mean "Don't let the top of the collapsed header go below the bottom of the screen"?
+    // If `bottom: 0`, the header is at the bottom edge. Visible.
+    // If `bottom: -32px`, it's hidden.
+
+    // Let's assume they want to enforce a minimum offset when collapsed to keep it accessible.
+    // Or maybe they mean when you collapse it, it should snap to the bottom?
+
+    // Let's implement a constraint: effective bottom offset >= 0. (Which is already the default for drag)
+
+    // Wait, maybe they mean during DRAG?
+    // "收起时" means "When collapsed".
+    // "bottom的值" means the `bottom` CSS property (which is `currentY`).
+    // "不能小于组件标题栏的高度" -> `currentY >= headerHeight`.
+
+    // Why? If `bottom: 0`, it sits ON the bottom edge. That seems fine?
+    // Maybe they want it to float *above* something?
+
+    // Let's stick to the literal request:
+    // If isCollapsed && y === 'bottom', ensure style.bottom >= headerHeight.
+
+    // Header height is 32px (normal) or 8px (mini).
+    const headerHeight = props.mini ? 8 : 32;
+
+    // If user requests this constraint:
+    // We check if we are collapsed.
+    // If so, we use Math.max(currentY.value, headerHeight) ?
+    // Or just ensure it doesn't look weird.
+
+    // Let's try: if collapsed, force bottom offset to be at least 0? (It already is).
+    // If the user drags it down, currentY decreases.
+
+    // Interpretation B:
+    // Maybe the user wants the collapsed item to "stick" up a bit more?
+    // Let's apply: effectiveBottom = isCollapsed ? Math.max(currentY.value, 0) : currentY.value.
+    // Actually, let's look at `onResizeMove`.
+    // When resizing from bottom (y='bottom'), we change `currentY`.
+
+    // If the request is about "When I click collapse, ensure it doesn't jump off screen or get covered".
+
+    // Let's apply the requested constraint literally:
+    // if (isCollapsed && y === 'bottom') -> style.bottom = max(currentY, headerHeight)
+
+    let effectiveBottom = currentY.value;
+    if (isCollapsed.value) {
+      // Constrain bottom offset when collapsed?
+      // This seems unusual unless they want it to act like a docked bar.
+      // Let's assume they want to ensure visibility.
+      // But if I put it at bottom: 0, it's visible.
+
+      // Maybe they mean "The top of the component shouldn't go below the parent bottom"?
+      // For a bottom-anchored element:
+      // Top = ParentHeight - BottomOffset - Height.
+      // If Collapsed, Height = 32.
+      // Top = ParentHeight - BottomOffset - 32.
+      // If BottomOffset = 0 -> Top = ParentHeight - 32. (Visible at bottom).
+
+      // If they mean "bottom value" (the variable `currentY`), then:
+      // style.bottom = currentY.
+
+      // Let's re-read carefully: "收起时bottom的值不能小于组件标题栏的高度"
+      // "When collapsed, the bottom value cannot be less than the component header height."
+      // If headerHeight is 32. They want bottom >= 32.
+      // This would make it float 32px *above* the bottom edge.
+      // This prevents it from being flush with the bottom edge?
+
+      // Let's implement it as requested.
+      const minBottom = props.mini ? 8 : 32;
+      if (effectiveBottom < minBottom) {
+        // But we don't want to permanently change currentY, just the display style?
+        // Or should we clamp currentY?
+        // If we clamp style, dragging might feel weird.
+        // Let's just clamp the style value.
+        effectiveBottom = Math.max(effectiveBottom, minBottom);
+      }
+    }
+
+    style.bottom = `${effectiveBottom}px`;
+    style.top = "auto";
+  }
+
+  return style;
+});
+
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value;
+};
+
+const close = () => {
+  emit("close");
+};
+
+// Dragging Logic
+const onHeaderMouseDown = (e: MouseEvent) => {
+  e.preventDefault();
+
+  isDragging.value = true;
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startOffsetX = currentX.value;
+  const startOffsetY = currentY.value;
+
+  const onMouseMove = (moveEvent: MouseEvent) => {
+    const deltaX = moveEvent.clientX - startX;
+    const deltaY = moveEvent.clientY - startY;
+
+    // Calculate new X offset based on alignment
+    if (props.x === "left") {
+      // Dragging right increases left offset
+      currentX.value = Math.max(0, startOffsetX + deltaX);
+    } else {
+      // Dragging right decreases right offset
+      currentX.value = Math.max(0, startOffsetX - deltaX);
+    }
+
+    // Calculate new Y offset based on alignment
+    if (props.y === "top") {
+      // Dragging down increases top offset
+      currentY.value = Math.max(0, startOffsetY + deltaY);
+    } else {
+      // Dragging down decreases bottom offset
+      currentY.value = Math.max(0, startOffsetY - deltaY);
+    }
+  };
+
+  const onMouseUp = () => {
+    isDragging.value = false;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+};
+
+// Resizing Logic
+const onResizeMouseDown = (e: MouseEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  isResizing.value = true;
+  const startY = e.clientY;
+
+  // Get initial VISUAL height in pixels (what the user sees)
+  const visualHeight = itemRef.value ? itemRef.value.offsetHeight : 0;
+
+  // We need to work with the "logical" height that matches our data model.
+  // Computed Style Logic: height = currentHeight + offset
+  // So: currentHeight = visualHeight - offset
+
+  const startLogicalHeight = visualHeight - props.heightOffset;
+  const startOffsetY = currentY.value;
+
+  const onResizeMove = (moveEvent: MouseEvent) => {
+    const deltaY = moveEvent.clientY - startY;
+
+    let newLogicalHeight = startLogicalHeight;
+    let newOffsetY = startOffsetY;
+
+    if (props.y === "top") {
+      // Dragging down increases height
+      // newLogicalHeight should be startLogicalHeight + deltaY
+      newLogicalHeight = Math.max(
+        100 - props.heightOffset,
+        startLogicalHeight + deltaY
+      );
+    } else {
+      // y="bottom"
+      // Drag down (deltaY > 0) -> Increase Height, Decrease Offset
+      const potentialOffsetY = startOffsetY - deltaY;
+
+      if (potentialOffsetY >= 0) {
+        // We increase the logical height by deltaY
+        newLogicalHeight = Math.max(
+          100 - props.heightOffset,
+          startLogicalHeight + deltaY
+        );
+        newOffsetY = potentialOffsetY;
+      } else {
+        const cappedDelta = startOffsetY;
+        // If we hit the bottom of screen (offset 0), we can only grow by the amount of startOffsetY
+        newLogicalHeight = Math.max(
+          100 - props.heightOffset,
+          startLogicalHeight + cappedDelta
+        );
+        newOffsetY = 0;
+      }
+    }
+
+    // CRITICAL FIX: Ensure we are setting a NUMBER, not a string, to engage the 'number' branch of itemStyle
+    currentHeight.value = newLogicalHeight;
+
+    if (props.y === "bottom") {
+      currentY.value = newOffsetY;
+    }
+  };
+
+  const onResizeUp = () => {
+    isResizing.value = false;
+    document.removeEventListener("mousemove", onResizeMove);
+    document.removeEventListener("mouseup", onResizeUp);
+  };
+
+  document.addEventListener("mousemove", onResizeMove);
+  document.addEventListener("mouseup", onResizeUp);
+};
+
+// Watch for prop changes to reset position if alignment changes (optional but good)
+watch(
+  () => [props.x, props.y],
+  () => {
+    currentX.value = props.xOffset;
+    currentY.value = props.yOffset;
+  }
+);
+
+watch(
+  () => props.height,
+  (val) => {
+    currentHeight.value = val;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.mt-floating-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  transition:
+    height 0s,
+    width 0s;
+
+  &.is-interacting {
+    user-select: none;
+    transition: none !important;
+  }
+
+  &.is-collapsed {
+    // Height handled by inline style 'auto'
+    .mt-float-content {
+      display: none;
+    }
+  }
+
+  &.is-mini {
+    .mt-float-header {
+      height: 8px;
+      min-height: 8px;
+      padding: 0;
+      background: #e0e0e0;
+      border-bottom: none;
+
+      &:hover {
+        background: #d0d0d0;
+      }
+    }
+
+    .mt-float-content {
+      border-top: none;
+    }
+  }
+
+  .mt-float-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 32px;
+    padding: 0 8px;
+    cursor: move;
+    user-select: none;
+    background: #f0f0f0;
+    border-bottom: 1px solid #e0e0e0;
+
+    .mt-header-left {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      .mt-icon {
+        display: flex;
+        align-items: center;
+        margin-right: 6px;
+        color: #666;
+      }
+
+      .mt-title {
+        overflow: hidden;
+        font-size: 13px;
+        font-weight: 600;
+        color: #333;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .mt-header-right {
+      display: flex;
+      align-items: center;
+
+      .mt-icon-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        margin-left: 2px;
+        color: #666;
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+
+        &:hover {
+          color: #333;
+          background-color: rgb(0 0 0 / 5%);
+        }
+
+        .arrow {
+          transition: transform 0.2s;
+
+          &.rotated {
+            transform: rotate(-90deg);
+          }
+        }
+      }
+    }
+  }
+
+  .mt-float-content {
+    position: relative;
+    flex: 1;
+    padding: 8px;
+    overflow: auto;
+
+    /* Custom Scrollbar */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #ccc;
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: #999;
+    }
+  }
+
+  .mt-resize-handle {
+    height: 6px;
+    cursor: ns-resize;
+    background-color: transparent;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #1890ff;
+    }
+  }
+}
+
+:deep(.mt-header-right *) {
+  outline: none;
+}
+</style>

package/src/components/MtLayout/MtLayout.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    class="mt-layout"
+    :class="[`mt-layout-${direction}`, { 'mt-layout-root': !isNested }]"
+    ref="layoutRef"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, ref, toRef, reactive, readonly, inject } from "vue";
+
+const props = defineProps({
+  direction: {
+    type: String as () => "horizontal" | "vertical",
+    default: "horizontal",
+  },
+});
+
+const layoutRef = ref<HTMLElement | null>(null);
+const items = reactive<any[]>([]);
+const parentLayout = inject<any>("mt-layout", null);
+const isNested = !!parentLayout;
+
+const addItem = (item: any) => {
+  items.push(item);
+};
+
+const removeItem = (id: string) => {
+  const index = items.findIndex((i) => i.id === id);
+  if (index > -1) {
+    items.splice(index, 1);
+  }
+};
+
+// Check if an item is the last one
+const isLastItem = (id: string) => {
+  if (items.length === 0) return true;
+  return items[items.length - 1].id === id;
+};
+
+// Handle resize
+// The splitter is associated with the item BEFORE it.
+// Dragging the splitter changes the size of the item BEFORE it and the item AFTER it (or pushes others).
+// For simplicity, let's assume flexbox.
+// If we use flex-grow, resizing is tricky.
+// Better to use explicit width/height percentages or pixels.
+// Let's use flex-basis or explicit width/height.
+
+const resizeItem = (id: string, delta: number) => {
+  const index = items.findIndex((i) => i.id === id);
+  if (index === -1 || index === items.length - 1) return;
+
+  const currentItem = items[index];
+  // We don't necessarily need to adjust the next item if we are using flexbox and total width.
+  // But usually we want to shrink the next item.
+
+  // Implementation detail: we will call a method on the item to request a size change.
+  // Or simpler: the items manage their own DOM size via styles, but the logic is here.
+
+  // Let's rely on the items to expose a resize method.
+  if (props.direction === "horizontal") {
+    currentItem.resize(delta);
+  } else {
+    currentItem.resize(delta);
+  }
+};
+
+provide("mt-layout", {
+  direction: toRef(props, "direction"),
+  addItem,
+  removeItem,
+  isLastItem,
+  resizeItem,
+  items: readonly(items),
+});
+
+defineExpose({
+  layoutRef,
+});
+</script>
+
+<style lang="scss" scoped>
+.mt-layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &.mt-layout-horizontal {
+    flex-direction: row;
+  }
+
+  &.mt-layout-vertical {
+    flex-direction: column;
+  }
+}
+</style>