@hupan56/wlkj 2.5.0 → 2.7.0

package/templates/qoder/templates/prototype-web.html

@@ -6,86 +6,307 @@
   <title>{{TITLE}} - Web 管理端</title>
   <style>
     :root {
-      /* Vben Admin Design Tokens */
-      --primary: 212 100% 45%;
-      --primary-light: 212 100% 95%;
-      --destructive: 359.33 100% 65.1%;
-      --success: 144 57% 58%;
-      --warning: 42 84% 61%;
-      
+      /* Vben Admin Design Tokens. These mirror
+         data/index/style-index.json layout_fingerprint.color_primary
+         (ICS = hsl(214.58, 86.34%, 59.8%)). DO NOT hardcode #1890ff. */
+      --primary: 214.58 86.34% 59.8%;
+      --primary-light: 214.58 86.34% 95%;
+      --destructive: 0 100% 68.04%;
+      --success: 100.15 53.97% 49.41%;
+      --warning: 36 100% 63.73%;
+
       --background: 0 0% 100%;
       --background-deep: 216 20.11% 95.47%;
       --card: 0 0% 100%;
-      
+
       --foreground: 210 6% 21%;
       --muted-foreground: 240 3.8% 46.1%;
-      
+
       --border: 240 5.9% 90%;
       --input: 240deg 5.88% 90%;
-      
-      --radius: 0.5rem;
+
+      --radius: 0.25rem;
       --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+      /* mixed-nav shell widths (mirror ICS sidebar.width=160) */
+      --topbar-height: 56px;
+      --sidebar-width: 160px;
     }
-    
+
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    
+
     body {
       font-family: var(--font-family);
       background: hsl(var(--background-deep));
       color: hsl(var(--foreground));
       min-height: 100vh;
     }
-    
-    .layout {
+
+    /* ============================================================
+       mixed-nav layout shell (Vben 'mixed-nav'):
+         顶部栏 = logo + 一级菜单 + 右侧操作
+         左侧栏 = 当前一级下的二级菜单 (可折叠出三级)
+         主区   = 面包屑 + 标签页 tab(三四级) + 内容
+       这是 ICS 的真实布局骨架。生成时务必保留三段式结构,
+       不要退化成扁平单级 sidebar。
+       ============================================================ */
+    .app-shell {
       display: flex;
+      flex-direction: column;
       min-height: 100vh;
     }
-    
+
+    /* --- 顶部栏 --- */
+    .topbar {
+      height: var(--topbar-height);
+      display: flex;
+      align-items: center;
+      background: hsl(var(--background));
+      border-bottom: 1px solid hsl(var(--border));
+      padding: 0 16px;
+      flex-shrink: 0;
+      gap: 16px;
+    }
+
+    .topbar-logo {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 600;
+      font-size: 15px;
+      white-space: nowrap;
+      color: hsl(var(--foreground));
+    }
+
+    .topbar-logo .logo-mark {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      background: hsl(var(--primary));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 14px;
+    }
+
+    /* 一级菜单:横向 tab */
+    .top-menu {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: 1;
+      height: 100%;
+      overflow-x: auto;
+    }
+
+    .top-menu-item {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 14px;
+      cursor: pointer;
+      color: hsl(var(--muted-foreground));
+      font-size: 14px;
+      white-space: nowrap;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+    }
+
+    .top-menu-item:hover {
+      color: hsl(var(--primary));
+    }
+
+    .top-menu-item.active {
+      color: hsl(var(--primary));
+      border-bottom-color: hsl(var(--primary));
+      font-weight: 500;
+    }
+
+    .topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-shrink: 0;
+    }
+
+    .topbar-right .icon-btn {
+      width: 32px;
+      height: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius);
+      cursor: pointer;
+      color: hsl(var(--muted-foreground));
+    }
+
+    .topbar-right .icon-btn:hover {
+      background: hsl(var(--background-deep));
+    }
+
+    .topbar-right .avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background: hsl(var(--primary) / 0.15);
+      color: hsl(var(--primary));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    /* --- 主体 = 左侧栏 + 主区 --- */
+    .body-area {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+    }
+
     .sidebar {
-      width: 200px;
+      width: var(--sidebar-width);
       background: hsl(var(--background));
       border-right: 1px solid hsl(var(--border));
-      padding: 16px 0;
+      padding: 8px 0;
+      flex-shrink: 0;
+      overflow-y: auto;
     }
-    
+
+    /* 二级菜单项 */
     .sidebar-item {
-      padding: 12px 24px;
+      padding: 10px 16px;
       cursor: pointer;
       color: hsl(var(--muted-foreground));
+      font-size: 14px;
       transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
-    
+
     .sidebar-item:hover,
     .sidebar-item.active {
       background: hsl(var(--primary-light));
       color: hsl(var(--primary));
     }
-    
+
+    .sidebar-item.active {
+      font-weight: 500;
+      border-left: 3px solid hsl(var(--primary));
+    }
+
+    /* 三级菜单:用原生 <details> 折叠,零 JS 依赖 */
+    .sidebar-group > summary {
+      list-style: none;
+      cursor: pointer;
+      padding: 10px 16px;
+      color: hsl(var(--muted-foreground));
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: all 0.2s;
+    }
+
+    .sidebar-group > summary::-webkit-details-marker { display: none; }
+
+    .sidebar-group > summary:hover {
+      background: hsl(var(--primary-light));
+      color: hsl(var(--primary));
+    }
+
+    .sidebar-group > summary::after {
+      content: '›';
+      transform: rotate(90deg);
+      transition: transform 0.2s;
+      font-size: 14px;
+    }
+
+    .sidebar-group[open] > summary::after {
+      transform: rotate(-90deg);
+    }
+
+    /* 三级菜单子项(缩进) */
+    .sidebar-sub {
+      padding-left: 16px;
+    }
+
+    .sidebar-sub .sidebar-item {
+      font-size: 13px;
+      padding-left: 20px;
+    }
+
+    /* --- 主区 --- */
     .main-content {
       flex: 1;
-      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
     }
-    
+
+    /* 标签页 tabbar(承载三四级页面切换) */
+    .tabbar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 12px;
+      background: hsl(var(--background));
+      border-bottom: 1px solid hsl(var(--border));
+      overflow-x: auto;
+      flex-shrink: 0;
+    }
+
+    .tab-item {
+      padding: 5px 12px;
+      font-size: 13px;
+      color: hsl(var(--muted-foreground));
+      cursor: pointer;
+      border-radius: var(--radius);
+      white-space: nowrap;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      transition: all 0.2s;
+    }
+
+    .tab-item.active {
+      background: hsl(var(--primary-light));
+      color: hsl(var(--primary));
+    }
+
+    .tab-item .tab-close {
+      opacity: 0.5;
+      font-size: 12px;
+    }
+
+    .content-scroll {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 24px;
+    }
+
     .breadcrumb {
       margin-bottom: 16px;
       color: hsl(var(--muted-foreground));
       font-size: 14px;
     }
-    
+
     .breadcrumb span { color: hsl(var(--primary)); }
-    
+
     .page-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
     }
-    
+
     .page-title {
       font-size: 20px;
       font-weight: 600;
     }
-    
+
     .card {
       background: hsl(var(--card));
       border-radius: var(--radius);
@@ -93,17 +314,17 @@
       padding: 16px;
       margin-bottom: 16px;
     }
-    
+
     /* VxeGrid Table Style */
     .vxe-table {
       width: 100%;
       border-collapse: collapse;
     }
-    
+
     .vxe-table-header {
       background: hsl(220deg 13% 95%);
     }
-    
+
     .vxe-table-header th {
       padding: 12px 16px;
       text-align: left;
@@ -111,16 +332,16 @@
       color: hsl(0deg 0% 12%);
       border-bottom: 1px solid hsl(0deg 0% 94%);
     }
-    
+
     .vxe-table-body td {
       padding: 12px 16px;
       border-bottom: 1px solid hsl(var(--border));
     }
-    
+
     .vxe-table-body tr:hover {
       background: hsl(var(--primary) / 0.05);
     }
-    
+
     /* Search Form */
     .search-form {
       display: flex;
@@ -132,19 +353,19 @@
       border-radius: var(--radius);
       border: 1px solid hsl(var(--border));
     }
-    
+
     .form-item {
       display: flex;
       align-items: center;
       gap: 8px;
     }
-    
+
     .form-item label {
       font-size: 14px;
       color: hsl(var(--muted-foreground));
       white-space: nowrap;
     }
-    
+
     .form-item input,
     .form-item select {
       height: 32px;
@@ -155,14 +376,14 @@
       font-size: 14px;
       min-width: 200px;
     }
-    
+
     .form-item input:focus,
     .form-item select:focus {
       outline: none;
       border-color: hsl(var(--primary));
       box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
     }
-    
+
     /* Buttons */
     .btn {
       height: 32px;
@@ -173,59 +394,59 @@
       border: 1px solid transparent;
       transition: all 0.2s;
     }
-    
+
     .btn-primary {
       background: hsl(var(--primary));
       color: white;
     }
-    
+
     .btn-primary:hover {
       background: hsl(var(--primary) / 0.9);
     }
-    
+
     .btn-outline {
       background: transparent;
       border-color: hsl(var(--border));
       color: hsl(var(--foreground));
     }
-    
+
     .btn-outline:hover {
       border-color: hsl(var(--primary));
       color: hsl(var(--primary));
     }
-    
+
     .btn-danger {
       background: hsl(var(--destructive));
       color: white;
     }
-    
+
     .actions {
       display: flex;
       gap: 8px;
     }
-    
+
     .tag {
       display: inline-block;
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 12px;
     }
-    
+
     .tag-success {
       background: hsl(var(--success) / 0.1);
       color: hsl(var(--success));
     }
-    
+
     .tag-warning {
       background: hsl(var(--warning) / 0.1);
       color: hsl(var(--warning));
     }
-    
+
     .tag-danger {
       background: hsl(var(--destructive) / 0.1);
       color: hsl(var(--destructive));
     }
-    
+
     .pagination {
       display: flex;
       justify-content: flex-end;
@@ -233,7 +454,7 @@
       gap: 8px;
       margin-top: 16px;
     }
-    
+
     .page-btn {
       width: 32px;
       height: 32px;
@@ -245,13 +466,13 @@
       background: hsl(var(--background));
       cursor: pointer;
     }
-    
+
     .page-btn.active {
       background: hsl(var(--primary));
       color: white;
       border-color: hsl(var(--primary));
     }
-    
+
     /* Highlight changed areas */
     .highlight-new {
       border: 2px dashed hsl(var(--primary));
@@ -260,51 +481,113 @@
   </style>
 </head>
 <body>
-  <div class="layout">
-    <div class="sidebar">
-      <div class="sidebar-item active">{{MODULE_NAME}}</div>
-      <div class="sidebar-item">其他模块...</div>
-    </div>
-    
-    <div class="main-content">
-      <div class="breadcrumb">
-        首页 / {{MODULE_NAME}} / <span>{{PAGE_NAME}}</span>
+  <div class="app-shell">
+
+    <!-- ===================== 顶部栏 + 一级菜单 ===================== -->
+    <!-- layout=mixed-nav: 一级菜单横向排在顶部。{{TOP_MENU}} 填一级菜单项,
+         当前模块用 class="top-menu-item active"。 -->
+    <header class="topbar">
+      <div class="topbar-logo">
+        <span class="logo-mark">I</span>
+        <span>{{LOGO_TEXT}}</span>
       </div>
-      
-      <div class="page-header">
-        <h1 class="page-title">{{PAGE_NAME}}</h1>
-        <div class="actions">
-          <button class="btn btn-outline">导出</button>
-          <button class="btn btn-primary">新增</button>
+
+      <nav class="top-menu">
+        {{TOP_MENU}}
+        <!-- 示例(替换为你的一级菜单,当前模块加 active):
+        <div class="top-menu-item">概览</div>
+        <div class="top-menu-item active">{{MODULE_NAME}}</div>
+        <div class="top-menu-item">系统管理</div>
+        -->
+      </nav>
+
+      <div class="topbar-right">
+        <div class="icon-btn" title="搜索">
+          <svg width="16" height="16" viewBox="0 0 1024 1024" fill="currentColor"><path d="M909.6 854.5L649.9 594.8C690.2 538.6 714 470.2 714 396c0-176.7-143.3-320-320-320S74 219.3 74 396s143.3 320 320 320c74.2 0 142.6-23.8 198.8-64.1l259.7 259.6c9.4 9.4 24.6 9.4 33.9 0l22.7-22.7c9.3-9.3 9.3-24.5.5-33.3zM154 396c0-132.1 107.9-240 240-240s240 107.9 240 240-107.9 240-240 240S154 528.1 154 396z"/></svg>
+        </div>
+        <div class="icon-btn" title="通知">
+          <svg width="16" height="16" viewBox="0 0 1024 1024" fill="currentColor"><path d="M880 112c-30.9 0-56 25.1-56 56v320c0 159.1-128.9 288-288 288S248 647.1 248 488V168c0-30.9-25.1-56-56-56s-56 25.1-56 56v320c0 206.1 156.9 375.1 358 396.7V928H328c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h416c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24H570V884.7C771.1 863.1 928 694.1 928 488V168c0-30.9-25.1-56-56-56z"/></svg>
         </div>
+        <div class="avatar">U</div>
       </div>
-      
-      <div class="card">
-        <div class="search-form">
-          {{SEARCH_FORM_FIELDS}}
+    </header>
+
+    <div class="body-area">
+
+      <!-- ===================== 左侧栏:二级 + 三级菜单 ===================== -->
+      <!-- {{SIDEBAR_MENU}} 填当前一级模块下的二级菜单。
+           三级用 <details class="sidebar-group"><summary>..</summary>
+           <div class="sidebar-sub">三级项</div></details> 折叠(原生,零JS)。
+           当前页对应的项加 class="sidebar-item active"。 -->
+      <aside class="sidebar">
+        {{SIDEBAR_MENU}}
+        <!-- 示例多级结构(替换为你的真实菜单层级):
+        <div class="sidebar-item active">{{PAGE_NAME}}</div>
+        <details class="sidebar-group">
+          <summary>二级菜单A</summary>
+          <div class="sidebar-sub">
+            <div class="sidebar-item">三级菜单A-1</div>
+            <div class="sidebar-item">三级菜单A-2</div>
+          </div>
+        </details>
+        <div class="sidebar-item">二级菜单B</div>
+        -->
+      </aside>
+
+      <!-- ===================== 主区:标签页 + 内容 ===================== -->
+      <main class="main-content">
+
+        <!-- 标签页 tabbar(承载三四级页面切换) -->
+        <div class="tabbar">
+          {{TABS}}
+          <!-- 示例(当前页加 active):
+          <div class="tab-item active">{{PAGE_NAME}} <span class="tab-close">×</span></div>
+          <div class="tab-item">其他页签 <span class="tab-close">×</span></div>
+          -->
         </div>
-        
-        <table class="vxe-table">
-          <thead class="vxe-table-header">
-            <tr>
-              {{TABLE_HEADERS}}
-            </tr>
-          </thead>
-          <tbody class="vxe-table-body">
-            {{TABLE_ROWS}}
-          </tbody>
-        </table>
-        
-        <div class="pagination">
-          <span>共 100 条</span>
-          <div class="page-btn">1</div>
-          <div class="page-btn">2</div>
-          <div class="page-btn">3</div>
-          <div class="page-btn">...</div>
-          <div class="page-btn">10</div>
+
+        <div class="content-scroll">
+          <div class="breadcrumb">
+            首页 / {{MODULE_NAME}} / <span>{{PAGE_NAME}}</span>
+          </div>
+
+          <div class="page-header">
+            <h1 class="page-title">{{PAGE_NAME}}</h1>
+            <div class="actions">
+              <button class="btn btn-outline">导出</button>
+              <button class="btn btn-primary">新增</button>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="search-form">
+              {{SEARCH_FORM_FIELDS}}
+            </div>
+
+            <table class="vxe-table">
+              <thead class="vxe-table-header">
+                <tr>
+                  {{TABLE_HEADERS}}
+                </tr>
+              </thead>
+              <tbody class="vxe-table-body">
+                {{TABLE_ROWS}}
+              </tbody>
+            </table>
+
+            <div class="pagination">
+              <span>共 100 条</span>
+              <div class="page-btn">1</div>
+              <div class="page-btn active">2</div>
+              <div class="page-btn">3</div>
+              <div class="page-btn">...</div>
+              <div class="page-btn">10</div>
+            </div>
+          </div>
         </div>
-      </div>
+      </main>
+
     </div>
   </div>
 </body>
-</html>
+</html>