---
# System prepended metadata

title: 客製活動外包文件

---

# 客製活動外包文件

目的: 方便之後對台灣外包的 code review & refactor，之後如果有特殊的客製活動會針對不同的商業邏輯或是 components 去 review，有 bug 時才不會浪費太多時間在找 code，新人也比較快上手

## Folder Structure
資料夾結構，大概描述一下功能用途，平常會傳入的 props，需要注意的點，

### share
> 共用的一些方法
- 17app `17app.ts` track使用的文件
- 17appTrack `17appTrack.ts` track使用的文件
- 17liveMessageTunnel `17liveMessageTunnel.tsx` track使用的文件
- utils `utils.ts` 一些經常使用的公共方法
    - convertConditionFilter：condition filter 函數（在conditionMatch中使用）
    - conditionMatch：根據傳入值的條件返回相應的數據。榜單中不同排名需要顯示不同的UI時使用
    - numberFormat：格式化分數（10000 => 10,000）
    - numberFormatWithDigits: 格式化帶有小數分數（10000.5 => 10,000.5）
    - - value: 要格式話的分數值
    - - minimumFractionDigits：幾位小數
    - copyDataToClipboard：活動結束時，點擊copy button導出數據使用的方法
#### services
- axios `axios.ts`
    - getInstance: 調用mkt api和eventory api的 instance
    - getInstanceCache: 調用cache api的 instance
    - getInstanceVote: 調用vote api的instance
- leaderboard service `leaderboard.service.ts`
    - getLeaderboard: 獲得mkt和eventory表單數據的service
- leaderboardCache service `leaderboardCache.service.ts`
    - getLeaderboardCache: 獲得cache表單數據的service
- leaderboardEventory service `leaderboardEventory.service.ts`
    - getLeaderboardEventory: 獲得eventory表單數據的service
- leaderboardVote service `leaderboardVote.service.ts`
    - getLeaderboardVote: 獲得vote數據的service
- translation service `translation.service.ts`
    - getTranslation: 當活動需要多種語言時，並且希望企劃能夠即時在tool上更新，使用這個service活動多語言的數據

### UI
- CopyButton `CopyButton.tsx`
    - data: 需要copy的數據
    - condition：用來處理數據的一些特殊的條件
- Countdown `Countdown.tsx` 日期時間函數
    - theme：主題
    - startDate：開始時間
    - endDate：結束時間
    - className：自定義時的類名
    - isSameDay：是否是同一天的日期
    - dateFormat：日期時間格式
    - formatStr：剩餘時間的格式
- CoverVideo `CoverVideo.tsx` 主視覺組件
    - src：視頻路勁
    - iframe：iframe路徑
    - img：圖片路徑
- EventPage `EventPage.tsx` 活動的主頁面組件
    - children：組件內容
- GlobalStyles `GlobalStyles.tsx` 全局的樣式
- Loading `Loading.tsx`
    - color：顏色
- Tab `Tab.tsx` Tab item 組件
- Tabs `Tabs.tsx` Tabs 組件
    - children：內容
    - active：激活Tab的key
    - itemEndRow: 標記在最後一組的index
    - className：DivWrapTab 自定義類名
    - showTab：是否顯示tab
- VirtualizedList `VirtualizedList.tsx` 列表組件
    - dataset：數據
    - children：item內容
    - itemHeight：單個item的高度
    - updateOnID：用於展開Panel查看詳情，一般為useId
    - panelSize：panel的高度，如果沒有updateOnID則不生效

#### hooks
- TabsRefContext `TabsRefContext.ts` Tab 全局 context
- useCountDown `useCountDown.ts` 時間倒數hook
    - endTime：結束時間
- useDeepLink `useDeepLink.ts` 在app打開主播頁面的hook
    - userID：用戶ID
    - openID：用戶openID
    - streamID：streamID
- useFilter `useFilter.ts` 榜單search hook
- useQueryString `useQueryString.ts` 如果url裡面有streamerUserID，自動滾動到這個主播
- useScore `useScore.ts` 積分hook
- useStartRender `useStartRender.ts` 解決第一次後端渲染問題
- useTabLocked `useTabLocked.ts` 一般用來判斷當前時間是否到了lockDate
    - lockDate：需要判斷的時間

### components
> 共用 components，針對各種 leaderboard 做抽象或是一些被複用的 components
- leaderboard
    - Leaderboard `LeaderboardItem.tsx`
        - item：榜單信息
        - condition：condition配置信息
        - showPanel：是否顯示BonusPanel
    - BonusPanel `BonusPanel.tsx`
        - meta：Bonus數據
    - LeaderboardGeneral `LeaderboardGeneral.tsx`
        - itemHeight：item高度，向VirtualizedList傳遞
        - panelSize：panel高度，向VirtualizedList傳遞
        - leaderboardData：榜單數據及榜單search的hooks
        - condition：condition配置信息
        - render：渲染item
    - MissionPanel `MissionPanel.tsx` 可選的，配置condition.missions開啟
        - condition：condition配置信息
        - teamApi：需要請求API的containerID，如果為空則取condition中的containerID
- EventIntro `EventIntro.tsx` 主要用來顯示每個榜單的攻略
    - title：標題
    - content：內容
    - iframe：如果使用工具來管理，使用iframe嵌入
    - only: 如果只是iframe，用這個字段來判斷
- LeaderboardContainer `LeaderboardContainer.tsx` 榜單的主要contaienr
    - apis: 榜單需要調用的所有apis
    - sortFunc：對數據進行二次的整理的函數
    - realTime：否是是即時數據 0：不是 1000：每秒更新一次
    - hashCheck：是否需要hash檢測props是否有改變來判斷是否re-render
    - iframe：iframe url
    - condition：榜單需要的conditions
    - initialData：初始化數據

- RankTitle `RankTitle.tsx` 榜單標題組件
    - title: 標題

#### Tabs
- styled `styled.tsx` 所有的樣式用styled-components，都在這裡
- Tabs 每一個榜單都是一個Tab，都會有單獨的文件.
    - 命名：以Tabs開頭，以tab的層做後綴。例如第一層第一個就是Tabs00；第二層第二個就是Tabs11

- Tabs00 `Tabs00.tsx`
    - tabs00Items
        - tabKey: Tab key
        - title：Tab 標題組件
        - tabText：用來track的tab的文字
        - tabs：子Tabs
        - countdown：倒計時組件
        - leaderboard：榜單組件

### constants
> tab, api, translation keys, style, conditions 等設定
- apis `api.ts` 定義api
- conditions `conditions.tsx` 定義conditions
- config `config.ts` 定義常量
    - 定義每個Tab的開始結束時間
    - 定義說明頁面使用的鏈接