duanshuwen
efab6d1398
修复Vue Admin布局中RouterView未绑定唯一key的问题，解决RBAC系统资源页面切换后内容不刷新的ISSUE-001故障，新增routeViewKey工具函数区分路由实例 完善路由配置，新增admin空路径路由，修复路由命名空路径告警 新增媒体管理、运维发布/重置页面，补全全站路由注册与动态路由过滤逻辑 新增玩法、线索、管家、系统资源管理的全套工具函数、业务组件及单元测试用例 修复后端app/seed.py中媒体资源重复检测未考虑会话内pending资源的bug，新增对应测试验证修复逻辑 修正alembic迁移版本0015的依赖关系，删除废弃的旧迁移文件 优化后端系统接口的字典序列化逻辑，简化重复代码 添加QA验收报告与相关测试截图，完善项目测试覆盖
64 lines
4.1 KiB
HTML
64 lines
4.1 KiB
HTML
<h2>WonderQ 三端重构：迁移路径</h2>
|
|
<p class="subtitle">先选择整体切换方式。三种方案都保留现有 MiniAPP 业务；差别在 Admin UI 与权限内核如何落地。</p>
|
|
|
|
<div class="section">
|
|
<div class="mockup">
|
|
<div class="mockup-header">目标形态（共同部分）</div>
|
|
<div class="mockup-body" style="display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px;align-items:center;text-align:center">
|
|
<div style="padding:14px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc">
|
|
<strong>Vue3 + Element Plus</strong><br><small>Admin UI / RBAC</small>
|
|
</div>
|
|
<div style="padding:18px;border:2px solid #2563eb;border-radius:10px;background:#eff6ff">
|
|
<strong>Python FastAPI</strong><br><small>JWT · Redis · PostgreSQL · Docker</small>
|
|
</div>
|
|
<div style="padding:14px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc">
|
|
<strong>Vue3 uni-app</strong><br><small>H5 / 微信小程序</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card" data-choice="parallel" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="min-height:180px;padding:14px;background:#f8fafc">
|
|
<div style="display:flex;gap:8px;height:145px">
|
|
<div style="flex:1;padding:10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#64748b">React UI<br><small>旧入口</small></div>
|
|
<div style="flex:1;padding:10px;border:2px solid #2563eb;border-radius:8px;background:#eff6ff;color:#1d4ed8">Vue3 UI<br><small>新入口</small></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>A · 并行迁移（推荐）</h3>
|
|
<p>新建 Vue3 管理端，按权限、首页、玩法、线索等垂直切片逐步替换；旧 React 端在过渡期继续可用。</p>
|
|
<div class="pros-cons"><div class="pros"><h4>优点</h4><ul><li>风险可控</li><li>可逐模块验收</li></ul></div><div class="cons"><h4>代价</h4><ul><li>短期维护两套 UI</li></ul></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="in-place" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="min-height:180px;padding:14px;background:#f8fafc">
|
|
<div style="height:145px;padding:10px;border:2px solid #f59e0b;border-radius:8px;background:#fffbeb;color:#92400e">同目录原地替换<br><small>React → Vue3 一次切换</small></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>B · 原地重写</h3>
|
|
<p>直接把现有 `WonderQ-Admin-UI` 替换为 Vue3 + Element Plus，复用后端契约并一次性切换入口。</p>
|
|
<div class="pros-cons"><div class="pros"><h4>优点</h4><ul><li>最终目录干净</li><li>没有双 UI</li></ul></div><div class="cons"><h4>代价</h4><ul><li>回滚成本高</li><li>业务功能容易遗漏</li></ul></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="kernel-first" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="min-height:180px;padding:14px;background:#f8fafc">
|
|
<div style="display:flex;flex-direction:column;gap:8px;height:145px">
|
|
<div style="padding:9px;border:2px solid #16a34a;border-radius:8px;background:#f0fdf4;color:#166534">RBAC + JWT/Redis + 审计</div>
|
|
<div style="padding:9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#64748b">Vue3 Admin UI 逐模块接入</div>
|
|
<div style="padding:9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#64748b">MiniAPP 保持现有 Public API</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>C · 权限内核优先</h3>
|
|
<p>先稳定后台用户、角色、菜单、按钮权限和 Redis 会话/黑名单，再以垂直业务切片重构 Vue3 UI。</p>
|
|
<div class="pros-cons"><div class="pros"><h4>优点</h4><ul><li>权限基础先固定</li><li>业务迁移边界清晰</li></ul></div><div class="cons"><h4>代价</h4><ul><li>前期后端工作较多</li><li>需先确定权限模型</li></ul></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="subtitle" style="margin-top:18px">请点击一个你倾向的方案；如果想组合方案，也可以在终端说明。</p>
|