Update index.html and README.md for Image Stitcher tool

- Changed the HTML document structure to support a modernized image stitching tool, including updated meta tags for SEO and a new favicon.
- Enhanced README.md with detailed project description, features, installation instructions, and usage guidelines.
- Added a new icon for the application and removed outdated SVG assets.

Author: lulu0119

README.md

@@ -1,82 +1,143 @@
-好的！我来重构`DraggableImageList`组件，将其拆分为更小的组件，只保留合并预览模式，并添加每张图片的裁切比例设置功能。
+# Image Stitcher 图像拼接工具
 
-现在我需要检查是否有 UI 组件未导入的问题：
+一个现代化的在线图像拼接工具，支持多种图像格式的自动拼接与合成。基于 React + TypeScript + Tailwind CSS 构建，提供直观的拖拽操作界面。
 
-Ran tool
-很好，Select 组件存在。现在我需要更新 imageStore hook 以支持裁切设置的存储：
+## ✨ 特性
 
-现在需要更新 ImageStitcher 组件以传递新的回调函数：
+-   🖼️ **多格式支持** - 支持 JPG、PNG、GIF、WebP 等主流图像格式
+-   🎨 **灵活布局** - 支持水平、垂直两个方向的图像拼接
+-   🖱️ **拖拽排序** - 直观的拖拽界面，随意调整图像顺序
+-   ⚙️ **丰富选项** - 自定义间距、边框、背景色等拼接参数
+-   📱 **响应式设计** - 完美适配桌面端和移动端设备
+-   🎯 **实时预览** - 实时查看拼接效果，所见即所得
+-   📁 **批量处理** - 一次上传多个图像，快速完成拼接
+-   💾 **高质量输出** - 保持原始图像质量的输出效果
 
-现在我需要删除重复的接口定义，因为在 DraggableImageList 中定义了相同的接口：
+## 🚀 快速开始
 
-现在让我启动开发服务器来测试重构后的功能：
+### 环境要求
+
+-   Node.js >= 20.0.0
+-   pnpm >= 8.0.0
+
+### 安装依赖
 
 ```bash
-npm run dev
+# 克隆项目
+git clone https://github.com/FastMirror-MC/image-stitcher.git
+cd image-stitcher
+
+# 安装依赖
+pnpm install
 ```
 
-## 🎉 重构完成！全新的图像拼接预览组件
+### 开发模式
 
-我已经成功重构了`DraggableImageList`组件，现在它具有以下全新特性：
+```bash
+# 启动开发服务器
+pnpm dev
+```
 
-### ✨ 主要改进
+打开 [http://localhost:5173](http://localhost:5173) 在浏览器中查看。
 
-#### 1. **组件架构优化**
+### 构建生产版本
 
--   **模块化设计**: 拆分为 4 个独立的子组件
-    -   `ImageCropControl`: 图像裁切设置控制
-    -   `DraggableImagePreview`: 可拖拽的图像预览
-    -   `MergePreview`: 合并预览容器
-    -   `DraggableImageList`: 主组件
+```bash
+# 构建项目
+pnpm build
 
-#### 2. **简化的用户界面**
+# 本地预览生产版本
+pnpm preview
+```
 
--   **移除复杂的视图切换**: 只保留合并预览模式
--   **直观的预览**: 用户可以直接在预览中看到最终拼接效果
--   **直接拖拽**: 在预览模式中直接拖拽调整图像顺序
+## 🎯 使用方法
 
-#### 3. **🆕 图像裁切功能**
+### 基本使用流程
 
--   **9 种常见宽高比选择**:
-    -   原始比例、1:1 (正方形)、4:3 (标准)、3:2 (经典)
-    -   16:9 (宽屏)、21:9 (超宽)、2:3/3:4/9:16 (竖直)
--   **智能裁切计算**: 自动计算最佳裁切区域
--   **实时预览**: 裁切比例变化时立即更新预览
--   **尺寸显示**: 显示裁切后的实际尺寸
+1. **上传图像** - 拖拽或点击选择多个图像文件
+2. **调整顺序** - 通过拖拽调整图像的排列顺序
+3. **设置选项** - 选择拼接方向、调整间距、边框等参数
+4. **实时预览** - 查看右侧的拼接效果预览
+5. **下载结果** - 点击下载按钮获取最终拼接图像
 
-#### 4. **增强的拖拽体验**
+### 拼接选项说明
 
--   **视觉反馈**: 拖拽时的透明度、缩放、边框高亮
--   **精确排序**: 支持在预览布局中直接调整顺序
--   **智能布局**: 根据合并方向自动调整预览布局
+-   **拼接方向** - 选择水平或垂直拼接
+-   **图像缩放** - 统一调整所有图像的尺寸比例
+-   **图像间距** - 设置图像之间的间距大小
+-   **边框设置** - 为每个图像添加边框效果
+-   **背景颜色** - 自定义拼接区域的背景色
 
-#### 5. **完整的状态管理**
+## 🛠️ 技术栈
 
--   **扩展 ImageStore**: 添加了`updateImageCrop`功能
--   **类型安全**: 完整的 TypeScript 类型定义
--   **持久化设置**: 图像裁切设置与图像绑定
+-   **前端框架**: React 19 + TypeScript
+-   **构建工具**: Vite 6
+-   **样式方案**: Tailwind CSS 4
+-   **UI 组件**: Radix UI + shadcn/ui
+-   **状态管理**: Zustand
+-   **图标库**: Lucide React
+-   **包管理器**: pnpm
 
-### 🔧 技术特性
+## 📁 项目结构
 
--   **性能优化**: 纯 CSS 布局预览，避免 Canvas 重渲染
--   **智能尺寸计算**: 支持所有 resize 模式与裁切比例的组合
--   **响应式设计**: 预览自动适应容器大小
--   **无障碍支持**: 完整的键盘和屏幕阅读器支持
+```
+image-stitcher/
+├── public/                 # 静态资源
+├── src/
+│   ├── components/         # React 组件
+│   │   ├── ui/            # 基础 UI 组件
+│   │   ├── ImageStitcher.tsx    # 主应用组件
+│   │   ├── ImageUploader.tsx    # 图像上传组件
+│   │   ├── DraggableImageList.tsx # 可拖拽图像列表
+│   │   ├── MergeOptions.tsx     # 拼接选项面板
+│   │   └── PreviewCanvas.tsx    # 预览画布
+│   ├── hooks/             # 自定义 Hook
+│   ├── lib/               # 工具函数
+│   └── assets/            # 资源文件
+├── package.json
+├── vite.config.ts         # Vite 配置
+└── README.md
+```
 
-### 📱 用户体验
+## 🤝 贡献指南
 
-1. **上传图像**: 图像自动添加默认裁切设置
-2. **设置裁切**: 为每张图像选择最佳宽高比
-3. **实时预览**: 立即看到裁切和合并效果
-4. **拖拽排序**: 直接在预览中调整图像顺序
-5. **一键导出**: 所有设置自动应用到最终输出
+欢迎提交 Issue 和 Pull Request 来改进这个项目！
 
-### 🎯 现在的完整工作流程
+### 开发规范
 
-```
-📸 上传图像 → ✂️ 设置裁切比例 → 🎨 调整合并选项 → 👀 实时预览 → 📥 下载结果
-```
+1. 使用 TypeScript 进行类型安全的开发
+2. 遵循 ESLint 配置的代码规范
+3. 提交前请运行 `pnpm lint` 检查代码质量
+4. 确保所有功能在主流浏览器中正常工作
+
+### 提交 Pull Request
+
+1. Fork 本仓库
+2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 打开 Pull Request
+
+## 📄 开源协议
+
+本项目采用 MIT 协议开源。详见 [LICENSE](LICENSE) 文件。
+
+## 🙏 致谢
+
+-   [React](https://reactjs.org/) - 用户界面构建库
+-   [Vite](https://vitejs.dev/) - 现代化的前端构建工具
+-   [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
+-   [Radix UI](https://www.radix-ui.com/) - 无样式、可访问的 UI 组件
+-   [Lucide](https://lucide.dev/) - 美观的开源图标库
+
+## 📮 联系方式
+
+如有问题或建议，请通过以下方式联系：
+
+-   提交 [GitHub Issue](https://github.com/FastMirror-MC/image-stitcher/issues)
+-   发送邮件至: [email protected]
+-   访问我们的网站: [FastMirror](https://www.fastmirror.net)
 
-这个重构大大简化了用户界面，提供了更专业的图像处理功能。用户可以通过裁切功能创建更统一和美观的拼接效果，而实时预览确保了所见即所得的体验。
+---
 
-你想要启动开发服务器测试这些新功能吗？或者还有其他需要改进的地方？
+⭐ 如果这个项目对你有帮助，请不要忘记给它一个 Star！

index.html

@@ -1,13 +1,41 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/icon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="现代化的在线图像拼接工具，支持多种图像格式的自动拼接与合成。提供直观的拖拽操作界面，实时预览效果。"
+        />
+        <meta
+            name="keywords"
+            content="图像拼接,图片合并,照片拼接,图像合成,在线工具,React,TypeScript"
+        />
+        <meta name="author" content="Image Stitcher Team" />
+        <meta name="robots" content="index, follow" />
+
+        <!-- Open Graph / Facebook -->
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="Image Stitcher - 图像拼接工具" />
+        <meta
+            property="og:description"
+            content="现代化的在线图像拼接工具，支持多种图像格式的自动拼接与合成。提供直观的拖拽操作界面，实时预览效果。"
+        />
+        <meta property="og:site_name" content="Image Stitcher" />
+
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="Image Stitcher - 图像拼接工具" />
+        <meta
+            name="twitter:description"
+            content="现代化的在线图像拼接工具，支持多种图像格式的自动拼接与合成。"
+        />
+
+        <title>Image Stitcher - 图像拼接工具</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>

public/icon.png

@@ -8,8 +8,8 @@ export const Header: React.FC = () => {
                 <div className="flex items-center justify-between">
                     <div className="flex items-center space-x-4">
                         <div className="flex items-center space-x-2">
-                            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                                <span className="text-primary-foreground font-bold text-sm">拼</span>
+                            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+                                <span className="text-primary-foreground font-bold text-2xl">拼</span>
                             </div>
                             <div>
                                 <h1 className="text-xl font-bold text-foreground">图像拼接工具</h1>