Skip to content

refactor(ui): Manager・Jobs・Settingsの管理画面骨子を共通コンポーネント化する #649

Description

@hmjn023

背景

V2のManager・Jobs・Settingsは、固定ヘッダー、カテゴリナビゲーション、本文、任意のInspectorという同じ画面骨子を持つ。一方、現状はSolid UIのプリミティブを利用しつつ、各画面が個別のDOMとclassを持っているため、余白・ブレークポイント・スクロール責務・選択状態などの細部が乖離しやすい。

現在の代表的な規模:

  • packages/ui/src/screens/v2-manager-screen.tsx: 約1,600行
  • packages/ui/src/screens/config-screen.tsx: 約740行
  • packages/ui/src/screens/v2-jobs-screen.tsx: 約200行
  • packages/ui/src/v2/management-layout.tsx: 約70行

目的

Managerを基準に、3画面の共通骨子を再利用可能なコンポーネントへ昇格し、画面固有機能だけを各screenに残す。Solid UIのプリミティブは引き続き利用する。

対象

  • 共通のManagementScreen相当
    • 固定ヘッダー
    • 画面内スクロール領域
    • カテゴリ列と本文のグリッド
    • 任意の右Inspector領域
  • 共通のManagementNavigation
    • デスクトップ縦ナビ
    • モバイル横スクロールナビ
    • アイコン、タイトル、説明、選択状態
  • 共通のManagementSection
    • 見出し、説明、区切り、余白
  • 共通のManagementInspector
    • 幅、背景、境界線、スクロール
  • Managerの巨大ファイルを責務別に分割
    • Entity table / inspector
    • Batch tools
    • Data transfer
    • Dialogs
  • Settingsのカテゴリ別フォームを責務別に分割

対象外

  • Manager、Jobs、Settings固有の業務ロジック変更
  • Jobs履歴APIなど未実装バックエンド機能の追加
  • 見た目の全面的な再デザイン

受け入れ条件

  • 3画面が同じ共通レイアウトコンポーネントを使用する
  • ヘッダー、カテゴリ列幅、本文開始位置、余白、レスポンシブ切替が共通定義になる
  • スクロール責務が共通レイアウト側で明確になる
  • Jobs固有InspectorとSettings固有の未保存バーを維持する
  • Manager・Settingsの主要責務が画面ファイルから分割される
  • 既存のSolid UIコンポーネントを優先し、同等プリミティブを再実装しない
  • bun run checkと関連テストが成功する
  • 主要ブレークポイントでManager・Jobs・Settingsの視覚回帰を確認する

参考実装

  • packages/ui/src/v2/management-layout.tsx
  • packages/ui/src/screens/v2-manager-screen.tsx
  • packages/ui/src/screens/v2-jobs-screen.tsx
  • packages/ui/src/screens/config-screen.tsx
  • packages/ui/src/screens/config-state-screen.tsx

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions