| | |
| | | |
| | | ### 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 一致 |
| | | @/ErrList.dfm 為 Delphi 的 ui 介面定義, 請幫我轉換為相對應的 /uiOutput/ErrList/ErrList.vue |
| | | @/ErrList.pas 為 Delphi 的 ui 介面定義實作, 也請幫我轉換為相應的 /uiOutput/ErrList/ErrList.ts |
| | | @/doc/curtis/screenShot/ErrList.png 則是 @/ErrList.dfm 介面的截圖, 轉換後的 /uiOutput/ErrList/ErrList.vue 必須與 @/doc/curtis/screenShot/ErrList.png 一致 |
| | | |
| | | #### 2.2 轉換原則 |
| | | ##### 2.2.1 ErrList.vue 轉換原則 |
| | |
| | | Align = alClient |
| | | Caption = 'Panel2' |
| | | ``` |
| | | - ErrList.dfm 參照 CB_ErrList.png 的截圖回推 vue 的實作方式,並 以 vuejs 實作 ErrList.vue, |
| | | - |
| | | - ErrList.dfm 參照 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 |
| | | - 生成後的檔案請輸出至對應的 /uiOutput/ErrList/ErrList.vue 和 /uiOutput/ErrList/ErrList.ts 路徑 |
| | | |
| | | #### 2.4 生成 preview 入口 |
| | | #### 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 |
| | | - 2.4.1.1 確保 @/uiOutput/index.html 中的 `availableComponents` 陣列包含此新轉換的元件 |
| | | - 2.4.1.2 此新元件的設定應包含 id, name, vuePath, jsPath (指向 ts 檔案) 和 windowTitle |