feat: simplify login page UX and add i18n English support

- Redesign LoginPage with minimal professional style - Remove animated gradient backgrounds and floating orbs - Remove marketing claims (99% accuracy, enterprise-grade) - Center login form with clean card design - Add multi-language support (zh-TW, en-US) - Create LanguageSwitcher component in sidebar - Add en-US.json translation file - Persist language preference in localStorage - Remove unused top header bar with search - Move language switcher to sidebar user section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-12 12:49:48 +08:00
parent 1f18010040
commit d5bc311757
10 changed files with 666 additions and 217 deletions
--- a/openspec/changes/archive/2025-12-12-refactor-frontend-ux-i18n/proposal.md
+++ b/openspec/changes/archive/2025-12-12-refactor-frontend-ux-i18n/proposal.md
@@ -0,0 +1,38 @@
+# Change: 前端 UX 簡化與 i18n 英文支援
+
+## Why
+
+目前登入頁面設計過於花俏（漸層動畫、浮動光球、脈衝效果），與內部頁面的專業簡約風格不一致。此外，頁面包含不實宣傳文案（如「99% 準確率」、「企業級加密」等未經證實的聲明）。系統目前僅支援繁體中文，缺乏多語言支援。
+
+## What Changes
+
+### 1. LoginPage 簡化
+- 移除花俏動畫效果（浮動光球、網格圖案、脈衝動畫）
+- 移除漸層背景，改用簡潔單色背景
+- 移除不實宣傳區塊（「為什麼選擇我們」、統計數據卡片）
+- 統一登入頁與內部頁面視覺風格
+
+### 2. 文案修正
+- 移除誇大宣稱（「99% 準確率」、「閃電般快速」、「企業級加密」）
+- 改用務實功能描述
+
+### 3. i18n 擴充
+- 新增英文 (en-US) 翻譯檔案
+- 新增語言切換功能元件
+- 儲存使用者語言偏好至 localStorage
+- 將語言切換器整合至 Layout 頂部欄
+
+### 4. 整體風格統一
+- 確保所有頁面使用一致的設計語言
+- 遵循專業簡約風格準則
+
+## Impact
+
+- Affected specs: frontend-ui (新增)
+- Affected code:
+  - `frontend/src/pages/LoginPage.tsx` - 重新設計
+  - `frontend/src/components/Layout.tsx` - 新增語言切換器
+  - `frontend/src/i18n/index.ts` - 擴充多語言設定
+  - `frontend/src/i18n/locales/en-US.json` - 新增英文翻譯
+  - `frontend/src/i18n/locales/zh-TW.json` - 補充缺少的翻譯鍵
+  - `frontend/src/components/LanguageSwitcher.tsx` - 新增元件
--- a/openspec/changes/archive/2025-12-12-refactor-frontend-ux-i18n/specs/frontend-ui/spec.md
+++ b/openspec/changes/archive/2025-12-12-refactor-frontend-ux-i18n/specs/frontend-ui/spec.md
@@ -0,0 +1,89 @@
+# Frontend UI Specification
+
+## ADDED Requirements
+
+### Requirement: Minimal Login Page Design
+
+The login page SHALL use a professional minimal design style that is consistent with the rest of the application.
+
+The login page SHALL NOT include:
+- Animated gradient backgrounds
+- Floating decorative elements (orbs, particles)
+- Pulsing or floating animations
+- Marketing claims or statistics
+- Feature promotion sections
+
+The login page SHALL include:
+- Centered login form with clean white card
+- Application logo and name
+- Username and password input fields
+- Login button with loading state
+- Error message display area
+- Simple solid color background
+
+#### Scenario: Login page renders with minimal design
+- **WHEN** user navigates to the login page
+- **THEN** the page displays a centered login form
+- **AND** no animated decorative elements are visible
+- **AND** no marketing content is displayed
+
+#### Scenario: Login form visual consistency
+- **WHEN** comparing login page to internal pages
+- **THEN** the visual style (colors, typography, spacing) is consistent
+
+---
+
+### Requirement: Multi-language Support
+
+The application SHALL support multiple languages with user-selectable language preference.
+
+Supported languages:
+- Traditional Chinese (zh-TW) - Default
+- English (en-US)
+
+The language selection SHALL be persisted in localStorage and restored on page reload.
+
+#### Scenario: Language switcher available
+- **WHEN** user is logged in and viewing any page
+- **THEN** a language switcher component is visible in the top navigation bar
+
+#### Scenario: Switch to English
+- **WHEN** user selects English from the language switcher
+- **THEN** all UI text immediately changes to English
+- **AND** the preference is saved to localStorage
+
+#### Scenario: Switch to Traditional Chinese
+- **WHEN** user selects Traditional Chinese from the language switcher
+- **THEN** all UI text immediately changes to Traditional Chinese
+- **AND** the preference is saved to localStorage
+
+#### Scenario: Language preference persistence
+- **WHEN** user has previously selected a language preference
+- **AND** user reloads the page or returns later
+- **THEN** the application displays in the previously selected language
+
+---
+
+### Requirement: Accurate Product Description
+
+All user-facing text SHALL accurately describe the product capabilities without exaggeration.
+
+The application SHALL NOT display:
+- Unverified accuracy percentages (e.g., "99% accuracy")
+- Superlative marketing claims (e.g., "lightning fast", "enterprise-grade")
+- Unsubstantiated statistics
+- Comparative claims without evidence
+
+The application MAY display:
+- Factual feature descriptions
+- Supported file formats
+- Authentication method information
+
+#### Scenario: Login page displays factual information
+- **WHEN** user views the login page
+- **THEN** only factual product information is displayed
+- **AND** no unverified claims are present
+
+#### Scenario: Feature descriptions are accurate
+- **WHEN** any page describes product features
+- **THEN** the descriptions are factual and verifiable
--- a/openspec/changes/archive/2025-12-12-refactor-frontend-ux-i18n/tasks.md
+++ b/openspec/changes/archive/2025-12-12-refactor-frontend-ux-i18n/tasks.md
@@ -0,0 +1,29 @@
+# Tasks: 前端 UX 簡化與 i18n 英文支援
+
+## 1. LoginPage 簡化
+
+- [x] 1.1 移除動畫背景元素（浮動光球、網格圖案、脈衝效果）
+- [x] 1.2 替換漸層背景為簡潔單色背景
+- [x] 1.3 移除左側宣傳區塊（「為什麼選擇我們」、功能特色、統計數據）
+- [x] 1.4 重新設計登入表單區塊，採用居中簡約版面
+- [x] 1.5 移除不必要的動畫 class（animate-float, animate-slide-in-left 等）
+
+## 2. i18n 英文支援
+
+- [x] 2.1 建立 `frontend/src/i18n/locales/en-US.json` 英文翻譯檔
+- [x] 2.2 更新 `frontend/src/i18n/index.ts` 支援多語言切換
+- [x] 2.3 補充 `zh-TW.json` 缺少的翻譯鍵（登入頁相關）
+
+## 3. 語言切換功能
+
+- [x] 3.1 建立 `frontend/src/components/LanguageSwitcher.tsx` 元件
+- [x] 3.2 整合語言切換器至 `Layout.tsx` 頂部欄
+- [x] 3.3 實作語言偏好 localStorage 持久化
+- [x] 3.4 確保語言切換即時生效（無需重新載入頁面）
+
+## 4. 測試與驗證
+
+- [x] 4.1 驗證 LoginPage 在不同螢幕尺寸的顯示效果
+- [x] 4.2 驗證中英文切換功能正常運作
+- [x] 4.3 驗證語言偏好在頁面重新載入後保持
+- [x] 4.4 檢查所有頁面的翻譯完整性
--- a/openspec/specs/frontend-ui/spec.md
+++ b/openspec/specs/frontend-ui/spec.md
@@ -0,0 +1,91 @@
+# frontend-ui Specification
+
+## Purpose
+TBD - created by archiving change refactor-frontend-ux-i18n. Update Purpose after archive.
+## Requirements
+### Requirement: Minimal Login Page Design
+
+The login page SHALL use a professional minimal design style that is consistent with the rest of the application.
+
+The login page SHALL NOT include:
+- Animated gradient backgrounds
+- Floating decorative elements (orbs, particles)
+- Pulsing or floating animations
+- Marketing claims or statistics
+- Feature promotion sections
+
+The login page SHALL include:
+- Centered login form with clean white card
+- Application logo and name
+- Username and password input fields
+- Login button with loading state
+- Error message display area
+- Simple solid color background
+
+#### Scenario: Login page renders with minimal design
+- **WHEN** user navigates to the login page
+- **THEN** the page displays a centered login form
+- **AND** no animated decorative elements are visible
+- **AND** no marketing content is displayed
+
+#### Scenario: Login form visual consistency
+- **WHEN** comparing login page to internal pages
+- **THEN** the visual style (colors, typography, spacing) is consistent
+
+---
+
+### Requirement: Multi-language Support
+
+The application SHALL support multiple languages with user-selectable language preference.
+
+Supported languages:
+- Traditional Chinese (zh-TW) - Default
+- English (en-US)
+
+The language selection SHALL be persisted in localStorage and restored on page reload.
+
+#### Scenario: Language switcher available
+- **WHEN** user is logged in and viewing any page
+- **THEN** a language switcher component is visible in the top navigation bar
+
+#### Scenario: Switch to English
+- **WHEN** user selects English from the language switcher
+- **THEN** all UI text immediately changes to English
+- **AND** the preference is saved to localStorage
+
+#### Scenario: Switch to Traditional Chinese
+- **WHEN** user selects Traditional Chinese from the language switcher
+- **THEN** all UI text immediately changes to Traditional Chinese
+- **AND** the preference is saved to localStorage
+
+#### Scenario: Language preference persistence
+- **WHEN** user has previously selected a language preference
+- **AND** user reloads the page or returns later
+- **THEN** the application displays in the previously selected language
+
+---
+
+### Requirement: Accurate Product Description
+
+All user-facing text SHALL accurately describe the product capabilities without exaggeration.
+
+The application SHALL NOT display:
+- Unverified accuracy percentages (e.g., "99% accuracy")
+- Superlative marketing claims (e.g., "lightning fast", "enterprise-grade")
+- Unsubstantiated statistics
+- Comparative claims without evidence
+
+The application MAY display:
+- Factual feature descriptions
+- Supported file formats
+- Authentication method information
+
+#### Scenario: Login page displays factual information
+- **WHEN** user views the login page
+- **THEN** only factual product information is displayed
+- **AND** no unverified claims are present
+
+#### Scenario: Feature descriptions are accurate
+- **WHEN** any page describes product features
+- **THEN** the descriptions are factual and verifiable
+