操作
バグ #456
未完了カスタムUIとRAGアシスタントのデザインコンポーネント統一
ステータス:
新規
優先度:
通常
担当者:
-
開始日:
2025-06-10
期日:
進捗率:
0%
予定工数:
説明
目的¶
call2arm.comのカスタムUI（task.call2arm.com、task2.call2arm.com）とRAGアシスタントシステム間でデザインコンポーネントを統一し、一貫したユーザー体験を提供する。
現状¶
- 技術スタック統一は85%達成済み
- TailwindCSS設定、カラーパレット（#06C755）、LINEデザイン言語は統一済み
- コンポーネントレベルでの詳細な統一が必要
作業内容¶
- 現在のコンポーネント差異の分析
- 共通コンポーネントライブラリの設計
- 段階的な統一実装
- テストとドキュメント整備
技術構成¶
- フロントエンド: React + TailwindCSS + LINEデザイン言語
- 対象システム:
- task.call2arm.com（カスタムUI本番）
- task2.call2arm.com（カスタムUI開発）
- RAGアシスタントシステム
作業環境¶
- VPS-ROOT: Ubuntu 24.04.2 LTS @ 85.131.243.51
- 管理端末: Windows 160.251.155.93 (ito@minisform-ai)
Redmine Admin さんが10日前に更新
デザインコンポーネント統一 - 現状分析完了¶
1. 現在の実装状況¶
カスタムUI (task2.call2arm.com)¶
Tailwind設定:
- ✅ LINE緑色 (#06C755) 統一済み
- ✅ LINEデザイン言語実装済み
- ✅ レスポンシブブレークポイント定義済み
- ✅ アニメーション定義 (slide-up, fade-in)
コンポーネント構成:
src/components/
├── chat/ # チャット関連
├── common/ # 共通コンポーネント
├── dashboard/ # ダッシュボード
├── documents/ # ドキュメント管理
├── features/ # 機能別コンポーネント
├── filters/ # フィルター関連
├── layout/ # レイアウト
└── projects/ # プロジェクト関連
RAGアシスタント¶
現状:
- 独立したコンポーネント実装
- Tailwindクラス直接記述
- 統一されたデザインシステム未適用
2. 統一が必要な要素¶
🎨 デザイントークン¶
- カラーパレット: ✅ 統一済み (#06C755)
- フォント: ✅ 統一済み (システムフォント)
- スペーシング: ⚠️ 部分的統一
- ボーダー半径: ✅ 統一済み (line, line-sm, line-lg)
- シャドウ: ✅ 統一済み (line, line-hover)
🧩 共通コンポーネント¶
- LoadingSpinner: ✅ 実装済み（カスタムUI側）
- Button: ❌ 未統一
- Card: ❌ 未統一
- Input/Textarea: ❌ 未統一
- Modal/Dialog: ❌ 未統一
- Toast/Notification: ❌ 未統一
3. 実装方針¶
Phase 1: 共通コンポーネントライブラリ作成¶
- 基本UIコンポーネント抽出・統一
- デザインシステムドキュメント作成
- Storybookセットアップ（オプション）
Phase 2: 段階的移行¶
- RAGアシスタントのコンポーネント置き換え
- カスタムUIの既存コンポーネント統一
- テスト実施
Phase 3: 最適化・文書化¶
- パフォーマンス最適化
- アクセシビリティ対応
- 開発者向けドキュメント整備
次のアクション¶
共通コンポーネントライブラリの設計・実装を開始します。
操作