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

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

2.2 轉換原則

2.2.1 CB_IMGPSScanImp.vue 轉換原則

• ui layout 及風格請完全參照 CB_IMGPSScanImp.png, 因為這是使用者要的設計, 大小定義請完全參照 CB_IMGPSScanImp.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'
• CB_IMGPSScanImp.dfm 參照 CB_IMGPSScanImp.png 的截圖回推 vue 的實作方式，並 以 vuejs 實作 CB_IMGPSScanImp.vue,

2.2.2 CB_IMGPSScanImp.ts 轉換原則

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

2.3 生成後輸出

• 生成後的檔案請輸出至對應的 /uiOutput/ErrList/CB_IMGPSScanImp.vue 和 /uiOutput/ErrList/CB_IMGPSScanImp.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