v3-comf-dm 1.0.0

package/packages/components/ImageCropper/index.vue

@@ -0,0 +1,826 @@
+<template>
+  <div ref="containerRef" class="vc-image-cropper" :style="containerStyle" tabindex="0">
+    <div v-if="!imageSrc" class="vc-image-cropper-placeholder">
+      <div class="placeholder-content">
+        <svg
+          width="64"
+          height="64"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <circle cx="8.5" cy="8.5" r="1.5"></circle>
+          <polyline points="21 15 16 10 5 21"></polyline>
+        </svg>
+        <p>请选择图片</p>
+      </div>
+    </div>
+
+    <div v-else class="vc-image-cropper-content" ref="contentRef">
+      <div
+        ref="imageWrapperRef"
+        class="vc-image-wrapper"
+        :style="imageWrapperStyle"
+        @mousedown="handleMouseDown"
+        @wheel.prevent="handleWheel"
+      >
+        <img
+          ref="imageRef"
+          :src="imageSrc"
+          :style="imageStyle"
+          @load="handleImageLoad"
+          draggable="false"
+        />
+
+        <!-- 裁剪框 -->
+        <div
+          v-if="imageLoaded"
+          ref="cropBoxRef"
+          class="vc-crop-box"
+          :style="cropBoxStyle"
+          @mousedown.stop="handleCropBoxMouseDown"
+        >
+          <!-- 网格线 -->
+          <div v-if="showGrid" class="vc-crop-grid">
+            <div class="grid-line grid-line-h1"></div>
+            <div class="grid-line grid-line-h2"></div>
+            <div class="grid-line grid-line-v1"></div>
+            <div class="grid-line grid-line-v2"></div>
+          </div>
+
+          <!-- 控制点 -->
+          <div
+            v-for="(handle, index) in cropHandles"
+            :key="index"
+            class="vc-crop-handle"
+            :class="handle.class"
+            :style="handle.style"
+            @mousedown.stop="handleResizeStart($event, handle.type)"
+          ></div>
+        </div>
+      </div>
+
+      <!-- 工具栏 -->
+      <div v-if="imageLoaded" class="vc-cropper-toolbar">
+        <div v-if="zoomable" class="toolbar-group">
+          <label class="toolbar-label">缩放:</label>
+          <input
+            v-model.number="zoom"
+            type="range"
+            :min="minZoom"
+            :max="maxZoom"
+            :step="0.1"
+            class="toolbar-slider"
+            @input="handleZoomChange"
+          />
+          <span class="toolbar-value">{{ Math.round(zoom * 100) }}%</span>
+        </div>
+
+        <div v-if="rotatable" class="toolbar-group">
+          <button class="toolbar-btn" @click="rotateImage(-90)" title="逆时针旋转">↺</button>
+          <button class="toolbar-btn" @click="rotateImage(90)" title="顺时针旋转">↻</button>
+        </div>
+
+        <div class="toolbar-group">
+          <button class="toolbar-btn toolbar-btn-primary" @click="handleCrop">确认裁剪</button>
+          <button class="toolbar-btn" @click="handleCancel">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import type { ImageCropperProps, ImageCropperEmits, CropArea } from './types'
+
+const props = withDefaults(defineProps<ImageCropperProps>(), {
+  cropMode: 'free',
+  minWidth: 50,
+  minHeight: 50,
+  showGrid: true,
+  rotatable: true,
+  zoomable: true,
+  initialZoom: 1,
+  containerWidth: '100%',
+  containerHeight: '600px',
+})
+
+const emit = defineEmits<ImageCropperEmits>()
+
+// Refs
+const containerRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const imageWrapperRef = ref<HTMLElement | null>(null)
+const imageRef = ref<HTMLImageElement | null>(null)
+const cropBoxRef = ref<HTMLElement | null>(null)
+
+// 状态
+const imageLoaded = ref(false)
+const imageNaturalWidth = ref(0)
+const imageNaturalHeight = ref(0)
+const imageDisplayWidth = ref(0)
+const imageDisplayHeight = ref(0)
+const rotation = ref(0)
+const zoom = ref(props.initialZoom)
+const minZoom = ref(0.1)
+const maxZoom = ref(5)
+
+// 裁剪区域（相对于图片的坐标）
+const cropArea = ref<CropArea>({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+})
+
+// 拖拽状态
+const isDragging = ref(false)
+const isResizing = ref(false)
+const dragType = ref<string>('')
+const dragStart = ref({ x: 0, y: 0 })
+const cropStart = ref<CropArea>({ x: 0, y: 0, width: 0, height: 0 })
+
+// 容器样式
+const containerStyle = computed(() => ({
+  width:
+    typeof props.containerWidth === 'number' ? `${props.containerWidth}px` : props.containerWidth,
+  height:
+    typeof props.containerHeight === 'number'
+      ? `${props.containerHeight}px`
+      : props.containerHeight,
+}))
+
+// 图片包装器样式
+const imageWrapperStyle = computed(() => ({
+  transform: `rotate(${rotation.value}deg) scale(${zoom.value})`,
+  transformOrigin: 'center center',
+}))
+
+// 图片样式
+const imageStyle = computed(() => ({
+  width: `${imageDisplayWidth.value}px`,
+  height: `${imageDisplayHeight.value}px`,
+  display: 'block',
+}))
+
+// 裁剪框样式
+const cropBoxStyle = computed(() => ({
+  left: `${cropArea.value.x}px`,
+  top: `${cropArea.value.y}px`,
+  width: `${cropArea.value.width}px`,
+  height: `${cropArea.value.height}px`,
+}))
+
+// 裁剪控制点
+const cropHandles = computed(() => {
+  return [
+    { type: 'nw', class: 'handle-nw', style: { top: '-4px', left: '-4px', cursor: 'nwse-resize' } },
+    {
+      type: 'ne',
+      class: 'handle-ne',
+      style: { top: '-4px', right: '-4px', cursor: 'nesw-resize' },
+    },
+    {
+      type: 'sw',
+      class: 'handle-sw',
+      style: { bottom: '-4px', left: '-4px', cursor: 'nesw-resize' },
+    },
+    {
+      type: 'se',
+      class: 'handle-se',
+      style: { bottom: '-4px', right: '-4px', cursor: 'nwse-resize' },
+    },
+    {
+      type: 'n',
+      class: 'handle-n',
+      style: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' },
+    },
+    {
+      type: 's',
+      class: 'handle-s',
+      style: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' },
+    },
+    {
+      type: 'w',
+      class: 'handle-w',
+      style: { top: '50%', left: '-4px', transform: 'translateY(-50%)', cursor: 'ew-resize' },
+    },
+    {
+      type: 'e',
+      class: 'handle-e',
+      style: { top: '50%', right: '-4px', transform: 'translateY(-50%)', cursor: 'ew-resize' },
+    },
+  ]
+})
+
+// 图片加载完成
+const handleImageLoad = () => {
+  if (!imageRef.value) return
+
+  imageNaturalWidth.value = imageRef.value.naturalWidth
+  imageNaturalHeight.value = imageRef.value.naturalHeight
+
+  nextTick(() => {
+    updateImageDisplaySize()
+    initCropArea()
+    imageLoaded.value = true
+    emit('ready')
+  })
+}
+
+// 更新图片显示尺寸
+const updateImageDisplaySize = () => {
+  if (!contentRef.value || !imageRef.value) return
+
+  // 使用内容区域的尺寸作为参考
+  const containerWidth = contentRef.value.clientWidth
+  const containerHeight = contentRef.value.clientHeight
+
+  if (containerWidth === 0 || containerHeight === 0) return
+
+  const naturalAspect = imageNaturalWidth.value / imageNaturalHeight.value
+  const containerAspect = containerWidth / containerHeight
+
+  if (naturalAspect > containerAspect) {
+    // 图片较宽，以容器宽度为准
+    imageDisplayWidth.value = containerWidth * 0.9
+    imageDisplayHeight.value = (containerWidth * 0.9) / naturalAspect
+  } else {
+    // 图片较高，以容器高度为准
+    imageDisplayHeight.value = containerHeight * 0.9
+    imageDisplayWidth.value = containerHeight * 0.9 * naturalAspect
+  }
+}
+
+// 初始化裁剪区域
+const initCropArea = () => {
+  const width = imageDisplayWidth.value
+  const height = imageDisplayHeight.value
+  const size = Math.min(width, height) * 0.8
+
+  let cropWidth = size
+  let cropHeight = size
+
+  if (props.cropMode === 'fixed') {
+    cropWidth = props.fixedWidth || size
+    cropHeight = props.fixedHeight || size
+  } else if (props.cropMode === 'ratio' && props.aspectRatio) {
+    if (width / height > props.aspectRatio) {
+      cropHeight = size
+      cropWidth = size * props.aspectRatio
+    } else {
+      cropWidth = size
+      cropHeight = size / props.aspectRatio
+    }
+  }
+
+  cropArea.value = {
+    x: (width - cropWidth) / 2,
+    y: (height - cropHeight) / 2,
+    width: cropWidth,
+    height: cropHeight,
+  }
+}
+
+// 鼠标按下（拖拽图片）
+const handleMouseDown = (e: MouseEvent) => {
+  if (e.target !== imageWrapperRef.value) return
+  isDragging.value = true
+  dragStart.value = { x: e.clientX, y: e.clientY }
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  e.preventDefault()
+}
+
+// 裁剪框鼠标按下
+const handleCropBoxMouseDown = (e: MouseEvent) => {
+  if (e.target === cropBoxRef.value) {
+    isDragging.value = true
+    dragType.value = 'crop-box'
+    dragStart.value = { x: e.clientX, y: e.clientY }
+    cropStart.value = { ...cropArea.value }
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    e.preventDefault()
+  }
+}
+
+// 开始调整大小
+const handleResizeStart = (e: MouseEvent, type: string) => {
+  isResizing.value = true
+  dragType.value = type
+  dragStart.value = { x: e.clientX, y: e.clientY }
+  cropStart.value = { ...cropArea.value }
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  e.preventDefault()
+}
+
+// 鼠标移动
+const handleMouseMove = (e: MouseEvent) => {
+  if (!contentRef.value) return
+
+  // 计算鼠标在屏幕上的移动距离，并除以缩放倍数
+  const screenDeltaX = (e.clientX - dragStart.value.x) / zoom.value
+  const screenDeltaY = (e.clientY - dragStart.value.y) / zoom.value
+
+  // 【核心修复】将屏幕移动坐标转换回旋转后的本地坐标系
+  // 公式：x' = x*cos(θ) + y*sin(θ), y' = -x*sin(θ) + y*cos(θ)
+  // 这里 θ 取负值，因为我们要从屏幕坐标转回组件本地坐标
+  const rad = (-rotation.value * Math.PI) / 180
+  const cos = Math.cos(rad)
+  const sin = Math.sin(rad)
+
+  const deltaX = screenDeltaX * cos - screenDeltaY * sin
+  const deltaY = screenDeltaX * sin + screenDeltaY * cos
+
+  if (isDragging.value && dragType.value === 'crop-box') {
+    // 拖拽裁剪框
+    // 【核心修复】由于裁剪框在旋转容器内部，边界限制应始终使用图片的原始显示尺寸
+    const width = imageDisplayWidth.value
+    const height = imageDisplayHeight.value
+    const newX = Math.max(0, Math.min(cropStart.value.x + deltaX, width - cropArea.value.width))
+    const newY = Math.max(0, Math.min(cropStart.value.y + deltaY, height - cropArea.value.height))
+
+    cropArea.value.x = newX
+    cropArea.value.y = newY
+  } else if (isResizing.value) {
+    // 调整裁剪框大小
+    resizeCropBox(deltaX, deltaY)
+  }
+}
+
+// 调整裁剪框大小
+const resizeCropBox = (deltaX: number, deltaY: number) => {
+  const width = imageDisplayWidth.value
+  const height = imageDisplayHeight.value
+  const { x, y, width: w, height: h } = cropStart.value
+  const type = dragType.value
+
+  let newX = x
+  let newY = y
+  let newWidth = w
+  let newHeight = h
+
+  // 根据拖拽类型调整
+  if (type.includes('e')) {
+    newWidth = Math.max(props.minWidth, Math.min(w + deltaX, width - x, props.maxWidth || Infinity))
+  }
+  if (type.includes('w')) {
+    const maxWidth = x + w
+    newWidth = Math.max(props.minWidth, Math.min(w - deltaX, maxWidth, props.maxWidth || Infinity))
+    newX = Math.max(0, x + w - newWidth)
+  }
+  if (type.includes('s')) {
+    newHeight = Math.max(
+      props.minHeight,
+      Math.min(h + deltaY, height - y, props.maxHeight || Infinity)
+    )
+  }
+  if (type.includes('n')) {
+    const maxHeight = y + h
+    newHeight = Math.max(
+      props.minHeight,
+      Math.min(h - deltaY, maxHeight, props.maxHeight || Infinity)
+    )
+    newY = Math.max(0, y + h - newHeight)
+  }
+
+  // 处理固定比例
+  if (props.cropMode === 'ratio' && props.aspectRatio) {
+    const currentAspect = newWidth / newHeight
+    if (Math.abs(currentAspect - props.aspectRatio) > 0.01) {
+      if (type.includes('e') || type.includes('w')) {
+        newHeight = newWidth / props.aspectRatio
+        if (type.includes('n')) {
+          newY = y + h - newHeight
+        }
+      } else {
+        newWidth = newHeight * props.aspectRatio
+        if (type.includes('w')) {
+          newX = x + w - newWidth
+        }
+      }
+    }
+  }
+
+  // 边界检查
+  if (newX + newWidth > width) {
+    newWidth = width - newX
+    if (props.cropMode === 'ratio' && props.aspectRatio) {
+      newHeight = newWidth / props.aspectRatio
+    }
+  }
+  if (newY + newHeight > height) {
+    newHeight = height - newY
+    if (props.cropMode === 'ratio' && props.aspectRatio) {
+      newWidth = newHeight * props.aspectRatio
+    }
+  }
+
+  cropArea.value = { x: newX, y: newY, width: newWidth, height: newHeight }
+}
+
+// 鼠标释放
+const handleMouseUp = () => {
+  isDragging.value = false
+  isResizing.value = false
+  dragType.value = ''
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+}
+
+// 缩放变化
+const handleZoomChange = () => {
+  // 缩放时保持裁剪区域相对位置
+  // 这里可以添加更复杂的缩放逻辑
+}
+
+// 鼠标滚轮缩放（电脑端优化）
+const handleWheel = (e: WheelEvent) => {
+  if (!props.zoomable || !imageLoaded.value) return
+
+  e.preventDefault()
+  const delta = e.deltaY > 0 ? -0.1 : 0.1
+  const newZoom = Math.max(minZoom.value, Math.min(maxZoom.value, zoom.value + delta))
+  zoom.value = Math.round(newZoom * 10) / 10
+}
+
+// 旋转图片
+const rotateImage = (angle: number) => {
+  rotation.value = (rotation.value + angle) % 360
+  nextTick(() => {
+    updateImageDisplaySize()
+    initCropArea()
+  })
+}
+
+// 执行裁剪
+const handleCrop = () => {
+  if (!imageRef.value || !props.imageSrc) return
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  // 1. 获取缩放比例（显示尺寸 vs 原始尺寸）
+  const scaleX = imageNaturalWidth.value / imageDisplayWidth.value
+  const scaleY = imageNaturalHeight.value / imageDisplayHeight.value
+
+  // 2. 计算裁剪框在原始图片坐标系下的尺寸（不计旋转）
+  const { x, y, width, height } = cropArea.value
+  const cropW = width * scaleX
+  const cropH = height * scaleY
+
+  // 3. 设置目标 Canvas 尺寸
+  // 注意：如果旋转了 90/270 度，裁剪结果的视觉尺寸应该互换
+  const is90Deg = Math.abs(rotation.value % 180) === 90
+  canvas.width = is90Deg ? cropH : cropW
+  canvas.height = is90Deg ? cropW : cropH
+
+  ctx.save()
+
+  // 4. 将画布原点移至中心并旋转
+  ctx.translate(canvas.width / 2, canvas.height / 2)
+  ctx.rotate((rotation.value * Math.PI) / 180)
+
+  // 5. 关键步骤：计算图片在旋转后的画布上应该绘制的位置
+  // 我们需要将图片的“裁剪框中心点”对齐到画布的“中心点”
+  const imgCenterX = imageNaturalWidth.value / 2
+  const imgCenterY = imageNaturalHeight.value / 2
+  const cropCenterX = (x + width / 2) * scaleX
+  const cropCenterY = (y + height / 2) * scaleY
+
+  // 绘制偏移量 = 图片中心 - 裁剪框中心
+  const drawOffsetX = imgCenterX - cropCenterX
+  const drawOffsetY = imgCenterY - cropCenterY
+
+  // 6. 绘制图片
+  ctx.drawImage(
+    imageRef.value,
+    -imageNaturalWidth.value / 2 + drawOffsetX,
+    -imageNaturalHeight.value / 2 + drawOffsetY,
+    imageNaturalWidth.value,
+    imageNaturalHeight.value
+  )
+
+  ctx.restore()
+
+  // 7. 输出结果
+  canvas.toBlob(blob => {
+    if (blob) {
+      const dataUrl = canvas.toDataURL('image/png')
+      emit('crop', {
+        blob,
+        dataUrl,
+        cropArea: {
+          x: x * scaleX,
+          y: y * scaleY,
+          width: cropW,
+          height: cropH,
+        },
+      })
+    }
+  }, 'image/png')
+}
+
+// 取消
+const handleCancel = () => {
+  emit('cancel')
+}
+
+// 监听图片源变化
+watch(
+  () => props.imageSrc,
+  (newSrc: string | undefined) => {
+    if (newSrc) {
+      imageLoaded.value = false
+      rotation.value = 0
+      zoom.value = props.initialZoom
+    }
+  }
+)
+
+// 监听容器大小变化
+const resizeObserver = ref<ResizeObserver | null>(null)
+
+// 键盘快捷键处理（电脑端优化）
+const handleKeyDown = (e: KeyboardEvent) => {
+  // 只在组件可见且有图片时响应
+  if (!imageLoaded.value || !props.imageSrc) return
+  // 如果用户在输入框中，不响应快捷键
+  const target = e.target as HTMLElement
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+    return
+
+  // Ctrl/Cmd + 滚轮缩放，或方向键旋转
+  if (e.ctrlKey || e.metaKey) {
+    if (e.key === '=' || e.key === '+') {
+      e.preventDefault()
+      const newZoom = Math.min(maxZoom.value, zoom.value + 0.1)
+      zoom.value = Math.round(newZoom * 10) / 10
+    } else if (e.key === '-' || e.key === '_') {
+      e.preventDefault()
+      const newZoom = Math.max(minZoom.value, zoom.value - 0.1)
+      zoom.value = Math.round(newZoom * 10) / 10
+    }
+  }
+
+  // R 键旋转（需要组件获得焦点）
+  if (props.rotatable && (e.key === 'r' || e.key === 'R')) {
+    e.preventDefault()
+    rotateImage(90)
+  }
+
+  // Enter 确认裁剪
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleCrop()
+  }
+
+  // Esc 取消
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    handleCancel()
+  }
+}
+
+onMounted(() => {
+  if (containerRef.value && window.ResizeObserver) {
+    resizeObserver.value = new ResizeObserver(() => {
+      updateImageDisplaySize()
+    })
+    resizeObserver.value.observe(containerRef.value)
+  }
+
+  // 添加键盘事件监听（电脑端优化）
+  document.addEventListener('keydown', handleKeyDown)
+})
+
+onBeforeUnmount(() => {
+  handleMouseUp()
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect()
+  }
+  // 移除键盘事件监听
+  document.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'VcImageCropper',
+}
+</script>
+
+<style lang="scss" scoped>
+.vc-image-cropper {
+  position: relative;
+  background: #1a1a1a;
+  border-radius: 8px;
+  overflow: hidden;
+  user-select: none;
+  outline: none;
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5);
+  }
+}
+
+.vc-image-cropper-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #666;
+}
+
+.placeholder-content {
+  text-align: center;
+
+  svg {
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+.vc-image-cropper-content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vc-image-wrapper {
+  position: relative;
+  transition: transform 0.1s ease-out;
+}
+
+.vc-image-wrapper img {
+  max-width: none;
+  max-height: none;
+}
+
+.vc-crop-box {
+  position: absolute;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  cursor: move;
+}
+
+.vc-crop-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.grid-line {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.3);
+
+  &.grid-line-h1 {
+    top: 33.33%;
+    left: 0;
+    width: 100%;
+    height: 1px;
+  }
+
+  &.grid-line-h2 {
+    top: 66.66%;
+    left: 0;
+    width: 100%;
+    height: 1px;
+  }
+
+  &.grid-line-v1 {
+    left: 33.33%;
+    top: 0;
+    width: 1px;
+    height: 100%;
+  }
+
+  &.grid-line-v2 {
+    left: 66.66%;
+    top: 0;
+    width: 1px;
+    height: 100%;
+  }
+}
+
+.vc-crop-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border: 1px solid #333;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  z-index: 10;
+
+  &:hover {
+    background: #667eea;
+    border-color: #667eea;
+  }
+}
+
+.vc-cropper-toolbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 0 24px;
+  backdrop-filter: blur(10px);
+}
+
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.toolbar-label {
+  color: #fff;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.toolbar-slider {
+  width: 150px;
+  height: 4px;
+  border-radius: 2px;
+  background: #333;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #667eea;
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #667eea;
+    cursor: pointer;
+    border: none;
+  }
+}
+
+.toolbar-value {
+  color: #fff;
+  font-size: 14px;
+  min-width: 40px;
+  text-align: right;
+}
+
+.toolbar-btn {
+  padding: 8px 16px;
+  border: 1px solid #444;
+  background: #333;
+  color: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #444;
+    border-color: #667eea;
+  }
+
+  &.toolbar-btn-primary {
+    background: #667eea;
+    border-color: #667eea;
+
+    &:hover {
+      background: #5568d3;
+    }
+  }
+}
+</style>