菜单修改优化

backend/web_source/admin.html

@@ -713,6 +713,136 @@
             overflow: hidden;
         }
 
+        .column-permission-tree {
+            max-height: 280px;
+            overflow: auto;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 8px 10px;
+            background: #fff;
+        }
+
+        .column-tree-node {
+            display: block;
+            padding: 4px 0;
+        }
+
+        .column-tree-group + .column-tree-group {
+            margin-top: 8px;
+        }
+
+        .column-tree-group-toggle {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            min-height: 36px;
+            padding: 6px 10px;
+            border: 0;
+            border-radius: 4px;
+            background: #f3f5f8;
+            color: #24292f;
+            cursor: pointer;
+            text-align: left;
+        }
+
+        .column-tree-group-toggle::before {
+            content: '\203A';
+            flex: 0 0 20px;
+            font-size: 20px;
+            line-height: 1;
+            color: #667085;
+            transition: transform 0.15s ease;
+        }
+
+        .column-tree-group-toggle[aria-expanded="true"]::before {
+            transform: rotate(90deg);
+        }
+
+        .column-tree-group-toggle:hover {
+            background: #e9edf3;
+        }
+
+        .column-tree-group-toggle:focus-visible {
+            outline: 2px solid #3159d8;
+            outline-offset: -2px;
+        }
+
+        .column-tree-group-name {
+            font-size: 13px;
+            font-weight: 600;
+        }
+
+        .column-tree-group-count {
+            margin-left: auto;
+            font-size: 12px;
+            color: #667085;
+        }
+
+        .column-tree-group-body {
+            padding-top: 4px;
+        }
+
+        .column-tree-row {
+            display: flex;
+            align-items: center;
+            min-height: 28px;
+        }
+
+        .column-tree-node label {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            margin: 0;
+            min-height: 28px;
+            font-size: 13px;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .column-tree-toggle,
+        .column-tree-toggle-spacer {
+            flex: 0 0 24px;
+            width: 24px;
+            height: 28px;
+        }
+
+        .column-tree-toggle {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: #666;
+            cursor: pointer;
+        }
+
+        .column-tree-toggle::before {
+            content: '\203A';
+            display: block;
+            font-size: 20px;
+            line-height: 1;
+            transition: transform 0.15s ease;
+        }
+
+        .column-tree-toggle[aria-expanded="true"]::before {
+            transform: rotate(90deg);
+        }
+
+        .column-tree-toggle:hover {
+            color: #3159d8;
+        }
+
+        .column-tree-toggle:focus-visible {
+            outline: 2px solid #3159d8;
+            outline-offset: -2px;
+        }
+
+        .column-tree-node[data-depth="1"] > .column-tree-row { padding-left: 22px; }
+        .column-tree-node[data-depth="2"] > .column-tree-row { padding-left: 44px; }
+        .column-tree-node input[type="checkbox"] { width: auto; }
+        .column-tree-node .inherited-label { color: #999; }
+
         .multi-select-native {
             position: absolute;
             opacity: 0;
@@ -1416,9 +1546,9 @@
                 </select>
             </div>
             <div class="form-group" id="formGroupCreateColumns">
-                <label>菜单权限（可多选，Ctrl/Shift 点选）</label>
+                <label>菜单权限（勾选父菜单会继承全部子菜单）</label>
                 <div id="createColumnCards" class="column-permission-cards"></div>
-                <select id="createColumnPermissionWrap" class="column-permission-select" multiple></select>
+                <div id="createColumnPermissionWrap" class="column-permission-tree"></div>
             </div>
             <button class="btn" id="btnCreate">创建用户</button>
             <p class="msg" id="msgCreate"></p>
@@ -1484,6 +1614,10 @@
                         <option value="app">软件(app)</option>
                     </select>
                 </div>
+                <div class="form-group" style="min-width:220px;">
+                    <label>父菜单（可选）</label>
+                    <select id="columnParentId"><option value="">无（根菜单）</option></select>
+                </div>
                 <button class="btn" id="btnAddColumn">新增菜单</button>
             </div>
             <p class="msg" id="msgColumn"></p>
@@ -1497,6 +1631,7 @@
                         <th>菜单名称</th>
                         <th>栏目标识</th>
                         <th>菜单类型</th>
+                        <th>父菜单</th>
                         <th>排序</th>
                         <th>菜单路由</th>
                         <th>创建时间</th>
@@ -2233,9 +2368,9 @@
                 <input type="text" id="editCreatorName" readonly style="background:#f5f5f5;">
             </div>
             <div class="form-group">
-                <label>菜单权限（可多选，Ctrl/Shift 点选）</label>
+                <label>菜单权限（勾选父菜单会继承全部子菜单）</label>
                 <div id="editColumnCards" class="column-permission-cards"></div>
-                <select id="editColumnPermissionWrap" class="column-permission-select" multiple></select>
+                <div id="editColumnPermissionWrap" class="column-permission-tree"></div>
             </div>
             <p class="msg" id="msgEdit"></p>
             <div style="margin-top:16px;display:flex;gap:8px;">
@@ -2311,6 +2446,10 @@
                     <option value="app">软件(app)</option>
                 </select>
             </div>
+            <div class="form-group">
+                <label>父菜单（可选）</label>
+                <select id="editColumnParentId"><option value="">无（根菜单）</option></select>
+            </div>
             <p class="msg" id="msgEditColumn"></p>
             <div style="margin-top:16px;display:flex;gap:8px;">
                 <button class="btn" id="btnSaveColumn">保存</button>
@@ -2607,7 +2746,7 @@
             </div>
         </div>
     </div>
-    <script src="/static/admin.js?v=shop-key-remark-1"></script>
+    <script src="/static/admin.js?v=permission-tree-groups-1"></script>
 </body>
 
 </html>