Files
apes-Authon-Web/docs/apes-Authon-Web-剥离方案.html
T

336 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>apes-Authon-Web 前端剥离方案</title>
<style>
:root {
--bg: #0d1117;
--card-bg: #161b22;
--border: #30363d;
--text: #c9d1d9;
--text-dim: #8b949e;
--accent: #58a6ff;
--green: #3fb950;
--red: #f85149;
--yellow: #d29922;
--orange: #db6d28;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; line-height: 1.7; padding: 40px 20px; }
.container { max-width: 960px; margin: 0 auto; }
h1 { font-size: 28px; color: var(--text); border-bottom: 2px solid var(--border); padding-bottom: 16px; margin-bottom: 32px; }
h2 { font-size: 22px; color: var(--accent); margin: 36px 0 16px; border-left: 4px solid var(--accent); padding-left: 12px; }
h3 { font-size: 17px; color: var(--text); margin: 24px 0 12px; }
p { margin-bottom: 12px; color: var(--text-dim); }
ul, ol { margin: 8px 0 16px 24px; }
li { margin-bottom: 6px; color: var(--text-dim); }
code { background: #1f2428; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', monospace; font-size: 13px; color: var(--accent); }
pre { background: #1f2428; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; }
pre code { background: none; padding: 0; color: var(--text); }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; font-size: 14px; }
th { background: var(--card-bg); color: var(--accent); }
td { color: var(--text-dim); }
.keep { color: var(--green); }
.remove { color: var(--red); }
.modify { color: var(--yellow); }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin: 20px 0; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-keep { background: rgba(63,185,80,0.15); color: var(--green); }
.badge-remove { background: rgba(248,81,73,0.15); color: var(--red); }
.badge-modify { background: rgba(210,153,34,0.15); color: var(--yellow); }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 20px 0; }
.summary-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; text-align: center; }
.summary-card .num { font-size: 32px; font-weight: 700; }
.summary-card .label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.note { background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; padding: 16px; margin: 16px 0; }
.note p { color: var(--text); margin: 0; }
.warning { background: rgba(248,81,73,0.08); border: 1px solid rgba(248,81,73,0.2); border-radius: 8px; padding: 16px; margin: 16px 0; }
.warning p { color: var(--red); margin: 0; }
</style>
</head>
<body>
<div class="container">
<h1>apes-Authon-Web 前端剥离方案</h1>
<div class="card">
<p style="font-size: 15px; color: var(--text);">从 saas-web 单体前端中提取纯净账权页面,构建独立的 <code>apes-Authon-Web</code> 前端仓库,与后端 <code>apes-Authon</code> 配合使用。</p>
<p style="font-size: 13px; color: var(--text-dim); margin-top: 8px;">源仓库:gitea-upload/web-master &nbsp;|&nbsp; 目标仓库:apes-Authon-Web &nbsp;|&nbsp; 技术栈:Vue 2.7 + Element UI + Vuex + Vue Router</p>
</div>
<div class="summary-grid">
<div class="summary-card"><div class="num" style="color: var(--green);">24</div><div class="label">账权页面保留</div></div>
<div class="summary-card"><div class="num" style="color: var(--red);">102</div><div class="label">业务页面删除</div></div>
<div class="summary-card"><div class="num" style="color: var(--yellow);">8</div><div class="label">框架文件修改</div></div>
</div>
<!-- ==================== Step 1: 保留清单 ==================== -->
<h2>Step 1: 保留清单(账权相关)</h2>
<h3>1.1 页面 (views/) — <span class="badge badge-keep">保留 24 个</span></h3>
<table>
<tr><th>目录</th><th>文件</th><th>功能</th></tr>
<tr><td>login/</td><td>index.vue</td><td>登录页(短信+密码+SSO</td></tr>
<tr><td>register/</td><td>index.vue</td><td>注册页</td></tr>
<tr><td>user/</td><td>list.vue, editProfile.vue, info.vue, pwd.vue, sso.vue</td><td>用户管理(列表/编辑/信息/改密/SSO配置)</td></tr>
<tr><td>permission/</td><td>menuList.vue, permissionList.vue, roleList.vue</td><td>权限管理(菜单/权限项/角色)</td></tr>
<tr><td>customer/</td><td>index.vue, detail.vue, editCustomer.vue, employee.vue, user.vue, myCustomer.vue, packages.vue, packageOverview.vue, quotaChangeLog.vue, uiConfig.vue, accessToken.vue, extendApplyList.vue</td><td>客户管理(12个页面)</td></tr>
<tr><td>app/</td><td>appList.vue, appDetail.vue</td><td>应用管理</td></tr>
<tr><td>404.vue</td><td></td><td>404 错误页</td></tr>
<tr><td>home/</td><td>index.vue</td><td>首页看板(保留作为默认着陆页)</td></tr>
</table>
<h3>1.2 API 文件 (api/) — <span class="badge badge-keep">保留 8 个</span></h3>
<table>
<tr><th>文件</th><th>行数</th><th>功能</th></tr>
<tr><td>user.js</td><td>99</td><td>登录/注册/用户管理/获取当前用户</td></tr>
<tr><td>permissionApi.js</td><td>104</td><td>菜单/权限/角色 CRUD</td></tr>
<tr><td>menuApi.js</td><td>79</td><td>动态路由构建(从后端菜单数据生成 Vue 路由)</td></tr>
<tr><td>appApi.js</td><td>31</td><td>应用管理 CRUD</td></tr>
<tr><td>customerApi.js</td><td>100</td><td>客户管理 CRUD + 用户关联</td></tr>
<tr><td>customerPackageApi.js</td><td>56</td><td>客户套餐管理</td></tr>
<tr><td>accessTokenApi.js</td><td>33</td><td>AccessToken 管理</td></tr>
<tr><td>organizationApi.js</td><td>43</td><td>组织架构管理</td></tr>
</table>
<h3>1.3 框架文件 — <span class="badge badge-keep">全量保留</span></h3>
<table>
<tr><th>类别</th><th>文件</th><th>说明</th></tr>
<tr><td>入口</td><td>main.js, App.vue</td><td>需修改(移除业务引用)</td></tr>
<tr><td>路由</td><td>router/index.js</td><td>需大幅修改(移除业务路由)</td></tr>
<tr><td>布局</td><td>layout/index.vue, Sidebar/, TagsView/, TopHeader.vue</td><td>全量保留</td></tr>
<tr><td>Store</td><td>store/index.js, getters.js, modules/user.js, settings.js, tagsView.js</td><td>user.js 需修改(移除 huobanToken</td></tr>
<tr><td>Utils</td><td>request.js, index.js, validate.js, get-page-title.js, msgUtil.js, public.js, constUtil.js, envUtil.js, autoRefresh.js, uiSizeUtil.js</td><td>request.js 需修改(移除 huoban 逻辑)</td></tr>
<tr><td>组件</td><td>breadcrumb.vue, tagView.vue, pageBox.vue, iframeView.vue</td><td>全量保留</td></tr>
<tr><td>样式</td><td>styles/index.scss, variables.scss, mixin.scss, sidebar.scss, transition.scss, element-ui.scss</td><td>保留(删除 tracing-screen.scss</td></tr>
<tr><td>构建配置</td><td>package.json, vue.config.js, babel.config.js, postcss.config.js, jsconfig.json</td><td>需修改(移除业务依赖)</td></tr>
<tr><td>静态资源</td><td>public/index.html, public/static/</td><td>保留</td></tr>
<tr><td>图片资源</td><td>assets/404_images/, assets/images/, assets/base.scss</td><td>保留</td></tr>
</table>
<!-- ==================== Step 2: 删除清单 ==================== -->
<h2>Step 2: 删除清单(业务相关)</h2>
<h3>2.1 页面删除 — <span class="badge badge-remove">102 个 .vue 文件</span></h3>
<table>
<tr><th>目录</th><th>文件数</th><th>业务域</th></tr>
<tr><td>fei/</td><td>22</td><td>智慧农业大屏/可视化</td></tr>
<tr><td>trace/</td><td>21</td><td>溯源管理</td></tr>
<tr><td>weight/</td><td>13</td><td>自助过磅系统</td></tr>
<tr><td>system/</td><td>9</td><td>系统配置(含业务配置项)</td></tr>
<tr><td>ai/</td><td>7</td><td>AI 助手/LLM</td></tr>
<tr><td>huoban/</td><td>7</td><td>伙伴云表单配置</td></tr>
<tr><td>tracing/</td><td>6</td><td>溯源追踪/路线</td></tr>
<tr><td>irrigation/</td><td>2</td><td>灌溉管理</td></tr>
<tr><td>其他</td><td>15</td><td>base, brain, certify, payment, park, waterFertilizer, fertigationDevice, extLink, preference, agreement, certifyAgreement, web, tracking</td></tr>
</table>
<h3>2.2 API 删除 — <span class="badge badge-remove">30+ 个 .js 文件</span></h3>
<table>
<tr><th>文件</th><th>业务域</th></tr>
<tr><td>aiSkill.js, llmAgentApi.js, llmAgentSkillApi.js, llmAgentToolApi.js, llmConversationApi.js, llmModelApi.js, llmToolApi.js, llmToolLogApi.js</td><td>AI/LLM</td></tr>
<tr><td>fei/</td><td>智慧农业</td></tr>
<tr><td>trace/, traceabilityApi.js, trackingConfigApi.js</td><td>溯源</td></tr>
<tr><td>weightApi.js</td><td>过磅</td></tr>
<tr><td>huobanTableApi.js</td><td>伙伴云</td></tr>
<tr><td>farmPlan.js, inspection.js, inputMaterial.js, irrigation.js, park.js, fertigationDevice.js, cameraInfo.js</td><td>农业/设备</td></tr>
<tr><td>quotaApi.js, packagePlanApi.js</td><td>配额/方案</td></tr>
<tr><td>n8nApi.js</td><td>N8N 工作流</td></tr>
<tr><td>extLink.js, userPreference.js</td><td>外链/偏好</td></tr>
</table>
<h3>2.3 Utils 删除</h3>
<table>
<tr><th>文件</th><th>原因</th></tr>
<tr><td>ezvizConfig.js, ezvizStream.js</td><td>萤石云视频流(业务专用)</td></tr>
<tr><td>tracingDisplay.js, tracingPermission.js, tracingQualPermission.js, tracingTestCertificate.js</td><td>溯源专用工具</td></tr>
<tr><td>huobanAuth.js</td><td>伙伴云鉴权(业务专用)</td></tr>
<tr><td>markdown.js, wangEditConfig.js</td><td>富文本编辑器配置(业务页面用)</td></tr>
<tr><td>tracingDisplay.js</td><td>溯源展示</td></tr>
</table>
<h3>2.4 组件删除</h3>
<table>
<tr><th>目录/文件</th><th>原因</th></tr>
<tr><td>components/ai/</td><td>AI 组件</td></tr>
<tr><td>components/brain/</td><td>大屏组件</td></tr>
<tr><td>components/tracing/</td><td>溯源组件</td></tr>
<tr><td>components/MarkdownContent.vue</td><td>富文本组件</td></tr>
</table>
<h3>2.5 样式删除</h3>
<table>
<tr><th>文件</th><th>原因</th></tr>
<tr><td>styles/tracing-screen.scss</td><td>溯源大屏样式</td></tr>
</table>
<h3>2.6 Config 删除</h3>
<table>
<tr><th>文件</th><th>原因</th></tr>
<tr><td>config/ezviz.js, config/ezviz.example.js</td><td>萤石云配置</td></tr>
<tr><td>config/tracingOpenKey.js</td><td>溯源 OpenKey 配置</td></tr>
</table>
<!-- ==================== Step 3: 文件修改清单 ==================== -->
<h2>Step 3: 文件修改清单</h2>
<h3>3.1 router/index.js <span class="badge badge-modify">大幅修改</span></h3>
<p>移除所有业务路由,只保留账权路由:</p>
<table>
<tr><th>操作</th><th>路由</th><th>说明</th></tr>
<tr><td class="keep">保留</td><td>/login, /register</td><td>登录/注册</td></tr>
<tr><td class="keep">保留</td><td>/user/* (list, pwd, info, sso, editProfile)</td><td>用户管理</td></tr>
<tr><td class="keep">保留</td><td>/base/* (app/list, app/detail, permission/*)</td><td>应用+权限管理</td></tr>
<tr><td class="keep">保留</td><td>/customer/* (index, detail, user, my, employee, edit)</td><td>客户管理</td></tr>
<tr><td class="keep">保留</td><td>/error/404, / (redirect to login)</td><td>404 + 默认重定向</td></tr>
<tr><td class="remove">删除</td><td>/certify, /certifyAgreement, /agreement</td><td>认证协议页</td></tr>
<tr><td class="remove">删除</td><td>/huoban/*</td><td>伙伴云配置</td></tr>
<tr><td class="remove">删除</td><td>/weight/*</td><td>过磅系统</td></tr>
<tr><td class="remove">删除</td><td>/tracing/*</td><td>溯源管理</td></tr>
<tr><td class="remove">删除</td><td>/fei_screen, /screen/fei, /brain, /tracing_screen</td><td>大屏入口</td></tr>
<tr><td class="remove">删除</td><td>/common (空 children)</td><td>无意义路由</td></tr>
</table>
<h3>3.2 main.js <span class="badge badge-modify">修改</span></h3>
<ul>
<li>移除 <code>import echarts</code><code>Vue.prototype.$echarts</code></li>
<li>移除 <code>import userPreferenceApi</code> 及相关调用(或保留为空操作)</li>
<li>清理 staticPages 数组,移除业务页面路径</li>
<li>保留核心逻辑:getCurrentUser → setLoginUser → getMyApps → loadAppMenus → matchCurrentPath</li>
</ul>
<h3>3.3 utils/request.js <span class="badge badge-modify">修改</span></h3>
<ul>
<li>删除 <code>isHuobanWebApi()</code> 函数</li>
<li>简化 <code>resolveRequestToken()</code>:直接返回 <code>localStorage.getItem('_token')</code></li>
<li>清理 staticPages 数组,移除业务页面路径</li>
</ul>
<h3>3.4 store/modules/user.js <span class="badge badge-modify">修改</span></h3>
<ul>
<li>删除 <code>huobanToken</code> state</li>
<li>删除 <code>SET_HUOBAN_TOKEN</code> mutation</li>
<li>删除 <code>setHuobanToken</code> action</li>
</ul>
<h3>3.5 store/getters.js <span class="badge badge-modify">修改</span></h3>
<p>当前 getters 引用了不存在的 moduleapp, permission, errorLog, common),需要清理:</p>
<ul>
<li>删除 <code>sidebar</code>, <code>size</code>, <code>device</code>(引用 state.app,不存在)</li>
<li>删除 <code>permission_routes</code>(引用 state.permission,不存在)</li>
<li>删除 <code>errorLogs</code>(引用 state.errorLog,不存在)</li>
<li>删除 <code>common_baseURL</code>(引用 state.common,不存在)</li>
<li>保留 <code>token</code>, <code>avatar</code>, <code>name</code>, <code>introduction</code>, <code>roles</code>(引用 state.user,但需确认 user 模块是否有这些字段)</li>
</ul>
<h3>3.6 vue.config.js <span class="badge badge-modify">修改</span></h3>
<ul>
<li>移除 <code>MonacoWebpackPlugin</code> 引用和使用</li>
<li>移除 n8n 代理配置</li>
<li>移除 externals 中的 <code>echarts</code><code>monaco-editor</code></li>
<li>移除 splitChunks 中的 monaco/echarts/wangEditor 缓存组</li>
<li>更新 <code>outputDir</code><code>"saas-web"</code> 改为 <code>"authon-web"</code></li>
<li>更新 <code>devServer.public</code> 域名</li>
</ul>
<h3>3.7 package.json <span class="badge badge-modify">修改</span></h3>
<p>移除业务专用依赖:</p>
<table>
<tr><th>操作</th><th>依赖</th><th>原因</th></tr>
<tr><td class="remove">删除</td><td>@amap/amap-jsapi-loader</td><td>高德地图</td></tr>
<tr><td class="remove">删除</td><td>@wangeditor/editor, editor-for-vue</td><td>富文本编辑器</td></tr>
<tr><td class="remove">删除</td><td>echarts</td><td>图表库</td></tr>
<tr><td class="remove">删除</td><td>html2canvas, jspdf</td><td>截图/PDF</td></tr>
<tr><td class="remove">删除</td><td>monaco-editor, monaco-editor-webpack-plugin, vue-monaco</td><td>代码编辑器</td></tr>
<tr><td class="remove">删除</td><td>marked, highlight.js</td><td>Markdown</td></tr>
<tr><td class="remove">删除</td><td>qrcodejs2</td><td>二维码</td></tr>
<tr><td class="remove">删除</td><td>fix, them, to</td><td>无效/可疑依赖</td></tr>
<tr><td class="keep">保留</td><td>axios, core-js, element-ui, vue, vue-router, vuex, nprogress, path-to-regexp, normalize.css, animate.css, svg-sprite-loader</td><td>框架必需</td></tr>
</table>
<h3>3.8 public/index.html <span class="badge badge-modify">修改</span></h3>
<ul>
<li>更新 <code>&lt;title&gt;</code> 为 "apes-Authon"</li>
<li>移除 echarts/monaco CDN 引用(如果有)</li>
</ul>
<!-- ==================== Step 4: 执行步骤 ==================== -->
<h2>Step 4: 执行步骤</h2>
<div class="card">
<ol>
<li><strong>创建仓库</strong>:在 Gitea 创建 <code>apes-Authon-Web</code> 仓库</li>
<li><strong>复制源码</strong><code>cp -r gitea-upload/web-master apes-Authon-Web</code></li>
<li><strong>删除业务页面</strong>:删除 20 个业务 views 目录</li>
<li><strong>删除业务 API</strong>:删除 30+ 个业务 api 文件</li>
<li><strong>删除业务组件</strong>:删除 ai/brain/tracing/MarkdownContent</li>
<li><strong>删除业务 Utils</strong>:删除 ezviz/tracing/huoban/markdown/wangEdit 文件</li>
<li><strong>删除业务 Config</strong>:删除 ezviz/tracingOpenKey 文件</li>
<li><strong>删除业务样式</strong>:删除 tracing-screen.scss</li>
<li><strong>修改 router/index.js</strong>:移除业务路由</li>
<li><strong>修改 main.js</strong>:移除 echarts/userPreference 引用</li>
<li><strong>修改 utils/request.js</strong>:移除 huoban 逻辑</li>
<li><strong>修改 store/user.js</strong>:移除 huobanToken</li>
<li><strong>修改 store/getters.js</strong>:清理不存在的 module 引用</li>
<li><strong>修改 vue.config.js</strong>:移除 monaco/echarts/n8n 配置</li>
<li><strong>修改 package.json</strong>:移除业务依赖,更新名称</li>
<li><strong>修改 public/index.html</strong>:更新标题</li>
<li><strong>编写 README.md</strong>:项目说明</li>
<li><strong>验证 build</strong><code>npm install && npm run build:prod</code></li>
<li><strong>Git 初始化 + 推送</strong>:提交到 Gitea</li>
</ol>
</div>
<!-- ==================== Step 5: 风险与注意事项 ==================== -->
<h2>Step 5: 风险与注意事项</h2>
<div class="warning">
<p><strong>⚠️ 依赖链风险</strong>:部分账权页面可能引用了业务组件或工具函数,需在删除后逐一排查编译错误。</p>
</div>
<div class="note">
<p><strong>已知潜在问题</strong></p>
<ul>
<li><code>store/getters.js</code> 引用了 4 个不存在的 store moduleapp/permission/errorLog/common),这些是模板残留,清理时需确保没有页面依赖这些 getter</li>
<li><code>menuApi.js</code> 中的 <code>handleMenu</code> 方法可能引用了业务页面的 <code>require.context</code> 映射,需确认是否能正常工作(当业务 .vue 文件被删除后)</li>
<li><code>customer/index.vue</code>(81KB)体量很大,可能包含业务联动逻辑,需检查是否引用了业务 API</li>
<li><code>views/base/imageUpload</code> 被放在 base 路由下,可能是公共图片上传组件,需要保留</li>
<li>需确认 <code>userPreference.js</code> 是否为账权功能(UI 尺寸偏好),如需要则保留 API 和 main.js 中的调用</li>
</ul>
</div>
<div class="card">
<h3>与后端 apes-Authon 的对应关系</h3>
<table>
<tr><th>后端 Controller</th><th>前端页面</th><th>API 文件</th></tr>
<tr><td>UserController</td><td>views/user/</td><td>user.js</td></tr>
<tr><td>PermissionController</td><td>views/permission/</td><td>permissionApi.js</td></tr>
<tr><td>CustomerController</td><td>views/customer/</td><td>customerApi.js</td></tr>
<tr><td>AppController</td><td>views/app/</td><td>appApi.js</td></tr>
<tr><td>MenuController(菜单接口)</td><td>menuApi.js 处理动态路由</td><td>menuApi.js</td></tr>
<tr><td>AccessTokenController</td><td>views/customer/accessToken.vue</td><td>accessTokenApi.js</td></tr>
<tr><td>SSOController</td><td>views/user/sso.vue, views/login/index.vue</td><td>user.js (ssoLogin)</td></tr>
<tr><td>CustomerPackageController</td><td>views/customer/packages.vue</td><td>customerPackageApi.js</td></tr>
</table>
</div>
<!-- ==================== 总结 ==================== -->
<h2>总结</h2>
<div class="summary-grid">
<div class="summary-card"><div class="num" style="color: var(--green);">24</div><div class="label">保留页面</div></div>
<div class="summary-card"><div class="num" style="color: var(--red);">102</div><div class="label">删除页面</div></div>
<div class="summary-card"><div class="num" style="color: var(--yellow);">8</div><div class="label">修改文件</div></div>
</div>
<p>剥离后 apes-Authon-Web 将是一个纯净的账权管理前端,包含:登录注册、用户管理、客户管理、权限管理(菜单/角色/权限项)、应用管理、AccessToken 管理、SSO 配置。与后端 apes-Authon 一一对应。</p>
<p style="margin-top: 24px; color: var(--text-dim); font-size: 13px;">方案生成时间:2026-08-09 | 源码版本:saas-web v1.0.0 | 框架:Vue 2.7 + Element UI 2.15</p>
</div>
</body>
</html>