优化交互

2026-01-22 16:00:59 +08:00
parent bec166eb55
commit 2c2ab1e4f0
5 changed files with 488 additions and 223 deletions
--- a/src/components/spreadsheet/ContextMenu.vue
+++ b/src/components/spreadsheet/ContextMenu.vue
@@ -1,7 +1,44 @@
 <script setup>
-import { Image as ImageIcon } from 'lucide-vue-next'
+import { ref, onMounted, nextTick, watch } from 'vue'
+import {
+  Scissors, Copy, ClipboardPaste, Image as ImageIcon,
+  ArrowUp, ArrowDown, ArrowLeft, ArrowRight,
+  Trash2, X
+} from 'lucide-vue-next'
+
 const props = defineProps(['x', 'y'])
 const emit = defineEmits(['action', 'close'])
+const menuRef = ref(null)
+
+// 实际渲染坐标
+const adjustedX = ref(props.x)
+const adjustedY = ref(props.y)
+
+// 计算位置，防止溢出
+const adjustPosition = async () => {
+  adjustedX.value = props.x
+  adjustedY.value = props.y
+
+  await nextTick()
+  if (!menuRef.value) return
+
+  const rect = menuRef.value.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  // 如果右侧溢出，向左弹出
+  if (rect.right > viewportWidth) {
+    adjustedX.value = props.x - rect.width
+  }
+
+  // 如果底部溢出，向上弹出
+  if (rect.bottom > viewportHeight) {
+    adjustedY.value = props.y - rect.height
+  }
+}
+
+// 监听坐标变化重新计算
+watch(() => [props.x, props.y], adjustPosition, { immediate: true })

 const emitAction = (name) => {
  emit('action', name)
@@ -10,28 +47,73 @@ const emitAction = (name) => {
 </script>

 <template>
-  <div class="fixed bg-white rounded shadow-xl border border-gray-200 py-1 w-48 text-xs text-gray-700 z-[9999]"
-       :style="{ top: y + 'px', left: x + 'px' }"
+  <div ref="menuRef"
+       class="fixed bg-white rounded-lg shadow-xl border border-gray-200 py-1.5 w-52 text-xs text-gray-700 z-[9999]"
+       :style="{ top: adjustedY + 'px', left: adjustedX + 'px' }"
       @click.stop>
-    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between" @click="emitAction('copy')">
-      <span>复制</span><span class="text-gray-400">Ctrl+C</span>
+
+    <!-- 剪贴板操作 -->
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between items-center" @click="emitAction('cut')">
+      <div class="flex items-center gap-2">
+        <Scissors class="w-3.5 h-3.5 text-gray-500" />
+        <span>剪切</span>
+      </div>
+      <span class="text-gray-400 text-[10px]">Ctrl+X</span>
    </div>
-    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between" @click="emitAction('paste')">
-      <span>粘贴</span><span class="text-gray-400">Ctrl+V</span>
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between items-center" @click="emitAction('copy')">
+      <div class="flex items-center gap-2">
+        <Copy class="w-3.5 h-3.5 text-gray-500" />
+        <span>复制</span>
+      </div>
+      <span class="text-gray-400 text-[10px]">Ctrl+C</span>
+    </div>
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between items-center" @click="emitAction('paste')">
+      <div class="flex items-center gap-2">
+        <ClipboardPaste class="w-3.5 h-3.5 text-gray-500" />
+        <span>粘贴</span>
+      </div>
+      <span class="text-gray-400 text-[10px]">Ctrl+V</span>
    </div>
    <div class="h-px bg-gray-200 my-1"></div>

-    <!-- 新增：右键插入图片 -->
+    <!-- 插入对象 -->
    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex items-center gap-2" @click="emitAction('insertImage')">
-      <ImageIcon class="w-3 h-3 text-gray-500" />
+      <ImageIcon class="w-3.5 h-3.5 text-gray-500" />
      <span>插入图片...</span>
    </div>
+    <div class="h-px bg-gray-200 my-1"></div>

+    <!-- 行列操作 -->
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex items-center gap-2" @click="emitAction('insertRowAbove')">
+      <ArrowUp class="w-3.5 h-3.5 text-gray-500" />
+      <span>在上方插入 1 行</span>
+    </div>
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex items-center gap-2" @click="emitAction('insertRowBelow')">
+      <ArrowDown class="w-3.5 h-3.5 text-gray-500" />
+      <span>在下方插入 1 行</span>
+    </div>
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex items-center gap-2" @click="emitAction('insertColLeft')">
+      <ArrowLeft class="w-3.5 h-3.5 text-gray-500" />
+      <span>在左侧插入 1 列</span>
+    </div>
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer flex items-center gap-2" @click="emitAction('insertColRight')">
+      <ArrowRight class="w-3.5 h-3.5 text-gray-500" />
+      <span>在右侧插入 1 列</span>
+    </div>
    <div class="h-px bg-gray-200 my-1"></div>
-    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer" @click="emitAction('insertRowAbove')">在上方插入 1 行</div>
-    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer" @click="emitAction('insertRowBelow')">在下方插入 1 行</div>
-    <div class="h-px bg-gray-200 my-1"></div>
-    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-500" @click="emitAction('deleteRow')">删除所在行</div>
-    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-500" @click="emitAction('clear')">清除内容</div>
+
+    <!-- 删除操作 -->
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-600 flex items-center gap-2" @click="emitAction('deleteRow')">
+      <Trash2 class="w-3.5 h-3.5 text-red-500" />
+      <span>删除所在行</span>
+    </div>
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-600 flex items-center gap-2" @click="emitAction('deleteCol')">
+      <Trash2 class="w-3.5 h-3.5 text-red-500" />
+      <span>删除所在列</span>
+    </div>
+    <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-600 flex items-center gap-2" @click="emitAction('clear')">
+      <X class="w-3.5 h-3.5 text-red-500" />
+      <span>清除内容</span>
+    </div>
  </div>
 </template>
--- a/src/components/spreadsheet/GridEditor.vue
+++ b/src/components/spreadsheet/GridEditor.vue
@@ -8,25 +8,28 @@ import ContextMenu from './ContextMenu.vue'
 const store = useSpreadsheetStore()
 const scroller = ref(null)
 const contextMenu = reactive({ visible: false, x: 0, y: 0 })
-const hiddenFileInput = ref(null) // 隐藏的文件上传 input
+const hiddenFileInput = ref(null)

-// 交互状态
 const isDragging = ref(false)
 const isFilling = ref(false)

 const HEADER_WIDTH = 40
 const HEADER_HEIGHT = 32

-// --- 核心：高级复制/粘贴逻辑 ---
+// --- 辅助方法：自动调整行高 ---
+const ensureRowHeightForImage = (rowIndex) => {
+  const row = store.rows.find(r => r.index === rowIndex)
+  if (row && row.height < 100) {
+    row.height = 100
+  }
+}

-const performCopy = async () => {
+// --- 剪贴板逻辑 (复制/剪切/粘贴) ---
+
+const performCopy = async (isCut = false) => {
  try {
    const { minR, maxR, minC, maxC } = store
-
-    // 1. 构建用于内部粘贴的完整数据结构 (2D Array of JSON)
    const jsonGrid = []
-
-    // 2. 构建 HTML 和 Text
    let text = ''
    let html = '<table border="1">'

@@ -34,22 +37,17 @@ const performCopy = async () => {
      const rowJson = []
      const rowValues = []
      html += '<tr>'
-
      for (let c = minC; c <= maxC; c++) {
        const cell = store.getCell(r, c)
+        // 深度拷贝单元格数据
+        rowJson.push(JSON.parse(JSON.stringify(cell)))

-        // 保存完整状态到 JSON Grid
-        rowJson.push(JSON.parse(JSON.stringify(cell))) // Deep copy
-
-        // 文本格式
        let val = cell.value == null ? '' : String(cell.value)
        rowValues.push(val)

-        // HTML 格式 (外部兼容)
+        // 构建 HTML
        let cellHtml = val.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
-        if (cell.type === 'image') {
-          cellHtml = `<img src="${val}" alt="image" style="max-width:100%;" />`
-        }
+        if (cell.type === 'image') cellHtml = `<img src="${val}" alt="image" style="max-width:100%;" />`

        let styleStr = ''
        if (cell.style) {
@@ -58,34 +56,33 @@ const performCopy = async () => {
          if (cell.style.bg) styleStr += `background-color:${cell.style.bg};`
          if (cell.style.align) styleStr += `text-align:${cell.style.align};`
        }
-
        html += `<td style="${styleStr}">${cellHtml}</td>`
      }
-
      jsonGrid.push(rowJson)
      text += rowValues.join('\t') + (r < maxR ? '\n' : '')
      html += '</tr>'
    }
    html += '</table>'

-    // *** 关键：将 JSON 数据嵌入到 HTML 中 ***
-    // 我们使用 data-spreadsheet-json 属性包裹序列化后的数据
-    // 这样在粘贴 HTML 时，我们可以提取这个属性来获得 100% 的还原度
+    // 序列化 JSON 数据并嵌入 HTML 中，实现高保真粘贴
    const serializedData = JSON.stringify(jsonGrid)
    const wrappedHtml = `<div data-spreadsheet-json='${serializedData}'>${html}</div>`

-    const textBlob = new Blob([text], { type: 'text/plain' })
-    const htmlBlob = new Blob([wrappedHtml], { type: 'text/html' })
-
    await navigator.clipboard.write([
      new ClipboardItem({
-        'text/plain': textBlob,
-        'text/html': htmlBlob
+        'text/plain': new Blob([text], { type: 'text/plain' }),
+        'text/html': new Blob([wrappedHtml], { type: 'text/html' })
      })
    ])
-    console.log('Copied with Rich Format')
+
+    // 如果是剪切，只标记状态（UI变虚线），不立即删除
+    if (isCut) {
+      store.setCutSelection()
+    } else {
+      store.clearCutSelection() // 普通复制会取消剪切状态
+    }
  } catch (err) {
-    console.error('Failed to copy: ', err)
+    console.error('剪贴板操作失败', err)
  }
 }

@@ -93,83 +90,78 @@ const performPaste = async () => {
  try {
    const items = await navigator.clipboard.read()
    let pasted = false
-
    for (const item of items) {
      if (item.types.includes('text/html')) {
        const blob = await item.getType('text/html')
        const html = await blob.text()
-
-        // 1. 尝试提取内部 JSON 数据
        const parser = new DOMParser()
        const doc = parser.parseFromString(html, 'text/html')
        const wrapper = doc.querySelector('[data-spreadsheet-json]')

        if (wrapper) {
-          // 命中！这是我们自己的数据，完美还原
          try {
-            const jsonGrid = JSON.parse(wrapper.dataset.spreadsheetJson)
-            pasteJsonGrid(jsonGrid)
+            // 优先尝试高保真 JSON 粘贴
+            pasteJsonGrid(JSON.parse(wrapper.dataset.spreadsheetJson))
            pasted = true
-            console.log('Pasted High-Fidelity JSON')
-          } catch (e) {
-            console.error('Failed to parse internal JSON', e)
-          }
-        }
-
-        if (!pasted) {
-          // 2. 没有 JSON，走普通 HTML 解析 (保留图片链接等)
-          pasteHtml(html)
-          pasted = true
-          console.log('Pasted HTML')
+          } catch (e) {}
        }
+        if (!pasted) { pasteHtml(html); pasted = true; }
        break
      }
    }
-
    if (!pasted) {
-      // 3. 降级到纯文本
      const text = await navigator.clipboard.readText()
      pasteText(text)
-      console.log('Pasted Text')
    }
+
+    // 粘贴完成后，检查是否有剪切状态。如果有，执行真正的剪切（清除原数据）。
+    if (store.cutSelection) {
+      store.executeCut()
+    }
+
  } catch (err) {
-    console.error('Paste failed', err)
+    // 降级逻辑：直接读取文本
+    try {
+      const text = await navigator.clipboard.readText()
+      if (text) pasteText(text)
+      if (store.cutSelection) store.executeCut()
+    } catch(e) {}
  }
 }

-// 粘贴 JSON Grid (高保真)
 const pasteJsonGrid = (grid) => {
  const startR = store.selection.start.r
  const startC = store.selection.start.c
-
  grid.forEach((row, rIndex) => {
    row.forEach((cellData, cIndex) => {
      const targetR = startR + rIndex
      const targetC = startC + cIndex
      if (targetR < store.rows.length && targetC < store.cols.length) {
-        // 直接覆盖整个 Cell 对象 (包括 style, type, value)
        store.setCell(targetR, targetC, cellData)
+        // 如果是图片，自动撑开行高
+        if (cellData.type === 'image') {
+          ensureRowHeightForImage(targetR)
+        }
      }
    })
  })
 }

-// 粘贴 HTML (普通)
 const pasteHtml = (html) => {
  const parser = new DOMParser()
  const doc = parser.parseFromString(html, 'text/html')
  const trs = doc.querySelectorAll('tr')
-
  if (trs.length === 0) {
    const img = doc.querySelector('img')
-    if(img && img.src) store.setCell(store.selection.start.r, store.selection.start.c, { type:'image', value: img.src })
+    if(img && img.src) {
+      store.setCell(store.selection.start.r, store.selection.start.c, { type:'image', value: img.src })
+      ensureRowHeightForImage(store.selection.start.r)
+    }
    else pasteText(doc.body.textContent)
    return
  }
-
  const startR = store.selection.start.r
  const startC = store.selection.start.c
-
  trs.forEach((tr, rIndex) => {
    const tds = tr.querySelectorAll('td, th')
    tds.forEach((td, cIndex) => {
@@ -179,11 +171,9 @@ const pasteHtml = (html) => {
        const img = td.querySelector('img')
        if (img && img.src) {
          store.setCell(targetR, targetC, { value: img.src, type: 'image' })
-        } else {
-          // 这里我们只恢复文本，不恢复样式（因为外部 HTML 样式太复杂）
-          // 如果需要，可以解析 td.style
-          store.setCell(targetR, targetC, { value: td.textContent.trim(), type: 'text' })
+          ensureRowHeightForImage(targetR)
        }
+        else store.setCell(targetR, targetC, { value: td.textContent.trim(), type: 'text' })
      }
    })
  })
@@ -194,7 +184,6 @@ const pasteText = (text) => {
  const rows = text.split(/\r\n|\n|\r/)
  const startR = store.selection.start.r
  const startC = store.selection.start.c
-
  rows.forEach((rowStr, rIndex) => {
    if (rIndex === rows.length - 1 && rowStr === '') return
    const cols = rowStr.split('\t')
@@ -205,6 +194,7 @@ const pasteText = (text) => {
        const cleanVal = val.trim()
        if (cleanVal.startsWith('data:image/') || /\.(jpeg|jpg|gif|png|webp)/i.test(cleanVal)) {
          store.setCell(targetR, targetC, { value: cleanVal, type: 'image' })
+          ensureRowHeightForImage(targetR)
        } else {
          store.setCell(targetR, targetC, { value: val, type: 'text' })
        }
@@ -213,34 +203,23 @@ const pasteText = (text) => {
  })
 }

-// --- 右键上传图片逻辑 ---
-
-const triggerHiddenFileInput = () => {
-  hiddenFileInput.value.click()
-}
-
-const handleContextMenuImageUpload = async (e) => {
+// --- 图片上传 ---
+const triggerHiddenFileInput = () => hiddenFileInput.value.click()
+const handleContextMenuImageUpload = (e) => {
  const file = e.target.files[0]
  if (!file) return
-
  const reader = new FileReader()
  reader.onload = (evt) => {
    const base64 = evt.target.result
-    // 插入到当前选中单元格
-    store.setCell(store.selection.start.r, store.selection.start.c, {
-      type: 'image',
-      value: base64
-    })
-    // 自动调整当前行高以便预览
-    const row = store.rows.find(r => r.index === store.selection.start.r)
-    if (row) row.height = 100
+    const r = store.selection.start.r
+    store.setCell(r, store.selection.start.c, { type: 'image', value: base64 })
+    ensureRowHeightForImage(r)
  }
  reader.readAsDataURL(file)
-  e.target.value = '' // reset
+  e.target.value = ''
 }

-// --- 基础交互 ---
-
+// --- 鼠标交互 ---
 const getCellByPoint = (x, y) => {
  if (!scroller.value) return { r: -1, c: -1 }
  const contentEl = scroller.value.firstElementChild
@@ -248,7 +227,6 @@ const getCellByPoint = (x, y) => {
  const rect = contentEl.getBoundingClientRect()
  const relX = x - rect.left - HEADER_WIDTH
  const relY = y - rect.top - HEADER_HEIGHT
-
  if (relX < 0 || relY < 0) return { r: -1, c: -1 }

  let c = 0, currentX = 0
@@ -256,7 +234,6 @@ const getCellByPoint = (x, y) => {
    currentX += store.cols[c].width
    c++
  }
-
  let r = 0, currentY = 0
  while(r < store.rows.length && currentY + store.rows[r].height < relY) {
    currentY += store.rows[r].height
@@ -290,15 +267,18 @@ const handleMouseUp = () => {
  }
  if (isFilling.value) {
    isFilling.value = false
-    const { r, c } = store.selection.end
-    store.autoFill(r, c)
+    store.autoFill(store.selection.end.r, store.selection.end.c)
  }
 }

+// 右键处理
 const handleContextMenu = (e) => {
  const { r, c } = getCellByPoint(e.clientX, e.clientY)
  if (r !== -1 && c !== -1) {
-    if (!store.isRowSelected(r) || !store.isColSelected(c)) store.select(r, c)
+    // 如果点击在选区外，则更新选中；选区内则保留选中状态(方便对选区操作)
+    if (!store.isRowSelected(r) || !store.isColSelected(c)) {
+      store.select(r, c)
+    }
  }
  contextMenu.x = e.clientX
  contextMenu.y = e.clientY
@@ -310,37 +290,72 @@ const handleContextAction = (action) => {
  const c = store.selection.start.c
  switch(action) {
    case 'copy': performCopy(); break;
+    case 'cut': performCopy(true); break; // 触发剪切
    case 'paste': performPaste(); break;
    case 'insertImage': triggerHiddenFileInput(); break;
    case 'insertRowAbove': store.insertRow(r, 1); break;
    case 'insertRowBelow': store.insertRow(r + 1, 1); break;
+    case 'insertColLeft': store.insertCol(c, 1); break;
+    case 'insertColRight': store.insertCol(c + 1, 1); break;
    case 'deleteRow': store.deleteRow(r); break;
-    case 'clear': store.forEachSelectedCell((row,col) => store.setCell(row,col,{value:''})); break;
+    case 'deleteCol': store.deleteCol(c); break;
+    case 'clear': store.clearSelection(); break;
  }
 }

+// 快捷键处理
 const handleKeyDown = (e) => {
  if (store.isEditing) return

-  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
-    e.preventDefault(); performCopy(); return
+  const { r, c } = store.selection.start
+  const isCtrl = e.ctrlKey || e.metaKey
+  const key = e.key.toLowerCase()
+
+  // 1. 系统级操作
+  if (isCtrl) {
+    if (key === 'c') { e.preventDefault(); performCopy(); return }
+    if (key === 'x') { e.preventDefault(); performCopy(true); return } // 剪切
+    if (key === 'v') { e.preventDefault(); performPaste(); return }
+    if (key === 'z') { e.preventDefault(); e.shiftKey ? store.redo() : store.undo(); return }
+    if (key === 'y') { e.preventDefault(); store.redo(); return }
+    if (key === 'a') { e.preventDefault(); store.selectAll(); return }
  }
-  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
-    e.preventDefault(); performPaste(); return
+
+  // 2. 导航
+  if (e.key === 'Tab') {
+    e.preventDefault()
+    e.shiftKey ? (c > 0 && store.select(r, c - 1)) : (c < store.cols.length - 1 && store.select(r, c + 1))
+    return
+  }
+
+  // Esc 取消剪切状态
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    store.clearCutSelection()
+    return
  }

  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)) e.preventDefault()
+  if (e.key === 'ArrowUp' && r > 0) store.select(r - 1, c)
+  else if (e.key === 'ArrowDown') store.select(r + 1, c)
+  else if (e.key === 'ArrowLeft' && c > 0) store.select(r, c - 1)
+  else if (e.key === 'ArrowRight') store.select(r, c + 1)

-  const current = store.selection.start
-  if (e.key === 'ArrowUp' && current.r > 0) store.select(current.r - 1, current.c)
-  else if (e.key === 'ArrowDown') store.select(current.r + 1, current.c)
-  else if (e.key === 'ArrowLeft' && current.c > 0) store.select(current.r, current.c - 1)
-  else if (e.key === 'ArrowRight') store.select(current.r, current.c + 1)
-  else if (e.key === 'Enter') store.select(current.r + 1, current.c)
-  else if (e.key === 'Backspace' || e.key === 'Delete') {
-    store.forEachSelectedCell((r, c) => store.setCell(r, c, { value: '', type: 'text' }))
+  // 3. 回车行为
+  else if (e.key === 'Enter') {
+    e.preventDefault()
+    e.shiftKey ? (r > 0 && store.select(r - 1, c)) : store.select(r + 1, c)
  }
-  else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey) {
+
+  // 4. 编辑
+  else if (e.key === 'F2') {
+    e.preventDefault(); store.enableEditing();
+  }
+  else if (e.key === 'Backspace' || e.key === 'Delete') {
+    store.clearSelection()
+  }
+  // 普通输入
+  else if (e.key.length === 1 && !isCtrl && !e.altKey) {
    e.preventDefault()
    store.enableEditing()
    store.editingValue = e.key
@@ -359,7 +374,6 @@ watchEffect(() => {

 <template>
  <div class="relative w-full h-full outline-none" tabindex="0" @keydown="handleKeyDown">
-    <!-- 隐藏的文件输入，用于右键上传 -->
    <input type="file" ref="hiddenFileInput" class="hidden" accept="image/*" @change="handleContextMenuImageUpload">

    <div class="w-full h-full overflow-auto bg-[#f4f5f7] relative custom-scrollbar" ref="scroller">
@@ -409,8 +423,9 @@ watchEffect(() => {

            <SelectionOverlay
                :selection="store.selection"
-                :is-editing="store.isEditing"
+                :cut-layout-info="store.cutLayoutInfo"
                :layout-info="store.layoutInfo"
+                :is-editing="store.isEditing"
                @fill-drag-start="isFilling = true"
            />

--- a/src/components/spreadsheet/SelectionOverlay.vue
+++ b/src/components/spreadsheet/SelectionOverlay.vue
@@ -1,26 +1,46 @@
 <script setup>
 import { computed, ref, reactive } from 'vue'

-const props = defineProps(['selection', 'layoutInfo', 'isEditing'])
+const props = defineProps(['selection', 'layoutInfo', 'cutLayoutInfo', 'isEditing'])
 defineEmits(['fill-drag-start'])

-const fillPreview = ref(false)
-const fillPreviewRect = reactive({ w:0, h:0 })
+const style = computed(() => {
+  if (!props.layoutInfo) return {}
+  return {
+    top: props.layoutInfo.top + 'px',
+    left: props.layoutInfo.left + 'px',
+    width: props.layoutInfo.width + 'px',
+    height: props.layoutInfo.height + 'px',
+  }
+})

-const style = computed(() => ({
-  top: props.layoutInfo.top + 'px',
-  left: props.layoutInfo.left + 'px',
-  width: props.layoutInfo.width + 'px',
-  height: props.layoutInfo.height + 'px',
-}))
+const cutStyle = computed(() => {
+  if (!props.cutLayoutInfo) return {}
+  return {
+    top: props.cutLayoutInfo.top + 'px',
+    left: props.cutLayoutInfo.left + 'px',
+    width: props.cutLayoutInfo.width + 'px',
+    height: props.cutLayoutInfo.height + 'px',
+    display: 'block'
+  }
+})
 </script>

 <template>
-  <div class="pointer-events-none z-20 absolute border-2 border-green-500 bg-green-500/10 transition-all duration-75"
-       :style="style">
-    <div v-if="!isEditing"
-         class="pointer-events-auto cursor-crosshair absolute w-2 h-2 bg-green-500 border border-white -bottom-1.5 -right-1.5 z-50"
-         @mousedown.stop="$emit('fill-drag-start', $event)"
-    ></div>
+  <div>
+    <!-- Cut Selection (Dashed Animation) -->
+    <div v-if="cutLayoutInfo"
+         class="pointer-events-none z-10 absolute border-2 border-dashed border-gray-400 animate-pulse bg-gray-100/30"
+         :style="cutStyle">
+    </div>
+
+    <!-- Current Selection (Solid Green) -->
+    <div class="pointer-events-none z-20 absolute border-2 border-green-500 bg-green-500/10 transition-all duration-75"
+         :style="style">
+      <div v-if="!isEditing"
+           class="pointer-events-auto cursor-crosshair absolute w-2 h-2 bg-green-500 border border-white -bottom-1.5 -right-1.5 z-50"
+           @mousedown.stop="$emit('fill-drag-start', $event)"
+      ></div>
+    </div>
  </div>
 </template>