初始化

src/components/spreadsheet/Toolbar.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref } from 'vue'
+import {
+  Undo2, Redo2, Bold, Italic, Underline,
+  AlignLeft, AlignCenter, AlignRight, Image as ImageIcon, Plus
+} from 'lucide-vue-next'
+
+const props = defineProps(['currentStyle'])
+const emit = defineEmits(['action'])
+
+const fileInput = ref(null)
+
+const triggerImageUpload = () => fileInput.value.click()
+
+// 支持多图上传的处理逻辑
+const handleImageUpload = async (e) => {
+  const files = Array.from(e.target.files)
+  if (files.length === 0) return
+
+  // 并发读取所有图片
+  const readers = files.map(file => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = (evt) => resolve(evt.target.result)
+      reader.onerror = reject
+      reader.readAsDataURL(file)
+    })
+  })
+
+  try {
+    const images = await Promise.all(readers)
+    // 触发批量插入事件
+    emit('action', 'insertImages', images)
+  } catch (error) {
+    console.error("图片读取失败", error)
+  }
+
+  // 重置 input 以便能重复上传同一文件
+  e.target.value = ''
+}
+
+const btnClass = "p-1.5 rounded hover:bg-gray-200 transition text-gray-600 flex items-center justify-center cursor-pointer"
+const activeClass = "bg-gray-300 text-black"
+</script>
+
+<template>
+  <div class="h-10 bg-[#fbfbfb] border-b border-gray-300 flex items-center px-2 gap-2 select-none shrink-0">
+    <div class="flex gap-1 pr-2 border-r border-gray-300">
+      <button :class="btnClass" title="撤销"><Undo2 class="w-4 h-4" /></button>
+      <button :class="btnClass" title="重做"><Redo2 class="w-4 h-4" /></button>
+    </div>
+
+    <div class="flex gap-1 pr-2 border-r border-gray-300">
+      <button :class="[btnClass, currentStyle.bold ? activeClass : '']" @click="$emit('action', 'toggleStyle', 'bold')">
+        <Bold class="w-4 h-4" />
+      </button>
+      <button :class="[btnClass, currentStyle.italic ? activeClass : '']" @click="$emit('action', 'toggleStyle', 'italic')">
+        <Italic class="w-4 h-4" />
+      </button>
+      <button :class="[btnClass, currentStyle.underline ? activeClass : '']" @click="$emit('action', 'toggleStyle', 'underline')">
+        <Underline class="w-4 h-4" />
+      </button>
+
+      <div class="w-px h-4 bg-gray-300 mx-1 self-center"></div>
+
+      <button :class="[btnClass, currentStyle.align === 'left' ? activeClass : '']" @click="$emit('action', 'setAlign', 'left')">
+        <AlignLeft class="w-4 h-4" />
+      </button>
+      <button :class="[btnClass, currentStyle.align === 'center' ? activeClass : '']" @click="$emit('action', 'setAlign', 'center')">
+        <AlignCenter class="w-4 h-4" />
+      </button>
+      <button :class="[btnClass, currentStyle.align === 'right' ? activeClass : '']" @click="$emit('action', 'setAlign', 'right')">
+        <AlignRight class="w-4 h-4" />
+      </button>
+    </div>
+
+    <div class="flex gap-1 pr-2 border-r border-gray-300">
+      <button :class="btnClass" title="插入图片" @click="triggerImageUpload">
+        <ImageIcon class="w-4 h-4" />
+      </button>
+      <!-- 关键修改：添加 multiple 属性支持多选 -->
+      <input type="file" ref="fileInput" class="hidden" accept="image/*" multiple @change="handleImageUpload">
+    </div>
+
+    <div class="flex gap-1">
+      <button class="flex items-center gap-1 px-2 py-1 hover:bg-gray-200 rounded text-xs text-gray-700" @click="$emit('action', 'addRow')">
+        <Plus class="w-3 h-3" /> 行
+      </button>
+      <button class="flex items-center gap-1 px-2 py-1 hover:bg-gray-200 rounded text-xs text-gray-700" @click="$emit('action', 'addCol')">
+        <Plus class="w-3 h-3" /> 列
+      </button>
+    </div>
+  </div>
+</template>