@zzalai/leafer-point-annotation 1.0.0 → 1.1.0

package/src/components/PointAnnotation.vue

@@ -1,13 +1,21 @@
 <template>
   <div
     class="point-annotation"
+    :class="{ 'has-image': showTools }"
     @focus="isCanvasFocused = true"
     @blur="isCanvasFocused = false"
     @mouseenter="isMouseOverCanvas = true"
     @mouseleave="isMouseOverCanvas = false"
   >
     <!-- 画布容器 -->
-    <div ref="canvasContainer" class="canvas-container" tabindex="0">
+    <div
+      ref="canvasContainer"
+      class="canvas-container"
+      tabindex="0"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+    >
       <!-- 加载占位 -->
       <div
         v-if="loadStatus === 'loading'"
@@ -17,14 +25,45 @@
         <div class="loading-text">图片加载中</div>
       </div>
 
+      <!-- 空状态/上传区域 -->
+      <div v-if="loadStatus === 'idle'" class="upload-overlay" :class="{ 'drag-over': isDragOver }">
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept="image/*"
+          style="display: none"
+          @change="handleFileUpload"
+        />
+        <div class="upload-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <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>
+        </div>
+        <p class="upload-text">点击选择本地图片</p>
+        <p class="upload-hint">或拖拽图片到此处</p>
+        <button class="upload-button" @click="openFileDialog">选择图片</button>
+      </div>
+
       <!-- 错误状态 -->
       <div v-if="loadStatus === 'error'" class="error-overlay">
         <p>加载失败</p>
         <button @click="loadImage()">重试</button>
       </div>
 
-      <!-- 缩放控制器 -->
-      <div class="zoom-controller">
+      <!-- 缩放控制器 - 只在有图片时显示 -->
+      <div v-if="showTools" class="zoom-controller">
         <button class="zoom-button" title="缩小 (Ctrl+-)" @click="zoomOut">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -69,8 +108,8 @@
       </div>
     </div>
 
-    <!-- 工具栏 -->
-    <div class="toolbar">
+    <!-- 工具栏 - 只在有图片时显示 -->
+    <div v-if="showTools" class="toolbar">
       <button
         class="tool-button"
         :class="{ active: currentTool === 'select' }"
@@ -297,7 +336,8 @@ export interface OptionsSource {
 const props = defineProps({
   imageSource: {
     type: Object as () => ImageSource,
-    required: true,
+    required: false,
+    default: null,
   },
   options: {
     type: Object as () => OptionsSource,
@@ -315,9 +355,13 @@ const emit = defineEmits([
 ]);
 
 const canvasContainer = ref<HTMLElement | undefined>(undefined);
+const fileInputRef = ref<HTMLInputElement | null>(null);
 const loadStatus = ref<"idle" | "loading" | "success" | "error">("idle");
 const imageWidth = ref<number | null>(null);
 const imageHeight = ref<number | null>(null);
+const hasLocalImage = ref(false);
+const localImageUrl = ref<string>('');
+const isDragOver = ref(false);
 let app: App | null = null;
 let imageBox: Image | null = null;
 const contentLayer = new Group({ name: "contentLayer" });
@@ -339,6 +383,9 @@ const brushButtonRect = ref<DOMRect | null>(null);
 const pointAnnotations = ref<PointAnnotation[]>([]);
 const pointCounter = ref(1);
 
+// 是否显示工具界面
+const showTools = computed(() => loadStatus.value === 'success');
+
 // 点标注样式配置
 const pointStyle = computed<PointStyle>(() => ({
   ...DEFAULT_POINT_STYLE,
@@ -372,6 +419,31 @@ watch(
   }
 );
 
+// 监听 props.imageSource 变化，重置本地图片状态
+watch(
+  () => props.imageSource?.url,
+  (newUrl, oldUrl) => {
+    if (newUrl) {
+      hasLocalImage.value = false;
+      localImageUrl.value = '';
+      loadImage(newUrl);
+    } else if (oldUrl && !newUrl) {
+      // 如果原来有图片，现在没有了，清空画布
+      hasLocalImage.value = false;
+      localImageUrl.value = '';
+      clearAllAnnotationsAndBrush();
+      // 移除图片
+      if (imageBox) {
+        contentLayer.clear();
+        imageBox.destroy();
+        imageBox = null;
+      }
+      loadStatus.value = 'idle';
+    }
+  },
+  { immediate: true }
+);
+
 // 笔刷相关状态
 let canvasBrush: CanvasBrush | null = null;
 const isDrawing = ref(false);
@@ -448,8 +520,14 @@ const preloadImageSize = (
 };
 
 const loadImage = async (imageSrc?: string | undefined) => {
-  const _imageSrc = imageSrc ? imageSrc : props.imageSource.url;
-  if (!app || !_imageSrc) return;
+  const _imageSrc = imageSrc 
+    ? imageSrc 
+    : (hasLocalImage.value ? localImageUrl.value : (props.imageSource?.url || ''));
+  
+  if (!app || !_imageSrc) {
+    loadStatus.value = "idle";
+    return;
+  }
 
   if (imageBox) {
     contentLayer.clear();
@@ -501,17 +579,70 @@ const loadImage = async (imageSrc?: string | undefined) => {
 
 const getImageInfo = () => {
   return {
-    id: props.imageSource.id,
-    url: props.imageSource.url,
+    id: hasLocalImage.value ? 'local-image' : (props.imageSource?.id || ''),
+    url: hasLocalImage.value ? localImageUrl.value : (props.imageSource?.url || ''),
     width: imageWidth.value,
     height: imageHeight.value,
   };
 };
 
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (file && file.type.startsWith('image/')) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const result = e.target?.result as string;
+      localImageUrl.value = result;
+      hasLocalImage.value = true;
+      loadImage(result);
+    };
+    reader.readAsDataURL(file);
+  }
+  target.value = '';
+};
+
+const openFileDialog = () => {
+  fileInputRef.value?.click();
+};
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+  isDragOver.value = true;
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+  isDragOver.value = false;
+};
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+  isDragOver.value = false;
+  
+  const files = event.dataTransfer?.files;
+  if (files && files.length > 0) {
+    const file = files[0];
+    if (file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const result = e.target?.result as string;
+        localImageUrl.value = result;
+        hasLocalImage.value = true;
+        loadImage(result);
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+};
+
 const exportCanvasJSON = (): string => {
   const exportData = {
     version: '1.0',
-    imageUrl: props.imageSource.url || '',
+    imageUrl: hasLocalImage.value ? localImageUrl.value : (props.imageSource?.url || ''),
     imageWidth: imageWidth.value,
     imageHeight: imageHeight.value,
     pointAnnotations: [...pointAnnotations.value],
@@ -588,7 +719,7 @@ const exportMaskImage = (format?: 'png' | 'jpeg' | 'jpg', foregroundColor?: 'bla
 const exportCOCO = (): string => {
   const coco = exportCOCOFormat(
     pointAnnotations.value,
-    props.imageSource.url || '',
+    hasLocalImage.value ? localImageUrl.value : (props.imageSource?.url || ''),
     imageWidth.value || 0,
     imageHeight.value || 0
   );
@@ -1329,10 +1460,12 @@ declare global {
   --leafer-point-color-text: #333;
   --leafer-point-color-text-secondary: #666;
   --leafer-point-color-text-tertiary: #999999;
+  --leafer-point-color-placeholder: #999999;
   --leafer-point-color-border: #ddd;
   --leafer-point-color-border-light: #e0e0e0;
   --leafer-point-color-error: #e74c3c;
   --leafer-point-color-button: #3498db;
+  --leafer-point-color-button-rgb: 52, 152, 219;
   --leafer-point-color-button-hover: #2980b9;
 
   --leafer-point-padding-toolbar: 10px;
@@ -1368,12 +1501,16 @@ declare global {
 
 .canvas-container {
   width: 100%;
-  height: calc(100% - 55px);
+  height: 100%;
   position: relative;
   overflow: hidden;
   outline: none;
 }
 
+.point-annotation.has-image .canvas-container {
+  height: calc(100% - 55px);
+}
+
 .canvas-container:focus {
   outline: 2px solid var(--leafer-point-color-primary);
   outline-offset: -2px;
@@ -1425,46 +1562,108 @@ declare global {
   position: relative;
   z-index: 1;
   color: white;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+.upload-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--leafer-point-color-white);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  border: 3px dashed var(--leafer-point-color-border);
+  transition: all 0.2s ease;
+}
+
+.upload-icon {
+  color: var(--leafer-point-color-placeholder);
+  margin-bottom: 24px;
+  transform: scale(1.2);
+}
+
+.upload-text {
+  color: var(--leafer-point-color-text);
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.upload-hint {
+  color: var(--leafer-point-color-placeholder);
+  font-size: 14px;
+  margin-bottom: 28px;
+}
+
+.upload-button {
+  padding: 12px 32px;
+  background-color: var(--leafer-point-color-button);
+  color: white;
+  border: none;
+  border-radius: var(--leafer-point-border-radius-tool-button);
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.upload-button:hover {
+  background-color: var(--leafer-point-color-button-hover);
+  transform: translateY(-1px);
+}
+
+.upload-overlay.drag-over {
+  border-color: var(--leafer-point-color-button);
+  background-color: rgba(var(--leafer-point-color-button-rgb), 0.05);
+}
+
+.upload-overlay.drag-over .upload-icon {
+  color: var(--leafer-point-color-button);
+}
+
 .error-overlay {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background-color: var(--leafer-point-color-white);
-  border-radius: var(--leafer-point-border-radius-overlay);
-  box-shadow: var(--leafer-point-shadow-overlay);
-  padding: var(--leafer-point-padding-error);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 1000;
-  min-width: 200px;
 }
 
 .error-overlay p {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
   color: var(--leafer-point-color-error);
-  font-size: 16px;
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .error-overlay button {
-  padding: var(--leafer-point-padding-error-button);
+  padding: 12px 32px;
   background-color: var(--leafer-point-color-button);
   color: white;
   border: none;
   border-radius: var(--leafer-point-border-radius-tool-button);
   cursor: pointer;
-  font-size: 14px;
+  font-size: 15px;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
 
 .error-overlay button:hover {
   background-color: var(--leafer-point-color-button-hover);
+  transform: translateY(-1px);
 }
 
 .zoom-controller {

package/docs/assets/index-DGiYiG5f.css

@@ -1 +0,0 @@
-.brush-panel-overlay[data-v-10bc9982]{z-index:1500;background:#0000004d;position:fixed;inset:0}.brush-style-panel[data-v-10bc9982]{z-index:1501;background:#fff;border-radius:10px;min-width:240px;position:fixed;overflow:visible;box-shadow:0 4px 24px #00000026}.panel-header[data-v-10bc9982]{background:var(--leafer-point-color-background-light);border-bottom:1px solid var(--leafer-point-color-border);border-radius:10px 10px 0 0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.panel-header span[data-v-10bc9982]{color:var(--leafer-point-color-text);font-size:14px;font-weight:600}.close-btn[data-v-10bc9982]{cursor:pointer;width:24px;height:24px;color:var(--leafer-point-color-text);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;transition:all .2s;display:flex}.close-btn[data-v-10bc9982]:hover{background:var(--leafer-point-color-border)}.panel-content[data-v-10bc9982]{padding:16px 16px 24px}.config-item[data-v-10bc9982]{align-items:center;margin-bottom:20px;display:flex}.config-item[data-v-10bc9982]:last-child{margin-bottom:0}.config-label[data-v-10bc9982]{color:var(--leafer-point-color-text);text-align:right;min-width:50px;padding-right:5px;font-size:12px;display:block}.config-value[data-v-10bc9982]{color:var(--leafer-point-color-text);width:30px;padding-left:5px;font-size:12px}.color-picker-wrapper[data-v-10bc9982]{width:100%;margin:-10px 0}.config-slider[data-v-10bc9982]{appearance:none;cursor:pointer;background:#e0e0e0;border-radius:3px;outline:none;width:200px;height:6px}.config-slider[data-v-10bc9982]::-webkit-slider-thumb{appearance:none;background:var(--leafer-point-color-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px #0003}.config-slider[data-v-10bc9982]::-moz-range-thumb{background:var(--leafer-point-color-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px #0003}:root{--leafer-point-color-primary:#007aff;--leafer-point-color-background:#f5f5f5;--leafer-point-color-background-light:#f0f0f0;--leafer-point-color-white:#fff;--leafer-point-color-text:#333;--leafer-point-color-text-secondary:#666;--leafer-point-color-text-tertiary:#999;--leafer-point-color-border:#ddd;--leafer-point-color-border-light:#e0e0e0;--leafer-point-color-error:#e74c3c;--leafer-point-color-button:#3498db;--leafer-point-color-button-hover:#2980b9;--leafer-point-padding-toolbar:10px;--leafer-point-padding-tool-button:8px;--leafer-point-size-tool-icon:18px;--leafer-point-size-zoom-button:36px;--leafer-point-size-zoom-value:60px;--leafer-point-font-size-hotkey:10px;--leafer-point-padding-hotkey:1px 3px;--leafer-point-padding-error:20px;--leafer-point-padding-error-button:8px 16px;--leafer-point-border-radius-tool-button:4px;--leafer-point-border-radius-hotkey:2px;--leafer-point-border-radius-overlay:8px;--leafer-point-border-radius-zoom:8px;--leafer-point-shadow-tool-button:0 2px 4px #0000001a;--leafer-point-shadow-tool-button-active:0 2px 4px #007aff4d;--leafer-point-shadow-tool-button-hover:0 4px 6px #0000001a;--leafer-point-shadow-overlay:0 4px 12px #0000001a;--leafer-point-shadow-zoom:0 2px 8px #00000026;--leafer-point-transition-time:.2s;--leafer-point-animation-gradient:2s}.point-annotation[data-v-b7ee4495]{width:100%;height:100%}.canvas-container[data-v-b7ee4495]{outline:none;width:100%;height:calc(100% - 55px);position:relative;overflow:hidden}.canvas-container[data-v-b7ee4495]:focus{outline:2px solid var(--leafer-point-color-primary);outline-offset:-2px}.loading-overlay[data-v-b7ee4495]{background-color:var(--leafer-point-color-background-light);border-radius:var(--leafer-point-border-radius-overlay);box-shadow:var(--leafer-point-shadow-overlay);z-index:1000;justify-content:center;align-items:center;min-width:100%;min-height:100%;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.gradient-animation[data-v-b7ee4495]{animation:gradientShift-b7ee4495 var(--leafer-point-animation-gradient) ease-in-out infinite;opacity:.7;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) 0 0/200% 200%;position:absolute;inset:0}@keyframes gradientShift-b7ee4495{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.loading-text[data-v-b7ee4495]{z-index:1;color:#fff;text-shadow:0 2px 4px #0003;font-size:16px;font-weight:500;position:relative}.error-overlay[data-v-b7ee4495]{background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-overlay);box-shadow:var(--leafer-point-shadow-overlay);padding:var(--leafer-point-padding-error);z-index:1000;flex-direction:column;justify-content:center;align-items:center;min-width:200px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.error-overlay p[data-v-b7ee4495]{color:var(--leafer-point-color-error);margin-bottom:20px;font-size:16px}.error-overlay button[data-v-b7ee4495]{padding:var(--leafer-point-padding-error-button);background-color:var(--leafer-point-color-button);color:#fff;border-radius:var(--leafer-point-border-radius-tool-button);cursor:pointer;border:none;font-size:14px}.error-overlay button[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-button-hover)}.zoom-controller[data-v-b7ee4495]{background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-zoom);box-shadow:var(--leafer-point-shadow-zoom);z-index:100;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;overflow:hidden}.zoom-button[data-v-b7ee4495]{width:var(--leafer-point-size-zoom-button);height:var(--leafer-point-size-zoom-button);background-color:var(--leafer-point-color-white);color:var(--leafer-point-color-text);cursor:pointer;transition:all var(--leafer-point-transition-time) ease;border:none;justify-content:center;align-items:center;display:flex;position:relative}.zoom-button[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary)}.zoom-button[data-v-b7ee4495]:active{background-color:#e0e0e0}.zoom-value[data-v-b7ee4495]{min-width:var(--leafer-point-size-zoom-value);height:var(--leafer-point-size-zoom-button);line-height:var(--leafer-point-size-zoom-button);text-align:center;color:var(--leafer-point-color-text);cursor:pointer;border-left:1px solid var(--leafer-point-color-border-light);border-right:1px solid var(--leafer-point-color-border-light);transition:all var(--leafer-point-transition-time) ease;font-size:14px;font-weight:500;position:relative}.zoom-value .hotkey-hint[data-v-b7ee4495]{line-height:1}.zoom-value[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary)}.toolbar[data-v-b7ee4495]{padding:var(--leafer-point-padding-toolbar);background-color:var(--leafer-point-color-background);border-top:1px solid var(--leafer-point-color-border);justify-content:center;align-items:center;gap:10px;display:flex}.tool-button[data-v-b7ee4495]{padding:var(--leafer-point-padding-tool-button);border-radius:var(--leafer-point-border-radius-tool-button);background-color:var(--leafer-point-color-white);color:var(--leafer-point-color-text);cursor:pointer;transition:all var(--leafer-point-transition-time) ease;box-shadow:var(--leafer-point-shadow-tool-button);border:none;justify-content:center;align-items:center;display:flex;position:relative}.tool-button[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary);box-shadow:var(--leafer-point-shadow-tool-button-hover)}.tool-button[data-v-b7ee4495]:active{box-shadow:var(--leafer-point-shadow-tool-button);transform:translateY(1px)}.tool-button.active[data-v-b7ee4495]{background-color:var(--leafer-point-color-primary);color:#fff;box-shadow:var(--leafer-point-shadow-tool-button-active)}.hotkey-hint[data-v-b7ee4495]{font-size:var(--leafer-point-font-size-hotkey);color:#fff;padding:var(--leafer-point-padding-hotkey);border-radius:var(--leafer-point-border-radius-hotkey);pointer-events:none;white-space:nowrap;background-color:#0009;position:absolute;top:0;right:0}.size-control[data-v-b7ee4495]{padding:var(--leafer-point-padding-tool-button);background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-tool-button);box-shadow:var(--leafer-point-shadow-tool-button);align-items:center;gap:8px;display:flex}.size-label[data-v-b7ee4495]{color:var(--leafer-point-color-text);white-space:nowrap;font-size:12px}.size-slider[data-v-b7ee4495]{appearance:none;cursor:pointer;background:#e0e0e0;border-radius:4px;outline:none;width:120px;height:8px}.size-slider[data-v-b7ee4495]::-webkit-slider-thumb{appearance:none;background:var(--leafer-point-color-primary);cursor:pointer;width:18px;height:18px;transition:all var(--leafer-point-transition-time) ease;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #0000004d}.size-slider[data-v-b7ee4495]::-webkit-slider-thumb:hover{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]::-webkit-slider-thumb:active{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]:focus::-webkit-slider-thumb{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]::-moz-range-thumb{background:var(--leafer-point-color-primary);cursor:pointer;width:18px;height:18px;transition:all var(--leafer-point-transition-time) ease;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #0000004d}.size-slider[data-v-b7ee4495]::-moz-range-thumb:hover{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]::-moz-range-thumb:active{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]:focus::-moz-range-thumb{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]:focus{outline:none}.size-value[data-v-b7ee4495]{text-align:center;min-width:30px;color:var(--leafer-point-color-primary);font-size:12px;font-weight:600}.app[data-v-c05a47b7]{max-width:1200px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1[data-v-c05a47b7]{text-align:center;margin-bottom:30px}.editor-container[data-v-c05a47b7]{border:1px solid #ddd;border-radius:8px;width:100%;height:600px;margin-bottom:30px;overflow:hidden}.controls[data-v-c05a47b7]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}.control-group[data-v-c05a47b7]{margin-bottom:15px}label[data-v-c05a47b7]{margin-bottom:5px;font-weight:700;display:block}input[data-v-c05a47b7]{border:1px solid #ddd;border-radius:4px;width:100%;margin-bottom:10px;padding:8px}.mask-options[data-v-c05a47b7]{gap:15px;margin-bottom:10px;display:flex}.mask-options label[data-v-c05a47b7]{align-items:center;gap:5px;font-weight:400;display:flex}.mask-options select[data-v-c05a47b7]{border:1px solid #ddd;border-radius:4px;padding:4px 8px}button[data-v-c05a47b7]{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:4px;margin-right:10px;padding:8px 16px}button[data-v-c05a47b7]:hover{background-color:#0069d9}.output[data-v-c05a47b7]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}pre[data-v-c05a47b7]{white-space:pre-wrap;word-wrap:break-word;background-color:#fff;border-radius:4px;max-height:300px;padding:15px;overflow-y:auto}.status[data-v-c05a47b7]{background-color:#f5f5f5;border-radius:8px;padding:20px}