Diagram‐draw.io - daniel-qa/Vue GitHub Wiki

• 注音字型

flowchart TD
    subgraph INIT["初始化（每個 editor 獨立閉包）"]
        I1["addPhonicListener(editor)"]
        I2["savedRange = null\npopoverEl = null"]
        I3["document.addEventListener(mouseup / keyup)"]
        I4["fetch /fonts/phonic_table_Z.txt\n→ dictMap (lazy)"]
    end

    subgraph TRIGGER["觸發：使用者選取文字"]
        T1["onDocMouseUp / onDocKeyUp"]
        T2["確認事件來自此 editor.$textElem"]
        T3["handleSelection()"]
        T4{{"editor.isZhuyinFont ?\n（注音模式開啟？）"}}
        T5["getSelectionText() → firstChar"]
        T6["lookupPhonic(firstChar)\n→ candidates[]"]
        T7{{"candidates.length > 1 ?"}}
    end

    subgraph POPOVER["顯示候選字浮層"]
        P1["cloneRange → firstCharRange\n（縮小至第一個字元）"]
        P2["savedRange = firstCharRange\nsavedRange._firstChar = char"]
        P3["showPopover(candidates, rect)"]
        P4["建立 .phonic-popover DOM\n附加候選字按鈕"]
        P5["document.body.appendChild"]
    end

    subgraph PICK["使用者點選候選字"]
        C1["btn.mousedown → onPickPhonic(index)"]
        C2["buildIVS(char, index)\n→ ivsStr (Unicode IVS)"]
        C3["savedRange.deleteContents()\n→ insertNode(textNode)"]
        C4["editor.change.emit()"]
        C5["closePopover()\n移除 DOM，清除 savedRange"]
    end

    subgraph OUTSIDE["點選浮層外部"]
        O1["onOutsideClick\n(setTimeout 0ms)"]
        O2["closePopover()"]
    end

    I1 --> I2 --> I3
    I3 --> T1 --> T2 --> T3 --> T4
    T4 -->|是| T5 --> T6 --> T7
    T4 -->|否| STOP["略過"]
    T7 -->|是| P1 --> P2 --> P3 --> P4 --> P5
    T7 -->|否| STOP2["不顯示浮層"]
    P5 --> C1 --> C2 --> C3 --> C4 --> C5
    P5 --> O1 --> O2

---

• 試題

flowchart TD
    A["使用者點擊 + 新增題目"] --> B["CreateExercises.vue / BaseEditExercise.vue\n填寫題型 難度 學段 科目 知識點"]

    B --> C["evTools.createBlobItem()\n完整富文本格式 含 HTML question/option"]
    B --> D["evTools.createCosmosItem()\n索引格式 純文字摘要 去除 base64"]

    C --> E["blobTool.upload()\n上傳 item/{guid}/{guid}.json 至 Azure Blob\n需先取得 SAS Token"]
    E --> F{上傳成功?}
    F -- 失敗 --> G["顯示錯誤訊息"]
    F -- 成功 取得 blob URL --> H

    D --> H["POST /item/upsert\nnewEvaluation.SaveSingleExercise()\n{ itemInfo, option: insert/update }"]

    B -- type = compose --> V["每個子題各自上傳 Blob\nitem/{childId}/{childId}.json"]
    V --> W["各自呼叫 POST /item/upsert\npid = 父題 id"]
    W --> X["父題 children 只存子題 ID 陣列"]
    X --> H

    H --> J["ItemController.Upsert()"]
    J --> K["計算 Blob 大小 itemInfo.size"]
    K --> L["BlobService.RefreshBlobRoot()\n發送 Service Bus 刷新訊息"]
    L --> M{scope?}

    M -- private --> N["Cosmos Teacher 容器\nPartitionKey = Item-teacherId"]
    M -- school --> O["Cosmos School 容器\nPartitionKey = Item-schoolCode"]
    M -- area/public --> P["Cosmos Normal 容器"]

    N --> Q{option?}
    O --> Q
    P --> Q

    Q -- insert --> R["CreateItemAsync()\n已存在回傳 409"]
    Q -- update --> S["ReplaceItemAsync()"]

    R --> T["發送 ServiceBus ItemCondQueue"]
    S --> T
    T --> U["非同步更新 Redis\nItemCond 統計快取"]

---

✅ 方法 1：直接貼 Mermaid（最推薦）

打開 diagrams.net

上方選單點： Arrange（排列） → Insert（插入） → Advanced（進階） → Mermaid

貼上你的 Mermaid code，例如：

graph TD

A[開始] --> B[處理]
B --> C[結束]

按 Insert

→ 會直接生成圖

✅ 方法 2：右鍵插入（新版 UI）

有些版本會變成：

右鍵畫布

Insert → Advanced → Mermaid

效果一樣

✅ 方法 3：如果你是 Mermaid 檔案（.mmd / .md）

draw.io 不能直接 import .mmd 檔變圖

你要：

打開檔案

複製 Mermaid 內容

用方法 1 貼進去

⚠️ 常見踩雷

❌ 不支援「整個 .md 自動轉 diagram」
❌ 不支援直接 drag & drop Mermaid file
⚠️ Mermaid 語法錯會「整張圖不生成」