### 2.1 DFM 轉換需求： .dfm Delphi 轉換為 vue 實作
@/CB_IMGPSScanImp.dfm 為 Delphi 的 ui 介面定義, 請幫我轉換為相對應的 /uiOutput/CB_IMGPSScanImp/CB_IMGPSScanImp.vue
@/CB_IMGPSScanImp.pas 為 Delphi 的 ui 介面定義實作, 也請幫我轉換為相應的 /uiOutput/CB_IMGPSScanImp/CB_IMGPSScanImp.ts
@/doc/curtis/screenShot/CB_IMGPSScanImp.png 則是 @/CB_IMGPSScanImp.dfm 介面的截圖, 轉換後的 /uiOutput/CB_IMGPSScanImp/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/CB_IMGPSScanImp/CB_IMGPSScanImp.vue 和 /uiOutput/CB_IMGPSScanImp/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