w-web-api 1.0.52 → 1.0.55

package/server/staLogs/staEvent.mjs

@@ -0,0 +1,131 @@
+import ot from 'dayjs'
+import get from 'lodash-es/get.js'
+import size from 'lodash-es/size.js'
+import groupBy from 'lodash-es/groupBy.js'
+import each from 'lodash-es/each.js'
+import mapValues from 'lodash-es/mapValues.js'
+import merge from 'lodash-es/merge.js'
+import genPm from 'wsemi/src/genPm.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
+import fsTreeFolder from 'wsemi/src/fsTreeFolder.mjs'
+import fsBuildReadStreamText from 'wsemi/src/fsBuildReadStreamText.mjs'
+import filterVpfsByWindow from './filterVpfsByWindow.mjs'
+
+
+//staEvent（通用事件頻率統計，骨架移植自 w-web-sso server/staLogs/staIp.mjs，但「不過濾特定 event」、
+//內層改依 `event` 欄位分組）：掃 fdLog 下所有 NDJSON log 檔，依時間 bucket（hr/day）+ 各 event 名聚合次數。
+//輸出供前端統計圖：可呈現「全部（count）」或「各 event 各自」之時段發生頻率。
+//
+//回傳格式（時間遞增、無資料時段補 0）：
+//  [
+//    { time: '2026-06-22T10', data: { count: 6, 'verifyConn': 3, 'kpfun-getApisList': 2, 'kpfun-saveApi': 1 } },
+//    { time: '2026-06-22T11', data: { count: 0 } },
+//    ...
+//  ]
+//
+//參數：
+//  timeLength   往回統計天數（預設 7）
+//  timeInterval 時間粒度 'hr'（每小時，預設）/ 'day'（每日）
+//  opt.fdLog    log 資料夾（預設 './logs'，須與 srLog 寫入之 logFd 一致；e2e 可指向合成 log 達 hermetic）
+async function staEvent(timeLength = 7, timeInterval = 'hr', opt = {}) {
+
+    //fdLog
+    let fdLog = get(opt, 'fdLog')
+    if (!isestr(fdLog)) {
+        fdLog = './logs'
+    }
+
+    //fmt
+    let fmt = timeInterval === 'day' ? 'YYYY-MM-DD' : 'YYYY-MM-DDTHH'
+
+    //unit
+    let unit = timeInterval === 'hr' ? 'hour' : 'day'
+
+    //kpTime，產生完整的時間區間（無資料時段亦補 { count: 0 }，圖表 x 軸不留空洞）
+    let now = ot()
+    let tStart = now.subtract(timeLength, 'day')
+    let tCurr = tStart.startOf(unit)
+    let tEnd = now.startOf(unit)
+    let kpTime = {}
+    while (!tCurr.isAfter(tEnd)) {
+        kpTime[tCurr.format(fmt)] = { data: { count: 0 } }
+        tCurr = tCurr.add(1, unit)
+    }
+
+    //vpfs
+    let vpfs = fsTreeFolder(fdLog)
+    vpfs = filterVpfsByWindow(vpfs, tStart, fmt) //開檔前剔除窗外檔, 見該模組註解
+
+    //logs（逐檔逐行 stream parse，挑出 tStart 之後、且帶 event 字串者）
+    let logs = []
+    for (let vpf of vpfs) {
+
+        //fp
+        let fp = vpf.path
+
+        //ev
+        let ev = fsBuildReadStreamText(fp)
+
+        //line
+        ev.on('line', (line) => {
+            let v = null
+            try {
+                v = JSON.parse(line)
+                let t = ot(v.time)
+                let timeFmt = t.format(fmt)
+                let b1 = t.isAfter(tStart)
+                let b2 = isestr(v.event) //通用：任何帶 event 字串之 log 皆納入（非鎖定單一 event）
+                let b = b1 && b2
+                if (b) {
+                    logs.push({
+                        timeFmt,
+                        ...v,
+                    })
+                }
+            }
+            catch (err) {} //略過非 JSON / 壞行
+        })
+
+        //await close
+        let pm = genPm()
+        ev.on('close', () => {
+            pm.resolve()
+        })
+        await pm
+
+    }
+
+    //gs，依時間 bucket 分組
+    let gs = groupBy(logs, 'timeFmt')
+
+    //gsLog，各 bucket 內依 event 名計數 + 總數 count
+    let gsLog = mapValues(gs, vs => {
+        let count = size(vs)
+        let gev = groupBy(vs, 'event')
+        let kp = {}
+        each(gev, (vvs, event) => {
+            kp[event] = size(vvs)
+        })
+        return {
+            data: {
+                count,
+                ...kp,
+            }
+        }
+    })
+
+    //merge（補零時段 + 實際資料）
+    let mr = merge({}, kpTime, gsLog)
+
+    //rs（時間遞增排序輸出）
+    let rs = Object.keys(mr)
+        .sort()
+        .map(time => ({
+            time,
+            ...mr[time]
+        }))
+
+    return rs
+}
+
+export default staEvent

package/server/staLogs/test_staEvent.mjs

@@ -0,0 +1,198 @@
+//test_staEvent：staEvent 通用事件頻率統計之單元測試。
+//
+//與 w-web-sso 之 test_staIp.mjs（純 console.log 人工核對）不同，本檔走「合成 log + 真 assert」（對齊全域 §6.2：
+//測試是規格的翻譯，非現狀指紋）：自建確定性 NDJSON log → 呼叫 staEvent → 斷言聚合結果 → 清理。
+//
+//執行：node server/staLogs/test_staEvent.mjs（全綠印 PASS、process exit 0；任一斷言失敗 throw、exit 1）。
+//
+import assert from 'assert'
+import fs from 'fs'
+import path from 'path'
+import ot from 'dayjs'
+import staEvent from './staEvent.mjs'
+import filterVpfsByWindow from './filterVpfsByWindow.mjs'
+
+
+//tmp log 資料夾（落在主 cwd ./tmp/，集中可一鍵清；不污染真實 ./logs）
+let fdLog = './tmp/_logs-test-staEvent'
+
+//以「當前小時正中（:30）」為錨點，避免測試剛好跨小時邊界導致 bucket 飄移
+let anchor = ot().startOf('hour')
+let tNow = anchor.add(30, 'minute')         //本小時 bucket
+let tPrev = anchor.subtract(30, 'minute')   //前一小時 bucket
+let tOld = anchor.subtract(30, 'day')       //30 天前（超出 timeLength=7，應被排除）
+
+let fmtHr = 'YYYY-MM-DDTHH'
+let keyNow = tNow.format(fmtHr)
+let keyPrev = tPrev.format(fmtHr)
+
+
+//一筆 log（NDJSON 一行）
+function logLine(t, event, extra = {}) {
+    let o = { level: 30, time: t.valueOf(), pid: 1, hostname: 'test', event, ...extra }
+    return JSON.stringify(o)
+}
+
+
+function writeSyntheticLogs() {
+    fs.rmSync(fdLog, { recursive: true, force: true })
+    fs.mkdirSync(fdLog, { recursive: true })
+
+    //本小時：verifyConn ×3、kpfun-getApisList ×2、kpfun-saveApi ×1 → count 6
+    let lines1 = [
+        logLine(tNow, 'verifyConn', { apiType: 'ws' }),
+        logLine(tNow, 'verifyConn', { apiType: 'ws' }),
+        logLine(tNow, 'verifyConn', { apiType: 'http' }),
+        logLine(tNow, 'kpfun-getApisList'),
+        logLine(tNow, 'kpfun-getApisList'),
+        logLine(tNow, 'kpfun-saveApi'),
+        //雜訊：無 event 欄位（應被忽略，不計入 count）
+        JSON.stringify({ level: 30, time: tNow.valueOf(), pid: 1, hostname: 'test', msg: 'no-event-here' }),
+        //雜訊：壞 JSON 行（應被忽略）
+        '{ this is not valid json',
+    ]
+    //前一小時：verifyConn ×1 → count 1
+    let lines2 = [
+        logLine(tPrev, 'verifyConn', { apiType: 'ws' }),
+    ]
+    //30 天前：1 筆（超出 timeLength=7 天，應被排除）
+    let lines3 = [
+        logLine(tOld, 'verifyConn', { apiType: 'ws' }),
+    ]
+
+    //分檔寫入（模擬輪檔多檔；staEvent 會掃整個資料夾）
+    fs.writeFileSync(path.join(fdLog, `${keyNow}.log`), lines1.join('\n') + '\n', 'utf8')
+    fs.writeFileSync(path.join(fdLog, `${keyPrev}.log`), lines2.join('\n') + '\n', 'utf8')
+    fs.writeFileSync(path.join(fdLog, `old.log`), lines3.join('\n') + '\n', 'utf8')
+}
+
+
+function findBucket(rs, time) {
+    return rs.find((v) => v.time === time)
+}
+
+
+//testFilterVpfsByWindowDirect：直測 filterVpfsByWindow「粒度自適應」防線（filterVpfsByWindow.mjs:22），
+//以自造 vpfs 物件陣列覆蓋 P-2 要求之三個分支，不經 staEvent／fsTreeFolder。
+function testFilterVpfsByWindowDirect() {
+
+    //tStart 固定為 2026-07-08 21:00，keyStart（fmt='YYYY-MM-DDTHH'）= '2026-07-08T21'
+    let tStart = ot('2026-07-08T21:00:00')
+    let fmtHr2 = 'YYYY-MM-DDTHH'
+
+    //①day 粒度檔名（10 字元）× fmt='YYYY-MM-DDTHH'，且 tStart 落在該日內 → 應保留。
+    //對應規格：filterVpfsByWindow.mjs:11-14 註解——不 slice 則 '2026-07-08' < '2026-07-08T21'（同日
+    //字典序比較，短字串為前綴恆較小）誤判窗外漏讀整天；filterVpfsByWindow.mjs:22 之
+    //`bn >= keyStart.slice(0, bn.length)` 為此案例之防線（slice 後同為 '2026-07-08'，相等即保留）。
+    let vpfDaySameDate = { path: '/x/2026-07-08.log', name: '2026-07-08.log', isFolder: false, level: 1 }
+    let rs1 = filterVpfsByWindow([vpfDaySameDate], tStart, fmtHr2)
+    assert.strictEqual(rs1.length, 1, 'day 粒度同日檔名（10 字元）於 hr fmt（13 字元）下應被保留')
+
+    //②明確窗外之 hr 檔名（早於 tStart 所在小時）→ 應剔除。
+    //對應規格：filterVpfsByWindow.mjs:22 主邏輯 `bn >= keyStart.slice(0, bn.length)`——
+    //bn 與 keyStart 同為 hr 粒度（13 字元）時 slice 為 no-op，純字串比較即可判窗外。
+    let vpfHrBefore = { path: '/x/2026-07-08T10.log', name: '2026-07-08T10.log', isFolder: false, level: 1 }
+    let rs2 = filterVpfsByWindow([vpfHrBefore], tStart, fmtHr2)
+    assert.strictEqual(rs2.length, 0, '明確窗外（早於 tStart 小時）之 hr 檔名應被剔除')
+
+    //③非 ISO 前綴檔名 → fail-open 保留。
+    //對應規格：filterVpfsByWindow.mjs:9,19-20 註解——「fail-open: 檔名不符 ISO 前綴者一律保留
+    //（寧可多讀, 不可漏讀）」。
+    let vpfNonIso = { path: '/x/current.log', name: 'current.log', isFolder: false, level: 1 }
+    let rs3 = filterVpfsByWindow([vpfNonIso], tStart, fmtHr2)
+    assert.strictEqual(rs3.length, 1, '非 ISO 前綴檔名應 fail-open 保留')
+
+    console.log('=== testFilterVpfsByWindowDirect PASS ===')
+}
+
+
+//testGranularityAdaptiveIntegration：整合路徑驗證——srLog 之 logInterval（決定檔名粒度）與 staLogs 之
+//timeInterval（決定 fmt）不同調時（day 粒度檔名 × hr 粒度 fmt），窗內事件仍須被 staEvent 讀到。
+//對應規格：filterVpfsByWindow.mjs:11-14 註解之情境重現於整合路徑（經 fsTreeFolder + fsBuildReadStreamText
+//實際開檔讀行），證明 filterVpfsByWindow.mjs:22 之 slice 防線在 staEvent.mjs:57 呼叫處確實生效，
+//而非僅單元測試層級成立。
+async function testGranularityAdaptiveIntegration() {
+    let fdLog2 = './tmp/_logs-test-staEvent-granularity'
+    fs.rmSync(fdLog2, { recursive: true, force: true })
+    fs.mkdirSync(fdLog2, { recursive: true })
+
+    //tRef 近似 staEvent 內部之 tStart（timeLength=0 → tStart ≈ now）；day 粒度檔名（10 字元）＝ tRef 當日
+    let tRef = ot()
+    let dayFileName = `${tRef.format('YYYY-MM-DD')}.log`
+    let tEvent = tRef.add(5, 'second') //晚於 tStart，使 staEvent.mjs:76 之 per-line `t.isAfter(tStart)` 成立
+    let lines = [logLine(tEvent, 'granularityProbe')]
+    fs.writeFileSync(path.join(fdLog2, dayFileName), lines.join('\n') + '\n', 'utf8')
+
+    let rsG = await staEvent(0, 'hr', { fdLog: fdLog2 })
+    let totalG = rsG.reduce((acc, v) => acc + v.data.count, 0)
+    assert.strictEqual(totalG, 1, 'day 粒度檔名於 hr timeInterval 下，窗內事件應被 staEvent 計入（不被誤判窗外漏讀）')
+
+    fs.rmSync(fdLog2, { recursive: true, force: true })
+
+    console.log('=== testGranularityAdaptiveIntegration PASS ===')
+}
+
+
+async function main() {
+
+    writeSyntheticLogs()
+
+    //=== 'hr' 粒度 ===
+    let rs = await staEvent(7, 'hr', { fdLog })
+
+    //本小時 bucket：精確比對各 event 與總數
+    let bNow = findBucket(rs, keyNow)
+    assert.ok(bNow, `應有本小時 bucket ${keyNow}`)
+    assert.strictEqual(bNow.data.count, 6, '本小時總次數應為 6')
+    assert.strictEqual(bNow.data['verifyConn'], 3, '本小時 verifyConn 應為 3')
+    assert.strictEqual(bNow.data['kpfun-getApisList'], 2, '本小時 kpfun-getApisList 應為 2')
+    assert.strictEqual(bNow.data['kpfun-saveApi'], 1, '本小時 kpfun-saveApi 應為 1')
+
+    //前一小時 bucket
+    let bPrev = findBucket(rs, keyPrev)
+    assert.ok(bPrev, `應有前一小時 bucket ${keyPrev}`)
+    assert.strictEqual(bPrev.data.count, 1, '前一小時總次數應為 1')
+    assert.strictEqual(bPrev.data['verifyConn'], 1, '前一小時 verifyConn 應為 1')
+
+    //無資料時段應補 0（kpTime 補零生效）：取一個既非 now 亦非 prev 的 bucket
+    let bEmpty = rs.find((v) => v.time !== keyNow && v.time !== keyPrev)
+    assert.ok(bEmpty, '應有其他時段 bucket')
+    assert.strictEqual(bEmpty.data.count, 0, '無資料時段 count 應為 0')
+
+    //雜訊與過期排除驗證：全部 bucket count 總和 = 7（本小時6 + 前一小時1；無 event/壞行/30天前 皆排除）
+    let total = rs.reduce((acc, v) => acc + v.data.count, 0)
+    assert.strictEqual(total, 7, '有效事件總和應為 7（無 event/壞行/超期 均不計）')
+
+    //時間遞增排序
+    let times = rs.map((v) => v.time)
+    let sorted = [...times].sort()
+    assert.deepStrictEqual(times, sorted, '結果應依時間遞增排序')
+
+    //=== 'day' 粒度 ===（同日事件聚到同一天）
+    let rsDay = await staEvent(7, 'day', { fdLog })
+    let totalDay = rsDay.reduce((acc, v) => acc + v.data.count, 0)
+    assert.strictEqual(totalDay, 7, 'day 粒度有效事件總和亦應為 7')
+    let keyDayNow = tNow.format('YYYY-MM-DD')
+    let bDay = findBucket(rsDay, keyDayNow)
+    assert.ok(bDay, `應有本日 bucket ${keyDayNow}`)
+    //本日至少含本小時 6 筆（前一小時若跨日則在另一桶，故用 >=）
+    assert.ok(bDay.data['verifyConn'] >= 3, '本日 verifyConn 應 >= 3')
+
+    //清理
+    fs.rmSync(fdLog, { recursive: true, force: true })
+
+    //=== 粒度自適應防線（P-2）===
+    testFilterVpfsByWindowDirect()
+    await testGranularityAdaptiveIntegration()
+
+    console.log('=== test_staEvent PASS ===')
+    console.log(`hr buckets: ${rs.length}, 本小時=${JSON.stringify(bNow.data)}, 前一小時=${JSON.stringify(bPrev.data)}`)
+}
+
+
+main().catch((err) => {
+    console.error('=== test_staEvent FAIL ===')
+    console.error(err)
+    try { fs.rmSync(fdLog, { recursive: true, force: true }) } catch (e) {}
+    process.exit(1)
+})

package/settings.json

@@ -0,0 +1,18 @@
+{
+    // 應用層設定（JSON5 格式：可加註解）。
+    // db 連線等系統參數仍在 g.getSettings.mjs（供 g.mOrm 共用）；本檔放可調整之 app 設定。
+    // srv.mjs 以 `node srv.mjs <pathSettings>` 載入本檔（預設 ./settings.json），供日後更細緻功能擴充。
+
+    // 是否顯示右上語系切換選單：'y' 顯示 / 'n' 隱藏
+    showLanguage: 'y',
+
+    // 初始語系（server 注入 index.html → 首次載入即此語系）：'eng' / 'cht'
+    language: 'eng',
+
+    // 伺服器通訊 port
+    serverPort: 11005,
+    
+    logFd: './logs',
+    logInterval: 'hr',
+
+}

package/src/App.vue

@@ -10,10 +10,9 @@
             <Layout v-if="ready"></Layout>
         </transition>
 
-<!--
         <LoadingWinBar></LoadingWinBar>
         <CheckYesNo></CheckYesNo>
-        <CheckYes></CheckYes> -->
+        <CheckYes></CheckYes>
 
     </div>
 </template>
@@ -27,12 +26,18 @@ import isDev from 'wsemi/src/isDev.mjs'
 import wui from 'w-ui-loginout/src/WUiLoginout.mjs'
 import Layout from './components/Layout.vue'
 import LayoutState from './components/LayoutState.vue'
+import LoadingWinBar from './components/Common/LoadingWinBar.vue'
+import CheckYesNo from './components/Common/CheckYesNo.vue'
+import CheckYes from './components/Common/CheckYes.vue'
 
 
 export default {
     components: {
         Layout,
         LayoutState,
+        LoadingWinBar,
+        CheckYesNo,
+        CheckYes,
     },
     data: function() {
         return {
@@ -47,10 +52,9 @@ export default {
         //setVo, 更換ui內vo, 才能使用廣播技術, 更換語系才能用廣播通知全部組件forceUpdate
         vo.$ui.setVo(vo)
 
-        //setLang
-        let lang = get(window, '___pmwperm___.language', '')
-        vo.$ui.setLang(lang, 'app init') //初始化先讀取html內語系設定進行變更
-        // console.log('lang', lang)
+        //setLang：交由 getLang 解析（優先序 URL ?lang= > window ___pmwperm___.language > store），
+        //支援「以 ?lang= 指定語系載入初始畫面」（對齊 w-web-sso），無 URL 時行為同舊（讀 html 注入語系）。
+        vo.$ui.setLang(null, 'app init')
 
         function loginSuccess(data) {
             console.log('login success', cloneDeep(data.user))
@@ -131,7 +135,7 @@ export default {
 <style>
 html,
 body {
-    font-family: '微軟正黑體', 'Microsoft JhengHei', 'MicrosoftJhengHeiRegular', 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
     overflow-y: hidden;
 }
 

package/src/assets/scalar-ui.css

@@ -0,0 +1,113 @@
+/* ============================================================
+   Scalar 風格 UI 設計系統 v2（light + Scalar 配色，結構重設計）
+   由 src/main.js import；全域非 scoped。對照 zMockup-scalar-v2.html。
+   ============================================================ */
+:root{
+  --bg-1:#ffffff; --bg-2:#f7f8fa; --bg-3:#eceef1; --bg-accent:rgba(0,153,255,0.08);
+  --code-bg:#0d1117; --code-fg:#c9d1d9;
+  --c-1:#1b1b1b; --c-2:#6b7280; --c-3:#9aa1ac;
+  --accent:#0099ff; --accent-hover:#0077cc;
+  --border:#e6e8ec; --border-soft:#eef0f3;
+  /* method（Scalar 配色：GET藍/POST綠/PUT橙/DEL紅/PATCH黃） */
+  --m-get:#0082d0;  --m-get-bg:rgba(0,130,208,0.10);
+  --m-post:#069061; --m-post-bg:rgba(6,144,97,0.11);
+  --m-put:#c2670a;  --m-put-bg:rgba(255,88,0,0.10);
+  --m-del:#e01b54;  --m-del-bg:rgba(239,0,6,0.09);
+  --m-patch:#b7860b;--m-patch-bg:rgba(237,190,32,0.16);
+  --m-other:#6b7280;--m-other-bg:rgba(107,114,128,0.10);
+  /* status */
+  --s-2xx:#069061; --s-2xx-bg:rgba(6,144,97,0.12);
+  --s-3xx:#0082d0; --s-3xx-bg:rgba(0,130,208,0.10);
+  --s-4xx:#c2670a; --s-4xx-bg:rgba(255,88,0,0.11);
+  --s-5xx:#e01b54; --s-5xx-bg:rgba(239,0,6,0.10);
+  --danger:#e01b54; --danger-bg:#fff5f7; --success:#069061;
+  --ok-fg:#069061; --ok-bg:rgba(6,144,97,0.12);
+  --font:"Microsoft JhengHei","微軟正黑體",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
+  --font-code:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
+  --fs-h1:27px; --fs-h2:18px; --fs-h3:15px; --fs-body:14px; --fs-sm:13px; --fs-xs:11.5px;
+  --fw-medium:500; --fw-bold:600;
+  --radius:8px; --radius-sm:5px; --radius-lg:11px;
+  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
+  --focus:0 0 0 3px rgba(0,153,255,0.18);
+  --focus-danger:0 0 0 3px rgba(239,0,6,0.15);
+}
+
+/* ---------- method badge ---------- */
+.w-mb{font-family:var(--font-code);font-weight:var(--fw-bold);text-transform:uppercase;font-size:10px;
+  letter-spacing:.03em;padding:2px 6px;min-width:40px;text-align:center;border-radius:var(--radius-sm);
+  border:none;display:inline-block;flex:0 0 auto;line-height:1.5}
+.w-mb.get{color:var(--m-get);background:var(--m-get-bg)}
+.w-mb.post{color:var(--m-post);background:var(--m-post-bg)}
+.w-mb.put{color:var(--m-put);background:var(--m-put-bg)}
+.w-mb.del{color:var(--m-del);background:var(--m-del-bg)}
+.w-mb.patch{color:var(--m-patch);background:var(--m-patch-bg)}
+.w-mb.other{color:var(--m-other);background:var(--m-other-bg)}
+
+/* ---------- 共用輸入 / 按鈕（edit/test 用） ---------- */
+.w-input,.w-textarea,.w-select{width:100%;box-sizing:border-box;padding:8px 12px;font-size:var(--fs-body);
+  color:var(--c-1);background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);
+  outline:none;transition:border-color .15s,box-shadow .15s;font-family:var(--font)}
+.w-textarea{font-family:var(--font-code);font-size:var(--fs-sm);resize:vertical;min-height:72px;line-height:1.55}
+.w-input:focus,.w-textarea:focus,.w-select:focus{border-color:var(--accent);box-shadow:var(--focus)}
+.w-input.is-error,.w-textarea.is-error{border-color:var(--danger);box-shadow:var(--focus-danger)}
+.w-btn-primary{padding:8px 17px;font-size:var(--fs-body);font-weight:var(--fw-medium);border-radius:var(--radius);
+  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:.15s}
+.w-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
+.w-btn-danger{padding:8px 17px;font-size:var(--fs-body);border-radius:var(--radius);border:1px solid var(--danger);
+  background:transparent;color:var(--danger);cursor:pointer;transition:.15s}
+.w-btn-danger:hover{background:var(--danger-bg)}
+.w-btn-ghost{padding:7px 14px;font-size:var(--fs-sm);border:1px solid var(--border);background:transparent;
+  color:var(--c-2);border-radius:var(--radius);cursor:pointer;transition:.15s}
+.w-btn-ghost:hover{background:var(--bg-3)}
+
+/* ---------- 雜項 ---------- */
+.w-mono{font-family:var(--font-code)}
+.w-muted{color:var(--c-2)}
+.w-tnum{font-variant-numeric:tabular-nums}
+
+/* ---------- segmented 分頁（Docs/Edit/Test） ---------- */
+.w-seg{display:inline-flex;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:3px}
+.w-seg-btn{border:none;background:transparent;color:var(--c-2);font-size:13px;padding:5px 17px;border-radius:6px;
+  cursor:pointer;font-weight:var(--fw-medium);transition:.15s}
+.w-seg-btn:hover{color:var(--c-1)}
+.w-seg-btn.on{background:var(--bg-1);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.07)}
+
+/* ---------- DOCS：operation header + pills ---------- */
+.op-title{font-size:var(--fs-h1);font-weight:var(--fw-bold);letter-spacing:-.01em;margin:6px 0 10px;color:var(--c-1)}
+.op-path{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;background:var(--bg-2);
+  border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-code);font-size:13px;color:var(--c-1);
+  max-width:100%;overflow:auto}
+.op-desc{color:var(--c-2);margin:14px 0 0;max-width:720px;font-size:14.5px;line-height:1.7}
+.pills{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 4px}
+.pill{font-size:12px;color:var(--c-2);background:var(--bg-2);border:1px solid var(--border);border-radius:20px;padding:3px 11px}
+.pill b{color:var(--c-1);font-weight:var(--fw-bold)}
+.pill.ok{color:var(--ok-fg);background:var(--ok-bg);border-color:transparent;font-weight:var(--fw-bold)}
+.pill .kw-chip{display:inline-block;vertical-align:middle;font-size:11px;font-weight:var(--fw-bold);color:#0082d0;background:rgba(0,130,208,0.12);border-radius:9px;padding:1px 7px;margin-left:5px}
+
+/* ---------- DOCS：兩欄 + 區塊 ---------- */
+.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;margin-top:28px;align-items:start}
+@media (max-width:1100px){ .split{grid-template-columns:1fr} }
+.dsec{margin-bottom:28px}
+.dsec-h{font-size:13px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--c-3);
+  padding-bottom:9px;border-bottom:1px solid var(--border-soft);margin-bottom:12px}
+
+/* 左欄 Markdown 由 MdPanel.vue 自身 scoped 樣式處理（Scalar 乾淨表格/標題） */
+
+/* ---------- 右欄 code rail（Scalar 招牌） ---------- */
+.rail{position:sticky;top:14px;display:flex;flex-direction:column;gap:16px}
+.card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}
+.card-h{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--bg-2);border-bottom:1px solid var(--border);font-size:12px;color:var(--c-2)}
+.card-h .lab{font-weight:var(--fw-bold);color:var(--c-1)}
+.card-h .st{margin-left:auto;font-family:var(--font-code);font-size:11.5px;font-weight:var(--fw-bold);
+  color:var(--ok-fg);background:var(--ok-bg);padding:1px 8px;border-radius:var(--radius-sm)}
+.code{background:var(--code-bg);color:var(--code-fg);font-family:var(--font-code);font-size:12.5px;line-height:1.7;
+  padding:14px 16px;white-space:pre;overflow:auto;margin:0}
+.code .k{color:#79c0ff}.code .s{color:#a5d6ff}.code .n{color:#f0883e}.code .pn{color:#8b949e}.code .b{color:#ff7b72}
+
+/* ---------- TEST：回應狀態徽章 ---------- */
+.w-status{font-family:var(--font-code);font-weight:var(--fw-bold);font-size:13px;padding:2px 11px;
+  border-radius:var(--radius-sm);display:inline-block}
+.w-status.s2{color:var(--s-2xx);background:var(--s-2xx-bg)}
+.w-status.s3{color:var(--s-3xx);background:var(--s-3xx-bg)}
+.w-status.s4{color:var(--s-4xx);background:var(--s-4xx-bg)}
+.w-status.s5{color:var(--s-5xx);background:var(--s-5xx-bg)}

package/src/components/Common/CheckYes.vue

@@ -0,0 +1,102 @@
+<template>
+    <WConfirm
+        :show.sync="bShow"
+        :title="$t('systemMessage')"
+        :content="content"
+        :contentIcon="contentIcon"
+        :contentIconColor="contentIconColor"
+        :_contentColor="'white'"
+        :_contentIconColor="'white'"
+        :_contentBackgroundColor="'orange lighten-5'"
+        :headerBackgroundColor="'grey lighten-3'"
+        :hasNoBtn="false"
+        :yesBtnText="$t('ok')"
+        @click-yes="clickUnit()"
+    ></WConfirm>
+</template>
+
+<script>
+import Vue from 'vue'
+import { mdiAlert, mdiCheckCircle } from '@mdi/js'
+import genPm from 'wsemi/src/genPm.mjs'
+import WConfirm from 'w-component-vue/src/components/WConfirm.vue'
+
+export default {
+    components: {
+        WConfirm,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+
+            bShow: false,
+            pm: null,
+
+            content: '',
+
+            //content icon（依 type 切換：success=綠勾，其餘=驚嘆號）
+            contentIcon: mdiAlert,
+            contentIconColor: '#D81B60',
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //set
+        Vue.prototype.$dg.showCheckYes = vo.show
+
+    },
+    computed: {
+    },
+    methods: {
+
+        show: function (content, opt = {}) {
+            //console.log('methods show', content)
+
+            let vo = this
+
+            //pm
+            vo.pm = genPm()
+
+            //save
+            vo.content = content
+
+            //content icon：type='success' 顯示綠勾，其餘維持驚嘆號
+            if (opt && opt.type === 'success') {
+                vo.contentIcon = mdiCheckCircle
+                vo.contentIconColor = '#2E7D32'
+            }
+            else {
+                vo.contentIcon = mdiAlert
+                vo.contentIconColor = '#D81B60'
+            }
+
+            //show
+            vo.bShow = true
+
+            return vo.pm
+        },
+
+        clickUnit: function() {
+            //console.log('methods clickUnit')
+
+            let vo = this
+
+            //resolve
+            vo.pm.resolve()
+
+            //hide
+            vo.bShow = false
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>