8.0 KiB

Raw Blame History

Drama Ling 前端架構重構：Vue → 原生HTML

專案狀態: ⏳ 規劃中
建立日期: 2025-09-10
預估工期: 3-4週
優先級: 🔥 緊急

🎯 專案目標

將 Drama Ling Web 應用從 Vue + Quasar 框架架構重構為原生 HTML + CSS + JavaScript 實現，以獲得：

設計精確度 100% - 完全按照設計規格實現，無框架樣式干擾
Claude Code 最佳化 - AI 能精確理解和修改每行代碼
性能提升 - 移除框架 overhead，載入速度更快
維護性提升 - 代碼直觀易懂，易於調試

📋 重構範圍

🎯 目標架構

apps/web-native/
├── index.html                    # 主入口頁面
├── pages/                        # 頁面文件
│   ├── vocabulary/
│   │   ├── index.html            # 詞彙學習首頁
│   │   ├── practice.html         # 練習頁面
│   │   ├── review.html           # 複習頁面  
│   │   └── analytics.html        # 分析儀表板
│   ├── dialogue/
│   │   ├── index.html            # 對話練習首頁
│   │   └── practice.html         # 對話練習頁面
│   ├── auth/
│   │   ├── login.html            # 登入頁面
│   │   └── register.html         # 註冊頁面
│   └── profile/
│       ├── index.html            # 個人檔案
│       ├── progress.html         # 學習進度
│       └── settings.html         # 設定頁面
├── assets/
│   ├── css/
│   │   ├── main.css              # 全局樣式
│   │   ├── components.css        # 組件樣式
│   │   ├── layouts.css           # 佈局樣式
│   │   └── themes.css            # 主題樣式
│   ├── js/
│   │   ├── app.js                # 主要應用邏輯
│   │   ├── api.js                # API 通訊
│   │   ├── auth.js               # 認證管理
│   │   ├── vocabulary.js         # 詞彙功能
│   │   ├── dialogue.js           # 對話功能
│   │   ├── utils.js              # 工具函數
│   │   └── components/           # JavaScript 組件
│   │       ├── navbar.js         # 導航欄
│   │       ├── sidebar.js        # 側邊欄
│   │       ├── modal.js          # 彈窗組件
│   │       └── charts.js         # 圖表組件
│   └── media/
│       ├── icons/                # 圖標資源
│       ├── images/               # 圖片資源
│       └── audio/                # 音頻資源
├── data/
│   ├── vocabulary.json           # 詞彙數據
│   ├── dialogues.json            # 對話數據
│   └── mockData.js               # 開發用模擬數據
└── docs/
    ├── README.md                 # 專案說明
    ├── ARCHITECTURE.md           # 架構文檔
    └── API_INTEGRATION.md        # API 整合指南

🚀 執行階段

第一階段：基礎架構搭建 (週1)

🏗️ 創建原生HTML專案目錄結構
🎨 建立核心CSS框架 (設計系統、響應式、主題)
📱 實現基礎佈局組件 (Header、Sidebar、Footer)
🔧 建立JavaScript模組化架構
📊 建立開發用模擬數據系統

第二階段：核心頁面實現 (週1)

🏠 首頁實現
🔐 認證頁面 (登入/註冊/忘記密碼)
📚 詞彙學習主頁面
💬 對話練習主頁面
👤 個人檔案頁面

第三階段：功能頁面實現 (週1)

📝 詞彙練習頁面 (選擇題、翻譯、同義詞)
🎯 詞彙複習頁面 (間隔複習系統)
📊 學習分析儀表板
💬 對話練習頁面
⚙️ 設定頁面

第四階段：整合與優化 (週1)

🔌 API 整合 (真實數據對接)
🎮 進階功能實現 (書籤、多標籤、PWA)
🧪 測試與調試
📱 跨瀏覽器兼容性測試
🚀 部署配置

🛠️ 技術規格

前端技術棧

HTML5 - 語義化標記
CSS3 - Grid + Flexbox 佈局，CSS Variables
JavaScript ES6+ - 模組化開發，無框架依賴
Chart.js - 數據視覺化 (保留)
Web APIs - LocalStorage、SessionStorage、IndexedDB

開發工具

Vite - 開發服務器和建置工具 (保留)
PostCSS - CSS 後處理 (可選)
ESLint - JavaScript 代碼質量
Prettier - 代碼格式化

設計系統

/* 色彩系統 */
:root {
  --primary-teal: #00E5CC;
  --secondary-purple: #6366F1;  
  --background-primary: #F7F9FC;
  --background-dark: #1A1A1A;
  --text-primary: #2C3E50;
  --text-secondary: #64748B;
}

/* 間距系統 */
:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
}

/* 字體系統 */  
:root {
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
}

📊 數據管理策略

狀態管理模式

// 不使用Vue/Pinia，改用簡潔的狀態管理
class AppState {
  constructor() {
    this.user = null;
    this.vocabulary = [];
    this.currentSession = null;
    this.settings = {};
  }
  
  // 響應式更新UI
  setState(newState) {
    Object.assign(this, newState);
    this.updateUI();
  }
  
  updateUI() {
    // 觸發相關UI更新
    document.dispatchEvent(new CustomEvent('stateChanged', { 
      detail: this 
    }));
  }
}

API 通訊

// 簡潔的API客戶端，不依賴axios
class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
    this.token = localStorage.getItem('authToken');
  }
  
  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const config = {
      headers: {
        'Content-Type': 'application/json',
        ...(this.token && { Authorization: `Bearer ${this.token}` }),
        ...options.headers
      },
      ...options
    };
    
    const response = await fetch(url, config);
    return this.handleResponse(response);
  }
}

🔄 遷移策略

漸進式遷移方法

並行開發 - 保留現有Vue版本，並行開發原生版本
頁面級遷移 - 逐頁替換，確保功能完整
數據兼容 - 保持API接口不變，確保數據一致
用戶驗證 - A/B測試比較兩版本表現

風險控制

功能回滾 - 保留Vue版本作為後備
數據備份 - 完整的數據遷移和備份策略
性能監控 - 建立性能基準線對比
用戶反饋 - 收集使用者體驗反饋

📈 預期效益

開發效率提升

Claude Code 理解度：80% → 95%
調試效率提升：50%
代碼維護成本降低：40%

用戶體驗提升

頁面載入速度：2s → 0.8s (預估)
設計還原度：85% → 100%
跨瀏覽器兼容性提升

技術債務清理

移除不必要的框架依賴
清理過度抽象的代碼結構
建立更直觀的開發流程

⚠️ 風險評估

高風險項目

開發時間 - 可能超出預期時間
功能遺漏 - Vue特定功能可能遺漏
團隊適應 - 需要團隊學習新的開發模式

緩解措施

階段性交付 - 每週檢查點確保進度
功能檢查 - 詳細的功能對照表
文檔完善 - 完整的開發指南和最佳實踐

📋 下一步行動

立即行動：創建專案目錄結構
本週目標：完成第一階段基礎架構
里程碑檢查：每週進度評估和調整

文檔更新: 2025-09-10
負責人: Claude Code
相關文檔: TASKS.md | 架構設計

8.0 KiB Raw Blame History Unescape Escape