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

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

2.2 轉換原則

2.2.1 ErrList.vue 轉換原則

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

• 2.2.2 ErrList.ts 轉換原則

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

2.3 生成後輸出

• 生成後的檔案請輸出至 uiOutput/ErrList

2.4 生成 preview 入口

• 2.4.1 preview 入口功能定義:
• 2.4.1.1 preview 入口上方為 list button 區塊, 該區塊用來放致所有於 2.3 轉換生成的 vue 連結
• 2.4.1.2 preview 入口下方為 preview viewer, 當點擊 2.4.1.1 的 vue 連結時, viewer 能載入相應的 vue 元件內容
• 2.4.2 prview 入口請輪出至 uiOutput/index.html