---
# System prepended metadata

title: CS重構

---

# CS重構
## 要注意的邏輯
> - Skill list 有分 KTO & Chatting
> 	- KTO: 只有 QA Refernce & Skill management用到
> 	- Chatting: 其餘的頁面

## 最後TODO(要記得)
- [ ] filter整理
- [x] dateTime utc相關整理(目前用到的地方不多, 暫時先這樣)
- [ ] History log component 或許有更好的拆法(?)
- [x] message toast加上closeable(目前只有笨方法)

## TODO
- [x] CS Message 格式
	- 1. text color
	- 2. 物件格式在不同平台的使用方式
- [x] CS CRM區塊有用到的API
- [x] bo-component vue3版本(story book?)
- [x] 資料夾結構(composition function)
- [x] TypeScript用法

## 奇怪的地方
	- QA Reference: 可以儲存Percentage為0%的項目，且也會顯示在QA Workbench要評分的列表裡面
	- Skill Management: 沒有填寫任何欄位也能送出 (API已修正為name必填)
	- Prechat/Exit Survey: 左上選擇種類的下拉選單是寫死的Skill type name: Web & WB
				但實際上在Skill Management是可以隨便改動skill的name
	- Canned: 操作很不直覺
	- survey, picture setting: skill 下拉選單都被寫死
	- picture setting history log的keyId & delete功能卻是isEnable=false
	---------------
	- CS/QA Workbench: 右下角區塊的tab群, edit/save等的操作流程怪異
	- TEL. Log 顯示log的地方在右下角區塊的tab內, 跟其他Job tab都不同
	- QA Workbench: List tab 操作模式與其他tab相反
	- QA workbench: 右下角的Tracking work order頁籤
#### 【建議類】(OLD)
* Picture Setting的delete按鈕點擊後，使用的是windows.confirm，是否需要統一變更為$confirm?(確認訊息的文字也需定義)或改成像LinksSetting的確認彈窗
* Mail頁面目前呈現為Tab形式的目的是什麼? 是否需要統一成非Tab形式?
* CS Account Setting會考慮有篩選搜尋功能嗎?
* Links Setting的copy按鈕按下後是不是需要加複製成功的Toast?

## 疑似沒功能處(0726已告知BA進行確認)
* Prechat Survey的preview按鈕
* qa workbench 右下角的Tracking work order頁籤

## 疑問功能(0726已告知BA進行確認)
* cs workbench games右上角的語言下拉選單用途是什麼?


## views
* CS workbench(QA workbench) (2w)
* Operator Status Report (6h)
* Total Search V (1d 4h)
* QA Reference V (1d 4h) 
* Skill Groups Management V (1d 4h)
* Prechat Survey (1d)
* Exit Survey (1d)
* Canned V (1d 4h)
* Picture Setting V (2d)
* Release V (1d 4h)
* Autocall Distribution (1d 4h)
* Mail (1d 4h)
* CS Account Setting V (1d 4h)
* Link Setting V (1d 4h)

## bo component
- [x] input
- [x] select
- [x] button
- [x] radio(包含radio list)
- [x] tabSwitcher
- [x] pagination
- [x] tabPanel
- [x] checkbox
- [x] tag
- [ ] datepicker系列
- [x] tree(樣式)
- [x] table(樣式)
- [x] transfer(樣式)

備註：checkbox-withdropdown尚未搬移


## components
**1. CSWorkbench**
* SearchCategory
    * DepositTransaction
    * WithdrawalTransaction
        * TransactionFilterSearch
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * TransactionContent(body)
            * table(考慮是抽出單個compoenet)
            * BOPagination(現在是TablePagination)
            * playerInfo
        * TicketInfoModal
    * Transaction Log
        * LogFilterSearch
            * BOInput
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * LogContent(body)
            * BOPagination(現在是TablePagination)
            * PlayerInfo
        * WagerDetailModal
        * BonusInfoDetailModal
    * Games
        * GamesFilterSearch<包含選擇語系>
            * BORadio
            * BOInput
            * BODateTimeRangePicker
            * BOButton
        * GamesContent(body)
            * BOPagination(現在是TablePagination)
            * GamesPlayerInfo
        * GamesProviderSelectorModal
            * BOSelect
        * WagerDetailModal
    * Timeline
        * TimelineChart
        * TimelineTable
            * BODateTimeRangePicker
            * BOTable
            * BOPagination
    * ChatMailPhone
        * ChatMailPhoneFilterSearch
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * ChatMailPhoneContent(body)
            * BOTable
            * BOPagination
         * PhoneDetail
         * ChatDetail
         * MailDetail
    * BalanceAdjustment
        * BalanceAdjustmentFilterSearch
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * BalanceAdjustmentContent(body)
            * BOTable
            * BOPagination
            * playerInfo
* JobCategory
    * JobCategoryRadio
    * JobChat
        * ChatHistorySearch
            * BODateTimeRangePicker
            * BOButton
            * BOInput
        * ChatListRadio
        * ChatContnet
            * ChatDashBoard
                * BOSelect
                * ChatBox
                    * BOButton
                * ChatTransferModal
                    * BOCheckbox
                    * BOSelect
                    * BOButton
                * ChatReleaseModal
                    * BOSelect
                    * BOInput
                    * BOButton
    * JobMail
        * MailHistorySearch
            * BODateTimeRangePicker
            * BOButton
            * BOInput
        * MailListRadio
        * MailBox
            * BOButton
            * BOSelect
            * MailReplier
                * BOInput
                * BOSelect
            * MailHistory
                * BOInput
                * BOTag
                * 
    * JobPhone
        * PhoneHistorySearch
            * BOSelect
            * BOInput
        * PhoneCommunicationRecordsBox
            * BOInput
            * BORadio
            * BOSelect
            * BOButton
            * BODateTimePicker
* JobsInfo
    * BOTabSwitcher
    * Information
    * TicketHistory
        * BOInput
    * Release
        * BOInput
    * Ips
    * Ids
    * Remark
        * BOInput
        * BOButton
    * Canned
        * BOInput
        * BOButton
    * QaResult
        * BOInput
    * TelHistory
        * BOInput

**2. QAWorkbench**
* SearchCategory
    * DepositTransaction
    * WithdrawalTransaction
        * TransactionFilterSearch
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * TransactionContent(body)
            * table(考慮是抽出單個compoenet)
            * BOPagination(現在是TablePagination)
            * playerInfo
        * TicketInfoModal
    * Transaction Log
        * LogFilterSearch
            * BOInput
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * LogContent(body)
            * BOPagination(現在是TablePagination)
            * PlayerInfo
        * WagerDetailModal
        * BonusInfoDetailModal
    * Games
        * GamesFilterSearch<包含選擇語系>
            * BORadio
            * BOInput
            * BODateTimeRangePicker
            * BOButton
        * GamesContent(body)
            * BOPagination(現在是TablePagination)
            * GamesPlayerInfo
        * GamesProviderSelectorModal
            * BOSelect
        * WagerDetailModal
    * Timeline
        * TimelineChart
        * TimelineTable
            * BODateTimeRangePicker
            * BOTable
            * BOPagination
    * ChatMailPhone
        * ChatMailPhoneFilterSearch
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * ChatMailPhoneContent(body)
            * BOTable
            * BOPagination
         * PhoneDetail
         * ChatDetail
         * MailDetail
    * BalanceAdjustment
        * BalanceAdjustmentFilterSearch
            * BOSelect
            * BODateTimeRangePicker
            * BOButton
        * BalanceAdjustmentContent(body)
            * BOTable
            * BOPagination
            * playerInfo
* QaRecordList
    * QaRecordListFilterSearch
        * BOSelect
        * BODateTimeRangePicker
        * BOButton
    * BOTable
* JobCategory
    * JobCategoryRadio
    * JobQaChat
        * ChatHistorySearch
            * BODateTimeRangePicker
            * BOButton
            * BOInput
        * ChatListRadio
        * ChatContnet
            * ChatDashBoard
                * BOSelect
                * ChatBox
                    * BOButton
                * ChatTransferModal
                    * BOCheckbox
                    * BOSelect
                    * BOButton
                * ChatReleaseModal
                    * BOSelect
                    * BOInput
                    * BOButton
    * JobQaMail
        * MailHistorySearch
            * BODateTimeRangePicker
            * BOButton
            * BOInput
        * MailListRadio
        * MailBox
            * BOButton
            * BOSelect
            * MailHistory
                * BOInput
                * BOTag
    
* JobsInfo
    * BOTabSwitcher
    * Information
    * TicketHistory
        * BOInput
    * Release
        * BOInput
    * Ips
    * Ids
    * Remark
        * BOInput
        * BOButton
    * Canned
        * BOInput
        * BOButton
    * QaResult
        * BOInput
    * TelHistory
        * BOInput

**3. OperatorStatusReport**
* baseLayout(標題（大小標）＋方框)
    * OperatorStatusReportFilterSearch
        * BOInput
        * BOSelect
        * BOButton
    * OperatorStatusReportTable
        * BOTable
        * BOPagination

**4. TotalSearch**
* baseLayout(標題（大小標）＋方框)
    * TotalSearchFilterSearch
    * TotalSearchCategory
        * JobCategoryRadio
        * TotalSearchHistory
            * ChatListRadio
            * ChatContnet
                * ChatDashBoard
                    * BOSelect
                    * ChatBox
                        * BOButton
    * TotalSearchMail
        * MailListRadio
        * MailBox
            * BOButton
            * BOSelect
            * MailHistory
                * BOInput
                * BOTag
    
    * JobsInfo
        * BOTabSwitcher
        * Information
        * TicketHistory
            * BOInput
        * Release
            * BOInput
        * Ips
        * Ids
        * Remark
            * BOInput
            * BOButton
        * Canned
            * BOInput
            * BOButton
        * QaResult
            * BOInput
        * TelHistory
            * BOInput

**5. QaReference**
* baseLayout(標題（大小標）＋方框)
    * BOSelect
    * BOButton
    * QaReferenceSettingBody
        * BOInput
        * BOButton
    * AccessLogModal
        * BOTable
        * BOPagination
**6. SkillManagement**
* baseLayout(標題（大小標）＋方框)
    * BOButton
    * SkillList
        * BOCheckbox
        * BOButton
    * SkillEditor
        * BOInput
        * BOCheckbox
        * BOButton
    * AccessLogModal
        * BOTable
        * BOPagination
**7. PrechatSurvey**
* baseLayout(標題（大小標）＋方框)
    * BOSelect
    * BOButton
    * PrechatSurveyList
        * BOButton
    * SurveyEditor
        * BOInput
        * BOCheckbox
        * BOSelect
        * BOButton
        * BOTag
    * AccessLogModal
        * BOTable
        * BOPagination

**8. ExitSurvey**
* baseLayout(標題（大小標）＋方框)
    * BOSelect
    * BOButton
    * SurveyList
        * BOButton
    * SurveySurveyEditor
        * BOInput
        * BOCheckbox
        * BOSelect
        * BOButton
        * BOTag
    * AccessLogModal
        * BOTable
        * BOPagination

**9. Canned**
* baseLayout(標題（大小標）＋方框)
    * CanneBody
    * BOselect
    * BPButton
    * AccessLogModal
        * BOTable
        * BOPagination

**10. Picture Setting**
* baseLayout(標題（大小標）＋方框)
    * BOSelect
    * BOButton
    * BOTabSwitcher
    * PictureList
        * BOButton
    * CategoryEditorModal
        * BOInput
        * BOButton
    * PictureEditorModal
        * BOInput
        * BOButton
        * BOSelect
    * PictureViewModal
    * AccessLogModal
        * BOTable
        * BOPagination
11. Release
* baseLayout(標題（大小標）＋方框)
    * ReleaseBody
        * BOSelect
        * BOButton
        * BOInput
    * AccessLogModal
        * BOTable
        * BOPagination
12. AutocallDistribution
* baseLayout(標題（大小標）＋方框)
    * BOButton
    * AcdSetting
    * AccessLogModal
        * BOTable
        * BOPagination
13. Mail
* MailTabSwitcher
    * MailTemplateSettingBody
        * MailTemplateList
            * BOButton
            * AccessLogModal
                * BOTable
                * BOPagination
            * DeleteConfirmModal
        * MailTemplateEditor
            * BOInput
            * BOButton
14. CsAccountSetting
* baseLayout(標題（大小標）＋方框)
    * CsAccountSettingBody
        * BOTable
        * BOPagination
    * CsAccountEditorModal
        * BOInput
        * BOCheckbox
        * BOButton
        * BOTable
15. LinkSetting
* baseLayout(標題（大小標）＋方框)
    * BOSelect
    * BOButton
    * BOTabSwitcher
    * LinkList
        * BOButton
    * CategoryEditorModal
        * BOInput
        * BOButton
    * LinksEditorModal
        * BOInput
        * BOButton
        * BOSelect
    * DeleteConfirmModal
    * AccessLogModal
        * BOTable
        * BOPagination
