feat: add Translator page and update routing in App component, enhance Header...

feat: add Translator page and update routing in App component, enhance Header with navigation link, and include custom styles for the Translator feature

src/App.jsx

@@ -10,6 +10,7 @@ const DevTools = lazy(() => import('./pages/DevTools'));
 const ImageTools = lazy(() => import('./pages/ImageTools'));
 const Blog = lazy(() => import('./pages/Blog'));
 const AIProduct = lazy(() => import('./pages/AIProduct'));
+const Translator = lazy(() => import('./pages/Translator'));
 
 const JsonFormatter = lazy(() => import('./components/JsonFormatter'));
 const MarkdownToImage = lazy(() => import('./components/MarkdownToImage'));
@@ -52,6 +53,7 @@ function App() {
                 <Route path="/image-tools" element={<ImageTools />} />
                 <Route path="/ai-products" element={<AIProduct />} />
                 <Route path="/blog" element={<Blog />} />
+                <Route path="/translator" element={<Translator />} />
 
                 <Route path="/markdown-to-image" element={<MarkdownToImage />} />
                 <Route path="/json-formatter" element={<JsonFormatter />} />

src/components/Header.jsx

@@ -154,6 +154,19 @@ function Header() {
               >
                 {t('image-tools.title')}
               </NavLink>
+              <NavLink 
+                to="/translator" 
+                className={({isActive}) => 
+                  `px-3 py-2 text-base font-medium transition-all duration-200 border-b-2 ${
+                    isActive 
+                      ? 'text-indigo-500 border-indigo-500' 
+                      : 'text-gray-600 border-transparent hover:text-indigo-500 hover:border-indigo-500'
+                  }`
+                }
+                onClick={handleNavClick}
+              >
+                翻译工具
+              </NavLink>
               <NavLink 
                 to="/ai-products" 
                 className={({isActive}) => 
@@ -304,6 +317,19 @@ function Header() {
                   >
                     {t('image-tools.title')}
                   </NavLink>
+                  <NavLink 
+                    to="/translator" 
+                    className={({isActive}) => 
+                      `block px-4 py-3 rounded-lg text-base font-medium transition-colors duration-200 ${
+                        isActive 
+                          ? 'bg-indigo-50 text-indigo-600' 
+                          : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600'
+                      }`
+                    }
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    翻译工具
+                  </NavLink>
                   <NavLink 
                     to="/ai-products" 
                     className={({isActive}) => 

src/data/ai-events.json

@@ -1056,6 +1056,13 @@
     "description": "OpenAI 推出了其 o 系列中迄今为止最智能、能力最强的模型——o3 和 o4-mini。这两款模型被训练用于更深度的推理（“思考更长时间”），显著提升了 ChatGPT 的能力。模型首次能够自主地（agentically）决定何时以及如何使用 ChatGPT 内的所有工具（网络搜索、代码执行、视觉分析、图像生成等）来解决复杂问题。",
     "link": "https://openai.com/index/introducing-o3-and-o4-mini/"
   },
+  {
+    "date": "2025-04-17",
+    "title": "豆包 1.5 深度思考模型",
+    "category": "MODEL_RELEASE",
+    "description": "豆包 1.5 深度思考模型发布：暴砍参数量，能看图思考，数学编程超DeepSeek-R1",
+    "link": "https://36kr.com/p/3253930654478340"
+  },
   {
     "date": "2025-04-18",
     "title": "Gemini 2.5 Flash Preview 04-17",

src/styles/main.css

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Custom Tabs for Translator */
+.custom-tabs .ant-tabs-nav {
+  margin-bottom: 0 !important;
+  padding: 0 1rem;
+}
+
+.custom-tabs .ant-tabs-nav::before {
+  border-bottom: none !important;
+}
+
+.custom-tabs .ant-tabs-tab {
+  padding: 12px 16px !important;
+  margin: 0 !important;
+  font-size: 16px;
+  transition: all 0.3s;
+}
+
+.custom-tabs .ant-tabs-tab + .ant-tabs-tab {
+  margin-left: 10px !important;
+}
+
+.custom-tabs .ant-tabs-tab:hover {
+  color: #6366f1 !important;
+}
+
+.custom-tabs .ant-tabs-tab.ant-tabs-tab-active {
+  background-color: transparent;
+}
+
+.custom-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: #4f46e5 !important;
+  font-weight: 600;
+}
+
+.custom-tabs .ant-tabs-ink-bar {
+  background-color: #4f46e5 !important;
+  height: 3px !important;
+}
+
+/* Image upload in translator */
+.image-upload-container .ant-upload.ant-upload-select-picture-card {
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+/* Remove box shadow from antd inputs */
+.custom-input .ant-input:focus,
+.custom-input .ant-input-focused {
+  box-shadow: none !important;
+}
+
+/* 隐藏缩略图水平滚动条但保留功能 */
+.image-thumbnails {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+  -ms-overflow-style: none;
+}
+
+.image-thumbnails::-webkit-scrollbar {
+  height: 6px;
+}
+
+.image-thumbnails::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.image-thumbnails::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.3);
+  border-radius: 20px;
+}
+
+.image-thumbnails::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.5);
+}
+
+/* 流式翻译效果 */
+@keyframes cursor-blink {
+  0%, 100% { border-right-color: transparent; }
+  50% { border-right-color: #4f46e5; }
+}
+
+.streaming-translation {
+  border-right: 2px solid #4f46e5;
+  animation: cursor-blink 0.8s infinite;
+}
\ No newline at end of file