2.1 DFM 轉換需求： .dfm Delphi 轉換為 vue 實作

@/DocPrt.dfm 為 Delphi 的 ui 介面定義, 請幫我轉換為相對應的 /uiOutput/DocPrt/DocPrt.vue
@/DocPrt.pas 為 Delphi 的 ui 介面定義實作, 也請幫我轉換為相應的 /uiOutput/DocPrt/DocPrt.ts
@/doc/curtis/screenShot/DocPrt.png 則是 @/DocPrt.dfm 介面的截圖, 轉換後的 /uiOutput/DocPrt/DocPrt.vue 必須與 @/doc/curtis/screenShot/DocPrt.png 一致

2.2 轉換原則

2.2.1 DocPrt.vue 轉換原則

• ui layout 及風格請完全參照 DocPrt.png, 因為這是使用者要的設計, 大小定義請完全參照 DocPrt.dfm
• Delphi DFM 結構轉換為使用 Tailwind CSS, 請參考其 Left, Top, Width, Height 屬性來推斷相對位置
• dfm 檔案內所指向的物件進行轉換時請生成相對應的 vue 元件, 如下 TPanel 在轉換成 vue 時請生成對應的 TPanel元件
  dfm object ErrlistForm: TErrlistForm Left = 0 Top = 0 ... object Panel2: TPanel Left = 0 Top = 0 Width = 841 Height = 636 Align = alClient Caption = 'Panel2'
• DocPrt.dfm 參照 DocPrt.png 的截圖回推 vue 的實作方式，並 以 vuejs 實作 DocPrt.vue,

2.2.2 DocPrt.ts 轉換原則

• 將 DocPrt.pas 的實作轉換為 ts 實作, 並完全保留其介面及大小寫, 將其 transpile 為 DocPrt.ts
• 若 DocPrt.pas 找不到相依方法的實作方式則於 ts 應完全保留該方法及界面，讓使用者另行實作
• 2.2.1 於實作 DocPrt.vue 時能引用 DocPrt.ts 用相關方法

2.3 生成後輸出

• 生成後的檔案請輸出至對應的 /uiOutput/DocPrt/DocPrt.vue 和 /uiOutput/DocPrt/DocPrt.ts 路徑

2.4 更新 preview 入口

• 2.4.1 preview 入口功能定義:
• 2.4.1.1 確保 @/uiOutput/index.html 中的 availableComponents 陣列包含此新轉換的元件
• 2.4.1.2 此新元件的設定應包含 id, name, vuePath, jsPath (指向 ts 檔案) 和 windowTitle