---
# System prepended metadata

title: 規範

---

# 規範

## 專案/產品流程 SA
包含業務邏輯及專案/產品流程

Voice > HelpDesk > Email > Chat > Video > Line > TM

## 程式架構文件 SD

包含組件名稱，產品/專案劃分事件流程及資料流向，將各畫面對映前後端的項目列出。
目的: 以文件方式呈現程式架構，解決程式只有對映的人才了解其寫法跟邏輯的問題。
- 產品流程(包含各畫面解說，以sequencediagrams解說各流程)
- 架構規劃(draw.io)
    - 前端組件架構(資料事件流程)
- DB規劃(欄位，關聯)
- API規劃(參數，回傳格式，範例)
- 畫面

## Code Document

### Front-end Vue
組件的使用介面等詳細內容
目的: 解說各組件使用方式，用以規範並改善組件功能說明不清導致難以使用的問題。
- 於檔案加入註解 (配合TS可以有效了解資料型態)
- 使用vuese建立Vue文件
    vuese安裝及操作
    1. 安裝vuese
    `npm install -g @vuese/cli`
    2. 至專案根目錄
    3. vuese gen
- 使用Vuepress包裝文件
    1. 安裝Vuepress
    `npm install -g vuepress`
    3. 至專案根目錄
    4. 開發 npm run docs:dev
    5. 產出 npm run docs:build

### Back-End Java-Doc

程式上方註解需依照javadoc註解方式說明下述內容
1. 程式名稱
2. 程式功能描述
3. 傳入參數說明
4. 回傳值
5. 拋出異常
6. 範例程式

(範例如下)
```
Example:
    FunctionName
        public static java.lang.String FunctionName(java.lang.String day)
          使用說明:
            得到傳入日期的月份,String 格式
          程式設計師:Timo 
        .
          Parameters: 
            xxx - 傳入的日期,格式 870909 or 1030909 or 19980909
          Returns: 
            return 傳入日期的月份 
          Throws:
           if error ,則 return "0"
         Example:
           String day="870909";
           String mouth=FunctionName(day);
```

## 前端文件
- eslint的解說
- 程式規範/code style(檔案命名規則，參數命名規則)
- codingStyle (prettier, tslint)
- API (axios)
- router (vue-router)
- Flux design pettern(vuex-class)
- i18n (vue-i18n)
- ui framework (vuetify)
- store
- utils
- 頁面Component階層

## File Name

- 如果為共用組件
    1. 將檔案建立至components/common/底下
    2. 將檔名前綴加上Base
    3. 於**components/common/{component}/index.ts**，以及**components/common/index.ts** export出來(格式參照現有檔案)。
    ######

        架構如例:
        common
            |-BaseInput
                |-src
                |    |-BaseInput.vue
                |-index.ts

- 如果為包裝後組件

        將包裝好的組件建立至src/components/底下
        
## 需補充文件
1.helpdesk
2.chat/voice
3.video
...



## 規劃
打包組件發布至npm



API 回傳 statusCode 後端
API 回傳 { returnCode: '', returnMsg: '' } ... 
## 程式規範
### 命名
    ts
        interface > 開頭大寫 (後面加type沒有規定)
        class > 開頭大寫 駝峰
        變數 > camelcase
        type > 開頭大寫 駝峰
    Vue
        data > camelcase
        ref > 全小寫底線切割
        methods > camelcase
            public demoFunc(param: 類型 ): 回傳 {}
        computed > camelcase
        Module > camelcase
        prototype > $符號開頭 camelcase
        emit > 英文字全小寫之間 dash
        使用 Vuex 名稱要一樣
        slot 英文字全小寫之間 dash
    scss
        class > 英文字全小寫之間 dash
    window
        camelcase
    Vuex
        state > camelcase
        getters > get開頭 camelcase
        mutations > camelcase
        actions > camelcase
        
xxxList: Array<any>
xxxxxxs: Array<any>
xxxArr: Array<any>
xxxCount: number
xxxIndex: number
xxxID: number
xxxString: string
text: string
xxxStr: string
xxxxObj: object
xxxData: object | Array<any>
param: object
type: string
xxxActive: boolean
xxxSwitch: boolean
xxxLoading: boolean
xxxDisabled: boolean
xxxFlag: boolean
xxxMapping: object




  // 送出/宣告物件 型別
  interface ParamType {
    [key: string]: any
  }
  // 迴圈 型別 (forEach...)
  interface ItemType {
    [key: string]: any
  }
  // API response 型別
  interface ResType {
    [key: string]: any
  }
  
  
  