mjpic 1.0.0

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,36 @@
+import { Wand2, Sliders, Ruler, Crop, RotateCw, Square } from 'lucide-react';
+import { useUIStore, ToolType } from '@/store/useUIStore';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+
+export const Sidebar = () => {
+  const { activeTool, setActiveTool } = useUIStore();
+  const { t } = useTranslation();
+
+  const tools: { id: ToolType; icon: any; label: string }[] = [
+    { id: 'enhance', icon: Wand2, label: t('sidebar.enhance') },
+    { id: 'adjust', icon: Sliders, label: t('sidebar.adjust') },
+    { id: 'resize', icon: Ruler, label: t('sidebar.resize') },
+    { id: 'crop', icon: Crop, label: t('sidebar.crop') },
+    { id: 'rotate', icon: RotateCw, label: t('sidebar.rotate') },
+    { id: 'border', icon: Square, label: t('sidebar.border') },
+  ];
+
+  return (
+    <div className="w-[80px] bg-zinc-900 border-r border-zinc-800 flex flex-col items-center py-4 gap-2 h-full z-10">
+      {tools.map((tool) => (
+        <button
+          key={tool.id}
+          onClick={() => setActiveTool(tool.id)}
+          className={cn(
+            "flex flex-col items-center justify-center w-16 h-16 rounded-lg transition-colors text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
+            activeTool === tool.id && "bg-zinc-800 text-blue-500 hover:text-blue-400"
+          )}
+        >
+          <tool.icon className="w-6 h-6 mb-1" />
+          <span className="text-[10px]">{tool.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+};

package/src/components/layout/StatusBar.tsx

@@ -0,0 +1,44 @@
+import { useImageStore } from '@/store/useImageStore';
+import { getAspectRatioLabel } from '@/lib/utils';
+
+export const StatusBar = () => {
+  const { fileName, originalWidth, originalHeight, config } = useImageStore();
+  
+  // 计算当前显示的分辨率
+  const currentWidth = config.resize?.width || originalWidth;
+  const currentHeight = config.resize?.height || originalHeight;
+  
+  // 计算比例标签
+  const aspectRatio = getAspectRatioLabel(currentWidth, currentHeight);
+  
+  // 如果没有图片，不显示状态栏
+  if (!fileName) {
+    return null;
+  }
+  
+  return (
+    <div className="h-6 bg-zinc-900 border-t border-zinc-800 flex items-center px-4 text-xs text-zinc-500 gap-4 shrink-0">
+      {fileName && (
+        <span className="text-zinc-400">
+          {fileName}
+        </span>
+      )}
+      {currentWidth > 0 && currentHeight > 0 && (
+        <>
+          <span className="text-zinc-600">|</span>
+          <span>
+            {currentWidth} × {currentHeight}
+          </span>
+          {aspectRatio && (
+            <>
+              <span className="text-zinc-600">|</span>
+              <span>
+                {aspectRatio.label}{aspectRatio.isApproximate && '（近似）'}
+              </span>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem('theme') as Theme;
+    if (savedTheme) {
+      return savedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    isDark: theme === 'dark'
+  };
+} 

package/src/i18n/index.ts

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: en
+      },
+      zh: {
+        translation: zh
+      }
+    },
+    lng: 'zh', // Default language
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false // React already safes from xss
+    }
+  });
+
+export default i18n;

package/src/i18n/locales/en.json

@@ -0,0 +1,56 @@
+{
+  "common": {
+    "appName": "MjPic",
+    "open": "Open",
+    "save": "Save",
+    "undo": "Undo",
+    "redo": "Redo",
+    "reset": "Reset",
+    "dragDrop": "Drag and drop image here or use open button",
+    "width": "Width",
+    "height": "Height",
+    "saveSettings": "Save Settings",
+    "format": "Format",
+    "quality": "Quality",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "saveSuccess": "Image saved successfully",
+    "savePath": "Save Path",
+    "fileName": "File Name",
+    "copySuffix": "_copy",
+    "manageRatios": "Manage Aspect Ratios",
+    "add": "Add",
+    "labelOptional": "Label (Optional)",
+    "default": "Default",
+    "presetSizes": "Preset Sizes",
+    "lockAspectRatio": "Lock Aspect Ratio"
+  },
+  "sidebar": {
+    "enhance": "Enhance",
+    "adjust": "Adjust",
+    "resize": "Resize",
+    "crop": "Crop",
+    "rotate": "Rotate",
+    "border": "Border"
+  },
+  "panels": {
+    "autoEnhance": "Auto Enhance",
+    "fillLight": "Fill Light",
+    "autoWhiteBalance": "Auto White Balance",
+    "brightness": "Brightness",
+    "contrast": "Contrast",
+    "saturation": "Saturation",
+    "sharpness": "Sharpness",
+    "dimensions": "Dimensions",
+    "borderWidth": "Border Width",
+    "borderColor": "Border Color",
+    "aspectRatio": "Aspect Ratio",
+    "free": "Free",
+    "rotateLeft": "Rotate Left 90°",
+    "rotateRight": "Rotate Right 90°",
+    "straighten": "Straighten Tool",
+    "straightenTip": "Draw a line on the image to straighten it",
+    "rotationAngle": "Rotation Angle",
+    "cropWarning": "Crop interaction not yet implemented on canvas."
+  }
+}

package/src/i18n/locales/zh.json

@@ -0,0 +1,59 @@
+{
+  "common": {
+    "appName": "敏捷图片",
+    "open": "打开",
+    "save": "保存",
+    "undo": "撤销",
+    "redo": "重做",
+    "reset": "重置",
+    "dragDrop": "拖拽图片到此处或使用打开按钮",
+    "width": "宽度",
+    "height": "高度",
+    "saveSettings": "保存设置",
+    "format": "格式",
+    "quality": "质量",
+    "cancel": "取消",
+    "confirm": "确定",
+    "saveSuccess": "图片保存成功",
+    "savePath": "保存路径",
+    "fileName": "文件名",
+    "copySuffix": "_副本",
+    "manageRatios": "管理比例",
+    "add": "添加",
+    "labelOptional": "标签（可选）",
+    "default": "默认",
+    "presetSizes": "预设尺寸",
+    "lockAspectRatio": "锁定宽高比"
+  },
+  "sidebar": {
+    "enhance": "增强",
+    "adjust": "调整",
+    "resize": "尺寸",
+    "crop": "裁剪",
+    "rotate": "旋转",
+    "border": "边框"
+  },
+  "panels": {
+    "autoEnhance": "自动美化",
+    "fillLight": "一键补光",
+    "autoWhiteBalance": "自动白平衡",
+    "brightness": "亮度",
+    "contrast": "对比度",
+    "saturation": "饱和度",
+    "sharpness": "清晰度",
+    "dimensions": "尺寸",
+    "borderWidth": "边框宽度",
+    "borderColor": "边框颜色",
+    "borderHorizontal": "水平边框",
+    "borderVertical": "垂直边框",
+    "borderSize": "边框尺寸",
+    "aspectRatio": "裁剪比例",
+    "free": "自由",
+    "rotateLeft": "向左旋转90°",
+    "rotateRight": "向右旋转90°",
+    "straighten": "拉直工具",
+    "straightenTip": "在图片上画一条线来校正水平",
+    "rotationAngle": "旋转角度",
+    "cropWarning": "画布上的交互式裁剪功能暂未实现。"
+  }
+}

package/src/index.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/lib/utils.ts

@@ -0,0 +1,73 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+// 常见比例列表
+const COMMON_RATIOS = [
+  { ratio: 1, label: '1:1' },
+  { ratio: 1.333, label: '4:3' },
+  { ratio: 1.5, label: '3:2' },
+  { ratio: 1.6, label: '16:10' },
+  { ratio: 1.778, label: '16:9' },
+  { ratio: 0.667, label: '2:3' },
+  { ratio: 0.75, label: '3:4' },
+  { ratio: 0.5625, label: '9:16' },
+];
+
+// 计算最大公约数
+function gcd(a: number, b: number): number {
+  return b === 0 ? a : gcd(b, a % b);
+}
+
+export interface AspectRatioResult {
+  label: string;
+  isApproximate: boolean;
+}
+
+// 将宽高比转换为整数比例格式
+export function getAspectRatioLabel(width: number, height: number): AspectRatioResult | null {
+  if (width <= 0 || height <= 0) return null;
+  
+  const aspectRatio = width / height;
+  
+  // 先尝试找到常见比例的精确匹配
+  for (const common of COMMON_RATIOS) {
+    if (Math.abs(aspectRatio - common.ratio) < 0.02) {
+      return { label: common.label, isApproximate: false };
+    }
+  }
+  
+  // 再尝试找到常见比例的近似匹配
+  for (const common of COMMON_RATIOS) {
+    if (Math.abs(aspectRatio - common.ratio) < 0.05) {
+      return { label: common.label, isApproximate: true };
+    }
+  }
+  
+  // 如果没有找到常见比例，则计算最大公约数并转换为整数比例
+  const divisor = gcd(width, height);
+  const ratioWidth = width / divisor;
+  const ratioHeight = height / divisor;
+  
+  // 简化比例，如果分子或分母太大则取近似值
+  if (ratioWidth > 100 || ratioHeight > 100) {
+    // 尝试用常见比例中最接近的
+    let closest = COMMON_RATIOS[0];
+    let minDiff = Math.abs(aspectRatio - COMMON_RATIOS[0].ratio);
+    
+    for (const common of COMMON_RATIOS) {
+      const diff = Math.abs(aspectRatio - common.ratio);
+      if (diff < minDiff) {
+        minDiff = diff;
+        closest = common;
+      }
+    }
+    
+    return { label: closest.label, isApproximate: true };
+  }
+  
+  return { label: `${ratioWidth}:${ratioHeight}`, isApproximate: false };
+}

package/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+import './i18n'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/pages/Home.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+import { useImageStore } from '@/store/useImageStore';
+import { Header } from '@/components/layout/Header';
+import { Sidebar } from '@/components/layout/Sidebar';
+import { CanvasArea } from '@/components/layout/CanvasArea';
+import { RightPanel } from '@/components/layout/RightPanel';
+import { StatusBar } from '@/components/layout/StatusBar';
+import Konva from 'konva';
+
+export default function Home() {
+  const { loadImage } = useImageStore();
+  const stageRef = useRef<Konva.Stage>(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          if (event.target?.result) {
+            loadImage(event.target.result as string, file.name, file.name);
+          }
+        };
+        reader.readAsDataURL(file);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetch('/api/current-image')
+      .then(res => {
+          if (res.ok) return res.json();
+          throw new Error('No image');
+      })
+      .then(data => {
+        if (data && data.path) {
+          // Extract filename from path
+          // Handle both Windows (\) and Unix (/) paths
+          const name = data.path.split(/[/\\]/).pop();
+          loadImage('/api/image-content', name, data.path);
+        }
+      })
+      .catch(() => {
+         // Silently fail if no image provided
+      });
+  }, [loadImage]);
+
+  return (
+    <div 
+      className="flex flex-col h-screen bg-zinc-950 text-zinc-100 overflow-hidden"
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <Header stageRef={stageRef} />
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar />
+        <CanvasArea stageRef={stageRef} />
+        <RightPanel />
+      </div>
+      <StatusBar />
+    </div>
+  );
+}