w-web-api 1.0.82 → 1.0.84

package/src/components/LayoutContentTest.vue

@@ -64,7 +64,7 @@
 
                 <div
                     v-for="(row, idx) in req.query"
-                    :key="idx"
+                    :key="row.id"
                     class="kv-row"
                 >
                     <div class="kv-col-ck kv-center">
@@ -123,7 +123,7 @@
 
                 <div
                     v-for="(row, idx) in req.headers"
-                    :key="idx"
+                    :key="row.id"
                     class="kv-row"
                 >
                     <div class="kv-col-ck kv-center">
@@ -239,6 +239,15 @@ let kpColorMethod = {
 }
 
 
+//mkRow：Query／Headers 表列之唯一建立點（改造前 10 處各自手寫 `{ on, key, value }` 字面值）。
+//id 為單調遞增序號、供 v-for :key（改造前 :key=idx——增刪列後 Vue 依索引重用 DOM，列之瞬時 DOM 狀態（焦點／IME 組字）會錯位）。
+let seqKvRow = 0
+function mkRow(key = '', value = '') {
+    seqKvRow += 1
+    return { id: seqKvRow, on: true, key, value }
+}
+
+
 export default {
     components: {
         WTextSelect,
@@ -246,7 +255,9 @@ export default {
     props: {
         item: {
             type: Object,
-            default: function() { return {} },
+            default: function() {
+                return {}
+            },
         },
         height: {
             type: Number,
@@ -255,12 +266,12 @@ export default {
     },
     data: function() {
         return {
-            methodItems: ['GET', 'POST', 'PUT', 'DEL'],
+            methodItems: this.$s.METHODS.map((m) => m.toUpperCase()), //顯示層大寫；單一來源 mShare.METHODS（與編輯表單共用）
             req: {
                 method: 'GET',
                 url: '',
-                query: [{ on: true, key: '', value: '' }],
-                headers: [{ on: true, key: '', value: '' }],
+                query: [mkRow()],
+                headers: [mkRow()],
                 body: '',
             },
             res: null,
@@ -320,48 +331,14 @@ export default {
             if (vo.res === null) {
                 return ''
             }
-            // 取得原始字串
-            let raw = ''
-            if (isobj(vo.res.data)) {
-                try {
-                    raw = JSON.stringify(vo.res.data, null, 2)
-                }
-                catch (e) {
-                    raw = String(vo.res.data)
-                }
-            }
-            else {
-                raw = String(vo.res.data)
+            //物件／陣列 → 縮排 JSON + 語法高亮；其餘（HTML／純文字／數字…）→ 原文（僅 escape、不上色：純文字中的數字／true 不是 JSON token）。
+            //型別表見 spec/流程_測試API.md「回應 data 型別 → 顯示形式」；高亮實作與 docs 分頁共用 mShare.jsonHighlight
+            //（改造前本處自寫規則以 &quot; 比對但 escape 未換 "，鍵值永遠不上色、只有數字／布林被上色，且對 HTML 原文亦上色）
+            let raw = vo.$s.dataToText(vo.res.data)
+            if (!vo.$s.isJsonContainer(vo.res.data)) {
+                return vo.$s.escapeHtml(raw)
             }
-            // HTML escape
-            let escaped = raw
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;')
-            // 簡易 JSON 語法高亮（逐 token 替換）
-            // key: "xxx":
-            // string value: "xxx"
-            // number: bare number
-            // bool/null: true/false/null
-            let highlighted = escaped.replace(
-                /(&quot;[^&]*&quot;)\s*(:)|(&quot;[^&]*&quot;)|(\b-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(\b(?:true|false|null)\b)/g,
-                function(match, keyStr, colon, strVal, numVal, boolVal) {
-                    if (keyStr && colon) {
-                        return '<span class="k">' + keyStr + '</span>' + colon
-                    }
-                    if (strVal) {
-                        return '<span class="s">' + strVal + '</span>'
-                    }
-                    if (numVal !== undefined) {
-                        return '<span class="n">' + numVal + '</span>'
-                    }
-                    if (boolVal !== undefined) {
-                        return '<span class="b">' + boolVal + '</span>'
-                    }
-                    return match
-                }
-            )
-            return highlighted
+            return vo.$s.jsonHighlight(raw)
         },
 
     },
@@ -383,7 +360,7 @@ export default {
                 return rows
             }
             each(obj, function(v, k) {
-                rows.push({ on: true, key: k, value: String(v) })
+                rows.push(mkRow(k, String(v)))
             })
             return rows
         },
@@ -416,7 +393,7 @@ export default {
                 // { "token": "xxx" }；留空則退用 tokens 欄第一個（向後相容舊資料）
                 let token = isestr(authCfg.token) ? authCfg.token : (isestr(itm.tokens) ? itm.tokens.split(';')[0] : '')
                 if (isestr(token)) {
-                    headerRows.push({ on: true, key: 'Authorization', value: 'Bearer ' + token })
+                    headerRows.push(mkRow('Authorization', 'Bearer ' + token))
                 }
             }
             else if (authType === 'apikey') {
@@ -425,10 +402,10 @@ export default {
                 let value = isestr(authCfg.value) ? authCfg.value : ''
                 if (isestr(value)) {
                     if (authCfg.in === 'query') {
-                        queryRows.push({ on: true, key: name, value: value })
+                        queryRows.push(mkRow(name, value))
                     }
                     else {
-                        headerRows.push({ on: true, key: name, value: value })
+                        headerRows.push(mkRow(name, value))
                     }
                 }
             }
@@ -437,22 +414,25 @@ export default {
                 let u = isestr(authCfg.username) ? authCfg.username : ''
                 let p = isestr(authCfg.password) ? authCfg.password : ''
                 if (isestr(u) || isestr(p)) {
-                    headerRows.push({ on: true, key: 'Authorization', value: 'Basic ' + btoa(u + ':' + p) })
+                    headerRows.push(mkRow('Authorization', 'Basic ' + btoa(u + ':' + p)))
                 }
             }
 
-            // content-type 標頭
-            if (isestr(itm.contentType)) {
-                headerRows.push({ on: true, key: 'Content-Type', value: itm.contentType })
+            // content-type 標頭：預設標頭（defaultHeadersJson）已明給 Content-Type（不分大小寫）者以其為準、不再補一列
+            //（對標 Postman：使用者明給之標頭優先於自動標頭。改造前雙列並存：送出時同鍵收斂使後列覆蓋前列，
+            //改為有序鍵值對後兩列會被 fetch 合併成 'a, b'，皆非使用者所見）
+            let hasContentType = headerRows.some((r) => r.key.toLowerCase() === 'content-type')
+            if (isestr(itm.contentType) && !hasContentType) {
+                headerRows.push(mkRow('Content-Type', itm.contentType))
             }
 
             if (headerRows.length === 0) {
-                headerRows.push({ on: true, key: '', value: '' })
+                headerRows.push(mkRow())
             }
             vo.req.headers = headerRows
 
             if (queryRows.length === 0) {
-                queryRows.push({ on: true, key: '', value: '' })
+                queryRows.push(mkRow())
             }
             vo.req.query = queryRows
 
@@ -474,27 +454,27 @@ export default {
 
         addQueryRow: function() {
             let vo = this
-            vo.req.query.push({ on: true, key: '', value: '' })
+            vo.req.query.push(mkRow())
         },
 
         removeQueryRow: function(idx) {
             let vo = this
             vo.req.query.splice(idx, 1)
             if (vo.req.query.length === 0) {
-                vo.req.query.push({ on: true, key: '', value: '' })
+                vo.req.query.push(mkRow())
             }
         },
 
         addHeaderRow: function() {
             let vo = this
-            vo.req.headers.push({ on: true, key: '', value: '' })
+            vo.req.headers.push(mkRow())
         },
 
         removeHeaderRow: function(idx) {
             let vo = this
             vo.req.headers.splice(idx, 1)
             if (vo.req.headers.length === 0) {
-                vo.req.headers.push({ on: true, key: '', value: '' })
+                vo.req.headers.push(mkRow())
             }
         },
 
@@ -523,45 +503,33 @@ export default {
                     return
                 }
 
-                // 3) 開啟本地 loading
+                // 3) 開 loading：本地 sending（送出鈕禁用）+ 頁面層全頁 overlay（CLAUDE.md 三層雙擊防護之頁面層；
+                //    送出對目標可能有副作用（POST/PUT/DELETE），與編輯分頁之存／刪同級；改造前只有本地 sending）
                 vo.sending = true
+                vo.$ui.updateLoading(true)
 
-                // 4) 組 spec 並送出
-                let method = vo.req.method
-
-                let query = {}
-                each(vo.req.query, function(row) {
-                    if (row.on && isestr(row.key)) {
-                        query[row.key] = row.value
-                    }
-                })
+                // 4) 組 spec 並送出（方法代號 → HTTP 標準動詞；顯示層之 DEL 須送 DELETE，見 mShare 說明）
+                let method = vo.$s.methodToHttpVerb(vo.req.method)
 
-                let headers = {}
-                each(vo.req.headers, function(row) {
-                    if (row.on && isestr(row.key)) {
-                        headers[row.key] = row.value
-                    }
-                })
+                //Query／Headers：僅 on 且鍵非空之列，以有序鍵值對 [[key, value], ...] 送出、重複鍵各自保留
+                //（mShare.kvRowsToPairs；改造前以物件收斂使同鍵後列靜默覆蓋前列）
+                let query = vo.$s.kvRowsToPairs(vo.req.query)
+                let headers = vo.$s.kvRowsToPairs(vo.req.headers)
 
-                let body = undefined
+                //請求內容原文送出（同 Scalar / Postman：打什麼送什麼，不解析、不驗證、不代換；Content-Type 以標頭表為準），
+                //空白則不帶 body；GET/HEAD 不帶。見 spec/流程_測試API.md「規則摘要」契約與 ADR-029。
+                let body
                 if (method !== 'GET' && method !== 'HEAD') {
                     let rawBody = vo.req.body
-                    let ct = get(vo.item, 'contentType', '')
-                    if (isestr(ct) && ct.toLowerCase().indexOf('json') >= 0) {
-                        let parsed = j2o(rawBody)
-                        body = isobj(parsed) ? parsed : rawBody
-                    }
-                    else {
-                        body = rawBody
-                    }
+                    body = isestr(rawBody) ? rawBody : undefined
                 }
 
                 let spec = {
-                    method: method,
+                    method,
                     url: vo.req.url,
-                    headers: headers,
-                    query: query,
-                    body: body,
+                    headers,
+                    query,
+                    body,
                     timeout: 30000,
                 }
 
@@ -586,11 +554,15 @@ export default {
 
             core()
                 .catch(function(err) {
+                    //非預期例外：先關 overlay、再以 showCheckYes modal 通知（CLAUDE.md：失敗通知走 showCheckYes、之前先 updateLoading(false)；
+                    //非 success 之 type 顯示警示圖標）；不用會自動消失之 $alert toast（ADR-005 modal 政策）
                     console.log('catch', err)
-                    vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
+                    vo.$ui.updateLoading(false)
+                    vo.$dg.showCheckYes(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
                 })
                 .finally(function() {
                     vo.sending = false
+                    vo.$ui.updateLoading(false)
                 })
 
         },

package/src/main.js

@@ -13,6 +13,7 @@ import domDragDrop from 'w-component-vue/src/js/domDragDrop.mjs'
 import App from './App.vue'
 import store from './store/index.mjs'
 import ui from './plugins/mUI.mjs'
+import * as s from './plugins/mShare.mjs'
 import ds from './schema/index.mjs'
 // console.log('globalState', globalState)
 // console.log('ds', ds)
@@ -33,6 +34,7 @@ Vue.prototype.$alert = function() {
 //prototype
 Vue.prototype.$ui = ui
 Vue.prototype.$t = ui.getKpText
+Vue.prototype.$s = s
 //$transErr：後端 reject 之 err-key → 依當前 lang 反查顯示文字。
 //非字串或查無對應 key（getKpText 查不到會原樣回 key）則 fallback 'anUnexpectedErrorOccurred'，避免顯示生 key。
 Vue.prototype.$transErr = (err) => {
@@ -51,7 +53,7 @@ Vue.directive('domdragdrop', domDragDrop())
 //WServHapiClient
 // let bFirstSync = false //不需要bFirstSync, 由getWebInfor結束代表第1次完成同步
 WServHapiClient({
-    showLog: false,
+    useShowLog: false,
     url: window.location.origin + window.location.pathname,
     useWaitToken: true,
     apiName: 'api',

package/src/plugins/mShare.mjs

@@ -0,0 +1,105 @@
+//前後端共用函數區
+import isobj from 'wsemi/src/isobj.mjs'
+import isarr from 'wsemi/src/isarr.mjs'
+
+
+function isJsonContainer(v) {
+    //值是否為 JSON 容器（純物件或陣列）。
+    //why 不只用 isobj：wsemi 之 isobj 以 Object.prototype.toString 判 '[object Object]'，陣列為 '[object Array]' 回 false；
+    //測試分頁「回應內容」與「請求 body 解析」兩站點都要把陣列與物件同等看待（見 spec/流程_測試API.md「回應 data 型別 → 顯示形式」）。
+    return isobj(v) || isarr(v)
+}
+
+
+function dataToText(v) {
+    //回應 data → 顯示用純文字。容器（物件／陣列）→ 縮排 2 之 JSON；其餘（字串／數字／布林／null／空）→ String(v)。
+    //JSON.stringify 拋錯（如循環參照；經 JSON 傳輸之回應實務上不可達）時退回 String(v)。
+    if (isJsonContainer(v)) {
+        try {
+            return JSON.stringify(v, null, 2)
+        }
+        catch (e) {
+            return String(v)
+        }
+    }
+    return String(v)
+}
+
+
+//methodToHttpVerb：把 UI／資料層的方法代號轉成 HTTP 標準動詞。
+//why：本系統以 'del'（資料層）／'DEL'（顯示層）表示刪除，但 `DEL` **不是** HTTP 動詞——實測以 fetch 送出 `DEL`
+//時目標伺服器無法解析、於 HTTP 層直接回 400 且 handler 完全不會執行，導致所有刪除類 API 無法測試（種子資料即有
+//3 支）。故送出前與產生 cURL 前一律經此轉換。其餘動詞僅正規化為大寫；空值或非字串退回 'GET'（同 proxy 之預設）。
+function methodToHttpVerb(v) {
+    if (typeof v !== 'string' || v === '') {
+        return 'GET'
+    }
+    let m = v.toUpperCase()
+    return (m === 'DEL') ? 'DELETE' : m
+}
+
+
+//METHODS：本系統之方法代號清單（資料層小寫；顯示層以 toUpperCase 呈現；送出時經 methodToHttpVerb 轉 HTTP 動詞）。
+//單一來源：編輯表單與測試分頁之方法下拉共用（改造前兩處各自手寫一份清單）。
+let METHODS = ['get', 'post', 'put', 'del']
+
+
+//escapeHtml：文字 → 可放入 HTML 文字節點之字串（只 escape & < > 三者；文字節點內之引號不需 escape，
+//且 jsonHighlight 之 token 規則依賴保留原始 "）。
+function escapeHtml(text) {
+    let s = (text === null || text === undefined) ? '' : String(text)
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+
+//jsonHighlight：JSON 文字 → 語法高亮 HTML（class k=鍵、s=字串值、n=數字、b=true/false/null；樣式為 src/assets/scalar-ui.css 之 .code）。
+//docs 分頁（outputExample）與測試分頁（回應內容）共用同一實作，兩處行為一致。
+//why 單趟 tokenizer：改造前兩處各自手寫——測試分頁以 &quot; 比對但 escape 只換 & < >，字串永遠不命中、鍵值一律不上色；
+//docs 版逐規則多次 replace，字串內之數字／true 亦被誤上色。此處字串 token（含 \" 跳脫）優先吞掉整段，
+//字串內容不再被後續規則比對；字串後緊接 : 者為鍵，否則為值。
+function jsonHighlight(text) {
+    let s = escapeHtml(text)
+    return s.replace(/("(?:[^"\\]|\\.)*")(\s*:)?|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false|null)\b/g, function(m, str, colon, num, kw) {
+        if (str !== undefined) {
+            if (colon !== undefined) {
+                return '<span class="k">' + str + '</span>' + colon
+            }
+            return '<span class="s">' + str + '</span>'
+        }
+        if (num !== undefined) {
+            return '<span class="n">' + num + '</span>'
+        }
+        return '<span class="b">' + kw + '</span>'
+    })
+}
+
+
+//kvRowsToPairs：請求建構器之 Query／Headers 表列（[{ on, key, value }]）→ 有序鍵值對 [[key, value], ...]。
+//規則（spec/流程_測試API.md「規則摘要」）：僅 on 且鍵非空之列納入；重複鍵各自保留一對、不收斂成物件
+//（重複之 query 鍵須各自送達目標，如 ?id=1&id=2；重複之標頭由 proxy 依 Fetch 標準合併）；值一律轉字串。
+//why：改造前以 `obj[key] = value` 收斂，同鍵之後列靜默覆蓋前列，使用者看到兩列卻只送出一列。
+function kvRowsToPairs(rows) {
+    let pairs = []
+    if (!isarr(rows)) {
+        return pairs
+    }
+    for (let row of rows) {
+        if (!isobj(row) || !row.on || typeof row.key !== 'string' || row.key === '') {
+            continue
+        }
+        let v = (row.value === null || row.value === undefined) ? '' : String(row.value)
+        pairs.push([row.key, v])
+    }
+    return pairs
+}
+
+
+export {
+    METHODS,
+    isJsonContainer,
+    dataToText,
+    methodToHttpVerb,
+    escapeHtml,
+    jsonHighlight,
+    kvRowsToPairs
+}

package/src/store/mutations.mjs

@@ -30,6 +30,7 @@ let state = {
         email: '', //admin@example.com
         isAdmin: 'n',
     },
+    userSelf: {}, //UpdateUserSelf 寫入之使用者自身資訊；Vue 2 須於初始 state 宣告才具響應性（同 sso 之 userSelf: {}）
 
     lang: 'eng', //'eng', 'cht'
     kpText: {}, //一定要放在vuex內, 否則無法用broadcast驅動變更語系文字

package/srv.mjs

@@ -3,7 +3,6 @@ import WWebApi from './server/WWebApi.mjs'
 import getSettings from './g_getSettings.mjs'
 import get from 'lodash-es/get.js'
 import iseobj from 'wsemi/src/iseobj.mjs'
-import axios from 'axios'
 import JSON5 from 'json5'
 import fs from 'fs'
 
@@ -39,6 +38,7 @@ let opt = {
     //log 資料夾與輪檔間隔（srLog 寫入 + staEvent 統計皆讀此）。e2e 可用 genTempSettings({logFd}) 指向合成 log 達 hermetic。
     logFd: get(stApp, 'logFd', './logs'),
     logInterval: get(stApp, 'logInterval', 'hr'),
+    logNumKeep: get(stApp, 'logNumKeep', null), //null=未給, srLog 採 w-syslog 預設; 給非正整數則 srLog 啟動即 throw (fail-fast)
 
     webName: {
         'eng': 'API Service',
@@ -68,9 +68,14 @@ let getUserByToken = async (token) => {
     //呼叫 SSO 解析 token -> user
     try {
         let url = `${ssoBaseUrl}/api/getSsoUserInfor?token=${encodeURIComponent(ssoAppToken)}&key=token&value=${encodeURIComponent(token)}`
-        let res = await axios.get(url)
-        let state = get(res, 'data.state', '')
-        let u = get(res, 'data.msg', null)
+        let res = await fetch(url) //Node 內建 fetch（改造前 axios）；非 2xx 視同失敗
+        if (!res.ok) {
+            console.log('SSO getSsoUserInfor HTTP', res.status)
+            return {}
+        }
+        let data = await res.json()
+        let state = get(data, 'state', '')
+        let u = get(data, 'msg', null)
         if (state !== 'success' || !iseobj(u)) {
             console.log('SSO getSsoUserInfor 失敗', state)
             return {}

package/tableTags-web-api.json

@@ -0,0 +1 @@
+{"apis":"2026-09-13T00:43:23+08:00|NCZLhv"}