feat(web): add Figma layout structure comparison audit page (11 gaps analyzed)

2026-06-09 10:00:30 +08:00 · 2026-05-18 23:34:36 +08:00
parent 34e15dd650
commit 80a6e2716b
3 changed files with 152 additions and 108 deletions
@@ -107,13 +107,13 @@ const routes = [
      {
        path: "license-compare",
        name: "license-compare",
-        component: () => import("../views/LicenseCompareView.vue"),
+        component: () => import("../views/LayoutCompareView.vue"),
        meta: { roles: ["SYS_ADMIN", "DEVELOPER"] },
      },
    ],
  },
  { path: "/403", name: "forbidden", component: () => import("../views/ForbiddenView.vue") },
-  { path: "/license-compare-public", name: "license-compare-public", component: () => import("../views/LicenseCompareView.vue") },
+  { path: "/layout-compare", name: "layout-compare", component: () => import("../views/LayoutCompareView.vue") },
  { path: "/:pathMatch(.*)*", name: "notfound", component: () => import("../views/NotFoundView.vue") },
 ];

@@ -0,0 +1,150 @@
+<template>
+  <div style="font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f0f2f5;min-height:100vh;padding:20px">
+    <!-- 页面标题 -->
+    <div style="max-width:1400px;margin:0 auto 20px">
+      <h1 style="font-size:22px;font-weight:700;color:#303133;margin-bottom:6px">布局结构对比审核</h1>
+      <p style="font-size:13px;color:#909399">Figma「数字资源系统-资源管理」vs delivery-platform-ui「MainLayout」</p>
+    </div>
+
+    <!-- 整体布局对比 -->
+    <div style="max-width:1400px;margin:0 auto;display:flex;gap:20px;margin-bottom:20px">
+      <!-- Figma 布局 -->
+      <div style="flex:1;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden">
+        <div style="padding:12px 16px;font-weight:600;font-size:14px;color:#2C3E6B;border-bottom:1px solid #EBEEF5;display:flex;align-items:center;gap:8px">
+          <span style="background:#2C3E6B;color:#fff;padding:2px 8px;border-radius:3px;font-size:11px">Figma</span> 数字资源系统-资源管理
+        </div>
+        <div style="padding:20px;font-size:13px">
+          <div style="background:#EAEFFA;border:1px dashed #2C3E6B;border-radius:4px;padding:2px">
+            <!-- Header -->
+            <div style="background:#fff;height:30px;margin-bottom:2px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #EBEEF5;font-size:11px;color:#909399">
+              <span>headerMenu 顶部菜单导航 <b>1920×60</b></span>
+              <span style="color:#606266">Logo + 4项菜单 + 搜索框 + 🔔2 + 用户 + 设置</span>
+            </div>
+            <div style="display:flex">
+              <!-- Sidebar -->
+              <div style="background:#fff;width:70px;min-height:280px;border-right:1px solid #EBEEF5;padding:4px 6px;font-size:10px;color:#909399">
+                <div style="font-weight:600;color:#303133;margin-bottom:4px">Menu <b>232×1021</b></div>
+                <div style="background:#F2F5FC;padding:2px 4px;margin:2px 0;border-radius:2px">Logo 232×56</div>
+                <div style="background:#E8EDF5;padding:2px 4px;margin:2px 0;border-radius:2px">菜单1 · 76px</div>
+                <div style="padding:2px 4px;margin:1px 0">菜单2 · 50px</div>
+                <div style="padding:2px 4px;margin:1px 0">菜单3 · 42px</div>
+                <div style="padding:2px 4px;margin:1px 0">菜单4 · 88px</div>
+                <div style="padding:2px 4px;margin:1px 0">… 6 more</div>
+                <div style="margin-top:8px;padding:2px 4px;color:#606266">底部 232×56</div>
+              </div>
+              <!-- Content -->
+              <div style="flex:1;padding:5px 8px">
+                <div style="background:#fff;padding:4px 8px;font-size:10px;color:#606266;margin-bottom:4px;border-radius:2px;border:1px solid #EBEEF5">
+                  ▸ 面包屑 1648×<b>46px</b> &nbsp; 数字资源 › 资源管理
+                </div>
+                <div style="display:flex;gap:4px">
+                  <div style="background:#fff;width:85px;min-height:180px;border:1px solid #EBEEF5;border-radius:2px;padding:4px;font-size:10px">
+                    <div style="font-weight:600;color:#303133;margin-bottom:3px">Tree <b>280×909</b></div>
+                    <div style="background:#F2F5FC;padding:2px 4px;margin:2px 0;border-radius:2px">🔍 搜索 240×32</div>
+                    <div style="padding:2px 4px;color:#909399;margin:1px 0">├ 分类A</div>
+                    <div style="padding:2px 4px;color:#909399;margin:1px 0">│ ├ 子类1</div>
+                    <div style="padding:2px 4px;color:#909399;margin:1px 0">│ └ 子类2</div>
+                    <div style="padding:2px 4px;color:#909399;margin:1px 0">└ 分类B</div>
+                  </div>
+                  <div style="flex:1;border:1px dashed #D6DFF0;border-radius:2px;padding:4px;font-size:10px">
+                    <div style="font-weight:600;color:#303133;margin-bottom:3px">主内容区 <b>1368×959</b></div>
+                    <div style="background:#F2F5FC;padding:3px 6px;margin:2px 0;border-radius:2px">工具栏 1368×<b>144px</b>（筛选/操作按钮）</div>
+                    <div style="padding:3px 6px;margin:2px 0;color:#909399">表格/内容区 1368×<b>814px</b></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 当前前端布局 -->
+      <div style="flex:1;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden">
+        <div style="padding:12px 16px;font-weight:600;font-size:14px;color:#409EFF;border-bottom:1px solid #EBEEF5;display:flex;align-items:center;gap:8px">
+          <span style="background:#409EFF;color:#fff;padding:2px 8px;border-radius:3px;font-size:11px">NOW</span> delivery-platform-ui MainLayout
+        </div>
+        <div style="padding:20px;font-size:13px">
+          <div style="background:#f0f2f5;border:1px dashed #409EFF;border-radius:4px;padding:2px">
+            <div style="background:#fff;height:30px;margin-bottom:2px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;border-bottom:1px solid #EBEEF5;font-size:11px;color:#909399">
+              <span>el-header 自适应高度 &nbsp; <span style="color:#606266">用户名 + 退出按钮</span></span>
+            </div>
+            <div style="display:flex">
+              <div style="background:#001529;width:70px;min-height:280px;padding:4px 6px;font-size:10px;color:#fff">
+                <div style="font-weight:600;margin-bottom:4px">Aside <b>220px</b></div>
+                <div style="background:rgba(255,255,255,.1);padding:2px 4px;margin:2px 0;border-radius:2px">首页</div>
+                <div style="background:rgba(255,255,255,.1);padding:2px 4px;margin:2px 0;border-radius:2px">客户管理</div>
+                <div style="padding:2px 4px;margin:1px 0;opacity:.7">项目管理</div>
+                <div style="padding:2px 4px;margin:1px 0;opacity:.7">合同管理</div>
+                <div style="padding:2px 4px;margin:1px 0;opacity:.7">交付管理</div>
+                <div style="padding:2px 4px;margin:1px 0;opacity:.7">许可 SN</div>
+                <div style="padding:2px 4px;margin:1px 0;opacity:.7">Callback</div>
+                <div style="padding:2px 4px;margin:1px 0;opacity:.7">集成环境</div>
+                <div style="padding:2px 4px;margin:1px 0;opacity:.7">产品线</div>
+              </div>
+              <div style="flex:1;padding:5px 8px">
+                <div style="background:#fff;padding:4px 8px;font-size:10px;color:#F56C6C;margin-bottom:4px;border-radius:2px;border:1px solid #FDE2E2">
+                  ❌ 无面包屑
+                </div>
+                <div style="border:1px dashed #C0C4CC;border-radius:2px;padding:4px;font-size:10px;min-height:180px">
+                  <div style="font-weight:600;color:#303133;margin-bottom:3px">el-main 自适应</div>
+                  <div style="background:#fff;padding:3px 6px;margin:2px 0;border-radius:2px;border:1px solid #EBEEF5">
+                    el-card 列表页 · 全宽
+                  </div>
+                  <div style="padding:2px 6px;color:#909399;margin:1px 0">搜索栏 + 新建按钮</div>
+                  <div style="padding:2px 6px;color:#909399;margin:1px 0">el-table + 分页</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 差异分析表 -->
+    <div style="max-width:1400px;margin:0 auto">
+      <div style="background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden">
+        <div style="padding:12px 16px;font-weight:600;font-size:14px;color:#303133;border-bottom:1px solid #EBEEF5">📐 逐项差异分析</div>
+        <div style="overflow-x:auto">
+          <table style="width:100%;border-collapse:collapse;font-size:13px">
+            <thead>
+              <tr style="background:#F2F5FC">
+                <th style="padding:10px 14px;text-align:left;width:160px">布局元素</th>
+                <th style="padding:10px 14px;text-align:left;width:200px">Figma 规范</th>
+                <th style="padding:10px 14px;text-align:left;width:200px">当前实现</th>
+                <th style="padding:10px 14px;text-align:left;width:80px">状态</th>
+                <th style="padding:10px 14px;text-align:left">建议</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="d in diffs" :key="d.element" style="border-bottom:1px solid #EBEEF5">
+                <td style="padding:10px 14px;font-weight:600;color:#303133">{{ d.element }}</td>
+                <td style="padding:10px 14px;color:#606266">{{ d.figma }}</td>
+                <td style="padding:10px 14px;color:#606266">{{ d.current }}</td>
+                <td style="padding:10px 14px">
+                  <span :style="{display:'inline-block',padding:'2px 8px',borderRadius:'3px',fontSize:'11px',fontWeight:600,color:'#fff',background:d.gap==='high'?'#F56C6C':d.gap==='med'?'#E6A23C':'#67C23A'}">{{ d.gap==='high'?'缺失':d.gap==='med'?'差异':'一致' }}</span>
+                </td>
+                <td style="padding:10px 14px;color:#303133">{{ d.suggestion }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const diffs = [
+  { element:'整体框架', figma:'Header(60) + Sidebar(232) + Content', current:'Header(Var) + Sidebar(220) + Content', gap:'low', suggestion:'✅ 结构与 Figma 一致' },
+  { element:'Header 顶部导航', figma:'Logo(370×28) + 4菜单项(76×32) + 搜索框(240×32) + 通知Badge + 用户下拉', current:'仅「用户名 + 退出按钮」', gap:'high', suggestion:'🔴 需增加：搜索框、通知Badge、顶部菜单导航项' },
+  { element:'Sidebar 侧边栏', figma:'232px宽 | Logo(56px高) + 11菜单项(42-88px不等高) + 底部信息', current:'220px宽(深色背景) | 9菜单项(等高等间距)', gap:'med', suggestion:'⚠️ 宽度OK但菜单项缺少高度区分(主菜单/子菜单)，底部缺少版本信息' },
+  { element:'面包屑 Breadcrumb', figma:'1648×46px | 内容区顶部 | 「数字资源 › 资源管理」', current:'❌ 完全缺失', gap:'high', suggestion:'🔴 各详情页/列表页顶部增加 el-breadcrumb，显示层级路径' },
+  { element:'内容区左侧树', figma:'Tree面板 280×909px | 搜索框 + 资源分类树', current:'❌ 完全缺失', gap:'high', suggestion:'🔴 许可证管理页增加左侧 el-tree 展示客户/项目层级' },
+  { element:'主内容区宽高比', figma:'Tree(280) + 工具栏(144) + 表格(814)', current:'全宽卡片(el-card) + 搜索栏 + 表格', gap:'med', suggestion:'⚠️ 参考 Tree+Main 双栏布局；工具栏可压缩为搜索行' },
+  { element:'内容区顶部间距', figma:'面包屑距顶部20px, 面包屑与Tree间距0', current:'卡片直接顶格，无面包屑层', gap:'med', suggestion:'⚠️ 内容区顶部预留 12-16px padding + 面包屑行' },
+  { element:'搜索栏位置', figma:'Header右侧(header内) + Tree面板内(小搜索)', current:'列表页卡片内(el-card header)', gap:'med', suggestion:'⚠️ 全局搜索放Header，页面内搜索放卡片header OK' },
+  { element:'通知Badge', figma:'Header 右侧红色圆点 Badge(20×20) + 数字2', current:'❌ 完全缺失', gap:'high', suggestion:'🔴 Header 加 el-badge 显示待处理任务数(Callback)' },
+  { element:'菜单选中态', figma:'Instance 组件支持多级高亮', current:'el-menu router default-active OK', gap:'low', suggestion:'✅ Element Plus 原生支持' },
+  { element:'响应式', figma:'固定 1920px(显示器标准)', current:'Element Plus 响应式 + 最小宽度', gap:'low', suggestion:'✅ 当前已适配' },
+]
+</script>
@@ -1,106 +0,0 @@
-<template>
-  <div style="display:flex; height:100vh; overflow:hidden; min-width:1950px">
-    <div v-for="t in themes" :key="t.name" :class="['panel', t.css]" :style="{background:t.bg}">
-      <div class="badge" :style="{background:t.badgeBg||t.brand,color:t.badgeColor||'#fff'}">
-        {{ t.label }}
-        <span v-if="t.recommend" class="recommend-tag">推荐</span>
-      </div>
-      <div class="body">
-        <div class="stat-row">
-          <div v-for="s in stats" :key="s.label" class="card" :style="{borderRadius:t.radius+'px',border:t.cardBorder}">
-            <div class="stat-num">{{ s.value }}</div><div class="stat-label">{{ s.label }}</div>
-          </div>
-        </div>
-        <div class="card" :style="{borderRadius:t.radius+'px',border:t.cardBorder}">
-          <div class="tool-row">
-            <div class="search-group">
-              <div class="input-box"><span class="input-icon">🔍</span><input v-model="keyword" placeholder="搜索许可证ID" class="native-input"></div>
-              <select v-model="filterStatus" class="native-select"><option value="">全部状态</option><option value="active">活跃</option><option value="revoked">已吊销</option><option value="expired">已过期</option></select>
-              <button class="btn" :style="{background:t.brand,color:'#fff',borderRadius:'4px'}" @click="search">查询</button>
-            </div>
-            <button class="btn btn-create" :style="{background:t.createBg||t.brand,color:'#fff',borderRadius:'4px',boxShadow:t.createShadow||'none'}" @click="create">＋ 签发许可证</button>
-          </div>
-        </div>
-        <div class="card" :style="{borderRadius:t.radius+'px',border:t.cardBorder,padding:0,overflow:'hidden'}">
-          <table class="dt"><thead><tr :style="{background:t.thBg,color:t.thColor,borderBottom:t.thBorder||'1px solid #ebeef5'}"><th>许可证 ID</th><th>租户</th><th class="c80">类型</th><th class="c60">终端</th><th class="c70">宽限</th><th class="c70">状态</th><th class="c100">操作</th></tr></thead>
-            <tbody><tr v-for="r in list" :key="r.licenseId" :style="{borderBottom:'1px solid '+(t.rowBorder||'#ebeef5')}"><td class="td-id">{{ r.licenseId }}</td><td class="td2">{{ r.tenantId }}</td><td>{{ typeL(r.grantType) }}</td><td class="td2">{{ r.maxDevices }}</td><td class="td2">{{ r.offlineGraceDays }}天</td><td><span :style="statusS(r.status,t)">{{ statusL(r.status) }}</span></td><td><span class="act" :style="{color:t.brand}" @click="detail(r)">详情</span><span v-if="r.status==='active'" class="act" style="color:#f56c6c" @click="revoke(r)">吊销</span></td></tr></tbody>
-          </table>
-          <div class="pager"><span>共 {{ total }} 条</span><span class="pc" @click="page=Math.max(1,page-1)">‹</span><span>{{ page }}</span><span class="pc" @click="page=Math.min(3,page+1)">›</span></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, reactive } from 'vue'
-
-const themes = [
-  { name:'figma', css:'p-figma', label:'Figama · 安徽地质博物馆', bg:'#EAEFFA', brand:'#2C3E6B', radius:6, cardBorder:'1px solid #D6DFF0', thBg:'#F2F5FC', thColor:'#2C3E6B', thBorder:'1px solid #D6DFF0', rowBorder:'#eef0f5', createBg:'#2C3E6B' },
-  { name:'elplus', css:'p-elplus', label:'Element Plus 默认', bg:'#f0f2f5', brand:'#409EFF', radius:4, cardBorder:'none', thBg:'#f5f7fa', thColor:'#303133', thBorder:'1px solid #ebeef5', rowBorder:'#ebeef5', createBg:'#409EFF' },
-  { name:'hybrid', css:'p-hybrid', label:'推荐 · 混合方案', bg:'#EAEFFA', brand:'#2C3E6B', radius:6, cardBorder:'1px solid #D6DFF0', thBg:'#F2F5FC', thColor:'#2C3E6B', thBorder:'1px solid #D6DFF0', rowBorder:'#eef0f5', createBg:'#2C3E6B', createShadow:'0 2px 8px rgba(44,62,107,.2)', badgeBg:'linear-gradient(135deg, #2C3E6B, #3D5A99)', badgeColor:'#fff', recommend:true }
-]
-
-const MOCK = [
-  { licenseId:'01JQNX...a1b2', tenantId:'craftlabs-wharf-prod', grantType:'perpetual', maxDevices:5, offlineGraceDays:7, status:'active' },
-  { licenseId:'01JQNY...c3d4', tenantId:'school-district-west', grantType:'subscription', maxDevices:20, offlineGraceDays:3, status:'active' },
-  { licenseId:'01JQNZ...e5f6', tenantId:'floating-project-042', grantType:'trial', maxDevices:2, offlineGraceDays:1, status:'expired' },
-  { licenseId:'01JQPA...g7h8', tenantId:'craftlabs-demo', grantType:'subscription', maxDevices:10, offlineGraceDays:7, status:'revoked' },
-  { licenseId:'01JQPB...i9j0', tenantId:'internal-test', grantType:'perpetual', maxDevices:1, offlineGraceDays:0, status:'active' },
-]
-
-const rows = ref([...MOCK]), total = ref(5), page = ref(1)
-const keyword = ref(''), filterStatus = ref('')
-const stats = reactive([{label:'总许可证',value:5},{label:'活跃',value:3},{label:'已吊销',value:1},{label:'已过期',value:1}])
-
-const list = computed(() => {
-  let r = [...rows.value]
-  if(keyword.value) r=r.filter(x=>x.licenseId.includes(keyword.value)||x.tenantId.includes(keyword.value))
-  if(filterStatus.value) r=r.filter(x=>x.status===filterStatus.value)
-  return r
-})
-function search(){}
-function create(){ alert('Demo: 签发许可证对话框') }
-function detail(r){ alert(`许可证: ${r.licenseId}\n租户: ${r.tenantId}\n状态: ${r.status}`) }
-function revoke(r){ if(confirm(`吊销 ${r.licenseId}？`)) r.status='revoked' }
-function typeL(t){ return ({subscription:'订阅',perpetual:'永久',trial:'试用'})[t]||t }
-function statusL(s){ return ({active:'活跃',revoked:'已吊销',expired:'已过期'})[s]||s }
-function statusS(s,t){
-  const b={display:'inline-block',padding:'2px 8px',borderRadius:'3px',fontSize:'12px',fontWeight:500}
-  if(s==='active'&&t.name==='elplus') return{...b,background:'#f0f9eb',color:'#67c23a',border:'1px solid #e1f3d8'}
-  if(s==='active') return{...b,background:'#E6F7EE',color:'#1A7A3A',border:'1px solid #A8E6C1'}
-  if(s==='revoked') return{...b,background:'#fef0f0',color:'#f56c6c',border:'1px solid #fbc4c4'}
-  return{...b,background:'#f4f4f5',color:'#909399',border:'1px solid #e9e9eb'}
-}
-</script>
-
-<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}</style>
-<style scoped>
-.panel{flex:1;overflow-y:auto;min-width:630px;position:relative}
-.badge{position:sticky;top:0;z-index:10;padding:7px 14px;font-size:13px;font-weight:600;text-align:center;letter-spacing:.3px}
-.panel:not(:last-child){border-right:2px solid rgba(0,0,0,.08)}
-.body{padding:12px 15px;display:flex;flex-direction:column;gap:10px}
-.stat-row{display:flex;gap:10px}
-.card{background:#fff;padding:13px 14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
-.stat-num{font-size:26px;font-weight:700;margin-bottom:2px;text-align:center}
-.stat-label{font-size:12px;color:#909399;text-align:center}
-.tool-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
-.search-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
-.input-box{border:1px solid #dcdfe6;border-radius:4px;padding:5px 10px;width:170px;display:flex;align-items:center;gap:5px;background:#fff}
-.input-icon{color:#c0c4cc;font-size:12px}
-.native-input{border:none;outline:none;flex:1;font-size:13px;color:#606266;background:transparent}
-.native-select{border:1px solid #dcdfe6;border-radius:4px;padding:5px 8px;font-size:13px;color:#606266;background:#fff}
-.btn{border:none;padding:5px 12px;font-size:13px;cursor:pointer;font-weight:500;white-space:nowrap}
-.btn-create{padding:5px 14px}
-.dt{width:100%;border-collapse:collapse;font-size:13px}
-.dt th{padding:9px 8px;text-align:left;font-weight:600;font-size:12px;white-space:nowrap}
-.dt td{padding:8px}
-.td-id{color:#303133;font-family:monospace;font-size:12px}
-.td2{color:#606266}
-.c80{width:65px}.c60{width:50px}.c70{width:60px}.c100{width:95px}
-.act{cursor:pointer;margin-right:10px;font-size:13px;user-select:none}
-.pager{padding:8px 14px;display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:12px;color:#909399;border-top:1px solid #ebeef5}
-.pc{cursor:pointer;font-weight:600;color:#606266}
-.recommend-tag{font-size:10px;margin-left:6px;border:1px solid currentColor;border-radius:3px;padding:0 4px;line-height:1.6;display:inline-block;vertical-align:1px}
-.p-hybrid .badge{text-shadow:0 1px 2px rgba(0,0,0,.15)}
-</style>