fix: Reorganize header layout and fix API docs link

- Split header into two rows: title+nav and selectors
- Fix API docs link to work in both local and HF Spaces
- Update HF routing to properly handle /docs requests
- Improve layout spacing and organization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/App.css

@@ -33,25 +33,27 @@ body {
 
 .app-header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 15px;
   margin-bottom: 20px;
   width: 100%;
   max-width: 1400px;
-  gap: 30px;
 }
 
-.header-title {
-  flex-shrink: 0;
+.header-row-1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.header-controls {
+.header-row-2 {
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
   align-items: center;
-  flex-grow: 1;
-  justify-content: flex-end;
+  justify-content: center;
+  width: 100%;
 }
 
 .header-selector {
@@ -91,7 +93,7 @@ body {
 
 .app-header h1 {
   font-size: 2.2rem;
-  margin-bottom: 1rem;
+  margin: 0;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

frontend/src/App.tsx

@@ -167,7 +167,7 @@ function App() {
   return (
     <div className="App">
       <header className="app-header">
-        <div className="header-title">
+        <div className="header-row-1">
           <h1>AI 批改平台</h1>
           <nav className="header-nav">
             <button 
@@ -183,7 +183,7 @@ function App() {
               設定指南
             </button>
             <a 
-              href="/api/docs" 
+              href={window.location.port === '5174' ? 'http://localhost:8001/docs' : '/docs'}
               target="_blank" 
               rel="noopener noreferrer"
               className="nav-link"
@@ -200,7 +200,7 @@ function App() {
             </a>
           </nav>
         </div>
-        <div className="header-controls">
+        <div className="header-row-2">
           <div className="header-selector">
             <label htmlFor="language">{currentLabels.language}</label>
             <select

hf_app.py

@@ -52,9 +52,9 @@ if frontend_dist.exists():
     @backend_app.get("/{full_path:path}")
     async def serve_spa(full_path: str):
         """Handle client-side routing"""
-        # Don't catch API routes
-        if full_path.startswith("api/"):
-            return {"error": "API route not found", "path": full_path}
+        # Don't catch API routes or docs
+        if full_path.startswith("api/") or full_path == "docs" or full_path.startswith("docs/"):
+            return {"error": "Route not found", "path": full_path}
         
         # Check if it's a static file
         file_path = frontend_dist / full_path