w-web-perm 1.0.84 → 1.0.85

package/src/components/VeGrupBlngUsers.vue

@@ -140,32 +140,16 @@
                             :opt="opt"
                         >
                             <template v-slot:cell-render="props">
-                                <template v-if="props.key==='grupsNames'">
-                                    <span v-for="(item, idx) in props.row.grups" :key="idx" style="display:inline-block; line-height:20px; height:20px;">
-                                        <div style="display:flex;">
-                                            <div :style="'padding:0px 5px; border-top-left-radius:4px; border-bottom-left-radius:4px; ' + (item.enable === 'y' ? 'border-left:1px solid #ac2451; border-right:1px solid #9e2149; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#be295a; color:#fff;' : 'border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#ffffff; color:#555;')">
-                                                {{ item.mode }}
-                                            </div>
-                                            <div :style="'padding:0px 5px; border-top-right-radius:4px; border-bottom-right-radius:4px; ' + (item.enable === 'y' ? '_border-left:1px solid #ac2451; border-right:1px solid #ac2451; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#d22f64; color:#fff;' : '_border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#eeeeee; color:#555;')">
-                                                {{ item.name }}
-                                            </div>
-                                        </div>
-                                    </span>
-                                </template>
-                                <WTextSelect
-                                    v-else-if="props.key==='mode'"
-                                    :style="`width:${modeSelectWidth}px;`"
-                                    :items="modeItems"
-                                    :value="props.row.mode"
+                                <RelationChips
+                                    v-if="props.key==='grupsNames'"
+                                    :items="props.row.grups"
                                     :editable="isEditable"
-                                    :paddingStyle="{v:0,h:10}"
-                                    :shadow="false"
-                                    :itemPaddingStyle="{v:8,h:10}"
-                                    :placementDistX="-10"
+                                    :popupTitle="$t('belongGrupsNames')"
+                                    :tooltipAll="$t('chipsShowAll')"
                                     :labelContent="'modeSelect'"
-                                    @input="(item)=>{showVeGrupBlngUsersToggleItemModeByName(props.row.name, item)}"
-                                ></WTextSelect>
-                                <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeGrupBlngUsersToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
+                                    @input="(item)=>{showVeGrupBlngUsersToggleItemModeByName(props.row.name, item, props.row.id)}"
+                                ></RelationChips>
+                                <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeGrupBlngUsersToggleItemEnableByName(props.row.name, props.row.id)" :disabled="!isEditable" />
                                 <span v-else>{{ props.value }}</span>
                             </template>
                         </WAggridVue>
@@ -207,7 +191,7 @@ import isestr from 'wsemi/src/isestr.mjs'
 import WDialog from 'w-component-vue/src/components/WDialog.vue'
 import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
 import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
-import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+import RelationChips from './RelationChips.vue'
 
 
 export default {
@@ -215,7 +199,7 @@ export default {
         WDialog,
         WButtonCircle,
         WAggridVue,
-        WTextSelect,
+        RelationChips,
     },
     props: {
     },
@@ -244,10 +228,6 @@ export default {
             isEditable: false,
             isModified: false,
 
-            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
-            modeItems: ['OR', 'AND'],
-            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
-
             grup: null,
 
             items: [],
@@ -414,21 +394,19 @@ export default {
             let opt = null
             if (size(vo.items) > 0) {
 
-                //ks
+                //ks, 本列自己可改的(是否使用)在左, 由其他權限群組帶來的(所屬權限群組名稱)在右; 合併模式併入 grupsNames 欄之本項 chip(RelationChips), 不再獨立成欄
                 let ks = [
                     'name',
-                    'grupsNames',
-                    'mode',
                     'enable',
+                    'grupsNames',
                 ]
                 // console.log('ks', ks)
 
                 //kpHead
                 let kpHead = {
                     'name': vo.$t('userName'),
-                    'grupsNames': vo.$t('belongGrupsNames'),
-                    'mode': vo.$t('operGrupMode'),
                     'enable': vo.$t('operEnable'),
+                    'grupsNames': vo.$t('belongGrupsNames'),
                 }
 
                 //opt
@@ -442,12 +420,13 @@ export default {
                     defHeadFilter: true,
                     defCellAlignH: 'left',
                     kpCellEditable: {
-                        'name': vo.isEditable,
-                        'mode': false,
+                        //name 一律唯讀: 列固定為全部既有使用者(genItems 產生, 無新增/刪除列); doSave 只回寫 u.cgrups、
+                        //  完全不讀列上之 name, 故就地改名會被靜默丟棄——有可編輯外觀卻無對應行為(全域 §2.1 第 6 條之半吊子)。
+                        //  與 VeCgrups/VeCpemis 同類一併關閉(§2.1 第 4 條 對稱性)。
+                        'name': false,
                         'enable': false,
                     },
                     kpHeadWidth: {
-                        'mode': 100,
                         'enable': 100,
                     },
                     // kpRowDrag: {
@@ -459,14 +438,14 @@ export default {
                     kpHeadFilterType: {
                         'name': 'text',
                         'grupsNames': 'text',
-                        'mode': 'text',
                         'enable': 'text',
                     },
                     // kpHeadCheckBox: {
                     //     'name': true,
                     // },
-                    kpHeadFocusHighlight: { //本欄內容為唯讀徽章(無可聚焦元素), 焦點框徒增干擾故關閉; 與三個清單頁之按鈕欄同一慣例, 該處另受 w-aggrid-vue 2.0.87 之 :focus-within 修正(本欄不可聚焦, 不受影響)
+                    kpHeadFocusHighlight: { //兩欄之儲存格內皆有自己的控制項(chip 之模式下拉、勾選框), 焦點框徒增干擾故關閉; 控制項取得焦點時之焦點框由 w-aggrid-vue 2.0.87 之 :focus-within 規則一併擋下
                         'grupsNames': false,
+                        'enable': false,
                     },
                     rowsChange: (rs) => {
                         // console.log('rowsChange', rs)
@@ -649,6 +628,7 @@ export default {
                 // console.log(u.name, 'grupsNames', grupsNames)
 
                 return {
+                    id: u.id, //列識別: 使用者 name 允許重複(僅前端警告、後端不擋), 切換處理須以 id 找列, 不可以 name(否則同名者會改到第一位)
                     name: u.name,
                     grupsNames,
                     mode,
@@ -752,8 +732,8 @@ export default {
 
         },
 
-        showVeGrupBlngUsersToggleItemModeByName: function(name, mode) {
-            // console.log('showVeGrupBlngUsersToggleItemModeByName', name, mode)
+        showVeGrupBlngUsersToggleItemModeByName: function(name, mode, id) {
+            // console.log('showVeGrupBlngUsersToggleItemModeByName', name, mode, id)
 
             let vo = this
 
@@ -766,11 +746,11 @@ export default {
             //rows
             let rows = get(vo, 'opt.rows', [])
 
-            //find
+            //find, 有 id 以 id 找列(使用者 name 可重複, 以 name 會改到第一位同名者); 未給 id 之既有 $dg 呼叫端維持以 name 找
             let r = null
             let kr = null
             each(rows, (v, k) => {
-                if (get(v, 'name', '') === name) {
+                if (isestr(id) ? get(v, 'id', '') === id : get(v, 'name', '') === name) {
                     r = v
                     kr = k
                     return false //跳出
@@ -799,8 +779,8 @@ export default {
 
         },
 
-        showVeGrupBlngUsersToggleItemEnableByName: function(name) {
-            // console.log('showVeGrupBlngUsersToggleItemEnableByName', name)
+        showVeGrupBlngUsersToggleItemEnableByName: function(name, id) {
+            // console.log('showVeGrupBlngUsersToggleItemEnableByName', name, id)
 
             let vo = this
 
@@ -813,11 +793,11 @@ export default {
             //rows
             let rows = get(vo, 'opt.rows', [])
 
-            //find
+            //find, 理由同 showVeGrupBlngUsersToggleItemModeByName: 有 id 以 id 找列
             let r = null
             let kr = null
             each(rows, (v, k) => {
-                if (get(v, 'name', '') === name) {
+                if (isestr(id) ? get(v, 'id', '') === id : get(v, 'name', '') === name) {
                     r = v
                     kr = k
                     return false //跳出
@@ -982,13 +962,14 @@ export default {
                     await vo.$dg.showCheckYes(`${vo.$t('userSaveUsersFail')}: ${vo.$tErr(err)}`)
                 })
             if (!okSave) {
-                return
+                return false //回報失敗: 呼叫端 doSave 據此不關閉對話框, 保留未存變更供修正後重按儲存
             }
 
             //alert（showCheckYes 前關 loading，避免 modal 等待期間 loading 疊在底下）
             vo.$ui.updateLoading(false)
             await vo.$dg.showCheckYes(vo.$t('userSaveUsersSuccess'), { type: 'success' })
 
+            return true
         },
 
         clickBtns: function(msg) {
@@ -1089,8 +1070,11 @@ export default {
                 //     return
                 // }
 
-                //saveUsers
-                await vo.saveUsers(usersNew)
+                //saveUsers, 失敗時回 false: 失敗提示已由 saveUsers 顯示, 此處不關閉對話框(保留未存變更供重按儲存)
+                let okSave = await vo.saveUsers(usersNew)
+                if (!okSave) {
+                    return false
+                }
 
             }
 
@@ -1098,6 +1082,11 @@ export default {
             core()
                 .then((rows) => {
 
+                    //存檔失敗: 不 resolve、不關窗(規格「若寫入失敗…對話框不關閉，可修正後重按儲存」; 舊版於此無條件關窗, 2026-09-17 審計查出)
+                    if (rows === false) {
+                        return
+                    }
+
                     //resolve
                     vo.pm.resolve(rows)
 

package/src/components/VePemiBlngGrups.vue

@@ -140,31 +140,15 @@
                             :opt="opt"
                         >
                             <template v-slot:cell-render="props">
-                                <template v-if="props.key==='pemisNames'">
-                                    <span v-for="(item, idx) in props.row.pemis" :key="idx" style="display:inline-block; line-height:20px; height:20px;">
-                                        <div style="display:flex;">
-                                            <div :style="'padding:0px 5px; border-top-left-radius:4px; border-bottom-left-radius:4px; ' + (item.enable === 'y' ? 'border-left:1px solid #ac2451; border-right:1px solid #9e2149; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#be295a; color:#fff;' : 'border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#ffffff; color:#555;')">
-                                                {{ item.mode }}
-                                            </div>
-                                            <div :style="'padding:0px 5px; border-top-right-radius:4px; border-bottom-right-radius:4px; ' + (item.enable === 'y' ? '_border-left:1px solid #ac2451; border-right:1px solid #ac2451; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#d22f64; color:#fff;' : '_border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#eeeeee; color:#555;')">
-                                                {{ item.name }}
-                                            </div>
-                                        </div>
-                                    </span>
-                                </template>
-                                <WTextSelect
-                                    v-else-if="props.key==='mode'"
-                                    :style="`width:${modeSelectWidth}px;`"
-                                    :items="modeItems"
-                                    :value="props.row.mode"
+                                <RelationChips
+                                    v-if="props.key==='pemisNames'"
+                                    :items="props.row.pemis"
                                     :editable="isEditable"
-                                    :paddingStyle="{v:0,h:10}"
-                                    :shadow="false"
-                                    :itemPaddingStyle="{v:8,h:10}"
-                                    :placementDistX="-10"
+                                    :popupTitle="$t('belongPemisNames')"
+                                    :tooltipAll="$t('chipsShowAll')"
                                     :labelContent="'modeSelect'"
                                     @input="(item)=>{showVePemiBlngGrupsToggleItemModeByName(props.row.name, item)}"
-                                ></WTextSelect>
+                                ></RelationChips>
                                 <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVePemiBlngGrupsToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
                                 <span v-else>{{ props.value }}</span>
                             </template>
@@ -207,7 +191,7 @@ import isestr from 'wsemi/src/isestr.mjs'
 import WDialog from 'w-component-vue/src/components/WDialog.vue'
 import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
 import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
-import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+import RelationChips from './RelationChips.vue'
 
 
 export default {
@@ -215,7 +199,7 @@ export default {
         WDialog,
         WButtonCircle,
         WAggridVue,
-        WTextSelect,
+        RelationChips,
     },
     props: {
     },
@@ -244,10 +228,6 @@ export default {
             isEditable: false,
             isModified: false,
 
-            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
-            modeItems: ['OR', 'AND'],
-            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
-
             pemi: null,
 
             items: [],
@@ -414,21 +394,19 @@ export default {
             let opt = null
             if (size(vo.items) > 0) {
 
-                //ks
+                //ks, 本列自己可改的(是否使用)在左, 由其他權限帶來的(所屬權限名稱)在右; 合併模式併入 pemisNames 欄之本項 chip(RelationChips), 不再獨立成欄
                 let ks = [
                     'name',
-                    'pemisNames',
-                    'mode',
                     'enable',
+                    'pemisNames',
                 ]
                 // console.log('ks', ks)
 
                 //kpHead
                 let kpHead = {
                     'name': vo.$t('grupName'),
-                    'pemisNames': vo.$t('belongPemisNames'),
-                    'mode': vo.$t('operPemiMode'),
                     'enable': vo.$t('operEnable'),
+                    'pemisNames': vo.$t('belongPemisNames'),
                 }
 
                 //opt
@@ -442,12 +420,11 @@ export default {
                     defHeadFilter: true,
                     defCellAlignH: 'left',
                     kpCellEditable: {
-                        'name': vo.isEditable,
-                        'mode': false,
+                        //name 一律唯讀: 理由同 VeGrupBlngUsers——doSave 只回寫 cpemis、不讀列上之 name, 改名會被靜默丟棄。
+                        'name': false,
                         'enable': false,
                     },
                     kpHeadWidth: {
-                        'mode': 100,
                         'enable': 100,
                     },
                     // kpRowDrag: {
@@ -459,14 +436,14 @@ export default {
                     kpHeadFilterType: {
                         'name': 'text',
                         'pemisNames': 'text',
-                        'mode': 'text',
                         'enable': 'text',
                     },
                     // kpHeadCheckBox: {
                     //     'name': true,
                     // },
-                    kpHeadFocusHighlight: { //本欄內容為唯讀徽章(無可聚焦元素), 焦點框徒增干擾故關閉; 與三個清單頁之按鈕欄同一慣例, 該處另受 w-aggrid-vue 2.0.87 之 :focus-within 修正(本欄不可聚焦, 不受影響)
+                    kpHeadFocusHighlight: { //兩欄之儲存格內皆有自己的控制項(chip 之模式下拉、勾選框), 焦點框徒增干擾故關閉; 控制項取得焦點時之焦點框由 w-aggrid-vue 2.0.87 之 :focus-within 規則一併擋下
                         'pemisNames': false,
+                        'enable': false,
                     },
                     rowsChange: (rs) => {
                         // console.log('rowsChange', rs)
@@ -982,13 +959,14 @@ export default {
                     await vo.$dg.showCheckYes(`${vo.$t('grupSaveGrupsFail')}: ${vo.$tErr(err)}`)
                 })
             if (!okSave) {
-                return
+                return false //回報失敗: 呼叫端 doSave 據此不關閉對話框, 保留未存變更供修正後重按儲存
             }
 
             //alert（showCheckYes 前關 loading，避免 modal 等待期間 loading 疊在底下）
             vo.$ui.updateLoading(false)
             await vo.$dg.showCheckYes(vo.$t('grupSaveGrupsSuccess'), { type: 'success' })
 
+            return true
         },
 
         clickBtns: function(msg) {
@@ -1089,8 +1067,11 @@ export default {
                 //     return
                 // }
 
-                //saveGrups
-                await vo.saveGrups(grupsNew)
+                //saveGrups, 失敗時回 false: 失敗提示已由 saveGrups 顯示, 此處不關閉對話框(保留未存變更供重按儲存)
+                let okSave = await vo.saveGrups(grupsNew)
+                if (!okSave) {
+                    return false
+                }
 
             }
 
@@ -1098,6 +1079,11 @@ export default {
             core()
                 .then((rows) => {
 
+                    //存檔失敗: 不 resolve、不關窗(規格「若寫入失敗…對話框不關閉，可修正後重按儲存」; 舊版於此無條件關窗, 2026-09-17 審計查出)
+                    if (rows === false) {
+                        return
+                    }
+
                     //resolve
                     vo.pm.resolve(rows)
 

package/tableTags-web-perm.json

@@ -1 +1 @@
-{"grups":"2026-09-16T15:01:20+08:00|0Lr4Fj","pemis":"2026-09-16T14:57:54+08:00|Lt1oSV","targets":"2026-09-16T14:57:54+08:00|9AnMSx","users":"2026-09-16T14:57:54+08:00|lXyOQd"}
+{"grups":"2026-09-17T11:37:36+08:00|gTYuDo","pemis":"2026-09-17T11:38:08+08:00|hOfypy","targets":"2026-09-17T11:37:36+08:00|H5JFDN","users":"2026-09-17T11:37:36+08:00|UGtQAM"}

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/README.md

@@ -0,0 +1,58 @@
+# w-web-perm 隨附資料：依「建議w-web-perm調整.md」實作之修改版原始檔、差異檔與驗證證據
+
+- 基準版本：`w-web-perm` 1.0.83（取自 `rddmanager_2_perm/node_modules/w-web-perm`）；建置與驗證所用之相依：`vue` 2.7.16、`w-component-vue` 2.5.15、`w-aggrid-vue` 2.0.86、`ag-grid-community` 31.3.4、`@vue/cli-service` 5.0.9
+- 產出日期：2026-09-15
+- 對應建議書：主專案根之 `建議w-web-perm調整.md`（問題盤查、對標、矩陣、方案與規格）；另有 `建議w-aggrid-vue修正.md`（本次連帶查出之 w-aggrid-vue 缺陷）
+- 本資料夾內之檔案皆為**可直接覆蓋至套件對應路徑**之完整檔（非片段），`diff/` 另附對 1.0.83 之差異供審閱
+
+## 1. 檔案清單與各檔改了什麼
+
+| 路徑（對應套件內路徑） | 性質 | 內容 |
+|---|---|---|
+| `src/components/ModeSelectChip.vue` | 新增 | 合併模式（OR／AND）控制項：內核 `WTextSelect`（`labelContent` 仍為 `modeSelect`），外觀為 chip 模式段（56×22、方角 4px、字 12px、內距 0 5、箭頭 14），`highlight`（醒目色）與 `attached`（右側無圓角，嵌於 chip 左段）兩個外觀開關；唯讀時透明度 0.6、無箭頭、不展開；清單 `minWidth` 給整顆寬使清單不窄於控制項、`placementDistX -6` 使清單左緣對齊外框 |
+| `src/components/RelationChip.vue` | 新增 | 單顆關聯 chip（模式段＋名稱段，整顆 22px）；`isCurrent` 為本項時用醒目色；`editable && isCurrent` 時模式段即 `ModeSelectChip`（chip 即下拉），其餘 chip 之模式段為純文字；名稱段 `max-width 240px` 省略號截斷、全名放 `title` |
+| `src/components/RelationChips.vue` | 新增 | chip 列表：本項永遠排第 1 顆（只改顯示順序）、相鄰間距 4px；最左固定「⋯ N」展開鈕（`title` 為 `$t('chipsShowAll')`），點開 `WPopup`（`labelContent` 為 `relationChipsAll`、寬 320～560、內容 `flex-wrap` 且最大高 50vh 可捲）列出全部 chip；標題文字用 `$t('chipsPopupTitle')` 之 `{title}`／`{n}` 佔位 |
+| `src/components/VeGrupBlngUsers.vue` | 修改 | `grupsNames` 欄改用 `RelationChips`（`@input` 沿用 `showVeGrupBlngUsersToggleItemModeByName`）；移除 `mode` 欄與 `WTextSelect`、`modeItems`、`modeSelectWidth`；`ks` 改為 `name`、`enable`、`grupsNames`（本列自己可改的在左）；`kpHeadFocusHighlight` 加 `enable:false`。`genItems`／`revRows`／`doSave` 之資料流不動 |
+| `src/components/VePemiBlngGrups.vue` | 修改 | 同上，對象為 `pemisNames`／`showVePemiBlngGrupsToggleItemModeByName` |
+| `src/components/VeCgrups.vue` | 修改 | `mode` 欄改用 `ModeSelectChip`，`editable` 綁 `isEditable && props.row.enable === 'y'`（未勾選列淡化不可操作）；`kpHeadWidth.mode` 100 改 90；加 `kpHeadFocusHighlight { mode:false, enable:false }`；移除 `WTextSelect`、`modeItems`、`modeSelectWidth` |
+| `src/components/VeCpemis.vue` | 修改 | 同上 |
+| `src/components/VeCrules.vue` | 修改 | 只加 `kpHeadFocusHighlight { enable:false }`（與其餘關聯對話框一致） |
+| `src/components/LayoutContentGrups.vue` | 修改 | `tabKeys`／`tabKeysPick`／`tabKeysShow` 之 `cpemis` 移到 `belongUsers` 之前（主表欄序：管控使用權限、管控所屬使用者） |
+| `src/components/LayoutContentPemis.vue` | 修改 | 同上，`crules` 移到 `belongGrups` 之前（管控對象、管控所屬權限群組） |
+| `src/App.vue` | 修改 | 全域樣式加一條 `.CompCssWAggridVue .no-border.ag-cell:focus-within { border-color:transparent !important; }`，補 w-aggrid-vue 2.0.86 只覆寫 `:focus` 之缺口（詳 `建議w-aggrid-vue修正.md`），該套件修正後可移除 |
+| `server/procLang.mjs` | 修改 | `belongGrups.cht` 改「管控所屬權限群組」；新增 `chipsShowAll`（展開全部）與 `chipsPopupTitle`（`{title}：共 {n} 項`）兩鍵，eng 同步 |
+| `diff/*.diff` | 差異 | 對 1.0.83 原檔之 unified diff（`git diff --no-index`）；三個新檔為 `*.new.diff`（`diff -u /dev/null`） |
+| `驗證截圖/*.png`、`驗證截圖/verify.json` | 證據 | 修改版於真瀏覽器之量測與截圖（見第 3 節） |
+| `驗證腳本/zz_wwp_verify.mjs` | 工具 | Playwright 驗證腳本（27 項判準）；`zz_perm_probe.mjs`／`zz_perm_zoom.mjs` 為修改前之量測腳本（w-screenctl／Playwright） |
+| `驗證腳本/build.log`、`lint.log` | 證據 | vue-cli 建置與 eslint 輸出 |
+
+未隨附：`dist/`（請依套件自身流程 `npm run build` 再 `toolg/genEntry.mjs` 產 `index.tmp`）、`docs/`、`w-web-perm.umd.js`（`src/perm.mjs`／`getPerm.mjs` 未動，umd 不受影響）。
+
+## 2. 建置與驗證方式（可重現）
+
+1. 把 1.0.83 之 `src/`、`public/`、`babel.config.js`、`vue.config.js`、`package.json`、`.eslintrc.js` 複製到主專案 `tmp/wwp_build/`，覆蓋本資料夾之 `src/`，以主專案之 `@vue/cli-service` 5.0.9 建置（相依皆自主專案 `node_modules` 解析，版本與 `rddmanager_2_perm` 相同）：`vue-cli-service build`，12 秒完成，無錯誤。
+2. `vue-cli-service lint --no-fix` 掃上列 11 檔：新增之三檔與本次改動之行皆無錯誤；剩餘 8 筆 `brace-style` 全在原檔既有之 `.then(() => { okSave = true })` 一行寫法（`LayoutContentGrups.vue:1224`、`LayoutContentPemis.vue:1226`、`VeGrupBlngUsers.vue:956`、`VePemiBlngGrups.vue:956`），非本次改動，未動。
+3. 以 `rddmanager_2_perm/test/e2e-srv.mjs` 於另一 cwd（含建置後之 `dist/`）啟動第二個後端於埠 11016，資料庫為 e2e 種子快照之複本，設定檔以 `kpLangExt` 帶入 `belongGrups`／`chipsShowAll`／`chipsPopupTitle`（效果同 `server/procLang.mjs` 之修改，因後端仍載入 node_modules 內之原版 procLang）。
+4. `驗證腳本/zz_wwp_verify.mjs`：Playwright 1600×900（放大圖 DPR 3），自單一登入系統以真實 UI 登入取得權杖後開 `http://localhost:11016/?token=…`，真滑鼠 hover／點擊，逐條量測。
+
+## 3. 驗證結果（27 項判準全數通過，`驗證截圖/verify.json`）
+
+| 判準（對應建議書第 8 節） | 實測 |
+|---|---|
+| 主表欄序 | 管理權限群組：名稱、說明、管控使用權限、管控所屬使用者；管理權限：名稱、說明、管控對象、管控所屬權限群組（`A-*.png`） |
+| 模式控制項幾何 | 整顆 56×22（外框 `border-radius` 獨立 4px、嵌 chip `4px 0 0 4px`），落在 27px 儲存格內（y 297.8～319.8 對 293～320），四個對話框皆同（`B1`、`C1`、`D1`、`E1`） |
+| 儲存格焦點框 | hover 與點擊後儲存格 `border` 皆為透明，class 含 `no-border`（`B2`、`B3`、`G2`、`G3`） |
+| 清單浮層 | 56 寬、兩列各 28px、依序 OR、AND，左緣與控制項對齊（941 對 940.9）；點 AND 後 chip 顯示 AND 且清單收起（`B3`、`B4`、`C3`、`E2`、`G3`） |
+| chip | 相鄰間距 4px、整顆與內層皆 22px（`G1`）；`系統管理者編輯_權限群組` 列 94 顆時儲存格內第 1 個元素為「⋯ 94」鈕、第 2 個為本項醒目 chip（`B1`、`G1`） |
+| 展開全部 | 浮層 560×488（位於視窗內），列出 94 顆、本項第 1 顆且醒目，標題「所屬權限名稱：共 94 項」（`B5`）；唯讀態仍可開（`F2`） |
+| 未勾選列 | 所屬對話框：無任何模式控制項；勾選後本項 chip 立即成為第 1 顆並帶下拉（`B6`）。使用對話框：控制項透明度 0.6、無箭頭、點擊不展開（`C1`～`C3`） |
+| 唯讀（展示）態 | 本項 chip 之模式段為純文字、無箭頭、無下拉；勾選框 `disabled`（`F1`） |
+
+## 4. 已知事項與未涵蓋
+
+1. 儲存格焦點框之根因在 `w-aggrid-vue`（`WAggridVue.vue:2874` 只寫 `:focus`），本修改版於 `App.vue` 先行覆寫，見 `建議w-aggrid-vue修正.md`。
+2. `WPopup` 展開中按 Escape 不關閉（`w-component-vue` 之 `modeHide` 只有 click／mousedown），本次未動。
+3. 只驗證 `cht`；`eng` 之字串已同步但未開畫面看。
+4. 套件自身之測試（若有）未執行；`dist/` 未重建。
+5. 兩個「所屬」對話框之欄序改為「名稱、是否使用、所屬…名稱」，若不採用，只需把 `genOpt` 之 `ks` 順序改回並保留其餘改動。
+6. 主系統端後續（非套件端工作）：套件發版後重寫 `rddmanager_2_perm/spec` 之相關案例、重產標準圖、改 e2e helper（原以 `width:72px` 行內樣式定位下拉整顆，改後為 `width:56px`，且本項 chip 之下拉須以 chip 為錨）、改操作手冊 C 冊。

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/server_procLang.mjs.diff

@@ -0,0 +1,31 @@
+diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/server/procLang.mjs "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/server/procLang.mjs"
+index 3550d24..17966da 100644
+--- a/../rddmanager_2_perm/node_modules/w-web-perm/server/procLang.mjs
++++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/server/procLang.mjs"
+@@ -262,9 +262,9 @@ let kpLang = {
+         eng: `Use users`,
+         cht: `管控所屬使用者`,
+     },
+-    belongGrups: {
++    belongGrups: { //與 belongUsers(管控所屬使用者)同類之反向參照欄, 中文補「管控」以對稱(2026-09-15 業主指正)
+         eng: `Use groups`,
+-        cht: `所屬權限群組`,
++        cht: `管控所屬權限群組`,
+     },
+     //目前無引用,保留供日後使用(見 spec/設計要點與取捨.md ADR-014)
+     // belongPemis: {
+@@ -279,6 +279,14 @@ let kpLang = {
+         eng: `Use permissions`,
+         cht: `所屬權限名稱`,
+     },
++    chipsShowAll: { //關聯 chip 列表(RelationChips)之「展開全部」鈕提示
++        eng: `Show all`,
++        cht: `展開全部`,
++    },
++    chipsPopupTitle: { //關聯 chip 列表之展開浮層標題, {title} 為欄名(belongGrupsNames/belongPemisNames), {n} 為數量
++        eng: `{title} ({n} in total)`,
++        cht: `{title}：共 {n} 項`,
++    },
+ 
+     isAdmin: {
+         eng: `Administrator`,

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_App.vue.diff

@@ -0,0 +1,19 @@
+diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/App.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/App.vue"
+index 55ec0af..315c79e 100644
+--- a/../rddmanager_2_perm/node_modules/w-web-perm/src/App.vue
++++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/App.vue"
+@@ -175,6 +175,14 @@ button {
+     font-family: inherit;
+ }
+ 
++/* 關聯對話框之儲存格內有自己的控制項(模式下拉、勾選框、chip 下拉)時, 各 Ve*.vue 以 kpHeadFocusHighlight=false 讓 w-aggrid-vue 加 no-border,
++   但 w-aggrid-vue 2.0.86 之覆寫只寫 :focus(WAggridVue.vue:2874), 焦點落在儲存格之子元素時 ag-grid 31 以 :focus-within 畫框(ag-grid.css:6230),
++   故此處補 :focus-within; 待 w-aggrid-vue 修正(見 建議w-aggrid-vue修正.md)後可移除 */
++.CompCssWAggridVue .no-border.ag-cell:focus-within {
++    border-color: transparent !important;
++    outline: none;
++}
++
+ .fade-enter-active {
+   animation: go 1s;
+ }

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_LayoutContentGrups.vue.diff

@@ -0,0 +1,40 @@
+diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/LayoutContentGrups.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/LayoutContentGrups.vue"
+index f6b9ad4..e1f5076 100644
+--- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/LayoutContentGrups.vue
++++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/LayoutContentGrups.vue"
+@@ -306,13 +306,13 @@ export default {
+             isEditable: false,
+             isModified: false,
+ 
+-            tabKeys: [
++            tabKeys: [ //關聯欄之欄序: 本項自己管控的(管控使用權限)在左, 由上層帶過來的(管控所屬使用者)在右
+                 'id',
+                 'name',
+                 'description',
+                 'from',
+-                'belongUsers',
+                 'cpemis',
++                'belongUsers',
+                 'userId',
+                 'timeCreate',
+                 'userIdUpdate',
+@@ -322,8 +322,8 @@ export default {
+                 'name',
+                 'description',
+                 'from',
+-                'belongUsers',
+                 'cpemis',
++                'belongUsers',
+                 'userId',
+                 'timeCreate',
+                 'userIdUpdate',
+@@ -333,8 +333,8 @@ export default {
+                 'name',
+                 'description',
+                 // 'from',
+-                'belongUsers',
+                 'cpemis',
++                'belongUsers',
+                 // 'userId',
+                 // 'timeCreate',
+                 // 'userIdUpdate',

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_LayoutContentPemis.vue.diff

@@ -0,0 +1,40 @@
+diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/LayoutContentPemis.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/LayoutContentPemis.vue"
+index 524b4bd..77f32c9 100644
+--- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/LayoutContentPemis.vue
++++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/LayoutContentPemis.vue"
+@@ -306,13 +306,13 @@ export default {
+             isEditable: false,
+             isModified: false,
+ 
+-            tabKeys: [
++            tabKeys: [ //關聯欄之欄序: 本項自己管控的(管控對象)在左, 由上層帶過來的(管控所屬權限群組)在右
+                 'id',
+                 'name',
+                 'description',
+                 'from',
+-                'belongGrups',
+                 'crules',
++                'belongGrups',
+                 'userId',
+                 'timeCreate',
+                 'userIdUpdate',
+@@ -322,8 +322,8 @@ export default {
+                 'name',
+                 'description',
+                 'from',
+-                'belongGrups',
+                 'crules',
++                'belongGrups',
+                 'userId',
+                 'timeCreate',
+                 'userIdUpdate',
+@@ -333,8 +333,8 @@ export default {
+                 'name',
+                 'description',
+                 // 'from',
+-                'belongGrups',
+                 'crules',
++                'belongGrups',
+                 // 'userId',
+                 // 'timeCreate',
+                 // 'userIdUpdate',