Birleşik Tasarım Ortamı — Mimari Yaklaşımlar

ISablon genişletme + editör birleştirme stratejileri

A

Yerinde Genişletme (Önerilen ✓)

Strateji: Mevcut sablon-editoru component'ini genişlet, widget-editor'ü kaldır

  • ISablon'a veriKaynagi, olaylar, pozisyon, stil alanları eklenir
  • sablon-editoru'na Monaco panel + veri tab + olay tab eklenir
  • widget-editor tamamen kaldırılır, sablon-editoru her yerde kullanılır
  • widget-renderer → sablon-renderer'a birleştirilir (veri çekme mantığı dahil)
  • Dashboard doğrudan ISablon[] ile çalışır

Artılar

  • Tek component, sıfır duplikasyon
  • Minimum yeni dosya
  • Mevcut sablon renderer zaten güçlü

Eksiler

  • sablon-editoru büyüyebilir (~800+ satır)
  • Mevcut consumer'ları güncelleme gerekir
B

Yeni Birleşik Component

Strateji: Yeni "fiko-tasarim-editoru" component'i oluştur, ikisini de kaldır

  • Temiz başlangıç: iki editörün en iyileri alınır
  • Alt component'lere ayrılır: canvas-panel, kod-panel, palet-panel, stil-panel, veri-panel
  • ISablon genişletilir (A ile aynı)
  • Eski sablon-editoru + widget-editor kaldırılır
  • Her panel kendi component'i — ana component sadece orchestrator

Artılar

  • Modüler yapı, temiz mimari
  • Her panel bağımsız test edilebilir
  • Büyüme sorunu yok

Eksiler

  • 6-8 yeni dosya
  • Daha fazla iş
  • Mevcut kodu yeniden yazmak
C

Hibrit — Genişlet + Parçala

Strateji: sablon-editoru'nu genişlet AMA büyük panelleri alt component'lere çıkar

  • sablon-editoru ana orchestrator olarak kalır
  • Monaco panel → ayrı component (se-kod-paneli)
  • Veri kaynağı panel → ayrı component (se-veri-paneli)
  • Element paleti → ayrı component (se-palet)
  • Stil paneli mevcut inline kalır (zaten çalışıyor)
  • widget-editor kaldırılır

Artılar

  • Mevcut çalışan kodu korur
  • Sadece yeni paneller ayrı component
  • 3-4 yeni dosya (makul)
  • Orchestrator şişmez

Eksiler

  • Kısmen refactor gerekir

Ortak: ISablon Genişletme (Her Üç Yaklaşımda Aynı)

ISablon { // Mevcut alanlar (korunur) mod, arkaPlan, bolgeler[], elementler[] genislik?, yukseklik? htmlModu?, htmlIcerik?, cssIcerik?, jsIcerik? // YENİ: Widget alanları (IWidget'tan taşınır) + baslik?, simge?, aciklama? + pozisyon?: { genislik, yukseklik, x?, y?, sira? } + stil?: { arkaPlan?, gradyan?, renkYazi?, borderRadius?, animasyon?, golge? } + veriKaynagi?: { mod, koleksiyon?, pipeline?, sabitVeri?, soketOlay?, hesaplamaKodu?, yenilemeAraligi? } + olaylar?: { tiklanma?, yenilendi?, esikAsimi?, ciftTiklama? } + itemler?: ISablonItem[] + kaynak?: 'kod' | 'db' + tur?: 'widget' | 'kart' | 'serbest' // context bilgisi }