feat: add line width customization to ImageAnnotator and update localization for new feature

src/components/ImageAnnotator.jsx

@@ -215,7 +215,7 @@ const Image = styled.img`
 
 const BoundingBox = styled.div`
   position: absolute;
-  border: 3px solid ${props => props.color || '#FF0000'};
+  border: ${props => `${props.lineWidth || 3}px solid ${props.color || '#FF0000'}`};
   background-color: ${props => props.color || '#FF0000'}20;
   z-index: 10;
   pointer-events: auto;
@@ -298,6 +298,24 @@ const ResetButton = styled.button`
   }
 `;
 
+const SettingsSection = styled.div`
+  margin: 1rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+`;
+
+const LineWidthControl = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const RangeInput = styled.input`
+  width: 100%;
+  max-width: 200px;
+`;
+
 // Box colors for different annotations
 const COLORS = [
   '#FF3B30', '#FF9500', '#FFCC00', '#34C759', '#5AC8FA', 
@@ -312,6 +330,7 @@ function ImageAnnotator() {
   const [error, setError] = useState('');
   const [imageError, setImageError] = useState('');
   const [useCors, setUseCors] = useState(true);
+  const [lineWidth, setLineWidth] = useState(3);
   const previewRef = useRef(null);
   const imageRef = useRef(null);
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
@@ -535,6 +554,11 @@ function ImageAnnotator() {
     }
   };
 
+  // Handle line width change
+  const handleLineWidthChange = (e) => {
+    setLineWidth(parseInt(e.target.value, 10));
+  };
+
   const currentImageUrl = uploadedImage || (imageUrl.trim() && (useCors ? processImageUrl(imageUrl) : imageUrl));
   const hasImage = !!currentImageUrl;
   const hasBoxes = parsedBoxes.length > 0;
@@ -587,6 +611,20 @@ function ImageAnnotator() {
               />
             </UploadSection>
 
+            {/* Line Width Control */}
+            <SettingsSection>
+              <LineWidthControl>
+                <Label>{t('tools.imageAnnotator.lineWidth') || '线条粗细'}: {lineWidth}px</Label>
+                <RangeInput
+                  type="range"
+                  min="1"
+                  max="10"
+                  value={lineWidth}
+                  onChange={handleLineWidthChange}
+                />
+              </LineWidthControl>
+            </SettingsSection>
+
             {/* Coordinates input section */}
             <CoordinatesSection>
               <Label>
@@ -676,6 +714,7 @@ function ImageAnnotator() {
                       <BoundingBox
                         key={box.id}
                         color={box.color}
+                        lineWidth={lineWidth}
                         isSelected={selectedBoxId === box.id}
                         isOtherSelected={selectedBoxId !== null && selectedBoxId !== box.id}
                         onClick={() => handleBoxClick(box.id)}

src/locales/en/tools.json

@@ -262,7 +262,8 @@
       "coordinatesPlaceholder": "Enter coordinates in JSON format: [[x_min,y_min,x_max,y_max], ...] or one box per line",
       "downloadButton": "Download",
       "noImageMessage": "Upload an image or provide an image URL to start",
-      "resetView": "Reset View"
+      "resetView": "Reset View",
+      "lineWidth": "Custom Line Width"
     },
     "aiTimeline": {
       "title": "AI Important Events Timeline",

src/locales/ja/tools.json

@@ -262,7 +262,8 @@
       "coordinatesPlaceholder": "JSON形式で座標を入力：[[x_min,y_min,x_max,y_max], ...] または1行に1つのボックスを入力",
       "downloadButton": "ダウンロード",
       "noImageMessage": "開始するには画像をアップロードするか、画像URLを入力してください",
-      "resetView": "ビューをリセット"
+      "resetView": "ビューをリセット",
+      "lineWidth": "線の幅を設定"
     },
     "aiTimeline": {
       "title": "AI 重要事件時間軸",

src/locales/ko/tools.json

@@ -263,7 +263,8 @@
     "coordinatesPlaceholder": "좌표를 JSON 형식으로 입력: [[x_min,y_min,x_max,y_max], ...] 또는 한 줄에 하나의 박스 입력",
     "downloadButton": "다운로드",
     "noImageMessage": "시작하려면 이미지를 업로드하거나 이미지 URL을 입력하세요",
-    "resetView": "뷰 초기화"
+    "resetView": "뷰 초기화",
+    "lineWidth": "선 너비 설정"
   },
   "aiTimeline": {
     "title": "AI 중요 사건 시간표",

src/locales/zh/tools.json

@@ -264,7 +264,8 @@
       "coordinatesPlaceholder": "输入坐标，JSON格式：[[x_min,y_min,x_max,y_max], ...] 或每行输入一个框",
       "downloadButton": "下载",
       "noImageMessage": "上传图片或提供图片URL开始",
-      "resetView": "重置视图"
+      "resetView": "重置视图",
+      "lineWidth": "自定义线宽"
     },
     "aiTimeline": {
       "title": "AI 重大事件一览",