chore: update

57d488f2 · fisherdaddy · c717bfff · 57d488f2 · 57d488f2 · 57d488f2
Commit 57d488f2 authored Nov 26, 2024 by fisherdaddy
29 changed files
--- a/src/components/AnthropicTimeline.jsx
+++ b/src/components/AnthropicTimeline.jsx
@@ -3,9 +3,11 @@ import '../styles/Timeline.css';  // 复用已有的Timeline样式
 import events from '../data/anthropic-releases.json';
 import SEO from '../components/SEO';
 import { useTranslation } from '../js/i18n';
+import { useScrollToTop } from '../hooks/useScrollToTop';
 const AnthropicTimeline = () => {
  const { t } = useTranslation();
+  useScrollToTop();
  return (
    <>

--- a/src/components/BackgroundRemover.jsx
+++ b/src/components/BackgroundRemover.jsx
@@ -3,6 +3,7 @@ import { removeBackground } from "@imgly/background-removal";
 import styled from 'styled-components';
 import { useTranslation } from '../js/i18n';
 import SEO from './SEO';
+import { useScrollToTop } from '../hooks/useScrollToTop';
 // Reuse container style
 const Container = styled.div`
@@ -157,6 +158,7 @@ const PrivacyNote = styled.div`
 `;
 function BackgroundRemover() {
+  useScrollToTop();
  const { t } = useTranslation();
  const [selectedImage, setSelectedImage] = useState(null);
  const [removedBgImage, setRemovedBgImage] = useState(null);

--- a/src/components/HandwriteGen.jsx
+++ b/src/components/HandwriteGen.jsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 import '../styles/HandwriteGen.css';
 import html2canvas from 'html2canvas';
 import {
@@ -16,6 +18,7 @@ const { Option } = Select;
 const { Title } = Typography;
 function HandwritingGenerator() {
+    const isLoading = usePageLoading();
    const [text, setText] = useState('');
    const [font, setFont] = useState("'XINYE'");
    const [paperType, setPaperType] = useState('Lined Paper'); // 默认值为横线纸
@@ -30,6 +33,15 @@ function HandwritingGenerator() {
    const [lineSpacing, setLineSpacing] = useState(1.25);
    const [charSpacing, setCharSpacing] = useState(0);
+    useEffect(() => {
+        // Clear any loading states from previous navigation
+        const clearLoadingState = () => {
+            const event = new CustomEvent('clearLoadingState');
+            window.dispatchEvent(event);
+        };
+        clearLoadingState();
+    }, []);
    const handleGenerate = () => {
        const previewElement = document.querySelector('.preview-area');
        html2canvas(previewElement, {
@@ -145,8 +157,9 @@ function HandwritingGenerator() {
    const backgroundOffset = -(lineSpacing * fontSize - fontSize);
    return (
-        <div className="handwrite-container" style={{ paddingTop: '4rem' }}>
+        <>
-            <Layout>
+            {isLoading && <LoadingOverlay />}
+            <Layout className="min-h-screen pt-20">
                <Sider width={300} className="site-layout-background">
                    <div className="settings-section">
                        <h2 className="title-label">手写字体生成器</h2>
@@ -314,7 +327,7 @@ function HandwritingGenerator() {
                    </Content>
                </Layout>
            </Layout>
-        </div>
+        </>
    );
 }

--- a/src/components/ImageBase64Converter.jsx
+++ b/src/components/ImageBase64Converter.jsx
 // ImageBase64Converter.jsx
+import React, { useState, useCallback, useRef } from 'react';
-import React, { useState, useCallback } from 'react';
-import { Title, Wrapper, Container } from '../js/SharedStyles';
-import styled from 'styled-components';
 import { useTranslation } from '../js/i18n';
-import SEO from '../components/SEO';
+import SEO from './SEO';
+import styled from 'styled-components';
-const ConverterContainer = styled(Container)`
+import { usePageLoading } from '../hooks/usePageLoading';
-  flex-direction: column;
+import LoadingOverlay from './LoadingOverlay';
-  gap: 24px;
-  padding: 24px;
+// 复用相同的样式组件
-  background: rgba(255, 255, 255, 0.8);
+const Container = styled.div`
-  backdrop-filter: blur(10px);
+  min-height: 100vh;
-  border: 1px solid rgba(99, 102, 241, 0.1);
+  background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
-  border-radius: 12px;
+  padding: 4rem 2rem 2rem;
-  padding-top: 4rem; // 添加顶部内边距
+  position: relative;
-`;
-const Section = styled.div`
+  &::before {
-  width: 100%;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
+      linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
+    background-size: 20px 20px;
+    pointer-events: none;
+  }
 `;
-const Label = styled.label`
+const ContentWrapper = styled.div`
-  font-weight: 500;
+  max-width: 1400px;
-  font-size: 14px;
+  margin: 0 auto;
-  color: #374151;
+  position: relative;
-  margin-bottom: 12px;
+  z-index: 1;
-  display: block;
-  letter-spacing: 0.1px;
 `;
-const StyledInputText = styled.textarea`
+const Title = styled.h2`
-  width: 100%;
+  font-size: 1.8rem;
-  height: 120px;
+  margin-bottom: 1.5rem;
-  font-size: 15px;
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-  padding: 16px;
+  -webkit-background-clip: text;
-  border: 1px solid rgba(99, 102, 241, 0.1);
+  -webkit-text-fill-color: transparent;
-  border-radius: 12px;
+  font-weight: 700;
-  background: rgba(255, 255, 255, 0.8);
+  letter-spacing: -0.02em;
-  backdrop-filter: blur(10px);
+  text-align: center;
-  box-sizing: border-box;
-  outline: none;
-  resize: none;
-  transition: all 0.3s ease;
-  line-height: 1.5;
-  &:focus {
-    border-color: rgba(99, 102, 241, 0.3);
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
-  }
 `;
-const FileInputWrapper = styled.div`
+const FileInputWrapper = styled.label`
  position: relative;
  width: 100%;
-  height: 120px;
+  height: 200px;
  border: 2px dashed rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  display: flex;
@@ -62,6 +57,8 @@ const FileInputWrapper = styled.div`
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
  &:hover {
    border-color: rgba(99, 102, 241, 0.4);
@@ -78,255 +75,282 @@ const FileInputWrapper = styled.div`
  span {
    color: #6366F1;
-    font-size: 14px;
+    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
+    pointer-events: none;
  }
 `;
-const ResultContainer = styled.div`
+const ResultArea = styled.div`
-  position: relative;
  width: 100%;
+  min-height: 200px;
+  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
-  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.1);
-  padding: 16px;
+  border-radius: 12px;
-  min-height: 120px;
+  position: relative;
+  textarea {
+    width: 100%;
+    min-height: 180px;
+    border: none;
+    background: transparent;
+    resize: vertical;
+    outline: none;
+    font-family: monospace;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
 `;
 const ActionButton = styled.button`
-  background: rgba(99, 102, 241, 0.1);
+  display: inline-flex;
-  border: none;
+  align-items: center;
-  border-radius: 6px;
+  gap: 1.5px;
  padding: 6px 12px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+  border: none;
  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: #6366F1;
-  transition: all 0.3s ease;
-  &:hover {
+  ${props => props.variant === 'success' && `
-    background: rgba(99, 102, 241, 0.2);
+    background-color: #DEF7EC;
-  }
+    color: #03543F;
+  `}
-  &.active {
+  ${props => !props.variant && `
-    background: #6366F1;
+    background-color: rgba(255, 255, 255, 0.5);
-    color: white;
+    color: #4B5563;
+    &:hover {
+      background-color: #EEF2FF;
+      color: #4F46E5;
    }
+  `}
-  svg {
+  &:disabled {
-    width: 14px;
+    opacity: 0.5;
-    height: 14px;
+    cursor: not-allowed;
  }
 `;
-const ImagePreviewContainer = styled.div`
+const PreviewImage = styled.img`
-  position: relative;
+  max-width: 100%;
-  width: 100%;
+  max-height: 300px;
-  margin-top: 8px;
+  margin: 1rem 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-const ThumbnailContainer = styled.div`
-  position: relative;
-  width: 120px;
-  height: 120px;
  border-radius: 8px;
-  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(99, 102, 241, 0.1);
-`;
-const PreviewActions = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-`;
-const Thumbnail = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
 `;
 const ImageDetails = styled.div`
-  font-size: 13px;
+  font-size: 0.875rem;
  color: #6B7280;
-  margin-top: 4px;
+  margin-top: 0.5rem;
-`;
-const ErrorText = styled.div`
-  color: #EF4444;
-  font-size: 14px;
-  margin-top: 8px;
 `;
 function ImageBase64Converter() {
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
-  // 图片转 Base64 的状态
-  const [imageFile, setImageFile] = useState(null);
  const [base64String, setBase64String] = useState('');
+  const [previewUrl, setPreviewUrl] = useState('');
  const [isCopied, setIsCopied] = useState(false);
+  const [imageFile, setImageFile] = useState(null);
-  // Base64 转图片的状态
-  const [inputBase64, setInputBase64] = useState('');
-  const [imageSrc, setImageSrc] = useState('');
  const [error, setError] = useState('');
+  const fileInputRef = useRef(null);
-  // 处理图片上传
+  // 清除所有状态
-  const handleImageUpload = (e) => {
+  const clearStates = () => {
-    const file = e.target.files[0];
+    setBase64String('');
+    setPreviewUrl('');
+    setImageFile(null);
+    setError('');
+  };
+  // 处理图片转 Base64
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
    if (file) {
      setImageFile(file);
      const reader = new FileReader();
-      reader.onloadend = () => {
+      reader.onload = (e) => {
-        setBase64String(reader.result);
+        const base64 = e.target.result;
+        setBase64String(base64);
+        setPreviewUrl(base64);
+        setError('');
+      };
+      reader.onerror = () => {
+        setError(t('tools.imageBase64Converter.readError'));
      };
      reader.readAsDataURL(file);
    }
+    // 重置 input 的 value，这样同一个文件也能触发 change 事件
+    event.target.value = '';
  };
-  // 复制 Base64 字符串
+  // 处理 Base64 转图片
-  const handleCopy = useCallback(() => {
+  const handleBase64Input = (event) => {
-    navigator.clipboard.writeText(base64String).then(() => {
+    const input = event.target.value;
-      setIsCopied(true);
+    setBase64String(input);
-      setTimeout(() => setIsCopied(false), 2000);
+    setError('');
-    });
-  }, [base64String]);
-  // 处理 Base64 输入变化
+    if (!input) {
-  const handleBase64InputChange = (e) => {
+      setPreviewUrl('');
-    const input = e.target.value.trim();
+      setImageFile(null);
-    setInputBase64(input);
+      return;
-    if (input) {
-      let src = input;
-      if (!input.startsWith('data:image/')) {
-        // 尝试自动推断图片类型
-        const match = input.match(/^data:(image\/[a-zA-Z]+);base64,/);
-        let mimeType = 'image/png'; // 默认类型
-        if (match && match[1]) {
-          mimeType = match[1];
    }
-        src = `data:${mimeType};base64,${input}`;
+    try {
+      // 尝试验证和修复 base64 字符串
+      let validBase64 = input.trim();
+      // 如果不是以 data:image 开头，尝试添加
+      if (!validBase64.startsWith('data:image')) {
+        // 检查是否只包含 base64 字符
+        const base64Regex = /^[A-Za-z0-9+/=]+$/;
+        if (base64Regex.test(validBase64)) {
+          validBase64 = `data:image/png;base64,${validBase64}`;
        }
-      setImageSrc(src);
-      setError('');
-    } else {
-      setImageSrc('');
-      setError('');
      }
-  };
-  // 图片加载错误处理
+      // 创建一个新的图片对象来验证 base64 字符串
-  const handleImageError = () => {
+      const img = new Image();
+      img.onload = () => {
+        setPreviewUrl(validBase64);
+        setError('');
+      };
+      img.onerror = () => {
+        setPreviewUrl('');
        setError(t('tools.imageBase64Converter.invalidBase64'));
-    setImageSrc('');
+      };
+      img.src = validBase64;
+    } catch (err) {
+      setPreviewUrl('');
+      setError(t('tools.imageBase64Converter.invalidBase64'));
+    }
  };
  // 下载图片
  const handleDownload = () => {
+    if (!previewUrl) return;
    const link = document.createElement('a');
-    link.href = imageSrc;
+    link.href = previewUrl;
-    // 尝试从 Base64 字符串中提取文件类型和扩展名
+    link.download = imageFile ? imageFile.name : 'image.png';
-    let fileName = 'downloaded_image';
-    const match = imageSrc.match(/^data:(image\/[a-zA-Z]+);base64,/);
-    if (match && match[1]) {
-      const mime = match[1];
-      const extension = mime.split('/')[1];
-      fileName += `.${extension}`;
-    } else {
-      fileName += `.png`;
-    }
-    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(base64String).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    });
+  }, [base64String]);
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.imageBase64Converter.title')}
        description={t('tools.imageBase64Converter.description')}
      />
-      <Wrapper>
+      <Container>
+        <ContentWrapper>
          <Title>{t('tools.imageBase64Converter.title')}</Title>
-        <ConverterContainer>
-          <Section>
+          <div className="flex flex-col gap-6">
-            <Label>{t('tools.imageBase64Converter.imageToBase64')}</Label>
+            <div className="space-y-2">
+              <div className="block text-sm font-medium text-gray-700">
+                {t('tools.imageBase64Converter.imageToBase64')}
+              </div>
              <FileInputWrapper>
                <input
                  type="file"
                  accept="image/*"
-                onChange={handleImageUpload}
+                  onChange={handleFileChange}
                />
                <span>
-                <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z"/>
+                    <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
                  </svg>
                  {t('tools.imageBase64Converter.dragOrClick')}
                </span>
              </FileInputWrapper>
-            {base64String && (
+            </div>
-              <ResultContainer>
-                <pre>{base64String}</pre>
+            <div className="space-y-2">
-                <ActionButton onClick={handleCopy} className={isCopied ? 'active' : ''}>
+              <label className="block text-sm font-medium text-gray-700">
+                {t('tools.imageBase64Converter.base64ToImage')}
+              </label>
+              <ResultArea>
+                <textarea
+                  value={base64String}
+                  onChange={handleBase64Input}
+                  placeholder={t('tools.imageBase64Converter.base64InputPlaceholder')}
+                />
+              </ResultArea>
+              <div className="flex justify-end gap-2">
+                {error && (
+                  <div className="text-red-500 text-sm flex-1 pt-2">
+                    {error}
+                  </div>
+                )}
+                <ActionButton
+                  onClick={handleCopy}
+                  disabled={!base64String}
+                  variant={isCopied ? 'success' : undefined}
+                >
                  {isCopied ? (
-                    <svg viewBox="0 0 24 24" fill="currentColor">
+                    <>
+                      <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                      </svg>
+                      {t('copied')}
+                    </>
                  ) : (
-                    <svg viewBox="0 0 24 24" fill="currentColor">
+                    <>
+                      <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                      </svg>
+                      {t('copy')}
+                    </>
                  )}
-                  {isCopied ? t('tools.jsonFormatter.copiedMessage') : t('tools.jsonFormatter.copyButton')}
                </ActionButton>
-                <ThumbnailContainer>
+              </div>
-                  <Thumbnail src={base64String} alt="Preview" />
+            </div>
-                </ThumbnailContainer>
+            {previewUrl && (
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <label className="block text-sm font-medium text-gray-700">
+                    {t('tools.imageBase64Converter.preview')}
+                  </label>
+                  <ActionButton
+                    onClick={handleDownload}
+                  >
+                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+                    </svg>
+                    {t('tools.imageBase64Converter.download')}
+                  </ActionButton>
+                </div>
+                <PreviewImage src={previewUrl} alt="Preview" />
                {imageFile && (
                  <ImageDetails>
                    {t('tools.imageBase64Converter.fileName')}: {imageFile.name}<br />
                    {t('tools.imageBase64Converter.fileSize')}: {(imageFile.size / 1024).toFixed(2)} KB
                  </ImageDetails>
                )}
-              </ResultContainer>
+              </div>
-            )}
-          </Section>
-          <Section>
-            <Label>{t('tools.imageBase64Converter.base64ToImage')}</Label>
-            <StyledInputText
-              value={inputBase64}
-              onChange={handleBase64InputChange}
-              placeholder={t('tools.imageBase64Converter.base64InputPlaceholder')}
-            />
-            {error && <ErrorText>{error}</ErrorText>}
-            {imageSrc && (
-              <ImagePreviewContainer>
-                <ThumbnailContainer>
-                  <Thumbnail src={imageSrc} alt="Thumbnail" onError={handleImageError} />
-                </ThumbnailContainer>
-                <PreviewActions>
-                  <ActionButton onClick={handleDownload}>
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M12 12v9m0 0l-3-3m3 3l3-3"/>
-                    </svg>
-                    {t('tools.imageBase64Converter.download')}
-                  </ActionButton>
-                </PreviewActions>
-              </ImagePreviewContainer>
            )}
-          </Section>
+          </div>
-        </ConverterContainer>
+        </ContentWrapper>
-      </Wrapper>
+      </Container>
    </>
  );
 }

--- a/src/components/ImageCompressor.jsx
+++ b/src/components/ImageCompressor.jsx
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import { useTranslation } from '../js/i18n';
 import SEO from './SEO';
 import imageCompression from 'browser-image-compression';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 // 复用 MarkdownToImage 的容器样式
 const Container = styled.div`
@@ -402,6 +404,7 @@ const truncateFilename = (filename, maxLength = 10) => {
 function ImageCompressor() {
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
  const [images, setImages] = useState([]); // 修改为数组存储多张图片
  const [compressedImages, setCompressedImages] = useState([]);
  const [settings, setSettings] = useState({
@@ -523,6 +526,7 @@ function ImageCompressor() {
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.imageCompressor.title')}
        description={t('tools.imageCompressor.description')}

--- a/src/components/ImageWatermark.jsx
+++ b/src/components/ImageWatermark.jsx
@@ -2,6 +2,8 @@ import React, { useState, useRef, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../js/i18n';
 import SEO from './SEO';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 // 复用 MarkdownToImage 的基础容器样式
 const Container = styled.div`
@@ -164,6 +166,7 @@ const PrivacyNote = styled.div`
 function ImageWatermark() {
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
  const [image, setImage] = useState(null);
  const [watermarkText, setWatermarkText] = useState('');
  const [watermarkImage, setWatermarkImage] = useState(null);
@@ -339,6 +342,7 @@ function ImageWatermark() {
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.imageWatermark.title')}
        description={t('tools.imageWatermark.description')}

--- a/src/components/JsonFormatter.jsx
+++ b/src/components/JsonFormatter.jsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from '../js/i18n';
 import SEO from '../components/SEO';
 import styled from 'styled-components';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 const Container = styled.div`
  min-height: 100vh;
@@ -48,6 +50,7 @@ function JsonFormatter() {
  const [parsedJson, setParsedJson] = useState(null);
  const [isCopied, setIsCopied] = useState(false);
  const [isCompressed, setIsCompressed] = useState(false);
+  const isLoading = usePageLoading();
  useEffect(() => {
    try {
@@ -80,6 +83,7 @@ function JsonFormatter() {
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.jsonFormatter.title')}
        description={t('tools.jsonFormatter.description')}

--- a/src/components/LatexToImage.jsx
+++ b/src/components/LatexToImage.jsx
@@ -6,6 +6,8 @@ import DOMPurify from 'dompurify';
 import SEO from './SEO';
 import { useTranslation } from '../js/i18n';
 import html2canvas from 'html2canvas';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 // 容器样式
 const Container = styled.div`
@@ -144,6 +146,7 @@ const DownloadButton = styled.button`
 function HtmlPreview() {
  const [html, setHtml] = useState('');
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
  // 处理 LaTeX 公式
  const processLatex = (content) => {
@@ -269,6 +272,7 @@ function HtmlPreview() {
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.latex2image.title')}
        description={t('tools.latex2image.description')}

--- a/src/components/LoadingOverlay.jsx
+++ b/src/components/LoadingOverlay.jsx
+import React from 'react';
+const LoadingOverlay = () => {
+  return (
+    <div className="fixed inset-0 bg-white/80 flex items-center justify-center z-50">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+        <div className="text-indigo-600 font-medium">Loading...</div>
+      </div>
+    </div>
+  );
+};
+export default LoadingOverlay;
--- a/src/components/MarkdownToImage.jsx
+++ b/src/components/MarkdownToImage.jsx
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { marked } from 'marked';
 import { useTranslation } from '../js/i18n';
 import SEO from './SEO';
 import DOMPurify from 'dompurify';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 // 更新预设模板
 const templates = [
@@ -303,11 +305,12 @@ const Preview = styled.div`
  hyphens: auto;
 `;
-function TextToImage() {
+function MarkdownToImage() {
  const { t } = useTranslation();
  const [text, setText] = useState('');
  const [selectedTemplate, setSelectedTemplate] = useState(templates[0]);
  const previewRef = useRef(null);
+  const isLoading = usePageLoading();
  const formatText = (text) => {
    return marked.parse(text, {
@@ -419,6 +422,7 @@ function TextToImage() {
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.markdown2image.title')}
        description={t('tools.markdown2image.description')}
@@ -473,4 +477,4 @@ function TextToImage() {
  );
 }
-export default TextToImage;
+export default MarkdownToImage;
\ No newline at end of file
--- a/src/components/OpenAITimeline.jsx
+++ b/src/components/OpenAITimeline.jsx
 import React from 'react';
+import { useScrollToTop } from '../hooks/useScrollToTop';
 import '../styles/Timeline.css';
 import events from '../data/openai-releases.json';
 import SEO from '../components/SEO';
 import { useTranslation } from '../js/i18n';
 const Timeline = () => {
+  useScrollToTop();
  const { t } = useTranslation();
  return (

--- a/src/components/PricingChart.jsx
+++ b/src/components/PricingChart.jsx
 // PricingChart.jsx
 import React, { useState } from 'react';
+import { useScrollToTop } from '../hooks/useScrollToTop';
 import '../styles/PricingChart.css';
 const ChartLegend = ({ onLegendClick, highlightedBarTypes }) => {
@@ -99,6 +100,7 @@ const GridLines = () => (
 );
 const PricingChart = ({ data }) => {
+  useScrollToTop();
  const [highlightedBarTypes, setHighlightedBarTypes] = useState({
    input: true,
    output: true,

--- a/src/components/PricingCharts.jsx
+++ b/src/components/PricingCharts.jsx
 import React from 'react';
+import { useScrollToTop } from '../hooks/useScrollToTop';
 import PricingChart from '../components/PricingChart';
 import OpenaiPricing from '../data/openai-pricing.json';
 import LLMPricing from '../data/llm-pricing.json';
@@ -6,6 +7,7 @@ import VisionPricing from '../data/vision-model-pricing.json';
 import SEO from '../components/SEO';
 const PricingCharts = () => {
+  useScrollToTop();
  const lastUpdateTime = '2024-11-06 21:30';
  return (

--- a/src/components/QuoteCard.jsx
+++ b/src/components/QuoteCard.jsx
@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 import html2canvas from 'html2canvas';
 import { useTranslation } from '../js/i18n';
+import { useScrollToTop } from '../hooks/useScrollToTop';
 // 更新中文字体数组，包含显示名称和 CSS 字体族名称
 const chineseFonts = [
@@ -203,6 +204,7 @@ const DownloadButton = styled.button`
 `;
 function QuoteCard() {
+  useScrollToTop();
  const { t } = useTranslation();
  const [chineseText, setChineseText] = useState('');

--- a/src/components/SubtitleGenerator.jsx
+++ b/src/components/SubtitleGenerator.jsx
 import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../js/i18n';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
+import SEO from './SEO';
+const Container = styled.div`
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
+  padding: 4rem 2rem 2rem;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
+      linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
+    background-size: 20px 20px;
+    pointer-events: none;
+  }
+`;
+const ContentWrapper = styled.div`
+  max-width: 1400px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+`;
+const Title = styled.h2`
+  font-size: 1.8rem;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-align: center;
+`;
+const MainContent = styled.div`
+  display: flex;
+  gap: 2rem;
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+const SettingsPanel = styled.div`
+  flex: 1;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+`;
+const PreviewPanel = styled.div`
+  flex: 1;
+  text-align: center;
+`;
+const Button = styled.button`
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+  color: white;
+  border: none;
+  padding: 0.8rem 1.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
+  }
+`;
+const DeleteButton = styled(Button)`
+  background: #ef4444;
+  padding: 0.4rem 0.8rem;
+  font-size: 0.9rem;
+`;
+const SubtitleInput = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  align-items: center;
+  input[type="text"] {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 0.9rem;
+  }
+`;
+const NumberInput = styled.input`
+  width: 80px;
+  padding: 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 0.9rem;
+`;
+const Select = styled.select`
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+`;
+const PreviewImage = styled.img`
+  max-width: 100%;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+`;
+const UploadButton = styled.div`
+  border: 2px dashed rgba(99, 102, 241, 0.2);
+  border-radius: 12px;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.5);
+  &:hover {
+    border-color: rgba(99, 102, 241, 0.4);
+    background: rgba(99, 102, 241, 0.05);
+  }
+`;
+const HiddenFileInput = styled.input`
+  display: none;
+`;
+const SettingGroup = styled.div`
+  margin-bottom: 1.5rem;
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #374151;
+  }
+`;
+const RangeInput = styled.input`
+  width: 100%;
+  height: 6px;
+  background: #e5e7eb;
+  border-radius: 3px;
+  outline: none;
+  -webkit-appearance: none;
+  margin: 10px 0;
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    background: #6366F1;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    &:hover {
+      transform: scale(1.1);
+      background: #4F46E5;
+    }
+  }
+  &::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    background: #6366F1;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+    &:hover {
+      transform: scale(1.1);
+      background: #4F46E5;
+    }
+  }
+  &::-ms-thumb {
+    width: 18px;
+    height: 18px;
+    background: #6366F1;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+    &:hover {
+      transform: scale(1.1);
+      background: #4F46E5;
+    }
+  }
+`;
+const ColorPickerContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+`;
+const ColorInput = styled.input`
+  -webkit-appearance: none;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  &::-webkit-color-swatch {
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+  }
+`;
+const ColorPresets = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+`;
+const ColorPresetButton = styled.button`
+  width: 32px;
+  height: 32px;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  background-color: ${props => props.$color};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  &:hover {
+    transform: scale(1.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+`;
+const ControlPanel = styled.div`
+  flex: 1;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+`;
 const SubtitleMaker = () => {
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
  const [imageSrc, setImageSrc] = useState(null);
  const [subtitles, setSubtitles] = useState([{ text: '' }]);
  const canvasRef = useRef(null);
@@ -58,7 +327,7 @@ const SubtitleMaker = () => {
  };
  // 绘制字幕到canvas
-useEffect(() => {
+  useEffect(() => {
    if (imageSrc) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
@@ -137,8 +406,18 @@ useEffect(() => {
  }
  return (
+    <>
+      {isLoading && <LoadingOverlay />}
+      <SEO
+        title={t('tools.subtitleGenerator.title')}
+        description={t('tools.subtitleGenerator.description')}
+      />
      <Container>
-      <SettingsPanel>
+        <ContentWrapper>
+          <Title>{t('tools.subtitleGenerator.title')}</Title>
+          <MainContent>
+            {/* Left Panel */}
+            <ControlPanel>
              <h3>{t('tools.subtitleGenerator.uploadImage')}</h3>
              <UploadButton onClick={() => fileInputRef.current.click()}>
                <HiddenFileInput
@@ -227,8 +506,9 @@ useEffect(() => {
                  <Button onClick={addSubtitleLine}>{t('tools.subtitleGenerator.addSubtitleLine')}</Button>
                </>
              )}
-      </SettingsPanel>
+            </ControlPanel>
+            {/* Right Panel */}
            <PreviewPanel>
              <h3>{t('tools.subtitleGenerator.preview')}</h3>
              {finalImage && (
@@ -239,241 +519,11 @@ useEffect(() => {
              )}
              <canvas ref={canvasRef} style={{ display: 'none' }} />
            </PreviewPanel>
+          </MainContent>
+        </ContentWrapper>
      </Container>
+    </>
  );
 };
-// Styled Components
-const Container = styled.div`
-  display: flex;
-  gap: 2rem;
-  padding: 4rem 2rem 2rem;
-  background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
-  min-height: 100vh;
-  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 4rem;
-    background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
-    z-index: -1;
-  }
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-`;
-const SettingsPanel = styled.div`
-  flex: 1;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(10px);
-  border-radius: 16px;
-  padding: 1.5rem;
-  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-`;
-const PreviewPanel = styled.div`
-  flex: 1;
-  text-align: center;
-`;
-const Button = styled.button`
-  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-  color: white;
-  border: none;
-  padding: 0.8rem 1.5rem;
-  border-radius: 8px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
-  }
-`;
-const DeleteButton = styled(Button)`
-  background: #ef4444;
-  padding: 0.4rem 0.8rem;
-  font-size: 0.9rem;
-`;
-const SubtitleInput = styled.div`
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  align-items: center;
-  input[type="text"] {
-    flex: 1;
-    padding: 0.5rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    font-size: 0.9rem;
-  }
-`;
-const NumberInput = styled.input`
-  width: 80px;
-  padding: 0.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  font-size: 0.9rem;
-`;
-const Select = styled.select`
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-`;
-const PreviewImage = styled.img`
-  max-width: 100%;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-`;
-const UploadButton = styled.div`
-  border: 2px dashed rgba(99, 102, 241, 0.2);
-  border-radius: 12px;
-  padding: 2rem;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.5);
-  &:hover {
-    border-color: rgba(99, 102, 241, 0.4);
-    background: rgba(99, 102, 241, 0.05);
-  }
-`;
-const HiddenFileInput = styled.input`
-  display: none;
-`;
-const SettingGroup = styled.div`
-  margin-bottom: 1.5rem;
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: #374151;
-  }
-`;
-const RangeInput = styled.input`
-  width: 100%;
-  height: 6px;
-  background: #e5e7eb;
-  border-radius: 3px;
-  outline: none;
-  -webkit-appearance: none;
-  margin: 10px 0;
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 18px;
-    height: 18px;
-    background: #6366F1;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    &:hover {
-      transform: scale(1.1);
-      background: #4F46E5;
-    }
-  }
-  &::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    background: #6366F1;
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-    transition: all 0.2s ease;
-    &:hover {
-      transform: scale(1.1);
-      background: #4F46E5;
-    }
-  }
-  &::-ms-thumb {
-    width: 18px;
-    height: 18px;
-    background: #6366F1;
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-    transition: all 0.2s ease;
-    &:hover {
-      transform: scale(1.1);
-      background: #4F46E5;
-    }
-  }
-`;
-const ColorPickerContainer = styled.div`
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-`;
-const ColorInput = styled.input`
-  -webkit-appearance: none;
-  width: 48px;
-  height: 48px;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  padding: 0;
-  background: none;
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  &::-webkit-color-swatch {
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-  }
-`;
-const ColorPresets = styled.div`
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-`;
-const ColorPresetButton = styled.button`
-  width: 32px;
-  height: 32px;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  background-color: ${props => props.$color};
-  cursor: pointer;
-  transition: all 0.2s ease;
-  &:hover {
-    transform: scale(1.1);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  }
-`;
 export default SubtitleMaker;
--- a/src/components/TextBehindImage.jsx
+++ b/src/components/TextBehindImage.jsx
@@ -3,6 +3,8 @@ import { removeBackground } from "@imgly/background-removal";
 import styled from 'styled-components';
 import { useTranslation } from '../js/i18n';
 import '../styles/fonts.css';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 // 复用现有的基础容器样式
 const Container = styled.div`
@@ -255,6 +257,7 @@ const PrivacyNote = styled.div`
 function TextBehindImage() {
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
  const [selectedImage, setSelectedImage] = useState(null);
  const [isImageSetupDone, setIsImageSetupDone] = useState(false);
  const [removedBgImageUrl, setRemovedBgImageUrl] = useState(null);
@@ -460,6 +463,8 @@ function TextBehindImage() {
  }, []);
  return (
+    <>
+      {isLoading && <LoadingOverlay />}
      <Container>
        <ContentWrapper>
          <ControlPanel>
@@ -710,6 +715,7 @@ function TextBehindImage() {
          </PreviewArea>
        </ContentWrapper>
      </Container>
+    </>
  );
 }

--- a/src/components/TextDiff.jsx
+++ b/src/components/TextDiff.jsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../js/i18n';
 import SEO from './SEO';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 const Container = styled.div`
  min-height: 100vh;
@@ -167,6 +169,7 @@ const DiffHeader = styled(TitleLabel)`
 function TextDiff() {
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
  const [oldText, setOldText] = useState('');
  const [newText, setNewText] = useState('');
@@ -180,6 +183,7 @@ function TextDiff() {
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.textDiff.title')}
        description={t('tools.textDiff.description')}

--- a/src/components/UrlEnDecode.jsx
+++ b/src/components/UrlEnDecode.jsx
@@ -2,6 +2,8 @@ import React, { useState, useCallback } from 'react';
 import { useTranslation } from '../js/i18n';
 import SEO from './SEO';
 import styled from 'styled-components';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
 // 复用相同的样式组件
 const Container = styled.div`
@@ -45,6 +47,7 @@ const Title = styled.h2`
 function UrlEncoderDecoder() {
  const { t } = useTranslation();
+  const isLoading = usePageLoading();
  const [input, setInput] = useState('');
  const [resultText, setResultText] = useState('');
  const [isCopied, setIsCopied] = useState(false);
@@ -81,6 +84,7 @@ function UrlEncoderDecoder() {
  return (
    <>
+      {isLoading && <LoadingOverlay />}
      <SEO
        title={t('tools.urlEncodeDecode.title')}
        description={t('tools.urlEncodeDecode.description')}

--- a/src/hooks/usePageLoading.js
+++ b/src/hooks/usePageLoading.js
+import { useState, useEffect } from 'react';
+export const usePageLoading = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    // Set loading to false after a short delay to ensure content is ready
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+  return isLoading;
+};
--- a/src/hooks/useScrollToTop.js
+++ b/src/hooks/useScrollToTop.js
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+export const useScrollToTop = () => {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+};
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -7,6 +7,8 @@
    "login": "Login",
    "loginSubtitle": "Welcome to AI Toolbox, please log in for the full experience",
    "logout": "Logout",
+    "copy": "Copy",
+    "copied": "Copied",
    "dev-tools": {
      "title": "Development Tools",
      "description": "A collection of popular and efficient development tools, including JSON formatter, Base64 to image converter, online Diff tool, LaTeX renderer, and more. Designed to help developers handle everyday coding tasks quickly and boost development efficiency."

--- a/src/locales/en/tools.json
+++ b/src/locales/en/tools.json
@@ -99,7 +99,8 @@
      "download": "Download Image",
      "dragOrClick": "Drag and drop or click to upload",
      "fileName": "File name",
-      "fileSize": "File size"
+      "fileSize": "File size",
+      "preview": "Preview"
    },
    "fisherai": {
      "title": "FisherAI",
@@ -117,7 +118,7 @@
      "title": "Subtitle Generator",
      "description": "Quickly generate multi-line subtitle images with customizable styles",
      "uploadImage": "Upload Background Image",
-      "dragOrClick": "Drag and drop or click to upload",
+      "dropOrClick": "Drag and drop or click to upload",
      "removeImage": "Remove Image",
      "globalSettings": "Global Settings",
      "fontColor": "Font Color",

--- a/src/locales/ja/common.json
+++ b/src/locales/ja/common.json
@@ -7,6 +7,8 @@
    "login": "ログイン",
    "loginSubtitle": "AIツールボックスへようこそ。フル体験のためにログインしてください",
    "logout": "ログアウト",
+    "copy": "コピー",
+    "copied": "コピーされました",
    "dev-tools": {
      "title": "開発ツール",
      "description": "JSONフォーマッター、Base64画像変換、オンラインDiffツール、LaTeXレンダリングなど、さまざまな人気で効率的な開発ツールを統合し、日常のコーディングタスクを迅速に処理し、開発効率を向上させます。"

--- a/src/locales/ja/tools.json
+++ b/src/locales/ja/tools.json
@@ -99,7 +99,8 @@
      "download": "画像をダウンロード",
      "dragOrClick": "画像をドラッグまたはクリックしてアップロード",
      "fileName": "ファイル名",
-      "fileSize": "ファイルサイズ"
+      "fileSize": "ファイルサイズ",
+      "preview": "プレビュー"
    },
    "fisherai": {
      "title": "FisherAI",

--- a/src/locales/ko/common.json
+++ b/src/locales/ko/common.json
@@ -7,6 +7,8 @@
    "login": "로그인",
    "loginSubtitle": "AI 툴��스에 오신 것을 환영합니다. 전체 경험을 위해 로그인해 주세요",
    "logout": "로그아웃",
+    "copy": "복사",
+    "copied": "복사된 메시지",
    "dev-tools": {
      "title": "개발 도구",
      "description": "JSON 포맷터, Base64 이미지 변환기, 온라인 Diff 도구, LaTeX 렌더러 등 인기 있고 효율적인 개발 도구를 통합하여, 일상적인 코딩 작업을 신속하게 처리하고 개발 효율성을 높입니다."

--- a/src/locales/ko/tools.json
+++ b/src/locales/ko/tools.json
@@ -100,7 +100,8 @@
      "download": "이미지 다운로드",
      "dragOrClick": "드래그 앤 드롭 또는 클릭하여 업로드",
      "fileName": "파일 이름",
-      "fileSize": "파일 크기"
+      "fileSize": "파일 크기",
+      "preview": "미리보기"
    },
    "fisherai": {
      "title": "FisherAI",

--- a/src/locales/zh/common.json
+++ b/src/locales/zh/common.json
@@ -7,6 +7,8 @@
    "login": "登录",
    "loginSubtitle": "欢迎使用 AI 工具箱，请登录以获得完整体验",
    "logout": "退出登录",
+    "copy": "复制",
+    "copied": "已复制",
    "dev-tools": {
      "title": "开发工具",
      "description": "集成多种热门高效的开发工具，包括JSON格式化、Base64转图片、在线Diff对比、LaTeX渲染等，帮助开发者快速处理日常编码任务，提升开发效率。"

--- a/src/locales/zh/tools.json
+++ b/src/locales/zh/tools.json
@@ -101,7 +101,8 @@
      "download": "下载图片",
      "dragOrClick": "拖拽或点击上传图片",
      "fileName": "文件名",
-      "fileSize": "文件大小"
+      "fileSize": "文件大小",
+      "preview": "预览"
    },
    "fisherai": {
      "title": "FisherAI",
@@ -201,7 +202,7 @@
    },
    "textBehindImage": {
      "title": "文字穿越图片",
-      "description": "在图片主体与背景之间添加文字，创造3D效果",
+      "description": "在图片主体与背景之间添加文字，3D效果",
      "imageUpload": "图片上传",
      "uploadPrompt": "点击或拖拽上传图片",
      "textSettings": "文字设置",

--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from '../js/i18n';
 import SEO from '../components/SEO';
@@ -25,10 +25,37 @@ const tools = [
 const Home = () => {
  const { t } = useTranslation();
+  const [loading, setLoading] = useState('');
+  const navigate = useNavigate();
+  useEffect(() => {
+    const handleClearLoading = () => {
+      setLoading('');
+    };
+    window.addEventListener('clearLoadingState', handleClearLoading);
+    return () => {
+      window.removeEventListener('clearLoadingState', handleClearLoading);
+    };
+  }, []);
+  const handleNavigate = (tool) => {
+    if (tool.external) {
+      window.open(tool.path, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    setLoading(tool.id);
+    window.scrollTo(0, 0);
+    navigate(tool.path);
+  };
  const renderToolLink = (tool) => {
    const content = (
-      <div className="group flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
+      <div className={`group flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 relative ${loading === tool.id ? 'pointer-events-none' : ''}`}>
+        {loading === tool.id && (
+          <div className="absolute inset-0 bg-white/80 rounded-xl flex items-center justify-center z-10">
+            <div className="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+          </div>
+        )}
        <img 
          src={tool.icon} 
          alt={`${t(`tools.${tool.id}.title`)} icon`} 
@@ -48,17 +75,15 @@ const Home = () => {
    return tool.external ? (
      <a 
-        href={tool.path}
+        onClick={() => handleNavigate(tool)}
-        className="block"
+        className="block cursor-pointer"
-        target="_blank"
-        rel="noopener noreferrer"
      >
        {content}
      </a>
    ) : (
-      <Link to={tool.path} className="block">
+      <div onClick={() => handleNavigate(tool)} className="block cursor-pointer">
        {content}
-      </Link>
+      </div>
    );
  };