w-web-api 1.0.82 → 1.0.84

package/src/components/LayoutContent.vue

@@ -83,7 +83,7 @@
                                         :style="`display:flex; align-items:center; min-height:${lineHeightTree}px; color:var(--c-3); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;`"
                                         v-if="props.data.type!=='node'"
                                     >
-                                        {{props.data.key}}
+                                        {{treeRowText(props.data.key)}}
                                     </div>
 
                                     <div
@@ -194,7 +194,7 @@
                                             </div>
                                             <div class="card">
                                                 <div class="card-h"><span class="lab">{{$t('resTitle')}}</span><span class="st">200 OK</span></div>
-                                                <pre class="code" v-html="jsonHighlight($ui.gv(apiSelect,'outputExample'))"></pre>
+                                                <pre class="code" v-html="$s.jsonHighlight($ui.gv(apiSelect,'outputExample'))"></pre>
                                             </div>
                                         </div>
                                     </div>
@@ -286,7 +286,9 @@ import filter from 'lodash-es/filter.js'
 import cloneDeep from 'lodash-es/cloneDeep.js'
 import isobj from 'wsemi/src/isobj.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
+import dtmapping from 'wsemi/src/dtmapping.mjs'
 import convertToTree from 'wsemi/src/convertToTree.mjs'
+import ds from '../schema/index.mjs'
 import { mdiArrowLeft, mdiArrowRight, mdiCloudBraces, mdiChartBar } from '@mdi/js'
 import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
 import WDrawer from 'w-component-vue/src/components/WDrawer.vue'
@@ -297,6 +299,11 @@ import LayoutContentTest from './LayoutContentTest.vue'
 import LayoutContentStats from './LayoutContentStats.vue'
 
 
+//樹根節點之哨符 key（非顯示文字）：顯示文字於 template 以 $t('treeRootAll') 依當前語系取得。
+//用哨符而非中文字面值，一來使語系可即時切換，二來避免與真實 group 名稱（種子資料即有名為「全部」者）相撞。
+let KEY_TREE_ROOT = '__treeRootAll__'
+
+
 export default {
     components: {
         WButtonCircle,
@@ -449,7 +456,10 @@ export default {
             // console.log('kpTree', cloneDeep(kpTree))
 
             //convertToTree, 由預處理tree物件轉成tree物件
-            let tree = convertToTree(tr, { bindRoot: '全部' })
+            //bindRoot 用不會與真實資料相撞之哨符：樹根是 UI 產生的標籤（非資料），須隨語系切換即時改變，
+            //故不可在此把譯文烤進樹資料（語系為就地切換、不重載頁面，烤進去會停在舊語系直到樹重建）。
+            //譯文於 template 以 $t(KEY_TREE_ROOT_TEXT) 呈現。附帶修正：原值 '全部' 會與同名之 group 資料相撞。
+            let tree = convertToTree(tr, { bindRoot: KEY_TREE_ROOT })
             // console.log('tree', cloneDeep(tree))
 
             //apiSelect: 優先保留原選取(仍存在時), 否則取第一筆
@@ -486,7 +496,8 @@ export default {
 
         curlOf: function(item) {
             let vo = this
-            let method = vo.getMethod(item) || 'GET'
+            //方法代號 → HTTP 標準動詞：cURL 亦須顯示 DELETE 而非 DEL（複製貼上即可執行），與送出路徑同一述語
+            let method = vo.$s.methodToHttpVerb(vo.getMethod(item))
             let url = get(item, 'inputExample', '')
             if (!url) {
                 url = get(item, 'url', '')
@@ -501,19 +512,11 @@ export default {
             return method
         },
 
-        jsonHighlight: function(str) {
-            let s = (str === null || str === undefined) ? '' : String(str)
-            // escape HTML
-            s = s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-            // key: "xxx":
-            s = s.replace(/("(?:[^"\\]|\\.)*")(\s*:)/g, '<span class="k">$1</span>$2')
-            // string value
-            s = s.replace(/:(\s*)("(?:[^"\\]|\\.)*")/g, ':$1<span class="s">$2</span>')
-            // number
-            s = s.replace(/([:\[,\s])(-?\d+\.?\d*)/g, '$1<span class="n">$2</span>')
-            // bool/null
-            s = s.replace(/\b(true|false|null)\b/g, '<span class="b">$1</span>')
-            return s
+        //樹之群組列顯示文字：樹根為 UI 標籤（哨符）→ 依當前語系取譯文；其餘為資料（levels 群組名）→ 原樣顯示。
+        //於 template 取值而非在 genTree 烤進資料，語系就地切換時才會即時更新。
+        treeRowText: function(key) {
+            let vo = this
+            return (key === KEY_TREE_ROOT) ? vo.$t('treeRootAll') : key
         },
 
         funActive: function(msg) {
@@ -562,8 +565,10 @@ export default {
 
         onClickAddApi: function() {
             let vo = this
-            //種子空白API(預設值, 送出時後端funNew會配id/時間)
-            vo.blankApi = {
+            //種子空白API(預設值, 送出時後端funNew會配id/時間)。
+            //以 schema 全部欄位補齊（缺者為 ''）：編輯表單以 cloneDeep(item) 為 form，Vue 2 對初始不存在之屬性無法追蹤，
+            //只列預設值時 tokens／testBaseUrl／authConfigJson／default*Json 等欄位於新增模式為非響應式（ADR-031）
+            vo.blankApi = dtmapping({
                 name: '',
                 description: '',
                 url: '',
@@ -575,7 +580,7 @@ export default {
                 state: 'ok',
                 authType: 'none',
                 contentType: 'application/json',
-            }
+            }, ds.apis.keys, '')
             vo.newMode = true
             vo.mode = 'edit'
         },

package/src/components/LayoutContentEdit.vue

@@ -263,7 +263,9 @@ export default {
     props: {
         item: {
             type: Object,
-            default: function() { return {} },
+            default: function() {
+                return {}
+            },
         },
         height: {
             type: Number,
@@ -289,7 +291,7 @@ export default {
             //故以旗標取代 promiseUnlock：同步第 2 次點擊直接 return；非同步期間另有頁面層 updateLoading overlay，後端層有 pmKeyMutex
             submitting: false,
 
-            methodItems: ['get', 'post', 'put', 'del'],
+            methodItems: this.$s.METHODS, //單一來源 mShare.METHODS（與測試分頁共用）
             authTypeItems: ['none', 'bearer', 'apikey', 'basic'],
 
         }
@@ -349,8 +351,13 @@ export default {
             }
             vo.submitting = true
             vo.submitSave()
-                .catch(function(err) { console.log('catch', err); vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' }) })
-                .finally(function() { vo.submitting = false; vo.$ui.updateLoading(false) })
+                .catch(function(err) {
+                    //非預期例外：先關 overlay、再以 showCheckYes modal 通知（CLAUDE.md 失敗通知政策；不用自動消失之 $alert toast，ADR-005）
+                    console.log('catch', err); vo.$ui.updateLoading(false); vo.$dg.showCheckYes(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
+                })
+                .finally(function() {
+                    vo.submitting = false; vo.$ui.updateLoading(false)
+                })
         },
 
         submitSave: function() {
@@ -379,7 +386,12 @@ export default {
                     let fv = vo.form[fk]
                     if (isestr(fv)) {
                         let jsonOk = true
-                        try { JSON.parse(fv) } catch (e) { jsonOk = false }
+                        try {
+                            JSON.parse(fv)
+                        }
+                        catch (e) {
+                            jsonOk = false
+                        }
                         if (!jsonOk) {
                             vo.errJsonField = fk
                             vo.errJson = fk + ': ' + vo.$t('valInvalidJson')
@@ -394,8 +406,12 @@ export default {
                 // 4) 執行 async，各自 catch + 旗標短路
                 let okSave = false
                 await vo.$fapi.saveApi(cloneDeep(vo.form))
-                    .then(function() { okSave = true })
-                    .catch(function(err) { console.log('saveApi', err); vo.errSave = vo.$transErr(err) }) //err 為後端 err-key，依 lang 反查顯示
+                    .then(function() {
+                        okSave = true
+                    })
+                    .catch(function(err) {
+                        console.log('saveApi', err); vo.errSave = vo.$transErr(err)
+                    }) //err 為後端 err-key，依 lang 反查顯示
                 if (!okSave) return
 
                 // 5) 全成功
@@ -413,8 +429,12 @@ export default {
         onClickDelete: function() {
             let vo = this
             vo.$dg.showCheckYesNo(vo.$t('confirmDeleteApi'))
-                .then(function() { vo.doDelete() })
-                .catch(function(err) { if (err === 'close') return; console.log('showCheckYesNo', err) })
+                .then(function() {
+                    vo.doDelete()
+                })
+                .catch(function(err) {
+                    if (err === 'close') return; console.log('showCheckYesNo', err)
+                })
         },
 
         doDelete: function() {
@@ -436,8 +456,12 @@ export default {
                 // 4) 執行 async
                 let okDel = false
                 await vo.$fapi.deleteApi(vo.form.id)
-                    .then(function() { okDel = true })
-                    .catch(function(err) { console.log('deleteApi', err); vo.errSave = vo.$transErr(err) }) //err 為後端 err-key，依 lang 反查顯示
+                    .then(function() {
+                        okDel = true
+                    })
+                    .catch(function(err) {
+                        console.log('deleteApi', err); vo.errSave = vo.$transErr(err)
+                    }) //err 為後端 err-key，依 lang 反查顯示
                 if (!okDel) return
 
                 // 5) 全成功
@@ -447,8 +471,13 @@ export default {
 
             }
             core()
-                .catch(function(err) { console.log('catch', err); vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' }) })
-                .finally(function() { vo.submitting = false; vo.$ui.updateLoading(false) })
+                .catch(function(err) {
+                    //非預期例外：先關 overlay、再以 showCheckYes modal 通知（CLAUDE.md 失敗通知政策；不用自動消失之 $alert toast，ADR-005）
+                    console.log('catch', err); vo.$ui.updateLoading(false); vo.$dg.showCheckYes(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })
+                })
+                .finally(function() {
+                    vo.submitting = false; vo.$ui.updateLoading(false)
+                })
         },
 
         onClickCancel: function() {

package/src/components/LayoutContentStats.vue

@@ -15,12 +15,50 @@
             <div class="ctrl-row">
                 <span class="ctrl-label">{{$t('timeRange')}}</span>
                 <div class="ctrl-field">
-                    <select id="timeGroupSel" v-model="timeGroup" class="ctrl-select">
-                        <option value="1hr">{{$t('selectItem1hr')}}</option>
-                        <option value="4hr">{{$t('selectItem4hr')}}</option>
-                        <option value="8hr">{{$t('selectItem8hr')}}</option>
-                        <option value="1day">{{$t('selectItem1day')}}</option>
-                    </select>
+                    <!-- 自製下拉（WTextSelect）取代原生 <select>：原生下拉之彈出清單選中／hover 色由 OS 決定、CSS 不可控，與本頁主題不一致（全域 §10.6-3）。
+                         色票沿用本頁既有 token 實值（scalar-ui.css :root；WShellEllipse 之顏色經 convertColor 轉 hex、不認 var()）：
+                         邊線 --border #e6e8ec、底 --bg-1 #ffffff、文字 --c-1 #1b1b1b、焦點邊線 --accent #0099ff、項目 hover 底 --bg-3 #eceef1、
+                         展開圖標 --c-3 #9aa1ac、圓角 --radius 8；字級 0.875rem 同原 .ctrl-select；展開圖標隨開闔旋轉（狀態聯動）。
+                         id 供 e2e 定位觸發區；寬度依當前語系最長選項文字計算（computed timeGroupSelWidth，同原生 select 依最長選項定寬）。
+                         清單對齊（全域 §10.6-6）：WPopup 錨在觸發區之內容元素（外框左緣 + 邊框 1 + 內距 8 = 內容左緣），故 placementDistX=-9 把清單左緣拉回外框左緣、
+                         清單寬固定為觸發區寬（關 autoFit、min/maxWidth 同 timeGroupSelWidth），項目左內距 9（= 邊框 1 + 內距 8）使項目文字左緣與觸發區文字左緣貼齊（實測 191/191）。 -->
+                    <WTextSelect
+                        id="timeGroupSel"
+                        :style="`width:${timeGroupSelWidth}px;`"
+                        :items="timeGroupItems"
+                        :value="timeGroup"
+                        :shadow="false"
+                        :borderRadius="8"
+                        :paddingStyle="{ v: 4, h: 8 }"
+                        :backgroundColor="'#ffffff'"
+                        :backgroundColorHover="'#ffffff'"
+                        :backgroundColorFocus="'#ffffff'"
+                        :borderColor="'#e6e8ec'"
+                        :borderColorHover="'#e6e8ec'"
+                        :borderColorFocus="'#0099ff'"
+                        :textColor="'#1b1b1b'"
+                        :textFontSize="'0.875rem'"
+                        :itemTextFontSize="'0.875rem'"
+                        :itemTextColor="'#1b1b1b'"
+                        :itemTextColorHover="'#1b1b1b'"
+                        :itemBackgroundColor="'#ffffff'"
+                        :itemBackgroundColorHover="'#eceef1'"
+                        :itemPaddingStyle="{ v: 6, h: 9 }"
+                        :placementDistX="-9"
+                        :autoFitMinWidth="false"
+                        :autoFitMaxWidth="false"
+                        :minWidth="timeGroupSelWidth"
+                        :maxWidth="timeGroupSelWidth"
+                        :expansionIconColor="'#9aa1ac'"
+                        @input="onInputTimeGroup"
+                    >
+                        <template v-slot:select="props">
+                            {{$t('selectItem' + props.item)}}
+                        </template>
+                        <template v-slot:item="props">
+                            {{$t('selectItem' + props.item)}}
+                        </template>
+                    </WTextSelect>
                 </div>
             </div>
 
@@ -107,8 +145,13 @@ import sumBy from 'lodash-es/sumBy.js'
 import reduce from 'lodash-es/reduce.js'
 import size from 'lodash-es/size.js'
 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 WIconLoading from 'w-component-vue/src/components/WIconLoading.vue'
+import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+
+//時間範圍下拉觸發區之結構寬度（不含文字）：左右內距 8+8、邊框 1+1、展開圖標 18、對稱呼吸空間 2（全域 §10.6-5；量測見 spec/流程_統計資訊.md）
+let SEL_STRUCT_WIDTH = 8 + 8 + 1 + 1 + 18 + 2
 
 //固定色票（依事件在 allEvents 之索引取色，使同一事件顏色穩定、圖表（含圖例）與統計表一致）
 let COLORS = [
@@ -121,6 +164,7 @@ export default {
     components: {
         WEchartsVue,
         WIconLoading,
+        WTextSelect,
     },
     props: {
         height: {
@@ -132,6 +176,8 @@ export default {
         return {
             freq: [],
             timeGroup: '1hr',
+            timeGroupItems: ['1hr', '4hr', '8hr', '1day'], //下拉項目為代號；顯示文字於 template 經 $t('selectItem' + 代號) 取當前語系（就地切換語系即時更新）
+            fontSel: '', //觸發區文字之實際字型（mounted 自 computed style 取得），供 timeGroupSelWidth 量文字實寬
             loading: false,
             errMsg: '',
             hUpper: 0, //標題列+控制區實佔高度（ResizeObserver 量測，供 chartHeight 計算；語系導致控制列換行時會變化）
@@ -154,6 +200,11 @@ export default {
         vo.ro = ro
         vo.updateUpperHeight()
 
+        //觸發區字型：字級 0.875rem（同原 .ctrl-select）× 根字級，字族／字重承襲本面板
+        let cs = getComputedStyle(vo.$el)
+        let rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+        vo.fontSel = `${cs.fontWeight} ${rootPx * 0.875}px ${cs.fontFamily}`
+
         vo.load()
     },
     beforeDestroy: function() {
@@ -165,6 +216,21 @@ export default {
     },
     computed: {
 
+        //時間範圍下拉觸發區寬度（全域 §10.6-5：固定尺寸須計算）：當前語系「最長選項文字」實寬（canvas measureText，字型同觸發區）
+        //+ 結構寬度 SEL_STRUCT_WIDTH；語系切換即重算（$t 為響應式）。
+        //why 不寫死：原生 <select> 依最長選項自動定寬（實測 eng 85px／cht 74px），自製下拉須重現，否則另一語系右側大片留白。
+        timeGroupSelWidth: function() {
+            let vo = this
+            let texts = vo.timeGroupItems.map((k) => vo.$t('selectItem' + k))
+            let wText = 0
+            if (isestr(vo.fontSel)) {
+                let c = document.createElement('canvas').getContext('2d')
+                c.font = vo.fontSel
+                wText = Math.max(...texts.map((t) => c.measureText(t).width))
+            }
+            return Math.ceil(wText + SEL_STRUCT_WIDTH)
+        },
+
         chartHeight: function() {
             let vo = this
             //panel 上下 padding 40 + 上方實佔(hUpper, 量測) + 表格預留 98（既有設計值：舊公式 height−360
@@ -274,11 +340,13 @@ export default {
                 grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                 xAxis: [{
                     type: 'category',
-                    data: map(data, function(item) { return ot(item.time).format(formatX) }),
+                    data: map(data, function(item) {
+                        return ot(item.time).format(formatX)
+                    }),
                     axisTick: { alignWithLabel: true },
                 }],
                 yAxis: [{ type: 'value' }],
-                series: series,
+                series,
             }
         },
 
@@ -330,6 +398,11 @@ export default {
             vo.hUpper = h
         },
 
+        onInputTimeGroup: function(val) {
+            let vo = this
+            vo.timeGroup = val //→ resampledData 重採樣 → chartOption 重繪
+        },
+
         colorOf: function(ev) {
             let vo = this
             let idx = vo.allEvents.indexOf(ev)
@@ -388,20 +461,6 @@ export default {
     min-width: 0;
 }
 
-.ctrl-select {
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--bg-1);
-    color: var(--c-1);
-    font-size: 0.875rem;
-    padding: 4px 8px;
-    outline: none;
-    cursor: pointer;
-}
-
-.ctrl-select:focus {
-    border-color: var(--accent);
-}
 
 .evt-dot {
     display: inline-block;