操作
バグ #449
未完了task2.call2arm.com RAGアドバイザー UI完全実装: ヘッダー・サイドバー・LINEデザイン統合
ステータス:
新規
優先度:
高め
担当者:
-
開始日:
2025-06-10
期日:
進捗率:
0%
予定工数:
説明
🎯 目的¶
task2.call2arm.com/rag-advisor/chat の完全なUI実装
- 統一されたヘッダー・サイドバー追加
- LINEデザイン言語コンポーネント適用
- 一貫性のあるナビゲーション実装
📋 現状分析¶
現在の状態: チャット部分のみ実装済み（95%品質）
- URL: https://task2.call2arm.com/rag-advisor/chat
- 実装済み: チャット機能、LINE風デザイン、日本語対応
- 未実装: ヘッダー、サイドバー、統合ナビゲーション
🎨 デザイン要件¶
1. ヘッダーコンポーネント¶
// 必須機能
- ロゴ・サイト名表示
- ユーザーアイコン・メニュー
- 通知アイコン
- 検索バー（グローバル検索）
- ダークモード切り替え
2. サイドバーコンポーネント¶
// ナビゲーションメニュー
├── 🏠 ホーム (/dashboard)
├── 📄 ドキュメント (/documents)
├── 🎫 チケット (/tickets)
├── 🚀 プロジェクト (/projects)
├── 🤖 RAGアシスタント (/rag-advisor/chat) ← 現在位置
├── ⚙️ 設定 (/settings)
└── 📊 統計 (/analytics)
3. レイアウト構成¶
┌─────────────────────────────────────┐
│ ヘッダー (Header Component) │
├──────┬──────────────────────────────┤
│サイド │ │
│バー │ メインコンテンツエリア │
│ │ (RAGチャット) │
│ │ │
│ │ │
└──────┴──────────────────────────────┘
🔧 実装詳細¶
Phase 1: ヘッダーコンポーネント実装¶
- ヘッダー基本レイアウト作成
- ロゴ・サイト名配置
- ユーザーメニュードロップダウン
- 通知センター実装
- グローバル検索バー
- レスポンシブ対応
Phase 2: サイドバーコンポーネント実装¶
- サイドバー基本レイアウト
- ナビゲーションメニュー項目
- アクティブ状態表示
- アイコン＋テキスト表示
- 折りたたみ機能
- モバイル対応ドロワー
Phase 3: レイアウト統合¶
- ヘッダー＋サイドバー＋コンテンツ統合
- 既存RAGチャットとの整合性確保
- ルーティング調整
- レスポンシブレイアウト最適化
Phase 4: LINEデザイン言語適用¶
- カラーパレット統一
- フォント・タイポグラフィ適用
- アニメーション・トランジション
- アイコンライブラリ統一
- シャドウ・ボーダー調整
🎨 デザインガイドライン¶
LINEデザイン言語仕様¶
/* カラーパレット */
--primary: #00B900; /* LINE Green */
--secondary: #06C755; /* LINE Light Green */
--background: #F8F9FA; /* Light Gray */
--surface: #FFFFFF; /* White */
--text-primary: #1A1A1A; /* Dark Gray */
--text-secondary: #8E8E8E; /* Medium Gray */
/* シャドウ */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* ボーダーラジアス */
border-radius: 12px; /* コンポーネント共通 */
コンポーネント構成¶
// ファイル構造
src/
├── components/
│ ├── Layout/
│ │ ├── Header.tsx
│ │ ├── Sidebar.tsx
│ │ ├── Layout.tsx
│ │ └── index.ts
│ ├── UI/
│ │ ├── Button.tsx
│ │ ├── Avatar.tsx
│ │ ├── SearchBar.tsx
│ │ └── NavigationItem.tsx
│ └── RAG/
│ └── ChatInterface.tsx (既存)
📱 レスポンシブ対応¶
ブレークポイント¶
- モバイル: < 768px (サイドバー→ドロワー)
- タブレット: 768px - 1024px (サイドバー縮小)
- デスクトップ: > 1024px (フルレイアウト)
モバイル最適化¶
- ハンバーガーメニュー実装
- スワイプジェスチャー対応
- タッチフレンドリーなボタンサイズ
🔗 既存システム統合¶
ルーティング拡張¶
// React Router設定拡張
const routes = [
{ path: '/dashboard', component: Dashboard },
{ path: '/documents', component: Documents },
{ path: '/tickets', component: Tickets },
{ path: '/projects', component: Projects },
{ path: '/rag-advisor/chat', component: RAGChat }, // 既存
{ path: '/settings', component: Settings },
{ path: '/analytics', component: Analytics }
];
API統合準備¶
- 各ページで必要なAPIエンドポイント定義
- 統一されたローディング状態管理
- エラーハンドリング共通化
🎯 完成基準¶
機能要件¶
- ナビゲーション: 全ページ間のスムーズな遷移
- レスポンシブ: 全デバイスでの適切な表示
- デザイン統一: LINEデザイン言語の一貫適用
- パフォーマンス: 高速な画面切り替え
品質基準¶
- デザイン品質: 現在のRAGチャット同等（95%）
- ユーザビリティ: 直感的なナビゲーション
- モバイル対応: タッチ操作最適化
- アクセシビリティ: WAI-ARIA準拠
🔗 関連チケット・リソース¶
📊 想定工数・完了予定¶
- Phase 1-2: 1-2日（ヘッダー・サイドバー基本実装）
- Phase 3: 1日（レイアウト統合）
- Phase 4: 1日（デザイン最適化）
- 合計: 3-4日での完成を目標
💡 実装優先順位¶
- High: ヘッダー・サイドバー基本機能
- Medium: LINEデザイン適用・レスポンシブ対応
- Low: 高度なアニメーション・追加機能
操作