mjpic 1.0.0

package/src/components/layout/RightPanel.tsx

@@ -0,0 +1,886 @@
+import { useUIStore } from '@/store/useUIStore';
+import { useImageStore } from '@/store/useImageStore';
+import { usePresetStore } from '@/store/usePresetStore';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+import { AspectRatioDialog } from '@/components/dialogs/AspectRatioDialog';
+import { Settings, Ruler } from 'lucide-react';
+
+// Reusable slider component with local state and debounce
+const SliderControl = ({ 
+  label, 
+  value, 
+  min, 
+  max, 
+  step = 1,
+  onChange,
+  unit = ''
+}: { 
+  label: string; 
+  value: number; 
+  min: number; 
+  max: number; 
+  step?: number;
+  onChange: (val: number) => void;
+  unit?: string;
+}) => {
+  const [localValue, setLocalValue] = useState(value);
+
+  // Sync local value when prop value changes (e.g. undo/redo)
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value);
+    setLocalValue(newValue);
+  };
+
+  const handleCommit = () => {
+    if (localValue !== value) {
+      onChange(localValue);
+    }
+  };
+
+  const handleIncrement = () => {
+    let nextVal = localValue + step;
+    if (nextVal > max) nextVal = max;
+    // Fix floating point issues
+    if (step < 1) {
+        nextVal = parseFloat(nextVal.toFixed(1));
+    }
+    
+    setLocalValue(nextVal);
+    onChange(nextVal);
+  };
+
+  const handleDecrement = () => {
+    let nextVal = localValue - step;
+    if (nextVal < min) nextVal = min;
+    // Fix floating point issues
+    if (step < 1) {
+        nextVal = parseFloat(nextVal.toFixed(1));
+    }
+
+    setLocalValue(nextVal);
+    onChange(nextVal);
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex justify-between text-xs text-zinc-400">
+        <span>{label}</span>
+        <span>{localValue.toFixed(step < 1 ? 1 : 0)}{unit}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <button 
+          onClick={handleDecrement}
+          className="w-6 h-6 flex items-center justify-center bg-zinc-800 text-zinc-300 rounded hover:bg-zinc-700 text-lg leading-none pb-1"
+        >
+          -
+        </button>
+        <input 
+          type="range" min={min} max={max} step={step}
+          value={localValue} 
+          onChange={handleChange}
+          onMouseUp={handleCommit} // Only update store on release
+          onTouchEnd={handleCommit} // For touch devices
+          className="flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
+        />
+        <button 
+          onClick={handleIncrement}
+          className="w-6 h-6 flex items-center justify-center bg-zinc-800 text-zinc-300 rounded hover:bg-zinc-700 text-lg leading-none pb-1"
+        >
+          +
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const RightPanel = () => {
+  const { activeTool, isStraightenToolActive, setStraightenToolActive } = useUIStore();
+  const { config, updateConfig, originalWidth, originalHeight, applyCrop, cropRect } = useImageStore();
+  const { aspectRatios } = usePresetStore();
+  const { t } = useTranslation();
+  
+  // Dialog state for aspect ratio manager
+  const [isAspectRatioManagerOpen, setIsAspectRatioManagerOpen] = useState(false);
+  
+  // 计算基于原始图片比例的尺寸
+  const calculateSize = (targetValue: number, mode: 'width' | 'height'): { width: number; height: number } => {
+    if (originalWidth === 0 || originalHeight === 0) {
+      // 如果没有原始尺寸信息，使用默认比例 4:3
+      return mode === 'width' 
+        ? { width: targetValue, height: Math.round(targetValue * 0.75) }
+        : { width: Math.round(targetValue * 1.333), height: targetValue };
+    }
+    
+    const aspectRatio = originalWidth / originalHeight;
+    
+    if (mode === 'width') {
+      return { 
+        width: targetValue, 
+        height: Math.round(targetValue / aspectRatio) 
+      };
+    } else {
+      return { 
+        width: Math.round(targetValue * aspectRatio), 
+        height: targetValue 
+      };
+    }
+  };
+  
+  // 格式化尺寸显示字符串
+  const formatSizeDisplay = (targetValue: number, mode: 'width' | 'height'): string => {
+    const calculated = calculateSize(targetValue, mode);
+    
+    if (mode === 'width') {
+      return `${targetValue} × [${calculated.height}]`;
+    } else {
+      return `[${calculated.width}] × ${targetValue}`;
+    }
+  };
+  
+  // 解析预设尺寸字符串为宽高对象
+  const parseSizeString = (sizeStr: string): { width: number; height: number } | null => {
+    const [width, height] = sizeStr.split('x').map(Number);
+    if (isNaN(width) || isNaN(height)) return null;
+    return { width, height };
+  };
+  
+  // 对话框状态
+  const [isAddSizeDialogOpen, setIsAddSizeDialogOpen] = useState(false);
+  const [isDeleteSizeDialogOpen, setIsDeleteSizeDialogOpen] = useState(false);
+  
+  // 添加尺寸对话框状态
+  const [addSizeMode, setAddSizeMode] = useState<'width' | 'height'>('width');
+  const [addSizeValue, setAddSizeValue] = useState('');
+  
+  // 删除尺寸对话框状态
+  const [deleteSizeMode, setDeleteSizeMode] = useState<'width' | 'height'>('width');
+  const [selectedSizeToDelete, setSelectedSizeToDelete] = useState('');
+  
+  // 预设尺寸列表
+  type SizeMode = 'width' | 'height';
+  type PresetSize = { width: number; height: number; mode: SizeMode };
+  
+  const [presetSizes, setPresetSizes] = useState<PresetSize[]>([
+    { width: 450, height: 338, mode: 'width' },
+    { width: 600, height: 450, mode: 'width' },
+    { width: 850, height: 638, mode: 'width' },
+    { width: 1440, height: 1080, mode: 'width' },
+    { width: 1920, height: 1440, mode: 'width' },
+    { width: 2400, height: 1800, mode: 'width' },
+    { width: 3840, height: 2880, mode: 'width' },
+    { width: 5120, height: 3840, mode: 'width' }
+  ]);
+  
+  // 获取当前选中的预设尺寸的显示文本
+  const getSelectedSizeDisplay = (): string => {
+    if (!config.resize?.width || !config.resize?.height) return '';
+    
+    const selectedSize = presetSizes.find(
+      (size) => size.width === config.resize?.width && size.height === config.resize?.height
+    );
+    
+    if (selectedSize) {
+      return formatSizeDisplay(selectedSize.mode === 'width' ? selectedSize.width : selectedSize.height, selectedSize.mode);
+    }
+    
+    return `${config.resize.width} × ${config.resize.height}`;
+  };
+
+  const handleReset = () => {
+    switch (activeTool) {
+      case 'enhance':
+        updateConfig({
+          enhancements: {
+            autoEnhance: false,
+            fillLight: false,
+            autoWhiteBalance: false
+          }
+        });
+        break;
+      case 'adjust':
+        updateConfig({
+          brightness: 0,
+          contrast: 0,
+          sharpness: 0
+        });
+        break;
+      case 'resize':
+        updateConfig({
+          resize: {
+            width: 0,
+            height: 0,
+            maintainAspectRatio: true
+          }
+        });
+        break;
+      case 'crop':
+        updateConfig({
+          crop: undefined
+        });
+        break;
+      case 'rotate':
+        updateConfig({
+          rotation: 0
+        });
+        break;
+      case 'border':
+        updateConfig({
+          border: undefined
+        });
+        break;
+    }
+  };
+
+  if (!activeTool) return null;
+
+  return (
+    <div className="w-[280px] bg-zinc-900 border-l border-zinc-800 p-4 flex flex-col gap-4 overflow-y-auto shrink-0 z-10">
+      <div className="flex justify-between items-center mb-2">
+        <h2 className="text-zinc-100 font-semibold capitalize">{t(`sidebar.${activeTool}`)}</h2>
+        <button 
+          onClick={handleReset}
+          className="text-xs text-zinc-400 hover:text-white bg-zinc-800 hover:bg-zinc-700 px-2 py-1 rounded transition-colors"
+        >
+          {t('common.reset')}
+        </button>
+      </div>
+      
+      {activeTool === 'enhance' && (
+        <div className="flex flex-col gap-4">
+          <label className="flex items-center justify-between text-zinc-300 text-sm cursor-pointer p-2 hover:bg-zinc-800 rounded">
+            <span>{t('panels.autoEnhance')}</span>
+            <input 
+              type="checkbox" 
+              checked={config.enhancements.autoEnhance} 
+              onChange={(e) => updateConfig({ enhancements: { ...config.enhancements, autoEnhance: e.target.checked } })}
+              className="accent-blue-500"
+            />
+          </label>
+          <label className="flex items-center justify-between text-zinc-300 text-sm cursor-pointer p-2 hover:bg-zinc-800 rounded">
+            <span>{t('panels.fillLight')}</span>
+            <input 
+              type="checkbox" 
+              checked={config.enhancements.fillLight} 
+              onChange={(e) => updateConfig({ enhancements: { ...config.enhancements, fillLight: e.target.checked } })}
+              className="accent-blue-500"
+            />
+          </label>
+           <label className="flex items-center justify-between text-zinc-300 text-sm cursor-pointer p-2 hover:bg-zinc-800 rounded">
+            <span>{t('panels.autoWhiteBalance')}</span>
+            <input 
+              type="checkbox" 
+              checked={config.enhancements.autoWhiteBalance} 
+              onChange={(e) => updateConfig({ enhancements: { ...config.enhancements, autoWhiteBalance: e.target.checked } })}
+              className="accent-blue-500"
+            />
+          </label>
+        </div>
+      )}
+
+      {activeTool === 'adjust' && (
+        <div className="flex flex-col gap-6">
+           <SliderControl 
+             label={t('panels.brightness')} 
+             value={config.brightness}
+             min={-100} max={100}
+             onChange={(val) => updateConfig({ brightness: val })}
+           />
+           
+           <SliderControl 
+             label={t('panels.contrast')} 
+             value={config.contrast}
+             min={-100} max={100}
+             onChange={(val) => updateConfig({ contrast: val })}
+           />
+
+           <SliderControl 
+             label={t('panels.sharpness')} 
+             value={config.sharpness}
+             min={0} max={100}
+             onChange={(val) => updateConfig({ sharpness: val })}
+           />
+        </div>
+      )}
+      
+      {activeTool === 'resize' && (
+        <div className="flex flex-col gap-4">
+          {/* 预设尺寸 */}
+          <div className="flex flex-col gap-2">
+            <label className="text-xs text-zinc-400">{t('common.presetSizes')}</label>
+            <div className="relative">
+              <select 
+                className="w-full bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 focus:border-blue-500 outline-none text-sm appearance-none cursor-pointer"
+                value={`${config.resize?.width || ''}x${config.resize?.height || ''}`}
+                onChange={(e) => {
+                  const selectedSize = presetSizes.find(
+                    (size) => `${size.width}x${size.height}` === e.target.value
+                  );
+                  if (selectedSize) {
+                    // 根据当前图片的比例重新计算尺寸
+                    const calculated = calculateSize(
+                      selectedSize.mode === 'width' ? selectedSize.width : selectedSize.height,
+                      selectedSize.mode
+                    );
+                    updateConfig({ resize: { width: calculated.width, height: calculated.height, maintainAspectRatio: true } });
+                  } else {
+                    // 清空尺寸
+                    updateConfig({ resize: { width: 0, height: 0, maintainAspectRatio: true } });
+                  }
+                }}
+              >
+                <option value="">选择预设尺寸</option>
+                {presetSizes.map((size) => (
+                  <option key={`${size.width}x${size.height}`} value={`${size.width}x${size.height}`}>
+                    {formatSizeDisplay(size.mode === 'width' ? size.width : size.height, size.mode)}
+                  </option>
+                ))}
+              </select>
+              <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-zinc-400"><path d="m6 9 6 6 6-6"/></svg>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1 mt-1">
+              <button 
+                className="w-full text-left text-xs text-zinc-400 hover:text-zinc-300 py-1 px-2 rounded hover:bg-zinc-800"
+                onClick={() => {
+                  setAddSizeMode('width');
+                  setAddSizeValue('');
+                  setIsAddSizeDialogOpen(true);
+                }}
+              >
+                添加常用尺寸
+              </button>
+              <button 
+                className="w-full text-left text-xs text-zinc-400 hover:text-zinc-300 py-1 px-2 rounded hover:bg-zinc-800"
+                onClick={() => {
+                  setDeleteSizeMode('width');
+                  setSelectedSizeToDelete('');
+                  setIsDeleteSizeDialogOpen(true);
+                }}
+              >
+                删除常用尺寸
+              </button>
+            </div>
+          </div>
+          
+          {/* 手工输入尺寸 */}
+          <div className="flex flex-col gap-4 p-4 bg-zinc-850 rounded-lg">
+            <div className="flex flex-col gap-3">
+              <div className="flex justify-between items-center">
+                <div className="flex flex-col">
+                  <label className="text-xs text-zinc-400">{t('common.width')}</label>
+                  <input 
+                    type="number" 
+                    className="bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 focus:border-blue-500 outline-none text-sm w-32"
+                    value={config.resize?.width || ''}
+                    onChange={(e) => {
+                      const width = parseInt(e.target.value) || 0;
+                      let height = config.resize?.height || 0;
+                      
+                      if (config.resize?.maintainAspectRatio && width > 0 && originalWidth > 0 && originalHeight > 0) {
+                        const aspectRatio = originalWidth / originalHeight;
+                        height = Math.round(width / aspectRatio);
+                      }
+                      
+                      updateConfig({ resize: { ...config.resize, width, height, maintainAspectRatio: config.resize?.maintainAspectRatio ?? true } });
+                    }}
+                  />
+                </div>
+                <span className="text-zinc-400 self-end mb-6">像素</span>
+              </div>
+              
+              <div className="flex justify-between items-center">
+                <div className="flex flex-col">
+                  <label className="text-xs text-zinc-400">{t('common.height')}</label>
+                  <input 
+                    type="number" 
+                    className="bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 focus:border-blue-500 outline-none text-sm w-32"
+                    value={config.resize?.height || ''}
+                    onChange={(e) => {
+                      const height = parseInt(e.target.value) || 0;
+                      let width = config.resize?.width || 0;
+                      
+                      if (config.resize?.maintainAspectRatio && height > 0 && originalWidth > 0 && originalHeight > 0) {
+                        const aspectRatio = originalWidth / originalHeight;
+                        width = Math.round(height * aspectRatio);
+                      }
+                      
+                      updateConfig({ resize: { ...config.resize, width, height, maintainAspectRatio: config.resize?.maintainAspectRatio ?? true } });
+                    }}
+                  />
+                </div>
+                <span className="text-zinc-400 self-end mb-6">像素</span>
+              </div>
+              
+              <div className="flex items-center gap-2">
+                <input 
+                  type="checkbox" 
+                  id="maintainAspectRatio"
+                  checked={config.resize?.maintainAspectRatio ?? true}
+                  onChange={(e) => updateConfig({ resize: { ...config.resize, maintainAspectRatio: e.target.checked } })}
+                  className="accent-blue-500"
+                />
+                <label htmlFor="maintainAspectRatio" className="text-xs text-zinc-400 cursor-pointer">{t('common.lockAspectRatio')}</label>
+              </div>
+            </div>
+            
+            <div className="flex gap-3 mt-2">
+              <button 
+                onClick={() => {
+                  // 确定按钮的逻辑
+                  // 这里可以添加额外的验证或处理
+                }}
+                className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm font-medium"
+              >
+                {t('common.confirm')}
+              </button>
+              <button 
+                onClick={() => {
+                  // 取消按钮的逻辑
+                  // 可以重置为之前的尺寸或保持不变
+                }}
+                className="flex-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-200 py-2 rounded text-sm"
+              >
+                {t('common.cancel')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTool === 'border' && (
+        <div className="flex flex-col gap-6">
+            <SliderControl
+                label={t('panels.borderSize')}
+                value={config.border?.size ?? 0}
+                min={0} max={300}
+                onChange={(val) => updateConfig({ 
+                    border: { 
+                        color: config.border?.color || '#ffffff',
+                        applyHorizontal: config.border?.applyHorizontal ?? true,
+                        applyVertical: config.border?.applyVertical ?? false,
+                        ...config.border, 
+                        size: val 
+                    } 
+                })}
+                unit="%"
+            />
+
+            <div className="flex gap-4">
+                <label className="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer">
+                    <input 
+                        type="checkbox" 
+                        checked={config.border?.applyHorizontal ?? true}
+                        onChange={(e) => updateConfig({ 
+                            border: { 
+                                color: config.border?.color || '#ffffff',
+                                size: config.border?.size ?? 0,
+                                applyVertical: config.border?.applyVertical ?? false,
+                                ...config.border, 
+                                applyHorizontal: e.target.checked 
+                            } 
+                        })}
+                        className="rounded bg-zinc-700 border-zinc-600"
+                    />
+                    {t('panels.borderHorizontal')}
+                </label>
+                <label className="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer">
+                    <input 
+                        type="checkbox" 
+                        checked={config.border?.applyVertical ?? false}
+                        onChange={(e) => updateConfig({ 
+                            border: { 
+                                color: config.border?.color || '#ffffff',
+                                size: config.border?.size ?? 0,
+                                applyHorizontal: config.border?.applyHorizontal ?? true,
+                                ...config.border, 
+                                applyVertical: e.target.checked 
+                            } 
+                        })}
+                        className="rounded bg-zinc-700 border-zinc-600"
+                    />
+                    {t('panels.borderVertical')}
+                </label>
+            </div>
+            
+            <div className="space-y-2">
+                <span className="text-xs text-zinc-400 block">{t('panels.borderColor')}</span>
+                <div className="flex items-center gap-2">
+                    <input 
+                        type="color" 
+                        value={config.border?.color ?? '#ffffff'}
+                        onChange={(e) => updateConfig({ 
+                            border: { 
+                                size: config.border?.size ?? 0,
+                                applyHorizontal: config.border?.applyHorizontal ?? true,
+                                applyVertical: config.border?.applyVertical ?? false,
+                                ...config.border, 
+                                color: e.target.value 
+                            } 
+                        })}
+                        className="w-8 h-8 rounded cursor-pointer bg-transparent border-0 p-0"
+                    />
+                    <input 
+                        type="text"
+                        value={config.border?.color ?? '#ffffff'}
+                        onChange={(e) => updateConfig({ 
+                            border: { 
+                                size: config.border?.size ?? 0,
+                                applyHorizontal: config.border?.applyHorizontal ?? true,
+                                applyVertical: config.border?.applyVertical ?? false,
+                                ...config.border, 
+                                color: e.target.value 
+                            } 
+                        })}
+                        className="flex-1 bg-zinc-800 text-zinc-300 px-2 py-1.5 rounded text-xs border border-zinc-700"
+                    />
+                </div>
+            </div>
+        </div>
+      )}
+
+      {activeTool === 'crop' && (
+        <div className="flex flex-col gap-4">
+            <div className="flex justify-between items-center">
+                <div className="text-xs text-zinc-400">{t('panels.aspectRatio')}</div>
+                <button 
+                    onClick={() => setIsAspectRatioManagerOpen(true)}
+                    className="text-zinc-400 hover:text-zinc-200 p-1 rounded hover:bg-zinc-800 transition-colors"
+                    title={t('common.manageRatios')}
+                >
+                    <Settings size={14} />
+                </button>
+            </div>
+            <div className="grid grid-cols-3 gap-2">
+                {aspectRatios.map(ratio => (
+                    <button 
+                        key={ratio.id}
+                        className={`py-2 rounded text-xs border ${
+                            config.crop?.aspectRatio === ratio.value 
+                            ? 'bg-blue-600 border-blue-500 text-white' 
+                            : 'bg-zinc-800 border-zinc-700 text-zinc-300 hover:bg-zinc-700'
+                        }`}
+                        onClick={() => updateConfig({ crop: { ...config.crop, aspectRatio: ratio.value, x: 0, y: 0, width: 100, height: 100 } })}
+                    >
+                        {ratio.value === 'Free' ? t('panels.free') : ratio.label}
+                    </button>
+                ))}
+            </div>
+            
+            <button 
+                className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm font-medium mt-4"
+                onClick={() => {
+                    if (cropRect.width > 0 && cropRect.height > 0) {
+                        applyCrop();
+                    } else {
+                        alert('请先选择裁剪区域');
+                    }
+                }}
+            >
+                应用裁剪
+            </button>
+            
+            <button 
+                className="w-full bg-zinc-800 hover:bg-zinc-700 text-zinc-300 py-2 rounded text-sm"
+                onClick={() => {
+                    updateConfig({ crop: undefined });
+                }}
+            >
+                取消裁剪
+            </button>
+            
+            <p className="text-[10px] text-zinc-500 mt-2">
+                * {t('panels.cropWarning')}
+            </p>
+
+            <AspectRatioDialog 
+                isOpen={isAspectRatioManagerOpen} 
+                onClose={() => setIsAspectRatioManagerOpen(false)} 
+            />
+        </div>
+      )}
+
+      {activeTool === 'rotate' && (
+        <div className="flex flex-col gap-6">
+            <div className="flex justify-between gap-2">
+                <button 
+                    onClick={() => {
+                        // Normalize to -180 ~ 180
+                        let newRot = (config.rotation - 90) % 360;
+                        if (newRot > 180) newRot -= 360;
+                        if (newRot <= -180) newRot += 360;
+                        updateConfig({ rotation: newRot });
+                    }}
+                    className="flex-1 bg-zinc-800 text-zinc-300 py-2 rounded text-sm hover:bg-zinc-700"
+                >
+                    {t('panels.rotateLeft')}
+                </button>
+                <button 
+                    onClick={() => {
+                        // Normalize to -180 ~ 180
+                        let newRot = (config.rotation + 90) % 360;
+                        if (newRot > 180) newRot -= 360;
+                        if (newRot <= -180) newRot += 360;
+                        updateConfig({ rotation: newRot });
+                    }}
+                    className="flex-1 bg-zinc-800 text-zinc-300 py-2 rounded text-sm hover:bg-zinc-700"
+                >
+                    {t('panels.rotateRight')}
+                </button>
+            </div>
+            
+            <button 
+                className={`flex items-center justify-center gap-2 py-2 rounded text-sm transition-colors border ${
+                    isStraightenToolActive 
+                    ? 'text-blue-500 bg-zinc-800 border-blue-500/50' 
+                    : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700 border-transparent'
+                }`}
+                onClick={() => setStraightenToolActive(!isStraightenToolActive)}
+            >
+                <Ruler size={16} />
+                {t('panels.straighten')}
+            </button>
+            
+            {isStraightenToolActive && (
+                <p className="text-[10px] text-zinc-500">
+                    * {t('panels.straightenTip')}
+                </p>
+            )}
+            
+             <SliderControl 
+               label={t('panels.rotationAngle')} 
+               value={config.rotation}
+               min={-180} max={180} step={0.5}
+               onChange={(val) => updateConfig({ rotation: val })}
+               unit="°"
+             />
+        </div>
+      )}
+      
+      {/* 添加常用尺寸对话框 */}
+      {isAddSizeDialogOpen && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-5 w-80">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-zinc-100 font-medium">添加常用尺寸</h3>
+              <button 
+                onClick={() => setIsAddSizeDialogOpen(false)}
+                className="text-zinc-400 hover:text-zinc-200"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+              </button>
+            </div>
+            
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center gap-4">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input 
+                      type="radio" 
+                      name="addSizeMode" 
+                      value="width" 
+                      checked={addSizeMode === 'width'}
+                      onChange={() => setAddSizeMode('width')}
+                      className="accent-blue-500"
+                    />
+                    <span className="text-zinc-300 text-sm">按宽度</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input 
+                      type="radio" 
+                      name="addSizeMode" 
+                      value="height" 
+                      checked={addSizeMode === 'height'}
+                      onChange={() => setAddSizeMode('height')}
+                      className="accent-blue-500"
+                    />
+                    <span className="text-zinc-300 text-sm">按高度</span>
+                  </label>
+                </div>
+              </div>
+              
+              {addSizeMode === 'width' ? (
+                <div className="flex items-center gap-2">
+                  <input 
+                    type="number" 
+                    placeholder="宽度"
+                    className="flex-1 bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 focus:border-blue-500 outline-none text-sm"
+                    value={addSizeValue}
+                    onChange={(e) => setAddSizeValue(e.target.value)}
+                  />
+                  <span className="text-zinc-400">×</span>
+                  <span className="text-zinc-400">对应高度</span>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <span className="text-zinc-400">对应宽度</span>
+                  <span className="text-zinc-400">×</span>
+                  <input 
+                    type="number" 
+                    placeholder="高度"
+                    className="flex-1 bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 focus:border-blue-500 outline-none text-sm"
+                    value={addSizeValue}
+                    onChange={(e) => setAddSizeValue(e.target.value)}
+                  />
+                </div>
+              )}
+              
+              <div className="flex gap-3 mt-6">
+                <button 
+                  onClick={() => {
+                    // 添加尺寸逻辑
+                    const value = parseInt(addSizeValue);
+                    if (!isNaN(value) && value > 0) {
+                      // 根据原始图片比例计算尺寸
+                      const calculated = calculateSize(value, addSizeMode);
+                      const newSize = { 
+                        width: calculated.width, 
+                        height: calculated.height,
+                        mode: addSizeMode 
+                      };
+                      
+                      // 检查尺寸是否已存在
+                      const isDuplicate = presetSizes.some(
+                        (size) => size.width === newSize.width && size.height === newSize.height
+                      );
+                      
+                      if (!isDuplicate) {
+                        // 添加新尺寸并按宽度从小到大排序
+                        const updatedSizes = [...presetSizes, newSize].sort((a, b) => a.width - b.width);
+                        setPresetSizes(updatedSizes);
+                      }
+                      
+                      // 重置状态并关闭对话框
+                      setAddSizeValue('');
+                      setIsAddSizeDialogOpen(false);
+                    }
+                  }}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm font-medium"
+                >
+                  确定
+                </button>
+                <button 
+                  onClick={() => {
+                    // 取消逻辑
+                    setAddSizeValue('');
+                    setIsAddSizeDialogOpen(false);
+                  }}
+                  className="flex-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-200 py-2 rounded text-sm"
+                >
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* 删除常用尺寸对话框 */}
+      {isDeleteSizeDialogOpen && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-5 w-80">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-zinc-100 font-medium">删除常用尺寸</h3>
+              <button 
+                onClick={() => setIsDeleteSizeDialogOpen(false)}
+                className="text-zinc-400 hover:text-zinc-200"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+              </button>
+            </div>
+            
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center gap-4">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input 
+                      type="radio" 
+                      name="deleteSizeMode" 
+                      value="width" 
+                      checked={deleteSizeMode === 'width'}
+                      onChange={() => {
+                        setDeleteSizeMode('width');
+                        setSelectedSizeToDelete('');
+                      }}
+                      className="accent-blue-500"
+                    />
+                    <span className="text-zinc-300 text-sm">按宽度</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input 
+                      type="radio" 
+                      name="deleteSizeMode" 
+                      value="height" 
+                      checked={deleteSizeMode === 'height'}
+                      onChange={() => {
+                        setDeleteSizeMode('height');
+                        setSelectedSizeToDelete('');
+                      }}
+                      className="accent-blue-500"
+                    />
+                    <span className="text-zinc-300 text-sm">按高度</span>
+                  </label>
+                </div>
+              </div>
+              
+              <div>
+                <select 
+                  className="w-full bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 focus:border-blue-500 outline-none text-sm"
+                  value={selectedSizeToDelete}
+                  onChange={(e) => setSelectedSizeToDelete(e.target.value)}
+                >
+                  <option value="">选择要删除的尺寸</option>
+                  {presetSizes
+                    .filter((size) => size.mode === deleteSizeMode)
+                    .map((size) => (
+                    <option key={`${size.width}x${size.height}`} value={`${size.width}x${size.height}`}>
+                      {formatSizeDisplay(size.mode === 'width' ? size.width : size.height, size.mode)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              
+              <div className="flex gap-3 mt-6">
+                <button 
+                  onClick={() => {
+                    // 删除尺寸逻辑
+                    if (selectedSizeToDelete) {
+                      const [width, height] = selectedSizeToDelete.split('x').map(Number);
+                      setPresetSizes(
+                        presetSizes.filter(
+                          (size) => size.width !== width || size.height !== height
+                        )
+                      );
+                      
+                      // 重置状态并关闭对话框
+                      setSelectedSizeToDelete('');
+                      setIsDeleteSizeDialogOpen(false);
+                    }
+                  }}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm font-medium"
+                >
+                  确定
+                </button>
+                <button 
+                  onClick={() => {
+                    // 取消逻辑
+                    setSelectedSizeToDelete('');
+                    setIsDeleteSizeDialogOpen(false);
+                  }}
+                  className="flex-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-200 py-2 rounded text-sm"
+                >
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};