sport-front

執行開發環境

方法一 啟動 dev-server use taiwan or india api

npm start

npm run start:prod

方法二 docker 啟動 dev-server

docker compose up -d front

打包

build production use india api

npm run build

build development use taiwan api

npm run build:dev

build widget use india api

npm run build-widget

build widget use taiwan api

npm run build-widget:dev

Deploy (TODO)

# 手動
gcloud builds submit --config ./deployments/gcp/develop/cloud-build.yaml --substitutions=TAG_NAME="{your tag}",SHORT_SHA="$(git rev-parse --short HEAD)"

gcloud builds submit --config ./deployments/gcp/production/cloud-build.yaml --substitutions=TAG_NAME="{your tag}",SHORT_SHA="$(git rev-parse --short HEAD)"

kubectl set image deployment/sport-front sport-front="asia.gcr.io/sport-319603/front:{your tag}";

kubectl rollout restart deployment sport-front (如 image tag 與原先相同需 restart)

# makefile cli (only surpport develop env currently)
make kube-deploy env={your env} tag={your tag}

make kube-restart env={your env}  (如 image tag 與原先相同需 restart)

make gcloud-build env={your env} tag={your tag}

TS 回報 Commit 格式

# 務必依照以下格式回傳，推上 gitlab 後即可自動輸出在 Ts 回報表中
# 如是不需要回報的 commit，不用付上回報格式即可

<type>: <subject>

<description>
-------以下為回報格式-------
類型: <value>
編號: <value>
說明: <value>
頁面: <value>
標的: <value>
更前: <value>
更後: <value>
待修: <value>
紀錄: <value>
上版前端: <value>
API: <value>
版號: <value>

Folder Structure

    .
    ├── build
    ├── public
    ├── scripts
    └── src
        ├── actions                # redux actions
        ├── api                    # api
        ├── assets                 # 靜態檔
        │   ├── fonts              # 字型檔
        │   ├── images             # 圖檔
        ├── components             # 元件
        │   ├── Banner             # 首頁球種頁Banner
        │   ├── CenterSidebarPC    # ＰＣ版中間區域
        │   ├── DividingLine       # 分向線
        │   ├── EventList          # 比賽列表
        │   ├── EventStatus        # 比賽狀態
        │   ├── Filter             # 球種頁分類
        │   ├── Footer             # Footer
        │   ├── Header             # Header mobile
        │   ├── HeaderPC           # HeaderPC
        │   ├── IconComponent      # 重複利用性icon
        │   ├── Information        # 盤口資訊
        │   ├── LeftSidebar        # 左側邊欄(漢堡選單)
        │   ├── LeftSidebarPC      # 左側邊欄(漢堡選單)PC
        │   ├── Loading            # Loading icon
        │   ├── MainContainerPC    # PC styled component
        │   ├── Notification       # 下單通知
        │   ├── OutRight           # OutRight盤口
        │   ├── PopularStreaming   # PopularStreaming
        │   ├── QuickLink          # 快速選單
        │   ├── RightSideBarPCV3   # PC右側區域
        │   ├── RoundHead          # 比分卡
        │   ├── OrderSlip          # 下單元件
        │   ├── SortedIconBlock    # SortedIconBlock
        │   ├── Results            # 比賽結果
        │   ├── RightSidebar       # 右側邊欄
        │   ├── SwitchMarketsPages # 切換盤口模式的按鈕
        │   ├── UnderPopup         # 下方彈出視窗(orderslip,statement)
        │   ├── UseAppLate         # 較晚執行的function集中管理處
        │   └── WidgetAnalyzeBoard # 分析板
        ├── config                 # 設定
        ├── pages                  # router
        │   └── Bonus # Bonus
        │   └── Category # 球種頁
        │   └── Markets # 盤口頁
        │   └── Promotion # 推廣頁
        │   └── RulePage # 比賽規則
        │   └── Security # Security
        │   └── Special # 主打熱門賽事
        │   └── Sports # 原today upcoming inplay 資料夾,以重整到Category資料夾
        │   └── Statement # order 結果
        │   └── Watchlist # 我的最愛
        │   └── Homepage.js # 首頁
        ├── hooks                  # 含生命週期 api ,帶有state等
        ├── utils                  # 工具類
        │   └── i18 # 翻譯套件
        └── reducers               # redux reducers

Theme Color

  secondary_background_color: theme?.sbgc ?? 'fff',
  text_primary_color: theme?.tpc ?? '333',
  primary_color: theme?.pc ?? 'ffb80c',
  secondary_color: theme?.sc ?? 'fff',
  third_color: theme?.tc ?? '333',
  primary_background_color: theme?.pbgc ?? 'f5f6fa',
  quick_link_border_color: theme?.qlbc ?? 'eaeaea',

Test Language

defaults write com.google.Chrome AppleLanguages '(en-US)'

source: https://www.zhihu.com/question/22327155

Translation

• api 拿到翻譯 json 檔的 key 格式： aaaa_bbb_cc

• 前端交付新增翻譯時提供 key 跟英文 value， key 自定義，後端會轉換成上面格式，通常用原英文

• 一般文字翻譯可使用 useTrans 來翻譯，翻譯的 key 為原英文或是 key 的格式都可

• 如果要客製化翻譯內容，則使用原 i18n useTranslation

更新為 vite 20240918

• 專案 node 版本升為 20 up

• 開啟專案方式有改，參照 package.json

• 全域變數改成 VITE_{VAR_NAME} (參照 vite 文件)

• import 全域變數的方式改成 import.meta.env (參照 vite 文件)

• svg import 的方式改為 import ExpendArrow from '../../assets/images/PrimaryColorIcon/v3_lmt_arrow.svg?react'; 後方 url 加上 ?react (待修正)

• 開發過程把應為 jsx 的檔案改成檔名.jsx

• 打包及部版再測試

Git flow

gitGraph
commit id: "Initial commit"
commit id: "Initial release"

branch develop
checkout develop
commit id: "Start development"

branch feature/feature-a
checkout feature/feature-a
commit id: "Develop feature A"
commit id: "Finish feature A"
checkout develop
merge feature/feature-a

branch feature/feature-b
checkout feature/feature-b
commit id: "Develop feature B"
checkout develop
merge feature/feature-b

branch release/v1.0
checkout release/v1.0
commit id: "Prepare release v1.0"
commit id: "Fix minor bug"
checkout main
merge release/v1.0
checkout develop
merge release/v1.0

checkout main
branch hotfix/fix-prod-issue
checkout hotfix/fix-prod-issue
commit id: "Hotfix critical bug"
checkout main
merge hotfix/fix-prod-issue
checkout develop
merge hotfix/fix-prod-issue

共用邏輯

• ExchangeOrderslip 判斷該產品的方式是 uuid，用 parseProductUUid.ts 賦予每個參數 type
• orderCodeDict.ts # 盤口類型Map，用 order_code 索引，統一用 盤口類型名稱 寫判斷，
• productStatus.ts # 盤口狀態Map，用 name 或 status_code 索引，統一用 狀態名稱 寫判斷

ponyfill

• replaceAll 改用 import { replaceAll } from '@/utils/string';