w-web-perm 1.1.4 → 1.1.5

package/server/maskLog.mjs

@@ -0,0 +1,104 @@
+import isestr from 'wsemi/src/isestr.mjs'
+import isarr from 'wsemi/src/isarr.mjs'
+
+
+//maskLog: 權杖與網址寫入 console / srLog 前之遮罩(M 契約, spec/設計要點與取捨.md ADR-023)
+//四 repo 一致(w-web-sso server/srLog.mjs 之 maskToken 與 src/maskUrl.mjs、w-web-api / w-web-task 之 maskTok), 以同一組測資守護(test/unit-maskLog.test.mjs)
+//why: 原 console 站點原樣印出 token / req.query / authorization(Hapi 對重複之 query 參數給陣列, 型別檢查失敗之分支正是印出處), verifyConn 之 srLog 原樣記 referer
+
+
+//safe: 露出字元之控制字元換成 '?', 避免請求端以 CR/LF 偽造 log 行
+function safe(s) {
+    return Array.from(s, (c) => {
+        let x = c.charCodeAt(0)
+        return (x < 32 || x === 127) ? '?' : c
+    }).join('')
+}
+
+
+/**
+ * 權杖遮罩
+ * - 空值(undefined / null / '')回 ''
+ * - 陣列逐元素遮罩
+ * - 字串(長度 n)露出前後各 k=min(4, floor(n/8)) 字: k=0 只回 '(len=n)', 否則 '前k...後k(len=n)'; 36 字元之 session token 為前 4 後 4(與 w-web-sso 格式相同)
+ * - 其他型別只回 '(typeof)', 絕不輸出原值
+ *
+ * @param {*} token 輸入權杖
+ * @returns {String|Array} 回傳遮罩後字串, 輸入陣列時回傳陣列
+ */
+function maskTok(token) {
+    if (isarr(token)) {
+        return token.map(maskTok)
+    }
+    if (token === undefined || token === null || token === '') {
+        return ''
+    }
+    if (!isestr(token)) {
+        return `(${typeof token})`
+    }
+    let n = token.length
+    let k = Math.min(4, Math.floor(n / 8))
+    if (k === 0) {
+        return `(len=${n})`
+    }
+    return `${safe(token.slice(0, k))}...${safe(token.slice(-k))}(len=${n})`
+}
+
+
+/**
+ * 查詢參數遮罩: 淺拷貝, 鍵名小寫為 token 者以 maskTok 處理, 其餘原樣(供印出 req.query)
+ * 非物件輸入依 maskTok 處理
+ *
+ * @param {*} q 輸入查詢參數物件(Hapi 之 req.query 為 null-prototype 物件)
+ * @returns {Object|String|Array} 回傳遮罩後之淺拷貝
+ */
+function maskQuery(q) {
+    if (q === null || typeof q !== 'object' || isarr(q)) {
+        return maskTok(q)
+    }
+    let r = {}
+    for (let k of Object.keys(q)) {
+        r[k] = (k.toLowerCase() === 'token') ? maskTok(q[k]) : q[k]
+    }
+    return r
+}
+
+
+/**
+ * 網址遮罩: http(s) 只留 origin + pathname, 捨棄 query / fragment / userinfo(其內常含權杖, 如 ?token=)
+ * - 陣列逐元素處理; 空值回 ''; 其他非字串只回 '(typeof)'
+ * - 非 http(s) 之網址(如 data:、javascript:)路徑即全部內容, 只回 protocol(同 w-web-sso src/maskUrl.mjs)
+ * - 無法解析回 '(invalid-url)'
+ *
+ * @param {*} u 輸入網址
+ * @returns {String|Array} 回傳可寫入 log 之字串, 輸入陣列時回傳陣列
+ */
+function maskUrl(u) {
+    if (isarr(u)) {
+        return u.map(maskUrl)
+    }
+    if (u === undefined || u === null || u === '') {
+        return ''
+    }
+    if (!isestr(u)) {
+        return `(${typeof u})`
+    }
+    let x = null
+    try {
+        x = new URL(u)
+    }
+    catch (err) {
+        return '(invalid-url)'
+    }
+    if (x.protocol !== 'http:' && x.protocol !== 'https:') {
+        return x.protocol
+    }
+    return `${x.origin}${x.pathname}`
+}
+
+
+export {
+    maskTok,
+    maskQuery,
+    maskUrl
+}

package/server/procStaInfor.mjs

@@ -6,13 +6,23 @@ import staEvent from './staLogs/staEvent.callWorker.mjs'
 import staEventTable from './staLogs/staEventTable.callWorker.mjs'
 
 
+//mock 之事件名單：
+//  true（預設 5 種）：既有 e2e 標準圖所用；
+//  'many'（13 種）：本系統實際會記錄之事件名（取自本機 log），供圖例列數跨門檻之 e2e（1440 寬時一般式 2 列，勾全部加總並切中文為 3 列）
+let MOCK_EVENTS = ['verifyConn', 'updateTargets-success', 'checkUser-error', 'api/getPerm-success', 'getWebInfor-success']
+let MOCK_EVENTS_MANY = ['api/getPermUserInfor-success', 'api/getUserByToken-success', 'getStaEvent-success', 'getStaEventTable-success', 'getTokenUser-error', 'getWebInfor-success', 'updateGrups-success', 'updatePemis-success', 'updateTabItems-pickKeysOnly', 'updateTargets-success', 'updateUsers-success', 'verifyConn', 'verifyConn-error']
+function getMockEvents(mock) {
+    return mock === 'many' ? MOCK_EVENTS_MANY : MOCK_EVENTS
+}
+
+
 //mock 確定性資料集（供 e2e 統計圖穩定用）：固定起點時間 + 固定 sin 計數，不依 now / log → 每次完全相同。
-//觸發：opt.mock=true（由 settings.json staEventMock 經 srv.mjs → WWebPerm 傳入）。非 mock 時走真實 staEvent。
-function genMockStaEvent(timeInterval = 'hr') {
+//觸發：opt.mock 為 true 或 'many'（由 settings.json staEventMock 經 srv.mjs → WWebPerm 傳入）。非 mock 時走真實 staEvent。
+function genMockStaEvent(timeInterval = 'hr', mock = true) {
     let fmt = timeInterval === 'day' ? 'YYYY-MM-DD' : 'YYYY-MM-DDTHH'
     let unit = timeInterval === 'hr' ? 'hour' : 'day'
     let nBuckets = timeInterval === 'hr' ? 48 : 7
-    let events = ['verifyConn', 'updateTargets-success', 'checkUser-error', 'api/getPerm-success', 'getWebInfor-success']
+    let events = getMockEvents(mock)
     let base = ot('2025-01-01T00:00:00') //固定起點，不依 now
     let rs = []
     for (let i = 0; i < nBuckets; i++) {
@@ -30,15 +40,23 @@ function genMockStaEvent(timeInterval = 'hr') {
 
 
 //mock 確定性資料集（供 e2e 統計表穩定用）：固定窗計數，不依 now / log → 每次完全相同。
-//5 個 event 與 genMockStaEvent 同名單；各事件滿足 last1Day>last8Hour>last4Hour>last1Hour，且各事件 last1Day 互不相同（排序明確、上多下少）。
-function genMockStaEventTable() {
-    let rs = [
-        { event: 'verifyConn', last1Day: 240, last8Hour: 90, last4Hour: 50, last1Hour: 15 },
-        { event: 'updateTargets-success', last1Day: 180, last8Hour: 70, last4Hour: 38, last1Hour: 11 },
-        { event: 'checkUser-error', last1Day: 120, last8Hour: 45, last4Hour: 24, last1Hour: 7 },
-        { event: 'api/getPerm-success', last1Day: 90, last8Hour: 33, last4Hour: 18, last1Hour: 5 },
-        { event: 'getWebInfor-success', last1Day: 60, last8Hour: 22, last4Hour: 12, last1Hour: 3 },
-    ]
+//事件名單與 genMockStaEvent 相同；各事件滿足 last1Day>last8Hour>last4Hour>last1Hour，且各事件 last1Day 互不相同（排序明確、上多下少）。
+function genMockStaEventTable(mock = true) {
+    if (mock !== 'many') {
+        let rs = [
+            { event: 'verifyConn', last1Day: 240, last8Hour: 90, last4Hour: 50, last1Hour: 15 },
+            { event: 'updateTargets-success', last1Day: 180, last8Hour: 70, last4Hour: 38, last1Hour: 11 },
+            { event: 'checkUser-error', last1Day: 120, last8Hour: 45, last4Hour: 24, last1Hour: 7 },
+            { event: 'api/getPerm-success', last1Day: 90, last8Hour: 33, last4Hour: 18, last1Hour: 5 },
+            { event: 'getWebInfor-success', last1Day: 60, last8Hour: 22, last4Hour: 12, last1Hour: 3 },
+        ]
+        return rs
+    }
+    //'many': 依名單順序遞減, last1Day 自 400 起每事件少 20（互不相同）
+    let rs = MOCK_EVENTS_MANY.map((event, k) => {
+        let last1Day = 400 - k * 20
+        return { event, last1Day, last8Hour: Math.round(last1Day * 0.4), last4Hour: Math.round(last1Day * 0.2), last1Hour: Math.round(last1Day * 0.05) }
+    })
     return rs
 }
 
@@ -66,7 +84,7 @@ function proc(opt = {}) {
 
         //mock 模式回固定確定性資料集
         if (mock) {
-            return genMockStaEvent(timeInterval)
+            return genMockStaEvent(timeInterval, mock)
         }
 
         //staEvent
@@ -98,7 +116,7 @@ function proc(opt = {}) {
 
         //mock 模式回固定確定性資料集
         if (mock) {
-            return genMockStaEventTable()
+            return genMockStaEventTable(mock)
         }
 
         //staEventTable

package/server/wrapInjected.mjs

@@ -0,0 +1,91 @@
+import get from 'lodash-es/get.js'
+import isestr from 'wsemi/src/isestr.mjs'
+import isarr from 'wsemi/src/isarr.mjs'
+import isfun from 'wsemi/src/isfun.mjs'
+
+
+//wrapInjected: 部署方注入函數(getUserByToken / verifyClientUser / verifyAppUser)之包裝(W 契約, spec/設計要點與取捨.md ADR-023)
+//why: 注入函數拋錯或 reject 時原會被 await 原樣上拋, 其原文經 pm2resolve 回前端、經 verifyConn 之 msg 入 srLog、經 error 事件印出;
+//部署方常以 w-web-sso 對外 helper(≤1.1.4)包裝 getUserByToken, 其 reject 字串含已代入系統介接權杖與使用者權杖之完整網址(修正前探測實證)。
+//包裝後失敗視同否定結果(由呼叫端給 failValue), 走各呼叫點既有之查無 / 無權限分支回自家 key; 上游原文不回前端、不入 log。
+
+
+//keysUpstream: 上游失敗可照記之 key 白名單 = w-web-sso 對外 helper 之 K 契約 14 個 key(w-web-sso ADR-068)
+//與 sso 之同步點: sso 之 K 契約增減 key 時須同步本表(見 CLAUDE_rulebook.md「權杖不外洩」)
+let keysUpstream = [
+    'invalidUrl',
+    'invalidTokenSelf',
+    'invalidTokenTar',
+    'invalidUserIdTar',
+    'noTokenKeyValueInUrl',
+    'noTokenKeyUserIdInUrl',
+    'noTokenInUrl',
+    'cannotGetUserByUrl',
+    'cannotGetUsersByUrl',
+    'cannotGetUserDataByUrl',
+    'cannotGetUsersDataByUrl',
+    'noUserDataByUrl',
+    'noUsersDataByUrl',
+    'noUserDataAfterConvert',
+]
+
+
+//reName: Error.name 之名稱形狀(同 w-web-sso helper 診斷之 errName), 不符者不記(name 亦可被設為任意字串)
+let reName = /^[A-Za-z]{1,40}$/
+
+
+/**
+ * 描述上游失敗, 供寫入 log: 絕不含上游原文
+ * - reject 值(字串)或其 message 屬白名單 key → { upstream: key }
+ * - 其餘 → { upstreamType, upstreamName }: 型別(null / array / typeof)與名稱形狀之 Error.name(無則 '')
+ *
+ * @param {*} err 輸入注入函數拋出或 reject 之值
+ * @returns {Object} 回傳描述物件
+ */
+function describeUpstream(err) {
+    let key = isestr(err) ? err : get(err, 'message')
+    if (isestr(key) && keysUpstream.includes(key)) {
+        return { upstream: key }
+    }
+    let upstreamType = (err === null) ? 'null' : (isarr(err) ? 'array' : typeof err)
+    let name = get(err, 'name')
+    let upstreamName = (isestr(name) && reName.test(name)) ? name : ''
+    return { upstreamType, upstreamName }
+}
+
+
+/**
+ * 包裝注入函數: 回傳(同步或 Promise)原樣回傳; 同步拋錯或 reject 回 failValue, 並以 describeUpstream(err) 呼叫 onFail
+ * 包裝後一律回 Promise(呼叫端既有之 ispm 判斷照常)
+ *
+ * @param {Function} fn 輸入注入函數
+ * @param {Object} [opt={}] 輸入設定物件
+ * @param {*} [opt.failValue=null] 輸入失敗時之回傳值(getUserByToken 為 null 等同查無, verify* 為 false 等同無權限)
+ * @param {Function} [opt.onFail=null] 輸入失敗時之紀錄函數, 只收到 describeUpstream 之結果(收不到上游原文); 其自身拋錯不影響回傳
+ * @returns {Function} 回傳包裝後之函數
+ */
+function wrapInjected(fn, opt = {}) {
+    let failValue = get(opt, 'failValue', null)
+    let onFail = get(opt, 'onFail', null)
+    return async (...args) => {
+        try {
+            return await fn(...args) //await 於 try 內: 同步拋錯、reject 與 thenable 之 reject 皆攔截
+        }
+        catch (err) {
+            if (isfun(onFail)) {
+                try {
+                    onFail(describeUpstream(err))
+                }
+                catch (e) {} //紀錄失敗不改變「失敗＝否定結果」之語意
+            }
+            return failValue
+        }
+    }
+}
+
+
+export {
+    keysUpstream,
+    describeUpstream
+}
+export default wrapInjected

package/src/components/LayoutContentStaInfor.vue

@@ -80,9 +80,12 @@
 
                             </div>
 
+                            <!-- autoresize: 容器尺寸與圖不一致時 WEchartsVue(w-echarts-vue ≥1.0.15, 含圖剛建立之同一幀)先 resize 並 flush, 再呼叫 onResize(fitLegend) 重判圖例類型 -->
                             <WEchartsVue
+                                ref="chartEvent"
                                 style="width:100%; height:300px;"
                                 :options="optEvent"
+                                :autoresize="autoresizeEvent"
                                 v-if="optEvent"
                             ></WEchartsVue>
 
@@ -186,10 +189,16 @@ import debounce from 'wsemi/src/debounce.mjs'
 import isearr from 'wsemi/src/isearr.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import WEchartsVue from 'w-echarts-vue/src/components/WEchartsVue.vue'
+import iniEcharts from 'w-echarts-vue/src/js/iniEcharts.mjs'
 import { mdiChartBoxOutline, mdiTableLarge } from '@mdi/js/mdi.js'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
 import WIconLoading from 'w-component-vue/src/components/WIconLoading.vue'
 import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+import { GRID_TOP, genLegend, decideLegendType, createLegendMeasurer } from '../js/legendFit.mjs'
+
+
+//echarts, 與 WEchartsVue 同一份(iniEcharts 回傳同一命名空間), 供圖例離屏量測使用
+let echarts = iniEcharts()
 
 
 //時間分組下拉之結構寬度(px): 左右內距 8+8、左右邊框 1+1、展開圖標 18、圖標與文字間隙 2 (同 w-web-sso LayoutContentStaInfor / w-web-api LayoutContentStats 之 SEL_STRUCT_WIDTH)
@@ -235,6 +244,12 @@ export default {
 
             optEvent: null,
 
+            //事件圖例類型: 一般式放得下(不壓到最上方刻度)維持 plain, 否則 scroll(單列+翻頁); 由 fitLegend 依圖寬決定, genOpt 重建 option 時沿用. 不讀入模板, 改變不觸發重繪
+            legendType: 'plain',
+
+            //WEchartsVue 之 autoresize: 容器尺寸改變後先 chart.resize() 並 flush 再呼叫 onResize(見模板註解)
+            autoresizeEvent: { throttle: 100, onResize: this.fitLegend },
+
             eventTable: [],
 
         }
@@ -244,6 +259,9 @@ export default {
 
         let vo = this
 
+        //legendMeasurer, 圖例離屏量測器(非響應式屬性), 於 beforeDestroy 釋放
+        vo.legendMeasurer = createLegendMeasurer(echarts)
+
         //時間分組下拉觸發區字型: 字級 0.875rem(同原 text-sm)× 根字級, 字族/字重承襲本頁; 供 timeIntervalSelWidth 以 canvas 量最長選項文字實寬(同 sso)
         let cs = getComputedStyle(vo.$el)
         let rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
@@ -259,6 +277,18 @@ export default {
                 vo.errMsg = vo.$t('getDataError')
             })
 
+    },
+    beforeDestroy: function() {
+        // console.log('beforeDestroy')
+
+        let vo = this
+
+        //dispose, 釋放圖例離屏量測實例
+        if (vo.legendMeasurer) {
+            vo.legendMeasurer.dispose()
+            vo.legendMeasurer = null
+        }
+
     },
     computed: {
 
@@ -348,7 +378,7 @@ export default {
                 return colors[k % colors.length]
             }
 
-            //getName: count 系列顯示為「全部」, 其餘 event 名照原字串
+            //getName: count 系列顯示為「全部加總」(staTotal; eng 為 Total), 其餘 event 名照原字串
             let getName = (valueKey) => {
                 if (valueKey === 'count') {
                     return vo.$t('staTotal')
@@ -392,13 +422,11 @@ export default {
                 grid: {
                     left: '3%',
                     right: '4%',
+                    top: GRID_TOP, //明寫(同 echarts 6.1.0 預設 65): 圖例判定之上緣幾何以此為準, 見 legendFit.mjs
                     bottom: '3%',
                     containLabel: true
                 },
-                legend: {
-                    show: true,
-                    top: 0, //須明給: echarts 6 起 legend 預設由 top:0 改為 bottom, 不給會落到底部壓住 x 軸時間標籤
-                },
+                legend: genLegend(vo.legendType), //一般式或捲動式依圖寬決定(fitLegend); 設定之單一來源見 legendFit.mjs genLegend
                 xAxis: [
                     {
                         type: 'category',
@@ -483,6 +511,47 @@ export default {
             //optEvent
             vo.optEvent = vo.genOpt(vo.$t('staEventTitle'), vo.freqEvent, ksEvent)
 
+            //fitLegend: option 更新後判定圖例類型. nextTick 時 WEchartsVue 已於同一輪 flush 內 setOption;
+            //圖剛建立與容器改寬落在同一幀者, 由 WEchartsVue 偵測到容器與圖尺寸不一致而 resize 後經 onResize 再判
+            vo.$nextTick(() => {
+                vo.fitLegend()
+            })
+
+        },
+
+        fitLegend: function() {
+            //依圖寬決定事件圖例類型: 一般式圖例放得下(底緣 ≤ LEGEND_MAX_BOTTOM)維持 plain, 否則 scroll; 規則與量測見 src/js/legendFit.mjs
+            //呼叫時機: updateCharts 之 option 更新後, 以及 autoresizeEvent.onResize(視窗縮放、導覽區收合展開、捲軸出現等容器寬度改變後)
+
+            let vo = this
+
+            //chart
+            let cmp = vo.$refs.chartEvent
+            let chart = (cmp && cmp.getChart) ? cmp.getChart() : null
+            if (!chart || !vo.optEvent || !vo.legendMeasurer) {
+                return
+            }
+
+            //check, 容器隱藏或寬 0 不判
+            let width = chart.getWidth()
+            if (!(width > 0)) {
+                return
+            }
+
+            //type, 以離屏量測計算一般式圖例於此寬之排版(為事件名稱與圖寬之純函數, 不依可見圖之繪製時序)
+            let names = map(get(vo, 'optEvent.series', []), 'name')
+            let type = decideLegendType(vo.legendMeasurer.measure(names, width, chart.getHeight()))
+            vo.legendType = type
+
+            //類型不變不動圖(捲動式之頁次得以保留)
+            let cur = get(chart.getOption(), 'legend.0', {})
+            if (cur.type === type) {
+                return
+            }
+
+            //切換類型: 帶完整圖例設定(否則重建模型後 top 遺失落到底部), 並帶入目前 selected 保留使用者隱藏之事件
+            chart.setOption({ legend: { ...genLegend(type), selected: cur.selected || {} } })
+
         },
 
         updateChartsDebounce: function() {

package/src/components/RelationChips.vue

@@ -2,6 +2,8 @@
     <div
         ref="root"
         :style="`position:relative; display:flex; align-items:center; gap:${gap}px; height:100%; min-width:0; overflow:hidden; white-space:nowrap;`"
+        v-domresize="{ event: 'resize', tolerancePixel: 0 }"
+        @domresize="relayout"
     >
 
         <!-- 儲存格內之標籤: 本項永遠第 1 顆(唯一可編輯者, 永不被收合); 只渲染放得下的前 nShow 顆 -->
@@ -84,6 +86,7 @@ import get from 'lodash-es/get.js'
 import size from 'lodash-es/size.js'
 import filter from 'lodash-es/filter.js'
 import sum from 'lodash-es/sum.js'
+import domResize from 'w-component-vue/src/js/domResize.mjs'
 import WPopup from 'w-component-vue/src/components/WPopup.vue'
 import RelationChip from './RelationChip.vue'
 
@@ -99,11 +102,13 @@ import RelationChip from './RelationChip.vue'
 //  - 浮層內本項標籤與儲存格內同樣可改模式(舊版浮層一律唯讀, 展開後反而不能改); 改動後由呼叫端 revRows 重繪列,
 //    本元件隨儲存格重建而卸載、浮層隨之關閉——該列唯一可改之項已改完, 關閉符合預期
 //  - 垂直置中: 根元素 flex 置中且 height:100%(其百分比高度之包含塊為 .ag-cell), 標籤與指示於 27px 儲存格內上下各 2.5
-//  - 尺寸監聽用原生 ResizeObserver, 不用元件庫之 v-domresize(wsemi domDetect): 後者每實例一個 20ms setInterval 輪詢 offsetWidth,
-//    且比較基準為「上一次取樣」, 連續 ≤1px 之變化永不觸發(2026-09-17 讀碼定案並實測: 視窗逐 1px 縮窄時表格欄寬始終不重算),
-//    每列一實例時輪詢成本隨可見列數累積; ResizeObserver 為事件驅動、任何寬度變化皆觸發。根元素寬由儲存格決定(overflow:hidden),
-//    子元素增減不改變根寬, 無 ResizeObserver 迴圈之虞; 回呼以 requestAnimationFrame 合併
+//  - 尺寸監聽: 元件庫之 v-domresize(w-component-vue 2.5.23 起轉發設定給 wsemi domDetect; domDetect 自 1.9.4 起以 ResizeObserver 偵測, 比較基準為上次發出時之尺寸,
+//    故逐 1px 之連續變化亦累積發出, 不再是每實例一個輪詢): event 為 'resize' 只聽根元素尺寸(同原生 ResizeObserver 之語意), tolerancePixel 為 0 使 1px 之變化亦發出;
+//    元素隱藏(尺寸 0)時不發出, 恢復顯示時發出, 發出為非同步(與 ResizeObserver 回呼脫勾)。根元素寬由儲存格決定(overflow:hidden), 子元素增減不改變根寬, relayout 不會使根寬再變
 export default {
+    directives: {
+        domresize: domResize(),
+    },
     components: {
         WPopup,
         RelationChip,
@@ -149,32 +154,7 @@ export default {
     mounted: function() {
         let vo = this
         vo.measure()
-
-        //ResizeObserver: 根元素寬度變化(儲存格欄寬改變、視窗變動致表格重算欄寬)即重算
-        if (typeof window !== 'undefined' && window.ResizeObserver) {
-            vo.ro = new window.ResizeObserver(() => {
-                if (vo.rafId) {
-                    return
-                }
-                vo.rafId = window.requestAnimationFrame(() => {
-                    vo.rafId = null
-                    vo.relayout()
-                })
-            })
-            vo.ro.observe(vo.$refs.root)
-        }
-
-    },
-    beforeDestroy: function() {
-        let vo = this
-        if (vo.ro) {
-            vo.ro.disconnect()
-            vo.ro = null
-        }
-        if (vo.rafId) {
-            window.cancelAnimationFrame(vo.rafId)
-            vo.rafId = null
-        }
+        //根元素寬度變化(儲存格欄寬改變、視窗變動致表格重算欄寬)由 v-domresize 觸發 relayout
     },
     watch: {
         items: {
@@ -305,7 +285,7 @@ export default {
                 //relayout
                 vo.measuring = false
                 if (!vo.measured) {
-                    //量不到(元素尚未顯示): 先全部顯示避免儲存格空白, 不在此重試(否則元素持續不可見時會每幀互相呼叫), 待元素顯示使根寬改變、ResizeObserver 觸發 relayout 時再量
+                    //量不到(元素尚未顯示): 先全部顯示避免儲存格空白, 不在此重試(否則元素持續不可見時會每幀互相呼叫), 待元素顯示使根寬改變、v-domresize 觸發 relayout 時再量
                     vo.nShow = vo.n
                     return
                 }

package/src/fetchJson.mjs

@@ -1,3 +1,28 @@
+import get from 'lodash-es/get.js'
+import isestr from 'wsemi/src/isestr.mjs'
+
+
+let reName = /^[A-Za-z]{1,40}$/
+let reCode = /^[A-Z][A-Z0-9_]{1,40}$/
+
+
+//errDesc: 例外只取名稱(與代碼形狀之 cause.code / code), 不取 message(spec/設計要點與取捨.md ADR-023)
+//why: fetch 例外之 message 可能含完整網址('Failed to parse URL from <url>'、'Request cannot be constructed from a URL that includes credentials: <url>'),
+//而網址常帶權杖(?token=); JSON 解析錯誤之 message 夾帶回應本體片段. reject 物件會經 perm.conn / provideTabs 交給呼叫端與其 log
+function errDesc(err) {
+    let name = get(err, 'name')
+    let s = (isestr(name) && reName.test(name)) ? name : 'Error'
+    let code = get(err, 'cause.code')
+    if (!(isestr(code) && reCode.test(code))) {
+        code = get(err, 'code')
+    }
+    if (isestr(code) && reCode.test(code)) {
+        s += ` ${code}`
+    }
+    return s
+}
+
+
 /**
  * 以瀏覽器與 node(18+) 內建之 fetch 取得 JSON 回應, 取代 axios(2026-09-07 起本套件不再依賴 axios)
  *
@@ -5,6 +30,7 @@
  *   - 網路錯誤或非 2xx: axios 會 reject, fetch 只在網路錯誤 reject, 故此處對 !res.ok 亦 reject, 統一為 { kind: 'request', status, message }
  *   - 回應非 JSON: axios 回原字串(呼叫端判 state 失敗), 此處 res.json() 失敗 reject { kind: 'parse', status, message }
  *   - 成功: resolve 解析後之 JSON(對應 axios 之 res.data)
+ * reject 之 message 只含例外名稱與代碼(如 'TypeError ECONNREFUSED'、'SyntaxError')或 'HTTP <status>', 不含網址與回應本體(網址常帶權杖)
  * 注意: node 端 fetch(undici) 不讀 HTTP_PROXY / HTTPS_PROXY 環境變數(axios 會), 需走 proxy 之部署須自行以 opt.dispatcher 注入 undici Agent
  *
  * @param {String} url 輸入請求網址字串
@@ -19,7 +45,7 @@ async function fetchJson(url, opt = {}) {
         res = await fetch(url, opt)
     }
     catch (err) {
-        return Promise.reject({ kind: 'request', status: 0, message: String((err && err.message) || err) })
+        return Promise.reject({ kind: 'request', status: 0, message: errDesc(err) })
     }
 
     //check status
@@ -32,7 +58,7 @@ async function fetchJson(url, opt = {}) {
         return await res.json()
     }
     catch (err) {
-        return Promise.reject({ kind: 'parse', status: res.status, message: String((err && err.message) || err) })
+        return Promise.reject({ kind: 'parse', status: res.status, message: errDesc(err) })
     }
 
 }

package/src/getPerm.mjs

@@ -2,7 +2,6 @@ import get from 'lodash-es/get.js'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
-import ispm from 'wsemi/src/ispm.mjs'
 import fetchJson from './fetchJson.mjs'
 
 
@@ -25,7 +24,9 @@ async function getPerm(url, tokenTar, opt = {}) {
     if (url.indexOf('token={token}') < 0) {
         return Promise.reject('noTokenInUrl')
     }
-    url = url.replaceAll('{token}', tokenTar)
+    //代入: 值經 encodeURIComponent 並以 split / join 取代(ADR-023); 不用 replaceAll——其取代字串會解讀 $` $& $' 等樣式(可把佔位符前之網址前綴複製進查詢值),
+    //不編碼時 + 被伺服端解成空白、& 與 = 形成額外參數. 對 UUID、英數與 -_.~ 為恆等轉換
+    url = url.split('{token}').join(encodeURIComponent(tokenTar))
     // console.log('getPerm: url', url)
 
     //get, 內建 fetch(不依賴 axios); 網路錯誤或非 2xx → cannotGetUserByUrl, 回應非 JSON → cannotGetUserDataByUrl(對齊 axios 時期語意)
@@ -65,10 +66,12 @@ async function getPerm(url, tokenTar, opt = {}) {
     //check
     if (isfun(funConvertPerm)) {
 
-        //funConvertPerm
-        ur = funConvertPerm(ur)
-        if (ispm(ur)) {
-            ur = await ur
+        //funConvertPerm, 同步拋錯或 reject 一律 reject 'noUserDataAfterConvert'(部署方之錯誤原文不上拋, ADR-023)
+        try {
+            ur = await funConvertPerm(ur) //await 於 try 內: 同步拋錯、reject 與 thenable 之 reject 皆攔截; 非 Promise 之回傳原樣取得
+        }
+        catch (err) {
+            return Promise.reject('noUserDataAfterConvert')
         }
         // console.log('getPerm ur(funConvertPerm)', ur)
 

package/src/getPermUserInfor.mjs

@@ -2,7 +2,6 @@ import get from 'lodash-es/get.js'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
-import ispm from 'wsemi/src/ispm.mjs'
 import fetchJson from './fetchJson.mjs'
 
 
@@ -24,12 +23,14 @@ async function getPermUserInfor(url, tokenSelf, userIdTar, opt = {}) {
     //funConvertPerm
     let funConvertPerm = get(opt, 'funConvertPerm')
 
-    //url
-    if (url.indexOf('token={sysToken}') < 0 && url.indexOf('userId={userId}') < 0) {
+    //url, 兩個佔位符缺一即拒(原為 &&: 只有兩者皆缺才拒, 缺一時仍送出請求; 對齊 w-web-sso ADR-056 修正紀錄)
+    if (url.indexOf('token={sysToken}') < 0 || url.indexOf('userId={userId}') < 0) {
         return Promise.reject('noTokenUserIdInUrl')
     }
-    url = url.replaceAll('{sysToken}', tokenSelf) //系統介接用permToken
-    url = url.replaceAll('{userId}', userIdTar)
+    //代入: 值經 encodeURIComponent 並以 split / join 取代(ADR-023); 不用 replaceAll——其取代字串會解讀 $` $& $' 等樣式(userIdTar 含 $` 時會把已代入之介接權杖複製進 userId),
+    //不編碼時 + 被伺服端解成空白、& 與 = 形成額外參數, 值內之 {userId} 字樣亦會被二次代入. 對 UUID、英數與 -_.~ 為恆等轉換
+    url = url.split('{sysToken}').join(encodeURIComponent(tokenSelf)) //系統介接用permToken
+    url = url.split('{userId}').join(encodeURIComponent(userIdTar))
     // console.log('getPermUserInfor: url', url)
 
     //get, 內建 fetch(不依賴 axios); 網路錯誤或非 2xx → cannotGetUserByUrl, 回應非 JSON → cannotGetUserDataByUrl(對齊 axios 時期語意)
@@ -69,10 +70,12 @@ async function getPermUserInfor(url, tokenSelf, userIdTar, opt = {}) {
     //check
     if (isfun(funConvertPerm)) {
 
-        //funConvertPerm
-        ur = funConvertPerm(ur)
-        if (ispm(ur)) {
-            ur = await ur
+        //funConvertPerm, 同步拋錯或 reject 一律 reject 'noUserDataAfterConvert'(部署方之錯誤原文不上拋, ADR-023)
+        try {
+            ur = await funConvertPerm(ur) //await 於 try 內: 同步拋錯、reject 與 thenable 之 reject 皆攔截; 非 Promise 之回傳原樣取得
+        }
+        catch (err) {
+            return Promise.reject('noUserDataAfterConvert')
         }
         // console.log('getPermUserInfor ur(funConvertPerm)', ur)