---
# System prepended metadata

title: 待做事項
tags: [上海商業儲蓄銀行]

---


前台
---

### 1. 廣告輪播
> 豐裕有提供 swiper-bundle.min.js
> 以有用自訂Hook(useFrameResources)於進入點載入
> Vanilla JS 可以參考豐裕提供之 app.js
> 以及 swiper online doc
> PC：3則廣告、MB： 1則廣告

### 2. 數字鍵盤/小鍵盤
![](https://hackmd.io/_uploads/HydKltWK3.png)
>已撰寫好HOC(withKeyboard)
>已撰寫好Component(Keyboard.Numeric)需調整，
>
>另需要調整Component(Input)增加 prop ，
>去控制密碼模式下不用眼睛按鈕，改為呈現 Keyboard.Numeric
>
>目前豐裕需調整不同裝置行為，需等調整完後再設計
>2023/07/07調整完成
> 
>另需要調整HOC(withKeyboard)
>根據豐裕註解 
>2023-07-03 v4
>客戶要求當啟用小鍵盤時，不鎖住正常鍵盤輸入

### 3. Link.Icon(IconLink) 
![](https://hackmd.io/_uploads/BybYNcbF2.png)  
>  
>  考慮擴充性，所以不單指為 File icon  
>  
>  Link 採用 Dot Notation 新增 Link.Icon  
>  component 名稱為 IconLink  
>  
>  icon 需制定常數於type.js  
>  可參考元件庫 elements-list.html  
>  
>  預計prop:  
>  - icon : icon 類型，必填  
>  - iconOrderLast : icon 是否為置後  
>  - onClick : 點擊事件

### 4. 表格標題
![](https://hackmd.io/_uploads/rkWKYcWt3.png)  
> component 名稱為 TableTile  
>  預計prop:  
>  - title : 標題文字，必填  
>  - description : 描述，如未傳入則應該連其描述元素都不渲染
    
### 5. 多列凍結比較表格
![](https://hackmd.io/_uploads/S1sRkj-F2.png)  
> 已有 凍結表格 Table.Sticky.A  
> 已與豐裕Grant確認，  
> 應該是 凍結表格 Table.Sticky.A 的變種，  
> thead 多了 tr.th_limitset (比較列)  
> 可以參考 props.totalColumns 的設計  
> ![](https://hackmd.io/_uploads/H1KdWDGth.png)

### 6. 表格群組
![](https://hackmd.io/_uploads/rklYZjWKn.png)  
> 預計作法為:   
> 當前表格組件，要多提供 prop-attachClassName  
> 看能不能抽出抽象方法給所有表格組件使用

### 7. Table.Normal.C(Table.Normal.C) 
![](https://hackmd.io/_uploads/rkRxF03Y3.png)  
>  Table 採用 Dot Notation 新增 Table.Normal.C  
>  component 名稱為 TableNormalC  
>  要和其他表格組件一樣提供相同 prop 接口  
>  一樣使用React.forwardRef 可轉發(ref)  
>  後續發現只於一支交易(FUNEQR01)有使用且為聲明頁  
>  2023/07/19 詢問負責之SA(William)  
>  確認該聲明頁來源為後台上稿  
>  所以不需要開發此組件
    
### 8. DateTag(日期Tag)
![](https://hackmd.io/_uploads/H1GLNwGt3.png)
> 可以搭配現已開發好組件(Datepicker.jsx)，組合封裝
> 組件邏輯行為需要找 SA 討論，
> 目前初步看來可設計功能:
> - 可控禁用
> - 日期範圍
> - 預設日期
    
### 9. 聲明頁共用JS
![](https://hackmd.io/_uploads/HyWzdvMth.png)
> 此是為了方便開發，非必需性，
> 初步是做自定義Hook，
> 名稱暫定為 useStatementCollapse，
> Vanilla JS 可以參考豐裕提供之 app.js
> - [data-oneway-collapse]
> - [data-oneway-collapse-close]
> - [data-twoway-collapse]

### 10. 加入日期選擇器
![](https://hackmd.io/_uploads/B1lIowft2.png)
> 元件庫 elements-form.html
> Kevin已開發初版，需Codereview，視情況重構
> - 多語系
> - 數字範圍
> - 內部事件(全選、重新選擇)
> - 確認 callback

### 11. 交易暫禁
![](https://hackmd.io/_uploads/ryHaCPzF2.png)
> 需與後端串接

### 12. PdfGenerator
> - 提供 CallBack 函式下載: 
> 下載有兩種，一種是後端提供的下載，
> 另外一種是友善列印的下載，區別是友善列印是另開分頁，
> 而下載是直接下載檔案，而就是這段需要設計接口，
> 實作方法須從內部邏輯解藕出來
> - 調整PDF燈箱款式:
> 參考PDF.html，方法實作基本都有，
> 但須調整結構以及樣式，
> 另外因Modal結構固定，所以原有Modal不擴充，
> 而是單獨 PdfGenerator 內部實作

### 13. 晶片金融卡安控元件
> API文件可以參考 FS_系統串接與共用服務_PGIFZZ09_晶片金融卡安控元件串接_V0.1.docx
> - 規格書整理邏輯:
> 已跟PG要了「FS_臺幣存匯_申請設定.pdf」、「FS_臺幣存匯_臺幣轉帳服務_TWDETR01_立即預約轉帳_V0.1.docx」、「PGS_首頁登入_IBAPTR02_重設代號及密碼_V0.1.docx」三份規格書，需要從中了解交易所需邏輯，並設計接口，除了規格書以外，應該還要參考靜態網頁畫面是否有規格書沒有之邏輯
> - 廠商元件/AP:
> 需要進行測試，預計是在撰寫共用元件(真)進行，已有先跟公司申請Macbook測試，以及還需要跟後台串接測試雙向驗證，讀卡機以及測試卡片等需要等客戶提供，Rong已經有跟Vince反應此事，有一代讀卡機，但其餘東西還需要採購，皆尚未提供
> - 共用元件: 
> 預計採用自訂Hook提供交易使用接口，廠商元件掛載則平台處理(進入點)，要先做一個假的元件給PG們開發  

### 14. Navbar
![](https://hackmd.io/_uploads/HyuZ6FMtn.png)
> 預計應為有兩種款式  
> 目前已經採用 Dot Notation 設計以下組件:  
> - Navbar.Section.LoginInfoBlk.HeaderLoginMode  
> - Navbar.Section.LoginInfoBlk.Default  
> 
> 已經實作功能:  
> - 多語系切換  
> - 左側收合功能  
> 
> 待做功能:
> - 招呼語以及最後登入時間:  
> 左側可能會有風格icon，這段需要與SA討論，  
> 至於問號語以及稱謂，之前和Jackson討論過，  
> 就單純 名字 + 您好 的格式就好，  
> 另外所需資料(名字以及最後登入時間)，  
> 平台登入後會用Redux持久化儲存(authSlice)，  
> 這段除了名字以外，基本上應該要做多語系  
> 
> - 計時器:  
> 這段需要做多語系，  
> 以及倒數需要用Redux持久化儲存(authSlice)，  
> 另外倒數結束會有燈箱提醒，  
> 延長需與後端串接，  
> 除了前端倒數以外，還有後端session延長，  
> 需要與後端串接  
> 
> - 登出:  
> 需要調用Redux action (authSlice)，  
> 清除本地 local storage 以及 redux storage，  
> 需要與後端串接  
> 
> - 常用功能:
> 這部分會有PG去處理開發交易，會連內部以及外部  

### 15. 左側選單
> 須調整當前選單組件已符合當前廠商樣式結構行為

### 16. 錯誤邊界
> 機制類，用來捕捉並處理子元件中產生的 JavaScript 錯誤，以避免整個應用程序崩潰

### 17. 色碼表
![](https://hackmd.io/_uploads/SkQRCmBF2.png)
> 圓餅圖/甘特用所用顏色色碼列表  
> 按照會議結果，  
> 顏色順序為 1~10 16~20 11~15

### 18. PUSH 認證登入新機制
> 2023/07/10 已和 SA John 確認新增以下機制
> - 登入頁到第二個階段時，身分證/統編欄位要 disabled 
> - 第二個階段倒數結束時，身分證/統編欄位要解除 disabled 

### 19. 聲明頁做法
> - PDF組件(已經完成初版)
> - HTML嵌PDF做法
> - HTML嵌HTML做法
> - 整理上述說明做法文件

### 20. Table.Normal.D(Table.Normal.D) 
![](https://hackmd.io/_uploads/SkfvY03Yn.png)  
>  Table 採用 Dot Notation 新增 Table.Normal.D  
>  component 名稱為 TableNormalD  
>  要和其他表格組件一樣提供相同 prop 接口  
>  一樣使用React.forwardRef 可轉發(ref)

### 21. 列表組件 新增自定義附加樣式接口
>  預計統一添加 prop.attachClassName  

### 21. ResultsPage.Wrapper.NoWork 擴充接口
>  新增 props.type 可自訂 results-no-work 樣式  

### 22. 列表組件 新增自定義標籤元素
>  新增 props.type 可自訂標籤元素(ul ol dl)  

### 23. qrcode、push 跳出視窗教學
>  豐裕已提供切版，需調整IBAPTR10  

### 24. RowWrapper調整extension為動態值

後台
---

### 1. ColAutoWrapper
> 新增me-5樣式、新增接口可自行附加樣式

### 2. PBtnFloatingWrapper
> 目前按鈕要套入新的結構(P-btn-floating-bottom)內  
> 按照名稱推斷，應該會有其他方位，  
> 到時候開發要考量擴充性

### 3. Modal 按鈕順序
> 預設按鈕順序統一改成：確定 刪除 取消

### 4. TableToolbar(表格工具列)
> Kevin已開發初版，需Codereview，視情況重構  
> 參考 00_table-bars.html

### 5. TableTitlebar(表格標題列)
> Kevin已開發初版，需Codereview，視情況重構  
> 參考 00_table-bars.html

### 6. Checkbox元件 新增 FormCheckWrapper 接口
> 要新增接口判斷是否需要FormCheckWrapper

### 7. TableWrapper 傳遞 ref
> 將TableWrapper組件改寫為使用React.forwardRef，  
> 用於向下傳遞 ref 屬性到組件的內部元素，  
> 因為目前有遇到一支交易需要客製TR  
> 可以使用寫法達成，但還是開個接口，  
> 讓PG可以減少重工

### 8. Toast元件位置設計
> 需要等T.Y.整理設計出個位置，再調整元件
> 
> 2023/07/12 確認目前只需要 MIDDLE_TOP  
> 預計保留位置彈性  
> 只是預設要調整為 MIDDLE_TOP 以及樣式更新

### 9. Dropdown.Search(下拉式搜尋組件)
> Kevin已開發初版，需重構  

### 9. Modal 預設樣式
> 目前新增有預設樣式，原預設樣式需調整  